@robot-admin/naive-ui-components 0.6.19 → 0.6.21

package/dist/C_SplitPane2.js.map

@@ -1 +1 @@
-{"version":3,"file":"C_SplitPane2.js","names":["direction","disabled","showCollapseButton","collapsible"],"sources":["../src/components/C_SplitPane/composables/useSplitResize.ts","../src/components/C_SplitPane/index.vue","../src/components/C_SplitPane/index.vue","../src/components/C_SplitPane/index.vue"],"sourcesContent":["import { ref, computed, onUnmounted } from \"vue\";\r\nimport type { Ref } from \"vue\";\r\nimport type { CollapseTarget, SplitDirection } from \"../types\";\r\n\r\ninterface UseSplitResizeOptions {\r\n  /** 容器引用 */\r\n  containerRef: Ref<HTMLElement | null>;\r\n  /** 分割方向 */\r\n  direction: Ref<SplitDirection>;\r\n  /** 首面板默认大小（百分比） */\r\n  defaultSize: number;\r\n  /** 首面板最小大小（百分比） */\r\n  minSize: number;\r\n  /** 首面板最大大小（百分比） */\r\n  maxSize: number;\r\n  /** 是否禁用 */\r\n  disabled: Ref<boolean>;\r\n  /** 是否可折叠 */\r\n  collapsible: Ref<boolean>;\r\n  /** 键盘微调步长（百分比） */\r\n  step: number;\r\n  /** resize 回调 */\r\n  onResize?: (firstSize: number, secondSize: number) => void;\r\n  /** 折叠回调 */\r\n  onCollapse?: (target: CollapseTarget) => void;\r\n  /** 展开回调 */\r\n  onExpand?: (target: CollapseTarget) => void;\r\n  /** 拖拽开始回调 */\r\n  onDragStart?: (size: number) => void;\r\n  /** 拖拽结束回调 */\r\n  onDragEnd?: (size: number) => void;\r\n}\r\n\r\n/**\r\n * 分割面板拖拽调整逻辑\r\n */\r\nexport function useSplitResize(options: UseSplitResizeOptions) {\r\n  const {\r\n    containerRef,\r\n    direction,\r\n    defaultSize,\r\n    minSize,\r\n    maxSize,\r\n    disabled,\r\n    collapsible,\r\n    step,\r\n    onResize,\r\n    onCollapse,\r\n    onExpand,\r\n    onDragStart,\r\n    onDragEnd,\r\n  } = options;\r\n\r\n  /** 首面板当前大小（百分比） */\r\n  const panelSize = ref(defaultSize);\r\n  /** 是否正在拖拽 */\r\n  const isDragging = ref(false);\r\n  /** 折叠状态 */\r\n  const collapsedTarget = ref<CollapseTarget | null>(null);\r\n  /** 折叠前记住的面板大小 */\r\n  const sizeBeforeCollapse = ref(defaultSize);\r\n\r\n  /** 首面板是否折叠 */\r\n  const isFirstCollapsed = computed(() => collapsedTarget.value === \"first\");\r\n  /** 第二面板是否折叠 */\r\n  const isSecondCollapsed = computed(() => collapsedTarget.value === \"second\");\r\n\r\n  /**\r\n   * 将大小限制在 min/max 范围内\r\n   */\r\n  const clampSize = (size: number): number => {\r\n    return Math.min(maxSize, Math.max(minSize, size));\r\n  };\r\n\r\n  /**\r\n   * 获取容器在分割方向上的总长度（px）\r\n   */\r\n  const getContainerLength = (): number => {\r\n    const container = containerRef.value;\r\n    if (!container) return 0;\r\n    return direction.value === \"horizontal\"\r\n      ? container.offsetWidth\r\n      : container.offsetHeight;\r\n  };\r\n\r\n  /**\r\n   * 获取容器在分割方向上的起始坐标\r\n   */\r\n  const getContainerStart = (): number => {\r\n    const container = containerRef.value;\r\n    if (!container) return 0;\r\n    const rect = container.getBoundingClientRect();\r\n    return direction.value === \"horizontal\" ? rect.left : rect.top;\r\n  };\r\n\r\n  /**\r\n   * 根据鼠标/触摸位置计算面板大小（百分比）\r\n   */\r\n  const calcSizeFromPosition = (clientPos: number): number => {\r\n    const containerLength = getContainerLength();\r\n    if (containerLength === 0) return panelSize.value;\r\n\r\n    const containerStart = getContainerStart();\r\n    const offset = clientPos - containerStart;\r\n    const percentage = (offset / containerLength) * 100;\r\n\r\n    return clampSize(percentage);\r\n  };\r\n\r\n  /**\r\n   * 获取事件的位置坐标\r\n   */\r\n  const getClientPos = (e: MouseEvent | TouchEvent): number => {\r\n    if (e instanceof TouchEvent) {\r\n      return direction.value === \"horizontal\"\r\n        ? e.touches[0].clientX\r\n        : e.touches[0].clientY;\r\n    }\r\n    return direction.value === \"horizontal\" ? e.clientX : e.clientY;\r\n  };\r\n\r\n  /**\r\n   * 更新面板大小\r\n   */\r\n  const updateSize = (newSize: number) => {\r\n    const clamped = clampSize(newSize);\r\n    panelSize.value = clamped;\r\n    onResize?.(clamped, 100 - clamped);\r\n  };\r\n\r\n  /* ─── 拖拽逻辑 ──────────────────────────────── */\r\n  const handleMouseMove = (e: MouseEvent | TouchEvent) => {\r\n    if (!isDragging.value || disabled.value) return;\r\n\r\n    e.preventDefault();\r\n    const pos = getClientPos(e);\r\n    const newSize = calcSizeFromPosition(pos);\r\n\r\n    /* 拖拽过程中取消折叠状态 */\r\n    if (collapsedTarget.value) {\r\n      collapsedTarget.value = null;\r\n    }\r\n    updateSize(newSize);\r\n  };\r\n\r\n  const handleMouseUp = () => {\r\n    if (!isDragging.value) return;\r\n\r\n    isDragging.value = false;\r\n    document.body.style.cursor = \"\";\r\n    document.body.style.userSelect = \"\";\r\n\r\n    onDragEnd?.(panelSize.value);\r\n\r\n    document.removeEventListener(\"mousemove\", handleMouseMove);\r\n    document.removeEventListener(\"mouseup\", handleMouseUp);\r\n    document.removeEventListener(\"touchmove\", handleMouseMove);\r\n    document.removeEventListener(\"touchend\", handleMouseUp);\r\n  };\r\n\r\n  const handleMouseDown = (e: MouseEvent | TouchEvent) => {\r\n    if (disabled.value) return;\r\n\r\n    e.preventDefault();\r\n    /* preventDefault 会阻止默认聚焦行为，需手动 focus 以支持键盘控制 */\r\n    (e.currentTarget as HTMLElement)?.focus();\r\n    isDragging.value = true;\r\n\r\n    document.body.style.cursor =\r\n      direction.value === \"horizontal\" ? \"col-resize\" : \"row-resize\";\r\n    document.body.style.userSelect = \"none\";\r\n\r\n    onDragStart?.(panelSize.value);\r\n\r\n    document.addEventListener(\"mousemove\", handleMouseMove);\r\n    document.addEventListener(\"mouseup\", handleMouseUp);\r\n    document.addEventListener(\"touchmove\", handleMouseMove, { passive: false });\r\n    document.addEventListener(\"touchend\", handleMouseUp);\r\n  };\r\n\r\n  /* ─── 双击折叠 ──────────────────────────────── */\r\n  const handleDoubleClick = () => {\r\n    if (disabled.value || !collapsible.value) return;\r\n    toggle(\"first\");\r\n  };\r\n\r\n  /* ─── 折叠 / 展开 ───────────────────────────── */\r\n  const collapse = (target: CollapseTarget = \"first\") => {\r\n    if (!collapsible.value || collapsedTarget.value === target) return;\r\n\r\n    /* 记住折叠前的大小 */\r\n    if (!collapsedTarget.value) {\r\n      sizeBeforeCollapse.value = panelSize.value;\r\n    }\r\n\r\n    collapsedTarget.value = target;\r\n\r\n    if (target === \"first\") {\r\n      panelSize.value = 0;\r\n    } else {\r\n      panelSize.value = 100;\r\n    }\r\n\r\n    onCollapse?.(target);\r\n    onResize?.(panelSize.value, 100 - panelSize.value);\r\n  };\r\n\r\n  const expand = () => {\r\n    if (!collapsedTarget.value) return;\r\n\r\n    const target = collapsedTarget.value;\r\n    collapsedTarget.value = null;\r\n    panelSize.value = sizeBeforeCollapse.value;\r\n\r\n    onExpand?.(target);\r\n    onResize?.(panelSize.value, 100 - panelSize.value);\r\n  };\r\n\r\n  const toggle = (target: CollapseTarget = \"first\") => {\r\n    if (collapsedTarget.value) {\r\n      expand();\r\n    } else {\r\n      collapse(target);\r\n    }\r\n  };\r\n\r\n  /* ─── 键盘微调 ──────────────────────────────── */\r\n  /**\r\n   * 根据按键获取增量\r\n   */\r\n  const getKeyDelta = (key: string, isHorizontal: boolean): number | null => {\r\n    const keyMap: Record<string, number | null> = {\r\n      ArrowLeft: isHorizontal ? -step : 0,\r\n      ArrowRight: isHorizontal ? step : 0,\r\n      ArrowUp: !isHorizontal ? -step : 0,\r\n      ArrowDown: !isHorizontal ? step : 0,\r\n    };\r\n    return keyMap[key] ?? null;\r\n  };\r\n\r\n  const handleKeyDown = (e: KeyboardEvent) => {\r\n    if (disabled.value) return;\r\n\r\n    /* Home / End 直接跳到极值 */\r\n    if (e.key === \"Home\") {\r\n      updateSize(minSize);\r\n      e.preventDefault();\r\n      return;\r\n    }\r\n    if (e.key === \"End\") {\r\n      updateSize(maxSize);\r\n      e.preventDefault();\r\n      return;\r\n    }\r\n\r\n    const delta = getKeyDelta(e.key, direction.value === \"horizontal\");\r\n    if (delta === null || delta === 0) return;\r\n\r\n    e.preventDefault();\r\n    if (collapsedTarget.value) collapsedTarget.value = null;\r\n    updateSize(panelSize.value + delta);\r\n  };\r\n\r\n  /* ─── 重置 / 查询 ───────────────────────────── */\r\n  const resetSize = () => {\r\n    collapsedTarget.value = null;\r\n    panelSize.value = defaultSize;\r\n    onResize?.(defaultSize, 100 - defaultSize);\r\n  };\r\n\r\n  const setSize = (size: number) => {\r\n    collapsedTarget.value = null;\r\n    updateSize(size);\r\n  };\r\n\r\n  const getPanelInfo = () => ({\r\n    first: {\r\n      size: panelSize.value,\r\n      collapsed: isFirstCollapsed.value,\r\n    },\r\n    second: {\r\n      size: 100 - panelSize.value,\r\n      collapsed: isSecondCollapsed.value,\r\n    },\r\n  });\r\n\r\n  /* 清理 */\r\n  onUnmounted(() => {\r\n    document.removeEventListener(\"mousemove\", handleMouseMove);\r\n    document.removeEventListener(\"mouseup\", handleMouseUp);\r\n    document.removeEventListener(\"touchmove\", handleMouseMove);\r\n    document.removeEventListener(\"touchend\", handleMouseUp);\r\n  });\r\n\r\n  return {\r\n    panelSize,\r\n    isDragging,\r\n    collapsedTarget,\r\n    isFirstCollapsed,\r\n    isSecondCollapsed,\r\n    handleMouseDown,\r\n    handleDoubleClick,\r\n    handleKeyDown,\r\n    collapse,\r\n    expand,\r\n    toggle,\r\n    resetSize,\r\n    setSize,\r\n    getPanelInfo,\r\n  };\r\n}\r\n","/* unplugin-vue-components disabled */<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2025-06-16\n * @Description: 分割面板组件\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n  <div\n    ref=\"containerRef\"\n    class=\"c-split-pane\"\n    :class=\"[\n      `c-split-pane--${direction}`,\n      {\n        'c-split-pane--dragging': isDragging,\n        'c-split-pane--disabled': disabled,\n        'c-split-pane--collapsed-first': isFirstCollapsed,\n        'c-split-pane--collapsed-second': isSecondCollapsed,\n      },\n    ]\"\n  >\n    <!-- 首面板 -->\n    <div class=\"split-panel split-panel--first\" :style=\"firstPanelStyle\">\n      <div class=\"split-panel__content\">\n        <slot name=\"first\" />\n      </div>\n    </div>\n\n    <!-- 分割线手柄 -->\n    <div\n      class=\"split-gutter\"\n      :style=\"gutterStyle\"\n      role=\"separator\"\n      :aria-orientation=\"direction === 'horizontal' ? 'vertical' : 'horizontal'\"\n      :aria-valuenow=\"Math.round(panelSize)\"\n      :aria-valuemin=\"0\"\n      :aria-valuemax=\"100\"\n      tabindex=\"0\"\n      @mousedown=\"handleMouseDown\"\n      @touchstart.prevent=\"handleMouseDown\"\n      @dblclick=\"handleDoubleClick\"\n      @keydown=\"handleKeyDown\"\n    >\n      <div class=\"split-gutter__visual\">\n        <div class=\"split-gutter__dots\">\n          <span v-for=\"i in 3\" :key=\"i\" class=\"split-gutter__dot\" />\n        </div>\n      </div>\n\n      <!-- 折叠按钮 -->\n      <template v-if=\"showCollapseButton && collapsible\">\n        <button\n          class=\"split-gutter__collapse-btn split-gutter__collapse-btn--first\"\n          :title=\"isFirstCollapsed ? '展开首面板' : '折叠首面板'\"\n          @click.stop=\"toggle('first')\"\n          @mousedown.stop\n        >\n          <C_Icon :name=\"collapseFirstIcon\" :size=\"16\" color=\"currentColor\" />\n        </button>\n        <button\n          class=\"split-gutter__collapse-btn split-gutter__collapse-btn--second\"\n          :title=\"isSecondCollapsed ? '展开第二面板' : '折叠第二面板'\"\n          @click.stop=\"toggle('second')\"\n          @mousedown.stop\n        >\n          <C_Icon :name=\"collapseSecondIcon\" :size=\"16\" color=\"currentColor\" />\n        </button>\n      </template>\n    </div>\n\n    <!-- 第二面板 -->\n    <div class=\"split-panel split-panel--second\" :style=\"secondPanelStyle\">\n      <div class=\"split-panel__content\">\n        <slot name=\"second\" />\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, computed, toRef } from \"vue\";\nimport C_Icon from \"../C_Icon/index.vue\";\nimport { useSplitResize } from \"./composables/useSplitResize\";\nimport type { CollapseTarget, SplitDirection, SplitPaneExpose } from \"./types\";\n\ndefineOptions({ name: \"C_SplitPane\" });\n\ninterface Props {\n  /** 分割方向 */\n  direction?: SplitDirection;\n  /** 首面板默认大小（百分比 0-100） */\n  defaultSize?: number;\n  /** 首面板最小大小（百分比 0-100） */\n  minSize?: number;\n  /** 首面板最大大小（百分比 0-100） */\n  maxSize?: number;\n  /** 是否禁用拖拽调整 */\n  disabled?: boolean;\n  /** 是否可折叠 */\n  collapsible?: boolean;\n  /** 是否显示折叠按钮 */\n  showCollapseButton?: boolean;\n  /** 分割线宽度（px） */\n  gutterSize?: number;\n  /** 键盘微调步长（百分比） */\n  step?: number;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  direction: \"horizontal\",\n  defaultSize: 50,\n  minSize: 0,\n  maxSize: 100,\n  disabled: false,\n  collapsible: true,\n  showCollapseButton: true,\n  gutterSize: 6,\n  step: 2,\n});\n\nconst emit = defineEmits<{\n  resize: [firstSize: number, secondSize: number];\n  collapse: [target: CollapseTarget];\n  expand: [target: CollapseTarget];\n  \"drag-start\": [size: number];\n  \"drag-end\": [size: number];\n}>();\n\nconst containerRef = ref<HTMLElement | null>(null);\n\nconst {\n  panelSize,\n  isDragging,\n  isFirstCollapsed,\n  isSecondCollapsed,\n  handleMouseDown,\n  handleDoubleClick,\n  handleKeyDown,\n  collapse,\n  expand,\n  toggle,\n  resetSize,\n  setSize,\n  getPanelInfo,\n} = useSplitResize({\n  containerRef,\n  direction: toRef(props, \"direction\"),\n  defaultSize: props.defaultSize,\n  minSize: props.minSize,\n  maxSize: props.maxSize,\n  disabled: toRef(props, \"disabled\"),\n  collapsible: toRef(props, \"collapsible\"),\n  step: props.step,\n  onResize: (first, second) => emit(\"resize\", first, second),\n  onCollapse: (target) => emit(\"collapse\", target),\n  onExpand: (target) => emit(\"expand\", target),\n  onDragStart: (size) => emit(\"drag-start\", size),\n  onDragEnd: (size) => emit(\"drag-end\", size),\n});\n\n/* ─── 计算样式 ──────────────────────────────── */\nconst firstPanelStyle = computed(() => {\n  const sizeValue = `calc(${panelSize.value}% - ${props.gutterSize / 2}px)`;\n  return props.direction === \"horizontal\"\n    ? { width: sizeValue }\n    : { height: sizeValue };\n});\n\nconst secondPanelStyle = computed(() => {\n  const sizeValue = `calc(${100 - panelSize.value}% - ${props.gutterSize / 2}px)`;\n  return props.direction === \"horizontal\"\n    ? { width: sizeValue }\n    : { height: sizeValue };\n});\n\nconst gutterStyle = computed(() => {\n  return props.direction === \"horizontal\"\n    ? { width: `${props.gutterSize}px` }\n    : { height: `${props.gutterSize}px` };\n});\n\n/* ─── 折叠按钮图标 ──────────────────────────── */\nconst collapseFirstIcon = computed(() => {\n  if (props.direction === \"horizontal\") {\n    return isFirstCollapsed.value ? \"mdi:chevron-right\" : \"mdi:chevron-left\";\n  }\n  return isFirstCollapsed.value ? \"mdi:chevron-down\" : \"mdi:chevron-up\";\n});\n\nconst collapseSecondIcon = computed(() => {\n  if (props.direction === \"horizontal\") {\n    return isSecondCollapsed.value ? \"mdi:chevron-left\" : \"mdi:chevron-right\";\n  }\n  return isSecondCollapsed.value ? \"mdi:chevron-up\" : \"mdi:chevron-down\";\n});\n\n/* ─── 暴露方法 ──────────────────────────────── */\ndefineExpose<SplitPaneExpose>({\n  collapse,\n  expand,\n  toggle,\n  resetSize,\n  getPanelInfo,\n  setSize,\n});\n</script>\n\n<style lang=\"scss\" scoped>\n@use \"./index.scss\";\n</style>\n","/* unplugin-vue-components disabled */<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2025-06-16\n * @Description: 分割面板组件\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n  <div\n    ref=\"containerRef\"\n    class=\"c-split-pane\"\n    :class=\"[\n      `c-split-pane--${direction}`,\n      {\n        'c-split-pane--dragging': isDragging,\n        'c-split-pane--disabled': disabled,\n        'c-split-pane--collapsed-first': isFirstCollapsed,\n        'c-split-pane--collapsed-second': isSecondCollapsed,\n      },\n    ]\"\n  >\n    <!-- 首面板 -->\n    <div class=\"split-panel split-panel--first\" :style=\"firstPanelStyle\">\n      <div class=\"split-panel__content\">\n        <slot name=\"first\" />\n      </div>\n    </div>\n\n    <!-- 分割线手柄 -->\n    <div\n      class=\"split-gutter\"\n      :style=\"gutterStyle\"\n      role=\"separator\"\n      :aria-orientation=\"direction === 'horizontal' ? 'vertical' : 'horizontal'\"\n      :aria-valuenow=\"Math.round(panelSize)\"\n      :aria-valuemin=\"0\"\n      :aria-valuemax=\"100\"\n      tabindex=\"0\"\n      @mousedown=\"handleMouseDown\"\n      @touchstart.prevent=\"handleMouseDown\"\n      @dblclick=\"handleDoubleClick\"\n      @keydown=\"handleKeyDown\"\n    >\n      <div class=\"split-gutter__visual\">\n        <div class=\"split-gutter__dots\">\n          <span v-for=\"i in 3\" :key=\"i\" class=\"split-gutter__dot\" />\n        </div>\n      </div>\n\n      <!-- 折叠按钮 -->\n      <template v-if=\"showCollapseButton && collapsible\">\n        <button\n          class=\"split-gutter__collapse-btn split-gutter__collapse-btn--first\"\n          :title=\"isFirstCollapsed ? '展开首面板' : '折叠首面板'\"\n          @click.stop=\"toggle('first')\"\n          @mousedown.stop\n        >\n          <C_Icon :name=\"collapseFirstIcon\" :size=\"16\" color=\"currentColor\" />\n        </button>\n        <button\n          class=\"split-gutter__collapse-btn split-gutter__collapse-btn--second\"\n          :title=\"isSecondCollapsed ? '展开第二面板' : '折叠第二面板'\"\n          @click.stop=\"toggle('second')\"\n          @mousedown.stop\n        >\n          <C_Icon :name=\"collapseSecondIcon\" :size=\"16\" color=\"currentColor\" />\n        </button>\n      </template>\n    </div>\n\n    <!-- 第二面板 -->\n    <div class=\"split-panel split-panel--second\" :style=\"secondPanelStyle\">\n      <div class=\"split-panel__content\">\n        <slot name=\"second\" />\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, computed, toRef } from \"vue\";\nimport C_Icon from \"../C_Icon/index.vue\";\nimport { useSplitResize } from \"./composables/useSplitResize\";\nimport type { CollapseTarget, SplitDirection, SplitPaneExpose } from \"./types\";\n\ndefineOptions({ name: \"C_SplitPane\" });\n\ninterface Props {\n  /** 分割方向 */\n  direction?: SplitDirection;\n  /** 首面板默认大小（百分比 0-100） */\n  defaultSize?: number;\n  /** 首面板最小大小（百分比 0-100） */\n  minSize?: number;\n  /** 首面板最大大小（百分比 0-100） */\n  maxSize?: number;\n  /** 是否禁用拖拽调整 */\n  disabled?: boolean;\n  /** 是否可折叠 */\n  collapsible?: boolean;\n  /** 是否显示折叠按钮 */\n  showCollapseButton?: boolean;\n  /** 分割线宽度（px） */\n  gutterSize?: number;\n  /** 键盘微调步长（百分比） */\n  step?: number;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  direction: \"horizontal\",\n  defaultSize: 50,\n  minSize: 0,\n  maxSize: 100,\n  disabled: false,\n  collapsible: true,\n  showCollapseButton: true,\n  gutterSize: 6,\n  step: 2,\n});\n\nconst emit = defineEmits<{\n  resize: [firstSize: number, secondSize: number];\n  collapse: [target: CollapseTarget];\n  expand: [target: CollapseTarget];\n  \"drag-start\": [size: number];\n  \"drag-end\": [size: number];\n}>();\n\nconst containerRef = ref<HTMLElement | null>(null);\n\nconst {\n  panelSize,\n  isDragging,\n  isFirstCollapsed,\n  isSecondCollapsed,\n  handleMouseDown,\n  handleDoubleClick,\n  handleKeyDown,\n  collapse,\n  expand,\n  toggle,\n  resetSize,\n  setSize,\n  getPanelInfo,\n} = useSplitResize({\n  containerRef,\n  direction: toRef(props, \"direction\"),\n  defaultSize: props.defaultSize,\n  minSize: props.minSize,\n  maxSize: props.maxSize,\n  disabled: toRef(props, \"disabled\"),\n  collapsible: toRef(props, \"collapsible\"),\n  step: props.step,\n  onResize: (first, second) => emit(\"resize\", first, second),\n  onCollapse: (target) => emit(\"collapse\", target),\n  onExpand: (target) => emit(\"expand\", target),\n  onDragStart: (size) => emit(\"drag-start\", size),\n  onDragEnd: (size) => emit(\"drag-end\", size),\n});\n\n/* ─── 计算样式 ──────────────────────────────── */\nconst firstPanelStyle = computed(() => {\n  const sizeValue = `calc(${panelSize.value}% - ${props.gutterSize / 2}px)`;\n  return props.direction === \"horizontal\"\n    ? { width: sizeValue }\n    : { height: sizeValue };\n});\n\nconst secondPanelStyle = computed(() => {\n  const sizeValue = `calc(${100 - panelSize.value}% - ${props.gutterSize / 2}px)`;\n  return props.direction === \"horizontal\"\n    ? { width: sizeValue }\n    : { height: sizeValue };\n});\n\nconst gutterStyle = computed(() => {\n  return props.direction === \"horizontal\"\n    ? { width: `${props.gutterSize}px` }\n    : { height: `${props.gutterSize}px` };\n});\n\n/* ─── 折叠按钮图标 ──────────────────────────── */\nconst collapseFirstIcon = computed(() => {\n  if (props.direction === \"horizontal\") {\n    return isFirstCollapsed.value ? \"mdi:chevron-right\" : \"mdi:chevron-left\";\n  }\n  return isFirstCollapsed.value ? \"mdi:chevron-down\" : \"mdi:chevron-up\";\n});\n\nconst collapseSecondIcon = computed(() => {\n  if (props.direction === \"horizontal\") {\n    return isSecondCollapsed.value ? \"mdi:chevron-left\" : \"mdi:chevron-right\";\n  }\n  return isSecondCollapsed.value ? \"mdi:chevron-up\" : \"mdi:chevron-down\";\n});\n\n/* ─── 暴露方法 ──────────────────────────────── */\ndefineExpose<SplitPaneExpose>({\n  collapse,\n  expand,\n  toggle,\n  resetSize,\n  getPanelInfo,\n  setSize,\n});\n</script>\n\n<style lang=\"scss\" scoped>\n@use \"./index.scss\";\n</style>\n","<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2025-06-16\n * @Description: 分割面板组件\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n  <div\n    ref=\"containerRef\"\n    class=\"c-split-pane\"\n    :class=\"[\n      `c-split-pane--${direction}`,\n      {\n        'c-split-pane--dragging': isDragging,\n        'c-split-pane--disabled': disabled,\n        'c-split-pane--collapsed-first': isFirstCollapsed,\n        'c-split-pane--collapsed-second': isSecondCollapsed,\n      },\n    ]\"\n  >\n    <!-- 首面板 -->\n    <div class=\"split-panel split-panel--first\" :style=\"firstPanelStyle\">\n      <div class=\"split-panel__content\">\n        <slot name=\"first\" />\n      </div>\n    </div>\n\n    <!-- 分割线手柄 -->\n    <div\n      class=\"split-gutter\"\n      :style=\"gutterStyle\"\n      role=\"separator\"\n      :aria-orientation=\"direction === 'horizontal' ? 'vertical' : 'horizontal'\"\n      :aria-valuenow=\"Math.round(panelSize)\"\n      :aria-valuemin=\"0\"\n      :aria-valuemax=\"100\"\n      tabindex=\"0\"\n      @mousedown=\"handleMouseDown\"\n      @touchstart.prevent=\"handleMouseDown\"\n      @dblclick=\"handleDoubleClick\"\n      @keydown=\"handleKeyDown\"\n    >\n      <div class=\"split-gutter__visual\">\n        <div class=\"split-gutter__dots\">\n          <span v-for=\"i in 3\" :key=\"i\" class=\"split-gutter__dot\" />\n        </div>\n      </div>\n\n      <!-- 折叠按钮 -->\n      <template v-if=\"showCollapseButton && collapsible\">\n        <button\n          class=\"split-gutter__collapse-btn split-gutter__collapse-btn--first\"\n          :title=\"isFirstCollapsed ? '展开首面板' : '折叠首面板'\"\n          @click.stop=\"toggle('first')\"\n          @mousedown.stop\n        >\n          <C_Icon :name=\"collapseFirstIcon\" :size=\"16\" color=\"currentColor\" />\n        </button>\n        <button\n          class=\"split-gutter__collapse-btn split-gutter__collapse-btn--second\"\n          :title=\"isSecondCollapsed ? '展开第二面板' : '折叠第二面板'\"\n          @click.stop=\"toggle('second')\"\n          @mousedown.stop\n        >\n          <C_Icon :name=\"collapseSecondIcon\" :size=\"16\" color=\"currentColor\" />\n        </button>\n      </template>\n    </div>\n\n    <!-- 第二面板 -->\n    <div class=\"split-panel split-panel--second\" :style=\"secondPanelStyle\">\n      <div class=\"split-panel__content\">\n        <slot name=\"second\" />\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { ref, computed, toRef } from \"vue\";\nimport C_Icon from \"../C_Icon/index.vue\";\nimport { useSplitResize } from \"./composables/useSplitResize\";\nimport type { CollapseTarget, SplitDirection, SplitPaneExpose } from \"./types\";\n\ndefineOptions({ name: \"C_SplitPane\" });\n\ninterface Props {\n  /** 分割方向 */\n  direction?: SplitDirection;\n  /** 首面板默认大小（百分比 0-100） */\n  defaultSize?: number;\n  /** 首面板最小大小（百分比 0-100） */\n  minSize?: number;\n  /** 首面板最大大小（百分比 0-100） */\n  maxSize?: number;\n  /** 是否禁用拖拽调整 */\n  disabled?: boolean;\n  /** 是否可折叠 */\n  collapsible?: boolean;\n  /** 是否显示折叠按钮 */\n  showCollapseButton?: boolean;\n  /** 分割线宽度（px） */\n  gutterSize?: number;\n  /** 键盘微调步长（百分比） */\n  step?: number;\n}\n\nconst props = withDefaults(defineProps<Props>(), {\n  direction: \"horizontal\",\n  defaultSize: 50,\n  minSize: 0,\n  maxSize: 100,\n  disabled: false,\n  collapsible: true,\n  showCollapseButton: true,\n  gutterSize: 6,\n  step: 2,\n});\n\nconst emit = defineEmits<{\n  resize: [firstSize: number, secondSize: number];\n  collapse: [target: CollapseTarget];\n  expand: [target: CollapseTarget];\n  \"drag-start\": [size: number];\n  \"drag-end\": [size: number];\n}>();\n\nconst containerRef = ref<HTMLElement | null>(null);\n\nconst {\n  panelSize,\n  isDragging,\n  isFirstCollapsed,\n  isSecondCollapsed,\n  handleMouseDown,\n  handleDoubleClick,\n  handleKeyDown,\n  collapse,\n  expand,\n  toggle,\n  resetSize,\n  setSize,\n  getPanelInfo,\n} = useSplitResize({\n  containerRef,\n  direction: toRef(props, \"direction\"),\n  defaultSize: props.defaultSize,\n  minSize: props.minSize,\n  maxSize: props.maxSize,\n  disabled: toRef(props, \"disabled\"),\n  collapsible: toRef(props, \"collapsible\"),\n  step: props.step,\n  onResize: (first, second) => emit(\"resize\", first, second),\n  onCollapse: (target) => emit(\"collapse\", target),\n  onExpand: (target) => emit(\"expand\", target),\n  onDragStart: (size) => emit(\"drag-start\", size),\n  onDragEnd: (size) => emit(\"drag-end\", size),\n});\n\n/* ─── 计算样式 ──────────────────────────────── */\nconst firstPanelStyle = computed(() => {\n  const sizeValue = `calc(${panelSize.value}% - ${props.gutterSize / 2}px)`;\n  return props.direction === \"horizontal\"\n    ? { width: sizeValue }\n    : { height: sizeValue };\n});\n\nconst secondPanelStyle = computed(() => {\n  const sizeValue = `calc(${100 - panelSize.value}% - ${props.gutterSize / 2}px)`;\n  return props.direction === \"horizontal\"\n    ? { width: sizeValue }\n    : { height: sizeValue };\n});\n\nconst gutterStyle = computed(() => {\n  return props.direction === \"horizontal\"\n    ? { width: `${props.gutterSize}px` }\n    : { height: `${props.gutterSize}px` };\n});\n\n/* ─── 折叠按钮图标 ──────────────────────────── */\nconst collapseFirstIcon = computed(() => {\n  if (props.direction === \"horizontal\") {\n    return isFirstCollapsed.value ? \"mdi:chevron-right\" : \"mdi:chevron-left\";\n  }\n  return isFirstCollapsed.value ? \"mdi:chevron-down\" : \"mdi:chevron-up\";\n});\n\nconst collapseSecondIcon = computed(() => {\n  if (props.direction === \"horizontal\") {\n    return isSecondCollapsed.value ? \"mdi:chevron-left\" : \"mdi:chevron-right\";\n  }\n  return isSecondCollapsed.value ? \"mdi:chevron-up\" : \"mdi:chevron-down\";\n});\n\n/* ─── 暴露方法 ──────────────────────────────── */\ndefineExpose<SplitPaneExpose>({\n  collapse,\n  expand,\n  toggle,\n  resetSize,\n  getPanelInfo,\n  setSize,\n});\n</script>\n\n<style lang=\"scss\" scoped>\n@use \"./index.scss\";\n</style>\n"],"mappings":"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"}
+{"version":3,"file":"C_SplitPane2.js","names":["direction","disabled","showCollapseButton","collapsible"],"sources":["../src/components/C_SplitPane/composables/useSplitResize.ts","../src/components/C_SplitPane/index.vue","../src/components/C_SplitPane/index.vue","../src/components/C_SplitPane/index.vue"],"sourcesContent":["import { ref, computed, onUnmounted } from \"vue\";\r\nimport type { Ref } from \"vue\";\r\nimport type { CollapseTarget, SplitDirection } from \"../types\";\r\n\r\ninterface UseSplitResizeOptions {\r\n  /** 容器引用 */\r\n  containerRef: Ref<HTMLElement | null>;\r\n  /** 分割方向 */\r\n  direction: Ref<SplitDirection>;\r\n  /** 首面板默认大小（百分比） */\r\n  defaultSize: number;\r\n  /** 首面板最小大小（百分比） */\r\n  minSize: number;\r\n  /** 首面板最大大小（百分比） */\r\n  maxSize: number;\r\n  /** 是否禁用 */\r\n  disabled: Ref<boolean>;\r\n  /** 是否可折叠 */\r\n  collapsible: Ref<boolean>;\r\n  /** 键盘微调步长（百分比） */\r\n  step: number;\r\n  /** resize 回调 */\r\n  onResize?: (firstSize: number, secondSize: number) => void;\r\n  /** 折叠回调 */\r\n  onCollapse?: (target: CollapseTarget) => void;\r\n  /** 展开回调 */\r\n  onExpand?: (target: CollapseTarget) => void;\r\n  /** 拖拽开始回调 */\r\n  onDragStart?: (size: number) => void;\r\n  /** 拖拽结束回调 */\r\n  onDragEnd?: (size: number) => void;\r\n}\r\n\r\n/**\r\n * 分割面板拖拽调整逻辑\r\n */\r\nexport function useSplitResize(options: UseSplitResizeOptions) {\r\n  const {\r\n    containerRef,\r\n    direction,\r\n    defaultSize,\r\n    minSize,\r\n    maxSize,\r\n    disabled,\r\n    collapsible,\r\n    step,\r\n    onResize,\r\n    onCollapse,\r\n    onExpand,\r\n    onDragStart,\r\n    onDragEnd,\r\n  } = options;\r\n\r\n  /** 首面板当前大小（百分比） */\r\n  const panelSize = ref(defaultSize);\r\n  /** 是否正在拖拽 */\r\n  const isDragging = ref(false);\r\n  /** 折叠状态 */\r\n  const collapsedTarget = ref<CollapseTarget | null>(null);\r\n  /** 折叠前记住的面板大小 */\r\n  const sizeBeforeCollapse = ref(defaultSize);\r\n\r\n  /** 首面板是否折叠 */\r\n  const isFirstCollapsed = computed(() => collapsedTarget.value === \"first\");\r\n  /** 第二面板是否折叠 */\r\n  const isSecondCollapsed = computed(() => collapsedTarget.value === \"second\");\r\n\r\n  /**\r\n   * 将大小限制在 min/max 范围内\r\n   */\r\n  const clampSize = (size: number): number => {\r\n    return Math.min(maxSize, Math.max(minSize, size));\r\n  };\r\n\r\n  /**\r\n   * 获取容器在分割方向上的总长度（px）\r\n   */\r\n  const getContainerLength = (): number => {\r\n    const container = containerRef.value;\r\n    if (!container) return 0;\r\n    return direction.value === \"horizontal\"\r\n      ? container.offsetWidth\r\n      : container.offsetHeight;\r\n  };\r\n\r\n  /**\r\n   * 获取容器在分割方向上的起始坐标\r\n   */\r\n  const getContainerStart = (): number => {\r\n    const container = containerRef.value;\r\n    if (!container) return 0;\r\n    const rect = container.getBoundingClientRect();\r\n    return direction.value === \"horizontal\" ? rect.left : rect.top;\r\n  };\r\n\r\n  /**\r\n   * 根据鼠标/触摸位置计算面板大小（百分比）\r\n   */\r\n  const calcSizeFromPosition = (clientPos: number): number => {\r\n    const containerLength = getContainerLength();\r\n    if (containerLength === 0) return panelSize.value;\r\n\r\n    const containerStart = getContainerStart();\r\n    const offset = clientPos - containerStart;\r\n    const percentage = (offset / containerLength) * 100;\r\n\r\n    return clampSize(percentage);\r\n  };\r\n\r\n  /**\r\n   * 获取事件的位置坐标\r\n   */\r\n  const getClientPos = (e: MouseEvent | TouchEvent): number => {\r\n    if (e instanceof TouchEvent) {\r\n      return direction.value === \"horizontal\"\r\n        ? e.touches[0].clientX\r\n        : e.touches[0].clientY;\r\n    }\r\n    return direction.value === \"horizontal\" ? e.clientX : e.clientY;\r\n  };\r\n\r\n  /**\r\n   * 更新面板大小\r\n   */\r\n  const updateSize = (newSize: number) => {\r\n    const clamped = clampSize(newSize);\r\n    panelSize.value = clamped;\r\n    onResize?.(clamped, 100 - clamped);\r\n  };\r\n\r\n  /* ─── 拖拽逻辑 ──────────────────────────────── */\r\n  const handleMouseMove = (e: MouseEvent | TouchEvent) => {\r\n    if (!isDragging.value || disabled.value) return;\r\n\r\n    e.preventDefault();\r\n    const pos = getClientPos(e);\r\n    const newSize = calcSizeFromPosition(pos);\r\n\r\n    /* 拖拽过程中取消折叠状态 */\r\n    if (collapsedTarget.value) {\r\n      collapsedTarget.value = null;\r\n    }\r\n    updateSize(newSize);\r\n  };\r\n\r\n  const handleMouseUp = () => {\r\n    if (!isDragging.value) return;\r\n\r\n    isDragging.value = false;\r\n    document.body.style.cursor = \"\";\r\n    document.body.style.userSelect = \"\";\r\n\r\n    onDragEnd?.(panelSize.value);\r\n\r\n    document.removeEventListener(\"mousemove\", handleMouseMove);\r\n    document.removeEventListener(\"mouseup\", handleMouseUp);\r\n    document.removeEventListener(\"touchmove\", handleMouseMove);\r\n    document.removeEventListener(\"touchend\", handleMouseUp);\r\n  };\r\n\r\n  const handleMouseDown = (e: MouseEvent | TouchEvent) => {\r\n    if (disabled.value) return;\r\n\r\n    e.preventDefault();\r\n    /* preventDefault 会阻止默认聚焦行为，需手动 focus 以支持键盘控制 */\r\n    (e.currentTarget as HTMLElement)?.focus();\r\n    isDragging.value = true;\r\n\r\n    document.body.style.cursor =\r\n      direction.value === \"horizontal\" ? \"col-resize\" : \"row-resize\";\r\n    document.body.style.userSelect = \"none\";\r\n\r\n    onDragStart?.(panelSize.value);\r\n\r\n    document.addEventListener(\"mousemove\", handleMouseMove);\r\n    document.addEventListener(\"mouseup\", handleMouseUp);\r\n    document.addEventListener(\"touchmove\", handleMouseMove, { passive: false });\r\n    document.addEventListener(\"touchend\", handleMouseUp);\r\n  };\r\n\r\n  /* ─── 双击折叠 ──────────────────────────────── */\r\n  const handleDoubleClick = () => {\r\n    if (disabled.value || !collapsible.value) return;\r\n    toggle(\"first\");\r\n  };\r\n\r\n  /* ─── 折叠 / 展开 ───────────────────────────── */\r\n  const collapse = (target: CollapseTarget = \"first\") => {\r\n    if (!collapsible.value || collapsedTarget.value === target) return;\r\n\r\n    /* 记住折叠前的大小 */\r\n    if (!collapsedTarget.value) {\r\n      sizeBeforeCollapse.value = panelSize.value;\r\n    }\r\n\r\n    collapsedTarget.value = target;\r\n\r\n    if (target === \"first\") {\r\n      panelSize.value = 0;\r\n    } else {\r\n      panelSize.value = 100;\r\n    }\r\n\r\n    onCollapse?.(target);\r\n    onResize?.(panelSize.value, 100 - panelSize.value);\r\n  };\r\n\r\n  const expand = () => {\r\n    if (!collapsedTarget.value) return;\r\n\r\n    const target = collapsedTarget.value;\r\n    collapsedTarget.value = null;\r\n    panelSize.value = sizeBeforeCollapse.value;\r\n\r\n    onExpand?.(target);\r\n    onResize?.(panelSize.value, 100 - panelSize.value);\r\n  };\r\n\r\n  const toggle = (target: CollapseTarget = \"first\") => {\r\n    if (collapsedTarget.value) {\r\n      expand();\r\n    } else {\r\n      collapse(target);\r\n    }\r\n  };\r\n\r\n  /* ─── 键盘微调 ──────────────────────────────── */\r\n  /**\r\n   * 根据按键获取增量\r\n   */\r\n  const getKeyDelta = (key: string, isHorizontal: boolean): number | null => {\r\n    const keyMap: Record<string, number | null> = {\r\n      ArrowLeft: isHorizontal ? -step : 0,\r\n      ArrowRight: isHorizontal ? step : 0,\r\n      ArrowUp: !isHorizontal ? -step : 0,\r\n      ArrowDown: !isHorizontal ? step : 0,\r\n    };\r\n    return keyMap[key] ?? null;\r\n  };\r\n\r\n  const handleKeyDown = (e: KeyboardEvent) => {\r\n    if (disabled.value) return;\r\n\r\n    /* Home / End 直接跳到极值 */\r\n    if (e.key === \"Home\") {\r\n      updateSize(minSize);\r\n      e.preventDefault();\r\n      return;\r\n    }\r\n    if (e.key === \"End\") {\r\n      updateSize(maxSize);\r\n      e.preventDefault();\r\n      return;\r\n    }\r\n\r\n    const delta = getKeyDelta(e.key, direction.value === \"horizontal\");\r\n    if (delta === null || delta === 0) return;\r\n\r\n    e.preventDefault();\r\n    if (collapsedTarget.value) collapsedTarget.value = null;\r\n    updateSize(panelSize.value + delta);\r\n  };\r\n\r\n  /* ─── 重置 / 查询 ───────────────────────────── */\r\n  const resetSize = () => {\r\n    collapsedTarget.value = null;\r\n    panelSize.value = defaultSize;\r\n    onResize?.(defaultSize, 100 - defaultSize);\r\n  };\r\n\r\n  const setSize = (size: number) => {\r\n    collapsedTarget.value = null;\r\n    updateSize(size);\r\n  };\r\n\r\n  const getPanelInfo = () => ({\r\n    first: {\r\n      size: panelSize.value,\r\n      collapsed: isFirstCollapsed.value,\r\n    },\r\n    second: {\r\n      size: 100 - panelSize.value,\r\n      collapsed: isSecondCollapsed.value,\r\n    },\r\n  });\r\n\r\n  /* 清理 */\r\n  onUnmounted(() => {\r\n    document.removeEventListener(\"mousemove\", handleMouseMove);\r\n    document.removeEventListener(\"mouseup\", handleMouseUp);\r\n    document.removeEventListener(\"touchmove\", handleMouseMove);\r\n    document.removeEventListener(\"touchend\", handleMouseUp);\r\n  });\r\n\r\n  return {\r\n    panelSize,\r\n    isDragging,\r\n    collapsedTarget,\r\n    isFirstCollapsed,\r\n    isSecondCollapsed,\r\n    handleMouseDown,\r\n    handleDoubleClick,\r\n    handleKeyDown,\r\n    collapse,\r\n    expand,\r\n    toggle,\r\n    resetSize,\r\n    setSize,\r\n    getPanelInfo,\r\n  };\r\n}\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-16\r\n * @Description: 分割面板组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <div\r\n    ref=\"containerRef\"\r\n    class=\"c-split-pane\"\r\n    :class=\"[\r\n      `c-split-pane--${direction}`,\r\n      {\r\n        'c-split-pane--dragging': isDragging,\r\n        'c-split-pane--disabled': disabled,\r\n        'c-split-pane--collapsed-first': isFirstCollapsed,\r\n        'c-split-pane--collapsed-second': isSecondCollapsed,\r\n      },\r\n    ]\"\r\n  >\r\n    <!-- 首面板 -->\r\n    <div class=\"split-panel split-panel--first\" :style=\"firstPanelStyle\">\r\n      <div class=\"split-panel__content\">\r\n        <slot name=\"first\" />\r\n      </div>\r\n    </div>\r\n\r\n    <!-- 分割线手柄 -->\r\n    <div\r\n      class=\"split-gutter\"\r\n      :style=\"gutterStyle\"\r\n      role=\"separator\"\r\n      :aria-orientation=\"direction === 'horizontal' ? 'vertical' : 'horizontal'\"\r\n      :aria-valuenow=\"Math.round(panelSize)\"\r\n      :aria-valuemin=\"0\"\r\n      :aria-valuemax=\"100\"\r\n      tabindex=\"0\"\r\n      @mousedown=\"handleMouseDown\"\r\n      @touchstart.prevent=\"handleMouseDown\"\r\n      @dblclick=\"handleDoubleClick\"\r\n      @keydown=\"handleKeyDown\"\r\n    >\r\n      <div class=\"split-gutter__visual\">\r\n        <div class=\"split-gutter__dots\">\r\n          <span v-for=\"i in 3\" :key=\"i\" class=\"split-gutter__dot\" />\r\n        </div>\r\n      </div>\r\n\r\n      <!-- 折叠按钮 -->\r\n      <template v-if=\"showCollapseButton && collapsible\">\r\n        <button\r\n          class=\"split-gutter__collapse-btn split-gutter__collapse-btn--first\"\r\n          :title=\"isFirstCollapsed ? '展开首面板' : '折叠首面板'\"\r\n          @click.stop=\"toggle('first')\"\r\n          @mousedown.stop\r\n        >\r\n          <C_Icon :name=\"collapseFirstIcon\" :size=\"16\" color=\"currentColor\" />\r\n        </button>\r\n        <button\r\n          class=\"split-gutter__collapse-btn split-gutter__collapse-btn--second\"\r\n          :title=\"isSecondCollapsed ? '展开第二面板' : '折叠第二面板'\"\r\n          @click.stop=\"toggle('second')\"\r\n          @mousedown.stop\r\n        >\r\n          <C_Icon :name=\"collapseSecondIcon\" :size=\"16\" color=\"currentColor\" />\r\n        </button>\r\n      </template>\r\n    </div>\r\n\r\n    <!-- 第二面板 -->\r\n    <div class=\"split-panel split-panel--second\" :style=\"secondPanelStyle\">\r\n      <div class=\"split-panel__content\">\r\n        <slot name=\"second\" />\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, computed, toRef } from \"vue\";\r\nimport C_Icon from \"../C_Icon/index.vue\";\r\nimport { useSplitResize } from \"./composables/useSplitResize\";\r\nimport type { CollapseTarget, SplitDirection, SplitPaneExpose } from \"./types\";\r\n\r\ndefineOptions({ name: \"C_SplitPane\" });\r\n\r\ninterface Props {\r\n  /** 分割方向 */\r\n  direction?: SplitDirection;\r\n  /** 首面板默认大小（百分比 0-100） */\r\n  defaultSize?: number;\r\n  /** 首面板最小大小（百分比 0-100） */\r\n  minSize?: number;\r\n  /** 首面板最大大小（百分比 0-100） */\r\n  maxSize?: number;\r\n  /** 是否禁用拖拽调整 */\r\n  disabled?: boolean;\r\n  /** 是否可折叠 */\r\n  collapsible?: boolean;\r\n  /** 是否显示折叠按钮 */\r\n  showCollapseButton?: boolean;\r\n  /** 分割线宽度（px） */\r\n  gutterSize?: number;\r\n  /** 键盘微调步长（百分比） */\r\n  step?: number;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n  direction: \"horizontal\",\r\n  defaultSize: 50,\r\n  minSize: 0,\r\n  maxSize: 100,\r\n  disabled: false,\r\n  collapsible: true,\r\n  showCollapseButton: true,\r\n  gutterSize: 6,\r\n  step: 2,\r\n});\r\n\r\nconst emit = defineEmits<{\r\n  resize: [firstSize: number, secondSize: number];\r\n  collapse: [target: CollapseTarget];\r\n  expand: [target: CollapseTarget];\r\n  \"drag-start\": [size: number];\r\n  \"drag-end\": [size: number];\r\n}>();\r\n\r\nconst containerRef = ref<HTMLElement | null>(null);\r\n\r\nconst {\r\n  panelSize,\r\n  isDragging,\r\n  isFirstCollapsed,\r\n  isSecondCollapsed,\r\n  handleMouseDown,\r\n  handleDoubleClick,\r\n  handleKeyDown,\r\n  collapse,\r\n  expand,\r\n  toggle,\r\n  resetSize,\r\n  setSize,\r\n  getPanelInfo,\r\n} = useSplitResize({\r\n  containerRef,\r\n  direction: toRef(props, \"direction\"),\r\n  defaultSize: props.defaultSize,\r\n  minSize: props.minSize,\r\n  maxSize: props.maxSize,\r\n  disabled: toRef(props, \"disabled\"),\r\n  collapsible: toRef(props, \"collapsible\"),\r\n  step: props.step,\r\n  onResize: (first, second) => emit(\"resize\", first, second),\r\n  onCollapse: (target) => emit(\"collapse\", target),\r\n  onExpand: (target) => emit(\"expand\", target),\r\n  onDragStart: (size) => emit(\"drag-start\", size),\r\n  onDragEnd: (size) => emit(\"drag-end\", size),\r\n});\r\n\r\n/* ─── 计算样式 ──────────────────────────────── */\r\nconst firstPanelStyle = computed(() => {\r\n  const sizeValue = `calc(${panelSize.value}% - ${props.gutterSize / 2}px)`;\r\n  return props.direction === \"horizontal\"\r\n    ? { width: sizeValue }\r\n    : { height: sizeValue };\r\n});\r\n\r\nconst secondPanelStyle = computed(() => {\r\n  const sizeValue = `calc(${100 - panelSize.value}% - ${props.gutterSize / 2}px)`;\r\n  return props.direction === \"horizontal\"\r\n    ? { width: sizeValue }\r\n    : { height: sizeValue };\r\n});\r\n\r\nconst gutterStyle = computed(() => {\r\n  return props.direction === \"horizontal\"\r\n    ? { width: `${props.gutterSize}px` }\r\n    : { height: `${props.gutterSize}px` };\r\n});\r\n\r\n/* ─── 折叠按钮图标 ──────────────────────────── */\r\nconst collapseFirstIcon = computed(() => {\r\n  if (props.direction === \"horizontal\") {\r\n    return isFirstCollapsed.value ? \"mdi:chevron-right\" : \"mdi:chevron-left\";\r\n  }\r\n  return isFirstCollapsed.value ? \"mdi:chevron-down\" : \"mdi:chevron-up\";\r\n});\r\n\r\nconst collapseSecondIcon = computed(() => {\r\n  if (props.direction === \"horizontal\") {\r\n    return isSecondCollapsed.value ? \"mdi:chevron-left\" : \"mdi:chevron-right\";\r\n  }\r\n  return isSecondCollapsed.value ? \"mdi:chevron-up\" : \"mdi:chevron-down\";\r\n});\r\n\r\n/* ─── 暴露方法 ──────────────────────────────── */\r\ndefineExpose<SplitPaneExpose>({\r\n  collapse,\r\n  expand,\r\n  toggle,\r\n  resetSize,\r\n  getPanelInfo,\r\n  setSize,\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n@use \"./index.scss\";\r\n</style>\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-16\r\n * @Description: 分割面板组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <div\r\n    ref=\"containerRef\"\r\n    class=\"c-split-pane\"\r\n    :class=\"[\r\n      `c-split-pane--${direction}`,\r\n      {\r\n        'c-split-pane--dragging': isDragging,\r\n        'c-split-pane--disabled': disabled,\r\n        'c-split-pane--collapsed-first': isFirstCollapsed,\r\n        'c-split-pane--collapsed-second': isSecondCollapsed,\r\n      },\r\n    ]\"\r\n  >\r\n    <!-- 首面板 -->\r\n    <div class=\"split-panel split-panel--first\" :style=\"firstPanelStyle\">\r\n      <div class=\"split-panel__content\">\r\n        <slot name=\"first\" />\r\n      </div>\r\n    </div>\r\n\r\n    <!-- 分割线手柄 -->\r\n    <div\r\n      class=\"split-gutter\"\r\n      :style=\"gutterStyle\"\r\n      role=\"separator\"\r\n      :aria-orientation=\"direction === 'horizontal' ? 'vertical' : 'horizontal'\"\r\n      :aria-valuenow=\"Math.round(panelSize)\"\r\n      :aria-valuemin=\"0\"\r\n      :aria-valuemax=\"100\"\r\n      tabindex=\"0\"\r\n      @mousedown=\"handleMouseDown\"\r\n      @touchstart.prevent=\"handleMouseDown\"\r\n      @dblclick=\"handleDoubleClick\"\r\n      @keydown=\"handleKeyDown\"\r\n    >\r\n      <div class=\"split-gutter__visual\">\r\n        <div class=\"split-gutter__dots\">\r\n          <span v-for=\"i in 3\" :key=\"i\" class=\"split-gutter__dot\" />\r\n        </div>\r\n      </div>\r\n\r\n      <!-- 折叠按钮 -->\r\n      <template v-if=\"showCollapseButton && collapsible\">\r\n        <button\r\n          class=\"split-gutter__collapse-btn split-gutter__collapse-btn--first\"\r\n          :title=\"isFirstCollapsed ? '展开首面板' : '折叠首面板'\"\r\n          @click.stop=\"toggle('first')\"\r\n          @mousedown.stop\r\n        >\r\n          <C_Icon :name=\"collapseFirstIcon\" :size=\"16\" color=\"currentColor\" />\r\n        </button>\r\n        <button\r\n          class=\"split-gutter__collapse-btn split-gutter__collapse-btn--second\"\r\n          :title=\"isSecondCollapsed ? '展开第二面板' : '折叠第二面板'\"\r\n          @click.stop=\"toggle('second')\"\r\n          @mousedown.stop\r\n        >\r\n          <C_Icon :name=\"collapseSecondIcon\" :size=\"16\" color=\"currentColor\" />\r\n        </button>\r\n      </template>\r\n    </div>\r\n\r\n    <!-- 第二面板 -->\r\n    <div class=\"split-panel split-panel--second\" :style=\"secondPanelStyle\">\r\n      <div class=\"split-panel__content\">\r\n        <slot name=\"second\" />\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, computed, toRef } from \"vue\";\r\nimport C_Icon from \"../C_Icon/index.vue\";\r\nimport { useSplitResize } from \"./composables/useSplitResize\";\r\nimport type { CollapseTarget, SplitDirection, SplitPaneExpose } from \"./types\";\r\n\r\ndefineOptions({ name: \"C_SplitPane\" });\r\n\r\ninterface Props {\r\n  /** 分割方向 */\r\n  direction?: SplitDirection;\r\n  /** 首面板默认大小（百分比 0-100） */\r\n  defaultSize?: number;\r\n  /** 首面板最小大小（百分比 0-100） */\r\n  minSize?: number;\r\n  /** 首面板最大大小（百分比 0-100） */\r\n  maxSize?: number;\r\n  /** 是否禁用拖拽调整 */\r\n  disabled?: boolean;\r\n  /** 是否可折叠 */\r\n  collapsible?: boolean;\r\n  /** 是否显示折叠按钮 */\r\n  showCollapseButton?: boolean;\r\n  /** 分割线宽度（px） */\r\n  gutterSize?: number;\r\n  /** 键盘微调步长（百分比） */\r\n  step?: number;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n  direction: \"horizontal\",\r\n  defaultSize: 50,\r\n  minSize: 0,\r\n  maxSize: 100,\r\n  disabled: false,\r\n  collapsible: true,\r\n  showCollapseButton: true,\r\n  gutterSize: 6,\r\n  step: 2,\r\n});\r\n\r\nconst emit = defineEmits<{\r\n  resize: [firstSize: number, secondSize: number];\r\n  collapse: [target: CollapseTarget];\r\n  expand: [target: CollapseTarget];\r\n  \"drag-start\": [size: number];\r\n  \"drag-end\": [size: number];\r\n}>();\r\n\r\nconst containerRef = ref<HTMLElement | null>(null);\r\n\r\nconst {\r\n  panelSize,\r\n  isDragging,\r\n  isFirstCollapsed,\r\n  isSecondCollapsed,\r\n  handleMouseDown,\r\n  handleDoubleClick,\r\n  handleKeyDown,\r\n  collapse,\r\n  expand,\r\n  toggle,\r\n  resetSize,\r\n  setSize,\r\n  getPanelInfo,\r\n} = useSplitResize({\r\n  containerRef,\r\n  direction: toRef(props, \"direction\"),\r\n  defaultSize: props.defaultSize,\r\n  minSize: props.minSize,\r\n  maxSize: props.maxSize,\r\n  disabled: toRef(props, \"disabled\"),\r\n  collapsible: toRef(props, \"collapsible\"),\r\n  step: props.step,\r\n  onResize: (first, second) => emit(\"resize\", first, second),\r\n  onCollapse: (target) => emit(\"collapse\", target),\r\n  onExpand: (target) => emit(\"expand\", target),\r\n  onDragStart: (size) => emit(\"drag-start\", size),\r\n  onDragEnd: (size) => emit(\"drag-end\", size),\r\n});\r\n\r\n/* ─── 计算样式 ──────────────────────────────── */\r\nconst firstPanelStyle = computed(() => {\r\n  const sizeValue = `calc(${panelSize.value}% - ${props.gutterSize / 2}px)`;\r\n  return props.direction === \"horizontal\"\r\n    ? { width: sizeValue }\r\n    : { height: sizeValue };\r\n});\r\n\r\nconst secondPanelStyle = computed(() => {\r\n  const sizeValue = `calc(${100 - panelSize.value}% - ${props.gutterSize / 2}px)`;\r\n  return props.direction === \"horizontal\"\r\n    ? { width: sizeValue }\r\n    : { height: sizeValue };\r\n});\r\n\r\nconst gutterStyle = computed(() => {\r\n  return props.direction === \"horizontal\"\r\n    ? { width: `${props.gutterSize}px` }\r\n    : { height: `${props.gutterSize}px` };\r\n});\r\n\r\n/* ─── 折叠按钮图标 ──────────────────────────── */\r\nconst collapseFirstIcon = computed(() => {\r\n  if (props.direction === \"horizontal\") {\r\n    return isFirstCollapsed.value ? \"mdi:chevron-right\" : \"mdi:chevron-left\";\r\n  }\r\n  return isFirstCollapsed.value ? \"mdi:chevron-down\" : \"mdi:chevron-up\";\r\n});\r\n\r\nconst collapseSecondIcon = computed(() => {\r\n  if (props.direction === \"horizontal\") {\r\n    return isSecondCollapsed.value ? \"mdi:chevron-left\" : \"mdi:chevron-right\";\r\n  }\r\n  return isSecondCollapsed.value ? \"mdi:chevron-up\" : \"mdi:chevron-down\";\r\n});\r\n\r\n/* ─── 暴露方法 ──────────────────────────────── */\r\ndefineExpose<SplitPaneExpose>({\r\n  collapse,\r\n  expand,\r\n  toggle,\r\n  resetSize,\r\n  getPanelInfo,\r\n  setSize,\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n@use \"./index.scss\";\r\n</style>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-16\r\n * @Description: 分割面板组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <div\r\n    ref=\"containerRef\"\r\n    class=\"c-split-pane\"\r\n    :class=\"[\r\n      `c-split-pane--${direction}`,\r\n      {\r\n        'c-split-pane--dragging': isDragging,\r\n        'c-split-pane--disabled': disabled,\r\n        'c-split-pane--collapsed-first': isFirstCollapsed,\r\n        'c-split-pane--collapsed-second': isSecondCollapsed,\r\n      },\r\n    ]\"\r\n  >\r\n    <!-- 首面板 -->\r\n    <div class=\"split-panel split-panel--first\" :style=\"firstPanelStyle\">\r\n      <div class=\"split-panel__content\">\r\n        <slot name=\"first\" />\r\n      </div>\r\n    </div>\r\n\r\n    <!-- 分割线手柄 -->\r\n    <div\r\n      class=\"split-gutter\"\r\n      :style=\"gutterStyle\"\r\n      role=\"separator\"\r\n      :aria-orientation=\"direction === 'horizontal' ? 'vertical' : 'horizontal'\"\r\n      :aria-valuenow=\"Math.round(panelSize)\"\r\n      :aria-valuemin=\"0\"\r\n      :aria-valuemax=\"100\"\r\n      tabindex=\"0\"\r\n      @mousedown=\"handleMouseDown\"\r\n      @touchstart.prevent=\"handleMouseDown\"\r\n      @dblclick=\"handleDoubleClick\"\r\n      @keydown=\"handleKeyDown\"\r\n    >\r\n      <div class=\"split-gutter__visual\">\r\n        <div class=\"split-gutter__dots\">\r\n          <span v-for=\"i in 3\" :key=\"i\" class=\"split-gutter__dot\" />\r\n        </div>\r\n      </div>\r\n\r\n      <!-- 折叠按钮 -->\r\n      <template v-if=\"showCollapseButton && collapsible\">\r\n        <button\r\n          class=\"split-gutter__collapse-btn split-gutter__collapse-btn--first\"\r\n          :title=\"isFirstCollapsed ? '展开首面板' : '折叠首面板'\"\r\n          @click.stop=\"toggle('first')\"\r\n          @mousedown.stop\r\n        >\r\n          <C_Icon :name=\"collapseFirstIcon\" :size=\"16\" color=\"currentColor\" />\r\n        </button>\r\n        <button\r\n          class=\"split-gutter__collapse-btn split-gutter__collapse-btn--second\"\r\n          :title=\"isSecondCollapsed ? '展开第二面板' : '折叠第二面板'\"\r\n          @click.stop=\"toggle('second')\"\r\n          @mousedown.stop\r\n        >\r\n          <C_Icon :name=\"collapseSecondIcon\" :size=\"16\" color=\"currentColor\" />\r\n        </button>\r\n      </template>\r\n    </div>\r\n\r\n    <!-- 第二面板 -->\r\n    <div class=\"split-panel split-panel--second\" :style=\"secondPanelStyle\">\r\n      <div class=\"split-panel__content\">\r\n        <slot name=\"second\" />\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\nimport { ref, computed, toRef } from \"vue\";\r\nimport C_Icon from \"../C_Icon/index.vue\";\r\nimport { useSplitResize } from \"./composables/useSplitResize\";\r\nimport type { CollapseTarget, SplitDirection, SplitPaneExpose } from \"./types\";\r\n\r\ndefineOptions({ name: \"C_SplitPane\" });\r\n\r\ninterface Props {\r\n  /** 分割方向 */\r\n  direction?: SplitDirection;\r\n  /** 首面板默认大小（百分比 0-100） */\r\n  defaultSize?: number;\r\n  /** 首面板最小大小（百分比 0-100） */\r\n  minSize?: number;\r\n  /** 首面板最大大小（百分比 0-100） */\r\n  maxSize?: number;\r\n  /** 是否禁用拖拽调整 */\r\n  disabled?: boolean;\r\n  /** 是否可折叠 */\r\n  collapsible?: boolean;\r\n  /** 是否显示折叠按钮 */\r\n  showCollapseButton?: boolean;\r\n  /** 分割线宽度（px） */\r\n  gutterSize?: number;\r\n  /** 键盘微调步长（百分比） */\r\n  step?: number;\r\n}\r\n\r\nconst props = withDefaults(defineProps<Props>(), {\r\n  direction: \"horizontal\",\r\n  defaultSize: 50,\r\n  minSize: 0,\r\n  maxSize: 100,\r\n  disabled: false,\r\n  collapsible: true,\r\n  showCollapseButton: true,\r\n  gutterSize: 6,\r\n  step: 2,\r\n});\r\n\r\nconst emit = defineEmits<{\r\n  resize: [firstSize: number, secondSize: number];\r\n  collapse: [target: CollapseTarget];\r\n  expand: [target: CollapseTarget];\r\n  \"drag-start\": [size: number];\r\n  \"drag-end\": [size: number];\r\n}>();\r\n\r\nconst containerRef = ref<HTMLElement | null>(null);\r\n\r\nconst {\r\n  panelSize,\r\n  isDragging,\r\n  isFirstCollapsed,\r\n  isSecondCollapsed,\r\n  handleMouseDown,\r\n  handleDoubleClick,\r\n  handleKeyDown,\r\n  collapse,\r\n  expand,\r\n  toggle,\r\n  resetSize,\r\n  setSize,\r\n  getPanelInfo,\r\n} = useSplitResize({\r\n  containerRef,\r\n  direction: toRef(props, \"direction\"),\r\n  defaultSize: props.defaultSize,\r\n  minSize: props.minSize,\r\n  maxSize: props.maxSize,\r\n  disabled: toRef(props, \"disabled\"),\r\n  collapsible: toRef(props, \"collapsible\"),\r\n  step: props.step,\r\n  onResize: (first, second) => emit(\"resize\", first, second),\r\n  onCollapse: (target) => emit(\"collapse\", target),\r\n  onExpand: (target) => emit(\"expand\", target),\r\n  onDragStart: (size) => emit(\"drag-start\", size),\r\n  onDragEnd: (size) => emit(\"drag-end\", size),\r\n});\r\n\r\n/* ─── 计算样式 ──────────────────────────────── */\r\nconst firstPanelStyle = computed(() => {\r\n  const sizeValue = `calc(${panelSize.value}% - ${props.gutterSize / 2}px)`;\r\n  return props.direction === \"horizontal\"\r\n    ? { width: sizeValue }\r\n    : { height: sizeValue };\r\n});\r\n\r\nconst secondPanelStyle = computed(() => {\r\n  const sizeValue = `calc(${100 - panelSize.value}% - ${props.gutterSize / 2}px)`;\r\n  return props.direction === \"horizontal\"\r\n    ? { width: sizeValue }\r\n    : { height: sizeValue };\r\n});\r\n\r\nconst gutterStyle = computed(() => {\r\n  return props.direction === \"horizontal\"\r\n    ? { width: `${props.gutterSize}px` }\r\n    : { height: `${props.gutterSize}px` };\r\n});\r\n\r\n/* ─── 折叠按钮图标 ──────────────────────────── */\r\nconst collapseFirstIcon = computed(() => {\r\n  if (props.direction === \"horizontal\") {\r\n    return isFirstCollapsed.value ? \"mdi:chevron-right\" : \"mdi:chevron-left\";\r\n  }\r\n  return isFirstCollapsed.value ? \"mdi:chevron-down\" : \"mdi:chevron-up\";\r\n});\r\n\r\nconst collapseSecondIcon = computed(() => {\r\n  if (props.direction === \"horizontal\") {\r\n    return isSecondCollapsed.value ? \"mdi:chevron-left\" : \"mdi:chevron-right\";\r\n  }\r\n  return isSecondCollapsed.value ? \"mdi:chevron-up\" : \"mdi:chevron-down\";\r\n});\r\n\r\n/* ─── 暴露方法 ──────────────────────────────── */\r\ndefineExpose<SplitPaneExpose>({\r\n  collapse,\r\n  expand,\r\n  toggle,\r\n  resetSize,\r\n  getPanelInfo,\r\n  setSize,\r\n});\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n@use \"./index.scss\";\r\n</style>\r\n"],"mappings":"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"}

