niuma-ui 1.0.0

package/src/composables/useTableEdit.ts

@@ -0,0 +1,271 @@
+import { shallowRef, ref, type Ref } from 'vue'
+import { makeCellKey } from '../components/table/table-keys'
+
+export interface RsTableEditingCell {
+  rowKey: string
+  colKey: string
+  rowIndex: number
+}
+
+export interface RsTableStagedCell {
+  rowKey: string
+  colKey: string
+  rowIndex: number
+  draft: string
+  original: unknown
+}
+
+export interface RsTableFocusCell {
+  rowKey: string
+  colKey: string
+  rowIndex: number
+}
+
+export interface RsTableUndoEntry {
+  items: Array<{
+    rowKey: string
+    colKey: string
+    rowIndex: number
+    previous: unknown
+    next: unknown
+  }>
+}
+
+export function useTableEdit(options: {
+  enabled: () => boolean
+  undoLimit?: () => number
+}): {
+  editingCell: Ref<RsTableEditingCell | null>
+  editingDraft: Ref<string>
+  focusCell: Ref<RsTableFocusCell | null>
+  stagedMap: Ref<Map<string, RsTableStagedCell>>
+  errorMap: Ref<Map<string, string>>
+  validatingMap: Ref<Map<string, boolean>>
+  undoStack: Ref<RsTableUndoEntry[]>
+  redoStack: Ref<RsTableUndoEntry[]>
+  isEditing: (rowKey: string, colKey: string) => boolean
+  isFocused: (rowKey: string, colKey: string) => boolean
+  getDraft: (rowKey: string, colKey: string) => string | undefined
+  isDirty: (rowKey: string, colKey: string) => boolean
+  isRowDirty: (rowKey: string) => boolean
+  getCellError: (rowKey: string, colKey: string) => string | undefined
+  setCellError: (rowKey: string, colKey: string, message: string | null) => void
+  clearCellError: (rowKey: string, colKey: string) => void
+  isValidating: (rowKey: string, colKey: string) => boolean
+  setValidating: (rowKey: string, colKey: string, value: boolean) => void
+  getRowStagedCells: (rowKey: string) => RsTableStagedCell[]
+  startEdit: (cell: RsTableEditingCell, initialText: string) => void
+  updateDraft: (text: string) => void
+  cancelEdit: () => void
+  cancelAll: () => void
+  setFocusCell: (cell: RsTableFocusCell | null) => void
+  stageCell: (cell: RsTableStagedCell) => void
+  unstageCell: (rowKey: string, colKey: string) => void
+  rollbackRow: (rowKey: string) => void
+  commitRow: (rowKey: string) => RsTableStagedCell[]
+  pushUndo: (entry: RsTableUndoEntry | RsTableUndoEntry['items'][number]) => void
+  undo: () => RsTableUndoEntry | null
+  redo: () => RsTableUndoEntry | null
+} {
+  const editingCell = ref<RsTableEditingCell | null>(null)
+  const editingDraft = ref('')
+  const focusCell = ref<RsTableFocusCell | null>(null)
+  const stagedMap = shallowRef(new Map<string, RsTableStagedCell>())
+  const errorMap = shallowRef(new Map<string, string>())
+  const validatingMap = shallowRef(new Map<string, boolean>())
+  const undoStack = shallowRef<RsTableUndoEntry[]>([])
+  const redoStack = shallowRef<RsTableUndoEntry[]>([])
+
+  function isEditing(rowKey: string, colKey: string): boolean {
+    const active = editingCell.value
+    return active?.rowKey === rowKey && active.colKey === colKey
+  }
+
+  function isFocused(rowKey: string, colKey: string): boolean {
+    const active = focusCell.value
+    return active?.rowKey === rowKey && active.colKey === colKey
+  }
+
+  function getDraft(rowKey: string, colKey: string): string | undefined {
+    const staged = stagedMap.value.get(makeCellKey(rowKey, colKey))
+    if (staged) return staged.draft
+    if (isEditing(rowKey, colKey)) return editingDraft.value
+    return undefined
+  }
+
+  function isDirty(rowKey: string, colKey: string): boolean {
+    return stagedMap.value.has(makeCellKey(rowKey, colKey))
+  }
+
+  function getRowStagedCells(rowKey: string): RsTableStagedCell[] {
+    return [...stagedMap.value.values()].filter((item) => item.rowKey === rowKey)
+  }
+
+  function isRowDirty(rowKey: string): boolean {
+    return getRowStagedCells(rowKey).length > 0
+  }
+
+  function getCellError(rowKey: string, colKey: string): string | undefined {
+    return errorMap.value.get(makeCellKey(rowKey, colKey))
+  }
+
+  function setCellError(rowKey: string, colKey: string, message: string | null): void {
+    const key = makeCellKey(rowKey, colKey)
+    const next = new Map(errorMap.value)
+    if (!message) next.delete(key)
+    else next.set(key, message)
+    errorMap.value = next
+  }
+
+  function clearCellError(rowKey: string, colKey: string): void {
+    setCellError(rowKey, colKey, null)
+  }
+
+  function isValidating(rowKey: string, colKey: string): boolean {
+    return validatingMap.value.get(makeCellKey(rowKey, colKey)) === true
+  }
+
+  function setValidating(rowKey: string, colKey: string, value: boolean): void {
+    const key = makeCellKey(rowKey, colKey)
+    const next = new Map(validatingMap.value)
+    if (!value) next.delete(key)
+    else next.set(key, true)
+    validatingMap.value = next
+  }
+
+  function startEdit(cell: RsTableEditingCell, initialText: string): void {
+    if (!options.enabled()) return
+    editingCell.value = cell
+    focusCell.value = cell
+    const staged = stagedMap.value.get(makeCellKey(cell.rowKey, cell.colKey))
+    editingDraft.value = staged?.draft ?? initialText
+    clearCellError(cell.rowKey, cell.colKey)
+  }
+
+  function updateDraft(text: string): void {
+    if (!editingCell.value) return
+    editingDraft.value = text
+  }
+
+  function cancelEdit(): void {
+    editingCell.value = null
+    editingDraft.value = ''
+  }
+
+  function cancelAll(): void {
+    editingCell.value = null
+    editingDraft.value = ''
+    stagedMap.value = new Map()
+    errorMap.value = new Map()
+    validatingMap.value = new Map()
+  }
+
+  function setFocusCell(cell: RsTableFocusCell | null): void {
+    focusCell.value = cell
+  }
+
+  function stageCell(cell: RsTableStagedCell): void {
+    const key = makeCellKey(cell.rowKey, cell.colKey)
+    const next = new Map(stagedMap.value)
+    next.set(key, cell)
+    stagedMap.value = next
+    clearCellError(cell.rowKey, cell.colKey)
+    if (editingCell.value?.rowKey === cell.rowKey && editingCell.value.colKey === cell.colKey) {
+      editingCell.value = null
+      editingDraft.value = ''
+    }
+  }
+
+  function removeStagedKeys(keys: string[]): void {
+    if (!keys.length) return
+    const next = new Map(stagedMap.value)
+    for (const key of keys) next.delete(key)
+    stagedMap.value = next
+  }
+
+  function unstageCell(rowKey: string, colKey: string): void {
+    removeStagedKeys([makeCellKey(rowKey, colKey)])
+  }
+
+  function rollbackRow(rowKey: string): void {
+    const keys = [...stagedMap.value.keys()].filter((key) => key.startsWith(`${rowKey}:`))
+    removeStagedKeys(keys)
+    const errNext = new Map(errorMap.value)
+    for (const key of [...errNext.keys()]) {
+      if (key.startsWith(`${rowKey}:`)) errNext.delete(key)
+    }
+    errorMap.value = errNext
+    if (editingCell.value?.rowKey === rowKey) cancelEdit()
+  }
+
+  function commitRow(rowKey: string): RsTableStagedCell[] {
+    const changes = getRowStagedCells(rowKey)
+    rollbackRow(rowKey)
+    return changes
+  }
+
+  function normalizeUndo(
+    entry: RsTableUndoEntry | RsTableUndoEntry['items'][number],
+  ): RsTableUndoEntry {
+    if ('items' in entry) return entry
+    return { items: [entry] }
+  }
+
+  function pushUndo(entry: RsTableUndoEntry | RsTableUndoEntry['items'][number]): void {
+    const limit = options.undoLimit?.() ?? 50
+    undoStack.value = [...undoStack.value, normalizeUndo(entry)].slice(-Math.max(1, limit))
+    redoStack.value = []
+  }
+
+  function undo(): RsTableUndoEntry | null {
+    const stack = undoStack.value
+    if (!stack.length) return null
+    const entry = stack[stack.length - 1]!
+    undoStack.value = stack.slice(0, -1)
+    redoStack.value = [...redoStack.value, entry]
+    return entry
+  }
+
+  function redo(): RsTableUndoEntry | null {
+    const stack = redoStack.value
+    if (!stack.length) return null
+    const entry = stack[stack.length - 1]!
+    redoStack.value = stack.slice(0, -1)
+    undoStack.value = [...undoStack.value, entry]
+    return entry
+  }
+
+  return {
+    editingCell,
+    editingDraft,
+    focusCell,
+    stagedMap,
+    errorMap,
+    validatingMap,
+    undoStack,
+    redoStack,
+    isEditing,
+    isFocused,
+    getDraft,
+    isDirty,
+    isRowDirty,
+    getCellError,
+    setCellError,
+    clearCellError,
+    isValidating,
+    setValidating,
+    getRowStagedCells,
+    startEdit,
+    updateDraft,
+    cancelEdit,
+    cancelAll,
+    setFocusCell,
+    stageCell,
+    unstageCell,
+    rollbackRow,
+    commitRow,
+    pushUndo,
+    undo,
+    redo,
+  }
+}

