@easy-editor/materials-dashboard-image 0.0.2 → 0.0.3

package/src/configure.ts

@@ -1,285 +1,186 @@
-/**
- * Image Configure
- * 图片组件配置
- */
-
-import type { Configure } from '@easy-editor/core'
-import type { UploadValue } from '@easy-editor/materials-shared'
-
-export const configure: Configure = {
-  props: [
-    {
-      type: 'group',
-      title: '属性',
-      setter: 'TabSetter',
-      items: [
-        {
-          type: 'group',
-          key: 'config',
-          title: '配置',
-          setter: {
-            componentName: 'CollapseSetter',
-            props: {
-              icon: false,
-            },
-          },
-          items: [
-            // 基础配置
-            {
-              name: 'id',
-              title: 'ID',
-              setter: 'NodeIdSetter',
-              extraProps: {
-                // @ts-expect-error label is not a valid extra prop
-                label: false,
-              },
-            },
-            {
-              name: 'title',
-              title: '标题',
-              setter: 'StringSetter',
-              extraProps: {
-                getValue(target) {
-                  return target.getExtraPropValue('title')
-                },
-                setValue(target, value) {
-                  target.setExtraPropValue('title', value)
-                },
-              },
-            },
-            {
-              type: 'group',
-              title: '基础属性',
-              setter: {
-                componentName: 'CollapseSetter',
-                props: {
-                  icon: false,
-                },
-              },
-              items: [
-                {
-                  name: 'rect',
-                  title: '位置尺寸',
-                  setter: 'RectSetter',
-                  extraProps: {
-                    getValue(target) {
-                      return target.getExtraPropValue('$dashboard.rect')
-                    },
-                    setValue(target, value) {
-                      target.setExtraPropValue('$dashboard.rect', value)
-                    },
-                  },
-                },
-              ],
-            },
-            // 组件配置
-            {
-              type: 'group',
-              title: '内容',
-              setter: {
-                componentName: 'CollapseSetter',
-                props: {
-                  icon: false,
-                },
-              },
-              items: [
-                {
-                  name: '__upload',
-                  title: '上传',
-                  setter: {
-                    componentName: 'UploadSetter',
-                    props: {
-                      accept: '.jpg,.jpeg,.png,.gif,.svg',
-                    },
-                  },
-                  extraProps: {
-                    setValue(target, value: UploadValue) {
-                      if (value) {
-                        const { base64, raw } = value
-                        if (base64) {
-                          target.parent.setPropValue('src', base64)
-                        }
-                        if (raw?.width) {
-                          target.parent.setExtraPropValue('$dashboard.rect.width', raw.width)
-                        }
-                        if (raw?.height) {
-                          target.parent.setExtraPropValue('$dashboard.rect.height', raw.height)
-                        }
-                      } else {
-                        target.parent.clearPropValue('src')
-                      }
-                    },
-                  },
-                },
-                {
-                  name: 'src',
-                  title: '图片地址',
-                  setter: 'StringSetter',
-                },
-                {
-                  name: 'alt',
-                  title: '替代文本',
-                  setter: 'StringSetter',
-                },
-              ],
-            },
-            {
-              type: 'group',
-              title: '加载',
-              setter: {
-                componentName: 'CollapseSetter',
-                props: {
-                  icon: false,
-                },
-              },
-              items: [
-                {
-                  name: 'lazyLoad',
-                  title: '懒加载',
-                  setter: 'SwitchSetter',
-                  extraProps: {
-                    defaultValue: false,
-                  },
-                },
-                {
-                  name: 'lazyLoadThreshold',
-                  title: '懒加载阈值',
-                  setter: {
-                    componentName: 'SliderSetter',
-                    props: {
-                      min: 0,
-                      max: 500,
-                      step: 50,
-                      suffix: 'px',
-                    },
-                  },
-                  extraProps: {
-                    defaultValue: 100,
-                  },
-                },
-                {
-                  name: 'placeholder',
-                  title: '占位图',
-                  setter: 'StringSetter',
-                },
-              ],
-            },
-            {
-              type: 'group',
-              title: '样式',
-              setter: {
-                componentName: 'CollapseSetter',
-                props: {
-                  icon: false,
-                },
-              },
-              items: [
-                {
-                  name: 'objectFit',
-                  title: '填充方式',
-                  setter: {
-                    componentName: 'SelectSetter',
-                    props: {
-                      options: [
-                        { label: '覆盖', value: 'cover' },
-                        { label: '包含', value: 'contain' },
-                        { label: '填充', value: 'fill' },
-                        { label: '无', value: 'none' },
-                      ],
-                    },
-                  },
-                  extraProps: {
-                    defaultValue: 'cover',
-                  },
-                },
-                {
-                  name: 'borderRadius',
-                  title: '圆角',
-                  setter: 'NumberSetter',
-                  extraProps: {
-                    defaultValue: 0,
-                  },
-                },
-                {
-                  name: 'borderStyle',
-                  title: '边框样式',
-                  setter: {
-                    componentName: 'SelectSetter',
-                    props: {
-                      options: [
-                        { label: '无', value: 'none' },
-                        { label: '霓虹', value: 'neon' },
-                        { label: '渐变', value: 'gradient' },
-                        { label: '科技感', value: 'tech' },
-                      ],
-                    },
-                  },
-                  extraProps: {
-                    defaultValue: 'none',
-                  },
-                },
-                {
-                  name: 'borderColor',
-                  title: '边框颜色',
-                  setter: 'ColorSetter',
-                  extraProps: {
-                    defaultValue: '#00d4ff',
-                  },
-                },
-                {
-                  name: 'shadow',
-                  title: '启用阴影',
-                  setter: 'SwitchSetter',
-                  extraProps: {
-                    defaultValue: false,
-                  },
-                },
-                {
-                  name: 'shadowColor',
-                  title: '阴影颜色',
-                  setter: 'ColorSetter',
-                  extraProps: {
-                    defaultValue: 'rgba(0, 212, 255, 0.3)',
-                  },
-                },
-              ],
-            },
-          ],
-        },
-        {
-          type: 'group',
-          key: 'data',
-          title: '数据',
-          items: [
-            {
-              name: 'dataBinding',
-              title: '数据绑定',
-              setter: 'DataBindingSetter',
-            },
-          ],
-        },
-        {
-          type: 'group',
-          key: 'advanced',
-          title: '高级',
-          items: [
-            {
-              name: 'condition',
-              title: '显隐控制',
-              setter: 'SwitchSetter',
-              extraProps: {
-                defaultValue: true,
-                supportVariable: true,
-              },
-            },
-          ],
-        },
-      ],
-    },
-  ],
-  component: {},
-  supports: {},
-  advanced: {},
-}
-
-export default configure
+/**
+ * Image Configure
+ * 图片组件配置
+ */
+
+import type { FieldConfig } from '@easy-editor/core'
+import type { UploadValue } from '@easy-editor/materials-shared'
+import { createCollapseGroup, createSimpleConfigure } from '@easy-editor/materials-shared'
+
+/** 组件配置 - 图片独有 */
+const componentConfigGroup: FieldConfig = createCollapseGroup(
+  '组件配置',
+  [
+    {
+      type: 'group',
+      title: '组件配置',
+      setter: 'SubTabSetter',
+      items: [
+        // 内容 Tab
+        {
+          type: 'group',
+          key: 'content',
+          title: '内容',
+          items: [
+            {
+              name: '__upload',
+              title: '上传',
+              setter: {
+                componentName: 'UploadSetter',
+                props: {
+                  accept: '.jpg,.jpeg,.png,.gif,.svg',
+                },
+              },
+              extraProps: {
+                setValue(target, value: UploadValue) {
+                  if (value) {
+                    const { base64, raw } = value
+                    if (base64) {
+                      target.parent.setPropValue('src', base64)
+                    }
+                    if (raw?.width) {
+                      target.parent.setExtraPropValue('$dashboard.rect.width', raw.width)
+                    }
+                    if (raw?.height) {
+                      target.parent.setExtraPropValue('$dashboard.rect.height', raw.height)
+                    }
+                  } else {
+                    target.parent.clearPropValue('src')
+                  }
+                },
+              },
+            },
+            {
+              name: 'src',
+              title: '图片地址',
+              setter: 'StringSetter',
+            },
+            {
+              name: 'alt',
+              title: '替代文本',
+              setter: 'StringSetter',
+            },
+          ],
+        },
+        // 加载 Tab
+        {
+          type: 'group',
+          key: 'loading',
+          title: '加载',
+          items: [
+            {
+              name: 'lazyLoad',
+              title: '懒加载',
+              setter: 'SwitchSetter',
+              extraProps: {
+                defaultValue: false,
+              },
+            },
+            {
+              name: 'lazyLoadThreshold',
+              title: '懒加载阈值',
+              setter: {
+                componentName: 'SliderSetter',
+                props: {
+                  min: 0,
+                  max: 500,
+                  step: 50,
+                  suffix: 'px',
+                },
+              },
+              extraProps: {
+                defaultValue: 100,
+              },
+            },
+            {
+              name: 'placeholder',
+              title: '占位图',
+              setter: 'StringSetter',
+            },
+          ],
+        },
+        // 样式 Tab
+        {
+          type: 'group',
+          key: 'style',
+          title: '样式',
+          items: [
+            {
+              name: 'objectFit',
+              title: '填充方式',
+              setter: {
+                componentName: 'SelectSetter',
+                props: {
+                  options: [
+                    { label: '覆盖', value: 'cover' },
+                    { label: '包含', value: 'contain' },
+                    { label: '填充', value: 'fill' },
+                    { label: '无', value: 'none' },
+                  ],
+                },
+              },
+              extraProps: {
+                defaultValue: 'cover',
+              },
+            },
+            {
+              name: 'borderRadius',
+              title: '圆角',
+              setter: 'NumberSetter',
+              extraProps: {
+                defaultValue: 0,
+              },
+            },
+            {
+              name: 'borderStyle',
+              title: '边框样式',
+              setter: {
+                componentName: 'SelectSetter',
+                props: {
+                  options: [
+                    { label: '无', value: 'none' },
+                    { label: '霓虹', value: 'neon' },
+                    { label: '渐变', value: 'gradient' },
+                    { label: '科技感', value: 'tech' },
+                  ],
+                },
+              },
+              extraProps: {
+                defaultValue: 'none',
+              },
+            },
+            {
+              name: 'borderColor',
+              title: '边框颜色',
+              setter: 'ColorSetter',
+              extraProps: {
+                defaultValue: '#00d4ff',
+              },
+            },
+            {
+              name: 'shadow',
+              title: '启用阴影',
+              setter: 'SwitchSetter',
+              extraProps: {
+                defaultValue: false,
+              },
+            },
+            {
+              name: 'shadowColor',
+              title: '阴影颜色',
+              setter: 'ColorSetter',
+              extraProps: {
+                defaultValue: 'rgba(0, 212, 255, 0.3)',
+              },
+            },
+          ],
+        },
+      ],
+    },
+  ],
+  {
+    padding: '6px 16px 12px',
+  },
+)
+
+export const configure = createSimpleConfigure(componentConfigGroup)

