@antsoo-lib/core 2.0.5 → 3.0.1

package/src/render/Checkbox.tsx

@@ -1,65 +1,65 @@
-import { Checkbox } from '@antsoo-lib/components'
-import type { CheckboxProps } from '@antsoo-lib/components'
-import type { VoidFunction } from '@antsoo-lib/shared'
-import { isFunction } from '@antsoo-lib/utils'
-
-import { markRaw } from 'vue'
-import type { VNode } from 'vue'
-
-import type { ToolbarState } from './state'
-import type { CheckboxToolbarItem, ToolbarItem } from './types'
-
-// 复选框渲染函数
-export function renderCheckbox(item: ToolbarItem, toolbarState: ToolbarState): VNode {
-  const checkboxItem = item as CheckboxToolbarItem
-  const { key, events = {} } = checkboxItem
-  const { props = {}, disabled = false } = checkboxItem
-
-  const isDisabled = isFunction(disabled)
-    ? disabled(toolbarState.getAllValues(), toolbarState)
-    : disabled
-  const finalProps: Partial<CheckboxProps> & {
-    disabled?: boolean
-    checked?: boolean
-    value?: boolean
-  } = {
-    ...props,
-    disabled: isDisabled,
-  }
-
-  // 处理事件，注入工具栏状态
-  const processedEvents: Record<string, VoidFunction> = {}
-  Object.keys(events).forEach((eventName) => {
-    processedEvents[eventName] = (...args: any[]) => {
-      // 对于复选框，自动更新状态
-      if (eventName === 'onUpdate:checked' || eventName === 'onChange') {
-        const checked = args[0]?.target?.checked ?? args[0] // 兼容不同的事件格式
-        toolbarState.setValue(key, checked)
-        // 显式触发 onUpdate:value，确保 BaseForm 能接收到数据更新
-        events['onUpdate:value']?.(checked, toolbarState.getAllValues(), toolbarState)
-      }
-
-      // 调用原始事件处理函数
-      events[eventName]?.(...args, toolbarState.getAllValues(), toolbarState)
-    }
-  })
-
-  // 如果没有设置onChange事件，添加默认的状态更新
-  if (!processedEvents['onUpdate:checked'] && !processedEvents.onChange) {
-    processedEvents['onUpdate:checked'] = (checked: boolean) => {
-      toolbarState.setValue(key, checked)
-    }
-  }
-
-  const Comp = markRaw(Checkbox)
-  return (
-    <Comp
-      key={key}
-      checked={toolbarState.getValue(key) ?? finalProps.checked ?? finalProps.value ?? false}
-      {...finalProps}
-      {...processedEvents}
-    >
-      {checkboxItem.label}
-    </Comp>
-  )
-}
+import { Checkbox } from '@antsoo-lib/components'
+import type { CheckboxProps } from '@antsoo-lib/components'
+import type { VoidFunction } from '@antsoo-lib/shared'
+import { isFunction } from '@antsoo-lib/utils'
+
+import { markRaw } from 'vue'
+import type { VNode } from 'vue'
+
+import type { ToolbarState } from './state'
+import type { CheckboxToolbarItem, ToolbarItem } from './types'
+
+// 复选框渲染函数
+export function renderCheckbox(item: ToolbarItem, toolbarState: ToolbarState): VNode {
+  const checkboxItem = item as CheckboxToolbarItem
+  const { key, events = {} } = checkboxItem
+  const { props = {}, disabled = false } = checkboxItem
+
+  const isDisabled = isFunction(disabled)
+    ? disabled(toolbarState.getAllValues(), toolbarState)
+    : disabled
+  const finalProps: Partial<CheckboxProps> & {
+    disabled?: boolean
+    checked?: boolean
+    value?: boolean
+  } = {
+    ...props,
+    disabled: isDisabled,
+  }
+
+  // 处理事件，注入工具栏状态
+  const processedEvents: Record<string, VoidFunction> = {}
+  Object.keys(events).forEach((eventName) => {
+    processedEvents[eventName] = (...args: any[]) => {
+      // 对于复选框，自动更新状态
+      if (eventName === 'onUpdate:checked' || eventName === 'onChange') {
+        const checked = args[0]?.target?.checked ?? args[0] // 兼容不同的事件格式
+        toolbarState.setValue(key, checked)
+        // 显式触发 onUpdate:value，确保 BaseForm 能接收到数据更新
+        events['onUpdate:value']?.(checked, toolbarState.getAllValues(), toolbarState)
+      }
+
+      // 调用原始事件处理函数
+      events[eventName]?.(...args, toolbarState.getAllValues(), toolbarState)
+    }
+  })
+
+  // 如果没有设置onChange事件，添加默认的状态更新
+  if (!processedEvents['onUpdate:checked'] && !processedEvents.onChange) {
+    processedEvents['onUpdate:checked'] = (checked: boolean) => {
+      toolbarState.setValue(key, checked)
+    }
+  }
+
+  const Comp = markRaw(Checkbox)
+  return (
+    <Comp
+      key={key}
+      checked={toolbarState.getValue(key) ?? finalProps.checked ?? finalProps.value ?? false}
+      {...finalProps}
+      {...processedEvents}
+    >
+      {checkboxItem.label}
+    </Comp>
+  )
+}

