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

package/CHANGELOG.md

@@ -1,21 +1,27 @@
-# @easy-editor/materials-dashboard-progress
-
-## 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
+# @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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@easy-editor/materials-dashboard-progress",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "Progress component for EasyEditor dashboard",
   "type": "module",
   "main": "dist/index.js",

package/src/component.tsx

@@ -1,304 +1,306 @@
-/**
- * Progress Component
- * 进度组件 - 支持数据源绑定和事件交互
- */
-
-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 extends MaterialComponet {
-  /** 最大值 */
-  maxValue?: number
-  /** 进度条类型 */
-  type?: 'ring' | 'bar'
-  /** 是否显示数值 */
-  showValue?: boolean
-  /** 是否显示标签 */
-  showLabel?: boolean
-  /** 标签文本 */
-  label?: string
-  /** 数值格式 */
-  valueFormat?: 'percent' | 'number'
-  /** 线条宽度比例（相对于尺寸的百分比） */
-  strokeWidthRatio?: number
-  /** 轨道颜色 */
-  trackColor?: string
-  /** 进度颜色 */
-  progressColor?: string
-  /** 是否启用渐变 */
-  gradientEnable?: boolean
-  /** 渐变颜色 [起始色, 结束色] */
-  gradientColors?: [string, string]
-  /** 点击事件 */
-  onClick?: (e: React.MouseEvent) => void
-  /** 双击事件 */
-  onDoubleClick?: (e: React.MouseEvent) => void
-  /** 鼠标进入 */
-  onMouseEnter?: (e: React.MouseEvent) => void
-  /** 鼠标离开 */
-  onMouseLeave?: (e: React.MouseEvent) => void
-}
-
-// 格式化数值
-const formatValue = (value: number, percentage: number, valueFormat: string): string => {
-  if (valueFormat === 'percent') {
-    return `${Math.round(percentage)}%`
-  }
-  return `${value}`
-}
-
-// 环形进度条组件
-const RingProgress = ({
-  percentage,
-  strokeWidthRatio,
-  trackColor,
-  progressColor,
-  gradientEnable,
-  gradientColors,
-  showValue,
-  showLabel,
-  label,
-  valueFormat,
-  displayColor,
-  gradientId,
-}: {
-  percentage: number
-  strokeWidthRatio: number
-  trackColor: string
-  progressColor: string
-  gradientEnable: boolean
-  gradientColors: [string, string]
-  showValue: boolean
-  showLabel: boolean
-  label: string
-  valueFormat: string
-  displayColor: string
-  gradientId: string
-}) => {
-  const containerRef = useRef<HTMLDivElement>(null)
-  const [size, setSize] = useState(100)
-
-  useEffect(() => {
-    const container = containerRef.current
-    if (!container) {
-      return
-    }
-
-    const updateSize = () => {
-      const { width, height } = container.getBoundingClientRect()
-      const minSize = Math.min(width, height)
-      if (minSize > 0) {
-        setSize(minSize)
-      }
-    }
-
-    updateSize()
-
-    const resizeObserver = new ResizeObserver(updateSize)
-    resizeObserver.observe(container)
-
-    return () => resizeObserver.disconnect()
-  }, [])
-
-  const strokeWidth = Math.max(2, size * strokeWidthRatio)
-  const radius = (size - strokeWidth) / 2
-  const circumference = 2 * Math.PI * radius
-  const strokeDashoffset = circumference - (percentage / 100) * circumference
-  const center = size / 2
-
-  return (
-    <div className={styles.container} ref={containerRef}>
-      <svg aria-label='Progress ring' className={styles.ring} height={size} role='img' width={size}>
-        <title>Progress indicator</title>
-        {gradientEnable ? (
-          <defs>
-            <linearGradient id={gradientId} x1='0%' x2='100%' y1='0%' y2='0%'>
-              <stop offset='0%' stopColor={gradientColors[0]} />
-              <stop offset='100%' stopColor={gradientColors[1]} />
-            </linearGradient>
-          </defs>
-        ) : null}
-        {/* 轨道 */}
-        <circle cx={center} cy={center} fill='none' r={radius} stroke={trackColor} strokeWidth={strokeWidth} />
-        {/* 进度 */}
-        <circle
-          cx={center}
-          cy={center}
-          fill='none'
-          r={radius}
-          stroke={gradientEnable ? `url(#${gradientId})` : progressColor}
-          strokeDasharray={circumference}
-          strokeDashoffset={strokeDashoffset}
-          strokeLinecap='round'
-          strokeWidth={strokeWidth}
-          style={{
-            transition: 'stroke-dashoffset 0.5s ease',
-          }}
-        />
-      </svg>
-      <div className={styles.centerContent}>
-        {showValue ? (
-          <span className={styles.value} style={{ fontSize: size * 0.2, color: displayColor }}>
-            {formatValue(Math.round(percentage), percentage, valueFormat)}
-          </span>
-        ) : null}
-        {showLabel && label ? (
-          <span className={styles.label} style={{ fontSize: size * 0.1 }}>
-            {label}
-          </span>
-        ) : null}
-      </div>
-    </div>
-  )
-}
-
-// 线性进度条组件
-const BarProgress = ({
-  percentage,
-  trackColor,
-  progressColor,
-  gradientEnable,
-  gradientColors,
-  showValue,
-  showLabel,
-  label,
-  valueFormat,
-  displayColor,
-}: {
-  percentage: number
-  trackColor: string
-  progressColor: string
-  gradientEnable: boolean
-  gradientColors: [string, string]
-  showValue: boolean
-  showLabel: boolean
-  label: string
-  valueFormat: string
-  displayColor: string
-}) => (
-  <div className={styles.barContainer}>
-    {showLabel || showValue ? (
-      <div className={styles.barLabels}>
-        {showLabel ? <span className={styles.barLabel}>{label}</span> : null}
-        {showValue ? (
-          <span className={styles.barValue} style={{ color: displayColor }}>
-            {formatValue(Math.round(percentage), percentage, valueFormat)}
-          </span>
-        ) : null}
-      </div>
-    ) : null}
-    <div className={styles.barWrapper} style={{ background: trackColor }}>
-      <div
-        className={styles.barFill}
-        style={{
-          width: `${percentage}%`,
-          background: gradientEnable
-            ? `linear-gradient(90deg, ${gradientColors[0]}, ${gradientColors[1]})`
-            : progressColor,
-        }}
-      />
-    </div>
-  </div>
-)
-
-export const Progress: React.FC<ProgressProps> = ({
-  ref,
-  $data,
-  __dataSource,
-  rotation = 0,
-  opacity = 100,
-  background = 'transparent',
-  style: externalStyle,
-  maxValue = 100,
-  type = 'ring',
-  showValue = true,
-  showLabel = false,
-  label = '',
-  valueFormat = 'percent',
-  strokeWidthRatio = 0.07,
-  trackColor = 'rgba(26, 26, 62, 0.8)',
-  progressColor = '#00d4ff',
-  gradientEnable = false,
-  gradientColors = ['#00d4ff', '#9b59b6'],
-  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}
-        onClick={onClick}
-        onDoubleClick={onDoubleClick}
-        onMouseEnter={onMouseEnter}
-        onMouseLeave={onMouseLeave}
-        ref={ref}
-        style={wrapperStyle}
-      >
-        <RingProgress
-          displayColor={displayColor}
-          gradientColors={gradientColors}
-          gradientEnable={gradientEnable}
-          gradientId={gradientId}
-          label={label}
-          percentage={percentage}
-          progressColor={progressColor}
-          showLabel={showLabel}
-          showValue={showValue}
-          strokeWidthRatio={strokeWidthRatio}
-          trackColor={trackColor}
-          valueFormat={valueFormat}
-        />
-      </div>
-    )
-  }
-
-  return (
-    <div
-      className={styles.wrapper}
-      onClick={onClick}
-      onDoubleClick={onDoubleClick}
-      onMouseEnter={onMouseEnter}
-      onMouseLeave={onMouseLeave}
-      ref={ref}
-      style={wrapperStyle}
-    >
-      <BarProgress
-        displayColor={displayColor}
-        gradientColors={gradientColors}
-        gradientEnable={gradientEnable}
-        label={label}
-        percentage={percentage}
-        progressColor={progressColor}
-        showLabel={showLabel}
-        showValue={showValue}
-        trackColor={trackColor}
-        valueFormat={valueFormat}
-      />
-    </div>
-  )
-}
+/**
+ * Progress Component
+ * 进度组件 - 支持数据源绑定和事件交互
+ */
+
+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 extends MaterialComponet {
+  /** 最大值 */
+  maxValue?: number
+  /** 进度条类型 */
+  type?: 'ring' | 'bar'
+  /** 是否显示数值 */
+  showValue?: boolean
+  /** 是否显示标签 */
+  showLabel?: boolean
+  /** 标签文本 */
+  label?: string
+  /** 数值格式 */
+  valueFormat?: 'percent' | 'number'
+  /** 线条宽度比例（相对于尺寸的百分比） */
+  strokeWidthRatio?: number
+  /** 轨道颜色 */
+  trackColor?: string
+  /** 进度颜色 */
+  progressColor?: string
+  /** 是否启用渐变 */
+  gradientEnable?: boolean
+  /** 渐变颜色 [起始色, 结束色] */
+  gradientColors?: [string, string]
+  /** 点击事件 */
+  onClick?: (e: React.MouseEvent) => void
+  /** 双击事件 */
+  onDoubleClick?: (e: React.MouseEvent) => void
+  /** 鼠标进入 */
+  onMouseEnter?: (e: React.MouseEvent) => void
+  /** 鼠标离开 */
+  onMouseLeave?: (e: React.MouseEvent) => void
+}
+
+// 格式化数值
+const formatValue = (value: number, percentage: number, valueFormat: string): string => {
+  if (valueFormat === 'percent') {
+    return `${Math.round(percentage)}%`
+  }
+  return `${value}`
+}
+
+// 环形进度条组件
+const RingProgress = ({
+  percentage,
+  strokeWidthRatio,
+  trackColor,
+  progressColor,
+  gradientEnable,
+  gradientColors,
+  showValue,
+  showLabel,
+  label,
+  valueFormat,
+  displayColor,
+  gradientId,
+}: {
+  percentage: number
+  strokeWidthRatio: number
+  trackColor: string
+  progressColor: string
+  gradientEnable: boolean
+  gradientColors: [string, string]
+  showValue: boolean
+  showLabel: boolean
+  label: string
+  valueFormat: string
+  displayColor: string
+  gradientId: string
+}) => {
+  const containerRef = useRef<HTMLDivElement>(null)
+  const [size, setSize] = useState(100)
+
+  useEffect(() => {
+    const container = containerRef.current
+    if (!container) {
+      return
+    }
+
+    const updateSize = () => {
+      const { width, height } = container.getBoundingClientRect()
+      const minSize = Math.min(width, height)
+      if (minSize > 0) {
+        setSize(minSize)
+      }
+    }
+
+    updateSize()
+
+    const resizeObserver = new ResizeObserver(updateSize)
+    resizeObserver.observe(container)
+
+    return () => resizeObserver.disconnect()
+  }, [])
+
+  const strokeWidth = Math.max(2, size * strokeWidthRatio)
+  const radius = (size - strokeWidth) / 2
+  const circumference = 2 * Math.PI * radius
+  const strokeDashoffset = circumference - (percentage / 100) * circumference
+  const center = size / 2
+
+  return (
+    <div className={styles.container} ref={containerRef}>
+      <svg aria-label='Progress ring' className={styles.ring} height={size} role='img' width={size}>
+        <title>Progress indicator</title>
+        {gradientEnable ? (
+          <defs>
+            <linearGradient id={gradientId} x1='0%' x2='100%' y1='0%' y2='0%'>
+              <stop offset='0%' stopColor={gradientColors[0]} />
+              <stop offset='100%' stopColor={gradientColors[1]} />
+            </linearGradient>
+          </defs>
+        ) : null}
+        {/* 轨道 */}
+        <circle cx={center} cy={center} fill='none' r={radius} stroke={trackColor} strokeWidth={strokeWidth} />
+        {/* 进度 */}
+        <circle
+          cx={center}
+          cy={center}
+          fill='none'
+          r={radius}
+          stroke={gradientEnable ? `url(#${gradientId})` : progressColor}
+          strokeDasharray={circumference}
+          strokeDashoffset={strokeDashoffset}
+          strokeLinecap='round'
+          strokeWidth={strokeWidth}
+          style={{
+            transition: 'stroke-dashoffset 0.5s ease',
+          }}
+        />
+      </svg>
+      <div className={styles.centerContent}>
+        {showValue ? (
+          <span className={styles.value} style={{ fontSize: size * 0.2, color: displayColor }}>
+            {formatValue(Math.round(percentage), percentage, valueFormat)}
+          </span>
+        ) : null}
+        {showLabel && label ? (
+          <span className={styles.label} style={{ fontSize: size * 0.1 }}>
+            {label}
+          </span>
+        ) : null}
+      </div>
+    </div>
+  )
+}
+
+// 线性进度条组件
+const BarProgress = ({
+  percentage,
+  trackColor,
+  progressColor,
+  gradientEnable,
+  gradientColors,
+  showValue,
+  showLabel,
+  label,
+  valueFormat,
+  displayColor,
+}: {
+  percentage: number
+  trackColor: string
+  progressColor: string
+  gradientEnable: boolean
+  gradientColors: [string, string]
+  showValue: boolean
+  showLabel: boolean
+  label: string
+  valueFormat: string
+  displayColor: string
+}) => (
+  <div className={styles.barContainer}>
+    {showLabel || showValue ? (
+      <div className={styles.barLabels}>
+        {showLabel ? <span className={styles.barLabel}>{label}</span> : null}
+        {showValue ? (
+          <span className={styles.barValue} style={{ color: displayColor }}>
+            {formatValue(Math.round(percentage), percentage, valueFormat)}
+          </span>
+        ) : null}
+      </div>
+    ) : null}
+    <div className={styles.barWrapper} style={{ background: trackColor }}>
+      <div
+        className={styles.barFill}
+        style={{
+          width: `${percentage}%`,
+          background: gradientEnable
+            ? `linear-gradient(90deg, ${gradientColors[0]}, ${gradientColors[1]})`
+            : progressColor,
+        }}
+      />
+    </div>
+  </div>
+)
+
+export const Progress: React.FC<ProgressProps> = ({
+  ref,
+  $data,
+  __dataSource,
+  rotation = 0,
+  opacity = 100,
+  background = 'transparent',
+  style: externalStyle,
+  maxValue = 100,
+  type = 'ring',
+  showValue = true,
+  showLabel = false,
+  label = '',
+  valueFormat = 'percent',
+  strokeWidthRatio = 0.07,
+  trackColor = 'rgba(26, 26, 62, 0.8)',
+  progressColor = '#00d4ff',
+  gradientEnable = false,
+  gradientColors = ['#00d4ff', '#9b59b6'],
+  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}
+        onClick={onClick}
+        onDoubleClick={onDoubleClick}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
+        ref={ref}
+        style={wrapperStyle}
+      >
+        <RingProgress
+          displayColor={displayColor}
+          gradientColors={gradientColors}
+          gradientEnable={gradientEnable}
+          gradientId={gradientId}
+          label={label}
+          percentage={percentage}
+          progressColor={progressColor}
+          showLabel={showLabel}
+          showValue={showValue}
+          strokeWidthRatio={strokeWidthRatio}
+          trackColor={trackColor}
+          valueFormat={valueFormat}
+        />
+      </div>
+    )
+  }
+
+  return (
+    <div
+      className={styles.wrapper}
+      onClick={onClick}
+      onDoubleClick={onDoubleClick}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      ref={ref}
+      style={wrapperStyle}
+    >
+      <BarProgress
+        displayColor={displayColor}
+        gradientColors={gradientColors}
+        gradientEnable={gradientEnable}
+        label={label}
+        percentage={percentage}
+        progressColor={progressColor}
+        showLabel={showLabel}
+        showValue={showValue}
+        trackColor={trackColor}
+        valueFormat={valueFormat}
+      />
+    </div>
+  )
+}
+
+export default Progress

