@antsoo-lib/core 0.0.0 → 1.0.0

package/src/BaseTable/renderers/Switch.tsx

@@ -0,0 +1,60 @@
+import { Switch } from '@antsoo-lib/components'
+import type { SwitchProps } 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 { SwitchToolbarItem, ToolbarItem } from '../types'
+
+// 开关渲染函数
+export function renderSwitch(item: ToolbarItem, toolbarState: ToolbarState): VNode {
+  const { key, events = {} } = item
+  const switchItem = item as SwitchToolbarItem
+  const { props = {}, disabled = false } = switchItem
+  // SwitchProps doesn't have 'value', it uses 'checked'.
+  // Remove 'value' to avoid warning if passed by mistake
+  const { value: _ignored, ...otherProps } = props as any
+
+  const isDisabled = isFunction(disabled)
+    ? disabled(toolbarState.getAllValues(), toolbarState)
+    : disabled
+  const finalProps: Partial<SwitchProps> & { disabled?: boolean; checked?: boolean } = {
+    ...otherProps,
+    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)
+      }
+
+      // 调用原始事件处理函数
+      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(Switch)
+  return (
+    <Comp
+      key={key}
+      checked={toolbarState.getValue(key) ?? finalProps.checked ?? false}
+      {...finalProps}
+      {...processedEvents}
+    />
+  )
+}

package/src/BaseTable/renderers/TreeSelect.tsx

@@ -0,0 +1,81 @@
+import { TreeSelect } from '@antsoo-lib/components'
+import type { VoidFunction } from '@antsoo-lib/shared'
+import { isFunction } from '@antsoo-lib/utils'
+
+import { computed, markRaw } from 'vue'
+import type { VNode } from 'vue'
+
+import type { ToolbarState } from '../state'
+import type { ToolbarItem, TreeSelectToolbarItem } from '../types'
+
+// 树选择器渲染函数
+export function renderTreeSelect(item: ToolbarItem, toolbarState: ToolbarState): VNode {
+  const treeItem = item as TreeSelectToolbarItem
+  const { key, events = {} } = treeItem
+  const processedEvents: Record<string, VoidFunction> = {}
+  const { props = {}, disabled = false } = treeItem
+
+  const isDisabled = isFunction(disabled)
+    ? disabled(toolbarState.getAllValues(), toolbarState)
+    : disabled
+
+  // 从props中提取treeData，避免在展开props时覆盖处理后的treeData
+  const { options: originalTreeData, ...otherProps } = props
+
+  // 响应式计算 treeData，增加对ref对象的处理
+  const computedTreeData = computed(() => {
+    if (isFunction(originalTreeData)) {
+      return originalTreeData(toolbarState.getAllValues())
+    }
+    // 处理ref对象
+    if (originalTreeData && typeof originalTreeData === 'object' && 'value' in originalTreeData) {
+      return originalTreeData.value || []
+    }
+    return originalTreeData || []
+  })
+
+  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: any) => {
+      toolbarState.setValue(key, value)
+    }
+  }
+  // 计算安全的当前值
+  const rawVal = toolbarState.getValue(key)
+  const propVal = props.value
+  const isMulti = otherProps.multiple || otherProps.treeCheckable
+
+  const safeValue =
+    rawVal !== undefined && rawVal !== null
+      ? rawVal
+      : propVal !== undefined && propVal !== null
+        ? propVal
+        : isMulti
+          ? []
+          : undefined
+
+  const finalProps = { ...otherProps, disabled: isDisabled }
+
+  const Comp = markRaw(TreeSelect)
+  return (
+    <Comp
+      key={key}
+      value={safeValue}
+      {...finalProps}
+      treeData={computedTreeData.value as any[]}
+      {...processedEvents}
+    />
+  )
+}

package/src/BaseTable/renderers/Upload.tsx

