@antsoo-lib/core 0.0.0 → 1.0.0

package/src/BaseTable/registry.ts

@@ -0,0 +1,20 @@
+import type { Component } from 'vue'
+
+// 外部组件注册表
+const componentRegistry: Record<string, Component> = {}
+
+// 注册外部组件
+export function registerBaseTableComponents(components: {
+  SselectPage?: Component
+  AutoComplete?: Component
+  Cascader?: Component
+  AreaCascader?: Component
+  Upload?: Component
+}) {
+  Object.assign(componentRegistry, components)
+}
+
+// 获取注册的组件，如果未注册则返回 undefined
+export function getRegisteredComponent(name: string): Component | undefined {
+  return componentRegistry[name]
+}

package/src/BaseTable/renderers/AreaCascader.tsx

@@ -0,0 +1,64 @@
+import type { AnyObject } from '@antsoo-lib/shared'
+import { isFunction } from '@antsoo-lib/utils'
+
+import { markRaw } from 'vue'
+import type { VNode } from 'vue'
+
+import { getRegisteredComponent } from '../registry'
+import type { ToolbarState } from '../state'
+import type { AreaCascaderProps, AreaCascaderToolbarItem } from '../types'
+
+// 渲染地区级联选择器
+export function renderAreaCascader(
+  config: AreaCascaderToolbarItem,
+  toolbarState: ToolbarState,
+  allValues?: AnyObject,
+): VNode {
+  const { key = '', props = {}, events = {}, disabled = false } = config
+
+  // 处理动态禁用逻辑
+  const isDisabled = isFunction(disabled)
+    ? disabled(toolbarState.getAllValues(), toolbarState)
+    : disabled
+  const finalProps: AreaCascaderProps = { ...props, disabled: isDisabled }
+
+  // 计算安全的当前值（优先取 toolbarState，再兜底 props.value），不做任何业务级聚合
+  const safeValue =
+    toolbarState.getValue(key) !== undefined ? toolbarState.getValue(key) : props.value
+
+  // 处理事件，统一注入上下文，保持中立
+  const processedEvents: AnyObject = {}
+  Object.keys(events).forEach((eventName) => {
+    const handler = events[eventName as keyof typeof events]
+    if (!handler || !isFunction(handler)) return
+    const normalizedName = eventName.startsWith('on')
+      ? eventName
+      : `on${eventName.charAt(0).toUpperCase()}${eventName.slice(1)}`
+    processedEvents[normalizedName] = (...args: any[]) => {
+      handler(...args, allValues ?? toolbarState.getAllValues(), toolbarState)
+    }
+  })
+
+  // 默认的 v-model 更新（仅当存在 key 时写入状态）
+  if (!processedEvents['onUpdate:value']) {
+    processedEvents['onUpdate:value'] = (val: any) => {
+      if (key) toolbarState.setValue(key, val)
+    }
+  }
+
+  const AreaCascaderComp = getRegisteredComponent('AreaCascader')
+  if (!AreaCascaderComp) {
+    return <span style={{ color: 'red' }}>AreaCascader component missing</span>
+  }
+
+  const Comp = markRaw(AreaCascaderComp) as any
+  return (
+    <Comp
+      key={key}
+      value={safeValue}
+      {...finalProps}
+      {...(config.attr ? { attr: config.attr } : {})}
+      {...processedEvents}
+    />
+  )
+}

package/src/BaseTable/renderers/AutoComplete.tsx

