@easy-editor/materials-dashboard-button 0.0.2 → 0.0.4

package/CHANGELOG.md

@@ -1,7 +1,21 @@
-# @easy-editor/materials-dashboard-button
-
-## 0.0.2
-
-### Patch Changes
-
-- feat: new setters
+# @easy-editor/materials-dashboard-button
+
+## 0.0.4
+
+### Patch Changes
+
+- fix: component export error
+
+## 0.0.3
+
+### Patch Changes
+
+- perf: configure & datasource
+- Updated dependencies
+  - @easy-editor/materials-shared@0.0.1
+
+## 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-button",
-  "version": "0.0.2",
+  "version": "0.0.4",
   "description": "Button component for EasyEditor dashboard",
   "type": "module",
   "main": "dist/index.js",
@@ -45,19 +45,15 @@
     "@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",
     "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,80 +1,139 @@
-/**
- * Button Component
- * 按钮组件
- */
-
-import type { CSSProperties, Ref, MouseEvent } from 'react'
-import { cn } from '@easy-editor/materials-shared'
-import styles from './component.module.css'
-
-export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger'
-export type ButtonSize = 'small' | 'medium' | 'large'
-
-export interface ButtonProps {
-  ref?: Ref<HTMLButtonElement>
-  /** 按钮文本 */
-  text?: string
-  /** 按钮变体 */
-  variant?: ButtonVariant
-  /** 按钮尺寸 */
-  size?: ButtonSize
-  /** 是否禁用 */
-  disabled?: boolean
-  /** 是否显示发光效果 */
-  glowEnable?: boolean
-  /** 点击事件 */
-  onClick?: (e: MouseEvent<HTMLButtonElement>) => void
-  /** 外部样式 */
-  style?: CSSProperties
-}
-
-const getSizeClass = (size: ButtonSize): string => {
-  switch (size) {
-    case 'small':
-      return styles.sizeSmall
-    case 'medium':
-      return styles.sizeMedium
-    case 'large':
-      return styles.sizeLarge
-    default:
-      return styles.sizeMedium
-  }
-}
-
-const getVariantClass = (variant: ButtonVariant): string => {
-  switch (variant) {
-    case 'primary':
-      return styles.variantPrimary
-    case 'secondary':
-      return styles.variantSecondary
-    case 'outline':
-      return styles.variantOutline
-    case 'ghost':
-      return styles.variantGhost
-    case 'danger':
-      return styles.variantDanger
-    default:
-      return styles.variantPrimary
-  }
-}
-
-export const Button: React.FC<ButtonProps> = ({
-  ref,
-  text = '按钮',
-  variant = 'primary',
-  size = 'medium',
-  disabled = false,
-  glowEnable = false,
-  onClick,
-  style: externalStyle,
-}) => {
-  const buttonClass = cn(styles.button, getSizeClass(size), getVariantClass(variant), glowEnable && styles.glow)
-
-  return (
-    <button className={buttonClass} disabled={disabled} onClick={onClick} ref={ref} style={externalStyle} type='button'>
-      {text ? <span>{text}</span> : null}
-    </button>
-  )
-}
-
-export default Button
+/**
+ * Button Component
+ * 按钮组件 - 支持数据源绑定和事件交互
+ */
+
+import { useMemo, type CSSProperties, type MouseEvent } from 'react'
+import { cn, type MaterialComponet, useDataSource } from '@easy-editor/materials-shared'
+import styles from './component.module.css'
+
+export type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'ghost' | 'danger'
+export type ButtonSize = 'small' | 'medium' | 'large'
+
+export interface ButtonProps extends MaterialComponet<HTMLButtonElement> {
+  /** 按钮变体 */
+  variant?: ButtonVariant
+  /** 按钮尺寸 */
+  size?: ButtonSize
+  /** 是否禁用 */
+  disabled?: boolean
+  /** 是否显示发光效果 */
+  glowEnable?: boolean
+  /** 链接地址 */
+  href?: string
+  /** 链接打开方式 */
+  target?: '_blank' | '_self'
+  /** 是否加载中 */
+  loading?: boolean
+  /** 加载文本 */
+  loadingText?: string
+  /** 点击事件 */
+  onClick?: (e: MouseEvent<HTMLButtonElement>) => void
+  /** 双击事件 */
+  onDoubleClick?: (e: MouseEvent<HTMLButtonElement>) => void
+  /** 鼠标进入 */
+  onMouseEnter?: (e: MouseEvent<HTMLButtonElement>) => void
+  /** 鼠标离开 */
+  onMouseLeave?: (e: MouseEvent<HTMLButtonElement>) => void
+}
+
+const getSizeClass = (size: ButtonSize): string => {
+  switch (size) {
+    case 'small':
+      return styles.sizeSmall
+    case 'medium':
+      return styles.sizeMedium
+    case 'large':
+      return styles.sizeLarge
+    default:
+      return styles.sizeMedium
+  }
+}
+
+const getVariantClass = (variant: ButtonVariant): string => {
+  switch (variant) {
+    case 'primary':
+      return styles.variantPrimary
+    case 'secondary':
+      return styles.variantSecondary
+    case 'outline':
+      return styles.variantOutline
+    case 'ghost':
+      return styles.variantGhost
+    case 'danger':
+      return styles.variantDanger
+    default:
+      return styles.variantPrimary
+  }
+}
+
+export const Button: React.FC<ButtonProps> = ({
+  ref,
+  $data,
+  __dataSource,
+  variant = 'primary',
+  size = 'medium',
+  disabled = false,
+  glowEnable = false,
+  href,
+  target = '_blank',
+  loading = false,
+  loadingText = '加载中...',
+  rotation = 0,
+  opacity = 100,
+  background,
+  onClick,
+  onDoubleClick,
+  onMouseEnter,
+  onMouseLeave,
+  style: externalStyle,
+}) => {
+  const dataSource = useDataSource($data, __dataSource)
+  const data = useMemo<string>(() => {
+    if (dataSource.length > 0 && dataSource[0]?.text) {
+      return String(dataSource[0].text)
+    }
+    return ''
+  }, [dataSource])
+
+  const buttonClass = cn(styles.button, getSizeClass(size), getVariantClass(variant), glowEnable && styles.glow)
+
+  const displayText = loading ? loadingText : data
+
+  const buttonStyle: CSSProperties = {
+    transform: rotation !== 0 ? `rotate(${rotation}deg)` : undefined,
+    opacity: opacity / 100,
+    backgroundColor: background,
+    ...externalStyle,
+  }
+
+  const handleClick = (e: MouseEvent<HTMLButtonElement>) => {
+    if (disabled || loading) {
+      return
+    }
+
+    if (href) {
+      window.open(href, target)
+    }
+
+    onClick?.(e)
+  }
+
+  return (
+    <button
+      className={buttonClass}
+      disabled={disabled || loading}
+      onClick={handleClick}
+      onDoubleClick={onDoubleClick}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={onMouseLeave}
+      ref={ref}
+      style={buttonStyle}
+      type='button'
+    >
+      {displayText ? <span>{displayText}</span> : null}
+    </button>
+  )
+}
+
+export default Button