package/src/composables/useTableRowHighlight.ts

@@ -0,0 +1,50 @@
+import { computed, ref, type ComputedRef, type Ref } from 'vue'
+
+export function useTableRowHighlight(options: {
+  enabled: () => boolean
+  highlightRowOnClick: () => boolean
+  isControlled: () => boolean
+  highlightedRowKey: () => string | undefined
+  defaultHighlightedRowKey: () => string | undefined
+  onUpdate: (value: string | undefined) => void
+}): {
+  highlightedKey: ComputedRef<string | undefined>
+  setHighlightedKey: (value: string | undefined) => void
+  isHighlighted: (rowKey: string) => boolean
+  applyRowClickHighlight: (rowKey: string) => void
+} {
+  const internalHighlightedKey = ref<string | undefined>(options.defaultHighlightedRowKey())
+
+  const highlightedKey = computed({
+    get: () => (options.isControlled() ? options.highlightedRowKey() : internalHighlightedKey.value),
+    set: (value: string | undefined) => {
+      if (options.isControlled()) {
+        options.onUpdate(value)
+        return
+      }
+      internalHighlightedKey.value = value
+      options.onUpdate(value)
+    },
+  })
+
+  function setHighlightedKey(value: string | undefined): void {
+    highlightedKey.value = value
+  }
+
+  function isHighlighted(rowKey: string): boolean {
+    if (!options.enabled()) return false
+    return highlightedKey.value === rowKey
+  }
+
+  function applyRowClickHighlight(rowKey: string): void {
+    if (!options.enabled() || !options.highlightRowOnClick()) return
+    setHighlightedKey(rowKey)
+  }
+
+  return {
+    highlightedKey,
+    setHighlightedKey,
+    isHighlighted,
+    applyRowClickHighlight,
+  }
+}

