BookStack Code Mirror - bookstack/blob - resources/js/wysiwyg/ui/defaults/forms/tables.ts

   1 import {
   2     EditorFormDefinition,
   3     EditorFormFieldDefinition,
   4     EditorFormTabs,
   5     EditorSelectFormFieldDefinition
   6 } from "../../framework/forms";
   7 import {EditorUiContext} from "../../framework/core";
   8
   9 const borderStyleInput: EditorSelectFormFieldDefinition = {
  10     label: 'Border style',
  11     name: 'border_style',
  12     type: 'select',
  13     valuesByLabel: {
  14         'Select...': '',
  15         "Solid": 'solid',
  16         "Dotted": 'dotted',
  17         "Dashed": 'dashed',
  18         "Double": 'double',
  19         "Groove": 'groove',
  20         "Ridge": 'ridge',
  21         "Inset": 'inset',
  22         "Outset": 'outset',
  23         "None": 'none',
  24         "Hidden": 'hidden',
  25     }
  26 };
  27
  28 const borderColorInput: EditorFormFieldDefinition = {
  29     label: 'Border color',
  30     name: 'border_color',
  31     type: 'text',
  32 };
  33
  34 const backgroundColorInput: EditorFormFieldDefinition = {
  35     label: 'Background color',
  36     name: 'background_color',
  37     type: 'text',
  38 };
  39
  40 const alignmentInput: EditorSelectFormFieldDefinition = {
  41     label: 'Alignment',
  42     name: 'align',
  43     type: 'select',
  44     valuesByLabel: {
  45         'None': '',
  46         'Left': 'left',
  47         'Center': 'center',
  48         'Right': 'right',
  49     }
  50 };
  51
  52 export const cellProperties: EditorFormDefinition = {
  53     submitText: 'Save',
  54     async action(formData, context: EditorUiContext) {
  55         // TODO
  56         return true;
  57     },
  58     fields: [
  59         {
  60             build() {
  61                 const generalFields: EditorFormFieldDefinition[] = [
  62                     {
  63                         label: 'Width',
  64                         name: 'width',
  65                         type: 'text',
  66                     },
  67                     {
  68                         label: 'Height',
  69                         name: 'height',
  70                         type: 'text',
  71                     },
  72                     {
  73                         label: 'Cell type',
  74                         name: 'type',
  75                         type: 'select',
  76                         valuesByLabel: {
  77                             'Cell': 'cell',
  78                             'Header cell': 'header',
  79                         }
  80                     } as EditorSelectFormFieldDefinition,
  81                     {
  82                         ...alignmentInput,
  83                         label: 'Horizontal align',
  84                         name: 'h_align',
  85                     },
  86                     {
  87                         label: 'Vertical align',
  88                         name: 'v_align',
  89                         type: 'select',
  90                         valuesByLabel: {
  91                             'None': '',
  92                             'Top': 'top',
  93                             'Middle': 'middle',
  94                             'Bottom': 'bottom',
  95                         }
  96                     } as EditorSelectFormFieldDefinition,
  97                 ];
  98
  99                 const advancedFields: EditorFormFieldDefinition[] = [
 100                     {
 101                         label: 'Border width',
 102                         name: 'border_width',
 103                         type: 'text',
 104                     },
 105                     borderStyleInput,
 106                     borderColorInput,
 107                     backgroundColorInput,
 108                 ];
 109
 110                 return new EditorFormTabs([
 111                     {
 112                         label: 'General',
 113                         contents: generalFields,
 114                     },
 115                     {
 116                         label: 'Advanced',
 117                         contents: advancedFields,
 118                     }
 119                 ])
 120             }
 121         },
 122     ],
 123 };
 124
 125 export const rowProperties: EditorFormDefinition = {
 126     submitText: 'Save',
 127     async action(formData, context: EditorUiContext) {
 128         // TODO
 129         return true;
 130     },
 131     fields: [
 132         {
 133             build() {
 134                 const generalFields: EditorFormFieldDefinition[] = [
 135                     {
 136                         label: 'Row type',
 137                         name: 'type',
 138                         type: 'select',
 139                         valuesByLabel: {
 140                             'Body': 'body',
 141                             'Header': 'header',
 142                             'Footer': 'footer',
 143                         }
 144                     } as EditorSelectFormFieldDefinition,
 145                     alignmentInput,
 146                     {
 147                         label: 'Height',
 148                         name: 'height',
 149                         type: 'text',
 150                     },
 151                 ];
 152
 153                 const advancedFields: EditorFormFieldDefinition[] = [
 154                     borderStyleInput,
 155                     borderColorInput,
 156                     backgroundColorInput,
 157                 ];
 158
 159                 return new EditorFormTabs([
 160                     {
 161                         label: 'General',
 162                         contents: generalFields,
 163                     },
 164                     {
 165                         label: 'Advanced',
 166                         contents: advancedFields,
 167                     }
 168                 ])
 169             }
 170         },
 171     ],
 172 };
 173
 174 export const tableProperties: EditorFormDefinition = {
 175     submitText: 'Save',
 176     async action(formData, context: EditorUiContext) {
 177         // TODO
 178         return true;
 179     },
 180     fields: [
 181         {
 182             build() {
 183                 const generalFields: EditorFormFieldDefinition[] = [
 184                     {
 185                         label: 'Width',
 186                         name: 'width',
 187                         type: 'text',
 188                     },
 189                     {
 190                         label: 'Height',
 191                         name: 'height',
 192                         type: 'text',
 193                     },
 194                     {
 195                         label: 'Cell spacing',
 196                         name: 'cell_spacing',
 197                         type: 'text',
 198                     },
 199                     {
 200                         label: 'Cell padding',
 201                         name: 'cell_padding',
 202                         type: 'text',
 203                     },
 204                     {
 205                         label: 'Border width',
 206                         name: 'border_width',
 207                         type: 'text',
 208                     },
 209                     {
 210                         label: 'caption',
 211                         name: 'height',
 212                         type: 'text', // TODO -
 213                     },
 214                     alignmentInput,
 215                 ];
 216
 217                 const advancedFields: EditorFormFieldDefinition[] = [
 218                     borderStyleInput,
 219                     borderColorInput,
 220                     backgroundColorInput,
 221                 ];
 222
 223                 return new EditorFormTabs([
 224                     {
 225                         label: 'General',
 226                         contents: generalFields,
 227                     },
 228                     {
 229                         label: 'Advanced',
 230                         contents: advancedFields,
 231                     }
 232                 ])
 233             }
 234         },
 235     ],
 236 };