@antsoo-lib/core 2.0.5 → 3.0.1

package/src/render/Input.tsx

@@ -1,140 +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 './helper'
-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}
-    />
-  )
-}
+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 './helper'
+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}
+    />
+  )
+}

package/src/render/InputGroup.tsx

@@ -1,115 +1,115 @@
-import { Col, InputGroup, Row } from '@antsoo-lib/components'
-import type { AnyObject } from '@antsoo-lib/shared'
-
-import { markRaw } from 'vue'
-import type { ExtractPropTypes, VNode } from 'vue'
-
-import { rendererMap } from '.'
-import { validateInputGroupConfig } from './helper'
-import type { ToolbarState } from './state'
-import type { InputGroupPropsLike, InputGroupToolbarItem, ToolbarItem } from './types'
-
-// Input.Group 渲染函数
-export function renderInputGroup(
-  config: InputGroupToolbarItem,
-  toolbarState: ToolbarState,
-  formValues?: AnyObject,
-): VNode {
-  // 默认 compact 布局
-  const props = { compact: true, ...(config.props || {}) } as InputGroupPropsLike
-
-  const { valid, errors } = validateInputGroupConfig(config)
-  if (!valid) {
-    console.warn('Invalid inputGroup config:', errors)
-    return (
-      <span key={config.key} class="input-group-error">
-        Invalid inputGroup config
-      </span>
-    )
-  }
-
-  // 组装子节点（为每个子项注入事件桥，确保更新到 formValues）
-  const childNodes = config.children.map((child, index) => {
-    const renderer = rendererMap[child.type]
-    if (!renderer) {
-      console.warn(`Unknown child type in InputGroup: ${child.type}`)
-      return <span key={child.key || `unknown-${index}`}>Unknown type: {child.type}</span>
-    }
-    // 为子项注入通用的值更新事件，使其除更新 toolbarState 外，还能同步到父级表单的 formValues
-    const originalEvents = child.events || {}
-    const childItem = {
-      ...child,
-      events: {
-        ...originalEvents,
-        // 统一拦截 v-model 更新
-        'onUpdate:value': (val: any, ..._args: any[]) => {
-          if (child.key && formValues) {
-            formValues[child.key] = val
-          }
-          // 委托原事件
-          if (originalEvents['onUpdate:value']) {
-            try {
-              originalEvents['onUpdate:value'](val, toolbarState.getAllValues(), toolbarState)
-            } catch {
-              // 忽略用户事件错误
-            }
-          }
-        },
-        // 兜底拦截 onChange（部分组件可能使用 onChange 作为主事件）
-        onChange: (evtOrVal: any, ..._args: any[]) => {
-          const val = evtOrVal?.target?.value ?? evtOrVal
-          if (child.key && formValues) {
-            formValues[child.key] = val
-          }
-          try {
-            originalEvents.onChange?.(val, toolbarState.getAllValues(), toolbarState)
-          } catch {
-            // 忽略用户事件错误
-          }
-        },
-      },
-    } as ToolbarItem
-
-    // 复用已有渲染器，确保配置一致性与联动
-    return renderer(childItem as ToolbarItem, toolbarState, formValues)
-  })
-
-  const layoutType = config.layout?.type ?? (props.compact ? 'compact' : 'none')
-  const Content = (() => {
-    if (layoutType === 'row') {
-      const RowComp = markRaw(Row)
-      const ColComp = markRaw(Col)
-      return (
-        <RowComp {...(config.layout?.rowProps || {})}>
-          {childNodes.map((node, idx) => {
-            const colCfg = config.layout?.cols?.[idx]
-            return (
-              <ColComp
-                key={config.children[idx]?.key || `col-${idx}`}
-                span={colCfg?.span ?? config.children[idx]?.span ?? undefined}
-                flex={colCfg?.flex}
-                class={(colCfg as Partial<ExtractPropTypes<typeof ColComp>>)?.class}
-                style={(colCfg as Partial<ExtractPropTypes<typeof ColComp>>)?.style}
-              >
-                {node}
-              </ColComp>
-            )
-          })}
-        </RowComp>
-      )
-    }
-    // compact / none：直接返回子节点数组，保证 Input.Group 能与其直接子元素进行无缝紧凑样式合并
-    return childNodes
-  })()
-
-  const Comp = markRaw(InputGroup) as any
-  return (
-    <Comp
-      key={config.key}
-      {...props}
-      {...((config.attr as Partial<ExtractPropTypes<typeof Comp>>) || {})}
-    >
-      {Content}
-    </Comp>
-  )
-}
+import { Col, InputGroup, Row } from '@antsoo-lib/components'
+import type { AnyObject } from '@antsoo-lib/shared'
+
+import { markRaw } from 'vue'
+import type { ExtractPropTypes, VNode } from 'vue'
+
+import { rendererMap } from '.'
+import { validateInputGroupConfig } from './helper'
+import type { ToolbarState } from './state'
+import type { InputGroupPropsLike, InputGroupToolbarItem, ToolbarItem } from './types'
+
+// Input.Group 渲染函数
+export function renderInputGroup(
+  config: InputGroupToolbarItem,
+  toolbarState: ToolbarState,
+  formValues?: AnyObject,
+): VNode {
+  // 默认 compact 布局
+  const props = { compact: true, ...(config.props || {}) } as InputGroupPropsLike
+
+  const { valid, errors } = validateInputGroupConfig(config)
+  if (!valid) {
+    console.warn('Invalid inputGroup config:', errors)
+    return (
+      <span key={config.key} class="input-group-error">
+        Invalid inputGroup config
+      </span>
+    )
+  }
+
+  // 组装子节点（为每个子项注入事件桥，确保更新到 formValues）
+  const childNodes = config.children.map((child, index) => {
+    const renderer = rendererMap[child.type]
+    if (!renderer) {
+      console.warn(`Unknown child type in InputGroup: ${child.type}`)
+      return <span key={child.key || `unknown-${index}`}>Unknown type: {child.type}</span>
+    }
+    // 为子项注入通用的值更新事件，使其除更新 toolbarState 外，还能同步到父级表单的 formValues
+    const originalEvents = child.events || {}
+    const childItem = {
+      ...child,
+      events: {
+        ...originalEvents,
+        // 统一拦截 v-model 更新
+        'onUpdate:value': (val: any, ..._args: any[]) => {
+          if (child.key && formValues) {
+            formValues[child.key] = val
+          }
+          // 委托原事件
+          if (originalEvents['onUpdate:value']) {
+            try {
+              originalEvents['onUpdate:value'](val, toolbarState.getAllValues(), toolbarState)
+            } catch {
+              // 忽略用户事件错误
+            }
+          }
+        },
+        // 兜底拦截 onChange（部分组件可能使用 onChange 作为主事件）
+        onChange: (evtOrVal: any, ..._args: any[]) => {
+          const val = evtOrVal?.target?.value ?? evtOrVal
+          if (child.key && formValues) {
+            formValues[child.key] = val
+          }
+          try {
+            originalEvents.onChange?.(val, toolbarState.getAllValues(), toolbarState)
+          } catch {
+            // 忽略用户事件错误
+          }
+        },
+      },
+    } as ToolbarItem
+
+    // 复用已有渲染器，确保配置一致性与联动
+    return renderer(childItem as ToolbarItem, toolbarState, formValues)
+  })
+
+  const layoutType = config.layout?.type ?? (props.compact ? 'compact' : 'none')
+  const Content = (() => {
+    if (layoutType === 'row') {
+      const RowComp = markRaw(Row)
+      const ColComp = markRaw(Col)
+      return (
+        <RowComp {...(config.layout?.rowProps || {})}>
+          {childNodes.map((node, idx) => {
+            const colCfg = config.layout?.cols?.[idx]
+            return (
+              <ColComp
+                key={config.children[idx]?.key || `col-${idx}`}
+                span={colCfg?.span ?? config.children[idx]?.span ?? undefined}
+                flex={colCfg?.flex}
+                class={(colCfg as Partial<ExtractPropTypes<typeof ColComp>>)?.class}
+                style={(colCfg as Partial<ExtractPropTypes<typeof ColComp>>)?.style}
+              >
+                {node}
+              </ColComp>
+            )
+          })}
+        </RowComp>
+      )
+    }
+    // compact / none：直接返回子节点数组，保证 Input.Group 能与其直接子元素进行无缝紧凑样式合并
+    return childNodes
+  })()
+
+  const Comp = markRaw(InputGroup) as any
+  return (
+    <Comp
+      key={config.key}
+      {...props}
+      {...((config.attr as Partial<ExtractPropTypes<typeof Comp>>) || {})}
+    >
+      {Content}
+    </Comp>
+  )
+}