package/src/meta.ts

@@ -1,26 +1,28 @@
-/**
- * Progress 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.DISPLAY,
-  devMode: 'proCode',
-  npm: {
-    package: PACKAGE_NAME,
-    version: pkg.version,
-    globalName: COMPONENT_NAME,
-    componentName: COMPONENT_NAME,
-  },
-  snippets,
-  configure,
-}
+/**
+ * Progress 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.DISPLAY,
+  devMode: 'proCode',
+  npm: {
+    package: PACKAGE_NAME,
+    version: pkg.version,
+    globalName: COMPONENT_NAME,
+    componentName: COMPONENT_NAME,
+  },
+  snippets,
+  configure,
+}
+
+export default meta

package/dist/component.min.js

@@ -1 +0,0 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("react/jsx-runtime")):"function"==typeof define&&define.amd?define(["exports","react","react/jsx-runtime"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).EasyEditorMaterialsProgressComponent={},e.React,e.jsxRuntime)}(this,function(e,t,o){"use strict";const r=(e,t)=>{if(!t)return e;const o=t.split(".");let r=e;for(const e of o){if(null==r)return;if("object"!=typeof r)return;r=r[e]}return r},n=e=>void 0===e?[]:Array.isArray(e)?e:e&&"object"==typeof e?[e]:[],a=(e,t)=>{const o=((e,t)=>{if(!e)return[];if("static"===e.sourceType)return Array.isArray(e.staticData)?e.staticData:[];if("global"===e.sourceType&&e.datasourceId){const o=t?.page?.[e.datasourceId];return n(o)}if("datasource"===e.sourceType&&e.datasourceId){const o=t?.component?.[e.datasourceId];return n(o)}return[]})(e,t);return((e,t)=>t&&0!==t.length?e.map(e=>{const o={};for(const{componentField:n,sourceField:a}of t)n&&a&&(o[n]=r(e,a));return o}):e)(o,e?.fieldMappings)};const l=(e,t,o)=>({type:"group",title:e,setter:{componentName:"CollapseSetter",props:{icon:!1,...o}},items:t});l("基础配置",[{name:"title",title:"标题",setter:"StringSetter",extraProps:{getValue:e=>e.getExtraPropValue("title"),setValue(e,t){e.setExtraPropValue("title",t)}}},{name:"rect",title:"位置尺寸",setter:"RectSetter",extraProps:{getValue:e=>e.getExtraPropValue("$dashboard.rect"),setValue(e,t){e.setExtraPropValue("$dashboard.rect",t)}}},{name:"rotation",title:"旋转角度",setter:{componentName:"SliderSetter",props:{min:0,max:360,suffix:"°"}},extraProps:{defaultValue:0}},{name:"opacity",title:"不透明度",setter:{componentName:"SliderSetter",props:{min:0,max:100,suffix:"%"}},extraProps:{defaultValue:100}},{name:"background",title:"背景颜色",setter:"ColorSetter",extraProps:{defaultValue:"transparent"}}]);const s=[{title:"点击事件",children:[{label:"点击",value:"onClick",description:"鼠标点击时触发"},{label:"双击",value:"onDoubleClick",description:"鼠标双击时触发"}]},{title:"鼠标事件",children:[{label:"鼠标进入",value:"onMouseEnter",description:"鼠标进入时触发"},{label:"鼠标离开",value:"onMouseLeave",description:"鼠标离开时触发"}]}];((e=s)=>{l("事件绑定",[{name:"events",title:"事件",setter:{componentName:"EventSetter",props:{events:e}},extraProps:{label:!1}}])})(),l("高级配置",[{title:"条件渲染",setter:"SwitchSetter",extraProps:{supportVariable:!0,getValue:e=>e.getNode().getExtraPropValue("condition"),setValue(e,t){e.getNode().setExtraProp("condition",t)}}}]);var i="component-module__wrapper___IYMoW",c="component-module__container___VbZSk",d="component-module__ring___QkEHa",u="component-module__centerContent___Ri3R3",p="component-module__value___Fg70k",_="component-module__label___6IHVo",m="component-module__barContainer___AOTls",f="component-module__barWrapper___cni-a",h="component-module__barFill___KZkJe",g="component-module__barLabels___BvaEi",x="component-module__barLabel___wVaWe",b="component-module__barValue___H2muu";!function(e,t){void 0===t&&(t={});var o=t.insertAt;if("undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===o&&r.firstChild?r.insertBefore(n,r.firstChild):r.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}(".component-module__container___VbZSk,.component-module__wrapper___IYMoW{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.component-module__container___VbZSk{position:relative}.component-module__ring___QkEHa{transform:rotate(-90deg)}.component-module__centerContent___Ri3R3{align-items:center;display:flex;flex-direction:column;justify-content:center;left:50%;position:absolute;text-align:center;top:50%;transform:translate(-50%,-50%)}.component-module__value___Fg70k{font-weight:700;line-height:1.1}.component-module__label___6IHVo{color:#fff;margin-top:4px;opacity:.7}.component-module__barContainer___AOTls{display:flex;flex-direction:column;gap:4px;height:100%;justify-content:center;width:100%}.component-module__barWrapper___cni-a{border-radius:4px;flex:1;max-height:8px;min-height:8px;overflow:hidden;width:100%}.component-module__barFill___KZkJe{border-radius:4px;height:100%;transition:width .5s ease}.component-module__barLabels___BvaEi{align-items:center;display:flex;justify-content:space-between}.component-module__barLabel___wVaWe{color:hsla(0,0%,100%,.7);font-size:12px}.component-module__barValue___H2muu{font-size:14px;font-weight:600}");const y=(e,t,o)=>"percent"===o?`${Math.round(t)}%`:`${e}`,C=({percentage:e,strokeWidthRatio:r,trackColor:n,progressColor:a,gradientEnable:l,gradientColors:s,showValue:i,showLabel:m,label:f,valueFormat:h,displayColor:g,gradientId:x})=>{const b=t.useRef(null),[C,v]=t.useState(100);t.useEffect(()=>{const e=b.current;if(!e)return;const t=()=>{const{width:t,height:o}=e.getBoundingClientRect(),r=Math.min(t,o);r>0&&v(r)};t();const o=new ResizeObserver(t);return o.observe(e),()=>o.disconnect()},[]);const k=Math.max(2,C*r),j=(C-k)/2,V=2*Math.PI*j,w=V-e/100*V,E=C/2;return o.jsxs("div",{className:c,ref:b,children:[o.jsxs("svg",{"aria-label":"Progress ring",className:d,height:C,role:"img",width:C,children:[o.jsx("title",{children:"Progress indicator"}),l?o.jsx("defs",{children:o.jsxs("linearGradient",{id:x,x1:"0%",x2:"100%",y1:"0%",y2:"0%",children:[o.jsx("stop",{offset:"0%",stopColor:s[0]}),o.jsx("stop",{offset:"100%",stopColor:s[1]})]})}):null,o.jsx("circle",{cx:E,cy:E,fill:"none",r:j,stroke:n,strokeWidth:k}),o.jsx("circle",{cx:E,cy:E,fill:"none",r:j,stroke:l?`url(#${x})`:a,strokeDasharray:V,strokeDashoffset:w,strokeLinecap:"round",strokeWidth:k,style:{transition:"stroke-dashoffset 0.5s ease"}})]}),o.jsxs("div",{className:u,children:[i?o.jsx("span",{className:p,style:{fontSize:.2*C,color:g},children:y(Math.round(e),e,h)}):null,m&&f?o.jsx("span",{className:_,style:{fontSize:.1*C},children:f}):null]})]})},v=({percentage:e,trackColor:t,progressColor:r,gradientEnable:n,gradientColors:a,showValue:l,showLabel:s,label:i,valueFormat:c,displayColor:d})=>o.jsxs("div",{className:m,children:[s||l?o.jsxs("div",{className:g,children:[s?o.jsx("span",{className:x,children:i}):null,l?o.jsx("span",{className:b,style:{color:d},children:y(Math.round(e),e,c)}):null]}):null,o.jsx("div",{className:f,style:{background:t},children:o.jsx("div",{className:h,style:{width:`${e}%`,background:n?`linear-gradient(90deg, ${a[0]}, ${a[1]})`:r}})})]});e.Progress=({ref:e,$data:r,__dataSource:n,rotation:l=0,opacity:s=100,background:c="transparent",style:d,maxValue:u=100,type:p="ring",showValue:_=!0,showLabel:m=!1,label:f="",valueFormat:h="percent",strokeWidthRatio:g=.07,trackColor:x="rgba(26, 26, 62, 0.8)",progressColor:b="#00d4ff",gradientEnable:y=!1,gradientColors:k=["#00d4ff","#9b59b6"],onClick:j,onDoubleClick:V,onMouseEnter:w,onMouseLeave:E})=>{const M=t.useId(),N=function(e,o){return t.useMemo(()=>a(e,o),[e,o])}(r,n),S=t.useMemo(()=>N.length>0&&"number"==typeof N[0]?.value?N[0].value:0,[N]),P=Math.min(Math.max(S,0),u)/u*100,L=y?k[0]:b,R={transform:0!==l?`rotate(${l}deg)`:void 0,opacity:s/100,backgroundColor:c,...d};return"ring"===p?o.jsx("div",{className:i,onClick:j,onDoubleClick:V,onMouseEnter:w,onMouseLeave:E,ref:e,style:R,children:o.jsx(C,{displayColor:L,gradientColors:k,gradientEnable:y,gradientId:M,label:f,percentage:P,progressColor:b,showLabel:m,showValue:_,strokeWidthRatio:g,trackColor:x,valueFormat:h})}):o.jsx("div",{className:i,onClick:j,onDoubleClick:V,onMouseEnter:w,onMouseLeave:E,ref:e,style:R,children:o.jsx(v,{displayColor:L,gradientColors:k,gradientEnable:y,label:f,percentage:P,progressColor:b,showLabel:m,showValue:_,trackColor:x,valueFormat:h})})}});

package/dist/index.min.js

@@ -1 +0,0 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("react/jsx-runtime")):"function"==typeof define&&define.amd?define(["exports","react","react/jsx-runtime"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).EasyEditorMaterialsProgress={},e.React,e.jsxRuntime)}(this,function(e,t,o){"use strict";const r=(e,t)=>{if(!t)return e;const o=t.split(".");let r=e;for(const e of o){if(null==r)return;if("object"!=typeof r)return;r=r[e]}return r},a=e=>void 0===e?[]:Array.isArray(e)?e:e&&"object"==typeof e?[e]:[],n=(e,t)=>{const o=((e,t)=>{if(!e)return[];if("static"===e.sourceType)return Array.isArray(e.staticData)?e.staticData:[];if("global"===e.sourceType&&e.datasourceId){const o=t?.page?.[e.datasourceId];return a(o)}if("datasource"===e.sourceType&&e.datasourceId){const o=t?.component?.[e.datasourceId];return a(o)}return[]})(e,t);return((e,t)=>t&&0!==t.length?e.map(e=>{const o={};for(const{componentField:a,sourceField:n}of t)a&&n&&(o[a]=r(e,n));return o}):e)(o,e?.fieldMappings)};const l=(e,t)=>{const o=Array.isArray(e)?e:[e],r=o[0]||{};return{sourceType:"static",staticData:o,fieldMappings:Object.keys(r).map(e=>({componentField:e,sourceField:e}))}},s=(e,t,o)=>({type:"group",title:e,setter:{componentName:"CollapseSetter",props:{icon:!1,...o}},items:t}),i={name:"nodeInfo",title:"节点信息",setter:"NodeInfoSetter",extraProps:{label:!1}},c=s("基础配置",[{name:"title",title:"标题",setter:"StringSetter",extraProps:{getValue:e=>e.getExtraPropValue("title"),setValue(e,t){e.setExtraPropValue("title",t)}}},{name:"rect",title:"位置尺寸",setter:"RectSetter",extraProps:{getValue:e=>e.getExtraPropValue("$dashboard.rect"),setValue(e,t){e.setExtraPropValue("$dashboard.rect",t)}}},{name:"rotation",title:"旋转角度",setter:{componentName:"SliderSetter",props:{min:0,max:360,suffix:"°"}},extraProps:{defaultValue:0}},{name:"opacity",title:"不透明度",setter:{componentName:"SliderSetter",props:{min:0,max:100,suffix:"%"}},extraProps:{defaultValue:100}},{name:"background",title:"背景颜色",setter:"ColorSetter",extraProps:{defaultValue:"transparent"}}]),p=[{title:"点击事件",children:[{label:"点击",value:"onClick",description:"鼠标点击时触发"},{label:"双击",value:"onDoubleClick",description:"鼠标双击时触发"}]},{title:"鼠标事件",children:[{label:"鼠标进入",value:"onMouseEnter",description:"鼠标进入时触发"},{label:"鼠标离开",value:"onMouseLeave",description:"鼠标离开时触发"}]}],d=((e=p)=>s("事件绑定",[{name:"events",title:"事件",setter:{componentName:"EventSetter",props:{events:e}},extraProps:{label:!1}}]))(),u=s("高级配置",[{title:"条件渲染",setter:"SwitchSetter",extraProps:{supportVariable:!0,getValue:e=>e.getNode().getExtraPropValue("condition"),setValue(e,t){e.getNode().setExtraProp("condition",t)}}}]);var m="component-module__wrapper___IYMoW",_="component-module__container___VbZSk",f="component-module__ring___QkEHa",g="component-module__centerContent___Ri3R3",h="component-module__value___Fg70k",b="component-module__label___6IHVo",x="component-module__barContainer___AOTls",y="component-module__barWrapper___cni-a",v="component-module__barFill___KZkJe",k="component-module__barLabels___BvaEi",C="component-module__barLabel___wVaWe",S="component-module__barValue___H2muu";!function(e,t){void 0===t&&(t={});var o=t.insertAt;if("undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===o&&r.firstChild?r.insertBefore(a,r.firstChild):r.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}(".component-module__container___VbZSk,.component-module__wrapper___IYMoW{align-items:center;display:flex;height:100%;justify-content:center;width:100%}.component-module__container___VbZSk{position:relative}.component-module__ring___QkEHa{transform:rotate(-90deg)}.component-module__centerContent___Ri3R3{align-items:center;display:flex;flex-direction:column;justify-content:center;left:50%;position:absolute;text-align:center;top:50%;transform:translate(-50%,-50%)}.component-module__value___Fg70k{font-weight:700;line-height:1.1}.component-module__label___6IHVo{color:#fff;margin-top:4px;opacity:.7}.component-module__barContainer___AOTls{display:flex;flex-direction:column;gap:4px;height:100%;justify-content:center;width:100%}.component-module__barWrapper___cni-a{border-radius:4px;flex:1;max-height:8px;min-height:8px;overflow:hidden;width:100%}.component-module__barFill___KZkJe{border-radius:4px;height:100%;transition:width .5s ease}.component-module__barLabels___BvaEi{align-items:center;display:flex;justify-content:space-between}.component-module__barLabel___wVaWe{color:hsla(0,0%,100%,.7);font-size:12px}.component-module__barValue___H2muu{font-size:14px;font-weight:600}");const V=(e,t,o)=>"percent"===o?`${Math.round(t)}%`:`${e}`,w=({percentage:e,strokeWidthRatio:r,trackColor:a,progressColor:n,gradientEnable:l,gradientColors:s,showValue:i,showLabel:c,label:p,valueFormat:d,displayColor:u,gradientId:m})=>{const x=t.useRef(null),[y,v]=t.useState(100);t.useEffect(()=>{const e=x.current;if(!e)return;const t=()=>{const{width:t,height:o}=e.getBoundingClientRect(),r=Math.min(t,o);r>0&&v(r)};t();const o=new ResizeObserver(t);return o.observe(e),()=>o.disconnect()},[]);const k=Math.max(2,y*r),C=(y-k)/2,S=2*Math.PI*C,w=S-e/100*S,j=y/2;return o.jsxs("div",{className:_,ref:x,children:[o.jsxs("svg",{"aria-label":"Progress ring",className:f,height:y,role:"img",width:y,children:[o.jsx("title",{children:"Progress indicator"}),l?o.jsx("defs",{children:o.jsxs("linearGradient",{id:m,x1:"0%",x2:"100%",y1:"0%",y2:"0%",children:[o.jsx("stop",{offset:"0%",stopColor:s[0]}),o.jsx("stop",{offset:"100%",stopColor:s[1]})]})}):null,o.jsx("circle",{cx:j,cy:j,fill:"none",r:C,stroke:a,strokeWidth:k}),o.jsx("circle",{cx:j,cy:j,fill:"none",r:C,stroke:l?`url(#${m})`:n,strokeDasharray:S,strokeDashoffset:w,strokeLinecap:"round",strokeWidth:k,style:{transition:"stroke-dashoffset 0.5s ease"}})]}),o.jsxs("div",{className:g,children:[i?o.jsx("span",{className:h,style:{fontSize:.2*y,color:u},children:V(Math.round(e),e,d)}):null,c&&p?o.jsx("span",{className:b,style:{fontSize:.1*y},children:p}):null]})]})},j=({percentage:e,trackColor:t,progressColor:r,gradientEnable:a,gradientColors:n,showValue:l,showLabel:s,label:i,valueFormat:c,displayColor:p})=>o.jsxs("div",{className:x,children:[s||l?o.jsxs("div",{className:k,children:[s?o.jsx("span",{className:C,children:i}):null,l?o.jsx("span",{className:S,style:{color:p},children:V(Math.round(e),e,c)}):null]}):null,o.jsx("div",{className:y,style:{background:t},children:o.jsx("div",{className:v,style:{width:`${e}%`,background:a?`linear-gradient(90deg, ${n[0]}, ${n[1]})`:r}})})]}),N="EasyEditorMaterialsProgress";const P=((e,t)=>({props:[{type:"group",title:"属性",setter:"TabSetter",items:[{type:"group",key:"config",title:"配置",items:[i,c,e]},{type:"group",key:"data",title:"数据",items:[i,t]},{type:"group",key:"advanced",title:"高级",items:[i,d,u]}]}],component:{},supports:{},advanced:{}}))(s("组件配置",[{type:"group",title:"组件配置",setter:"SubTabSetter",items:[{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"}}]},{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:!0}},{name:"showLabel",title:"显示标签",setter:"SwitchSetter",extraProps:{defaultValue:!1}},{name:"label",title:"标签文本",setter:"StringSetter"}]},{type:"group",key:"style",title:"样式",items:[{name:"strokeWidthRatio",title:"线条粗细",setter:{componentName:"SliderSetter",props:{min:.02,max:.2,step:.01}},extraProps:{defaultValue:.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:!1}},{name:"gradientColors",title:"渐变颜色",setter:{componentName:"ArraySetter",props:{itemSetter:"ColorSetter"}},extraProps:{defaultValue:["#00d4ff","#9b59b6"]}}]}]}],{padding:"6px 16px 12px"}),{name:"$data",title:"数据配置",setter:{componentName:"DataSetter",props:{expectedFields:[{name:"value",label:"value",type:"number",required:!0,description:"当前值"}],showPreview:!0,previewLimit:10}},extraProps:{label:!1}});const E={componentName:N,title:"进度条",group:"display",devMode:"proCode",npm:{package:"@easy-editor/materials-dashboard-progress",version:"0.0.4",globalName:N,componentName:N},snippets:[{title:"进度环",screenshot:"",schema:{componentName:N,title:"进度环",props:{$data:l({value:75}),maxValue:100,type:"ring",showValue:!0,showLabel:!1,valueFormat:"percent",strokeWidthRatio:.07,progressColor:"#00ffff",rotation:0,opacity:100,background:"transparent"},$dashboard:{rect:{width:140,height:140}}}},{title:"线性进度条",screenshot:"",schema:{componentName:N,title:"线性进度条",props:{$data:l({value:85}),maxValue:100,type:"bar",showValue:!0,showLabel:!0,label:"完成率",valueFormat:"percent",progressColor:"#00ff88",gradientEnable:!0,gradientColors:["#00ff88","#00d4ff"],rotation:0,opacity:100,background:"transparent"},$dashboard:{rect:{width:300,height:50}}}}],configure:P};e.component=({ref:e,$data:r,__dataSource:a,rotation:l=0,opacity:s=100,background:i="transparent",style:c,maxValue:p=100,type:d="ring",showValue:u=!0,showLabel:_=!1,label:f="",valueFormat:g="percent",strokeWidthRatio:h=.07,trackColor:b="rgba(26, 26, 62, 0.8)",progressColor:x="#00d4ff",gradientEnable:y=!1,gradientColors:v=["#00d4ff","#9b59b6"],onClick:k,onDoubleClick:C,onMouseEnter:S,onMouseLeave:V})=>{const N=t.useId(),P=function(e,o){return t.useMemo(()=>n(e,o),[e,o])}(r,a),E=t.useMemo(()=>P.length>0&&"number"==typeof P[0]?.value?P[0].value:0,[P]),M=Math.min(Math.max(E,0),p)/p*100,L=y?v[0]:x,F={transform:0!==l?`rotate(${l}deg)`:void 0,opacity:s/100,backgroundColor:i,...c};return"ring"===d?o.jsx("div",{className:m,onClick:k,onDoubleClick:C,onMouseEnter:S,onMouseLeave:V,ref:e,style:F,children:o.jsx(w,{displayColor:L,gradientColors:v,gradientEnable:y,gradientId:N,label:f,percentage:M,progressColor:x,showLabel:_,showValue:u,strokeWidthRatio:h,trackColor:b,valueFormat:g})}):o.jsx("div",{className:m,onClick:k,onDoubleClick:C,onMouseEnter:S,onMouseLeave:V,ref:e,style:F,children:o.jsx(j,{displayColor:L,gradientColors:v,gradientEnable:y,label:f,percentage:M,progressColor:x,showLabel:_,showValue:u,trackColor:b,valueFormat:g})})},e.meta=E});

package/dist/meta.min.js

@@ -1 +0,0 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).EasyEditorMaterialsProgressMeta={})}(this,function(e){"use strict";const t=(e,t)=>{const r=Array.isArray(e)?e:[e],a=r[0]||{};return{sourceType:"static",staticData:r,fieldMappings:Object.keys(a).map(e=>({componentField:e,sourceField:e}))}},r=(e,t,r)=>({type:"group",title:e,setter:{componentName:"CollapseSetter",props:{icon:!1,...r}},items:t}),a={name:"nodeInfo",title:"节点信息",setter:"NodeInfoSetter",extraProps:{label:!1}},o=r("基础配置",[{name:"title",title:"标题",setter:"StringSetter",extraProps:{getValue:e=>e.getExtraPropValue("title"),setValue(e,t){e.setExtraPropValue("title",t)}}},{name:"rect",title:"位置尺寸",setter:"RectSetter",extraProps:{getValue:e=>e.getExtraPropValue("$dashboard.rect"),setValue(e,t){e.setExtraPropValue("$dashboard.rect",t)}}},{name:"rotation",title:"旋转角度",setter:{componentName:"SliderSetter",props:{min:0,max:360,suffix:"°"}},extraProps:{defaultValue:0}},{name:"opacity",title:"不透明度",setter:{componentName:"SliderSetter",props:{min:0,max:100,suffix:"%"}},extraProps:{defaultValue:100}},{name:"background",title:"背景颜色",setter:"ColorSetter",extraProps:{defaultValue:"transparent"}}]),l=[{title:"点击事件",children:[{label:"点击",value:"onClick",description:"鼠标点击时触发"},{label:"双击",value:"onDoubleClick",description:"鼠标双击时触发"}]},{title:"鼠标事件",children:[{label:"鼠标进入",value:"onMouseEnter",description:"鼠标进入时触发"},{label:"鼠标离开",value:"onMouseLeave",description:"鼠标离开时触发"}]}],s=((e=l)=>r("事件绑定",[{name:"events",title:"事件",setter:{componentName:"EventSetter",props:{events:e}},extraProps:{label:!1}}]))(),i=r("高级配置",[{title:"条件渲染",setter:"SwitchSetter",extraProps:{supportVariable:!0,getValue:e=>e.getNode().getExtraPropValue("condition"),setValue(e,t){e.getNode().setExtraProp("condition",t)}}}]),p="EasyEditorMaterialsProgress";const n=((e,t)=>({props:[{type:"group",title:"属性",setter:"TabSetter",items:[{type:"group",key:"config",title:"配置",items:[a,o,e]},{type:"group",key:"data",title:"数据",items:[a,t]},{type:"group",key:"advanced",title:"高级",items:[a,s,i]}]}],component:{},supports:{},advanced:{}}))(r("组件配置",[{type:"group",title:"组件配置",setter:"SubTabSetter",items:[{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"}}]},{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:!0}},{name:"showLabel",title:"显示标签",setter:"SwitchSetter",extraProps:{defaultValue:!1}},{name:"label",title:"标签文本",setter:"StringSetter"}]},{type:"group",key:"style",title:"样式",items:[{name:"strokeWidthRatio",title:"线条粗细",setter:{componentName:"SliderSetter",props:{min:.02,max:.2,step:.01}},extraProps:{defaultValue:.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:!1}},{name:"gradientColors",title:"渐变颜色",setter:{componentName:"ArraySetter",props:{itemSetter:"ColorSetter"}},extraProps:{defaultValue:["#00d4ff","#9b59b6"]}}]}]}],{padding:"6px 16px 12px"}),{name:"$data",title:"数据配置",setter:{componentName:"DataSetter",props:{expectedFields:[{name:"value",label:"value",type:"number",required:!0,description:"当前值"}],showPreview:!0,previewLimit:10}},extraProps:{label:!1}});const u={componentName:p,title:"进度条",group:"display",devMode:"proCode",npm:{package:"@easy-editor/materials-dashboard-progress",version:"0.0.4",globalName:p,componentName:p},snippets:[{title:"进度环",screenshot:"",schema:{componentName:p,title:"进度环",props:{$data:t({value:75}),maxValue:100,type:"ring",showValue:!0,showLabel:!1,valueFormat:"percent",strokeWidthRatio:.07,progressColor:"#00ffff",rotation:0,opacity:100,background:"transparent"},$dashboard:{rect:{width:140,height:140}}}},{title:"线性进度条",screenshot:"",schema:{componentName:p,title:"线性进度条",props:{$data:t({value:85}),maxValue:100,type:"bar",showValue:!0,showLabel:!0,label:"完成率",valueFormat:"percent",progressColor:"#00ff88",gradientEnable:!0,gradientColors:["#00ff88","#00d4ff"],rotation:0,opacity:100,background:"transparent"},$dashboard:{rect:{width:300,height:50}}}}],configure:n};e.meta=u});