package/src/dev/vite-codemirror-deps.ts

@@ -0,0 +1,20 @@
+/**
+ * Vite optimizeDeps 扫描入口：在 dev server 启动时预构建全部 CodeMirror 语言包，
+ * 避免辅助窗口动态 import 命中过期 hash 导致 504 (Outdated Optimize Dep)。
+ */
+import 'codemirror'
+import '@codemirror/lang-cpp'
+import '@codemirror/lang-css'
+import '@codemirror/lang-go'
+import '@codemirror/lang-html'
+import '@codemirror/lang-java'
+import '@codemirror/lang-javascript'
+import '@codemirror/lang-json'
+import '@codemirror/lang-markdown'
+import '@codemirror/lang-python'
+import '@codemirror/lang-rust'
+import '@codemirror/lang-sql'
+import '@codemirror/lang-xml'
+import '@codemirror/lang-yaml'
+import '@codemirror/language'
+import '@codemirror/legacy-modes/mode/shell'

package/src/icons/custom/api.ts

@@ -0,0 +1,54 @@
+import { defineComponent, h, type PropType } from 'vue'
+
+/**
+ * Activity Bar「API」字标 — 粗圆角字重，随 currentColor 着色。
+ */
+export const ApiIcon = defineComponent({
+  name: 'ApiIcon',
+  inheritAttrs: false,
+  props: {
+    size: { type: [Number, String] as PropType<number | string>, default: 24 },
+    strokeWidth: { type: [Number, String] as PropType<number | string>, default: 2 },
+    color: { type: String, default: 'currentColor' },
+  },
+  setup(props, { attrs }) {
+    return () => {
+      const size = Number(props.size) || 24
+      const { class: attrClass, style: attrStyle, ...restAttrs } = attrs
+      const style: Record<string, string | number> = {
+        ...(typeof attrStyle === 'object' && attrStyle && !Array.isArray(attrStyle)
+          ? (attrStyle as Record<string, string | number>)
+          : {}),
+        color: props.color || 'currentColor',
+      }
+
+      return h(
+        'svg',
+        {
+          ...restAttrs,
+          xmlns: 'http://www.w3.org/2000/svg',
+          width: size,
+          height: size,
+          viewBox: '0 0 24 24',
+          fill: 'none',
+          overflow: 'visible',
+          style,
+          class: ['lucide', 'lucide-api-icon', attrClass].filter(Boolean),
+        },
+        [
+          h(
+            'text',
+            {
+              class: 'api-icon__label',
+              x: 12,
+              y: 12,
+              textAnchor: 'middle',
+              dy: '0.35em',
+            },
+            'API',
+          ),
+        ],
+      )
+    }
+  },
+})