@@ -0,0 +1,101 @@
+import type { VoidFunction } from '@antsoo-lib/shared'
+import { isFunction } from '@antsoo-lib/utils'
+
+import { computed, markRaw, nextTick } from 'vue'
+import type { ComponentPublicInstance, VNode } from 'vue'
+
+import { getRegisteredComponent } from '../registry'
+import type { ToolbarState } from '../state'
+import type { AutoCompleteToolbarItem, ToolbarItem } from '../types'
+
+export function renderAutoComplete(item: ToolbarItem, toolbarState: ToolbarState): VNode {
+  const { key, events = {} } = item
+  const { props = {}, disabled = false } = item as AutoCompleteToolbarItem
+
+  const isDisabled = isFunction(disabled)
+    ? disabled(toolbarState.getAllValues(), toolbarState)
+    : disabled
+
+  // 处理事件，注入工具栏状态
+  const processedEvents: Record<string, VoidFunction> = {}
+  Object.keys(events).forEach((eventName) => {
+    processedEvents[eventName] = (...args: any[]) => {
+      // 对于 SselectPage，先更新状态，再调用外部事件处理函数
+      if (eventName === 'onUpdate:value' || eventName === 'onChange') {
+        const value = args[0] // SselectPage 的第一个参数是选中的值
+        // 立即更新工具栏状态，确保外部事件处理函数能获取到最新值
+        toolbarState.setValue(key, value)
+
+        // 对于 onChange 事件，使用 nextTick 确保在下一个 tick 中执行外部处理函数
+        if (eventName === 'onChange') {
+          nextTick(() => {
+            events[eventName]?.(...args, toolbarState.getAllValues(), toolbarState)
+          })
+          return // 提前返回，避免重复执行
+        }
+      }
+
+      // 调用原始事件处理函数，传入完整的上下文
+      events[eventName]?.(...args, toolbarState.getAllValues(), toolbarState)
+    }
+  })
+
+  // 如果没有设置 onChange 事件，添加默认的状态更新
+  if (!processedEvents['onUpdate:value'] && !processedEvents.onChange) {
+    processedEvents['onUpdate:value'] = (value: any) => {
+      toolbarState.setValue(key, value)
+    }
+  }
+
+  // 处理 extraParams 的响应式更新
+  // 如果 props.extraParams 是函数，则动态计算
+  const computedProps = computed(() => {
+    const allValues = toolbarState.getAllValues()
+    const dynamicProps: any = { ...props, disabled: isDisabled }
+
+    // 动态计算 extraParams
+    if (isFunction(dynamicProps.extraParams)) {
+      dynamicProps.extraParams = dynamicProps.extraParams(allValues, toolbarState)
+    }
+
+    return dynamicProps
+  })
+
+  // 如果需要自动聚焦，添加 ref 处理
+  if (props.autoFocus) {
+    processedEvents.ref = (el: Element | ComponentPublicInstance | null) => {
+      const component = el as ComponentPublicInstance
+      if (component) {
+        // 使用 nextTick 确保 DOM 已经渲染完成
+        nextTick(() => {
+          try {
+            ;(component as any).$refs.selectRef?.focus?.()
+          } catch {
+            // 忽略焦点设置失败的错误
+          }
+        })
+      }
+    }
+  }
+
+  // 计算安全的默认值
+  const rawVal = toolbarState.getValue(key)
+  const propVal = props.value
+  const safeValue =
+    rawVal !== undefined && rawVal !== null
+      ? rawVal
+      : propVal !== undefined && propVal !== null
+        ? propVal
+        : undefined
+
+  const AutoCompleteComponent = getRegisteredComponent('AutoComplete')
+  if (!AutoCompleteComponent) {
+    console.warn('BaseTable: AutoComplete component is not registered.')
+    return <span style={{ color: 'red' }}>AutoComplete component missing</span>
+  }
+
+  const Comp = markRaw(AutoCompleteComponent) as any
+  return (
+    <Comp key={key} value={safeValue} allowClear {...computedProps.value} {...processedEvents} />
+  )
+}

package/src/BaseTable/renderers/Button.tsx

