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

package/CHANGELOG.md

@@ -1,13 +1,27 @@
-# @easy-editor/materials-dashboard-number-flip
-
-## 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/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-number-flip",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "Number Flip component for EasyEditor dashboard",
   "type": "module",
   "main": "dist/index.js",
@@ -45,20 +45,16 @@
     "@types/react-dom": "^18 || ^19"
   },
   "dependencies": {
-    "@easy-editor/materials-shared": "0.0.0"
+    "@easy-editor/materials-shared": "0.0.1"
   },
   "scripts": {
-    "dev": "vite",
+    "dev": "easypack dev",
     "dev:debug": "vite --port 5024",
     "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,18 +1,15 @@
 /**
  * Number Flip Component
- * 数字翻牌组件 - 用于展示 KPI、统计数字等
+ * 数字翻牌组件 - 支持数据源绑定和事件交互
  */
 
-import type { CSSProperties, Ref } from 'react'
-import { cn } from '@easy-editor/materials-shared'
+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 {
-  ref?: Ref<HTMLDivElement>
-  /** 数值 */
-  value?: number
+export interface NumberFlipProps extends MaterialComponet {
   /** 小数位数 */
   decimals?: number
   /** 是否显示千分位分隔符 */
@@ -41,8 +38,14 @@ export interface NumberFlipProps {
   trendUpColor?: string
   /** 趋势下降颜色 */
   trendDownColor?: string
-  /** 外部样式 */
-  style?: CSSProperties
+  /** 点击事件 */
+  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 => {
@@ -100,7 +103,8 @@ const TrendIndicator: React.FC<{
 
 export const NumberFlip: React.FC<NumberFlipProps> = ({
   ref,
-  value = 0,
+  $data,
+  __dataSource,
   decimals = 0,
   separator = true,
   prefix = '',
@@ -115,8 +119,24 @@ export const NumberFlip: React.FC<NumberFlipProps> = ({
   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)
 
@@ -126,8 +146,23 @@ export const NumberFlip: React.FC<NumberFlipProps> = ({
       ? `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} ref={ref} style={externalStyle}>
+    <div
+      className={styles.container}
+      onClick={onClick}
+      onDoubleClick={onDoubleClick}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      ref={ref}
+      style={containerStyle}
+    >
       <div className={styles.content}>
         {prefix ? (
           <span