package/src/index.tsx

@@ -1,7 +1,7 @@
-/**
- * Image Entry
- * 图片组件入口
- */
-
-export { Image as component } from './component'
-export { default as meta } from './meta'
+/**
+ * Image Entry
+ * 图片组件入口
+ */
+
+export { Image as component } from './component'
+export { meta } from './meta'

package/src/meta.ts

@@ -1,28 +1,26 @@
-/**
- * Image Meta
- * 图片组件元数据
- */
-
-import type { ComponentMetadata } from '@easy-editor/core'
-import { MaterialGroup } from '@easy-editor/materials-shared'
-import { COMPONENT_NAME, PACKAGE_NAME } from './constants'
-import configure from './configure'
-import snippets from './snippets'
-import pkg from '../package.json'
-
-export const meta: ComponentMetadata = {
-  componentName: COMPONENT_NAME,
-  title: '图片',
-  group: MaterialGroup.MEDIA,
-  devMode: 'proCode',
-  npm: {
-    package: PACKAGE_NAME,
-    version: pkg.version,
-    globalName: COMPONENT_NAME,
-    componentName: COMPONENT_NAME,
-  },
-  snippets,
-  configure,
-}
-
-export default meta
+/**
+ * Image Meta
+ * 图片组件元数据
+ */
+
+import type { ComponentMetadata } from '@easy-editor/core'
+import { MaterialGroup } from '@easy-editor/materials-shared'
+import { COMPONENT_NAME, PACKAGE_NAME } from './constants'
+import { configure } from './configure'
+import { snippets } from './snippets'
+import pkg from '../package.json'
+
+export const meta: ComponentMetadata = {
+  componentName: COMPONENT_NAME,
+  title: '图片',
+  group: MaterialGroup.MEDIA,
+  devMode: 'proCode',
+  npm: {
+    package: PACKAGE_NAME,
+    version: pkg.version,
+    globalName: COMPONENT_NAME,
+    componentName: COMPONENT_NAME,
+  },
+  snippets,
+  configure,
+}