@@ -0,0 +1,62 @@
+import { Button } from '@antsoo-lib/components'
+import type { VoidFunction } from '@antsoo-lib/shared'
+
+import { reactive } from 'vue'
+import type { VNode } from 'vue'
+
+import type { ToolbarState } from '../state'
+import type { ButtonToolbarItem, ToolbarItem } from '../types'
+
+// 按钮渲染函数
+export function renderButton(item: ToolbarItem, toolbarState: ToolbarState): VNode {
+  const buttonItem = item as ButtonToolbarItem
+  const { key, props = {}, events = {}, disabled = false } = buttonItem
+  const reactiveProps = reactive({ ...props })
+
+  const isDisabled =
+    typeof disabled === 'function'
+      ? disabled(toolbarState.getAllValues(), toolbarState)
+      : !!disabled
+
+  // 为每个按钮创建独立的 loading 状态键
+  const loadingKey = `${key}_loading`
+
+  // 初始化按钮的 loading 状态（如果还未设置）
+  if (toolbarState.getValue(loadingKey) === undefined) {
+    toolbarState.setValue(loadingKey, false)
+  }
+
+  // 创建 loading 控制对象，传入事件方法中
+  const loadingControl = {
+    setLoading: (loading: boolean) => {
+      toolbarState.setValue(loadingKey, loading)
+    },
+    getLoading: () => {
+      return toolbarState.getValue(loadingKey) || false
+    },
+  }
+
+  // 处理事件，注入工具栏状态和 loading 控制
+  const processedEvents: Record<string, VoidFunction> = {}
+  Object.keys(events).forEach((eventName) => {
+    const eventHandler = events[eventName]
+    if (eventHandler) {
+      processedEvents[eventName] = (...args: any[]) => {
+        // 调用原始事件处理函数，并传入 loading 控制对象
+        eventHandler(loadingControl, toolbarState.getAllValues(), toolbarState, ...args)
+      }
+    }
+  })
+
+  const finalProps = {
+    ...reactiveProps,
+    disabled: isDisabled || reactiveProps.disabled || false,
+    loading: toolbarState.getValue(loadingKey) || reactiveProps.loading || false,
+  }
+
+  return (
+    <Button key={key} {...finalProps} {...processedEvents}>
+      {item.label || '按钮'}
+    </Button>
+  )
+}

package/src/BaseTable/renderers/Cascader.tsx

@@ -0,0 +1,45 @@
+import type { AnyObject } from '@antsoo-lib/shared'
+import { isFunction } from '@antsoo-lib/utils'
+
+import { markRaw } from 'vue'
+import type { VNode } from 'vue'
+
+import { getRegisteredComponent } from '../registry'
+import type { ToolbarState } from '../state'
+import type { CascaderToolbarItem } from '../types'
+
+// 渲染级联选择器
+export function renderCascader(
+  config: CascaderToolbarItem,
+  toolbarState: ToolbarState,
+  allValues: AnyObject,
+): VNode {
+  const { key = '', props = {}, events = {} } = config
+  const value = toolbarState.getValue(key)
+
+  // 处理事件
+  const cascaderEvents: AnyObject = {}
+  Object.keys(events).forEach((eventName) => {
+    const handler = events[eventName as keyof typeof events]
+    if (handler && isFunction(handler)) {
+      cascaderEvents[eventName] = (...args: any[]) => {
+        handler(...args, allValues, toolbarState)
+      }
+    }
+  })
+
+  // 特殊处理 update:value 事件
+  cascaderEvents['update:value'] = (val: any) => {
+    toolbarState.setValue(key, val)
+    events['onUpdate:value']?.(val, allValues, toolbarState)
+  }
+
+  // 渲染组件
+  const CascaderComp = getRegisteredComponent('Cascader')
+  if (!CascaderComp) {
+    return <span style={{ color: 'red' }}>Cascader component missing</span>
+  }
+
+  const Comp = markRaw(CascaderComp) as any
+  return <Comp value={value} {...props} {...cascaderEvents} />
+}

package/src/BaseTable/renderers/Checkbox.tsx

@@ -0,0 +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>
+  )
+}

package/src/BaseTable/renderers/CheckboxGroup.tsx

@@ -0,0 +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}
+    />
+  )
+}

package/src/BaseTable/renderers/DatePicker.tsx

@@ -0,0 +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}
+    />
+  )
+}

package/src/BaseTable/renderers/Input.tsx

