@easy-editor/materials-dashboard-number-flip 0.0.4 → 0.0.5

package/CHANGELOG.md

@@ -1,21 +1,27 @@
-# @easy-editor/materials-dashboard-number-flip
-
-## 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-number-flip
+
+## 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-number-flip",
-  "version": "0.0.4",
+  "version": "0.0.5",
   "description": "Number Flip component for EasyEditor dashboard",
   "type": "module",
   "main": "dist/index.js",

package/src/component.tsx

@@ -1,212 +1,214 @@
-/**
- * Number Flip Component
- * 数字翻牌组件 - 支持数据源绑定和事件交互
- */
-
-import { useMemo, type CSSProperties } from 'react'
-import { cn, type MaterialComponet, useDataSource } from '@easy-editor/materials-shared'
-import styles from './component.module.css'
-
-export type TrendType = 'up' | 'down' | 'flat'
-
-export interface NumberFlipProps extends MaterialComponet {
-  /** 小数位数 */
-  decimals?: number
-  /** 是否显示千分位分隔符 */
-  separator?: boolean
-  /** 前缀 */
-  prefix?: string
-  /** 后缀 */
-  suffix?: string
-  /** 字体大小 */
-  fontSize?: number
-  /** 字体类型 */
-  fontFamily?: 'digital' | 'default'
-  /** 颜色 */
-  color?: string
-  /** 发光强度 (0-2) */
-  glowIntensity?: number
-  /** 是否显示趋势 */
-  trendEnable?: boolean
-  /** 趋势值 */
-  trendValue?: number
-  /** 趋势类型 */
-  trendType?: TrendType
-  /** 趋势后缀 */
-  trendSuffix?: string
-  /** 趋势上升颜色 */
-  trendUpColor?: string
-  /** 趋势下降颜色 */
-  trendDownColor?: string
-  /** 点击事件 */
-  onClick?: (e: React.MouseEvent) => void
-  /** 双击事件 */
-  onDoubleClick?: (e: React.MouseEvent) => void
-  /** 鼠标进入 */
-  onMouseEnter?: (e: React.MouseEvent) => void
-  /** 鼠标离开 */
-  onMouseLeave?: (e: React.MouseEvent) => void
-}
-
-const formatNumber = (value: number, decimals: number, separator: boolean): string => {
-  const fixed = value.toFixed(decimals)
-  if (!separator) {
-    return fixed
-  }
-
-  const [intPart, decPart] = fixed.split('.')
-  const formattedInt = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
-  return decPart ? `${formattedInt}.${decPart}` : formattedInt
-}
-
-const TrendIndicator: React.FC<{
-  type: TrendType
-  value: number
-  suffix: string
-  upColor: string
-  downColor: string
-  size: number
-}> = ({ type, value, suffix, upColor, downColor, size }) => {
-  let color = '#8899aa'
-  if (type === 'up') {
-    color = upColor
-  } else if (type === 'down') {
-    color = downColor
-  }
-
-  return (
-    <div className={styles.trend} style={{ fontSize: size * 0.35 }}>
-      {type !== 'flat' && (
-        <svg
-          aria-label={`Trend ${type}`}
-          fill='none'
-          height={size * 0.3}
-          role='img'
-          style={{
-            transform: type === 'down' ? 'rotate(180deg)' : undefined,
-          }}
-          viewBox='0 0 24 24'
-          width={size * 0.3}
-        >
-          <title>Trend arrow {type}</title>
-          <path d='M12 4L20 14H4L12 4Z' fill={color} />
-        </svg>
-      )}
-      {type === 'flat' && <span style={{ color, marginRight: 4 }}>—</span>}
-      <span style={{ color }}>
-        {value}
-        {suffix}
-      </span>
-    </div>
-  )
-}
-
-export const NumberFlip: React.FC<NumberFlipProps> = ({
-  ref,
-  $data,
-  __dataSource,
-  decimals = 0,
-  separator = true,
-  prefix = '',
-  suffix = '',
-  fontSize = 48,
-  fontFamily = 'digital',
-  color = '#00d4ff',
-  glowIntensity = 0.5,
-  trendEnable = false,
-  trendValue = 0,
-  trendType = 'up',
-  trendSuffix = '%',
-  trendUpColor = '#52c41a',
-  trendDownColor = '#ff4d4f',
-  rotation = 0,
-  opacity = 100,
-  background = 'transparent',
-  style: externalStyle,
-  onClick,
-  onDoubleClick,
-  onMouseEnter,
-  onMouseLeave,
-}) => {
-  // 解析数据源
-  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 isDigital = fontFamily === 'digital'
-  const formattedValue = formatNumber(value, decimals, separator)
-
-  // 计算发光效果的 text-shadow
-  const glowShadow =
-    glowIntensity > 0
-      ? `0 0 ${10 * glowIntensity}px ${color}, 0 0 ${20 * glowIntensity}px ${color}40, 0 0 ${30 * glowIntensity}px ${color}20`
-      : 'none'
-
-  const containerStyle: CSSProperties = {
-    transform: rotation !== 0 ? `rotate(${rotation}deg)` : undefined,
-    opacity: opacity / 100,
-    backgroundColor: background,
-    ...externalStyle,
-  }
-
-  return (
-    <div
-      className={styles.container}
-      onClick={onClick}
-      onDoubleClick={onDoubleClick}
-      onMouseEnter={onMouseEnter}
-      onMouseLeave={onMouseLeave}
-      ref={ref}
-      style={containerStyle}
-    >
-      <div className={styles.content}>
-        {prefix ? (
-          <span
-            className={cn(styles.prefix, isDigital && styles.prefixDigital)}
-            style={{
-              fontSize: `${fontSize * 0.5}px`,
-              color,
-            }}
-          >
-            {prefix}
-          </span>
-        ) : null}
-        <span
-          className={cn(styles.value, isDigital && styles.valueDigital)}
-          style={{
-            fontSize: `${fontSize}px`,
-            color,
-            textShadow: glowShadow,
-          }}
-        >
-          {formattedValue}
-        </span>
-        {suffix ? (
-          <span
-            className={cn(styles.suffix, isDigital && styles.suffixDigital)}
-            style={{
-              fontSize: `${fontSize * 0.4}px`,
-              color,
-            }}
-          >
-            {suffix}
-          </span>
-        ) : null}
-      </div>
-      {trendEnable ? (
-        <TrendIndicator
-          downColor={trendDownColor}
-          size={fontSize}
-          suffix={trendSuffix}
-          type={trendType}
-          upColor={trendUpColor}
-          value={trendValue}
-        />
-      ) : null}
-    </div>
-  )
-}
+/**
+ * Number Flip Component
+ * 数字翻牌组件 - 支持数据源绑定和事件交互
+ */
+
+import { useMemo, type CSSProperties } from 'react'
+import { cn, type MaterialComponet, useDataSource } from '@easy-editor/materials-shared'
+import styles from './component.module.css'
+
+export type TrendType = 'up' | 'down' | 'flat'
+
+export interface NumberFlipProps extends MaterialComponet {
+  /** 小数位数 */
+  decimals?: number
+  /** 是否显示千分位分隔符 */
+  separator?: boolean
+  /** 前缀 */
+  prefix?: string
+  /** 后缀 */
+  suffix?: string
+  /** 字体大小 */
+  fontSize?: number
+  /** 字体类型 */
+  fontFamily?: 'digital' | 'default'
+  /** 颜色 */
+  color?: string
+  /** 发光强度 (0-2) */
+  glowIntensity?: number
+  /** 是否显示趋势 */
+  trendEnable?: boolean
+  /** 趋势值 */
+  trendValue?: number
+  /** 趋势类型 */
+  trendType?: TrendType
+  /** 趋势后缀 */
+  trendSuffix?: string
+  /** 趋势上升颜色 */
+  trendUpColor?: string
+  /** 趋势下降颜色 */
+  trendDownColor?: string
+  /** 点击事件 */
+  onClick?: (e: React.MouseEvent) => void
+  /** 双击事件 */
+  onDoubleClick?: (e: React.MouseEvent) => void
+  /** 鼠标进入 */
+  onMouseEnter?: (e: React.MouseEvent) => void
+  /** 鼠标离开 */
+  onMouseLeave?: (e: React.MouseEvent) => void
+}
+
+const formatNumber = (value: number, decimals: number, separator: boolean): string => {
+  const fixed = value.toFixed(decimals)
+  if (!separator) {
+    return fixed
+  }
+
+  const [intPart, decPart] = fixed.split('.')
+  const formattedInt = intPart.replace(/\B(?=(\d{3})+(?!\d))/g, ',')
+  return decPart ? `${formattedInt}.${decPart}` : formattedInt
+}
+
+const TrendIndicator: React.FC<{
+  type: TrendType
+  value: number
+  suffix: string
+  upColor: string
+  downColor: string
+  size: number
+}> = ({ type, value, suffix, upColor, downColor, size }) => {
+  let color = '#8899aa'
+  if (type === 'up') {
+    color = upColor
+  } else if (type === 'down') {
+    color = downColor
+  }
+
+  return (
+    <div className={styles.trend} style={{ fontSize: size * 0.35 }}>
+      {type !== 'flat' && (
+        <svg
+          aria-label={`Trend ${type}`}
+          fill='none'
+          height={size * 0.3}
+          role='img'
+          style={{
+            transform: type === 'down' ? 'rotate(180deg)' : undefined,
+          }}
+          viewBox='0 0 24 24'
+          width={size * 0.3}
+        >
+          <title>Trend arrow {type}</title>
+          <path d='M12 4L20 14H4L12 4Z' fill={color} />
+        </svg>
+      )}
+      {type === 'flat' && <span style={{ color, marginRight: 4 }}>—</span>}
+      <span style={{ color }}>
+        {value}
+        {suffix}
+      </span>
+    </div>
+  )
+}
+
+export const NumberFlip: React.FC<NumberFlipProps> = ({
+  ref,
+  $data,
+  __dataSource,
+  decimals = 0,
+  separator = true,
+  prefix = '',
+  suffix = '',
+  fontSize = 48,
+  fontFamily = 'digital',
+  color = '#00d4ff',
+  glowIntensity = 0.5,
+  trendEnable = false,
+  trendValue = 0,
+  trendType = 'up',
+  trendSuffix = '%',
+  trendUpColor = '#52c41a',
+  trendDownColor = '#ff4d4f',
+  rotation = 0,
+  opacity = 100,
+  background = 'transparent',
+  style: externalStyle,
+  onClick,
+  onDoubleClick,
+  onMouseEnter,
+  onMouseLeave,
+}) => {
+  // 解析数据源
+  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 isDigital = fontFamily === 'digital'
+  const formattedValue = formatNumber(value, decimals, separator)
+
+  // 计算发光效果的 text-shadow
+  const glowShadow =
+    glowIntensity > 0
+      ? `0 0 ${10 * glowIntensity}px ${color}, 0 0 ${20 * glowIntensity}px ${color}40, 0 0 ${30 * glowIntensity}px ${color}20`
+      : 'none'
+
+  const containerStyle: CSSProperties = {
+    transform: rotation !== 0 ? `rotate(${rotation}deg)` : undefined,
+    opacity: opacity / 100,
+    backgroundColor: background,
+    ...externalStyle,
+  }
+
+  return (
+    <div
+      className={styles.container}
+      onClick={onClick}
+      onDoubleClick={onDoubleClick}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      ref={ref}
+      style={containerStyle}
+    >
+      <div className={styles.content}>
+        {prefix ? (
+          <span
+            className={cn(styles.prefix, isDigital && styles.prefixDigital)}
+            style={{
+              fontSize: `${fontSize * 0.5}px`,
+              color,
+            }}
+          >
+            {prefix}
+          </span>
+        ) : null}
+        <span
+          className={cn(styles.value, isDigital && styles.valueDigital)}
+          style={{
+            fontSize: `${fontSize}px`,
+            color,
+            textShadow: glowShadow,
+          }}
+        >
+          {formattedValue}
+        </span>
+        {suffix ? (
+          <span
+            className={cn(styles.suffix, isDigital && styles.suffixDigital)}
+            style={{
+              fontSize: `${fontSize * 0.4}px`,
+              color,
+            }}
+          >
+            {suffix}
+          </span>
+        ) : null}
+      </div>
+      {trendEnable ? (
+        <TrendIndicator
+          downColor={trendDownColor}
+          size={fontSize}
+          suffix={trendSuffix}
+          type={trendType}
+          upColor={trendUpColor}
+          value={trendValue}
+        />
+      ) : null}
+    </div>
+  )
+}
+
+export default NumberFlip

