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

package/CHANGELOG.md

@@ -1,13 +1,27 @@
-# @easy-editor/materials-dashboard-carousel
-
-## 0.0.3
-
-### Patch Changes
-
-- fix: build error
-
-## 0.0.2
-
-### Patch Changes
-
-- feat: new setters
+# @easy-editor/materials-dashboard-carousel
+
+## 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-carousel",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "Carousel 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,9 +1,10 @@
 /**
  * Carousel Component
- * 轮播组件
+ * 轮播组件 - 支持数据源绑定和事件交互
  */
 
-import { useState, useEffect, useCallback, type CSSProperties, type Ref } from 'react'
+import { useState, useEffect, useCallback, useMemo, type CSSProperties } from 'react'
+import { type MaterialComponet, useDataSource } from '@easy-editor/materials-shared'
 import styles from './component.module.css'
 
 export interface CarouselItem {
@@ -15,10 +16,7 @@ export interface CarouselItem {
   link?: string
 }
 
-export interface CarouselProps {
-  ref?: Ref<HTMLDivElement>
-  /** 轮播项 */
-  items?: CarouselItem[]
+export interface CarouselProps extends MaterialComponet {
   /** 自动播放 */
   autoPlay?: boolean
   /** 自动播放间隔（毫秒） */
@@ -29,8 +27,16 @@ export interface CarouselProps {
   showIndicators?: boolean
   /** 是否循环播放 */
   loop?: boolean
-  /** 外部样式 */
-  style?: CSSProperties
+  /** 点击事件 */
+  onClick?: (e: React.MouseEvent) => void
+  /** 双击事件 */
+  onDoubleClick?: (e: React.MouseEvent) => void
+  /** 鼠标进入 */
+  onMouseEnter?: (e: React.MouseEvent) => void
+  /** 鼠标离开 */
+  onMouseLeave?: (e: React.MouseEvent) => void
+  /** 切换事件 */
+  onChange?: (index: number) => void
 }
 
 const DEFAULT_ITEMS: CarouselItem[] = [
@@ -55,37 +61,61 @@ const ChevronRight = () => (
 
 export const Carousel: React.FC<CarouselProps> = ({
   ref,
-  items = DEFAULT_ITEMS,
+  $data,
+  __dataSource,
   autoPlay = true,
   interval = 3000,
   showNav = true,
   showIndicators = true,
   loop = true,
+  rotation,
+  opacity,
+  background,
   style: externalStyle,
+  onClick,
+  onDoubleClick,
+  onMouseEnter,
+  onMouseLeave,
+  onChange,
 }) => {
   const [currentIndex, setCurrentIndex] = useState(0)
 
+  // 解析数据源
+  const dataSource = useDataSource($data, __dataSource)
+  const items = useMemo<CarouselItem[]>(() => {
+    if (dataSource.length > 0) {
+      return dataSource as CarouselItem[]
+    }
+    return DEFAULT_ITEMS
+  }, [dataSource])
+
   const goToNext = useCallback(() => {
     setCurrentIndex(prev => {
-      if (prev >= items.length - 1) {
-        return loop ? 0 : prev
+      const nextIndex = prev >= items.length - 1 ? (loop ? 0 : prev) : prev + 1
+      if (nextIndex !== prev) {
+        onChange?.(nextIndex)
       }
-      return prev + 1
+      return nextIndex
     })
-  }, [items.length, loop])
+  }, [items.length, loop, onChange])
 
   const goToPrev = useCallback(() => {
     setCurrentIndex(prev => {
-      if (prev <= 0) {
-        return loop ? items.length - 1 : prev
+      const nextIndex = prev <= 0 ? (loop ? items.length - 1 : prev) : prev - 1
+      if (nextIndex !== prev) {
+        onChange?.(nextIndex)
       }
-      return prev - 1
+      return nextIndex
     })
-  }, [items.length, loop])
-
-  const goToSlide = useCallback((index: number) => {
-    setCurrentIndex(index)
-  }, [])
+  }, [items.length, loop, onChange])
+
+  const goToSlide = useCallback(
+    (index: number) => {
+      setCurrentIndex(index)
+      onChange?.(index)
+    },
+    [onChange],
+  )
 
   // 自动播放
   useEffect(() => {
@@ -101,8 +131,23 @@ export const Carousel: React.FC<CarouselProps> = ({
     return null
   }
 
+  const containerStyle: CSSProperties = {
+    transform: rotation ? `rotate(${rotation}deg)` : undefined,
+    opacity: opacity !== undefined ? opacity / 100 : undefined,
+    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.track} style={{ transform: `translateX(-${currentIndex * 100}%)` }}>
         {items.map((item, index) => (
           <div className={styles.slide} key={index}>

package/src/configure.ts

@@ -1,194 +1,97 @@
-/**
- * Carousel 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: 'items',
-                  title: '轮播项',
-                  setter: 'JsonSetter',
-                },
-              ],
-            },
-            {
-              type: 'group',
-              title: '行为',
-              setter: {
-                componentName: 'CollapseSetter',
-                props: {
-                  icon: false,
-                },
-              },
-              items: [
-                {
-                  name: 'autoPlay',
-                  title: '自动播放',
-                  setter: 'SwitchSetter',
-                  extraProps: {
-                    defaultValue: true,
-                  },
-                },
-                {
-                  name: 'interval',
-                  title: '播放间隔(ms)',
-                  setter: 'NumberSetter',
-                  extraProps: {
-                    defaultValue: 3000,
-                  },
-                },
-                {
-                  name: 'loop',
-                  title: '循环播放',
-                  setter: 'SwitchSetter',
-                  extraProps: {
-                    defaultValue: true,
-                  },
-                },
-              ],
-            },
-            {
-              type: 'group',
-              title: '显示',
-              setter: {
-                componentName: 'CollapseSetter',
-                props: {
-                  icon: false,
-                },
-              },
-              items: [
-                {
-                  name: 'showNav',
-                  title: '显示导航按钮',
-                  setter: 'SwitchSetter',
-                  extraProps: {
-                    defaultValue: true,
-                  },
-                },
-                {
-                  name: 'showIndicators',
-                  title: '显示指示器',
-                  setter: 'SwitchSetter',
-                  extraProps: {
-                    defaultValue: true,
-                  },
-                },
-              ],
-            },
-          ],
-        },
-        {
-          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
+/**
+ * Carousel 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: 'behavior',
+          title: '行为',
+          items: [
+            {
+              name: 'autoPlay',
+              title: '自动播放',
+              setter: 'SwitchSetter',
+              extraProps: {
+                defaultValue: true,
+              },
+            },
+            {
+              name: 'interval',
+              title: '播放间隔',
+              setter: {
+                componentName: 'SliderSetter',
+                props: {
+                  min: 1000,
+                  max: 10000,
+                  step: 500,
+                  suffix: 'ms',
+                },
+              },
+              extraProps: {
+                defaultValue: 3000,
+              },
+            },
+            {
+              name: 'loop',
+              title: '循环播放',
+              setter: 'SwitchSetter',
+              extraProps: {
+                defaultValue: true,
+              },
+            },
+          ],
+        },
+        // 显示 Tab
+        {
+          type: 'group',
+          key: 'display',
+          title: '显示',
+          items: [
+            {
+              name: 'showNav',
+              title: '显示导航按钮',
+              setter: 'SwitchSetter',
+              extraProps: {
+                defaultValue: true,
+              },
+            },
+            {
+              name: 'showIndicators',
+              title: '显示指示器',
+              setter: 'SwitchSetter',
+              extraProps: {
+                defaultValue: true,
+              },
+            },
+          ],
+        },
+      ],
+    },
+  ],
+  {
+    padding: '6px 16px 12px',
+  },
+)
+
+/** 数据配置 */
+const dataConfigGroup: FieldConfig = createDataConfigGroup([
+  { name: 'src', label: 'src', type: 'string', required: true, description: '图片地址' },
+  { name: 'alt', label: 'alt', type: 'string', required: false, description: '图片描述' },
+  { name: 'link', label: 'link', type: 'string', required: false, description: '点击链接' },
+])
+
+export const configure = createStandardConfigure(componentConfigGroup, dataConfigGroup)

package/src/index.tsx

@@ -1,7 +1,7 @@
-/**
- * Carousel Entry
- * 轮播组件入口
- */
-
-export { Carousel as component } from './component'
-export { default as meta } from './meta'
+/**
+ * Carousel Entry
+ * 轮播组件入口
+ */
+
+export { Carousel 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 = {

package/src/snippets.ts

@@ -1,60 +1,70 @@
-/**
- * Carousel Snippets
- * 轮播组件代码片段
- */
-
-import type { Snippet } from '@easy-editor/core'
-import { COMPONENT_NAME } from './constants'
-
-export const snippets: Snippet[] = [
-  {
-    title: '图片轮播',
-    screenshot: '',
-    schema: {
-      componentName: COMPONENT_NAME,
-      props: {
-        items: [
-          { src: 'https://picsum.photos/800/400?random=1', alt: 'Slide 1' },
-          { src: 'https://picsum.photos/800/400?random=2', alt: 'Slide 2' },
-          { src: 'https://picsum.photos/800/400?random=3', alt: 'Slide 3' },
-        ],
-        autoPlay: true,
-        interval: 3000,
-        showNav: true,
-        showIndicators: true,
-        loop: true,
-      },
-      $dashboard: {
-        rect: {
-          width: 600,
-          height: 300,
-        },
-      },
-    },
-  },
-  {
-    title: '手动轮播',
-    screenshot: '',
-    schema: {
-      componentName: COMPONENT_NAME,
-      props: {
-        items: [
-          { src: 'https://picsum.photos/800/400?random=4', alt: 'Slide 1' },
-          { src: 'https://picsum.photos/800/400?random=5', alt: 'Slide 2' },
-        ],
-        autoPlay: false,
-        showNav: true,
-        showIndicators: true,
-        loop: true,
-      },
-      $dashboard: {
-        rect: {
-          width: 600,
-          height: 300,
-        },
-      },
-    },
-  },
-]
-
-export default snippets
+/**
+ * Carousel Snippets
+ * 轮播组件代码片段 - 使用共享数据源生成函数
+ */
+
+import type { Snippet } from '@easy-editor/core'
+import { generateStaticDataSource } from '@easy-editor/materials-shared'
+import { COMPONENT_NAME } from './constants'
+
+/** 默认轮播数据 */
+const DEFAULT_CAROUSEL_DATA = [
+  { src: 'https://picsum.photos/800/400?random=1', alt: 'Slide 1' },
+  { src: 'https://picsum.photos/800/400?random=2', alt: 'Slide 2' },
+  { src: 'https://picsum.photos/800/400?random=3', alt: 'Slide 3' },
+]
+
+export const snippets: Snippet[] = [
+  {
+    title: '图片轮播',
+    screenshot: '',
+    schema: {
+      componentName: COMPONENT_NAME,
+      title: '图片轮播',
+      props: {
+        $data: generateStaticDataSource(DEFAULT_CAROUSEL_DATA),
+        autoPlay: true,
+        interval: 3000,
+        showNav: true,
+        showIndicators: true,
+        loop: true,
+        rotation: 0,
+        opacity: 100,
+        background: 'transparent',
+      },
+      $dashboard: {
+        rect: {
+          width: 600,
+          height: 300,
+        },
+      },
+    },
+  },
+  {
+    title: '手动轮播',
+    screenshot: '',
+    schema: {
+      componentName: COMPONENT_NAME,
+      title: '手动轮播',
+      props: {
+        $data: generateStaticDataSource([
+          { src: 'https://picsum.photos/800/400?random=4', alt: 'Slide 1' },
+          { src: 'https://picsum.photos/800/400?random=5', alt: 'Slide 2' },
+        ]),
+        autoPlay: false,
+        showNav: true,
+        showIndicators: true,
+        loop: true,
+        rotation: 0,
+        opacity: 100,
+        background: 'transparent',
+      },
+      $dashboard: {
+        rect: {
+          width: 600,
+          height: 300,
+        },
+      },
+    },
+  },
+]