package/src/icons/custom/clickhouse.ts

@@ -0,0 +1,52 @@
+import { defineComponent, h, type PropType } from 'vue'
+
+/**
+ * ClickHouse 官方品牌 mark（竖条 barcode 形，不含 ClickHouse 字样）。
+ * 来自 Simple Icons clickhouse.svg（CC0 1.0），已归一到 24×24。
+ * 来源：https://github.com/simple-icons/simple-icons/blob/develop/icons/clickhouse.svg
+ * 品牌色：ClickHouse 黄 #FFCC01。
+ */
+const CLICKHOUSE_MARK_PATH =
+  'M21.333 10H24v4h-2.667ZM16 1.335h2.667v21.33H16Zm-5.333 0h2.666v21.33h-2.666ZM0 22.665V1.335h2.667v21.33zm5.333-21.33H8v21.33H5.333Z'
+
+/**
+ * NiuMa ClickHouse —— 官方品牌 mark，单色填充，默认走 ClickHouse 黄并随主题明暗自动调整对比度。
+ */
+export const ClickhouseIcon = defineComponent({
+  name: 'ClickhouseIcon',
+  inheritAttrs: false,
+  props: {
+    size: { type: [Number, String] as PropType<number | string>, default: 24 },
+    strokeWidth: { type: [Number, String] as PropType<number | string>, default: 2 },
+    color: { type: String, default: 'currentColor' },
+  },
+  setup(props, { attrs }) {
+    return () => {
+      const size = Number(props.size) || 24
+      const { class: attrClass, style: attrStyle, ...restAttrs } = attrs
+      const accent = props.color && props.color !== 'currentColor' ? props.color : undefined
+      const style: Record<string, string> = {
+        ...(typeof attrStyle === 'object' && attrStyle && !Array.isArray(attrStyle)
+          ? (attrStyle as Record<string, string>)
+          : {}),
+        ...(accent ? { '--rs-icon-clickhouse-accent': accent } : {}),
+      }
+
+      return h(
+        'svg',
+        {
+          ...restAttrs,
+          xmlns: 'http://www.w3.org/2000/svg',
+          width: size,
+          height: size,
+          viewBox: '0 0 24 24',
+          fill: 'none',
+          overflow: 'visible',
+          style: Object.keys(style).length > 0 ? style : undefined,
+          class: ['lucide', 'lucide-clickhouse-icon', attrClass].filter(Boolean),
+        },
+        [h('path', { class: 'clickhouse-icon__mark', d: CLICKHOUSE_MARK_PATH })],
+      )
+    }
+  },
+})

package/src/icons/custom/dameng.ts