@@ -0,0 +1,140 @@
+import { Input, Textarea } from '@antsoo-lib/components'
+import type { InputProps } from '@antsoo-lib/components'
+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 { renderSlotContent } from '../helpers'
+import type { ToolbarState } from '../state'
+import type { InputToolbarItem, ToolbarItem } from '../types'
+
+// 输入框渲染函数
+export function renderInput(item: ToolbarItem, toolbarState: ToolbarState): VNode {
+  const inputItem = item as InputToolbarItem
+  const { key, events = {}, slots } = inputItem
+  const { props = {}, disabled = false } = inputItem
+
+  const isDisabled = isFunction(disabled)
+    ? disabled(toolbarState.getAllValues(), toolbarState)
+    : disabled
+
+  // Create a new props object to avoid mutating the original
+  const finalProps: Partial<InputProps> & {
+    disabled?: boolean
+    autoFocus?: boolean
+    value?: string
+  } = {
+    ...props,
+    disabled: isDisabled,
+  }
+
+  // 处理事件，注入工具栏状态
+  const processedEvents: Record<string, VoidFunction> = {}
+  Object.keys(events).forEach((eventName) => {
+    processedEvents[eventName] = (...args: any[]) => {
+      // 对于输入框：
+      // - v-model 使用 onUpdate:value 直接写入值
+      // - onChange 只在存在 event.target.value 时写入，避免将原始事件对象误写入状态
+      if (eventName === 'onUpdate:value') {
+        toolbarState.setValue(key, args[0])
+      } else if (eventName === 'onChange') {
+        const firstArg = args[0]
+        const hasTarget = firstArg && typeof firstArg === 'object' && 'target' in firstArg
+        const nextVal = hasTarget ? firstArg.target?.value : undefined
+        if (nextVal !== undefined) toolbarState.setValue(key, nextVal)
+      }
+
+      // 调用原始事件处理函数
+      events[eventName]?.(...args, toolbarState.getAllValues(), toolbarState)
+    }
+  })
+
+  // 如果没有设置onChange事件，添加默认的状态更新
+  if (!processedEvents['onUpdate:value'] && !processedEvents.onChange) {
+    processedEvents['onUpdate:value'] = (value: string) => {
+      toolbarState.setValue(key, value)
+    }
+  }
+
+  // 自动全选逻辑：合并 onFocus 事件
+  const userOnFocus = processedEvents.onFocus || events.onFocus
+  processedEvents.onFocus = (...args: any[]) => {
+    const e = args[0]
+    try {
+      if (e && e.target && typeof (e.target as HTMLInputElement).select === 'function') {
+        const target = e.target as HTMLInputElement
+        target.select()
+
+        // 阻止鼠标松开时的默认光标定位行为（仅一次），防止全选被取消
+        const preventMouseUp = (ev: Event) => {
+          ev.preventDefault()
+          target.removeEventListener('mouseup', preventMouseUp)
+        }
+
+        // 监听 mouseup，确保在点击聚焦时能阻止光标重置
+        target.addEventListener('mouseup', preventMouseUp, { once: true })
+
+        // 清理机制：如果用户是键盘聚焦或其他方式，未触发 mouseup 就失焦了，需要移除监听器
+        const cleanup = () => {
+          target.removeEventListener('mouseup', preventMouseUp)
+          target.removeEventListener('blur', cleanup)
+        }
+        target.addEventListener('blur', cleanup)
+      }
+    } catch {
+      // ignore
+    }
+    // 执行用户原有逻辑
+    userOnFocus?.(...args, toolbarState.getAllValues(), toolbarState)
+  }
+
+  // 如果需要自动聚焦，添加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 slotsObject: Record<string, () => VNode | undefined> = {}
+  if (slots) {
+    if (slots.addonBefore) {
+      slotsObject.addonBefore = () => renderSlotContent(slots.addonBefore!, toolbarState)
+    }
+    if (slots.addonAfter) {
+      slotsObject.addonAfter = () => renderSlotContent(slots.addonAfter!, toolbarState)
+    }
+    if (slots.prefix) {
+      slotsObject.prefix = () => renderSlotContent(slots.prefix!, toolbarState)
+    }
+    if (slots.suffix) {
+      slotsObject.suffix = () => renderSlotContent(slots.suffix!, toolbarState)
+    }
+  }
+
+  const Comp = markRaw(inputItem.textarea ? Textarea : Input)
+  return (
+    <Comp
+      key={key}
+      value={toolbarState.getValue(key) || finalProps.value || ''}
+      allowClear
+      autocomplete="off"
+      maxlength={50}
+      {...finalProps}
+      {...processedEvents}
+      v-slots={slotsObject}
+    />
+  )
+}