@easy-editor/materials-dashboard-progress 0.0.3 → 0.0.5

package/CHANGELOG.md

@@ -1,13 +1,27 @@
-# @easy-editor/materials-dashboard-progress
-
-## 0.0.3
-
-### Patch Changes
-
-- fix: build error
-
-## 0.0.2
-
-### Patch Changes
-
-- feat: new setters
+# @easy-editor/materials-dashboard-progress
+
+## 0.0.5
+
+### Patch Changes
+
+- fix: component export error
+
+## 0.0.4
+
+### Patch Changes
+
+- perf: configure & datasource
+- Updated dependencies
+  - @easy-editor/materials-shared@0.0.1
+
+## 0.0.3
+
+### Patch Changes
+
+- fix: build error
+
+## 0.0.2
+
+### Patch Changes
+
+- feat: new setters

package/easypack.config.ts

@@ -0,0 +1,10 @@
+/**
+ * @easy-editor/easypack configuration
+ * @type {import('@easy-editor/easypack').EasypackConfig}
+ */
+export default {
+  preset: 'material',
+  dev: {
+    port: 5001,
+  },
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easy-editor/materials-dashboard-progress",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "Progress component for EasyEditor dashboard",
   "type": "module",
   "main": "dist/index.js",
@@ -46,20 +46,16 @@
   },
   "dependencies": {
     "recharts": "2.15.3",
-    "@easy-editor/materials-shared": "0.0.0"
+    "@easy-editor/materials-shared": "0.0.1"
   },
   "scripts": {
-    "dev": "vite",
+    "dev": "easypack dev",
     "dev:debug": "vite --port 5012",
     "format": "biome format --write .",
     "lint": "biome check .",
     "build": "npm-run-all -nl build:*",
     "build:clean": "rimraf dist/",
-    "build:js": "rollup -c",
-    "build:types": "pnpm types",
-    "types": "npm-run-all -nl types:*",
-    "types:src": "tsc --project tsconfig.build.json",
-    "test-types": "tsc --project tsconfig.test.json"
+    "build:js": "easypack build"
   },
   "module": "dist/index.esm.js",
   "unpkg": "dist/index.min.js"

package/src/component.tsx

@@ -1,15 +1,13 @@
 /**
  * Progress Component
- * 进度组件 - 支持环形和线性进度条
+ * 进度组件 - 支持数据源绑定和事件交互
  */
 
-import { useId, useRef, useEffect, useState, type CSSProperties, type Ref } from 'react'
+import { useId, useRef, useEffect, useState, useMemo, type CSSProperties } from 'react'
+import { type MaterialComponet, useDataSource } from '@easy-editor/materials-shared'
 import styles from './component.module.css'
 