@@ -0,0 +1,83 @@
+import { defineComponent, h, useId, type PropType } from 'vue'
+
+/**
+ * 达梦官方品牌 mark：倾斜蓝椭圆 + 三条红色波浪带（不含「达梦数据库」字样）。
+ * 按官网 header logo 左侧图形归一到 24×24。
+ * 来源：https://www.dameng.com/static/cn/images/dm_cn/logo.png
+ * 品牌色取样：蓝 #0000D2、红 #EC1B34。
+ */
+
+/** 椭圆内三条平行 S 形波浪带（局部坐标：中心 0,0，长轴水平） */
+const DAMENG_WAVE_PATHS = [
+  'M -10.2 -2.7 C -6.5 -4.2 -3.5 -1.4 0 -2.4 C 3.5 -3.4 6.5 -1 10.2 -2.3 L 10.2 -0.9 C 6.5 0.4 3.5 -2 0 -1 C -3.5 0 -6.5 -2.8 -10.2 -1.3 Z',
+  'M -10.2 -0.4 C -6.5 -1.9 -3.5 0.9 0 -0.1 C 3.5 -1.1 6.5 1.3 10.2 0 L 10.2 1.4 C 6.5 2.7 3.5 0.3 0 1.3 C -3.5 2.3 -6.5 -0.5 -10.2 1 Z',
+  'M -10.2 1.9 C -6.5 0.4 -3.5 3.2 0 2.2 C 3.5 1.2 6.5 3.6 10.2 2.3 L 10.2 3.7 C 6.5 5 3.5 2.6 0 3.6 C -3.5 4.6 -6.5 1.8 -10.2 3.3 Z',
+] as const
+
+/**
+ * NiuMa Dameng —— 官方品牌 mark，双色填充，默认走官网蓝/红并随主题明暗调整。
+ */
+export const DamengIcon = defineComponent({
+  name: 'DamengIcon',
+  inheritAttrs: false,
+  props: {
+    size: { type: [Number, String] as PropType<number | string>, default: 24 },
+    strokeWidth: { type: [Number, String] as PropType<number | string>, default: 2 },
+    color: { type: String, default: 'currentColor' },
+  },
+  setup(props, { attrs }) {
+    const clipId = useId()
+
+    return () => {
+      const size = Number(props.size) || 24
+      const { class: attrClass, style: attrStyle, ...restAttrs } = attrs
+      const accent = props.color && props.color !== 'currentColor' ? props.color : undefined
+      const style: Record<string, string> = {
+        ...(typeof attrStyle === 'object' && attrStyle && !Array.isArray(attrStyle)
+          ? (attrStyle as Record<string, string>)
+          : {}),
+        ...(accent ? { '--rs-icon-dameng-accent': accent } : {}),
+      }
+
+      return h(
+        'svg',
+        {
+          ...restAttrs,
+          xmlns: 'http://www.w3.org/2000/svg',
+          width: size,
+          height: size,
+          viewBox: '0 0 24 24',
+          fill: 'none',
+          overflow: 'visible',
+          style: Object.keys(style).length > 0 ? style : undefined,
+          class: ['lucide', 'lucide-dameng-icon', attrClass].filter(Boolean),
+        },
+        [
+          h('defs', [
+            h('clipPath', { id: clipId }, [
+              h('ellipse', { cx: 0, cy: 0, rx: 10.2, ry: 6.55 }),
+            ]),
+          ]),
+          h(
+            'g',
+            { transform: 'translate(12 12) rotate(-42)' },
+            [
+              h('ellipse', {
+                class: 'dameng-icon__oval',
+                cx: 0,
+                cy: 0,
+                rx: 10.2,
+                ry: 6.55,
+              }),
+              h(
+                'g',
+                { class: 'dameng-icon__waves', 'clip-path': `url(#${clipId})` },
+                DAMENG_WAVE_PATHS.map((d) => h('path', { class: 'dameng-icon__wave', d })),
+              ),
+            ],
+          ),
+        ],
+      )
+    }
+  },
+})

package/src/icons/custom/ftp.ts