package/src/snippets.ts

@@ -1,49 +1,55 @@
-/**
- * Image Snippets
- * 图片组件代码片段
- */
-
-import type { Snippet } from '@easy-editor/core'
-import { COMPONENT_NAME } from './constants'
-
-export const snippets: Snippet[] = [
-  {
-    title: '普通图片',
-    screenshot: '',
-    schema: {
-      componentName: COMPONENT_NAME,
-      props: {
-        alt: '图片',
-        objectFit: 'contain',
-        borderRadius: 0,
-      },
-      $dashboard: {
-        rect: {
-          width: 200,
-          height: 180,
-        },
-      },
-    },
-  },
-  {
-    title: '圆角图片',
-    screenshot: '',
-    schema: {
-      componentName: COMPONENT_NAME,
-      props: {
-        alt: '圆角图片',
-        objectFit: 'contain',
-        borderRadius: 100,
-        borderStyle: 'tech',
-      },
-      $dashboard: {
-        rect: {
-          width: 200,
-          height: 200,
-        },
-      },
-    },
-  },
-]
-
-export default snippets
+/**
+ * Image Snippets
+ * 图片组件代码片段
+ */
+
+import type { Snippet } from '@easy-editor/core'
+import { COMPONENT_NAME } from './constants'
+
+export const snippets: Snippet[] = [
+  {
+    title: '普通图片',
+    screenshot: '',
+    schema: {
+      componentName: COMPONENT_NAME,
+      title: '普通图片',
+      props: {
+        alt: '图片',
+        objectFit: 'contain',
+        borderRadius: 0,
+        rotation: 0,
+        opacity: 100,
+        background: 'transparent',
+      },
+      $dashboard: {
+        rect: {
+          width: 200,
+          height: 180,
+        },
+      },
+    },
+  },
+  {
+    title: '圆角图片',
+    screenshot: '',
+    schema: {
+      componentName: COMPONENT_NAME,
+      title: '圆角图片',
+      props: {
+        alt: '圆角图片',
+        objectFit: 'contain',
+        borderRadius: 100,
+        borderStyle: 'tech',
+        rotation: 0,
+        opacity: 100,
+        background: 'transparent',
+      },
+      $dashboard: {
+        rect: {
+          width: 200,
+          height: 200,
+        },
+      },
+    },
+  },
+]