@@ -0,0 +1,92 @@
+import type { UploadFile } from '@antsoo-lib/components'
+import { isFunction } from '@antsoo-lib/utils'
+
+import { markRaw } from 'vue'
+import type { VNode } from 'vue'
+
+import type { AnyObject } from '@/packages/shared'
+
+import { getRegisteredComponent } from '../registry'
+import type { ToolbarState } from '../state'
+import type { ToolbarItem, UploadToolbarItem } from '../types'
+
+// 上传渲染函数
+export function renderUpload(item: ToolbarItem, toolbarState: ToolbarState): VNode {
+  const uploadItem = item as UploadToolbarItem
+  const { key, events = {}, passage } = uploadItem
+  const { props = {}, disabled = false } = uploadItem
+
+  const isDisabled = isFunction(disabled)
+    ? disabled(toolbarState.getAllValues(), toolbarState)
+    : disabled
+  const allValues = toolbarState.getAllValues()
+
+  const resolveExtraParams = () => {
+    if (!props.extraParams) return {}
+    return isFunction(props.extraParams)
+      ? props.extraParams(allValues, toolbarState)
+      : props.extraParams
+  }
+
+  const apiConfig = props.api
+    ? {
+        url: props.api.url,
+        method: props.api.method || 'POST',
+        headers: props.api.headers || {},
+      }
+    : {
+        url: undefined as string | undefined, // 使用组件默认全局上传地址
+        method: 'POST',
+        headers: {},
+      }
+
+  // 当前表单值（期望：[{ name, path }]）
+  const currentValue = toolbarState.getValue(key) || props.value || []
+
+  // 组件触发值更新（仅写入规范化值）
+  const onUpdateValue = (value: UploadFile[]) => {
+    toolbarState.setValue(key, value)
+    events['onUpdate:value']?.(value, allValues, toolbarState)
+  }
+
+  const onChange = (info: UploadFile[]) => {
+    events.onChange?.(info, allValues, toolbarState)
+  }
+
+  const onSuccess = (response: AnyObject, file: UploadFile) => {
+    events.onSuccess?.(response, file, allValues, toolbarState)
+  }
+
+  const onError = (error: AnyObject, file: UploadFile) => {
+    events.onError?.(error, file, allValues, toolbarState)
+  }
+
+  const UploadComponent = getRegisteredComponent('Upload')
+  if (!UploadComponent) {
+    console.warn(
+      'BaseTable: Upload component is not registered. Please use registerBaseTableComponents to register it.',
+    )
+    return <span style={{ color: 'red' }}>Upload component missing</span>
+  }
+
+  const finalProps: Record<string, any> = {
+    ...props,
+    disabled: isDisabled,
+    api: apiConfig,
+    extraParams: resolveExtraParams(),
+  }
+
+  const Comp = markRaw(UploadComponent) as any
+  return (
+    <Comp
+      key={key}
+      value={currentValue}
+      passage={passage}
+      props={finalProps}
+      onSuccess={onSuccess}
+      onError={onError}
+      onChange={onChange}
+      onUpdate:value={onUpdateValue}
+    />
+  )
+}

package/src/BaseTable/renderers/index.ts

@@ -0,0 +1,67 @@
+import type { AnyObject } from '@antsoo-lib/shared'
+
+import type { VNode } from 'vue'
+
+import type { ToolbarState } from '../state'
+import type { ToolbarItem } from '../types'
+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 { renderDatePicker } from './DatePicker'
+import { renderInput } from './Input'
+import { renderInputGroup } from './InputGroup'
+import { renderInputNumber } from './InputNumber'
+import { renderInputPassword } from './InputPassword'
+import { renderRadioGroup } from './RadioGroup'
+import { renderSelect } from './Select'
+import { renderSselectPage } from './SselectPage'
+import { renderSwitch } from './Switch'
+import { renderTreeSelect } from './TreeSelect'
+import { renderUpload } from './Upload'
+
+// 渲染器映射类型定义
+type Renderer = (item: ToolbarItem, toolbarState: ToolbarState, formValues?: AnyObject) => VNode
+
+// 渲染器映射
+export const rendererMap: Record<string, Renderer> = {
+  button: renderButton,
+  input: renderInput,
+  inputGroup: renderInputGroup as Renderer,
+  radioGroup: renderRadioGroup,
+  checkbox: renderCheckbox,
+  switch: renderSwitch,
+  checkboxGroup: renderCheckboxGroup,
+  datePicker: renderDatePicker,
+  select: renderSelect,
+  inputNumber: renderInputNumber,
+  inputPassword: renderInputPassword,
+  upload: renderUpload,
+  treeSelect: renderTreeSelect,
+  sselectPage: renderSselectPage,
+  autoComplete: renderAutoComplete as Renderer,
+  cascader: renderCascader as Renderer,
+  areaCascader: renderAreaCascader as Renderer,
+}
+
+export {
+  renderAreaCascader,
+  renderAutoComplete,
+  renderButton,
+  renderCascader,
+  renderCheckbox,
+  renderCheckboxGroup,
+  renderDatePicker,
+  renderInput,
+  renderInputGroup,
+  renderInputNumber,
+  renderInputPassword,
+  renderRadioGroup,
+  renderSelect,
+  renderSselectPage,
+  renderSwitch,
+  renderTreeSelect,
+  renderUpload,
+}

package/src/BaseTable/state.ts

@@ -0,0 +1,37 @@
+import { reactive, readonly } from 'vue'
+
+export interface ToolbarState {
+  [key: string]: any
+}
+
+type ToolbarValue<T = any> = T | undefined
+
+/**
+ * 工具栏状态管理组合式API
+ */
+export function useToolbarState() {
+  const state = reactive<ToolbarState>({})
+
+  const setValue = (key: string, value: ToolbarValue) => {
+    if (!key) return
+    state[key] = value
+  }
+
+  const getValue = <T = any>(key: string): ToolbarValue<T> => {
+    return state[key] as T
+  }
+
+  const clear = () => {
+    Object.keys(state).forEach((key) => {
+      delete state[key]
+    })
+  }
+
+  return {
+    state: readonly(state), // 只读版本，防止直接修改
+    setValue,
+    getValue,
+    clear,
+    getAllValues: () => ({ ...state }),
+  }
+}