@antsoo-lib/core 0.0.0 → 1.0.0

package/src/BaseTable/renderers/InputGroup.tsx

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

package/src/BaseTable/renderers/InputNumber.tsx

@@ -0,0 +1,205 @@
+import { InputNumber } from '@antsoo-lib/components'
+import { PRECISION } 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 { getInputNumberFocusState, renderSlotContent } from '../helpers'
+import type { ToolbarState } from '../state'
+import type { InputNumberToolbarItem, ToolbarItem } from '../types'
+
+// 数字输入框渲染函数
+export function renderInputNumber(item: ToolbarItem, toolbarState: ToolbarState): VNode {
+  const inputNumberItem = item as InputNumberToolbarItem
+  const { key, events = {}, slots } = inputNumberItem
+  const { props = {}, disabled = false } = inputNumberItem
+
+  const isDisabled = isFunction(disabled)
+    ? disabled(toolbarState.getAllValues(), toolbarState)
+    : disabled
+
+  // Clone props to avoid mutation
+  const finalProps = { ...props, disabled: isDisabled }
+
+  // 自动处理精度与格式化 (xmoney/xprice/xweight/xtaxrate)
+  const { xmoney, xprice, xweight, xtaxrate } = finalProps
+
+  // 1. 确定精度
+  let precision = finalProps.precision
+  if (precision === undefined) {
+    if (xmoney) precision = PRECISION.amount
+    else if (xprice) precision = PRECISION.price
+    else if (xweight) precision = PRECISION.weight
+    else if (xtaxrate) precision = PRECISION.taxRate
+    else if (finalProps.xnumber) precision = PRECISION.number
+
+    if (precision !== undefined) {
+      finalProps.precision = precision
+    }
+  }
+
+  // 2. 确定步长 (step)
+  if (finalProps.step === undefined && precision !== undefined) {
+    finalProps.step = 1 / 10 ** precision
+  }
+
+  // 以字段 key 维度记录 InputNumber 是否处于聚焦中
+  const focusState = key ? getInputNumberFocusState(toolbarState) : undefined
+
+  const formatValueWithPrecisionOnBlur = (value: any) => {
+    if (value == null || value === '') return ''
+    const rawText = `${value}`
+    if (precision === undefined) return rawText
+    // 聚焦中保持“用户输入原样”，避免输入中间态（如 2. / 2.0）被 toFixed 强制改写
+    if (key && focusState?.get(key)) return rawText
+    const num = Number(rawText)
+    if (!Number.isFinite(num)) return rawText
+    // 失焦时按 precision 补齐尾数 0（同时会发生四舍五入）
+    return num.toFixed(precision)
+  }
+
+  // 3. 默认格式化 (千分位 或 百分比)
+  if (!finalProps.formatter) {
+    if (xtaxrate) {
+      // 税率：先补精度再加 %
+      finalProps.formatter = (value: any) => {
+        const text = formatValueWithPrecisionOnBlur(value)
+        return text === '' ? '' : `${text}%`
+      }
+      finalProps.parser = (value: string | undefined) => (value ? value.replace('%', '') : '')
+    } else {
+      // 默认千分位
+      // 千分位：先补精度再加逗号（确保 2 -> 2.00 之后再变成 2.00 的千分位格式）
+      finalProps.formatter = (value: any) => {
+        const text = formatValueWithPrecisionOnBlur(value)
+        if (text === '') return ''
+        return `${text}`.replace(/\B(?=(?:\d{3})+(?!\d))/g, ',')
+      }
+      finalProps.parser = (value: string | undefined) => (value ? value.replace(/,/g, '') : '')
+    }
+  }
+
+  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)
+    }
+  }
+
+  // 自动全选逻辑：合并 onFocus 事件
+  const userOnFocus = processedEvents.onFocus || events.onFocus
+  processedEvents.onFocus = (...args: any[]) => {
+    const e = args[0]
+    if (key) focusState?.set(key, true)
+    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)
+        }
+
+        target.addEventListener('mouseup', preventMouseUp, { once: true })
+
+        const cleanup = () => {
+          target.removeEventListener('mouseup', preventMouseUp)
+          target.removeEventListener('blur', cleanup)
+        }
+        target.addEventListener('blur', cleanup)
+      }
+    } catch {
+      // ignore
+    }
+    // 执行用户原有逻辑
+    userOnFocus?.(...args, toolbarState.getAllValues(), toolbarState)
+  }
+
+  if (key) {
+    const userOnFocusCapture = processedEvents.onFocusCapture
+    processedEvents.onFocusCapture = (...args: any[]) => {
+      // capture 阶段优先标记“聚焦态”，确保 formatter 在同一事件周期内可读到最新状态
+      focusState?.set(key, true)
+      userOnFocusCapture?.(...args)
+    }
+
+    const userOnBlurCapture = processedEvents.onBlurCapture
+    processedEvents.onBlurCapture = (...args: any[]) => {
+      // capture 阶段优先标记“失焦态”，避免 InputNumber 内部 onBlur flush 时仍被认为是聚焦态
+      focusState?.set(key, false)
+      userOnBlurCapture?.(...args)
+    }
+
+    const userOnBlur = processedEvents.onBlur
+    processedEvents.onBlur = (...args: any[]) => {
+      focusState?.set(key, false)
+      userOnBlur?.(...args)
+    }
+  }
+
+  // 如果需要自动聚焦，添加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(InputNumber)
+  return (
+    <Comp
+      key={key}
+      value={
+        toolbarState.getValue(key) !== undefined
+          ? toolbarState.getValue(key)
+          : (finalProps.value ?? null)
+      }
+      {...finalProps}
+      {...processedEvents}
+      v-slots={slotsObject}
+    />
+  )
+}