-export interface ProgressProps {
-  ref?: Ref<HTMLDivElement>
-  /** 当前值 */
-  value?: number
+export interface ProgressProps extends MaterialComponet {
   /** 最大值 */
   maxValue?: number
   /** 进度条类型 */
@@ -32,8 +30,14 @@ export interface ProgressProps {
   gradientEnable?: boolean
   /** 渐变颜色 [起始色, 结束色] */
   gradientColors?: [string, string]
-  /** 外部样式 */
-  style?: CSSProperties
+  /** 点击事件 */
+  onClick?: (e: React.MouseEvent) => void
+  /** 双击事件 */
+  onDoubleClick?: (e: React.MouseEvent) => void
+  /** 鼠标进入 */
+  onMouseEnter?: (e: React.MouseEvent) => void
+  /** 鼠标离开 */
+  onMouseLeave?: (e: React.MouseEvent) => void
 }
 
 // 格式化数值
@@ -200,7 +204,12 @@ const BarProgress = ({
 
 export const Progress: React.FC<ProgressProps> = ({
   ref,
-  value = 0,
+  $data,
+  __dataSource,
+  rotation = 0,
+  opacity = 100,
+  background = 'transparent',
+  style: externalStyle,
   maxValue = 100,
   type = 'ring',
   showValue = true,
@@ -212,17 +221,44 @@ export const Progress: React.FC<ProgressProps> = ({
   progressColor = '#00d4ff',
   gradientEnable = false,
   gradientColors = ['#00d4ff', '#9b59b6'],
-  style: externalStyle,
+  onClick,
+  onDoubleClick,
+  onMouseEnter,
+  onMouseLeave,
 }) => {
   const gradientId = useId()
 
+  // 解析数据源
+  const dataSource = useDataSource($data, __dataSource)
+  const value = useMemo<number>(() => {
+    if (dataSource.length > 0 && typeof dataSource[0]?.value === 'number') {
+      return dataSource[0].value
+    }
+    return 0
+  }, [dataSource])
+
   const normalizedValue = Math.min(Math.max(value, 0), maxValue)
   const percentage = (normalizedValue / maxValue) * 100
   const displayColor = gradientEnable ? gradientColors[0] : progressColor
 
+  const wrapperStyle: CSSProperties = {
+    transform: rotation !== 0 ? `rotate(${rotation}deg)` : undefined,
+    opacity: opacity / 100,
+    backgroundColor: background,
+    ...externalStyle,
+  }
+
   if (type === 'ring') {
     return (
-      <div className={styles.wrapper} ref={ref} style={externalStyle}>
+      <div
+        className={styles.wrapper}
+        onClick={onClick}
+        onDoubleClick={onDoubleClick}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+        ref={ref}
+        style={wrapperStyle}
+      >
         <RingProgress
           displayColor={displayColor}
           gradientColors={gradientColors}
@@ -242,7 +278,15 @@ export const Progress: React.FC<ProgressProps> = ({
   }
 
   return (
-    <div className={styles.wrapper} ref={ref} style={externalStyle}>
+    <div
+      className={styles.wrapper}
+      onClick={onClick}
+      onDoubleClick={onDoubleClick}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      ref={ref}
+      style={wrapperStyle}
+    >
       <BarProgress
         displayColor={displayColor}
         gradientColors={gradientColors}

package/src/configure.ts

@@ -1,265 +1,168 @@
-/**
- * Progress Configure
- * 进度条组件配置
- */
-
-import type { Configure } from '@easy-editor/core'
-
-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: 'value',
-                  title: '当前值',
-                  setter: 'NumberSetter',
-                  extraProps: {
-                    defaultValue: 0,
-                  },
-                },
-                {
-                  name: 'maxValue',
-                  title: '最大值',
-                  setter: 'NumberSetter',
-                  extraProps: {
-                    defaultValue: 100,
-                  },
-                },
-                {
-                  name: 'valueFormat',
-                  title: '值格式',
-                  setter: {
-                    componentName: 'SelectSetter',
-                    props: {
-                      options: [
-                        { label: '百分比', value: 'percent' },
-                        { label: '数值', value: 'number' },
-                      ],
-                    },
-                  },
-                  extraProps: {
-                    defaultValue: 'percent',
-                  },
-                },
-              ],
-            },
-            {
-              type: 'group',
-              title: '显示',
-              setter: {
-                componentName: 'CollapseSetter',
-                props: {
-                  icon: false,
-                },
-              },
-              items: [
-                {
-                  name: 'type',
-                  title: '进度条类型',
-                  setter: {
-                    componentName: 'SelectSetter',
-                    props: {
-                      options: [
-                        { label: '环形', value: 'ring' },
-                        { label: '线性', value: 'bar' },
-                      ],
-                    },
-                  },
-                  extraProps: {
-                    defaultValue: 'ring',
-                  },
-                },
-                {
-                  name: 'showValue',
-                  title: '显示数值',
-                  setter: 'SwitchSetter',
-                  extraProps: {
-                    defaultValue: true,
-                  },
-                },
-                {
-                  name: 'showLabel',
-                  title: '显示标签',
-                  setter: 'SwitchSetter',
-                  extraProps: {
-                    defaultValue: false,
-                  },
-                },
-                {
-                  name: 'label',
-                  title: '标签文本',
-                  setter: 'StringSetter',
-                },
-              ],
-            },
-            {
-              type: 'group',
-              title: '样式',
-              setter: {
-                componentName: 'CollapseSetter',
-                props: {
-                  icon: false,
-                },
-              },
-              items: [
-                {
-                  name: 'strokeWidthRatio',
-                  title: '线条粗细',
-                  setter: {
-                    componentName: 'SliderSetter',
-                    props: {
-                      min: 0.02,
-                      max: 0.2,
-                      step: 0.01,
-                    },
-                  },
-                  extraProps: {
-                    defaultValue: 0.07,
-                  },
-                },
-                {
-                  name: 'trackColor',
-                  title: '轨道颜色',
-                  setter: 'ColorSetter',
-                  extraProps: {
-                    defaultValue: 'rgba(255, 255, 255, 0.1)',
-                  },
-                },
-                {
-                  name: 'progressColor',
-                  title: '进度颜色',
-                  setter: 'ColorSetter',
-                  extraProps: {
-                    defaultValue: '#00ffff',
-                  },
-                },
-                {
-                  name: 'gradientEnable',
-                  title: '启用渐变',
-                  setter: 'SwitchSetter',
-                  extraProps: {
-                    defaultValue: false,
-                  },
-                },
-                {
-                  name: 'gradientColors',
-                  title: '渐变颜色',
-                  setter: 'ColorSetter',
-                  extraProps: {
-                    defaultValue: ['#00d4ff', '#9b59b6'],
-                  },
-                },
-              ],
-            },
-          ],
-        },
-        {
-          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
+/**
+ * Progress Configure
+ * 进度条组件配置
+ */
+
+import type { FieldConfig } from '@easy-editor/core'
+import { createCollapseGroup, createDataConfigGroup, createStandardConfigure } from '@easy-editor/materials-shared'
+
+/** 组件配置 - 进度条独有 */
+const componentConfigGroup: FieldConfig = createCollapseGroup(
+  '组件配置',
+  [
+    {
+      type: 'group',
+      title: '组件配置',
+      setter: 'SubTabSetter',
+      items: [
+        // 数值 Tab
+        {
+          type: 'group',
+          key: 'value',
+          title: '数值',
+          items: [
+            {
+              name: 'maxValue',
+              title: '最大值',
+              setter: 'NumberSetter',
+              extraProps: {
+                defaultValue: 100,
+              },
+            },
+            {
+              name: 'valueFormat',
+              title: '值格式',
+              setter: {
+                componentName: 'SelectSetter',
+                props: {
+                  options: [
+                    { label: '百分比', value: 'percent' },
+                    { label: '数值', value: 'number' },
+                  ],
+                },
+              },
+              extraProps: {
+                defaultValue: 'percent',
+              },
+            },
+          ],
+        },
+        // 显示 Tab
+        {
+          type: 'group',
+          key: 'display',
+          title: '显示',
+          items: [
+            {
+              name: 'type',
+              title: '进度条类型',
+              setter: {
+                componentName: 'SegmentedSetter',
+                props: {
+                  options: [
+                    { label: '环形', value: 'ring' },
+                    { label: '线性', value: 'bar' },
+                  ],
+                },
+              },
+              extraProps: {
+                defaultValue: 'ring',
+              },
+            },
+            {
+              name: 'showValue',
+              title: '显示数值',
+              setter: 'SwitchSetter',
+              extraProps: {
+                defaultValue: true,
+              },
+            },
+            {
+              name: 'showLabel',
+              title: '显示标签',
+              setter: 'SwitchSetter',
+              extraProps: {
+                defaultValue: false,
+              },
+            },
+            {
+              name: 'label',
+              title: '标签文本',
+              setter: 'StringSetter',
+            },
+          ],
+        },
+        // 样式 Tab
+        {
+          type: 'group',
+          key: 'style',
+          title: '样式',
+          items: [
+            {
+              name: 'strokeWidthRatio',
+              title: '线条粗细',
+              setter: {
+                componentName: 'SliderSetter',
+                props: {
+                  min: 0.02,
+                  max: 0.2,
+                  step: 0.01,
+                },
+              },
+              extraProps: {
+                defaultValue: 0.07,
+              },
+            },
+            {
+              name: 'trackColor',
+              title: '轨道颜色',
+              setter: 'ColorSetter',
+              extraProps: {
+                defaultValue: 'rgba(255, 255, 255, 0.1)',
+              },
+            },
+            {
+              name: 'progressColor',
+              title: '进度颜色',
+              setter: 'ColorSetter',
+              extraProps: {
+                defaultValue: '#00ffff',
+              },
+            },
+            {
+              name: 'gradientEnable',
+              title: '启用渐变',
+              setter: 'SwitchSetter',
+              extraProps: {
+                defaultValue: false,
+              },
+            },
+            {
+              name: 'gradientColors',
+              title: '渐变颜色',
+              setter: {
+                componentName: 'ArraySetter',
+                props: {
+                  itemSetter: 'ColorSetter',
+                },
+              },
+              extraProps: {
+                defaultValue: ['#00d4ff', '#9b59b6'],
+              },
+            },
+          ],
+        },
+      ],
+    },
+  ],
+  {
+    padding: '6px 16px 12px',
+  },
+)
+
+/** 数据配置 */
+const dataConfigGroup: FieldConfig = createDataConfigGroup([
+  { name: 'value', label: 'value', type: 'number', required: true, description: '当前值' },
+])
+
+export const configure = createStandardConfigure(componentConfigGroup, dataConfigGroup)

package/src/index.tsx

@@ -1,7 +1,7 @@
-/**
- * Progress Entry
- * 进度条组件入口
- */
-
-export { Progress as component } from './component'
-export { default as meta } from './meta'
+/**
+ * Progress Entry
+ * 进度条组件入口
+ */
+
+export { Progress as component } from './component'
+export { meta } from './meta'

package/src/meta.ts

@@ -6,8 +6,8 @@
 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 { configure } from './configure'
+import { snippets } from './snippets'
 import pkg from '../package.json'
 
 export const meta: ComponentMetadata = {