@antsoo-lib/core 2.0.5 → 3.0.1

package/src/render/helper.tsx

@@ -1,221 +1,221 @@
-import { Button, Dropdown, Menu, MenuItem, Select } from '@antsoo-lib/components'
-import { DownOutlined, UpOutlined } from '@antsoo-lib/icons'
-import { isEmpty, isFunction } from '@antsoo-lib/utils'
-
-import { markRaw, nextTick, ref } from 'vue'
-import type { VNode } from 'vue'
-
-import { rendererMap } from '.'
-import type { ToolbarState } from './state'
-import type { InputGroupToolbarItem, SlotConfig, ToolbarConfig, ToolbarItem } from './types'
-
-// 工具栏渲染函数
-export function renderToolbar(
-  config: ToolbarConfig,
-  toolbarState: ToolbarState,
-  count: number | (() => number),
-  permissions: string[] = [],
-): VNode[] {
-  if (!config || !config.items || !Array.isArray(config.items)) {
-    return []
-  }
-  const allShowBtn = config.items.filter((item) => {
-    // 预设xtype项由上层组件转换，这里直接过滤掉
-    if ((item as any).xtype) {
-      return false
-    }
-    // Decoupled: Check permission against the passed array
-    if (item.permission && !permissions.includes(item.permission)) {
-      return false
-    }
-    // 检查 beforeCreate 属性
-    if (item.beforeCreate === undefined) {
-      return true // 默认显示
-    }
-
-    if (typeof item.beforeCreate === 'boolean') {
-      return item.beforeCreate
-    }
-
-    if (typeof item.beforeCreate === 'function') {
-      try {
-        return item.beforeCreate(toolbarState)
-      } catch (error) {
-        console.warn(`beforeCreate function error for item ${item.key}:`, error)
-        return false
-      }
-    }
-
-    return true
-  })
-  const extendCount = isFunction(count) ? count() : count
-
-  // 优化按钮展示逻辑
-  let extendShow: any[]
-  let foldShow: any[]
-
-  if (extendCount <= 0 || allShowBtn.length === 0) {
-    // 边界条件：extendCount 无效或没有按钮
-    extendShow = []
-    foldShow = []
-  } else if (allShowBtn.length <= extendCount) {
-    // 按钮数量不超过限制，全部展示
-    extendShow = allShowBtn
-    foldShow = []
-  } else {
-    // 按钮数量超过限制，需要收起部分按钮
-    if (extendCount === 1) {
-      // 特殊情况：只能展示1个按钮，直接显示"更多"按钮
-      extendShow = []
-      foldShow = allShowBtn
-    } else {
-      // 实际展示的普通按钮数量为 extendCount - 1，为"更多"按钮预留位置
-      extendShow = allShowBtn.slice(0, extendCount - 1)
-      foldShow = allShowBtn.slice(extendCount - 1)
-    }
-  }
-
-  // 渲染显示的按钮
-  const renderedExtendShow = extendShow.map((item: ToolbarItem) => {
-    // 对于 PresetToolbarItem，它没有 type 属性来匹配 rendererMap，但应该已被 filter 掉。
-    if ('xtype' in item) return null
-
-    const renderer = rendererMap[item.type]
-    if (!renderer) {
-      console.warn(`Unknown toolbar item type: ${item.type}`)
-      return <div key={item.key}>Unknown type: {item.type}</div>
-    }
-    return renderer(item, toolbarState, toolbarState.getAllValues())
-  })
-
-  // 如果有折叠的按钮，添加下拉菜单
-  if (!isEmpty(foldShow)) {
-    const menuItems = foldShow.map((item: ToolbarItem) => {
-      // 同样的类型守卫
-      if ('xtype' in item) return null
-
-      return (
-        <MenuItem
-          key={item.key || `fold-${Math.random()}`}
-          onClick={() => {
-            // 处理按钮点击事件
-            if (item.events?.onClick) {
-              const loadingControl = {
-                setLoading: (_loading: boolean) => {
-                  // 这里可以根据需要实现加载状态控制
-                },
-                getLoading: () => false,
-              }
-              item.events.onClick(loadingControl, toolbarState.getAllValues(), toolbarState)
-            }
-          }}
-        >
-          {item.label || item.key || '未命名'}
-        </MenuItem>
-      )
-    })
-
-    const dropdownMenu = <Menu>{menuItems}</Menu>
-    const dropdownVisible = ref(false)
-    const MoreButton = markRaw(Dropdown)
-    const moreButton = (
-      <MoreButton
-        overlay={dropdownMenu}
-        trigger={['hover']}
-        onOpenChange={(visible: boolean) => {
-          dropdownVisible.value = visible
-        }}
-      >
-        <Button type="default">
-          更多
-          {dropdownVisible.value ? <UpOutlined /> : <DownOutlined />}
-        </Button>
-      </MoreButton>
-    )
-    renderedExtendShow.push(moreButton)
-  }
-  return renderedExtendShow.filter(Boolean) as VNode[]
-}
-
-// 渲染插槽内容的辅助函数
-export function renderSlotContent(
-  slotConfig: SlotConfig,
-  toolbarState: ToolbarState,
-): VNode | undefined {
-  if (!slotConfig?.content) return undefined
-
-  // 如果是函数，直接调用
-  if (typeof slotConfig.content === 'function') {
-    return slotConfig.content(toolbarState)
-  }
-
-  // 如果是组件配置对象
-  const { component, key, props = {}, events = {}, options = [] } = slotConfig.content
-  const allValues = toolbarState.getAllValues()
-
-  // 处理事件，注入工具栏状态
-  const processedEvents: Record<string, VoidFunction> = {}
-  Object.entries(events).forEach(([eventName, handler]) => {
-    if (eventName === 'onChange') {
-      // 对于 onChange 事件，使用 nextTick 确保在下一个 tick 中执行外部处理函数
-      processedEvents[eventName] = (...args: any[]) => {
-        nextTick(() => {
-          handler(...args, allValues, toolbarState)
-        })
-      }
-    } else {
-      // 其他事件保持原有逻辑
-      processedEvents[eventName] = (...args: any[]) => {
-        handler(...args, allValues, toolbarState)
-      }
-    }
-  })
-
-  const value = allValues[key]
-
-  // 如果是Select组件且有options，添加选项子节点
-  if (component === Select && options.length > 0) {
-    const Comp = markRaw(component)
-    return (
-      <Comp value={value ?? ''} {...props} {...processedEvents}>
-        {options.map((option: any) => (
-          <Select.Option key={option.value} value={option.value}>
-            {option.label}
-          </Select.Option>
-        ))}
-      </Comp>
-    )
-  }
-
-  // 普通组件渲染
-  const Comp = markRaw(component)
-  return <Comp value={value ?? ''} {...props} {...processedEvents} />
-}
-
-export function validateInputGroupConfig(cfg: InputGroupToolbarItem): {
-  valid: boolean
-  errors?: string[]
-} {
-  const errors: string[] = []
-  if (!cfg) errors.push('inputGroup config is required')
-  if (cfg.type !== 'inputGroup') errors.push("type must be 'inputGroup'")
-  if (!Array.isArray(cfg.children) || cfg.children.length === 0)
-    errors.push('children must be a non-empty array')
-  // 校验子项 key 唯一性
-  const keys = (cfg.children || []).map((c) => c.key).filter(Boolean) as string[]
-  const dup = keys.filter((k, i) => keys.indexOf(k) !== i)
-  if (dup.length) errors.push(`duplicate child keys: ${Array.from(new Set(dup)).join(',')}`)
-  return { valid: errors.length === 0, errors: errors.length ? errors : undefined }
-}
-
-// InputNumber 的焦点态只用于“显示逻辑（失焦补零）”，不属于业务值：
-// - 不写入 ToolbarState，避免污染 getAllValues() 及其下游（按钮事件、联动禁用、外部 expose、deep watch 等）
-// - 采用 WeakMap：当 ToolbarState 实例被销毁且无引用时，对应缓存可被 GC 自动回收
-const inputNumberFocusState = new WeakMap<ToolbarState, Map<string, boolean>>()
-export function getInputNumberFocusState(toolbarState: ToolbarState) {
-  const existing = inputNumberFocusState.get(toolbarState)
-  if (existing) return existing
-  const next = new Map<string, boolean>()
-  inputNumberFocusState.set(toolbarState, next)
-  return next
-}
+import { Button, Dropdown, Menu, MenuItem, Select } from '@antsoo-lib/components'
+import { DownOutlined, UpOutlined } from '@antsoo-lib/icons'
+import { isEmpty, isFunction } from '@antsoo-lib/utils'
+
+import { markRaw, nextTick, ref } from 'vue'
+import type { VNode } from 'vue'
+
+import { rendererMap } from '.'
+import type { ToolbarState } from './state'
+import type { InputGroupToolbarItem, SlotConfig, ToolbarConfig, ToolbarItem } from './types'
+
+// 工具栏渲染函数
+export function renderToolbar(
+  config: ToolbarConfig,
+  toolbarState: ToolbarState,
+  count: number | (() => number),
+  permissions: string[] = [],
+): VNode[] {
+  if (!config || !config.items || !Array.isArray(config.items)) {
+    return []
+  }
+  const allShowBtn = config.items.filter((item) => {
+    // 预设xtype项由上层组件转换，这里直接过滤掉
+    if ((item as any).xtype) {
+      return false
+    }
+    // Decoupled: Check permission against the passed array
+    if (item.permission && !permissions.includes(item.permission)) {
+      return false
+    }
+    // 检查 beforeCreate 属性
+    if (item.beforeCreate === undefined) {
+      return true // 默认显示
+    }
+
+    if (typeof item.beforeCreate === 'boolean') {
+      return item.beforeCreate
+    }
+
+    if (typeof item.beforeCreate === 'function') {
+      try {
+        return item.beforeCreate(toolbarState)
+      } catch (error) {
+        console.warn(`beforeCreate function error for item ${item.key}:`, error)
+        return false
+      }
+    }
+
+    return true
+  })
+  const extendCount = isFunction(count) ? count() : count
+
+  // 优化按钮展示逻辑
+  let extendShow: any[]
+  let foldShow: any[]
+
+  if (extendCount <= 0 || allShowBtn.length === 0) {
+    // 边界条件：extendCount 无效或没有按钮
+    extendShow = []
+    foldShow = []
+  } else if (allShowBtn.length <= extendCount) {
+    // 按钮数量不超过限制，全部展示
+    extendShow = allShowBtn
+    foldShow = []
+  } else {
+    // 按钮数量超过限制，需要收起部分按钮
+    if (extendCount === 1) {
+      // 特殊情况：只能展示1个按钮，直接显示"更多"按钮
+      extendShow = []
+      foldShow = allShowBtn
+    } else {
+      // 实际展示的普通按钮数量为 extendCount - 1，为"更多"按钮预留位置
+      extendShow = allShowBtn.slice(0, extendCount - 1)
+      foldShow = allShowBtn.slice(extendCount - 1)
+    }
+  }
+
+  // 渲染显示的按钮
+  const renderedExtendShow = extendShow.map((item: ToolbarItem) => {
+    // 对于 PresetToolbarItem，它没有 type 属性来匹配 rendererMap，但应该已被 filter 掉。
+    if ('xtype' in item) return null
+
+    const renderer = rendererMap[item.type]
+    if (!renderer) {
+      console.warn(`Unknown toolbar item type: ${item.type}`)
+      return <div key={item.key}>Unknown type: {item.type}</div>
+    }
+    return renderer(item, toolbarState, toolbarState.getAllValues())
+  })
+
+  // 如果有折叠的按钮，添加下拉菜单
+  if (!isEmpty(foldShow)) {
+    const menuItems = foldShow.map((item: ToolbarItem) => {
+      // 同样的类型守卫
+      if ('xtype' in item) return null
+
+      return (
+        <MenuItem
+          key={item.key || `fold-${Math.random()}`}
+          onClick={() => {
+            // 处理按钮点击事件
+            if (item.events?.onClick) {
+              const loadingControl = {
+                setLoading: (_loading: boolean) => {
+                  // 这里可以根据需要实现加载状态控制
+                },
+                getLoading: () => false,
+              }
+              item.events.onClick(loadingControl, toolbarState.getAllValues(), toolbarState)
+            }
+          }}
+        >
+          {item.label || item.key || '未命名'}
+        </MenuItem>
+      )
+    })
+
+    const dropdownMenu = <Menu>{menuItems}</Menu>
+    const dropdownVisible = ref(false)
+    const MoreButton = markRaw(Dropdown)
+    const moreButton = (
+      <MoreButton
+        overlay={dropdownMenu}
+        trigger={['hover']}
+        onOpenChange={(visible: boolean) => {
+          dropdownVisible.value = visible
+        }}
+      >
+        <Button type="default">
+          更多
+          {dropdownVisible.value ? <UpOutlined /> : <DownOutlined />}
+        </Button>
+      </MoreButton>
+    )
+    renderedExtendShow.push(moreButton)
+  }
+  return renderedExtendShow.filter(Boolean) as VNode[]
+}
+
+// 渲染插槽内容的辅助函数
+export function renderSlotContent(
+  slotConfig: SlotConfig,
+  toolbarState: ToolbarState,
+): VNode | undefined {
+  if (!slotConfig?.content) return undefined
+
+  // 如果是函数，直接调用
+  if (typeof slotConfig.content === 'function') {
+    return slotConfig.content(toolbarState)
+  }
+
+  // 如果是组件配置对象
+  const { component, key, props = {}, events = {}, options = [] } = slotConfig.content
+  const allValues = toolbarState.getAllValues()
+
+  // 处理事件，注入工具栏状态
+  const processedEvents: Record<string, VoidFunction> = {}
+  Object.entries(events).forEach(([eventName, handler]) => {
+    if (eventName === 'onChange') {
+      // 对于 onChange 事件，使用 nextTick 确保在下一个 tick 中执行外部处理函数
+      processedEvents[eventName] = (...args: any[]) => {
+        nextTick(() => {
+          handler(...args, allValues, toolbarState)
+        })
+      }
+    } else {
+      // 其他事件保持原有逻辑
+      processedEvents[eventName] = (...args: any[]) => {
+        handler(...args, allValues, toolbarState)
+      }
+    }
+  })
+
+  const value = allValues[key]
+
+  // 如果是Select组件且有options，添加选项子节点
+  if (component === Select && options.length > 0) {
+    const Comp = markRaw(component)
+    return (
+      <Comp value={value ?? ''} {...props} {...processedEvents}>
+        {options.map((option: any) => (
+          <Select.Option key={option.value} value={option.value}>
+            {option.label}
+          </Select.Option>
+        ))}
+      </Comp>
+    )
+  }
+
+  // 普通组件渲染
+  const Comp = markRaw(component)
+  return <Comp value={value ?? ''} {...props} {...processedEvents} />
+}
+
+export function validateInputGroupConfig(cfg: InputGroupToolbarItem): {
+  valid: boolean
+  errors?: string[]
+} {
+  const errors: string[] = []
+  if (!cfg) errors.push('inputGroup config is required')
+  if (cfg.type !== 'inputGroup') errors.push("type must be 'inputGroup'")
+  if (!Array.isArray(cfg.children) || cfg.children.length === 0)
+    errors.push('children must be a non-empty array')
+  // 校验子项 key 唯一性
+  const keys = (cfg.children || []).map((c) => c.key).filter(Boolean) as string[]
+  const dup = keys.filter((k, i) => keys.indexOf(k) !== i)
+  if (dup.length) errors.push(`duplicate child keys: ${Array.from(new Set(dup)).join(',')}`)
+  return { valid: errors.length === 0, errors: errors.length ? errors : undefined }
+}
+
+// InputNumber 的焦点态只用于“显示逻辑（失焦补零）”，不属于业务值：
+// - 不写入 ToolbarState，避免污染 getAllValues() 及其下游（按钮事件、联动禁用、外部 expose、deep watch 等）
+// - 采用 WeakMap：当 ToolbarState 实例被销毁且无引用时，对应缓存可被 GC 自动回收
+const inputNumberFocusState = new WeakMap<ToolbarState, Map<string, boolean>>()
+export function getInputNumberFocusState(toolbarState: ToolbarState) {
+  const existing = inputNumberFocusState.get(toolbarState)
+  if (existing) return existing
+  const next = new Map<string, boolean>()
+  inputNumberFocusState.set(toolbarState, next)
+  return next
+}