@@ -0,0 +1,61 @@
+import { defineComponent, h, type PropType } from 'vue'
+
+/** Lucide folder 轮廓 */
+const FOLDER_PATH =
+  'M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z'
+
+/**
+ * NiuMa FTP — 橙色实心文件夹 + 居中白色「FTP」，避免轮廓与色块半覆盖。
+ */
+export const FtpIcon = defineComponent({
+  name: 'FtpIcon',
+  inheritAttrs: false,
+  props: {
+    size: { type: [Number, String] as PropType<number | string>, default: 24 },
+    strokeWidth: { type: [Number, String] as PropType<number | string>, default: 2 },
+    color: { type: String, default: 'currentColor' },
+  },
+  setup(props, { attrs }) {
+    return () => {
+      const size = Number(props.size) || 24
+      const { class: attrClass, style: attrStyle, ...restAttrs } = attrs
+      const accent =
+        props.color && props.color !== 'currentColor' ? props.color : undefined
+      const style: Record<string, string> = {
+        ...(typeof attrStyle === 'object' && attrStyle && !Array.isArray(attrStyle)
+          ? (attrStyle as Record<string, string>)
+          : {}),
+        ...(accent ? { '--rs-icon-ftp-accent': accent } : {}),
+      }
+
+      return h(
+        'svg',
+        {
+          ...restAttrs,
+          xmlns: 'http://www.w3.org/2000/svg',
+          width: size,
+          height: size,
+          viewBox: '0 0 24 24',
+          fill: 'none',
+          overflow: 'visible',
+          style: Object.keys(style).length > 0 ? style : undefined,
+          class: ['lucide', 'lucide-ftp-icon', attrClass].filter(Boolean),
+        },
+        [
+          h('path', { class: 'ftp-icon__folder', d: FOLDER_PATH }),
+          h(
+            'text',
+            {
+              class: 'ftp-icon__label',
+              x: 12,
+              y: 15,
+              textAnchor: 'middle',
+              dy: '0.35em',
+            },
+            'FTP',
+          ),
+        ],
+      )
+    }
+  },
+})

package/src/icons/custom/kingbase.ts

@@ -0,0 +1,52 @@
+import { defineComponent, h, type PropType } from 'vue'
+
+/**
+ * 人大金仓 / KINGBASE 官方品牌 lettermark（stylized「K」：竖干中段向左尖角箭头）。
+ * 路径从官网 LOGO 组合包 AI 源文件（英文横排红标）中拆出 K 字形并归一到 24×24。
+ * 来源：https://www.kingbase.com.cn/about/about.html → LOGO组合包下载
+ * 品牌色取样官网 header logo：#C9151E（政务红）。
+ */
+const KINGBASE_MARK_PATH =
+  'M22.5 6.301L22.5 1.973L10.629 7.641L10.629 1.973L6.374 1.973L6.374 9.673L1.5 12L6.374 14.32L6.374 22.027L10.629 22.027L10.629 16.344L22.5 21.994L22.5 17.665L10.629 12.003L10.629 11.997Z'
+
+/**
+ * NiuMa Kingbase —— 官方品牌 mark，单色填充，默认走政务红并随主题明暗自动调整对比度。
+ */
+export const KingbaseIcon = defineComponent({
+  name: 'KingbaseIcon',
+  inheritAttrs: false,
+  props: {
+    size: { type: [Number, String] as PropType<number | string>, default: 24 },
+    strokeWidth: { type: [Number, String] as PropType<number | string>, default: 2 },
+    color: { type: String, default: 'currentColor' },
+  },
+  setup(props, { attrs }) {
+    return () => {
+      const size = Number(props.size) || 24
+      const { class: attrClass, style: attrStyle, ...restAttrs } = attrs
+      const accent = props.color && props.color !== 'currentColor' ? props.color : undefined
+      const style: Record<string, string> = {
+        ...(typeof attrStyle === 'object' && attrStyle && !Array.isArray(attrStyle)
+          ? (attrStyle as Record<string, string>)
+          : {}),
+        ...(accent ? { '--rs-icon-kingbase-accent': accent } : {}),
+      }
+
+      return h(
+        'svg',
+        {
+          ...restAttrs,
+          xmlns: 'http://www.w3.org/2000/svg',
+          width: size,
+          height: size,
+          viewBox: '0 0 24 24',
+          fill: 'none',
+          overflow: 'visible',
+          style: Object.keys(style).length > 0 ? style : undefined,
+          class: ['lucide', 'lucide-kingbase-icon', attrClass].filter(Boolean),
+        },
+        [h('path', { class: 'kingbase-icon__mark', d: KINGBASE_MARK_PATH })],
+      )
+    }
+  },
+})