package/src/meta.ts

@@ -1,26 +1,28 @@
-/**
- * Number Flip 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,
-}
+/**
+ * Number Flip 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).EasyEditorMaterialsNumberFlipComponent={},e.React,e.jsxRuntime)}(this,function(e,t,o){"use strict";function n(...e){const t=[];for(const o of e)if(o)if("string"==typeof o||"number"==typeof o)t.push(String(o));else if(Array.isArray(o)){const e=n(...o);e&&t.push(e)}else if("object"==typeof o)for(const[e,n]of Object.entries(o))n&&t.push(e);return t.join(" ")}const r=(e,t)=>{if(!t)return e;const o=t.split(".");let n=e;for(const e of o){if(null==n)return;if("object"!=typeof n)return;n=n[e]}return n},i=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 i(o)}if("datasource"===e.sourceType&&e.datasourceId){const o=t?.component?.[e.datasourceId];return i(o)}return[]})(e,t);return((e,t)=>t&&0!==t.length?e.map(e=>{const o={};for(const{componentField:n,sourceField:i}of t)n&&i&&(o[n]=r(e,i));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 c="component-module__container___VbZSk",u="component-module__content___344U8",p="component-module__prefix___RIPOo",d="component-module__prefixDigital___Q-IGu",f="component-module__value___Fg70k",m="component-module__valueDigital___saOYz",_="component-module__suffix___9U3yv",x="component-module__suffixDigital___WiYn4",g="component-module__trend___fgbi4";!function(e,t){void 0===t&&(t={});var o=t.insertAt;if("undefined"!=typeof document){var n=document.head||document.getElementsByTagName("head")[0],r=document.createElement("style");r.type="text/css","top"===o&&n.firstChild?n.insertBefore(r,n.firstChild):n.appendChild(r),r.styleSheet?r.styleSheet.cssText=e:r.appendChild(document.createTextNode(e))}}(".component-module__container___VbZSk{align-items:center;box-sizing:border-box;display:flex;flex-direction:column;gap:8px;height:100%;justify-content:center;width:100%}.component-module__content___344U8{align-items:baseline;display:flex;gap:4px}.component-module__prefix___RIPOo{font-weight:600;opacity:.8}.component-module__prefixDigital___Q-IGu{font-family:Courier New,Courier,monospace}.component-module__value___Fg70k{font-weight:700}.component-module__valueDigital___saOYz{font-family:Courier New,Courier,monospace;letter-spacing:.05em}.component-module__suffix___9U3yv{font-weight:500;margin-left:4px;opacity:.7}.component-module__suffixDigital___WiYn4{font-family:Courier New,Courier,monospace}.component-module__trend___fgbi4{align-items:center;display:flex;font-weight:500;gap:4px}");const y=({type:e,value:t,suffix:n,upColor:r,downColor:i,size:a})=>{let l="#8899aa";return"up"===e?l=r:"down"===e&&(l=i),o.jsxs("div",{className:g,style:{fontSize:.35*a},children:["flat"!==e&&o.jsxs("svg",{"aria-label":`Trend ${e}`,fill:"none",height:.3*a,role:"img",style:{transform:"down"===e?"rotate(180deg)":void 0},viewBox:"0 0 24 24",width:.3*a,children:[o.jsxs("title",{children:["Trend arrow ",e]}),o.jsx("path",{d:"M12 4L20 14H4L12 4Z",fill:l})]}),"flat"===e&&o.jsx("span",{style:{color:l,marginRight:4},children:"—"}),o.jsxs("span",{style:{color:l},children:[t,n]})]})};e.NumberFlip=({ref:e,$data:r,__dataSource:i,decimals:l=0,separator:s=!0,prefix:g="",suffix:h="",fontSize:b=48,fontFamily:v="digital",color:C="#00d4ff",glowIntensity:S=.5,trendEnable:j=!1,trendValue:w=0,trendType:N="up",trendSuffix:V="%",trendUpColor:E="#52c41a",trendDownColor:P="#ff4d4f",rotation:$=0,opacity:k=100,background:D="transparent",style:M,onClick:T,onDoubleClick:z,onMouseEnter:I,onMouseLeave:F})=>{const A=function(e,o){return t.useMemo(()=>a(e,o),[e,o])}(r,i),R="digital"===v,L=((e,t,o)=>{const n=e.toFixed(t);if(!o)return n;const[r,i]=n.split("."),a=r.replace(/\B(?=(\d{3})+(?!\d))/g,",");return i?`${a}.${i}`:a})(t.useMemo(()=>A.length>0&&"number"==typeof A[0]?.value?A[0].value:0,[A]),l,s),O=S>0?`0 0 ${10*S}px ${C}, 0 0 ${20*S}px ${C}40, 0 0 ${30*S}px ${C}20`:"none",U={transform:0!==$?`rotate(${$}deg)`:void 0,opacity:k/100,backgroundColor:D,...M};return o.jsxs("div",{className:c,onClick:T,onDoubleClick:z,onMouseEnter:I,onMouseLeave:F,ref:e,style:U,children:[o.jsxs("div",{className:u,children:[g?o.jsx("span",{className:n(p,R&&d),style:{fontSize:.5*b+"px",color:C},children:g}):null,o.jsx("span",{className:n(f,R&&m),style:{fontSize:`${b}px`,color:C,textShadow:O},children:L}),h?o.jsx("span",{className:n(_,R&&x),style:{fontSize:.4*b+"px",color:C},children:h}):null]}),j?o.jsx(y,{downColor:P,size:b,suffix:V,type:N,upColor:E,value:w}):null]})}});

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).EasyEditorMaterialsNumberFlip={},e.React,e.jsxRuntime)}(this,function(e,t,o){"use strict";function r(...e){const t=[];for(const o of e)if(o)if("string"==typeof o||"number"==typeof o)t.push(String(o));else if(Array.isArray(o)){const e=r(...o);e&&t.push(e)}else if("object"==typeof o)for(const[e,r]of Object.entries(o))r&&t.push(e);return t.join(" ")}const a=(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]:[],i=(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:r,sourceField:n}of t)r&&n&&(o[r]=a(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}),p={name:"nodeInfo",title:"节点信息",setter:"NodeInfoSetter",extraProps:{label:!1}},u=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"}}]),c=[{title:"点击事件",children:[{label:"点击",value:"onClick",description:"鼠标点击时触发"},{label:"双击",value:"onDoubleClick",description:"鼠标双击时触发"}]},{title:"鼠标事件",children:[{label:"鼠标进入",value:"onMouseEnter",description:"鼠标进入时触发"},{label:"鼠标离开",value:"onMouseLeave",description:"鼠标离开时触发"}]}],d=((e=c)=>s("事件绑定",[{name:"events",title:"事件",setter:{componentName:"EventSetter",props:{events:e}},extraProps:{label:!1}}]))(),m=s("高级配置",[{title:"条件渲染",setter:"SwitchSetter",extraProps:{supportVariable:!0,getValue:e=>e.getNode().getExtraPropValue("condition"),setValue(e,t){e.getNode().setExtraProp("condition",t)}}}]);var f="component-module__container___VbZSk",x="component-module__content___344U8",g="component-module__prefix___RIPOo",_="component-module__prefixDigital___Q-IGu",y="component-module__value___Fg70k",h="component-module__valueDigital___saOYz",b="component-module__suffix___9U3yv",S="component-module__suffixDigital___WiYn4",v="component-module__trend___fgbi4";!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{align-items:center;box-sizing:border-box;display:flex;flex-direction:column;gap:8px;height:100%;justify-content:center;width:100%}.component-module__content___344U8{align-items:baseline;display:flex;gap:4px}.component-module__prefix___RIPOo{font-weight:600;opacity:.8}.component-module__prefixDigital___Q-IGu{font-family:Courier New,Courier,monospace}.component-module__value___Fg70k{font-weight:700}.component-module__valueDigital___saOYz{font-family:Courier New,Courier,monospace;letter-spacing:.05em}.component-module__suffix___9U3yv{font-weight:500;margin-left:4px;opacity:.7}.component-module__suffixDigital___WiYn4{font-family:Courier New,Courier,monospace}.component-module__trend___fgbi4{align-items:center;display:flex;font-weight:500;gap:4px}");const N=({type:e,value:t,suffix:r,upColor:a,downColor:n,size:i})=>{let l="#8899aa";return"up"===e?l=a:"down"===e&&(l=n),o.jsxs("div",{className:v,style:{fontSize:.35*i},children:["flat"!==e&&o.jsxs("svg",{"aria-label":`Trend ${e}`,fill:"none",height:.3*i,role:"img",style:{transform:"down"===e?"rotate(180deg)":void 0},viewBox:"0 0 24 24",width:.3*i,children:[o.jsxs("title",{children:["Trend arrow ",e]}),o.jsx("path",{d:"M12 4L20 14H4L12 4Z",fill:l})]}),"flat"===e&&o.jsx("span",{style:{color:l,marginRight:4},children:"—"}),o.jsxs("span",{style:{color:l},children:[t,r]})]})},w="EasyEditorMaterialsNumberFlip";const V=((e,t)=>({props:[{type:"group",title:"属性",setter:"TabSetter",items:[{type:"group",key:"config",title:"配置",items:[p,u,e]},{type:"group",key:"data",title:"数据",items:[p,t]},{type:"group",key:"advanced",title:"高级",items:[p,d,m]}]}],component:{},supports:{},advanced:{}}))(s("组件配置",[{type:"group",title:"组件配置",setter:"SubTabSetter",items:[{type:"group",key:"value",title:"数值",items:[{name:"decimals",title:"小数位数",setter:{componentName:"NumberSetter",props:{min:0,max:10}},extraProps:{defaultValue:0}},{name:"separator",title:"千分位分隔",setter:"SwitchSetter",extraProps:{defaultValue:!0}},{name:"prefix",title:"前缀",setter:"StringSetter"},{name:"suffix",title:"后缀",setter:"StringSetter"}]},{type:"group",key:"trend",title:"趋势",items:[{name:"trendEnable",title:"显示趋势",setter:"SwitchSetter",extraProps:{defaultValue:!1}},{name:"trendValue",title:"趋势值",setter:"NumberSetter",extraProps:{defaultValue:0}},{name:"trendType",title:"趋势类型",setter:{componentName:"SegmentedSetter",props:{options:[{label:"上升",value:"up"},{label:"下降",value:"down"},{label:"持平",value:"flat"}]}},extraProps:{defaultValue:"up"}},{name:"trendSuffix",title:"趋势后缀",setter:"StringSetter",extraProps:{defaultValue:"%"}}]},{type:"group",key:"style",title:"样式",items:[{name:"fontSize",title:"字体大小",setter:{componentName:"SliderSetter",props:{min:12,max:120,step:2,suffix:"px"}},extraProps:{defaultValue:48}},{name:"fontFamily",title:"字体类型",setter:{componentName:"SelectSetter",props:{options:[{label:"数码字体",value:"digital"},{label:"默认字体",value:"default"}]}},extraProps:{defaultValue:"digital"}},{name:"color",title:"颜色",setter:"ColorSetter",extraProps:{defaultValue:"#00d4ff"}},{name:"glowIntensity",title:"发光强度",setter:{componentName:"SliderSetter",props:{min:0,max:2,step:.1}},extraProps:{defaultValue:.5}}]}]}],{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 P={componentName:w,title:"数字翻牌",group:"display",devMode:"proCode",npm:{package:"@easy-editor/materials-dashboard-number-flip",version:"0.0.4",globalName:w,componentName:w},snippets:[{title:"数字翻牌",screenshot:"",schema:{componentName:w,title:"数字翻牌",props:{$data:l({value:1234567}),decimals:0,separator:!0,fontSize:48,fontFamily:"digital",color:"#00d4ff",glowIntensity:.5,rotation:0,opacity:100,background:"transparent"},$dashboard:{rect:{width:280,height:80}}}},{title:"货币数字",screenshot:"",schema:{componentName:w,title:"货币数字",props:{$data:l({value:99999.99}),decimals:2,separator:!0,prefix:"$",fontSize:42,fontFamily:"digital",color:"#00ff88",glowIntensity:.6,rotation:0,opacity:100,background:"transparent"},$dashboard:{rect:{width:260,height:70}}}},{title:"百分比",screenshot:"",schema:{componentName:w,title:"百分比",props:{$data:l({value:87.5}),decimals:1,separator:!1,suffix:"%",fontSize:56,fontFamily:"digital",color:"#ff6b6b",glowIntensity:.8,rotation:0,opacity:100,background:"transparent"},$dashboard:{rect:{width:200,height:90}}}}],configure:V};e.component=({ref:e,$data:a,__dataSource:n,decimals:l=0,separator:s=!0,prefix:p="",suffix:u="",fontSize:c=48,fontFamily:d="digital",color:m="#00d4ff",glowIntensity:v=.5,trendEnable:w=!1,trendValue:V=0,trendType:P="up",trendSuffix:C="%",trendUpColor:k="#52c41a",trendDownColor:j="#ff4d4f",rotation:$=0,opacity:E=100,background:F="transparent",style:I,onClick:T,onDoubleClick:z,onMouseEnter:D,onMouseLeave:M})=>{const A=function(e,o){return t.useMemo(()=>i(e,o),[e,o])}(a,n),L="digital"===d,O=((e,t,o)=>{const r=e.toFixed(t);if(!o)return r;const[a,n]=r.split("."),i=a.replace(/\B(?=(\d{3})+(?!\d))/g,",");return n?`${i}.${n}`:i})(t.useMemo(()=>A.length>0&&"number"==typeof A[0]?.value?A[0].value:0,[A]),l,s),R=v>0?`0 0 ${10*v}px ${m}, 0 0 ${20*v}px ${m}40, 0 0 ${30*v}px ${m}20`:"none",U={transform:0!==$?`rotate(${$}deg)`:void 0,opacity:E/100,backgroundColor:F,...I};return o.jsxs("div",{className:f,onClick:T,onDoubleClick:z,onMouseEnter:D,onMouseLeave:M,ref:e,style:U,children:[o.jsxs("div",{className:x,children:[p?o.jsx("span",{className:r(g,L&&_),style:{fontSize:.5*c+"px",color:m},children:p}):null,o.jsx("span",{className:r(y,L&&h),style:{fontSize:`${c}px`,color:m,textShadow:R},children:O}),u?o.jsx("span",{className:r(b,L&&S),style:{fontSize:.4*c+"px",color:m},children:u}):null]}),w?o.jsx(N,{downColor:j,size:c,suffix:C,type:P,upColor:k,value:V}):null]})},e.meta=P});

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).EasyEditorMaterialsNumberFlipMeta={})}(this,function(e){"use strict";const t=(e,t)=>{const a=Array.isArray(e)?e:[e],r=a[0]||{};return{sourceType:"static",staticData:a,fieldMappings:Object.keys(r).map(e=>({componentField:e,sourceField:e}))}},a=(e,t,a)=>({type:"group",title:e,setter:{componentName:"CollapseSetter",props:{icon:!1,...a}},items:t}),r={name:"nodeInfo",title:"节点信息",setter:"NodeInfoSetter",extraProps:{label:!1}},o=a("基础配置",[{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:"鼠标离开时触发"}]}],i=((e=l)=>a("事件绑定",[{name:"events",title:"事件",setter:{componentName:"EventSetter",props:{events:e}},extraProps:{label:!1}}]))(),n=a("高级配置",[{title:"条件渲染",setter:"SwitchSetter",extraProps:{supportVariable:!0,getValue:e=>e.getNode().getExtraPropValue("condition"),setValue(e,t){e.getNode().setExtraProp("condition",t)}}}]),s="EasyEditorMaterialsNumberFlip";const p=((e,t)=>({props:[{type:"group",title:"属性",setter:"TabSetter",items:[{type:"group",key:"config",title:"配置",items:[r,o,e]},{type:"group",key:"data",title:"数据",items:[r,t]},{type:"group",key:"advanced",title:"高级",items:[r,i,n]}]}],component:{},supports:{},advanced:{}}))(a("组件配置",[{type:"group",title:"组件配置",setter:"SubTabSetter",items:[{type:"group",key:"value",title:"数值",items:[{name:"decimals",title:"小数位数",setter:{componentName:"NumberSetter",props:{min:0,max:10}},extraProps:{defaultValue:0}},{name:"separator",title:"千分位分隔",setter:"SwitchSetter",extraProps:{defaultValue:!0}},{name:"prefix",title:"前缀",setter:"StringSetter"},{name:"suffix",title:"后缀",setter:"StringSetter"}]},{type:"group",key:"trend",title:"趋势",items:[{name:"trendEnable",title:"显示趋势",setter:"SwitchSetter",extraProps:{defaultValue:!1}},{name:"trendValue",title:"趋势值",setter:"NumberSetter",extraProps:{defaultValue:0}},{name:"trendType",title:"趋势类型",setter:{componentName:"SegmentedSetter",props:{options:[{label:"上升",value:"up"},{label:"下降",value:"down"},{label:"持平",value:"flat"}]}},extraProps:{defaultValue:"up"}},{name:"trendSuffix",title:"趋势后缀",setter:"StringSetter",extraProps:{defaultValue:"%"}}]},{type:"group",key:"style",title:"样式",items:[{name:"fontSize",title:"字体大小",setter:{componentName:"SliderSetter",props:{min:12,max:120,step:2,suffix:"px"}},extraProps:{defaultValue:48}},{name:"fontFamily",title:"字体类型",setter:{componentName:"SelectSetter",props:{options:[{label:"数码字体",value:"digital"},{label:"默认字体",value:"default"}]}},extraProps:{defaultValue:"digital"}},{name:"color",title:"颜色",setter:"ColorSetter",extraProps:{defaultValue:"#00d4ff"}},{name:"glowIntensity",title:"发光强度",setter:{componentName:"SliderSetter",props:{min:0,max:2,step:.1}},extraProps:{defaultValue:.5}}]}]}],{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 d={componentName:s,title:"数字翻牌",group:"display",devMode:"proCode",npm:{package:"@easy-editor/materials-dashboard-number-flip",version:"0.0.4",globalName:s,componentName:s},snippets:[{title:"数字翻牌",screenshot:"",schema:{componentName:s,title:"数字翻牌",props:{$data:t({value:1234567}),decimals:0,separator:!0,fontSize:48,fontFamily:"digital",color:"#00d4ff",glowIntensity:.5,rotation:0,opacity:100,background:"transparent"},$dashboard:{rect:{width:280,height:80}}}},{title:"货币数字",screenshot:"",schema:{componentName:s,title:"货币数字",props:{$data:t({value:99999.99}),decimals:2,separator:!0,prefix:"$",fontSize:42,fontFamily:"digital",color:"#00ff88",glowIntensity:.6,rotation:0,opacity:100,background:"transparent"},$dashboard:{rect:{width:260,height:70}}}},{title:"百分比",screenshot:"",schema:{componentName:s,title:"百分比",props:{$data:t({value:87.5}),decimals:1,separator:!1,suffix:"%",fontSize:56,fontFamily:"digital",color:"#ff6b6b",glowIntensity:.8,rotation:0,opacity:100,background:"transparent"},$dashboard:{rect:{width:200,height:90}}}}],configure:p};e.meta=d});