@antsoo-lib/core 2.0.0 → 2.0.3

package/src/{BaseTable/renderers → render}/index.ts

@@ -2,33 +2,41 @@ 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 { 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'
 
 // 渲染器映射类型定义
-type Renderer = (item: ToolbarItem, toolbarState: ToolbarState, formValues?: AnyObject) => VNode
+export type Renderer = (
+  item: ToolbarItem,
+  toolbarState: ToolbarState,
+  formValues?: AnyObject,
+) => VNode
 
 // 渲染器映射
-export const rendererMap: Record<string, Renderer> = {
+const defaultRendererMap: Record<string, Renderer> = {
   button: renderButton,
   input: renderInput,
+  inputRange: renderInputRange as Renderer,
   inputGroup: renderInputGroup as Renderer,
   radioGroup: renderRadioGroup,
   checkbox: renderCheckbox,
@@ -39,11 +47,42 @@ export const rendererMap: Record<string, Renderer> = {
   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 {
@@ -58,10 +97,12 @@ export {
   renderInputGroup,
   renderInputNumber,
   renderInputPassword,
+  renderInputRange,
   renderRadioGroup,
   renderSelect,
   renderSselectPage,
   renderSwitch,
+  renderTree,
   renderTreeSelect,
   renderUpload,
 }

package/src/{BaseTable → render}/types.ts

@@ -11,6 +11,7 @@ import type {
   RowProps,
   SelectProps,
   SwitchProps,
+  TreeProps,
   TreeSelectProps,
   UploadProps,
 } from '@antsoo-lib/components'
@@ -18,6 +19,7 @@ import type { AnyObject, VoidFunction } from '@antsoo-lib/shared'
 
 import type { VNode } from 'vue'
 
+import type { CustomToolbarItem } from './Custom'
 import type { ToolbarState } from './state'
 
 // 事件处理函数类型定义
@@ -205,6 +207,46 @@ export interface TreeSelectToolbarItem extends BaseToolbarItem {
   }
 }
 
+export interface TreeToolbarItem extends BaseToolbarItem {
+  type: 'tree'
+  props?: Partial<TreeProps> & {
+    checkedKeys?: any[]
+    expandedKeys?: any[]
+  }
+  events?: BaseEvents & {
+    'onUpdate:checkedKeys'?: (value: any, allValues: AnyObject, toolbarState: ToolbarState) => void
+    'onUpdate:expandedKeys'?: (value: any, allValues: AnyObject, toolbarState: ToolbarState) => void
+    onCheck?: (value: any, info: any, allValues: AnyObject, toolbarState: ToolbarState) => void
+    onExpand?: (value: any, info: any, allValues: AnyObject, toolbarState: ToolbarState) => void
+    onChange?: (value: any, allValues: AnyObject, toolbarState: ToolbarState) => void
+  }
+}
+
+export interface InputRangeToolbarItem extends BaseToolbarItem {
+  type: 'inputRange'
+  props?: {
+    startProps?: Record<string, unknown>
+    endProps?: Record<string, unknown>
+    separator?: string
+    startPlaceholder?: string
+    endPlaceholder?: string
+    style?: AnyObject
+    className?: string
+    allowClear?: boolean
+  }
+  attr?: string[]
+  events?: BaseEvents & {
+    'onUpdate:value'?: (
+      value: [string, string],
+      allValues: AnyObject,
+      toolbarState: ToolbarState,
+    ) => void
+    onChange?: (value: [string, string], allValues: AnyObject, toolbarState: ToolbarState) => void
+    onStartChange?: (value: string, allValues: AnyObject, toolbarState: ToolbarState) => void
+    onEndChange?: (value: string, allValues: AnyObject, toolbarState: ToolbarState) => void
+  }
+}
+
 export interface InputNumberToolbarItem extends BaseToolbarItem {
   type: 'inputNumber'
   props?: Partial<InputNumberProps> & {
@@ -312,15 +354,23 @@ export interface SselectPageProps {
   allowClear?: boolean
   showSearch?: boolean
   disabled?: boolean
-  maxTagCount?: number
+  maxTagCount?: number | 'responsive'
   size?: 'large' | 'middle' | 'small'
   mode?: 'multiple' | 'tags'
+  params?: AnyObject
   api: {
     url: string
     method?: 'GET' | 'POST'
     headers?: Record<string, string>
     params?: AnyObject
     data?: AnyObject
+    request?: (config: {
+      method?: 'GET' | 'POST'
+      url: string
+      headers?: Record<string, string>
+      params?: AnyObject
+      data?: AnyObject
+    }) => Promise<any>
   }
   dataMapping?: {
     list?: string
@@ -341,6 +391,7 @@ export interface SselectPageProps {
   transformData?: (data: any) => any
   autoLoad?: boolean
   autoFocus?: boolean
+  attr?: Record<string, string>
   [key: string]: any
 }
 
@@ -351,7 +402,13 @@ export interface SselectPageToolbarItem extends BaseToolbarItem {
   }
   events?: BaseEvents & {
     'onUpdate:value'?: (value: any, allValues: AnyObject, toolbarState: ToolbarState) => void
-    onChange?: (value: any, option: any, allValues: AnyObject, toolbarState: ToolbarState) => void
+    onChange?: (
+      value: any,
+      option: any,
+      allOptions: any,
+      allValues: AnyObject,
+      toolbarState: ToolbarState,
+    ) => void
     onSearch?: (value: string, allValues: AnyObject, toolbarState: ToolbarState) => void
     onClear?: (allValues: AnyObject, toolbarState: ToolbarState) => void
   }
@@ -457,6 +514,7 @@ export type RenderableToolbarItem =
   | UploadToolbarItem
   | InputNumberToolbarItem
   | SelectToolbarItem
+  | TreeToolbarItem
   | TreeSelectToolbarItem
   | InputPasswordToolbarItem
   | SselectPageToolbarItem
@@ -464,6 +522,8 @@ export type RenderableToolbarItem =
   | InputGroupToolbarItem
   | CascaderToolbarItem
   | AreaCascaderToolbarItem
+  | InputRangeToolbarItem
+  | CustomToolbarItem
 
 export type ToolbarItem = RenderableToolbarItem | PresetToolbarItem
 

package/src/utils/attrMapping.ts

@@ -0,0 +1,106 @@
+/**
+ * 通用 attr 映射工具函数集合
+ * - 支持 attr 为字符串数组（按顺序映射）或对象映射（targetKey -> sourcePath）
+ * - 对象映射不再限制 ids/names，允许任意键值对
+ */
+import type { AnyObject } from '@antsoo-lib/shared'
+import { isArray, isObject } from '@antsoo-lib/utils'
+
+/**
+ * 安全获取嵌套属性值，支持 a.b.c 路径
+ */
+export function getByPath(obj: any, path?: string): any {
+  if (!path || typeof path !== 'string') return undefined
+  return path.split('.').reduce((cur: any, key: string) => (cur ? cur[key] : undefined), obj)
+}
+
+/**
+ * 根据 attr 规则从 formData 聚合初始值：
+ * - 数组：返回对应字段的值数组
+ * - 对象：返回 { [sourcePath]: formData[targetKey] } 结构，便于组件按源字段进行回显
+ */
+export function buildValueFromAttr(formData: AnyObject, attr: string[] | AnyObject): any {
+  // 1) 数组：按顺序返回对应值
+  if (isArray(attr)) {
+    return (attr as string[]).map((k) => formData[k])
+  }
+
+  // 2) 对象：支持两类结构并可混合：
+  //    a) 分组数组结构（如 { ids: [..], names: [..] } 或 { values: [..], codes: [..] }）
+  //       返回以数组元素为键的对象：{ [fieldKey]: formData[fieldKey] }
+  //    b) 键值映射结构（如 { dataEditCompany: "id", dataEditCompanyName: "coName" }）
+  //       返回以 sourcePath 为键的对象：{ [sourcePath]: formData[targetKey] }
+  if (isObject(attr)) {
+    const result: AnyObject = {}
+    let handled = false
+
+    // a) 处理分组数组结构：遍历所有值为字符串数组的键
+    Object.entries(attr as AnyObject).forEach(([_, groupVal]) => {
+      if (isArray(groupVal)) {
+        ;(groupVal as string[]).forEach((fieldKey) => {
+          if (!fieldKey) return
+          result[fieldKey] = formData[fieldKey]
+        })
+        handled = true
+      }
+    })
+
+    // b) 处理键值映射结构：遍历所有值为字符串的键
+    Object.entries(attr as AnyObject).forEach(([targetKey, sourcePath]) => {
+      if (typeof sourcePath === 'string') {
+        result[sourcePath] = formData[targetKey]
+        handled = true
+      }
+    })
+
+    // 如果所有映射得到的值都为 undefined/null，则不返回占位对象，避免清空场景下出现形如 { id: ... } 的残留对象
+    if (!handled) return undefined
+    const allUndefined =
+      Object.keys(result).length > 0 &&
+      Object.values(result).every((v) => v === undefined || v === null)
+    return allUndefined ? undefined : result
+  }
+
+  return undefined
+}
+
+/**
+ * 按 attr 对象映射将选项数据写入 formData：
+ * - 支持单选与多选；
+ * - 优先使用 option.__raw 原始对象，其次使用 option 自身；
+ * - sourcePath 支持嵌套路径（例如 'data.id'）。
+ */
+export function applyAttrMapping(
+  formData: AnyObject,
+  toolbarState: { setValue: (k: string, v: any) => void },
+  attr: Record<string, string>,
+  value: any,
+  option: any,
+  isMultiple: boolean,
+) {
+  const mapOne = (opt: any, targetKey: string, sourcePath: string) => {
+    const raw = opt && (opt.__raw ?? opt)
+    const v = getByPath(raw, sourcePath)
+    formData[targetKey] = v
+    toolbarState.setValue(targetKey, v)
+    return v
+  }
+
+  Object.entries(attr).forEach(([targetKey, sourcePath]) => {
+    if (!targetKey || !sourcePath || typeof sourcePath !== 'string') return
+    if (isMultiple) {
+      const arr = Array.isArray(option) ? option : []
+      const values = arr.map((opt) => mapOne(opt, targetKey, sourcePath))
+      formData[targetKey] = values
+      toolbarState.setValue(targetKey, values)
+    } else {
+      mapOne(option, targetKey, sourcePath)
+    }
+  })
+}
+
+export default {
+  buildValueFromAttr,
+  applyAttrMapping,
+  getByPath,
+}

package/vite.config.ts

@@ -12,7 +12,8 @@ export default defineConfig({
     vue(),
     vueJsx(),
     dts({
-      include: ['index.ts', 'src/**/*.ts', 'src/**/*.tsx', 'src/**/*.vue'],
+      entryRoot: 'src',
+      include: ['src/**/*.ts', 'src/**/*.tsx', 'src/**/*.vue'],
       outDir: 'dist/types',
       cleanVueFileName: true,
     }),
@@ -20,7 +21,7 @@ export default defineConfig({
   build: {
     cssCodeSplit: false,
     lib: {
-      entry: resolve(__dirname, 'index.ts'),
+      entry: resolve(__dirname, './src/index.ts'),
       name: 'AntsooTableCore',
       fileName: (format) => `index.${format === 'es' ? 'js' : 'cjs'}`,
       formats: ['es', 'cjs'],
@@ -32,6 +33,12 @@ export default defineConfig({
         '@antsoo-lib/shared',
         '@antsoo-lib/components',
         'lodash-es',
+        '@vxe-ui/plugin-export-xlsx',
+        '@vxe-ui/plugin-menu',
+        '@vxe-ui/plugin-render-wangeditor',
+        'vxe-pc-ui',
+        'vxe-table',
+        'xe-utils',
         /^@ant-design\/icons-svg/,
       ],
       output: {
@@ -41,6 +48,12 @@ export default defineConfig({
           '@antsoo-lib/shared': 'AntsooShared',
           '@antsoo-lib/components': 'AntsooComponents',
           'lodash-es': 'lodash-es',
+          '@vxe-ui/plugin-export-xlsx': 'VxeExportXlsxPlugin',
+          '@vxe-ui/plugin-menu': 'VxeMenuPlugin',
+          '@vxe-ui/plugin-render-wangeditor': 'VxeRenderWangEditorPlugin',
+          'vxe-pc-ui': 'VxePCUI',
+          'vxe-table': 'VxeTable',
+          'xe-utils': 'XeUtils',
         },
       },
     },

package/index.css

@@ -1,2 +0,0 @@
-@import 'vxe-pc-ui/lib/style.css';
-@import 'vxe-table/lib/style.css';

package/index.ts

@@ -1,21 +0,0 @@
-/**
- * antsoo-lib Core
- */
-import VxeUI from 'vxe-pc-ui'
-import VxeTable from 'vxe-table'
-
-import type { App } from 'vue'
-
-import './index.css'
-import { BaseTable } from './src'
-
-export const version = '0.0.0'
-
-export * from 'xe-utils'
-
-export const CoreTable = {
-  install(app: App) {
-    app.component('BaseTable', BaseTable)
-    app.use(VxeUI).use(VxeTable)
-  },
-}

package/src/BaseTable/helpers.tsx

@@ -1,91 +0,0 @@
-import { Select } from '@antsoo-lib/components'
-import type { VoidFunction } from '@antsoo-lib/shared'
-
-import { markRaw, nextTick } from 'vue'
-import type { VNode } from 'vue'
-
-import type { ToolbarState } from './state'
-import type { InputGroupToolbarItem, SlotConfig } from './types'
-
-// 渲染插槽内容的辅助函数
-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
-}