@antsoo-lib/core 2.0.5 → 3.0.1

package/src/render/InputRange.tsx

@@ -1,154 +1,154 @@
-import { Form, Input } from '@antsoo-lib/components'
-import type { AnyObject } from '@antsoo-lib/shared'
-
-import { defineComponent, h, markRaw } from 'vue'
-import type { VNode } from 'vue'
-
-import type { ToolbarState } from './state'
-import type { InputRangeToolbarItem, ToolbarItem } from './types'
-
-/**
- * InputRange 业务包装组件
- * @description 统一处理 CoreForm 下 key/attr 映射、事件回调与校验触发
- */
-const InputRangeWrapper = defineComponent({
-  name: 'InputRangeWrapper',
-  props: {
-    item: {
-      type: Object,
-      required: true,
-    },
-    toolbarState: {
-      type: Object,
-      required: true,
-    },
-    formValues: {
-      type: Object,
-      required: false,
-      default: undefined,
-    },
-  },
-  setup(props) {
-    const formItemContext = Form.useInjectFormItemContext()
-
-    return (): VNode => {
-      const inputRangeItem = props.item as InputRangeToolbarItem
-      const toolbarState = props.toolbarState as ToolbarState
-      const formValues = props.formValues as AnyObject | undefined
-      const attr = (inputRangeItem as AnyObject).attr
-      const allowClear = Boolean((inputRangeItem.props as AnyObject)?.allowClear)
-
-      /**
-       * 解析区间值
-       * @description attr 模式优先取 formValues，回退到 toolbarState
-       */
-      const getRangeValue = (): [string, string] => {
-        if (formValues && Array.isArray(attr) && attr.length >= 2) {
-          const [startKey, endKey] = attr as [string, string]
-          const start = formValues[startKey]
-          const end = formValues[endKey]
-          return [start != null ? String(start) : '', end != null ? String(end) : '']
-        }
-        const stateValue = toolbarState.getValue(inputRangeItem.key || '')
-        if (Array.isArray(stateValue)) {
-          const [start, end] = stateValue
-          return [start != null ? String(start) : '', end != null ? String(end) : '']
-        }
-        return ['', '']
-      }
-
-      /**
-       * 同步区间值并触发外部事件
-       */
-      const handleRangeChange = (value: [string, string]) => {
-        if (!formValues || !Array.isArray(attr)) {
-          toolbarState.setValue(inputRangeItem.key || '', value)
-        }
-        const allValues = toolbarState.getAllValues()
-        inputRangeItem.events?.['onUpdate:value']?.(value, allValues, toolbarState)
-        inputRangeItem.events?.onChange?.(value, allValues, toolbarState)
-        formItemContext.onFieldChange()
-      }
-
-      const [startValue, endValue] = getRangeValue()
-      const Comp = markRaw(Input)
-
-      const startInput = (
-        <Comp
-          {...inputRangeItem.props?.startProps}
-          value={startValue}
-          allowClear={Boolean(
-            (inputRangeItem.props as AnyObject)?.startProps?.allowClear ?? allowClear,
-          )}
-          placeholder={inputRangeItem.props?.startPlaceholder || '起始值'}
-          onUpdate:value={(value: string) => {
-            const [, currentEnd] = getRangeValue()
-            handleRangeChange([value, currentEnd])
-          }}
-          onChange={(event: Event) => {
-            const target = event.target as HTMLInputElement
-            const [, currentEnd] = getRangeValue()
-            handleRangeChange([target.value, currentEnd])
-          }}
-        />
-      )
-
-      const endInput = (
-        <Comp
-          {...inputRangeItem.props?.endProps}
-          value={endValue}
-          allowClear={Boolean(
-            (inputRangeItem.props as AnyObject)?.endProps?.allowClear ?? allowClear,
-          )}
-          placeholder={inputRangeItem.props?.endPlaceholder || '结束值'}
-          onUpdate:value={(value: string) => {
-            const [currentStart] = getRangeValue()
-            handleRangeChange([currentStart, value])
-          }}
-          onChange={(event: Event) => {
-            const target = event.target as HTMLInputElement
-            const [currentStart] = getRangeValue()
-            handleRangeChange([currentStart, target.value])
-          }}
-        />
-      )
-
-      const content = (
-        <div
-          key={inputRangeItem.key}
-          style={{
-            display: 'flex',
-            alignItems: 'center',
-            ...(inputRangeItem as AnyObject).containerStyle,
-          }}
-        >
-          {startInput}
-          <span style={{ margin: '0 8px', color: '#999' }}>
-            {inputRangeItem.props?.separator || '至'}
-          </span>
-          {endInput}
-        </div>
-      )
-
-      return h(Form.ItemRest, null, {
-        default: () => content,
-      })
-    }
-  },
-})
-
-/**
- * 渲染 InputRange
- * @description 透传 toolbarState 与 formValues，供 CoreForm 统一状态管理
- */
-export function renderInputRange(
-  item: ToolbarItem,
-  toolbarState: ToolbarState,
-  formValues?: AnyObject,
-): VNode {
-  return h(InputRangeWrapper, {
-    item,
-    toolbarState,
-    formValues,
-  })
-}
+import { Form, Input } from '@antsoo-lib/components'
+import type { AnyObject } from '@antsoo-lib/shared'
+
+import { defineComponent, h, markRaw } from 'vue'
+import type { VNode } from 'vue'
+
+import type { ToolbarState } from './state'
+import type { InputRangeToolbarItem, ToolbarItem } from './types'
+
+/**
+ * InputRange 业务包装组件
+ * @description 统一处理 CoreForm 下 key/attr 映射、事件回调与校验触发
+ */
+const InputRangeWrapper = defineComponent({
+  name: 'InputRangeWrapper',
+  props: {
+    item: {
+      type: Object,
+      required: true,
+    },
+    toolbarState: {
+      type: Object,
+      required: true,
+    },
+    formValues: {
+      type: Object,
+      required: false,
+      default: undefined,
+    },
+  },
+  setup(props) {
+    const formItemContext = Form.useInjectFormItemContext()
+
+    return (): VNode => {
+      const inputRangeItem = props.item as InputRangeToolbarItem
+      const toolbarState = props.toolbarState as ToolbarState
+      const formValues = props.formValues as AnyObject | undefined
+      const attr = (inputRangeItem as AnyObject).attr
+      const allowClear = Boolean((inputRangeItem.props as AnyObject)?.allowClear)
+
+      /**
+       * 解析区间值
+       * @description attr 模式优先取 formValues，回退到 toolbarState
+       */
+      const getRangeValue = (): [string, string] => {
+        if (formValues && Array.isArray(attr) && attr.length >= 2) {
+          const [startKey, endKey] = attr as [string, string]
+          const start = formValues[startKey]
+          const end = formValues[endKey]
+          return [start != null ? String(start) : '', end != null ? String(end) : '']
+        }
+        const stateValue = toolbarState.getValue(inputRangeItem.key || '')
+        if (Array.isArray(stateValue)) {
+          const [start, end] = stateValue
+          return [start != null ? String(start) : '', end != null ? String(end) : '']
+        }
+        return ['', '']
+      }
+
+      /**
+       * 同步区间值并触发外部事件
+       */
+      const handleRangeChange = (value: [string, string]) => {
+        if (!formValues || !Array.isArray(attr)) {
+          toolbarState.setValue(inputRangeItem.key || '', value)
+        }
+        const allValues = toolbarState.getAllValues()
+        inputRangeItem.events?.['onUpdate:value']?.(value, allValues, toolbarState)
+        inputRangeItem.events?.onChange?.(value, allValues, toolbarState)
+        formItemContext.onFieldChange()
+      }
+
+      const [startValue, endValue] = getRangeValue()
+      const Comp = markRaw(Input)
+
+      const startInput = (
+        <Comp
+          {...inputRangeItem.props?.startProps}
+          value={startValue}
+          allowClear={Boolean(
+            (inputRangeItem.props as AnyObject)?.startProps?.allowClear ?? allowClear,
+          )}
+          placeholder={inputRangeItem.props?.startPlaceholder || '起始值'}
+          onUpdate:value={(value: string) => {
+            const [, currentEnd] = getRangeValue()
+            handleRangeChange([value, currentEnd])
+          }}
+          onChange={(event: Event) => {
+            const target = event.target as HTMLInputElement
+            const [, currentEnd] = getRangeValue()
+            handleRangeChange([target.value, currentEnd])
+          }}
+        />
+      )
+
+      const endInput = (
+        <Comp
+          {...inputRangeItem.props?.endProps}
+          value={endValue}
+          allowClear={Boolean(
+            (inputRangeItem.props as AnyObject)?.endProps?.allowClear ?? allowClear,
+          )}
+          placeholder={inputRangeItem.props?.endPlaceholder || '结束值'}
+          onUpdate:value={(value: string) => {
+            const [currentStart] = getRangeValue()
+            handleRangeChange([currentStart, value])
+          }}
+          onChange={(event: Event) => {
+            const target = event.target as HTMLInputElement
+            const [currentStart] = getRangeValue()
+            handleRangeChange([currentStart, target.value])
+          }}
+        />
+      )
+
+      const content = (
+        <div
+          key={inputRangeItem.key}
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            ...(inputRangeItem as AnyObject).containerStyle,
+          }}
+        >
+          {startInput}
+          <span style={{ margin: '0 8px', color: '#999' }}>
+            {inputRangeItem.props?.separator || '至'}
+          </span>
+          {endInput}
+        </div>
+      )
+
+      return h(Form.ItemRest, null, {
+        default: () => content,
+      })
+    }
+  },
+})
+
+/**
+ * 渲染 InputRange
+ * @description 透传 toolbarState 与 formValues，供 CoreForm 统一状态管理
+ */
+export function renderInputRange(
+  item: ToolbarItem,
+  toolbarState: ToolbarState,
+  formValues?: AnyObject,
+): VNode {
+  return h(InputRangeWrapper, {
+    item,
+    toolbarState,
+    formValues,
+  })
+}

