@tmagic/editor 1.5.2 → 1.5.3

package/src/utils/props.ts

@@ -46,305 +46,60 @@ export const styleTabConfig: TabPaneConfig = {
   items: [
     {
       name: 'style',
+      labelWidth: '100px',
+      type: 'style-setter',
       items: [
         {
-          type: 'fieldset',
-          legend: '位置',
-          items: [
-            {
-              type: 'data-source-field-select',
-              name: 'position',
-              text: '固定定位',
-              labelPosition: 'left',
-              checkStrictly: false,
-              dataSourceFieldType: ['string'],
-              fieldConfig: {
-                type: 'checkbox',
-                activeValue: 'fixed',
-                inactiveValue: 'absolute',
-                defaultValue: 'absolute',
-              },
-            },
-            {
-              type: 'data-source-field-select',
-              name: 'left',
-              text: 'left',
-              checkStrictly: false,
-              dataSourceFieldType: ['string', 'number'],
-              fieldConfig: {
-                type: 'text',
-              },
-            },
-            {
-              type: 'data-source-field-select',
-              name: 'top',
-              text: 'top',
-              checkStrictly: false,
-              dataSourceFieldType: ['string', 'number'],
-              fieldConfig: {
-                type: 'text',
-              },
-              disabled: (_vm: FormState, { model }: any) =>
-                model.position === 'fixed' && model._magic_position === 'fixedBottom',
-            },
-            {
-              type: 'data-source-field-select',
-              name: 'right',
-              text: 'right',
-              checkStrictly: false,
-              dataSourceFieldType: ['string', 'number'],
-              fieldConfig: {
-                type: 'text',
-              },
-            },
-            {
-              type: 'data-source-field-select',
-              name: 'bottom',
-              text: 'bottom',
-              checkStrictly: false,
-              dataSourceFieldType: ['string', 'number'],
-              fieldConfig: {
-                type: 'text',
-              },
-              disabled: (_vm: FormState, { model }: any) =>
-                model.position === 'fixed' && model._magic_position === 'fixedTop',
-            },
-          ],
-        },
-        {
-          type: 'fieldset',
-          legend: '盒子',
-          items: [
-            {
-              type: 'data-source-field-select',
-              name: 'display',
-              text: 'display',
-              checkStrictly: false,
-              dataSourceFieldType: ['string'],
-              fieldConfig: {
-                type: 'select',
-                clearable: true,
-                allowCreate: true,
-                options: [
-                  { text: 'block', value: 'block' },
-                  { text: 'flex', value: 'flex' },
-                  { text: 'none', value: 'none' },
-                  { text: 'inline-block', value: 'inline-block' },
-                  { text: 'grid', value: 'grid' },
-                  { text: 'inline', value: 'inline' },
-                  { text: 'initial', value: 'initial' },
-                ],
-              },
-            },
-            {
-              type: 'data-source-field-select',
-              name: 'width',
-              text: '宽度',
-              checkStrictly: false,
-              dataSourceFieldType: ['string', 'number'],
-              fieldConfig: {
-                type: 'text',
-              },
-            },
-            {
-              type: 'data-source-field-select',
-              name: 'height',
-              text: '高度',
-              checkStrictly: false,
-              dataSourceFieldType: ['string', 'number'],
-              fieldConfig: {
-                type: 'text',
-              },
-            },
-            {
-              type: 'data-source-field-select',
-              text: 'overflow',
-              name: 'overflow',
-              checkStrictly: false,
-              dataSourceFieldType: ['string'],
-              fieldConfig: {
-                type: 'select',
-                clearable: true,
-                allowCreate: true,
-                options: [
-                  { text: 'visible', value: 'visible' },
-                  { text: 'hidden', value: 'hidden' },
-                  { text: 'clip', value: 'clip' },
-                  { text: 'scroll', value: 'scroll' },
-                  { text: 'auto', value: 'auto' },
-                  { text: 'overlay', value: 'overlay' },
-                  { text: 'initial', value: 'initial' },
-                ],
-              },
-            },
-          ],
-        },
-        {
-          type: 'fieldset',
-          legend: '边框',
-          items: [
-            {
-              type: 'data-source-field-select',
-              name: 'borderWidth',
-              text: '宽度',
-              defaultValue: '0',
-              checkStrictly: false,
-              dataSourceFieldType: ['string', 'number'],
-              fieldConfig: {
-                type: 'text',
-              },
-            },
-            {
-              type: 'data-source-field-select',
-              name: 'borderColor',
-              text: '颜色',
-              checkStrictly: false,
-              dataSourceFieldType: ['string'],
-              fieldConfig: {
-                type: 'text',
-              },
-            },
-            {
-              type: 'data-source-field-select',
-              name: 'borderStyle',
-              text: '样式',
-              defaultValue: 'none',
-              checkStrictly: false,
-              dataSourceFieldType: ['string'],
-              fieldConfig: {
-                type: 'select',
-                options: [
-                  { text: 'none', value: 'none' },
-                  { text: 'hidden', value: 'hidden' },
-                  { text: 'dotted', value: 'dotted' },
-                  { text: 'dashed', value: 'dashed' },
-                  { text: 'solid', value: 'solid' },
-                  { text: 'double', value: 'double' },
-                  { text: 'groove', value: 'groove' },
-                  { text: 'ridge', value: 'ridge' },
-                  { text: 'inset', value: 'inset' },
-                  { text: 'outset', value: 'outset' },
-                ],
-              },
-            },
-          ],
-        },
-        {
-          type: 'fieldset',
-          legend: '背景',
-          items: [
-            {
-              type: 'data-source-field-select',
-              name: 'backgroundImage',
-              text: '背景图',
-              checkStrictly: false,
-              dataSourceFieldType: ['string'],
-              fieldConfig: {
-                type: 'img-upload',
-              },
-            },
-            {
-              type: 'data-source-field-select',
-              name: 'backgroundColor',
-              text: '背景颜色',
-              checkStrictly: false,
-              dataSourceFieldType: ['string'],
-              fieldConfig: {
-                type: 'colorPicker',
-              },
-            },
-            {
-              type: 'data-source-field-select',
-              name: 'backgroundRepeat',
-              text: '背景图重复',
-              defaultValue: 'no-repeat',
-              checkStrictly: false,
-              dataSourceFieldType: ['string'],
-              fieldConfig: {
-                type: 'select',
-                options: [
-                  { text: 'repeat', value: 'repeat' },
-                  { text: 'repeat-x', value: 'repeat-x' },
-                  { text: 'repeat-y', value: 'repeat-y' },
-                  { text: 'no-repeat', value: 'no-repeat' },
-                  { text: 'inherit', value: 'inherit' },
-                ],
-              },
-            },
-            {
-              type: 'data-source-field-select',
-              name: 'backgroundSize',
-              text: '背景图大小',
-              defaultValue: '100% 100%',
-              checkStrictly: false,
-              dataSourceFieldType: ['string'],
-              fieldConfig: {
-                type: 'text',
-              },
-            },
-          ],
-        },
-        {
-          type: 'fieldset',
-          legend: '字体',
-          items: [
-            {
-              type: 'data-source-field-select',
-              name: 'color',
-              text: '颜色',
-              checkStrictly: false,
-              dataSourceFieldType: ['string'],
-              fieldConfig: {
-                type: 'colorPicker',
-              },
-            },
-            {
-              type: 'data-source-field-select',
-              name: 'fontSize',
-              text: '大小',
-              checkStrictly: false,
-              dataSourceFieldType: ['string', 'number'],
-              fieldConfig: {
-                type: 'text',
-              },
-            },
-            {
-              type: 'data-source-field-select',
-              name: 'fontWeight',
-              text: '粗细',
-              checkStrictly: false,
-              dataSourceFieldType: ['string', 'number'],
-              fieldConfig: {
-                type: 'text',
-              },
-            },
-          ],
-        },
-        {
-          type: 'fieldset',
-          legend: '变形',
-          name: 'transform',
-          items: [
-            {
-              type: 'data-source-field-select',
-              name: 'rotate',
-              text: '旋转角度',
-              checkStrictly: false,
-              dataSourceFieldType: ['string'],
-              fieldConfig: {
-                type: 'text',
-              },
-            },
-            {
-              type: 'data-source-field-select',
-              name: 'scale',
-              text: '缩放',
-              checkStrictly: false,
-              dataSourceFieldType: ['number', 'string'],
-              fieldConfig: {
-                type: 'text',
-              },
-            },
+          names: [
+            'display',
+            'flexDirection',
+            'justifyContent',
+            'alignItems',
+            'flexWrap',
+            'marginTop',
+            'marginRight',
+            'marginBottom',
+            'marginLeft',
+            'paddingTop',
+            'paddingRight',
+            'paddingBottom',
+            'paddingLeft',
+            'width',
+            'height',
+            'overflow',
+            'fontSize',
+            'lineHeight',
+            'fontWeight',
+            'color',
+            'textAlign',
+            'backgroundColor',
+            'backgroundImage',
+            'backgroundSize',
+            'backgroundPosition',
+            'backgroundRepeat',
+            'position',
+            'zIndex',
+            'top',
+            'right',
+            'bottom',
+            'left',
+            'borderRadius',
+            'borderTopWidth',
+            'borderTopStyle',
+            'borderTopColor',
+            'borderRightColor',
+            'borderRightWidth',
+            'borderRightStyle',
+            'borderRightColor',
+            'borderBottomWidth',
+            'borderBottomStyle',
+            'borderBottomColor',
+            'borderLeftStyle',
+            'borderLeftWidth',
+            'borderLeftColor',
+            'borderWidth',
+            'borderStyle',
+            'borderColor',
           ],
         },
       ],