package/src/BaseTable/renderers/InputPassword.tsx

@@ -0,0 +1,81 @@
+import { InputPassword } 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 } from 'vue'
+import type { VNode } from 'vue'
+
+import { renderSlotContent } from '../helpers'
+import type { ToolbarState } from '../state'
+import type { InputPasswordToolbarItem, ToolbarItem } from '../types'
+
+export function renderInputPassword(item: ToolbarItem, toolbarState: ToolbarState): VNode {
+  const inputItem = item as InputPasswordToolbarItem
+  const { key, events = {}, slots } = inputItem
+  const { props = {}, disabled = false } = item
+
+  const isDisabled = isFunction(disabled)
+    ? disabled(toolbarState.getAllValues(), toolbarState)
+    : disabled
+  const finalProps: Partial<InputProps> & { disabled?: boolean; value?: string } = {
+    ...props,
+    disabled: isDisabled,
+  }
+
+  // 处理事件，注入工具栏状态
+  const processedEvents: Record<string, VoidFunction> = {}
+  Object.keys(events).forEach((eventName) => {
+    processedEvents[eventName] = (...args: any[]) => {
+      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)
+    }
+  }
+
+  // 构建插槽对象
+  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(InputPassword)
+  return (
+    <Comp
+      key={key}
+      value={toolbarState.getValue(key) || finalProps.value || ''}
+      allowClear
+      autocomplete="new-password"
+      maxlength={50}
+      {...finalProps}
+      {...processedEvents}
+      v-slots={slotsObject}
+    />
+  )
+}

package/src/BaseTable/renderers/RadioGroup.tsx

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

package/src/BaseTable/renderers/Select.tsx

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

package/src/BaseTable/renderers/SselectPage.tsx

@@ -0,0 +1,107 @@
+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 { SselectPageProps, SselectPageToolbarItem, ToolbarItem } from '../types'
+
+export function renderSselectPage(item: ToolbarItem, toolbarState: ToolbarState): VNode {
+  const sselectPageItem = item as SselectPageToolbarItem
+  const { key, events = {} } = sselectPageItem
+  const { props = {} as SselectPageProps, disabled = false } = sselectPageItem
+
+  // 处理动态禁用逻辑
+  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] as VoidFunction)?.(
+              ...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(props.extraParams)) {
+      dynamicProps.extraParams = props.extraParams(allValues, toolbarState)
+    }
+
+    return dynamicProps
+  })
+
+  // 如果需要自动聚焦，添加 ref 处理
+  if (props.autoFocus) {
+    processedEvents.ref = (el: ComponentPublicInstance | null) => {
+      const component = el
+      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 SselectPageComponent = getRegisteredComponent('SselectPage')
+  if (!SselectPageComponent) {
+    console.warn('BaseTable: SselectPage component is not registered.')
+    return <span style={{ color: 'red' }}>SselectPage component missing</span>
+  }
+
+  const Comp = markRaw(SselectPageComponent) as any
+  return (
+    <Comp key={key} value={safeValue} allowClear {...computedProps.value} {...processedEvents} />
+  )
+}