package/src/render/RadioGroup.tsx

@@ -1,63 +1,63 @@
-import { RadioGroup } from '@antsoo-lib/components'
-import type { RadioGroupProps } 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 { RadioGroupToolbarItem, ToolbarItem } from './types'
-
-// 单选框渲染函数
-export function renderRadioGroup(item: ToolbarItem, toolbarState: ToolbarState): VNode {
-  const radioItem = item as RadioGroupToolbarItem
-  const { key, events = {} } = radioItem
-  const { props = {}, disabled = false } = radioItem
-
-  const isDisabled = isFunction(disabled)
-    ? disabled(toolbarState.getAllValues(), toolbarState)
-    : disabled
-  const finalProps: Partial<RadioGroupProps> & { disabled?: boolean; value?: any } = {
-    ...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 ev = args[0]
-        const nextVal =
-          ev && typeof ev === 'object' && 'target' in ev ? ev.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: any) => {
-      toolbarState.setValue(key, value)
-    }
-  }
-
-  const Comp = markRaw(RadioGroup)
-  return (
-    <Comp
-      key={key}
-      value={toolbarState.getValue(key) || finalProps.value}
-      {...finalProps}
-      {...processedEvents}
-    />
-  )
-}
+import { RadioGroup } from '@antsoo-lib/components'
+import type { RadioGroupProps } 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 { RadioGroupToolbarItem, ToolbarItem } from './types'
+
+// 单选框渲染函数
+export function renderRadioGroup(item: ToolbarItem, toolbarState: ToolbarState): VNode {
+  const radioItem = item as RadioGroupToolbarItem
+  const { key, events = {} } = radioItem
+  const { props = {}, disabled = false } = radioItem
+
+  const isDisabled = isFunction(disabled)
+    ? disabled(toolbarState.getAllValues(), toolbarState)
+    : disabled
+  const finalProps: Partial<RadioGroupProps> & { disabled?: boolean; value?: any } = {
+    ...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 ev = args[0]
+        const nextVal =
+          ev && typeof ev === 'object' && 'target' in ev ? ev.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: any) => {
+      toolbarState.setValue(key, value)
+    }
+  }
+
+  const Comp = markRaw(RadioGroup)
+  return (
+    <Comp
+      key={key}
+      value={toolbarState.getValue(key) || finalProps.value}
+      {...finalProps}
+      {...processedEvents}
+    />
+  )
+}