package/dist/C_Steps-BHYNJI1l.css.map

@@ -0,0 +1 @@
+{"version":3,"file":"C_Steps-BHYNJI1l.css","names":[],"sources":["../src/components/C_Steps/index.vue?vue&type=style&index=0&scoped=96b53094&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled */.c-steps[data-v-96b53094] {\n  --step-gap: 24px;\n  --icon-size: 32px;\n  --line-width: 2px;\n  --line-gap: 4px;\n  --primary: var(--c-primary, #18a058);\n  --success: var(--c-success, #18a058);\n  --warning: var(--c-warning, #f0a020);\n  --error: var(--c-error, #d03050);\n  --border: var(--c-border, rgba(0, 0, 0, 0.09));\n  --bg-hover: rgba(0, 0, 0, 0.04);\n  display: flex;\n}\n.steps-connected[data-v-96b53094] {\n  --line-gap: 0px;\n}\n.steps-horizontal[data-v-96b53094] {\n  flex-direction: row;\n  align-items: flex-start;\n}\n.steps-vertical[data-v-96b53094] {\n  flex-direction: column;\n}\n.step-item[data-v-96b53094] {\n  display: flex;\n  position: relative;\n  flex: 1;\n  gap: 12px;\n}\n.steps-horizontal .step-item[data-v-96b53094] {\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n  min-width: 0;\n}\n.steps-vertical .step-item[data-v-96b53094] {\n  flex-direction: row;\n  min-height: 72px;\n  flex: none;\n  width: 100%;\n}\n.step-indicator[data-v-96b53094] {\n  position: relative;\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n.steps-horizontal .step-indicator[data-v-96b53094] {\n  width: 100%;\n  justify-content: center;\n}\n.steps-vertical .step-indicator[data-v-96b53094] {\n  flex-direction: column;\n}\n.step-icon[data-v-96b53094] {\n  width: var(--icon-size);\n  height: var(--icon-size);\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: var(--line-width) solid var(--border);\n  background: var(--c-bg-card, #fff);\n  position: relative;\n  z-index: 2;\n  transition: all 0.2s ease;\n  font-size: 16px;\n}\n.step-finish .step-icon[data-v-96b53094] {\n  border-color: var(--success);\n  color: var(--success);\n}\n.step-process .step-icon[data-v-96b53094] {\n  border-color: var(--primary);\n  background: var(--primary);\n  color: white;\n}\n.step-error .step-icon[data-v-96b53094] {\n  border-color: var(--error);\n  color: var(--error);\n}\n.step-index[data-v-96b53094] {\n  font-size: 14px;\n  font-weight: 500;\n}\n.step-line[data-v-96b53094] {\n  background: var(--border);\n  position: absolute;\n  transition: background 0.2s ease;\n}\n.steps-horizontal .step-line[data-v-96b53094] {\n  height: var(--line-width);\n  left: calc(50% + var(--icon-size) / 2 + var(--line-gap));\n  right: calc(-50% + var(--icon-size) / 2 + var(--line-gap));\n  top: calc(var(--icon-size) / 2);\n}\n.steps-vertical .step-line[data-v-96b53094] {\n  width: var(--line-width);\n  top: var(--icon-size);\n  bottom: 0;\n  left: calc(var(--icon-size) / 2 - 1px);\n}\n.step-finish .step-line[data-v-96b53094] {\n  background: var(--success);\n}\n.step-content[data-v-96b53094] {\n  flex: 1;\n  min-width: 0;\n}\n.steps-vertical .step-content[data-v-96b53094] {\n  padding-top: 4px;\n}\n.step-title[data-v-96b53094] {\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 22px;\n  margin-bottom: 2px;\n  word-break: break-word;\n}\n.step-time[data-v-96b53094] {\n  font-size: 12px;\n  line-height: 20px;\n  margin-bottom: 2px;\n  opacity: 0.65;\n}\n.step-finish .step-time[data-v-96b53094] {\n  color: var(--success);\n}\n.step-description[data-v-96b53094] {\n  font-size: 12px;\n  line-height: 20px;\n  opacity: 0.65;\n}\n.step-wait .step-title[data-v-96b53094] {\n  opacity: 0.65;\n}\n.step-process .step-title[data-v-96b53094] {\n  color: var(--primary);\n  font-weight: 600;\n}\n.step-error .step-title[data-v-96b53094] {\n  color: var(--error);\n}\n.step-clickable[data-v-96b53094] {\n  cursor: pointer;\n}\n.step-clickable:hover .step-icon[data-v-96b53094] {\n  transform: scale(1.05);\n}\n.step-clickable:not(.step-process):hover .step-icon[data-v-96b53094] {\n  background: var(--bg-hover);\n}\n.step-clickable:hover .step-title[data-v-96b53094] {\n  color: var(--primary);\n}\n@media (max-width: 768px) {\n.steps-horizontal[data-v-96b53094] {\n    flex-wrap: wrap;\n}\n.steps-horizontal .step-item[data-v-96b53094] {\n    flex: 0 0 50%;\n    margin-bottom: 24px;\n}\n.steps-horizontal .step-line[data-v-96b53094] {\n    display: none;\n}\n}\n@media (prefers-reduced-motion: reduce) {\n.step-icon[data-v-96b53094],\n  .step-line[data-v-96b53094] {\n    transition: none;\n}\n}"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}

package/dist/C_Steps-DY7vl-4I.css.map

@@ -0,0 +1 @@
+{"version":3,"file":"C_Steps-DY7vl-4I.css","names":[],"sources":["../src/components/C_Steps/index.vue?vue&type=style&index=0&scoped=96b53094&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled */.c-steps[data-v-96b53094] {\n  --step-gap: 24px;\n  --icon-size: 32px;\n  --line-width: 2px;\n  --line-gap: 4px;\n  --primary: var(--c-primary, #18a058);\n  --success: var(--c-success, #18a058);\n  --warning: var(--c-warning, #f0a020);\n  --error: var(--c-error, #d03050);\n  --border: var(--c-border, rgba(0, 0, 0, 0.09));\n  --bg-hover: rgba(0, 0, 0, 0.04);\n  display: flex;\n}\n.steps-connected[data-v-96b53094] {\n  --line-gap: 0px;\n}\n.steps-horizontal[data-v-96b53094] {\n  flex-direction: row;\n  align-items: flex-start;\n}\n.steps-vertical[data-v-96b53094] {\n  flex-direction: column;\n}\n.step-item[data-v-96b53094] {\n  display: flex;\n  position: relative;\n  flex: 1;\n  gap: 12px;\n}\n.steps-horizontal .step-item[data-v-96b53094] {\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n  min-width: 0;\n}\n.steps-vertical .step-item[data-v-96b53094] {\n  flex-direction: row;\n  min-height: 72px;\n  flex: none;\n  width: 100%;\n}\n.step-indicator[data-v-96b53094] {\n  position: relative;\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n.steps-horizontal .step-indicator[data-v-96b53094] {\n  width: 100%;\n  justify-content: center;\n}\n.steps-vertical .step-indicator[data-v-96b53094] {\n  flex-direction: column;\n}\n.step-icon[data-v-96b53094] {\n  width: var(--icon-size);\n  height: var(--icon-size);\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: var(--line-width) solid var(--border);\n  background: var(--c-bg-card, #fff);\n  position: relative;\n  z-index: 2;\n  transition: all 0.2s ease;\n  font-size: 16px;\n}\n.step-finish .step-icon[data-v-96b53094] {\n  border-color: var(--success);\n  color: var(--success);\n}\n.step-process .step-icon[data-v-96b53094] {\n  border-color: var(--primary);\n  background: var(--primary);\n  color: white;\n}\n.step-error .step-icon[data-v-96b53094] {\n  border-color: var(--error);\n  color: var(--error);\n}\n.step-index[data-v-96b53094] {\n  font-size: 14px;\n  font-weight: 500;\n}\n.step-line[data-v-96b53094] {\n  background: var(--border);\n  position: absolute;\n  transition: background 0.2s ease;\n}\n.steps-horizontal .step-line[data-v-96b53094] {\n  height: var(--line-width);\n  left: calc(50% + var(--icon-size) / 2 + var(--line-gap));\n  right: calc(-50% + var(--icon-size) / 2 + var(--line-gap));\n  top: calc(var(--icon-size) / 2);\n}\n.steps-vertical .step-line[data-v-96b53094] {\n  width: var(--line-width);\n  top: var(--icon-size);\n  bottom: 0;\n  left: calc(var(--icon-size) / 2 - 1px);\n}\n.step-finish .step-line[data-v-96b53094] {\n  background: var(--success);\n}\n.step-content[data-v-96b53094] {\n  flex: 1;\n  min-width: 0;\n}\n.steps-vertical .step-content[data-v-96b53094] {\n  padding-top: 4px;\n}\n.step-title[data-v-96b53094] {\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 22px;\n  margin-bottom: 2px;\n  word-break: break-word;\n}\n.step-time[data-v-96b53094] {\n  font-size: 12px;\n  line-height: 20px;\n  margin-bottom: 2px;\n  opacity: 0.65;\n}\n.step-finish .step-time[data-v-96b53094] {\n  color: var(--success);\n}\n.step-description[data-v-96b53094] {\n  font-size: 12px;\n  line-height: 20px;\n  opacity: 0.65;\n}\n.step-wait .step-title[data-v-96b53094] {\n  opacity: 0.65;\n}\n.step-process .step-title[data-v-96b53094] {\n  color: var(--primary);\n  font-weight: 600;\n}\n.step-error .step-title[data-v-96b53094] {\n  color: var(--error);\n}\n.step-clickable[data-v-96b53094] {\n  cursor: pointer;\n}\n.step-clickable:hover .step-icon[data-v-96b53094] {\n  transform: scale(1.05);\n}\n.step-clickable:not(.step-process):hover .step-icon[data-v-96b53094] {\n  background: var(--bg-hover);\n}\n.step-clickable:hover .step-title[data-v-96b53094] {\n  color: var(--primary);\n}\n@media (max-width: 768px) {\n.steps-horizontal[data-v-96b53094] {\n    flex-wrap: wrap;\n}\n.steps-horizontal .step-item[data-v-96b53094] {\n    flex: 0 0 50%;\n    margin-bottom: 24px;\n}\n.steps-horizontal .step-line[data-v-96b53094] {\n    display: none;\n}\n}\n@media (prefers-reduced-motion: reduce) {\n.step-icon[data-v-96b53094],\n  .step-line[data-v-96b53094] {\n    transition: none;\n}\n}"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA"}

package/dist/C_Steps.css

@@ -1,4 +1,4 @@
-/* unplugin-vue-components disabled */.c-steps[data-v-100f392a] {
+/* unplugin-vue-components disabled */.c-steps[data-v-96b53094] {
   --step-gap: 24px;
   --icon-size: 32px;
   --line-width: 2px;
@@ -11,48 +11,48 @@
   --bg-hover: rgba(0, 0, 0, 0.04);
   display: flex;
 }
-.steps-connected[data-v-100f392a] {
+.steps-connected[data-v-96b53094] {
   --line-gap: 0px;
 }
-.steps-horizontal[data-v-100f392a] {
+.steps-horizontal[data-v-96b53094] {
   flex-direction: row;
   align-items: flex-start;
 }
-.steps-vertical[data-v-100f392a] {
+.steps-vertical[data-v-96b53094] {
   flex-direction: column;
 }
-.step-item[data-v-100f392a] {
+.step-item[data-v-96b53094] {
   display: flex;
   position: relative;
   flex: 1;
   gap: 12px;
 }
-.steps-horizontal .step-item[data-v-100f392a] {
+.steps-horizontal .step-item[data-v-96b53094] {
   flex-direction: column;
   align-items: center;
   text-align: center;
   min-width: 0;
 }
-.steps-vertical .step-item[data-v-100f392a] {
+.steps-vertical .step-item[data-v-96b53094] {
   flex-direction: row;
   min-height: 72px;
   flex: none;
   width: 100%;
 }
-.step-indicator[data-v-100f392a] {
+.step-indicator[data-v-96b53094] {
   position: relative;
   display: flex;
   align-items: center;
   flex-shrink: 0;
 }
-.steps-horizontal .step-indicator[data-v-100f392a] {
+.steps-horizontal .step-indicator[data-v-96b53094] {
   width: 100%;
   justify-content: center;
 }
-.steps-vertical .step-indicator[data-v-100f392a] {
+.steps-vertical .step-indicator[data-v-96b53094] {
   flex-direction: column;
 }
-.step-icon[data-v-100f392a] {
+.step-icon[data-v-96b53094] {
   width: var(--icon-size);
   height: var(--icon-size);
   border-radius: 50%;
@@ -66,110 +66,110 @@
   transition: all 0.2s ease;
   font-size: 16px;
 }
-.step-finish .step-icon[data-v-100f392a] {
+.step-finish .step-icon[data-v-96b53094] {
   border-color: var(--success);
   color: var(--success);
 }
-.step-process .step-icon[data-v-100f392a] {
+.step-process .step-icon[data-v-96b53094] {
   border-color: var(--primary);
   background: var(--primary);
   color: white;
 }
-.step-error .step-icon[data-v-100f392a] {
+.step-error .step-icon[data-v-96b53094] {
   border-color: var(--error);
   color: var(--error);
 }
-.step-index[data-v-100f392a] {
+.step-index[data-v-96b53094] {
   font-size: 14px;
   font-weight: 500;
 }
-.step-line[data-v-100f392a] {
+.step-line[data-v-96b53094] {
   background: var(--border);
   position: absolute;
   transition: background 0.2s ease;
 }
-.steps-horizontal .step-line[data-v-100f392a] {
+.steps-horizontal .step-line[data-v-96b53094] {
   height: var(--line-width);
   left: calc(50% + var(--icon-size) / 2 + var(--line-gap));
   right: calc(-50% + var(--icon-size) / 2 + var(--line-gap));
   top: calc(var(--icon-size) / 2);
 }
-.steps-vertical .step-line[data-v-100f392a] {
+.steps-vertical .step-line[data-v-96b53094] {
   width: var(--line-width);
   top: var(--icon-size);
   bottom: 0;
   left: calc(var(--icon-size) / 2 - 1px);
 }
-.step-finish .step-line[data-v-100f392a] {
+.step-finish .step-line[data-v-96b53094] {
   background: var(--success);
 }
-.step-content[data-v-100f392a] {
+.step-content[data-v-96b53094] {
   flex: 1;
   min-width: 0;
 }
-.steps-vertical .step-content[data-v-100f392a] {
+.steps-vertical .step-content[data-v-96b53094] {
   padding-top: 4px;
 }
-.step-title[data-v-100f392a] {
+.step-title[data-v-96b53094] {
   font-size: 14px;
   font-weight: 500;
   line-height: 22px;
   margin-bottom: 2px;
   word-break: break-word;
 }
-.step-time[data-v-100f392a] {
+.step-time[data-v-96b53094] {
   font-size: 12px;
   line-height: 20px;
   margin-bottom: 2px;
   opacity: 0.65;
 }
-.step-finish .step-time[data-v-100f392a] {
+.step-finish .step-time[data-v-96b53094] {
   color: var(--success);
 }
-.step-description[data-v-100f392a] {
+.step-description[data-v-96b53094] {
   font-size: 12px;
   line-height: 20px;
   opacity: 0.65;
 }
-.step-wait .step-title[data-v-100f392a] {
+.step-wait .step-title[data-v-96b53094] {
   opacity: 0.65;
 }
-.step-process .step-title[data-v-100f392a] {
+.step-process .step-title[data-v-96b53094] {
   color: var(--primary);
   font-weight: 600;
 }
-.step-error .step-title[data-v-100f392a] {
+.step-error .step-title[data-v-96b53094] {
   color: var(--error);
 }
-.step-clickable[data-v-100f392a] {
+.step-clickable[data-v-96b53094] {
   cursor: pointer;
 }
-.step-clickable:hover .step-icon[data-v-100f392a] {
+.step-clickable:hover .step-icon[data-v-96b53094] {
   transform: scale(1.05);
 }
-.step-clickable:not(.step-process):hover .step-icon[data-v-100f392a] {
+.step-clickable:not(.step-process):hover .step-icon[data-v-96b53094] {
   background: var(--bg-hover);
 }
-.step-clickable:hover .step-title[data-v-100f392a] {
+.step-clickable:hover .step-title[data-v-96b53094] {
   color: var(--primary);
 }
 @media (max-width: 768px) {
-.steps-horizontal[data-v-100f392a] {
+.steps-horizontal[data-v-96b53094] {
     flex-wrap: wrap;
 }
-.steps-horizontal .step-item[data-v-100f392a] {
+.steps-horizontal .step-item[data-v-96b53094] {
     flex: 0 0 50%;
     margin-bottom: 24px;
 }
-.steps-horizontal .step-line[data-v-100f392a] {
+.steps-horizontal .step-line[data-v-96b53094] {
     display: none;
 }
 }
 @media (prefers-reduced-motion: reduce) {
-.step-icon[data-v-100f392a],
-  .step-line[data-v-100f392a] {
+.step-icon[data-v-96b53094],
+  .step-line[data-v-96b53094] {
     transition: none;
 }
 }
 
-/*# sourceMappingURL=C_Steps-Bk1krgiR.css.map*/
+/*# sourceMappingURL=C_Steps-BHYNJI1l.css.map*/

package/dist/C_Steps.js.map

@@ -1 +1 @@
-{"version":3,"file":"C_Steps.js","names":["direction","connected","steps","clickable"],"sources":["../src/components/C_Steps/index.vue","../src/components/C_Steps/index.vue","../src/components/C_Steps/index.vue"],"sourcesContent":["/* unplugin-vue-components disabled */<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2025-06-01\n * @Description: 步骤条组件\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n  <div\n    class=\"c-steps\"\n    :class=\"[`steps-${direction}`, { 'steps-connected': connected }]\"\n  >\n    <div\n      v-for=\"(step, index) in steps\"\n      :key=\"index\"\n      class=\"step-item\"\n      :class=\"[\n        `step-${getStatus(index)}`,\n        { 'step-clickable': clickable && !step.disabled },\n      ]\"\n      @click=\"handleClick(index)\"\n    >\n      <div class=\"step-indicator\">\n        <div class=\"step-icon\">\n          <i\n            v-if=\"step.icon\"\n            :class=\"step.icon\"\n          ></i>\n          <i\n            v-else-if=\"getStatus(index) === 'finish'\"\n            class=\"i-mdi:check\"\n          ></i>\n          <span\n            v-else\n            class=\"step-index\"\n            >{{ index + 1 }}</span\n          >\n        </div>\n        <div\n          v-if=\"index < steps.length - 1\"\n          class=\"step-line\"\n        />\n      </div>\n      <div class=\"step-content\">\n        <div class=\"step-title\">{{ step.title }}</div>\n        <div\n          v-if=\"step.time\"\n          class=\"step-time\"\n          >{{ step.time }}</div\n        >\n        <div\n          v-if=\"step.description\"\n          class=\"step-description\"\n        >\n          {{ step.description }}\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\n  defineOptions({ name: 'C_Steps' })\n\n  export interface StepItem {\n    title: string\n    description?: string\n    time?: string\n    icon?: string\n    status?: 'wait' | 'process' | 'finish' | 'error'\n    disabled?: boolean\n    detail?: string\n  }\n\n  const props = withDefaults(\n    defineProps<{\n      steps: StepItem[]\n      current?: number\n      direction?: 'horizontal' | 'vertical'\n      clickable?: boolean\n      /** 水平模式下线条是否与图标紧密相连，默认 false（两端留有对称间距）*/\n      connected?: boolean\n    }>(),\n    {\n      current: 0,\n      direction: 'horizontal',\n      clickable: false,\n      connected: false,\n    }\n  )\n\n  const emit = defineEmits<{\n    'update:current': [number]\n    change: [number]\n  }>()\n\n  const getStatus = (index: number) => {\n    if (props.steps[index].status) {\n      return props.steps[index].status\n    }\n    if (index < props.current) return 'finish'\n    if (index === props.current) return 'process'\n    return 'wait'\n  }\n\n  const handleClick = (index: number) => {\n    if (!props.clickable || props.steps[index].disabled) return\n    emit('update:current', index)\n    emit('change', index)\n  }\n</script>\n\n<style scoped lang=\"scss\">\n  @use './index.scss';\n</style>\n","/* unplugin-vue-components disabled */<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2025-06-01\n * @Description: 步骤条组件\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n  <div\n    class=\"c-steps\"\n    :class=\"[`steps-${direction}`, { 'steps-connected': connected }]\"\n  >\n    <div\n      v-for=\"(step, index) in steps\"\n      :key=\"index\"\n      class=\"step-item\"\n      :class=\"[\n        `step-${getStatus(index)}`,\n        { 'step-clickable': clickable && !step.disabled },\n      ]\"\n      @click=\"handleClick(index)\"\n    >\n      <div class=\"step-indicator\">\n        <div class=\"step-icon\">\n          <i\n            v-if=\"step.icon\"\n            :class=\"step.icon\"\n          ></i>\n          <i\n            v-else-if=\"getStatus(index) === 'finish'\"\n            class=\"i-mdi:check\"\n          ></i>\n          <span\n            v-else\n            class=\"step-index\"\n            >{{ index + 1 }}</span\n          >\n        </div>\n        <div\n          v-if=\"index < steps.length - 1\"\n          class=\"step-line\"\n        />\n      </div>\n      <div class=\"step-content\">\n        <div class=\"step-title\">{{ step.title }}</div>\n        <div\n          v-if=\"step.time\"\n          class=\"step-time\"\n          >{{ step.time }}</div\n        >\n        <div\n          v-if=\"step.description\"\n          class=\"step-description\"\n        >\n          {{ step.description }}\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\n  defineOptions({ name: 'C_Steps' })\n\n  export interface StepItem {\n    title: string\n    description?: string\n    time?: string\n    icon?: string\n    status?: 'wait' | 'process' | 'finish' | 'error'\n    disabled?: boolean\n    detail?: string\n  }\n\n  const props = withDefaults(\n    defineProps<{\n      steps: StepItem[]\n      current?: number\n      direction?: 'horizontal' | 'vertical'\n      clickable?: boolean\n      /** 水平模式下线条是否与图标紧密相连，默认 false（两端留有对称间距）*/\n      connected?: boolean\n    }>(),\n    {\n      current: 0,\n      direction: 'horizontal',\n      clickable: false,\n      connected: false,\n    }\n  )\n\n  const emit = defineEmits<{\n    'update:current': [number]\n    change: [number]\n  }>()\n\n  const getStatus = (index: number) => {\n    if (props.steps[index].status) {\n      return props.steps[index].status\n    }\n    if (index < props.current) return 'finish'\n    if (index === props.current) return 'process'\n    return 'wait'\n  }\n\n  const handleClick = (index: number) => {\n    if (!props.clickable || props.steps[index].disabled) return\n    emit('update:current', index)\n    emit('change', index)\n  }\n</script>\n\n<style scoped lang=\"scss\">\n  @use './index.scss';\n</style>\n","<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2025-06-01\n * @Description: 步骤条组件\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n  <div\n    class=\"c-steps\"\n    :class=\"[`steps-${direction}`, { 'steps-connected': connected }]\"\n  >\n    <div\n      v-for=\"(step, index) in steps\"\n      :key=\"index\"\n      class=\"step-item\"\n      :class=\"[\n        `step-${getStatus(index)}`,\n        { 'step-clickable': clickable && !step.disabled },\n      ]\"\n      @click=\"handleClick(index)\"\n    >\n      <div class=\"step-indicator\">\n        <div class=\"step-icon\">\n          <i\n            v-if=\"step.icon\"\n            :class=\"step.icon\"\n          ></i>\n          <i\n            v-else-if=\"getStatus(index) === 'finish'\"\n            class=\"i-mdi:check\"\n          ></i>\n          <span\n            v-else\n            class=\"step-index\"\n            >{{ index + 1 }}</span\n          >\n        </div>\n        <div\n          v-if=\"index < steps.length - 1\"\n          class=\"step-line\"\n        />\n      </div>\n      <div class=\"step-content\">\n        <div class=\"step-title\">{{ step.title }}</div>\n        <div\n          v-if=\"step.time\"\n          class=\"step-time\"\n          >{{ step.time }}</div\n        >\n        <div\n          v-if=\"step.description\"\n          class=\"step-description\"\n        >\n          {{ step.description }}\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\n  defineOptions({ name: 'C_Steps' })\n\n  export interface StepItem {\n    title: string\n    description?: string\n    time?: string\n    icon?: string\n    status?: 'wait' | 'process' | 'finish' | 'error'\n    disabled?: boolean\n    detail?: string\n  }\n\n  const props = withDefaults(\n    defineProps<{\n      steps: StepItem[]\n      current?: number\n      direction?: 'horizontal' | 'vertical'\n      clickable?: boolean\n      /** 水平模式下线条是否与图标紧密相连，默认 false（两端留有对称间距）*/\n      connected?: boolean\n    }>(),\n    {\n      current: 0,\n      direction: 'horizontal',\n      clickable: false,\n      connected: false,\n    }\n  )\n\n  const emit = defineEmits<{\n    'update:current': [number]\n    change: [number]\n  }>()\n\n  const getStatus = (index: number) => {\n    if (props.steps[index].status) {\n      return props.steps[index].status\n    }\n    if (index < props.current) return 'finish'\n    if (index === props.current) return 'process'\n    return 'wait'\n  }\n\n  const handleClick = (index: number) => {\n    if (!props.clickable || props.steps[index].disabled) return\n    emit('update:current', index)\n    emit('change', index)\n  }\n</script>\n\n<style scoped lang=\"scss\">\n  @use './index.scss';\n</style>\n"],"mappings":"ylBE0EE,IAAM,EAAQ,EAiBR,EAAO,EAKP,EAAa,GACb,EAAM,MAAM,GAAO,OACd,EAAM,MAAM,GAAO,OAExB,EAAQ,EAAM,QAAgB,SAC9B,IAAU,EAAM,QAAgB,UAC7B,OAGH,EAAe,GAAkB,CACjC,CAAC,EAAM,WAAa,EAAM,MAAM,GAAO,WAC3C,EAAK,iBAAkB,EAAK,CAC5B,EAAK,SAAU,EAAK,4DAlDhB,MAAA,CAjDJ,OAAA,EAAA,EAAA,gBAAK,CAAC,UAAS,CAAA,SACGA,EAAAA,YAAS,CAAA,kBAAyBC,EAAAA,UAAS,CAAA,CAAA,CAAA,CAAA,CAAA,GAAA,EAAA,EAAA,WAAA,GAAA,EAAA,EAAA,EAAA,oBA+CvD,EAAA,SAAA,MAAA,EAAA,EAAA,YA5CoBC,EAAAA,OAAhB,EAAM,gDA4CV,MAAA,CA3CH,IAAK,EACN,OAAA,EAAA,EAAA,gBAAK,CAAC,YAAW,CAAA,QACS,EAAU,EAAK,GAAA,CAAA,iBAAiCC,EAAAA,WAAS,CAAK,EAAK,SAAQ,CAAA,CAAA,CAAA,CAIpG,QAAK,GAAE,EAAY,EAAK,4BAsBnB,MApBN,EAoBM,EAAA,EAAA,EAAA,oBALE,MAdN,EAcM,CAZI,EAAK,OAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAER,IAAA,OADF,OAAA,EAAA,EAAA,gBAAO,EAAK,KAAI,WAGN,EAAU,EAAK,GAAA,WAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAEvB,IAHL,EAGK,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAKJ,OAJD,GAAA,EAAA,EAAA,iBAGM,EAAK,EAAA,CAAA,EAAA,EAAA,CAAA,CAIL,EAAQD,EAAAA,MAAM,OAAM,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAE1B,MAHF,EAGE,GAAA,EAAA,EAAA,oBAAA,OAAA,GAAA,CAAA,CAAA,EAAA,EAAA,EAAA,oBAeE,MAbN,EAaM,0BAZ0C,MAA9C,GAAA,EAAA,EAAA,iBAA2B,EAAK,MAAK,CAAA,EAAA,CAE7B,EAAK,OAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAGZ,MAJD,GAAA,EAAA,EAAA,iBAGM,EAAK,KAAI,CAAA,EAAA,GAAA,EAAA,EAAA,oBAAA,OAAA,GAAA,CAGP,EAAK,cAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAIP,MALN,GAAA,EAAA,EAAA,iBAIK,EAAK,YAAW,CAAA,EAAA,GAAA,EAAA,EAAA,oBAAA,OAAA,GAAA"}
+{"version":3,"file":"C_Steps.js","names":["direction","connected","steps","clickable"],"sources":["../src/components/C_Steps/index.vue","../src/components/C_Steps/index.vue","../src/components/C_Steps/index.vue"],"sourcesContent":["/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-01\r\n * @Description: 步骤条组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <div\r\n    class=\"c-steps\"\r\n    :class=\"[`steps-${direction}`, { 'steps-connected': connected }]\"\r\n  >\r\n    <div\r\n      v-for=\"(step, index) in steps\"\r\n      :key=\"index\"\r\n      class=\"step-item\"\r\n      :class=\"[\r\n        `step-${getStatus(index)}`,\r\n        { 'step-clickable': clickable && !step.disabled },\r\n      ]\"\r\n      @click=\"handleClick(index)\"\r\n    >\r\n      <div class=\"step-indicator\">\r\n        <div class=\"step-icon\">\r\n          <i\r\n            v-if=\"step.icon\"\r\n            :class=\"step.icon\"\r\n          ></i>\r\n          <i\r\n            v-else-if=\"getStatus(index) === 'finish'\"\r\n            class=\"i-mdi:check\"\r\n          ></i>\r\n          <span\r\n            v-else\r\n            class=\"step-index\"\r\n            >{{ index + 1 }}</span\r\n          >\r\n        </div>\r\n        <div\r\n          v-if=\"index < steps.length - 1\"\r\n          class=\"step-line\"\r\n        />\r\n      </div>\r\n      <div class=\"step-content\">\r\n        <div class=\"step-title\">{{ step.title }}</div>\r\n        <div\r\n          v-if=\"step.time\"\r\n          class=\"step-time\"\r\n          >{{ step.time }}</div\r\n        >\r\n        <div\r\n          v-if=\"step.description\"\r\n          class=\"step-description\"\r\n        >\r\n          {{ step.description }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n  defineOptions({ name: 'C_Steps' })\r\n\r\n  export interface StepItem {\r\n    title: string\r\n    description?: string\r\n    time?: string\r\n    icon?: string\r\n    status?: 'wait' | 'process' | 'finish' | 'error'\r\n    disabled?: boolean\r\n    detail?: string\r\n  }\r\n\r\n  const props = withDefaults(\r\n    defineProps<{\r\n      steps: StepItem[]\r\n      current?: number\r\n      direction?: 'horizontal' | 'vertical'\r\n      clickable?: boolean\r\n      /** 水平模式下线条是否与图标紧密相连，默认 false（两端留有对称间距）*/\r\n      connected?: boolean\r\n    }>(),\r\n    {\r\n      current: 0,\r\n      direction: 'horizontal',\r\n      clickable: false,\r\n      connected: false,\r\n    }\r\n  )\r\n\r\n  const emit = defineEmits<{\r\n    'update:current': [number]\r\n    change: [number]\r\n  }>()\r\n\r\n  const getStatus = (index: number) => {\r\n    if (props.steps[index].status) {\r\n      return props.steps[index].status\r\n    }\r\n    if (index < props.current) return 'finish'\r\n    if (index === props.current) return 'process'\r\n    return 'wait'\r\n  }\r\n\r\n  const handleClick = (index: number) => {\r\n    if (!props.clickable || props.steps[index].disabled) return\r\n    emit('update:current', index)\r\n    emit('change', index)\r\n  }\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n  @use './index.scss';\r\n</style>\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-01\r\n * @Description: 步骤条组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <div\r\n    class=\"c-steps\"\r\n    :class=\"[`steps-${direction}`, { 'steps-connected': connected }]\"\r\n  >\r\n    <div\r\n      v-for=\"(step, index) in steps\"\r\n      :key=\"index\"\r\n      class=\"step-item\"\r\n      :class=\"[\r\n        `step-${getStatus(index)}`,\r\n        { 'step-clickable': clickable && !step.disabled },\r\n      ]\"\r\n      @click=\"handleClick(index)\"\r\n    >\r\n      <div class=\"step-indicator\">\r\n        <div class=\"step-icon\">\r\n          <i\r\n            v-if=\"step.icon\"\r\n            :class=\"step.icon\"\r\n          ></i>\r\n          <i\r\n            v-else-if=\"getStatus(index) === 'finish'\"\r\n            class=\"i-mdi:check\"\r\n          ></i>\r\n          <span\r\n            v-else\r\n            class=\"step-index\"\r\n            >{{ index + 1 }}</span\r\n          >\r\n        </div>\r\n        <div\r\n          v-if=\"index < steps.length - 1\"\r\n          class=\"step-line\"\r\n        />\r\n      </div>\r\n      <div class=\"step-content\">\r\n        <div class=\"step-title\">{{ step.title }}</div>\r\n        <div\r\n          v-if=\"step.time\"\r\n          class=\"step-time\"\r\n          >{{ step.time }}</div\r\n        >\r\n        <div\r\n          v-if=\"step.description\"\r\n          class=\"step-description\"\r\n        >\r\n          {{ step.description }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n  defineOptions({ name: 'C_Steps' })\r\n\r\n  export interface StepItem {\r\n    title: string\r\n    description?: string\r\n    time?: string\r\n    icon?: string\r\n    status?: 'wait' | 'process' | 'finish' | 'error'\r\n    disabled?: boolean\r\n    detail?: string\r\n  }\r\n\r\n  const props = withDefaults(\r\n    defineProps<{\r\n      steps: StepItem[]\r\n      current?: number\r\n      direction?: 'horizontal' | 'vertical'\r\n      clickable?: boolean\r\n      /** 水平模式下线条是否与图标紧密相连，默认 false（两端留有对称间距）*/\r\n      connected?: boolean\r\n    }>(),\r\n    {\r\n      current: 0,\r\n      direction: 'horizontal',\r\n      clickable: false,\r\n      connected: false,\r\n    }\r\n  )\r\n\r\n  const emit = defineEmits<{\r\n    'update:current': [number]\r\n    change: [number]\r\n  }>()\r\n\r\n  const getStatus = (index: number) => {\r\n    if (props.steps[index].status) {\r\n      return props.steps[index].status\r\n    }\r\n    if (index < props.current) return 'finish'\r\n    if (index === props.current) return 'process'\r\n    return 'wait'\r\n  }\r\n\r\n  const handleClick = (index: number) => {\r\n    if (!props.clickable || props.steps[index].disabled) return\r\n    emit('update:current', index)\r\n    emit('change', index)\r\n  }\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n  @use './index.scss';\r\n</style>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-01\r\n * @Description: 步骤条组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <div\r\n    class=\"c-steps\"\r\n    :class=\"[`steps-${direction}`, { 'steps-connected': connected }]\"\r\n  >\r\n    <div\r\n      v-for=\"(step, index) in steps\"\r\n      :key=\"index\"\r\n      class=\"step-item\"\r\n      :class=\"[\r\n        `step-${getStatus(index)}`,\r\n        { 'step-clickable': clickable && !step.disabled },\r\n      ]\"\r\n      @click=\"handleClick(index)\"\r\n    >\r\n      <div class=\"step-indicator\">\r\n        <div class=\"step-icon\">\r\n          <i\r\n            v-if=\"step.icon\"\r\n            :class=\"step.icon\"\r\n          ></i>\r\n          <i\r\n            v-else-if=\"getStatus(index) === 'finish'\"\r\n            class=\"i-mdi:check\"\r\n          ></i>\r\n          <span\r\n            v-else\r\n            class=\"step-index\"\r\n            >{{ index + 1 }}</span\r\n          >\r\n        </div>\r\n        <div\r\n          v-if=\"index < steps.length - 1\"\r\n          class=\"step-line\"\r\n        />\r\n      </div>\r\n      <div class=\"step-content\">\r\n        <div class=\"step-title\">{{ step.title }}</div>\r\n        <div\r\n          v-if=\"step.time\"\r\n          class=\"step-time\"\r\n          >{{ step.time }}</div\r\n        >\r\n        <div\r\n          v-if=\"step.description\"\r\n          class=\"step-description\"\r\n        >\r\n          {{ step.description }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n  defineOptions({ name: 'C_Steps' })\r\n\r\n  export interface StepItem {\r\n    title: string\r\n    description?: string\r\n    time?: string\r\n    icon?: string\r\n    status?: 'wait' | 'process' | 'finish' | 'error'\r\n    disabled?: boolean\r\n    detail?: string\r\n  }\r\n\r\n  const props = withDefaults(\r\n    defineProps<{\r\n      steps: StepItem[]\r\n      current?: number\r\n      direction?: 'horizontal' | 'vertical'\r\n      clickable?: boolean\r\n      /** 水平模式下线条是否与图标紧密相连，默认 false（两端留有对称间距）*/\r\n      connected?: boolean\r\n    }>(),\r\n    {\r\n      current: 0,\r\n      direction: 'horizontal',\r\n      clickable: false,\r\n      connected: false,\r\n    }\r\n  )\r\n\r\n  const emit = defineEmits<{\r\n    'update:current': [number]\r\n    change: [number]\r\n  }>()\r\n\r\n  const getStatus = (index: number) => {\r\n    if (props.steps[index].status) {\r\n      return props.steps[index].status\r\n    }\r\n    if (index < props.current) return 'finish'\r\n    if (index === props.current) return 'process'\r\n    return 'wait'\r\n  }\r\n\r\n  const handleClick = (index: number) => {\r\n    if (!props.clickable || props.steps[index].disabled) return\r\n    emit('update:current', index)\r\n    emit('change', index)\r\n  }\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n  @use './index.scss';\r\n</style>\r\n"],"mappings":"ylBE0EE,IAAM,EAAQ,EAiBR,EAAO,EAKP,EAAa,GACb,EAAM,MAAM,GAAO,OACd,EAAM,MAAM,GAAO,OAExB,EAAQ,EAAM,QAAgB,SAC9B,IAAU,EAAM,QAAgB,UAC7B,OAGH,EAAe,GAAkB,CACjC,CAAC,EAAM,WAAa,EAAM,MAAM,GAAO,WAC3C,EAAK,iBAAkB,EAAM,CAC7B,EAAK,SAAU,EAAM,4DAlDjB,MAAA,CAjDJ,OAAA,EAAA,EAAA,gBAAK,CAAC,UAAS,CAAA,SACGA,EAAAA,YAAS,CAAA,kBAAyBC,EAAAA,UAAS,CAAA,CAAA,CAAA,CAAA,CAAA,GAAA,EAAA,EAAA,WAAA,GAAA,EAAA,EAAA,EAAA,oBA+CvD,EAAA,SAAA,MAAA,EAAA,EAAA,YA5CoBC,EAAAA,OAAhB,EAAM,gDA4CV,MAAA,CA3CH,IAAK,EACN,OAAA,EAAA,EAAA,gBAAK,CAAC,YAAW,CAAA,QACU,EAAU,EAAK,GAAA,CAAA,iBAAkCC,EAAAA,WAAS,CAAK,EAAK,SAAQ,CAAA,CAAA,CAAA,CAItG,QAAK,GAAE,EAAY,EAAK,4BAsBnB,MApBN,EAoBM,EAAA,EAAA,EAAA,oBALE,MAdN,EAcM,CAZI,EAAK,OAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAER,IAAA,OADF,OAAA,EAAA,EAAA,gBAAO,EAAK,KAAI,WAGN,EAAU,EAAK,GAAA,WAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAEvB,IAHL,EAGK,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAIgC,OAHrC,GAAA,EAAA,EAAA,iBAGM,EAAK,EAAA,CAAA,EAAA,EAAA,CAAA,CAIL,EAAQD,EAAAA,MAAM,OAAM,IAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAE1B,MAHF,EAGE,GAAA,EAAA,EAAA,oBAAA,OAAA,GAAA,CAAA,CAAA,EAAA,EAAA,EAAA,oBAeE,MAbN,EAaM,0BAZ0C,MAA9C,GAAA,EAAA,EAAA,iBAA2B,EAAK,MAAK,CAAA,EAAA,CAE7B,EAAK,OAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAEqB,MAHlC,GAAA,EAAA,EAAA,iBAGM,EAAK,KAAI,CAAA,EAAA,GAAA,EAAA,EAAA,oBAAA,OAAA,GAAA,CAGP,EAAK,cAAA,EAAA,EAAA,YAAA,EAAA,EAAA,EAAA,oBAIP,MALN,GAAA,EAAA,EAAA,iBAIK,EAAK,YAAW,CAAA,EAAA,GAAA,EAAA,EAAA,oBAAA,OAAA,GAAA"}

package/dist/C_Steps2.js

@@ -1,2 +1,2 @@
-import{t as e}from"./export-helper.js";import{Fragment as t,createCommentVNode as n,createElementBlock as r,createElementVNode as i,defineComponent as a,normalizeClass as o,openBlock as s,renderList as c,toDisplayString as l}from"vue";const u=[`onClick`],d={class:`step-indicator`},f={class:`step-icon`},p={key:1,class:`i-mdi:check`},m={key:2,class:`step-index`},h={key:0,class:`step-line`},g={class:`step-content`},_={class:`step-title`},v={key:0,class:`step-time`},y={key:1,class:`step-description`};var b=e(a({name:`C_Steps`,__name:`index`,props:{steps:{},current:{default:0},direction:{default:`horizontal`},clickable:{type:Boolean,default:!1},connected:{type:Boolean,default:!1}},emits:[`update:current`,`change`],setup(e,{emit:a}){let b=e,x=a,S=e=>b.steps[e].status?b.steps[e].status:e<b.current?`finish`:e===b.current?`process`:`wait`,C=e=>{!b.clickable||b.steps[e].disabled||(x(`update:current`,e),x(`change`,e))};return(e,a)=>(s(),r(`div`,{class:o([`c-steps`,[`steps-${e.direction}`,{"steps-connected":e.connected}]])},[(s(!0),r(t,null,c(e.steps,(t,a)=>(s(),r(`div`,{key:a,class:o([`step-item`,[`step-${S(a)}`,{"step-clickable":e.clickable&&!t.disabled}]]),onClick:e=>C(a)},[i(`div`,d,[i(`div`,f,[t.icon?(s(),r(`i`,{key:0,class:o(t.icon)},null,2)):S(a)===`finish`?(s(),r(`i`,p)):(s(),r(`span`,m,l(a+1),1))]),a<e.steps.length-1?(s(),r(`div`,h)):n(`v-if`,!0)]),i(`div`,g,[i(`div`,_,l(t.title),1),t.time?(s(),r(`div`,v,l(t.time),1)):n(`v-if`,!0),t.description?(s(),r(`div`,y,l(t.description),1)):n(`v-if`,!0)])],10,u))),128))],2))}}),[[`__scopeId`,`data-v-100f392a`]]);export{b as t};
+import{t as e}from"./export-helper.js";import{Fragment as t,createCommentVNode as n,createElementBlock as r,createElementVNode as i,defineComponent as a,normalizeClass as o,openBlock as s,renderList as c,toDisplayString as l}from"vue";const u=[`onClick`],d={class:`step-indicator`},f={class:`step-icon`},p={key:1,class:`i-mdi:check`},m={key:2,class:`step-index`},h={key:0,class:`step-line`},g={class:`step-content`},_={class:`step-title`},v={key:0,class:`step-time`},y={key:1,class:`step-description`};var b=e(a({name:`C_Steps`,__name:`index`,props:{steps:{},current:{default:0},direction:{default:`horizontal`},clickable:{type:Boolean,default:!1},connected:{type:Boolean,default:!1}},emits:[`update:current`,`change`],setup(e,{emit:a}){let b=e,x=a,S=e=>b.steps[e].status?b.steps[e].status:e<b.current?`finish`:e===b.current?`process`:`wait`,C=e=>{!b.clickable||b.steps[e].disabled||(x(`update:current`,e),x(`change`,e))};return(e,a)=>(s(),r(`div`,{class:o([`c-steps`,[`steps-${e.direction}`,{"steps-connected":e.connected}]])},[(s(!0),r(t,null,c(e.steps,(t,a)=>(s(),r(`div`,{key:a,class:o([`step-item`,[`step-${S(a)}`,{"step-clickable":e.clickable&&!t.disabled}]]),onClick:e=>C(a)},[i(`div`,d,[i(`div`,f,[t.icon?(s(),r(`i`,{key:0,class:o(t.icon)},null,2)):S(a)===`finish`?(s(),r(`i`,p)):(s(),r(`span`,m,l(a+1),1))]),a<e.steps.length-1?(s(),r(`div`,h)):n(`v-if`,!0)]),i(`div`,g,[i(`div`,_,l(t.title),1),t.time?(s(),r(`div`,v,l(t.time),1)):n(`v-if`,!0),t.description?(s(),r(`div`,y,l(t.description),1)):n(`v-if`,!0)])],10,u))),128))],2))}}),[[`__scopeId`,`data-v-96b53094`]]);export{b as t};
 //# sourceMappingURL=C_Steps2.js.map

package/dist/C_Steps2.js.map

@@ -1 +1 @@
-{"version":3,"file":"C_Steps2.js","names":["direction","connected","steps","clickable"],"sources":["../src/components/C_Steps/index.vue","../src/components/C_Steps/index.vue","../src/components/C_Steps/index.vue"],"sourcesContent":["/* unplugin-vue-components disabled */<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2025-06-01\n * @Description: 步骤条组件\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n  <div\n    class=\"c-steps\"\n    :class=\"[`steps-${direction}`, { 'steps-connected': connected }]\"\n  >\n    <div\n      v-for=\"(step, index) in steps\"\n      :key=\"index\"\n      class=\"step-item\"\n      :class=\"[\n        `step-${getStatus(index)}`,\n        { 'step-clickable': clickable && !step.disabled },\n      ]\"\n      @click=\"handleClick(index)\"\n    >\n      <div class=\"step-indicator\">\n        <div class=\"step-icon\">\n          <i\n            v-if=\"step.icon\"\n            :class=\"step.icon\"\n          ></i>\n          <i\n            v-else-if=\"getStatus(index) === 'finish'\"\n            class=\"i-mdi:check\"\n          ></i>\n          <span\n            v-else\n            class=\"step-index\"\n            >{{ index + 1 }}</span\n          >\n        </div>\n        <div\n          v-if=\"index < steps.length - 1\"\n          class=\"step-line\"\n        />\n      </div>\n      <div class=\"step-content\">\n        <div class=\"step-title\">{{ step.title }}</div>\n        <div\n          v-if=\"step.time\"\n          class=\"step-time\"\n          >{{ step.time }}</div\n        >\n        <div\n          v-if=\"step.description\"\n          class=\"step-description\"\n        >\n          {{ step.description }}\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\n  defineOptions({ name: 'C_Steps' })\n\n  export interface StepItem {\n    title: string\n    description?: string\n    time?: string\n    icon?: string\n    status?: 'wait' | 'process' | 'finish' | 'error'\n    disabled?: boolean\n    detail?: string\n  }\n\n  const props = withDefaults(\n    defineProps<{\n      steps: StepItem[]\n      current?: number\n      direction?: 'horizontal' | 'vertical'\n      clickable?: boolean\n      /** 水平模式下线条是否与图标紧密相连，默认 false（两端留有对称间距）*/\n      connected?: boolean\n    }>(),\n    {\n      current: 0,\n      direction: 'horizontal',\n      clickable: false,\n      connected: false,\n    }\n  )\n\n  const emit = defineEmits<{\n    'update:current': [number]\n    change: [number]\n  }>()\n\n  const getStatus = (index: number) => {\n    if (props.steps[index].status) {\n      return props.steps[index].status\n    }\n    if (index < props.current) return 'finish'\n    if (index === props.current) return 'process'\n    return 'wait'\n  }\n\n  const handleClick = (index: number) => {\n    if (!props.clickable || props.steps[index].disabled) return\n    emit('update:current', index)\n    emit('change', index)\n  }\n</script>\n\n<style scoped lang=\"scss\">\n  @use './index.scss';\n</style>\n","/* unplugin-vue-components disabled */<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2025-06-01\n * @Description: 步骤条组件\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n  <div\n    class=\"c-steps\"\n    :class=\"[`steps-${direction}`, { 'steps-connected': connected }]\"\n  >\n    <div\n      v-for=\"(step, index) in steps\"\n      :key=\"index\"\n      class=\"step-item\"\n      :class=\"[\n        `step-${getStatus(index)}`,\n        { 'step-clickable': clickable && !step.disabled },\n      ]\"\n      @click=\"handleClick(index)\"\n    >\n      <div class=\"step-indicator\">\n        <div class=\"step-icon\">\n          <i\n            v-if=\"step.icon\"\n            :class=\"step.icon\"\n          ></i>\n          <i\n            v-else-if=\"getStatus(index) === 'finish'\"\n            class=\"i-mdi:check\"\n          ></i>\n          <span\n            v-else\n            class=\"step-index\"\n            >{{ index + 1 }}</span\n          >\n        </div>\n        <div\n          v-if=\"index < steps.length - 1\"\n          class=\"step-line\"\n        />\n      </div>\n      <div class=\"step-content\">\n        <div class=\"step-title\">{{ step.title }}</div>\n        <div\n          v-if=\"step.time\"\n          class=\"step-time\"\n          >{{ step.time }}</div\n        >\n        <div\n          v-if=\"step.description\"\n          class=\"step-description\"\n        >\n          {{ step.description }}\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\n  defineOptions({ name: 'C_Steps' })\n\n  export interface StepItem {\n    title: string\n    description?: string\n    time?: string\n    icon?: string\n    status?: 'wait' | 'process' | 'finish' | 'error'\n    disabled?: boolean\n    detail?: string\n  }\n\n  const props = withDefaults(\n    defineProps<{\n      steps: StepItem[]\n      current?: number\n      direction?: 'horizontal' | 'vertical'\n      clickable?: boolean\n      /** 水平模式下线条是否与图标紧密相连，默认 false（两端留有对称间距）*/\n      connected?: boolean\n    }>(),\n    {\n      current: 0,\n      direction: 'horizontal',\n      clickable: false,\n      connected: false,\n    }\n  )\n\n  const emit = defineEmits<{\n    'update:current': [number]\n    change: [number]\n  }>()\n\n  const getStatus = (index: number) => {\n    if (props.steps[index].status) {\n      return props.steps[index].status\n    }\n    if (index < props.current) return 'finish'\n    if (index === props.current) return 'process'\n    return 'wait'\n  }\n\n  const handleClick = (index: number) => {\n    if (!props.clickable || props.steps[index].disabled) return\n    emit('update:current', index)\n    emit('change', index)\n  }\n</script>\n\n<style scoped lang=\"scss\">\n  @use './index.scss';\n</style>\n","<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2025-06-01\n * @Description: 步骤条组件\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n  <div\n    class=\"c-steps\"\n    :class=\"[`steps-${direction}`, { 'steps-connected': connected }]\"\n  >\n    <div\n      v-for=\"(step, index) in steps\"\n      :key=\"index\"\n      class=\"step-item\"\n      :class=\"[\n        `step-${getStatus(index)}`,\n        { 'step-clickable': clickable && !step.disabled },\n      ]\"\n      @click=\"handleClick(index)\"\n    >\n      <div class=\"step-indicator\">\n        <div class=\"step-icon\">\n          <i\n            v-if=\"step.icon\"\n            :class=\"step.icon\"\n          ></i>\n          <i\n            v-else-if=\"getStatus(index) === 'finish'\"\n            class=\"i-mdi:check\"\n          ></i>\n          <span\n            v-else\n            class=\"step-index\"\n            >{{ index + 1 }}</span\n          >\n        </div>\n        <div\n          v-if=\"index < steps.length - 1\"\n          class=\"step-line\"\n        />\n      </div>\n      <div class=\"step-content\">\n        <div class=\"step-title\">{{ step.title }}</div>\n        <div\n          v-if=\"step.time\"\n          class=\"step-time\"\n          >{{ step.time }}</div\n        >\n        <div\n          v-if=\"step.description\"\n          class=\"step-description\"\n        >\n          {{ step.description }}\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\n  defineOptions({ name: 'C_Steps' })\n\n  export interface StepItem {\n    title: string\n    description?: string\n    time?: string\n    icon?: string\n    status?: 'wait' | 'process' | 'finish' | 'error'\n    disabled?: boolean\n    detail?: string\n  }\n\n  const props = withDefaults(\n    defineProps<{\n      steps: StepItem[]\n      current?: number\n      direction?: 'horizontal' | 'vertical'\n      clickable?: boolean\n      /** 水平模式下线条是否与图标紧密相连，默认 false（两端留有对称间距）*/\n      connected?: boolean\n    }>(),\n    {\n      current: 0,\n      direction: 'horizontal',\n      clickable: false,\n      connected: false,\n    }\n  )\n\n  const emit = defineEmits<{\n    'update:current': [number]\n    change: [number]\n  }>()\n\n  const getStatus = (index: number) => {\n    if (props.steps[index].status) {\n      return props.steps[index].status\n    }\n    if (index < props.current) return 'finish'\n    if (index === props.current) return 'process'\n    return 'wait'\n  }\n\n  const handleClick = (index: number) => {\n    if (!props.clickable || props.steps[index].disabled) return\n    emit('update:current', index)\n    emit('change', index)\n  }\n</script>\n\n<style scoped lang=\"scss\">\n  @use './index.scss';\n</style>\n"],"mappings":"iuBE0EE,IAAM,EAAQ,EAiBR,EAAO,EAKP,EAAa,GACb,EAAM,MAAM,GAAO,OACd,EAAM,MAAM,GAAO,OAExB,EAAQ,EAAM,QAAgB,SAC9B,IAAU,EAAM,QAAgB,UAC7B,OAGH,EAAe,GAAkB,CACjC,CAAC,EAAM,WAAa,EAAM,MAAM,GAAO,WAC3C,EAAK,iBAAkB,EAAK,CAC5B,EAAK,SAAU,EAAK,qBApGtB,EAkDM,MAAA,CAjDJ,MAAK,EAAA,CAAC,UAAS,CAAA,SACGA,EAAAA,YAAS,CAAA,kBAAyBC,EAAAA,UAAS,CAAA,CAAA,CAAA,CAAA,CAAA,EAAA,EAAA,GAAA,CAE7D,EA6CM,EAAA,KAAA,EA5CoBC,EAAAA,OAAhB,EAAM,SADhB,EA6CM,MAAA,CA3CH,IAAK,EACN,MAAK,EAAA,CAAC,YAAW,CAAA,QACS,EAAU,EAAK,GAAA,CAAA,iBAAiCC,EAAAA,WAAS,CAAK,EAAK,SAAQ,CAAA,CAAA,CAAA,CAIpG,QAAK,GAAE,EAAY,EAAK,GAEzB,EAoBM,MApBN,EAoBM,CAnBJ,EAcM,MAdN,EAcM,CAZI,EAAK,MAAA,GAAA,CADb,EAGK,IAAA,OADF,MAAK,EAAE,EAAK,KAAI,WAGN,EAAU,EAAK,GAAA,UAAA,GAAA,CAD5B,EAGK,IAHL,EAGK,GAAA,GAAA,CACL,EAIC,OAJD,EAIC,EADK,EAAK,EAAA,CAAA,EAAA,EAAA,CAAA,CAIL,EAAQD,EAAAA,MAAM,OAAM,GAAA,GAAA,CAD5B,EAGE,MAHF,EAGE,EAAA,EAAA,OAAA,GAAA,CAAA,CAAA,CAEJ,EAaM,MAbN,EAaM,CAZJ,EAA8C,MAA9C,EAA8C,EAAnB,EAAK,MAAK,CAAA,EAAA,CAE7B,EAAK,MAAA,GAAA,CADb,EAIC,MAJD,EAIC,EADK,EAAK,KAAI,CAAA,EAAA,EAAA,EAAA,OAAA,GAAA,CAGP,EAAK,aAAA,GAAA,CADb,EAKM,MALN,EAKM,EADD,EAAK,YAAW,CAAA,EAAA,EAAA,EAAA,OAAA,GAAA"}
+{"version":3,"file":"C_Steps2.js","names":["direction","connected","steps","clickable"],"sources":["../src/components/C_Steps/index.vue","../src/components/C_Steps/index.vue","../src/components/C_Steps/index.vue"],"sourcesContent":["/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-01\r\n * @Description: 步骤条组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <div\r\n    class=\"c-steps\"\r\n    :class=\"[`steps-${direction}`, { 'steps-connected': connected }]\"\r\n  >\r\n    <div\r\n      v-for=\"(step, index) in steps\"\r\n      :key=\"index\"\r\n      class=\"step-item\"\r\n      :class=\"[\r\n        `step-${getStatus(index)}`,\r\n        { 'step-clickable': clickable && !step.disabled },\r\n      ]\"\r\n      @click=\"handleClick(index)\"\r\n    >\r\n      <div class=\"step-indicator\">\r\n        <div class=\"step-icon\">\r\n          <i\r\n            v-if=\"step.icon\"\r\n            :class=\"step.icon\"\r\n          ></i>\r\n          <i\r\n            v-else-if=\"getStatus(index) === 'finish'\"\r\n            class=\"i-mdi:check\"\r\n          ></i>\r\n          <span\r\n            v-else\r\n            class=\"step-index\"\r\n            >{{ index + 1 }}</span\r\n          >\r\n        </div>\r\n        <div\r\n          v-if=\"index < steps.length - 1\"\r\n          class=\"step-line\"\r\n        />\r\n      </div>\r\n      <div class=\"step-content\">\r\n        <div class=\"step-title\">{{ step.title }}</div>\r\n        <div\r\n          v-if=\"step.time\"\r\n          class=\"step-time\"\r\n          >{{ step.time }}</div\r\n        >\r\n        <div\r\n          v-if=\"step.description\"\r\n          class=\"step-description\"\r\n        >\r\n          {{ step.description }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n  defineOptions({ name: 'C_Steps' })\r\n\r\n  export interface StepItem {\r\n    title: string\r\n    description?: string\r\n    time?: string\r\n    icon?: string\r\n    status?: 'wait' | 'process' | 'finish' | 'error'\r\n    disabled?: boolean\r\n    detail?: string\r\n  }\r\n\r\n  const props = withDefaults(\r\n    defineProps<{\r\n      steps: StepItem[]\r\n      current?: number\r\n      direction?: 'horizontal' | 'vertical'\r\n      clickable?: boolean\r\n      /** 水平模式下线条是否与图标紧密相连，默认 false（两端留有对称间距）*/\r\n      connected?: boolean\r\n    }>(),\r\n    {\r\n      current: 0,\r\n      direction: 'horizontal',\r\n      clickable: false,\r\n      connected: false,\r\n    }\r\n  )\r\n\r\n  const emit = defineEmits<{\r\n    'update:current': [number]\r\n    change: [number]\r\n  }>()\r\n\r\n  const getStatus = (index: number) => {\r\n    if (props.steps[index].status) {\r\n      return props.steps[index].status\r\n    }\r\n    if (index < props.current) return 'finish'\r\n    if (index === props.current) return 'process'\r\n    return 'wait'\r\n  }\r\n\r\n  const handleClick = (index: number) => {\r\n    if (!props.clickable || props.steps[index].disabled) return\r\n    emit('update:current', index)\r\n    emit('change', index)\r\n  }\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n  @use './index.scss';\r\n</style>\r\n","/* unplugin-vue-components disabled */<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-01\r\n * @Description: 步骤条组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <div\r\n    class=\"c-steps\"\r\n    :class=\"[`steps-${direction}`, { 'steps-connected': connected }]\"\r\n  >\r\n    <div\r\n      v-for=\"(step, index) in steps\"\r\n      :key=\"index\"\r\n      class=\"step-item\"\r\n      :class=\"[\r\n        `step-${getStatus(index)}`,\r\n        { 'step-clickable': clickable && !step.disabled },\r\n      ]\"\r\n      @click=\"handleClick(index)\"\r\n    >\r\n      <div class=\"step-indicator\">\r\n        <div class=\"step-icon\">\r\n          <i\r\n            v-if=\"step.icon\"\r\n            :class=\"step.icon\"\r\n          ></i>\r\n          <i\r\n            v-else-if=\"getStatus(index) === 'finish'\"\r\n            class=\"i-mdi:check\"\r\n          ></i>\r\n          <span\r\n            v-else\r\n            class=\"step-index\"\r\n            >{{ index + 1 }}</span\r\n          >\r\n        </div>\r\n        <div\r\n          v-if=\"index < steps.length - 1\"\r\n          class=\"step-line\"\r\n        />\r\n      </div>\r\n      <div class=\"step-content\">\r\n        <div class=\"step-title\">{{ step.title }}</div>\r\n        <div\r\n          v-if=\"step.time\"\r\n          class=\"step-time\"\r\n          >{{ step.time }}</div\r\n        >\r\n        <div\r\n          v-if=\"step.description\"\r\n          class=\"step-description\"\r\n        >\r\n          {{ step.description }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n  defineOptions({ name: 'C_Steps' })\r\n\r\n  export interface StepItem {\r\n    title: string\r\n    description?: string\r\n    time?: string\r\n    icon?: string\r\n    status?: 'wait' | 'process' | 'finish' | 'error'\r\n    disabled?: boolean\r\n    detail?: string\r\n  }\r\n\r\n  const props = withDefaults(\r\n    defineProps<{\r\n      steps: StepItem[]\r\n      current?: number\r\n      direction?: 'horizontal' | 'vertical'\r\n      clickable?: boolean\r\n      /** 水平模式下线条是否与图标紧密相连，默认 false（两端留有对称间距）*/\r\n      connected?: boolean\r\n    }>(),\r\n    {\r\n      current: 0,\r\n      direction: 'horizontal',\r\n      clickable: false,\r\n      connected: false,\r\n    }\r\n  )\r\n\r\n  const emit = defineEmits<{\r\n    'update:current': [number]\r\n    change: [number]\r\n  }>()\r\n\r\n  const getStatus = (index: number) => {\r\n    if (props.steps[index].status) {\r\n      return props.steps[index].status\r\n    }\r\n    if (index < props.current) return 'finish'\r\n    if (index === props.current) return 'process'\r\n    return 'wait'\r\n  }\r\n\r\n  const handleClick = (index: number) => {\r\n    if (!props.clickable || props.steps[index].disabled) return\r\n    emit('update:current', index)\r\n    emit('change', index)\r\n  }\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n  @use './index.scss';\r\n</style>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-06-01\r\n * @Description: 步骤条组件\r\n * @Migration: naive-ui-components 组件库迁移版本\r\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\r\n-->\r\n<template>\r\n  <div\r\n    class=\"c-steps\"\r\n    :class=\"[`steps-${direction}`, { 'steps-connected': connected }]\"\r\n  >\r\n    <div\r\n      v-for=\"(step, index) in steps\"\r\n      :key=\"index\"\r\n      class=\"step-item\"\r\n      :class=\"[\r\n        `step-${getStatus(index)}`,\r\n        { 'step-clickable': clickable && !step.disabled },\r\n      ]\"\r\n      @click=\"handleClick(index)\"\r\n    >\r\n      <div class=\"step-indicator\">\r\n        <div class=\"step-icon\">\r\n          <i\r\n            v-if=\"step.icon\"\r\n            :class=\"step.icon\"\r\n          ></i>\r\n          <i\r\n            v-else-if=\"getStatus(index) === 'finish'\"\r\n            class=\"i-mdi:check\"\r\n          ></i>\r\n          <span\r\n            v-else\r\n            class=\"step-index\"\r\n            >{{ index + 1 }}</span\r\n          >\r\n        </div>\r\n        <div\r\n          v-if=\"index < steps.length - 1\"\r\n          class=\"step-line\"\r\n        />\r\n      </div>\r\n      <div class=\"step-content\">\r\n        <div class=\"step-title\">{{ step.title }}</div>\r\n        <div\r\n          v-if=\"step.time\"\r\n          class=\"step-time\"\r\n          >{{ step.time }}</div\r\n        >\r\n        <div\r\n          v-if=\"step.description\"\r\n          class=\"step-description\"\r\n        >\r\n          {{ step.description }}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n  defineOptions({ name: 'C_Steps' })\r\n\r\n  export interface StepItem {\r\n    title: string\r\n    description?: string\r\n    time?: string\r\n    icon?: string\r\n    status?: 'wait' | 'process' | 'finish' | 'error'\r\n    disabled?: boolean\r\n    detail?: string\r\n  }\r\n\r\n  const props = withDefaults(\r\n    defineProps<{\r\n      steps: StepItem[]\r\n      current?: number\r\n      direction?: 'horizontal' | 'vertical'\r\n      clickable?: boolean\r\n      /** 水平模式下线条是否与图标紧密相连，默认 false（两端留有对称间距）*/\r\n      connected?: boolean\r\n    }>(),\r\n    {\r\n      current: 0,\r\n      direction: 'horizontal',\r\n      clickable: false,\r\n      connected: false,\r\n    }\r\n  )\r\n\r\n  const emit = defineEmits<{\r\n    'update:current': [number]\r\n    change: [number]\r\n  }>()\r\n\r\n  const getStatus = (index: number) => {\r\n    if (props.steps[index].status) {\r\n      return props.steps[index].status\r\n    }\r\n    if (index < props.current) return 'finish'\r\n    if (index === props.current) return 'process'\r\n    return 'wait'\r\n  }\r\n\r\n  const handleClick = (index: number) => {\r\n    if (!props.clickable || props.steps[index].disabled) return\r\n    emit('update:current', index)\r\n    emit('change', index)\r\n  }\r\n</script>\r\n\r\n<style scoped lang=\"scss\">\r\n  @use './index.scss';\r\n</style>\r\n"],"mappings":"iuBE0EE,IAAM,EAAQ,EAiBR,EAAO,EAKP,EAAa,GACb,EAAM,MAAM,GAAO,OACd,EAAM,MAAM,GAAO,OAExB,EAAQ,EAAM,QAAgB,SAC9B,IAAU,EAAM,QAAgB,UAC7B,OAGH,EAAe,GAAkB,CACjC,CAAC,EAAM,WAAa,EAAM,MAAM,GAAO,WAC3C,EAAK,iBAAkB,EAAM,CAC7B,EAAK,SAAU,EAAM,qBApGvB,EAkDM,MAAA,CAjDJ,MAAK,EAAA,CAAC,UAAS,CAAA,SACGA,EAAAA,YAAS,CAAA,kBAAyBC,EAAAA,UAAS,CAAA,CAAA,CAAA,CAAA,CAAA,EAAA,EAAA,GAAA,CAE7D,EA6CM,EAAA,KAAA,EA5CoBC,EAAAA,OAAhB,EAAM,SADhB,EA6CM,MAAA,CA3CH,IAAK,EACN,MAAK,EAAA,CAAC,YAAW,CAAA,QACU,EAAU,EAAK,GAAA,CAAA,iBAAkCC,EAAAA,WAAS,CAAK,EAAK,SAAQ,CAAA,CAAA,CAAA,CAItG,QAAK,GAAE,EAAY,EAAK,GAEzB,EAoBM,MApBN,EAoBM,CAnBJ,EAcM,MAdN,EAcM,CAZI,EAAK,MAAA,GAAA,CADb,EAGK,IAAA,OADF,MAAK,EAAE,EAAK,KAAI,WAGN,EAAU,EAAK,GAAA,UAAA,GAAA,CAD5B,EAGK,IAHL,EAGK,GAAA,GAAA,CACL,EAGqC,OAHrC,EAGqC,EAA/B,EAAK,EAAA,CAAA,EAAA,EAAA,CAAA,CAIL,EAAQD,EAAAA,MAAM,OAAM,GAAA,GAAA,CAD5B,EAGE,MAHF,EAGE,EAAA,EAAA,OAAA,GAAA,CAAA,CAAA,CAEJ,EAaM,MAbN,EAaM,CAZJ,EAA8C,MAA9C,EAA8C,EAAnB,EAAK,MAAK,CAAA,EAAA,CAE7B,EAAK,MAAA,GAAA,CADb,EAGkC,MAHlC,EAGkC,EAA5B,EAAK,KAAI,CAAA,EAAA,EAAA,EAAA,OAAA,GAAA,CAGP,EAAK,aAAA,GAAA,CADb,EAKM,MALN,EAKM,EADD,EAAK,YAAW,CAAA,EAAA,EAAA,EAAA,OAAA,GAAA"}