package/src/render/CheckboxGroup.tsx

@@ -1,57 +1,57 @@
-import { CheckboxGroup } from '@antsoo-lib/components'
-import type { CheckboxGroupProps } from '@antsoo-lib/components'
-import type { VoidFunction } from '@antsoo-lib/shared'
-import { isFunction } from '@antsoo-lib/utils'
-
-import { markRaw } from 'vue'
-import type { VNode } from 'vue'
-
-import type { ToolbarState } from './state'
-import type { CheckboxGroupToolbarItem, ToolbarItem } from './types'
-
-// 复选框组渲染函数
-export function renderCheckboxGroup(item: ToolbarItem, toolbarState: ToolbarState): VNode {
-  const groupItem = item as CheckboxGroupToolbarItem
-  const { key, events = {} } = groupItem
-  const { props = {}, disabled = false } = groupItem
-
-  const isDisabled = isFunction(disabled)
-    ? disabled(toolbarState.getAllValues(), toolbarState)
-    : disabled
-  const finalProps: Partial<CheckboxGroupProps> & { disabled?: boolean; value?: any[] } = {
-    ...props,
-    disabled: isDisabled,
-  }
-
-  // 处理事件，注入工具栏状态
-  const processedEvents: Record<string, VoidFunction> = {}
-  Object.keys(events).forEach((eventName) => {
-    processedEvents[eventName] = (...args: any[]) => {
-      // 对于复选框组，自动更新状态
-      if (eventName === 'onUpdate:value' || eventName === 'onChange') {
-        const value = args[0] // CheckboxGroup 的 onChange 直接返回选中的值数组
-        toolbarState.setValue(key, value)
-      }
-
-      // 调用原始事件处理函数
-      events[eventName]?.(...args, toolbarState.getAllValues(), toolbarState)
-    }
-  })
-
-  // 如果没有设置onChange事件，添加默认的状态更新
-  if (!processedEvents['onUpdate:value'] && !processedEvents.onChange) {
-    processedEvents['onUpdate:value'] = (value) => {
-      toolbarState.setValue(key, value)
-    }
-  }
-
-  const Comp = markRaw(CheckboxGroup)
-  return (
-    <Comp
-      key={key}
-      value={toolbarState.getValue(key) || finalProps.value || []}
-      {...finalProps}
-      {...processedEvents}
-    />
-  )
-}
+import { CheckboxGroup } from '@antsoo-lib/components'
+import type { CheckboxGroupProps } from '@antsoo-lib/components'
+import type { VoidFunction } from '@antsoo-lib/shared'
+import { isFunction } from '@antsoo-lib/utils'
+
+import { markRaw } from 'vue'
+import type { VNode } from 'vue'
+
+import type { ToolbarState } from './state'
+import type { CheckboxGroupToolbarItem, ToolbarItem } from './types'
+
+// 复选框组渲染函数
+export function renderCheckboxGroup(item: ToolbarItem, toolbarState: ToolbarState): VNode {
+  const groupItem = item as CheckboxGroupToolbarItem
+  const { key, events = {} } = groupItem
+  const { props = {}, disabled = false } = groupItem
+
+  const isDisabled = isFunction(disabled)
+    ? disabled(toolbarState.getAllValues(), toolbarState)
+    : disabled
+  const finalProps: Partial<CheckboxGroupProps> & { disabled?: boolean; value?: any[] } = {
+    ...props,
+    disabled: isDisabled,
+  }
+
+  // 处理事件，注入工具栏状态
+  const processedEvents: Record<string, VoidFunction> = {}
+  Object.keys(events).forEach((eventName) => {
+    processedEvents[eventName] = (...args: any[]) => {
+      // 对于复选框组，自动更新状态
+      if (eventName === 'onUpdate:value' || eventName === 'onChange') {
+        const value = args[0] // CheckboxGroup 的 onChange 直接返回选中的值数组
+        toolbarState.setValue(key, value)
+      }
+
+      // 调用原始事件处理函数
+      events[eventName]?.(...args, toolbarState.getAllValues(), toolbarState)
+    }
+  })
+
+  // 如果没有设置onChange事件，添加默认的状态更新
+  if (!processedEvents['onUpdate:value'] && !processedEvents.onChange) {
+    processedEvents['onUpdate:value'] = (value) => {
+      toolbarState.setValue(key, value)
+    }
+  }
+
+  const Comp = markRaw(CheckboxGroup)
+  return (
+    <Comp
+      key={key}
+      value={toolbarState.getValue(key) || finalProps.value || []}
+      {...finalProps}
+      {...processedEvents}
+    />
+  )
+}