package/src/render/Select.tsx

@@ -1,96 +1,96 @@
-import { Select } from '@antsoo-lib/components'
-import type { SelectProps } 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 { SelectToolbarItem, ToolbarItem } from './types'
-
-// 选择框渲染函数
-export function renderSelect(item: ToolbarItem, toolbarState: ToolbarState): VNode {
-  const selectItem = item as SelectToolbarItem
-  const { key, events = {} } = selectItem
-  const { props = {}, disabled = false } = selectItem
-
-  const isDisabled = isFunction(disabled)
-    ? disabled(toolbarState.getAllValues(), toolbarState)
-    : disabled
-
-  // Resolve options
-  const resolvedOptions = isFunction(props.options)
-    ? props.options(toolbarState.getAllValues())
-    : props.options
-
-  // 从props中提取options，避免在展开props时覆盖处理后的options
-  const { options: _originalOptions, ...otherProps } = props
-
-  // 响应式计算 options，增加对ref对象的处理
-  const computedOptions = computed(() => {
-    if (isFunction(resolvedOptions)) {
-      // Should not happen if props.options was already resolved above, but handle ref() case
-      return resolvedOptions(toolbarState.getAllValues())
-    }
-    // 处理ref对象
-    if (resolvedOptions && typeof resolvedOptions === 'object' && 'value' in resolvedOptions) {
-      return resolvedOptions.value || []
-    }
-    return resolvedOptions || []
-  })
-
-  const finalProps: Partial<SelectProps> & { disabled?: boolean } = {
-    ...otherProps,
-    disabled: isDisabled,
-  }
-
-  // 定义processedEvents对象
-  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: any) => {
-      toolbarState.setValue(key, value)
-    }
-  }
-
-  // 获取当前值，确保正确显示
-  const rawVal = toolbarState.getValue(key)
-  const propVal = props.value
-  const isMulti = otherProps.mode === 'multiple' || otherProps.mode === 'tags'
-
-  const currentValue =
-    rawVal !== undefined && rawVal !== null
-      ? rawVal
-      : propVal !== undefined && propVal !== null
-        ? propVal
-        : isMulti
-          ? []
-          : undefined
-
-  const Comp = markRaw(Select)
-  return (
-    <Comp
-      key={key}
-      value={currentValue}
-      allowClear
-      {...finalProps}
-      options={computedOptions.value}
-      {...processedEvents}
-    />
-  )
-}
+import { Select } from '@antsoo-lib/components'
+import type { SelectProps } 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 { SelectToolbarItem, ToolbarItem } from './types'
+
+// 选择框渲染函数
+export function renderSelect(item: ToolbarItem, toolbarState: ToolbarState): VNode {
+  const selectItem = item as SelectToolbarItem
+  const { key, events = {} } = selectItem
+  const { props = {}, disabled = false } = selectItem
+
+  const isDisabled = isFunction(disabled)
+    ? disabled(toolbarState.getAllValues(), toolbarState)
+    : disabled
+
+  // Resolve options
+  const resolvedOptions = isFunction(props.options)
+    ? props.options(toolbarState.getAllValues())
+    : props.options
+
+  // 从props中提取options，避免在展开props时覆盖处理后的options
+  const { options: _originalOptions, ...otherProps } = props
+
+  // 响应式计算 options，增加对ref对象的处理
+  const computedOptions = computed(() => {
+    if (isFunction(resolvedOptions)) {
+      // Should not happen if props.options was already resolved above, but handle ref() case
+      return resolvedOptions(toolbarState.getAllValues())
+    }
+    // 处理ref对象
+    if (resolvedOptions && typeof resolvedOptions === 'object' && 'value' in resolvedOptions) {
+      return resolvedOptions.value || []
+    }
+    return resolvedOptions || []
+  })
+
+  const finalProps: Partial<SelectProps> & { disabled?: boolean } = {
+    ...otherProps,
+    disabled: isDisabled,
+  }
+
+  // 定义processedEvents对象
+  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: any) => {
+      toolbarState.setValue(key, value)
+    }
+  }
+
+  // 获取当前值，确保正确显示
+  const rawVal = toolbarState.getValue(key)
+  const propVal = props.value
+  const isMulti = otherProps.mode === 'multiple' || otherProps.mode === 'tags'
+
+  const currentValue =
+    rawVal !== undefined && rawVal !== null
+      ? rawVal
+      : propVal !== undefined && propVal !== null
+        ? propVal
+        : isMulti
+          ? []
+          : undefined
+
+  const Comp = markRaw(Select)
+  return (
+    <Comp
+      key={key}
+      value={currentValue}
+      allowClear
+      {...finalProps}
+      options={computedOptions.value}
+      {...processedEvents}
+    />
+  )
+}