package/src/render/index.ts

@@ -1,108 +1,108 @@
-import type { AnyObject } from '@antsoo-lib/shared'
-
-import type { VNode } from 'vue'
-
-import { renderAreaCascader } from './AreaCascader'
-import { renderAutoComplete } from './AutoComplete'
-import { renderButton } from './Button'
-import { renderCascader } from './Cascader'
-import { renderCheckbox } from './Checkbox'
-import { renderCheckboxGroup } from './CheckboxGroup'
-import { renderCustom } from './Custom'
-import { renderDatePicker } from './DatePicker'
-import { renderInput } from './Input'
-import { renderInputGroup } from './InputGroup'
-import { renderInputNumber } from './InputNumber'
-import { renderInputPassword } from './InputPassword'
-import { renderInputRange } from './InputRange'
-import { renderRadioGroup } from './RadioGroup'
-import { renderSelect } from './Select'
-import { renderSselectPage } from './SselectPage'
-import { renderSwitch } from './Switch'
-import { renderTree } from './Tree'
-import { renderTreeSelect } from './TreeSelect'
-import { renderUpload } from './Upload'
-import type { ToolbarState } from './state'
-import type { ToolbarItem } from './types'
-
-// 渲染器映射类型定义
-export type Renderer = (
-  item: ToolbarItem,
-  toolbarState: ToolbarState,
-  formValues?: AnyObject,
-) => VNode
-
-// 渲染器映射
-const defaultRendererMap: Record<string, Renderer> = {
-  button: renderButton,
-  input: renderInput,
-  inputRange: renderInputRange as Renderer,
-  inputGroup: renderInputGroup as Renderer,
-  radioGroup: renderRadioGroup,
-  checkbox: renderCheckbox,
-  switch: renderSwitch,
-  checkboxGroup: renderCheckboxGroup,
-  datePicker: renderDatePicker,
-  select: renderSelect,
-  inputNumber: renderInputNumber,
-  inputPassword: renderInputPassword,
-  upload: renderUpload,
-  tree: renderTree as Renderer,
-  treeSelect: renderTreeSelect,
-  sselectPage: renderSselectPage,
-  autoComplete: renderAutoComplete as Renderer,
-  cascader: renderCascader as Renderer,
-  areaCascader: renderAreaCascader as Renderer,
-  custom: renderCustom as Renderer,
-}
-
-// 导出的渲染器映射，支持动态修改
-export const rendererMap: Record<string, Renderer> = { ...defaultRendererMap }
-
-/**
- * 注册自定义渲染器
- * @param name 渲染器名称
- * @param renderer 渲染函数
- */
-export function registerRenderer(name: string, renderer: Renderer) {
-  rendererMap[name] = renderer
-}
-
-/**
- * 批量注册自定义渲染器
- * @param renderers 渲染器映射对象
- */
-export function registerRenderers(renderers: Record<string, Renderer>) {
-  Object.assign(rendererMap, renderers)
-}
-
-/**
- * 获取渲染器
- * @param name 渲染器名称
- * @returns 渲染函数
- */
-export function getRenderer(name: string): Renderer | undefined {
-  return rendererMap[name]
-}
-
-export {
-  renderAreaCascader,
-  renderAutoComplete,
-  renderButton,
-  renderCascader,
-  renderCheckbox,
-  renderCheckboxGroup,
-  renderDatePicker,
-  renderInput,
-  renderInputGroup,
-  renderInputNumber,
-  renderInputPassword,
-  renderInputRange,
-  renderRadioGroup,
-  renderSelect,
-  renderSselectPage,
-  renderSwitch,
-  renderTree,
-  renderTreeSelect,
-  renderUpload,
-}
+import type { AnyObject } from '@antsoo-lib/shared'
+
+import type { VNode } from 'vue'
+
+import { renderAreaCascader } from './AreaCascader'
+import { renderAutoComplete } from './AutoComplete'
+import { renderButton } from './Button'
+import { renderCascader } from './Cascader'
+import { renderCheckbox } from './Checkbox'
+import { renderCheckboxGroup } from './CheckboxGroup'
+import { renderCustom } from './Custom'
+import { renderDatePicker } from './DatePicker'
+import { renderInput } from './Input'
+import { renderInputGroup } from './InputGroup'
+import { renderInputNumber } from './InputNumber'
+import { renderInputPassword } from './InputPassword'
+import { renderInputRange } from './InputRange'
+import { renderRadioGroup } from './RadioGroup'
+import { renderSelect } from './Select'
+import { renderSselectPage } from './SselectPage'
+import { renderSwitch } from './Switch'
+import { renderTree } from './Tree'
+import { renderTreeSelect } from './TreeSelect'
+import { renderUpload } from './Upload'
+import type { ToolbarState } from './state'
+import type { ToolbarItem } from './types'
+
+// 渲染器映射类型定义
+export type Renderer = (
+  item: ToolbarItem,
+  toolbarState: ToolbarState,
+  formValues?: AnyObject,
+) => VNode
+
+// 渲染器映射
+const defaultRendererMap: Record<string, Renderer> = {
+  button: renderButton,
+  input: renderInput,
+  inputRange: renderInputRange as Renderer,
+  inputGroup: renderInputGroup as Renderer,
+  radioGroup: renderRadioGroup,
+  checkbox: renderCheckbox,
+  switch: renderSwitch,
+  checkboxGroup: renderCheckboxGroup,
+  datePicker: renderDatePicker,
+  select: renderSelect,
+  inputNumber: renderInputNumber,
+  inputPassword: renderInputPassword,
+  upload: renderUpload,
+  tree: renderTree as Renderer,
+  treeSelect: renderTreeSelect,
+  sselectPage: renderSselectPage,
+  autoComplete: renderAutoComplete as Renderer,
+  cascader: renderCascader as Renderer,
+  areaCascader: renderAreaCascader as Renderer,
+  custom: renderCustom as Renderer,
+}
+
+// 导出的渲染器映射，支持动态修改
+export const rendererMap: Record<string, Renderer> = { ...defaultRendererMap }
+
+/**
+ * 注册自定义渲染器
+ * @param name 渲染器名称
+ * @param renderer 渲染函数
+ */
+export function registerRenderer(name: string, renderer: Renderer) {
+  rendererMap[name] = renderer
+}
+
+/**
+ * 批量注册自定义渲染器
+ * @param renderers 渲染器映射对象
+ */
+export function registerRenderers(renderers: Record<string, Renderer>) {
+  Object.assign(rendererMap, renderers)
+}
+
+/**
+ * 获取渲染器
+ * @param name 渲染器名称
+ * @returns 渲染函数
+ */
+export function getRenderer(name: string): Renderer | undefined {
+  return rendererMap[name]
+}
+
+export {
+  renderAreaCascader,
+  renderAutoComplete,
+  renderButton,
+  renderCascader,
+  renderCheckbox,
+  renderCheckboxGroup,
+  renderDatePicker,
+  renderInput,
+  renderInputGroup,
+  renderInputNumber,
+  renderInputPassword,
+  renderInputRange,
+  renderRadioGroup,
+  renderSelect,
+  renderSselectPage,
+  renderSwitch,
+  renderTree,
+  renderTreeSelect,
+  renderUpload,
+}