package/src/render/Custom.tsx

@@ -1,19 +1,19 @@
-import type { VNode } from 'vue'
-
-import type { ToolbarState } from './state'
-import type { BaseToolbarItem, ToolbarItem } from './types'
-
-// 自定义工具栏项目
-export interface CustomToolbarItem extends BaseToolbarItem {
-  type: 'custom'
-  render: (toolbarState: ToolbarState) => VNode
-}
-
-// 自定义渲染函数
-export function renderCustom(item: ToolbarItem, toolbarState: ToolbarState): VNode {
-  const customItem = item as CustomToolbarItem
-  if (typeof customItem.render === 'function') {
-    return customItem.render(toolbarState)
-  }
-  return <div key={item.key}>{item.label || item.key || '未命名'}</div>
-}
+import type { VNode } from 'vue'
+
+import type { ToolbarState } from './state'
+import type { BaseToolbarItem, ToolbarItem } from './types'
+
+// 自定义工具栏项目
+export interface CustomToolbarItem extends BaseToolbarItem {
+  type: 'custom'
+  render: (toolbarState: ToolbarState) => VNode
+}
+
+// 自定义渲染函数
+export function renderCustom(item: ToolbarItem, toolbarState: ToolbarState): VNode {
+  const customItem = item as CustomToolbarItem
+  if (typeof customItem.render === 'function') {
+    return customItem.render(toolbarState)
+  }
+  return <div key={item.key}>{item.label || item.key || '未命名'}</div>
+}

package/src/render/DatePicker.tsx

@@ -1,83 +1,83 @@
-import { DatePicker, RangePicker } from '@antsoo-lib/components'
-import type { DatePickerProps } from '@antsoo-lib/components'
-import { rangePresets } from '@antsoo-lib/shared'
-import type { VoidFunction } from '@antsoo-lib/shared'
-import { isFunction } from '@antsoo-lib/utils'
-
-import { markRaw, nextTick } from 'vue'
-import type { ComponentPublicInstance, VNode } from 'vue'
-
-import type { ToolbarState } from './state'
-import type { DatePickerToolbarItem, ToolbarItem } from './types'
-
-// 日期选择器渲染函数
-export function renderDatePicker(item: ToolbarItem, toolbarState: ToolbarState): VNode {
-  const dateItem = item as DatePickerToolbarItem
-  const { key, events = {} } = dateItem
-  const { props = {}, disabled = false } = dateItem
-
-  const isDisabled = isFunction(disabled)
-    ? disabled(toolbarState.getAllValues(), toolbarState)
-    : disabled
-  const finalProps: Partial<DatePickerProps> & {
-    disabled?: boolean
-    value?: any
-    autoFocus?: boolean
-  } = {
-    ...props,
-    disabled: isDisabled,
-  }
-
-  // 处理事件，注入工具栏状态
-  const processedEvents: Record<string, VoidFunction> = {}
-  Object.keys(events).forEach((eventName) => {
-    processedEvents[eventName] = (...args: any[]) => {
-      // 对于日期选择器，自动更新状态
-      if (eventName === 'onUpdate:value' || eventName === 'onChange') {
-        const value = args[0]
-        toolbarState.setValue(key, value)
-      }
-
-      // 调用原始事件处理函数
-      events[eventName]?.(...args, toolbarState.getAllValues(), toolbarState)
-    }
-  })
-
-  // 如果没有设置onChange事件，添加默认的状态更新
-  if (!processedEvents['onUpdate:value'] && !processedEvents.onChange) {
-    processedEvents['onUpdate:value'] = (value) => {
-      toolbarState.setValue(key, value)
-    }
-  }
-
-  // 如果需要自动聚焦，添加ref处理
-  if (finalProps.autoFocus) {
-    processedEvents.ref = (el: Element | ComponentPublicInstance | null) => {
-      const element = el as HTMLElement
-      if (element) {
-        // 使用nextTick确保DOM已经渲染完成
-        nextTick(() => {
-          try {
-            element?.focus?.()
-          } catch {
-            // 忽略焦点设置失败的错误
-          }
-        })
-      }
-    }
-  }
-
-  const isRange = dateItem.range
-  const Comp = markRaw(isRange ? RangePicker : DatePicker) as any
-  return (
-    <Comp
-      key={key}
-      value={toolbarState.getValue(key) || finalProps.value}
-      allowClear
-      presets={isRange ? (rangePresets as any) : undefined}
-      popupClassName={isRange ? 'custom-date-picker-presets' : undefined}
-      {...finalProps}
-      {...processedEvents}
-    />
-  )
-}
+import { DatePicker, RangePicker } from '@antsoo-lib/components'
+import type { DatePickerProps } from '@antsoo-lib/components'
+import { rangePresets } from '@antsoo-lib/shared'
+import type { VoidFunction } from '@antsoo-lib/shared'
+import { isFunction } from '@antsoo-lib/utils'
+
+import { markRaw, nextTick } from 'vue'
+import type { ComponentPublicInstance, VNode } from 'vue'
+
+import type { ToolbarState } from './state'
+import type { DatePickerToolbarItem, ToolbarItem } from './types'
+
+// 日期选择器渲染函数
+export function renderDatePicker(item: ToolbarItem, toolbarState: ToolbarState): VNode {
+  const dateItem = item as DatePickerToolbarItem
+  const { key, events = {} } = dateItem
+  const { props = {}, disabled = false } = dateItem
+
+  const isDisabled = isFunction(disabled)
+    ? disabled(toolbarState.getAllValues(), toolbarState)
+    : disabled
+  const finalProps: Partial<DatePickerProps> & {
+    disabled?: boolean
+    value?: any
+    autoFocus?: boolean
+  } = {
+    ...props,
+    disabled: isDisabled,
+  }
+
+  // 处理事件，注入工具栏状态
+  const processedEvents: Record<string, VoidFunction> = {}
+  Object.keys(events).forEach((eventName) => {
+    processedEvents[eventName] = (...args: any[]) => {
+      // 对于日期选择器，自动更新状态
+      if (eventName === 'onUpdate:value' || eventName === 'onChange') {
+        const value = args[0]
+        toolbarState.setValue(key, value)
+      }
+
+      // 调用原始事件处理函数
+      events[eventName]?.(...args, toolbarState.getAllValues(), toolbarState)
+    }
+  })
+
+  // 如果没有设置onChange事件，添加默认的状态更新
+  if (!processedEvents['onUpdate:value'] && !processedEvents.onChange) {
+    processedEvents['onUpdate:value'] = (value) => {
+      toolbarState.setValue(key, value)
+    }
+  }
+
+  // 如果需要自动聚焦，添加ref处理
+  if (finalProps.autoFocus) {
+    processedEvents.ref = (el: Element | ComponentPublicInstance | null) => {
+      const element = el as HTMLElement
+      if (element) {
+        // 使用nextTick确保DOM已经渲染完成
+        nextTick(() => {
+          try {
+            element?.focus?.()
+          } catch {
+            // 忽略焦点设置失败的错误
+          }
+        })
+      }
+    }
+  }
+
+  const isRange = dateItem.range
+  const Comp = markRaw(isRange ? RangePicker : DatePicker) as any
+  return (
+    <Comp
+      key={key}
+      value={toolbarState.getValue(key) || finalProps.value}
+      allowClear
+      presets={isRange ? (rangePresets as any) : undefined}
+      popupClassName={isRange ? 'custom-date-picker-presets' : undefined}
+      {...finalProps}
+      {...processedEvents}
+    />
+  )
+}