@robot-admin/naive-ui-components 0.9.3 → 0.10.0

package/dist/C_Icon2.js.map

@@ -1 +1 @@
-{"version":3,"file":"C_Icon2.js","names":["type","clickable","loading","title","ariaLabel","name","size","color","componentProps","svgPath","viewBox","alt","fallbackIcon"],"sources":["../src/hooks/useImage/index.ts","../src/components/C_Icon/index.vue","../src/components/C_Icon/index.vue"],"sourcesContent":["/**\n * @description: 图片路径解析函数（组件库版本）\n * 在组件库中，图片路径由宿主应用管理。\n * 如果传入的是完整 URL（http/https/data:）则直接返回；\n * 否则可通过 imageResolver 配置自定义解析逻辑。\n * @param {string} imagePath 图片路径或完整 URL\n * @param {Function} resolver 可选的自定义解析器\n * @return {Promise<string>} 处理后图片路径\n */\nexport const useImage = async (\n  imagePath: string,\n  resolver?: (path: string) => string | Promise<string>,\n): Promise<string> => {\n  if (!imagePath) return \"\";\n\n  // 完整 URL 直接返回\n  if (\n    imagePath.startsWith(\"http://\") ||\n    imagePath.startsWith(\"https://\") ||\n    imagePath.startsWith(\"data:\") ||\n    imagePath.startsWith(\"blob:\") ||\n    imagePath.startsWith(\"/\")\n  ) {\n    return imagePath;\n  }\n\n  // 如果提供了自定义解析器，使用自定义解析器\n  if (resolver) {\n    try {\n      return await resolver(imagePath);\n    } catch (e) {\n      console.error(`[useImage] 自定义解析器处理失败: ${imagePath}`, e);\n      return \"\";\n    }\n  }\n\n  // 默认：直接返回路径（宿主应用应保证路径可访问）\n  return imagePath;\n};\n\n/**\n * @description: 同步版本的图片路径处理函数\n * @param {string} imagePath 图片路径或完整 URL\n * @return {string} 图片URL\n */\nexport const useImageSync = (imagePath: string): string => {\n  if (!imagePath) return \"\";\n\n  // 完整 URL 直接返回\n  if (\n    imagePath.startsWith(\"http://\") ||\n    imagePath.startsWith(\"https://\") ||\n    imagePath.startsWith(\"data:\") ||\n    imagePath.startsWith(\"blob:\") ||\n    imagePath.startsWith(\"/\")\n  ) {\n    return imagePath;\n  }\n\n  return imagePath;\n};\n","<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2025-05-14\n * @Description: 支持多种图标使用方式，默认使用Iconify图标，统一错误处理\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n  <div\n    ref=\"iconRef\"\n    class=\"c-icon\"\n    :class=\"[\n      `c-icon--${type}`,\n      {\n        'c-icon--clickable': clickable,\n        'c-icon--loading': loading,\n        'c-icon--error': hasError,\n      },\n    ]\"\n    :style=\"rootStyle\"\n    :title=\"title || undefined\"\n    :aria-label=\"ariaLabel || iconDisplayName\"\n    :role=\"clickable ? 'button' : 'img'\"\n    :tabindex=\"clickable ? 0 : -1\"\n    @click=\"handleClick\"\n    @keydown=\"handleKeydown\"\n  >\n    <!-- 方式1：Iconify图标（默认方式） -->\n    <Icon\n      v-if=\"\n        (type === 'iconify' || !type) && !hasError && typeof name === 'string'\n      \"\n      :icon=\"name\"\n      :width=\"size\"\n      :height=\"size\"\n      :color=\"color\"\n      :style=\"iconStyle\"\n      @error=\"() => handleError('iconify', 'Iconify图标加载失败')\"\n    />\n\n    <!-- 方式2：UnoCSS图标 -->\n    <div\n      v-else-if=\"type === 'unocss' && !hasError && typeof name === 'string'\"\n      :class=\"[name, iconClasses]\"\n      :style=\"iconStyle\"\n      @error=\"() => handleError('unocss', 'UnoCSS图标渲染失败')\"\n    />\n\n    <!-- 方式3：组件挂载方式 -->\n    <component\n      v-else-if=\"type === 'component' && resolvedComponent && !hasError\"\n      :is=\"resolvedComponent\"\n      :style=\"iconStyle\"\n      v-bind=\"componentProps\"\n      @error=\"() => handleError('component', '组件图标渲染失败')\"\n    />\n\n    <!-- 方式4：SVG路径方式 -->\n    <svg\n      v-else-if=\"type === 'svg' && svgPath && !hasError\"\n      :width=\"size\"\n      :height=\"size\"\n      :viewBox=\"viewBox\"\n      :style=\"iconStyle\"\n      :fill=\"color\"\n      @error=\"() => handleError('svg', 'SVG图标渲染失败')\"\n    >\n      <path\n        :d=\"svgPath\"\n        :fill=\"color\"\n      />\n    </svg>\n\n    <!-- 方式5：图片方式 - 修复异步加载 -->\n    <img\n      v-else-if=\"type === 'image' && imageSrc && !hasError && !imageLoading\"\n      :src=\"imageSrc\"\n      :alt=\"alt || iconDisplayName\"\n      :width=\"size\"\n      :height=\"size\"\n      style=\"display: inline-block; vertical-align: middle\"\n      @error=\"() => handleError('image', '图片图标加载失败')\"\n      @load=\"handleImageLoad\"\n    />\n\n    <!-- 图片加载状态 -->\n    <div\n      v-if=\"(loading || imageLoading) && !hasError\"\n      class=\"c-icon__loading\"\n      :style=\"iconStyle\"\n    >\n      <div class=\"c-icon__spinner\" />\n    </div>\n\n    <!-- 统一错误状态显示 -->\n    <Icon\n      v-else-if=\"hasError && fallbackIcon\"\n      :icon=\"fallbackIcon\"\n      :width=\"size\"\n      :height=\"size\"\n      :color=\"color\"\n      :style=\"iconStyle\"\n    />\n    <div\n      v-else-if=\"hasError\"\n      class=\"c-icon__error\"\n      :style=\"iconStyle\"\n      :title=\"`图标解析失败: ${iconDisplayName} (${errorMessage})`\"\n    >\n      ⚠️\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import { Icon } from '@iconify/vue'\n  import { useImage } from '../../hooks/useImage'\n  import { computed, nextTick, onMounted, readonly, ref, watch } from 'vue'\n\n  export interface IconProps {\n    /** 图标名称/路径/组件实例 */\n    name: string | any\n    /** 图标类型 */\n    type?: 'iconify' | 'unocss' | 'component' | 'svg' | 'image'\n    /** 图标颜色 */\n    color?: string\n    /** 图标大小(px) */\n    size?: number | string\n    /** SVG路径数据(仅type=svg时使用) */\n    svgPath?: string\n    /** SVG viewBox(仅type=svg时使用) */\n    viewBox?: string\n    /** 图片alt属性(仅type=image时使用) */\n    alt?: string\n    /** 是否可点击 */\n    clickable?: boolean\n    /** 加载状态 */\n    loading?: boolean\n    /** 错误时的回退图标 */\n    fallbackIcon?: string\n    /** 工具提示 */\n    title?: string\n    /** 无障碍标签 */\n    ariaLabel?: string\n    /** 自定义样式类 */\n    customClass?: string\n    /** 旋转角度 */\n    rotate?: number\n    /** 是否翻转 */\n    flip?: 'horizontal' | 'vertical' | 'both'\n    /** 传递给组件的额外属性(仅type=component时使用) */\n    componentProps?: Record<string, any>\n  }\n\n  const props = withDefaults(defineProps<IconProps>(), {\n    name: undefined,\n    type: 'iconify',\n    color: 'currentColor',\n    size: 18,\n    svgPath: '',\n    viewBox: '0 0 24 24',\n    alt: '',\n    clickable: false,\n    loading: false,\n    fallbackIcon: '',\n    title: '',\n    ariaLabel: '',\n    customClass: '',\n    rotate: 0,\n    flip: undefined,\n    componentProps: () => ({}),\n  })\n\n  const emit = defineEmits<{\n    click: [event: MouseEvent]\n    error: [type: string, error?: any]\n    load: []\n  }>()\n\n  const iconRef = ref<HTMLElement>()\n  const hasError = ref(false)\n  const errorMessage = ref('')\n  const imageSrc = ref<string>('') // 存储异步加载的图片URL\n  const imageLoading = ref(false) // 图片加载状态\n\n  // 计算根元素样式\n  const rootStyle = computed(() => ({\n    fontSize: typeof props.size === 'number' ? `${props.size}px` : props.size,\n    color: props.color,\n    cursor: props.clickable ? 'pointer' : 'inherit',\n  }))\n\n  // 计算图标样式\n  const iconStyle = computed(() => {\n    const style: Record<string, any> = {\n      display: 'inline-flex',\n      justifyContent: 'center',\n      alignItems: 'center',\n      width: typeof props.size === 'number' ? `${props.size}px` : props.size,\n      height: typeof props.size === 'number' ? `${props.size}px` : props.size,\n    }\n\n    // 旋转\n    if (props.rotate) {\n      style.transform = `rotate(${props.rotate}deg)`\n    }\n\n    // 翻转\n    if (props.flip) {\n      const scaleX =\n        props.flip === 'horizontal' || props.flip === 'both' ? -1 : 1\n      const scaleY = props.flip === 'vertical' || props.flip === 'both' ? -1 : 1\n      style.transform = `${\n        style.transform || ''\n      } scaleX(${scaleX}) scaleY(${scaleY})`.trim()\n    }\n\n    return style\n  })\n\n  // 获取图标名称用于显示\n  const iconDisplayName = computed(() => {\n    if (typeof props.name === 'string') {\n      return props.name\n    }\n    if (props.name && props.name.__name) {\n      return props.name.__name\n    }\n    if (props.name && props.name.name) {\n      return props.name.name\n    }\n    return 'Component Icon'\n  })\n\n  // 图标类名\n  const iconClasses = computed(() => [\n    props.customClass,\n    {\n      'c-icon__rotatable': props.rotate !== 0,\n      'c-icon__flippable': !!props.flip,\n    },\n  ])\n\n  // 解析组件名称（纯计算属性，无副作用）\n  const resolvedComponent = computed(() => {\n    if (props.type !== 'component' || !props.name) return null\n    return props.name\n  })\n\n  // 统一错误处理函数\n  const handleError = (type: string, message: string, originalError?: any) => {\n    console.warn(`[C_Icon] ${message}:`, iconDisplayName.value, originalError)\n    errorMessage.value = message\n    imageLoading.value = false // 错误时停止加载状态\n    emit('error', type, originalError)\n\n    // 如果有回退图标，尝试切换为 fallback Iconify 图标\n    if (props.fallbackIcon && !hasError.value) {\n      hasError.value = false\n      // 将 name 重写为 fallbackIcon 并重置状态\n      // 因为 props 不可变，通过模板中的 fallback 分支渲染\n      return\n    }\n\n    hasError.value = true\n  }\n\n  // 处理点击事件\n  const handleClick = (event: MouseEvent) => {\n    if (!props.clickable || props.loading) return\n    emit('click', event)\n  }\n\n  // 处理键盘事件\n  const handleKeydown = (event: KeyboardEvent) => {\n    if (!props.clickable || props.loading) return\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault()\n      emit('click', event as any)\n    }\n  }\n\n  // 处理图片加载成功\n  const handleImageLoad = () => {\n    imageLoading.value = false\n    emit('load')\n  }\n\n  // 异步加载图片 - 修复关键函数\n  const loadImageSrc = async () => {\n    if (props.type !== 'image' || typeof props.name !== 'string') {\n      imageSrc.value = ''\n      return\n    }\n\n    // 如果是完整URL，直接设置\n    if (\n      props.name.startsWith('http://') ||\n      props.name.startsWith('https://') ||\n      props.name.startsWith('//') ||\n      props.name.startsWith('/')\n    ) {\n      imageSrc.value = props.name\n      return\n    }\n\n    // 其他情况都当作本地图片处理\n    try {\n      imageLoading.value = true\n      const imageUrl = await useImage(props.name)\n      if (imageUrl) {\n        imageSrc.value = imageUrl\n      } else {\n        handleError('image', '图片路径解析失败')\n      }\n    } catch (error) {\n      handleError('image', '图片加载失败', error)\n    } finally {\n      imageLoading.value = false\n    }\n  }\n\n  // 验证规则映射\n  const validationRules = {\n    iconify: (): string | null => {\n      if (!props.name.includes(':')) {\n        console.warn(\n          '[C_Icon] Iconify图标名称格式应为 \"prefix:name\"，如 \"mdi:home\"'\n        )\n      }\n      return null\n    },\n    unocss: (): string | null => {\n      if (typeof props.name !== 'string' || !props.name.startsWith('i-')) {\n        console.warn('[C_Icon] UnoCSS图标名称应以 \"i-\" 开头')\n      }\n      return null\n    },\n    component: (): string | null =>\n      !resolvedComponent.value ? '无法解析组件' : null,\n    svg: (): string | null => (!props.svgPath ? 'SVG路径不能为空' : null),\n    image: (): string | null => {\n      // 对于image类型，异步验证在loadImageSrc中处理\n      return null\n    },\n  }\n\n  // 验证配置\n  const validateProps = () => {\n    hasError.value = false\n    errorMessage.value = ''\n\n    // 基础验证\n    if (!props.name) {\n      return handleError('validation', '图标名称不能为空')\n    }\n\n    // 类型验证\n    const validator = validationRules[props.type]\n    if (!validator) {\n      return handleError('type', '不支持的图标类型')\n    }\n\n    const errorMsg = validator()\n    if (errorMsg) {\n      handleError(props.type, errorMsg)\n    }\n\n    // 如果是图片类型，异步加载图片\n    if (props.type === 'image') {\n      loadImageSrc()\n    }\n  }\n\n  // 监听关键属性变化\n  watch(\n    () => [props.name, props.type, props.svgPath],\n    () => {\n      nextTick(validateProps)\n    },\n    { immediate: true }\n  )\n\n  // 组件挂载后：仅对非 image 类型触发 load 事件（watch immediate 已完成验证）\n  onMounted(() => {\n    if (!hasError.value && props.type !== 'image') {\n      emit('load')\n    }\n  })\n\n  // 暴露方法给父组件\n  defineExpose({\n    /** 重新验证配置 */\n    validate: validateProps,\n    /** 是否有错误 */\n    hasError: readonly(hasError),\n    /** 错误信息 */\n    errorMessage: readonly(errorMessage),\n    /** DOM引用 */\n    el: iconRef,\n  })\n</script>\n","<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2025-05-14\n * @Description: 支持多种图标使用方式，默认使用Iconify图标，统一错误处理\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n  <div\n    ref=\"iconRef\"\n    class=\"c-icon\"\n    :class=\"[\n      `c-icon--${type}`,\n      {\n        'c-icon--clickable': clickable,\n        'c-icon--loading': loading,\n        'c-icon--error': hasError,\n      },\n    ]\"\n    :style=\"rootStyle\"\n    :title=\"title || undefined\"\n    :aria-label=\"ariaLabel || iconDisplayName\"\n    :role=\"clickable ? 'button' : 'img'\"\n    :tabindex=\"clickable ? 0 : -1\"\n    @click=\"handleClick\"\n    @keydown=\"handleKeydown\"\n  >\n    <!-- 方式1：Iconify图标（默认方式） -->\n    <Icon\n      v-if=\"\n        (type === 'iconify' || !type) && !hasError && typeof name === 'string'\n      \"\n      :icon=\"name\"\n      :width=\"size\"\n      :height=\"size\"\n      :color=\"color\"\n      :style=\"iconStyle\"\n      @error=\"() => handleError('iconify', 'Iconify图标加载失败')\"\n    />\n\n    <!-- 方式2：UnoCSS图标 -->\n    <div\n      v-else-if=\"type === 'unocss' && !hasError && typeof name === 'string'\"\n      :class=\"[name, iconClasses]\"\n      :style=\"iconStyle\"\n      @error=\"() => handleError('unocss', 'UnoCSS图标渲染失败')\"\n    />\n\n    <!-- 方式3：组件挂载方式 -->\n    <component\n      v-else-if=\"type === 'component' && resolvedComponent && !hasError\"\n      :is=\"resolvedComponent\"\n      :style=\"iconStyle\"\n      v-bind=\"componentProps\"\n      @error=\"() => handleError('component', '组件图标渲染失败')\"\n    />\n\n    <!-- 方式4：SVG路径方式 -->\n    <svg\n      v-else-if=\"type === 'svg' && svgPath && !hasError\"\n      :width=\"size\"\n      :height=\"size\"\n      :viewBox=\"viewBox\"\n      :style=\"iconStyle\"\n      :fill=\"color\"\n      @error=\"() => handleError('svg', 'SVG图标渲染失败')\"\n    >\n      <path\n        :d=\"svgPath\"\n        :fill=\"color\"\n      />\n    </svg>\n\n    <!-- 方式5：图片方式 - 修复异步加载 -->\n    <img\n      v-else-if=\"type === 'image' && imageSrc && !hasError && !imageLoading\"\n      :src=\"imageSrc\"\n      :alt=\"alt || iconDisplayName\"\n      :width=\"size\"\n      :height=\"size\"\n      style=\"display: inline-block; vertical-align: middle\"\n      @error=\"() => handleError('image', '图片图标加载失败')\"\n      @load=\"handleImageLoad\"\n    />\n\n    <!-- 图片加载状态 -->\n    <div\n      v-if=\"(loading || imageLoading) && !hasError\"\n      class=\"c-icon__loading\"\n      :style=\"iconStyle\"\n    >\n      <div class=\"c-icon__spinner\" />\n    </div>\n\n    <!-- 统一错误状态显示 -->\n    <Icon\n      v-else-if=\"hasError && fallbackIcon\"\n      :icon=\"fallbackIcon\"\n      :width=\"size\"\n      :height=\"size\"\n      :color=\"color\"\n      :style=\"iconStyle\"\n    />\n    <div\n      v-else-if=\"hasError\"\n      class=\"c-icon__error\"\n      :style=\"iconStyle\"\n      :title=\"`图标解析失败: ${iconDisplayName} (${errorMessage})`\"\n    >\n      ⚠️\n    </div>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\n  import { Icon } from '@iconify/vue'\n  import { useImage } from '../../hooks/useImage'\n  import { computed, nextTick, onMounted, readonly, ref, watch } from 'vue'\n\n  export interface IconProps {\n    /** 图标名称/路径/组件实例 */\n    name: string | any\n    /** 图标类型 */\n    type?: 'iconify' | 'unocss' | 'component' | 'svg' | 'image'\n    /** 图标颜色 */\n    color?: string\n    /** 图标大小(px) */\n    size?: number | string\n    /** SVG路径数据(仅type=svg时使用) */\n    svgPath?: string\n    /** SVG viewBox(仅type=svg时使用) */\n    viewBox?: string\n    /** 图片alt属性(仅type=image时使用) */\n    alt?: string\n    /** 是否可点击 */\n    clickable?: boolean\n    /** 加载状态 */\n    loading?: boolean\n    /** 错误时的回退图标 */\n    fallbackIcon?: string\n    /** 工具提示 */\n    title?: string\n    /** 无障碍标签 */\n    ariaLabel?: string\n    /** 自定义样式类 */\n    customClass?: string\n    /** 旋转角度 */\n    rotate?: number\n    /** 是否翻转 */\n    flip?: 'horizontal' | 'vertical' | 'both'\n    /** 传递给组件的额外属性(仅type=component时使用) */\n    componentProps?: Record<string, any>\n  }\n\n  const props = withDefaults(defineProps<IconProps>(), {\n    name: undefined,\n    type: 'iconify',\n    color: 'currentColor',\n    size: 18,\n    svgPath: '',\n    viewBox: '0 0 24 24',\n    alt: '',\n    clickable: false,\n    loading: false,\n    fallbackIcon: '',\n    title: '',\n    ariaLabel: '',\n    customClass: '',\n    rotate: 0,\n    flip: undefined,\n    componentProps: () => ({}),\n  })\n\n  const emit = defineEmits<{\n    click: [event: MouseEvent]\n    error: [type: string, error?: any]\n    load: []\n  }>()\n\n  const iconRef = ref<HTMLElement>()\n  const hasError = ref(false)\n  const errorMessage = ref('')\n  const imageSrc = ref<string>('') // 存储异步加载的图片URL\n  const imageLoading = ref(false) // 图片加载状态\n\n  // 计算根元素样式\n  const rootStyle = computed(() => ({\n    fontSize: typeof props.size === 'number' ? `${props.size}px` : props.size,\n    color: props.color,\n    cursor: props.clickable ? 'pointer' : 'inherit',\n  }))\n\n  // 计算图标样式\n  const iconStyle = computed(() => {\n    const style: Record<string, any> = {\n      display: 'inline-flex',\n      justifyContent: 'center',\n      alignItems: 'center',\n      width: typeof props.size === 'number' ? `${props.size}px` : props.size,\n      height: typeof props.size === 'number' ? `${props.size}px` : props.size,\n    }\n\n    // 旋转\n    if (props.rotate) {\n      style.transform = `rotate(${props.rotate}deg)`\n    }\n\n    // 翻转\n    if (props.flip) {\n      const scaleX =\n        props.flip === 'horizontal' || props.flip === 'both' ? -1 : 1\n      const scaleY = props.flip === 'vertical' || props.flip === 'both' ? -1 : 1\n      style.transform = `${\n        style.transform || ''\n      } scaleX(${scaleX}) scaleY(${scaleY})`.trim()\n    }\n\n    return style\n  })\n\n  // 获取图标名称用于显示\n  const iconDisplayName = computed(() => {\n    if (typeof props.name === 'string') {\n      return props.name\n    }\n    if (props.name && props.name.__name) {\n      return props.name.__name\n    }\n    if (props.name && props.name.name) {\n      return props.name.name\n    }\n    return 'Component Icon'\n  })\n\n  // 图标类名\n  const iconClasses = computed(() => [\n    props.customClass,\n    {\n      'c-icon__rotatable': props.rotate !== 0,\n      'c-icon__flippable': !!props.flip,\n    },\n  ])\n\n  // 解析组件名称（纯计算属性，无副作用）\n  const resolvedComponent = computed(() => {\n    if (props.type !== 'component' || !props.name) return null\n    return props.name\n  })\n\n  // 统一错误处理函数\n  const handleError = (type: string, message: string, originalError?: any) => {\n    console.warn(`[C_Icon] ${message}:`, iconDisplayName.value, originalError)\n    errorMessage.value = message\n    imageLoading.value = false // 错误时停止加载状态\n    emit('error', type, originalError)\n\n    // 如果有回退图标，尝试切换为 fallback Iconify 图标\n    if (props.fallbackIcon && !hasError.value) {\n      hasError.value = false\n      // 将 name 重写为 fallbackIcon 并重置状态\n      // 因为 props 不可变，通过模板中的 fallback 分支渲染\n      return\n    }\n\n    hasError.value = true\n  }\n\n  // 处理点击事件\n  const handleClick = (event: MouseEvent) => {\n    if (!props.clickable || props.loading) return\n    emit('click', event)\n  }\n\n  // 处理键盘事件\n  const handleKeydown = (event: KeyboardEvent) => {\n    if (!props.clickable || props.loading) return\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault()\n      emit('click', event as any)\n    }\n  }\n\n  // 处理图片加载成功\n  const handleImageLoad = () => {\n    imageLoading.value = false\n    emit('load')\n  }\n\n  // 异步加载图片 - 修复关键函数\n  const loadImageSrc = async () => {\n    if (props.type !== 'image' || typeof props.name !== 'string') {\n      imageSrc.value = ''\n      return\n    }\n\n    // 如果是完整URL，直接设置\n    if (\n      props.name.startsWith('http://') ||\n      props.name.startsWith('https://') ||\n      props.name.startsWith('//') ||\n      props.name.startsWith('/')\n    ) {\n      imageSrc.value = props.name\n      return\n    }\n\n    // 其他情况都当作本地图片处理\n    try {\n      imageLoading.value = true\n      const imageUrl = await useImage(props.name)\n      if (imageUrl) {\n        imageSrc.value = imageUrl\n      } else {\n        handleError('image', '图片路径解析失败')\n      }\n    } catch (error) {\n      handleError('image', '图片加载失败', error)\n    } finally {\n      imageLoading.value = false\n    }\n  }\n\n  // 验证规则映射\n  const validationRules = {\n    iconify: (): string | null => {\n      if (!props.name.includes(':')) {\n        console.warn(\n          '[C_Icon] Iconify图标名称格式应为 \"prefix:name\"，如 \"mdi:home\"'\n        )\n      }\n      return null\n    },\n    unocss: (): string | null => {\n      if (typeof props.name !== 'string' || !props.name.startsWith('i-')) {\n        console.warn('[C_Icon] UnoCSS图标名称应以 \"i-\" 开头')\n      }\n      return null\n    },\n    component: (): string | null =>\n      !resolvedComponent.value ? '无法解析组件' : null,\n    svg: (): string | null => (!props.svgPath ? 'SVG路径不能为空' : null),\n    image: (): string | null => {\n      // 对于image类型，异步验证在loadImageSrc中处理\n      return null\n    },\n  }\n\n  // 验证配置\n  const validateProps = () => {\n    hasError.value = false\n    errorMessage.value = ''\n\n    // 基础验证\n    if (!props.name) {\n      return handleError('validation', '图标名称不能为空')\n    }\n\n    // 类型验证\n    const validator = validationRules[props.type]\n    if (!validator) {\n      return handleError('type', '不支持的图标类型')\n    }\n\n    const errorMsg = validator()\n    if (errorMsg) {\n      handleError(props.type, errorMsg)\n    }\n\n    // 如果是图片类型，异步加载图片\n    if (props.type === 'image') {\n      loadImageSrc()\n    }\n  }\n\n  // 监听关键属性变化\n  watch(\n    () => [props.name, props.type, props.svgPath],\n    () => {\n      nextTick(validateProps)\n    },\n    { immediate: true }\n  )\n\n  // 组件挂载后：仅对非 image 类型触发 load 事件（watch immediate 已完成验证）\n  onMounted(() => {\n    if (!hasError.value && props.type !== 'image') {\n      emit('load')\n    }\n  })\n\n  // 暴露方法给父组件\n  defineExpose({\n    /** 重新验证配置 */\n    validate: validateProps,\n    /** 是否有错误 */\n    hasError: readonly(hasError),\n    /** 错误信息 */\n    errorMessage: readonly(errorMessage),\n    /** DOM引用 */\n    el: iconRef,\n  })\n</script>\n"],"mappings":"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"}
+{"version":3,"file":"C_Icon2.js","names":["type","clickable","loading","title","ariaLabel","name","size","color","componentProps","svgPath","viewBox","alt","fallbackIcon"],"sources":["../src/hooks/useImage/index.ts","../src/components/C_Icon/index.vue","../src/components/C_Icon/index.vue"],"sourcesContent":["/**\n * @description: 图片路径解析函数（组件库版本）\n * 在组件库中，图片路径由宿主应用管理。\n * 如果传入的是完整 URL（http/https/data:）则直接返回；\n * 否则可通过 imageResolver 配置自定义解析逻辑。\n * @param {string} imagePath 图片路径或完整 URL\n * @param {Function} resolver 可选的自定义解析器\n * @return {Promise<string>} 处理后图片路径\n */\nexport const useImage = async (\n  imagePath: string,\n  resolver?: (path: string) => string | Promise<string>,\n): Promise<string> => {\n  if (!imagePath) return \"\";\n\n  // 完整 URL 直接返回\n  if (\n    imagePath.startsWith(\"http://\") ||\n    imagePath.startsWith(\"https://\") ||\n    imagePath.startsWith(\"data:\") ||\n    imagePath.startsWith(\"blob:\") ||\n    imagePath.startsWith(\"/\")\n  ) {\n    return imagePath;\n  }\n\n  // 如果提供了自定义解析器，使用自定义解析器\n  if (resolver) {\n    try {\n      return await resolver(imagePath);\n    } catch (e) {\n      console.error(`[useImage] 自定义解析器处理失败: ${imagePath}`, e);\n      return \"\";\n    }\n  }\n\n  // 默认：直接返回路径（宿主应用应保证路径可访问）\n  return imagePath;\n};\n\n/**\n * @description: 同步版本的图片路径处理函数\n * @param {string} imagePath 图片路径或完整 URL\n * @return {string} 图片URL\n */\nexport const useImageSync = (imagePath: string): string => {\n  if (!imagePath) return \"\";\n\n  // 完整 URL 直接返回\n  if (\n    imagePath.startsWith(\"http://\") ||\n    imagePath.startsWith(\"https://\") ||\n    imagePath.startsWith(\"data:\") ||\n    imagePath.startsWith(\"blob:\") ||\n    imagePath.startsWith(\"/\")\n  ) {\n    return imagePath;\n  }\n\n  return imagePath;\n};\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-05-14\r\n * @Description: 支持多种图标使用方式，默认使用Iconify图标，统一错误处理\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=\"iconRef\"\r\n    class=\"c-icon\"\r\n    :class=\"[\r\n      `c-icon--${type}`,\r\n      {\r\n        'c-icon--clickable': clickable,\r\n        'c-icon--loading': loading,\r\n        'c-icon--error': hasError,\r\n      },\r\n    ]\"\r\n    :style=\"rootStyle\"\r\n    :title=\"title || undefined\"\r\n    :aria-label=\"ariaLabel || iconDisplayName\"\r\n    :role=\"clickable ? 'button' : 'img'\"\r\n    :tabindex=\"clickable ? 0 : -1\"\r\n    @click=\"handleClick\"\r\n    @keydown=\"handleKeydown\"\r\n  >\r\n    <!-- 方式1：Iconify图标（默认方式） -->\r\n    <Icon\r\n      v-if=\"\r\n        (type === 'iconify' || !type) && !hasError && typeof name === 'string'\r\n      \"\r\n      :icon=\"name\"\r\n      :width=\"size\"\r\n      :height=\"size\"\r\n      :color=\"color\"\r\n      :style=\"iconStyle\"\r\n      @error=\"() => handleError('iconify', 'Iconify图标加载失败')\"\r\n    />\r\n\r\n    <!-- 方式2：UnoCSS图标 -->\r\n    <div\r\n      v-else-if=\"type === 'unocss' && !hasError && typeof name === 'string'\"\r\n      :class=\"[name, iconClasses]\"\r\n      :style=\"iconStyle\"\r\n      @error=\"() => handleError('unocss', 'UnoCSS图标渲染失败')\"\r\n    />\r\n\r\n    <!-- 方式3：组件挂载方式 -->\r\n    <component\r\n      v-else-if=\"type === 'component' && resolvedComponent && !hasError\"\r\n      :is=\"resolvedComponent\"\r\n      :style=\"iconStyle\"\r\n      v-bind=\"componentProps\"\r\n      @error=\"() => handleError('component', '组件图标渲染失败')\"\r\n    />\r\n\r\n    <!-- 方式4：SVG路径方式 -->\r\n    <svg\r\n      v-else-if=\"type === 'svg' && svgPath && !hasError\"\r\n      :width=\"size\"\r\n      :height=\"size\"\r\n      :viewBox=\"viewBox\"\r\n      :style=\"iconStyle\"\r\n      :fill=\"color\"\r\n      @error=\"() => handleError('svg', 'SVG图标渲染失败')\"\r\n    >\r\n      <path\r\n        :d=\"svgPath\"\r\n        :fill=\"color\"\r\n      />\r\n    </svg>\r\n\r\n    <!-- 方式5：图片方式 - 修复异步加载 -->\r\n    <img\r\n      v-else-if=\"type === 'image' && imageSrc && !hasError && !imageLoading\"\r\n      :src=\"imageSrc\"\r\n      :alt=\"alt || iconDisplayName\"\r\n      :width=\"size\"\r\n      :height=\"size\"\r\n      style=\"display: inline-block; vertical-align: middle\"\r\n      @error=\"() => handleError('image', '图片图标加载失败')\"\r\n      @load=\"handleImageLoad\"\r\n    />\r\n\r\n    <!-- 图片加载状态 -->\r\n    <div\r\n      v-if=\"(loading || imageLoading) && !hasError\"\r\n      class=\"c-icon__loading\"\r\n      :style=\"iconStyle\"\r\n    >\r\n      <div class=\"c-icon__spinner\" />\r\n    </div>\r\n\r\n    <!-- 统一错误状态显示 -->\r\n    <Icon\r\n      v-else-if=\"hasError && fallbackIcon\"\r\n      :icon=\"fallbackIcon\"\r\n      :width=\"size\"\r\n      :height=\"size\"\r\n      :color=\"color\"\r\n      :style=\"iconStyle\"\r\n    />\r\n    <div\r\n      v-else-if=\"hasError\"\r\n      class=\"c-icon__error\"\r\n      :style=\"iconStyle\"\r\n      :title=\"`图标解析失败: ${iconDisplayName} (${errorMessage})`\"\r\n    >\r\n      ⚠️\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script lang=\"ts\" setup>\r\n  import { Icon } from '@iconify/vue'\r\n  import { useImage } from '../../hooks/useImage'\r\n  import { computed, nextTick, onMounted, readonly, ref, watch } from 'vue'\r\n  import type { IconProps } from './types'\r\n\r\n  interface LegacyIconProps extends IconProps {\r\n    /** 图标名称/路径/组件实例 */\r\n    name: string | any\r\n    /** 图标类型 */\r\n    type?: 'iconify' | 'unocss' | 'component' | 'svg' | 'image'\r\n    /** 图标颜色 */\r\n    color?: string\r\n    /** 图标大小(px) */\r\n    size?: number | string\r\n    /** SVG路径数据(仅type=svg时使用) */\r\n    svgPath?: string\r\n    /** SVG viewBox(仅type=svg时使用) */\r\n    viewBox?: string\r\n    /** 图片alt属性(仅type=image时使用) */\r\n    alt?: string\r\n    /** 是否可点击 */\r\n    clickable?: boolean\r\n    /** 加载状态 */\r\n    loading?: boolean\r\n    /** 错误时的回退图标 */\r\n    fallbackIcon?: string\r\n    /** 工具提示 */\r\n    title?: string\r\n    /** 无障碍标签 */\r\n    ariaLabel?: string\r\n    /** 自定义样式类 */\r\n    customClass?: string\r\n    /** 旋转角度 */\r\n    rotate?: number\r\n    /** 是否翻转 */\r\n    flip?: 'horizontal' | 'vertical' | 'both'\r\n    /** 传递给组件的额外属性(仅type=component时使用) */\r\n    componentProps?: Record<string, any>\r\n  }\r\n\r\n  const props = withDefaults(defineProps<LegacyIconProps>(), {\r\n    name: undefined,\r\n    type: 'iconify',\r\n    color: 'currentColor',\r\n    size: 18,\r\n    svgPath: '',\r\n    viewBox: '0 0 24 24',\r\n    alt: '',\r\n    clickable: false,\r\n    loading: false,\r\n    fallbackIcon: '',\r\n    title: '',\r\n    ariaLabel: '',\r\n    customClass: '',\r\n    rotate: 0,\r\n    flip: undefined,\r\n    componentProps: () => ({}),\r\n  })\r\n\r\n  const emit = defineEmits<{\r\n    click: [event: MouseEvent]\r\n    error: [type: string, error?: any]\r\n    load: []\r\n  }>()\r\n\r\n  const iconRef = ref<HTMLElement>()\r\n  const hasError = ref(false)\r\n  const errorMessage = ref('')\r\n  const imageSrc = ref<string>('') // 存储异步加载的图片URL\r\n  const imageLoading = ref(false) // 图片加载状态\r\n\r\n  // 计算根元素样式\r\n  const rootStyle = computed(() => ({\r\n    fontSize: typeof props.size === 'number' ? `${props.size}px` : props.size,\r\n    color: props.color,\r\n    cursor: props.clickable ? 'pointer' : 'inherit',\r\n  }))\r\n\r\n  // 计算图标样式\r\n  const iconStyle = computed(() => {\r\n    const style: Record<string, any> = {\r\n      display: 'inline-flex',\r\n      justifyContent: 'center',\r\n      alignItems: 'center',\r\n      width: typeof props.size === 'number' ? `${props.size}px` : props.size,\r\n      height: typeof props.size === 'number' ? `${props.size}px` : props.size,\r\n    }\r\n\r\n    // 旋转\r\n    if (props.rotate) {\r\n      style.transform = `rotate(${props.rotate}deg)`\r\n    }\r\n\r\n    // 翻转\r\n    if (props.flip) {\r\n      const scaleX =\r\n        props.flip === 'horizontal' || props.flip === 'both' ? -1 : 1\r\n      const scaleY = props.flip === 'vertical' || props.flip === 'both' ? -1 : 1\r\n      style.transform = `${\r\n        style.transform || ''\r\n      } scaleX(${scaleX}) scaleY(${scaleY})`.trim()\r\n    }\r\n\r\n    return style\r\n  })\r\n\r\n  // 获取图标名称用于显示\r\n  const iconDisplayName = computed(() => {\r\n    if (typeof props.name === 'string') {\r\n      return props.name\r\n    }\r\n    if (props.name && props.name.__name) {\r\n      return props.name.__name\r\n    }\r\n    if (props.name && props.name.name) {\r\n      return props.name.name\r\n    }\r\n    return 'Component Icon'\r\n  })\r\n\r\n  // 图标类名\r\n  const iconClasses = computed(() => [\r\n    props.customClass,\r\n    {\r\n      'c-icon__rotatable': props.rotate !== 0,\r\n      'c-icon__flippable': !!props.flip,\r\n    },\r\n  ])\r\n\r\n  // 解析组件名称（纯计算属性，无副作用）\r\n  const resolvedComponent = computed(() => {\r\n    if (props.type !== 'component' || !props.name) return null\r\n    return props.name\r\n  })\r\n\r\n  // 统一错误处理函数\r\n  const handleError = (type: string, message: string, originalError?: any) => {\r\n    console.warn(`[C_Icon] ${message}:`, iconDisplayName.value, originalError)\r\n    errorMessage.value = message\r\n    imageLoading.value = false // 错误时停止加载状态\r\n    emit('error', type, originalError)\r\n\r\n    // 如果有回退图标，尝试切换为 fallback Iconify 图标\r\n    if (props.fallbackIcon && !hasError.value) {\r\n      hasError.value = false\r\n      // 将 name 重写为 fallbackIcon 并重置状态\r\n      // 因为 props 不可变，通过模板中的 fallback 分支渲染\r\n      return\r\n    }\r\n\r\n    hasError.value = true\r\n  }\r\n\r\n  // 处理点击事件\r\n  const handleClick = (event: MouseEvent) => {\r\n    if (!props.clickable || props.loading) return\r\n    emit('click', event)\r\n  }\r\n\r\n  // 处理键盘事件\r\n  const handleKeydown = (event: KeyboardEvent) => {\r\n    if (!props.clickable || props.loading) return\r\n    if (event.key === 'Enter' || event.key === ' ') {\r\n      event.preventDefault()\r\n      emit('click', event as any)\r\n    }\r\n  }\r\n\r\n  // 处理图片加载成功\r\n  const handleImageLoad = () => {\r\n    imageLoading.value = false\r\n    emit('load')\r\n  }\r\n\r\n  // 异步加载图片 - 修复关键函数\r\n  const loadImageSrc = async () => {\r\n    if (props.type !== 'image' || typeof props.name !== 'string') {\r\n      imageSrc.value = ''\r\n      return\r\n    }\r\n\r\n    // 如果是完整URL，直接设置\r\n    if (\r\n      props.name.startsWith('http://') ||\r\n      props.name.startsWith('https://') ||\r\n      props.name.startsWith('//') ||\r\n      props.name.startsWith('/')\r\n    ) {\r\n      imageSrc.value = props.name\r\n      return\r\n    }\r\n\r\n    // 其他情况都当作本地图片处理\r\n    try {\r\n      imageLoading.value = true\r\n      const imageUrl = await useImage(props.name)\r\n      if (imageUrl) {\r\n        imageSrc.value = imageUrl\r\n      } else {\r\n        handleError('image', '图片路径解析失败')\r\n      }\r\n    } catch (error) {\r\n      handleError('image', '图片加载失败', error)\r\n    } finally {\r\n      imageLoading.value = false\r\n    }\r\n  }\r\n\r\n  // 验证规则映射\r\n  const validationRules = {\r\n    iconify: (): string | null => {\r\n      if (!props.name.includes(':')) {\r\n        console.warn(\r\n          '[C_Icon] Iconify图标名称格式应为 \"prefix:name\"，如 \"mdi:home\"'\r\n        )\r\n      }\r\n      return null\r\n    },\r\n    unocss: (): string | null => {\r\n      if (typeof props.name !== 'string' || !props.name.startsWith('i-')) {\r\n        console.warn('[C_Icon] UnoCSS图标名称应以 \"i-\" 开头')\r\n      }\r\n      return null\r\n    },\r\n    component: (): string | null =>\r\n      !resolvedComponent.value ? '无法解析组件' : null,\r\n    svg: (): string | null => (!props.svgPath ? 'SVG路径不能为空' : null),\r\n    image: (): string | null => {\r\n      // 对于image类型，异步验证在loadImageSrc中处理\r\n      return null\r\n    },\r\n  }\r\n\r\n  // 验证配置\r\n  const validateProps = () => {\r\n    hasError.value = false\r\n    errorMessage.value = ''\r\n\r\n    // 基础验证\r\n    if (!props.name) {\r\n      return handleError('validation', '图标名称不能为空')\r\n    }\r\n\r\n    // 类型验证\r\n    const validator = validationRules[props.type]\r\n    if (!validator) {\r\n      return handleError('type', '不支持的图标类型')\r\n    }\r\n\r\n    const errorMsg = validator()\r\n    if (errorMsg) {\r\n      handleError(props.type, errorMsg)\r\n    }\r\n\r\n    // 如果是图片类型，异步加载图片\r\n    if (props.type === 'image') {\r\n      loadImageSrc()\r\n    }\r\n  }\r\n\r\n  // 监听关键属性变化\r\n  watch(\r\n    () => [props.name, props.type, props.svgPath],\r\n    () => {\r\n      nextTick(validateProps)\r\n    },\r\n    { immediate: true }\r\n  )\r\n\r\n  // 组件挂载后：仅对非 image 类型触发 load 事件（watch immediate 已完成验证）\r\n  onMounted(() => {\r\n    if (!hasError.value && props.type !== 'image') {\r\n      emit('load')\r\n    }\r\n  })\r\n\r\n  // 暴露方法给父组件\r\n  defineExpose({\r\n    /** 重新验证配置 */\r\n    validate: validateProps,\r\n    /** 是否有错误 */\r\n    hasError: readonly(hasError),\r\n    /** 错误信息 */\r\n    errorMessage: readonly(errorMessage),\r\n    /** DOM引用 */\r\n    el: iconRef,\r\n  })\r\n</script>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-05-14\r\n * @Description: 支持多种图标使用方式，默认使用Iconify图标，统一错误处理\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=\"iconRef\"\r\n    class=\"c-icon\"\r\n    :class=\"[\r\n      `c-icon--${type}`,\r\n      {\r\n        'c-icon--clickable': clickable,\r\n        'c-icon--loading': loading,\r\n        'c-icon--error': hasError,\r\n      },\r\n    ]\"\r\n    :style=\"rootStyle\"\r\n    :title=\"title || undefined\"\r\n    :aria-label=\"ariaLabel || iconDisplayName\"\r\n    :role=\"clickable ? 'button' : 'img'\"\r\n    :tabindex=\"clickable ? 0 : -1\"\r\n    @click=\"handleClick\"\r\n    @keydown=\"handleKeydown\"\r\n  >\r\n    <!-- 方式1：Iconify图标（默认方式） -->\r\n    <Icon\r\n      v-if=\"\r\n        (type === 'iconify' || !type) && !hasError && typeof name === 'string'\r\n      \"\r\n      :icon=\"name\"\r\n      :width=\"size\"\r\n      :height=\"size\"\r\n      :color=\"color\"\r\n      :style=\"iconStyle\"\r\n      @error=\"() => handleError('iconify', 'Iconify图标加载失败')\"\r\n    />\r\n\r\n    <!-- 方式2：UnoCSS图标 -->\r\n    <div\r\n      v-else-if=\"type === 'unocss' && !hasError && typeof name === 'string'\"\r\n      :class=\"[name, iconClasses]\"\r\n      :style=\"iconStyle\"\r\n      @error=\"() => handleError('unocss', 'UnoCSS图标渲染失败')\"\r\n    />\r\n\r\n    <!-- 方式3：组件挂载方式 -->\r\n    <component\r\n      v-else-if=\"type === 'component' && resolvedComponent && !hasError\"\r\n      :is=\"resolvedComponent\"\r\n      :style=\"iconStyle\"\r\n      v-bind=\"componentProps\"\r\n      @error=\"() => handleError('component', '组件图标渲染失败')\"\r\n    />\r\n\r\n    <!-- 方式4：SVG路径方式 -->\r\n    <svg\r\n      v-else-if=\"type === 'svg' && svgPath && !hasError\"\r\n      :width=\"size\"\r\n      :height=\"size\"\r\n      :viewBox=\"viewBox\"\r\n      :style=\"iconStyle\"\r\n      :fill=\"color\"\r\n      @error=\"() => handleError('svg', 'SVG图标渲染失败')\"\r\n    >\r\n      <path\r\n        :d=\"svgPath\"\r\n        :fill=\"color\"\r\n      />\r\n    </svg>\r\n\r\n    <!-- 方式5：图片方式 - 修复异步加载 -->\r\n    <img\r\n      v-else-if=\"type === 'image' && imageSrc && !hasError && !imageLoading\"\r\n      :src=\"imageSrc\"\r\n      :alt=\"alt || iconDisplayName\"\r\n      :width=\"size\"\r\n      :height=\"size\"\r\n      style=\"display: inline-block; vertical-align: middle\"\r\n      @error=\"() => handleError('image', '图片图标加载失败')\"\r\n      @load=\"handleImageLoad\"\r\n    />\r\n\r\n    <!-- 图片加载状态 -->\r\n    <div\r\n      v-if=\"(loading || imageLoading) && !hasError\"\r\n      class=\"c-icon__loading\"\r\n      :style=\"iconStyle\"\r\n    >\r\n      <div class=\"c-icon__spinner\" />\r\n    </div>\r\n\r\n    <!-- 统一错误状态显示 -->\r\n    <Icon\r\n      v-else-if=\"hasError && fallbackIcon\"\r\n      :icon=\"fallbackIcon\"\r\n      :width=\"size\"\r\n      :height=\"size\"\r\n      :color=\"color\"\r\n      :style=\"iconStyle\"\r\n    />\r\n    <div\r\n      v-else-if=\"hasError\"\r\n      class=\"c-icon__error\"\r\n      :style=\"iconStyle\"\r\n      :title=\"`图标解析失败: ${iconDisplayName} (${errorMessage})`\"\r\n    >\r\n      ⚠️\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script lang=\"ts\" setup>\r\n  import { Icon } from '@iconify/vue'\r\n  import { useImage } from '../../hooks/useImage'\r\n  import { computed, nextTick, onMounted, readonly, ref, watch } from 'vue'\r\n  import type { IconProps } from './types'\r\n\r\n  interface LegacyIconProps extends IconProps {\r\n    /** 图标名称/路径/组件实例 */\r\n    name: string | any\r\n    /** 图标类型 */\r\n    type?: 'iconify' | 'unocss' | 'component' | 'svg' | 'image'\r\n    /** 图标颜色 */\r\n    color?: string\r\n    /** 图标大小(px) */\r\n    size?: number | string\r\n    /** SVG路径数据(仅type=svg时使用) */\r\n    svgPath?: string\r\n    /** SVG viewBox(仅type=svg时使用) */\r\n    viewBox?: string\r\n    /** 图片alt属性(仅type=image时使用) */\r\n    alt?: string\r\n    /** 是否可点击 */\r\n    clickable?: boolean\r\n    /** 加载状态 */\r\n    loading?: boolean\r\n    /** 错误时的回退图标 */\r\n    fallbackIcon?: string\r\n    /** 工具提示 */\r\n    title?: string\r\n    /** 无障碍标签 */\r\n    ariaLabel?: string\r\n    /** 自定义样式类 */\r\n    customClass?: string\r\n    /** 旋转角度 */\r\n    rotate?: number\r\n    /** 是否翻转 */\r\n    flip?: 'horizontal' | 'vertical' | 'both'\r\n    /** 传递给组件的额外属性(仅type=component时使用) */\r\n    componentProps?: Record<string, any>\r\n  }\r\n\r\n  const props = withDefaults(defineProps<LegacyIconProps>(), {\r\n    name: undefined,\r\n    type: 'iconify',\r\n    color: 'currentColor',\r\n    size: 18,\r\n    svgPath: '',\r\n    viewBox: '0 0 24 24',\r\n    alt: '',\r\n    clickable: false,\r\n    loading: false,\r\n    fallbackIcon: '',\r\n    title: '',\r\n    ariaLabel: '',\r\n    customClass: '',\r\n    rotate: 0,\r\n    flip: undefined,\r\n    componentProps: () => ({}),\r\n  })\r\n\r\n  const emit = defineEmits<{\r\n    click: [event: MouseEvent]\r\n    error: [type: string, error?: any]\r\n    load: []\r\n  }>()\r\n\r\n  const iconRef = ref<HTMLElement>()\r\n  const hasError = ref(false)\r\n  const errorMessage = ref('')\r\n  const imageSrc = ref<string>('') // 存储异步加载的图片URL\r\n  const imageLoading = ref(false) // 图片加载状态\r\n\r\n  // 计算根元素样式\r\n  const rootStyle = computed(() => ({\r\n    fontSize: typeof props.size === 'number' ? `${props.size}px` : props.size,\r\n    color: props.color,\r\n    cursor: props.clickable ? 'pointer' : 'inherit',\r\n  }))\r\n\r\n  // 计算图标样式\r\n  const iconStyle = computed(() => {\r\n    const style: Record<string, any> = {\r\n      display: 'inline-flex',\r\n      justifyContent: 'center',\r\n      alignItems: 'center',\r\n      width: typeof props.size === 'number' ? `${props.size}px` : props.size,\r\n      height: typeof props.size === 'number' ? `${props.size}px` : props.size,\r\n    }\r\n\r\n    // 旋转\r\n    if (props.rotate) {\r\n      style.transform = `rotate(${props.rotate}deg)`\r\n    }\r\n\r\n    // 翻转\r\n    if (props.flip) {\r\n      const scaleX =\r\n        props.flip === 'horizontal' || props.flip === 'both' ? -1 : 1\r\n      const scaleY = props.flip === 'vertical' || props.flip === 'both' ? -1 : 1\r\n      style.transform = `${\r\n        style.transform || ''\r\n      } scaleX(${scaleX}) scaleY(${scaleY})`.trim()\r\n    }\r\n\r\n    return style\r\n  })\r\n\r\n  // 获取图标名称用于显示\r\n  const iconDisplayName = computed(() => {\r\n    if (typeof props.name === 'string') {\r\n      return props.name\r\n    }\r\n    if (props.name && props.name.__name) {\r\n      return props.name.__name\r\n    }\r\n    if (props.name && props.name.name) {\r\n      return props.name.name\r\n    }\r\n    return 'Component Icon'\r\n  })\r\n\r\n  // 图标类名\r\n  const iconClasses = computed(() => [\r\n    props.customClass,\r\n    {\r\n      'c-icon__rotatable': props.rotate !== 0,\r\n      'c-icon__flippable': !!props.flip,\r\n    },\r\n  ])\r\n\r\n  // 解析组件名称（纯计算属性，无副作用）\r\n  const resolvedComponent = computed(() => {\r\n    if (props.type !== 'component' || !props.name) return null\r\n    return props.name\r\n  })\r\n\r\n  // 统一错误处理函数\r\n  const handleError = (type: string, message: string, originalError?: any) => {\r\n    console.warn(`[C_Icon] ${message}:`, iconDisplayName.value, originalError)\r\n    errorMessage.value = message\r\n    imageLoading.value = false // 错误时停止加载状态\r\n    emit('error', type, originalError)\r\n\r\n    // 如果有回退图标，尝试切换为 fallback Iconify 图标\r\n    if (props.fallbackIcon && !hasError.value) {\r\n      hasError.value = false\r\n      // 将 name 重写为 fallbackIcon 并重置状态\r\n      // 因为 props 不可变，通过模板中的 fallback 分支渲染\r\n      return\r\n    }\r\n\r\n    hasError.value = true\r\n  }\r\n\r\n  // 处理点击事件\r\n  const handleClick = (event: MouseEvent) => {\r\n    if (!props.clickable || props.loading) return\r\n    emit('click', event)\r\n  }\r\n\r\n  // 处理键盘事件\r\n  const handleKeydown = (event: KeyboardEvent) => {\r\n    if (!props.clickable || props.loading) return\r\n    if (event.key === 'Enter' || event.key === ' ') {\r\n      event.preventDefault()\r\n      emit('click', event as any)\r\n    }\r\n  }\r\n\r\n  // 处理图片加载成功\r\n  const handleImageLoad = () => {\r\n    imageLoading.value = false\r\n    emit('load')\r\n  }\r\n\r\n  // 异步加载图片 - 修复关键函数\r\n  const loadImageSrc = async () => {\r\n    if (props.type !== 'image' || typeof props.name !== 'string') {\r\n      imageSrc.value = ''\r\n      return\r\n    }\r\n\r\n    // 如果是完整URL，直接设置\r\n    if (\r\n      props.name.startsWith('http://') ||\r\n      props.name.startsWith('https://') ||\r\n      props.name.startsWith('//') ||\r\n      props.name.startsWith('/')\r\n    ) {\r\n      imageSrc.value = props.name\r\n      return\r\n    }\r\n\r\n    // 其他情况都当作本地图片处理\r\n    try {\r\n      imageLoading.value = true\r\n      const imageUrl = await useImage(props.name)\r\n      if (imageUrl) {\r\n        imageSrc.value = imageUrl\r\n      } else {\r\n        handleError('image', '图片路径解析失败')\r\n      }\r\n    } catch (error) {\r\n      handleError('image', '图片加载失败', error)\r\n    } finally {\r\n      imageLoading.value = false\r\n    }\r\n  }\r\n\r\n  // 验证规则映射\r\n  const validationRules = {\r\n    iconify: (): string | null => {\r\n      if (!props.name.includes(':')) {\r\n        console.warn(\r\n          '[C_Icon] Iconify图标名称格式应为 \"prefix:name\"，如 \"mdi:home\"'\r\n        )\r\n      }\r\n      return null\r\n    },\r\n    unocss: (): string | null => {\r\n      if (typeof props.name !== 'string' || !props.name.startsWith('i-')) {\r\n        console.warn('[C_Icon] UnoCSS图标名称应以 \"i-\" 开头')\r\n      }\r\n      return null\r\n    },\r\n    component: (): string | null =>\r\n      !resolvedComponent.value ? '无法解析组件' : null,\r\n    svg: (): string | null => (!props.svgPath ? 'SVG路径不能为空' : null),\r\n    image: (): string | null => {\r\n      // 对于image类型，异步验证在loadImageSrc中处理\r\n      return null\r\n    },\r\n  }\r\n\r\n  // 验证配置\r\n  const validateProps = () => {\r\n    hasError.value = false\r\n    errorMessage.value = ''\r\n\r\n    // 基础验证\r\n    if (!props.name) {\r\n      return handleError('validation', '图标名称不能为空')\r\n    }\r\n\r\n    // 类型验证\r\n    const validator = validationRules[props.type]\r\n    if (!validator) {\r\n      return handleError('type', '不支持的图标类型')\r\n    }\r\n\r\n    const errorMsg = validator()\r\n    if (errorMsg) {\r\n      handleError(props.type, errorMsg)\r\n    }\r\n\r\n    // 如果是图片类型，异步加载图片\r\n    if (props.type === 'image') {\r\n      loadImageSrc()\r\n    }\r\n  }\r\n\r\n  // 监听关键属性变化\r\n  watch(\r\n    () => [props.name, props.type, props.svgPath],\r\n    () => {\r\n      nextTick(validateProps)\r\n    },\r\n    { immediate: true }\r\n  )\r\n\r\n  // 组件挂载后：仅对非 image 类型触发 load 事件（watch immediate 已完成验证）\r\n  onMounted(() => {\r\n    if (!hasError.value && props.type !== 'image') {\r\n      emit('load')\r\n    }\r\n  })\r\n\r\n  // 暴露方法给父组件\r\n  defineExpose({\r\n    /** 重新验证配置 */\r\n    validate: validateProps,\r\n    /** 是否有错误 */\r\n    hasError: readonly(hasError),\r\n    /** 错误信息 */\r\n    errorMessage: readonly(errorMessage),\r\n    /** DOM引用 */\r\n    el: iconRef,\r\n  })\r\n</script>\r\n"],"mappings":"8XASA,MAAa,EAAW,MACtB,EACA,IACoB,CACpB,GAAI,CAAC,EAAW,MAAO,GAGvB,GACE,EAAU,WAAW,UAAU,EAC/B,EAAU,WAAW,WAAW,EAChC,EAAU,WAAW,QAAQ,EAC7B,EAAU,WAAW,QAAQ,EAC7B,EAAU,WAAW,IAAI,CAEzB,OAAO,EAIT,GAAI,EACF,GAAI,CACF,OAAO,MAAM,EAAS,EAAU,OACzB,EAAG,CAEV,OADA,QAAQ,MAAM,0BAA0B,IAAa,EAAE,CAChD,GAKX,OAAO,wnBCsHP,IAAM,EAAQ,EAmBR,EAAO,EAMP,EAAU,GAAkB,CAC5B,EAAW,EAAI,GAAM,CACrB,EAAe,EAAI,GAAG,CACtB,EAAW,EAAY,GAAG,CAC1B,EAAe,EAAI,GAAM,CAGzB,EAAY,OAAgB,CAChC,SAAU,OAAO,EAAM,MAAS,SAAW,GAAG,EAAM,KAAK,IAAM,EAAM,KACrE,MAAO,EAAM,MACb,OAAQ,EAAM,UAAY,UAAY,UACvC,EAAE,CAGG,EAAY,MAAe,CAC/B,IAAM,EAA6B,CACjC,QAAS,cACT,eAAgB,SAChB,WAAY,SACZ,MAAO,OAAO,EAAM,MAAS,SAAW,GAAG,EAAM,KAAK,IAAM,EAAM,KAClE,OAAQ,OAAO,EAAM,MAAS,SAAW,GAAG,EAAM,KAAK,IAAM,EAAM,KACpE,CAQD,GALI,EAAM,SACR,EAAM,UAAY,UAAU,EAAM,OAAO,OAIvC,EAAM,KAAM,CACd,IAAM,EACJ,EAAM,OAAS,cAAgB,EAAM,OAAS,OAAS,GAAK,EACxD,EAAS,EAAM,OAAS,YAAc,EAAM,OAAS,OAAS,GAAK,EACzE,EAAM,UAAY,GAChB,EAAM,WAAa,GACpB,UAAU,EAAO,WAAW,EAAO,GAAG,MAAM,CAG/C,OAAO,GACP,CAGI,EAAkB,MAClB,OAAO,EAAM,MAAS,SACjB,EAAM,KAEX,EAAM,MAAQ,EAAM,KAAK,OACpB,EAAM,KAAK,OAEhB,EAAM,MAAQ,EAAM,KAAK,KACpB,EAAM,KAAK,KAEb,iBACP,CAGI,EAAc,MAAe,CACjC,EAAM,YACN,CACE,oBAAqB,EAAM,SAAW,EACtC,oBAAqB,CAAC,CAAC,EAAM,KAC9B,CACF,CAAC,CAGI,EAAoB,MACpB,EAAM,OAAS,aAAe,CAAC,EAAM,KAAa,KAC/C,EAAM,KACb,CAGI,GAAe,EAAc,EAAiB,IAAwB,CAO1E,GANA,QAAQ,KAAK,YAAY,EAAQ,GAAI,EAAgB,MAAO,EAAc,CAC1E,EAAa,MAAQ,EACrB,EAAa,MAAQ,GACrB,EAAK,QAAS,EAAM,EAAc,CAG9B,EAAM,cAAgB,CAAC,EAAS,MAAO,CACzC,EAAS,MAAQ,GAGjB,OAGF,EAAS,MAAQ,IAIb,EAAe,GAAsB,CACrC,CAAC,EAAM,WAAa,EAAM,SAC9B,EAAK,QAAS,EAAM,EAIhB,EAAiB,GAAyB,CAC1C,CAAC,EAAM,WAAa,EAAM,UAC1B,EAAM,MAAQ,SAAW,EAAM,MAAQ,OACzC,EAAM,gBAAgB,CACtB,EAAK,QAAS,EAAa,GAKzB,MAAwB,CAC5B,EAAa,MAAQ,GACrB,EAAK,OAAO,EAIR,EAAe,SAAY,CAC/B,GAAI,EAAM,OAAS,SAAW,OAAO,EAAM,MAAS,SAAU,CAC5D,EAAS,MAAQ,GACjB,OAIF,GACE,EAAM,KAAK,WAAW,UAAU,EAChC,EAAM,KAAK,WAAW,WAAW,EACjC,EAAM,KAAK,WAAW,KAAK,EAC3B,EAAM,KAAK,WAAW,IAAI,CAC1B,CACA,EAAS,MAAQ,EAAM,KACvB,OAIF,GAAI,CACF,EAAa,MAAQ,GACrB,IAAM,EAAW,MAAM,EAAS,EAAM,KAAK,CACvC,EACF,EAAS,MAAQ,EAEjB,EAAY,QAAS,WAAW,OAE3B,EAAO,CACd,EAAY,QAAS,SAAU,EAAM,QAC7B,CACR,EAAa,MAAQ,KAKnB,EAAkB,CACtB,aACO,EAAM,KAAK,SAAS,IAAI,EAC3B,QAAQ,KACN,sDACD,CAEI,MAET,aACM,OAAO,EAAM,MAAS,UAAY,CAAC,EAAM,KAAK,WAAW,KAAK,GAChE,QAAQ,KAAK,gCAAgC,CAExC,MAET,cACG,EAAkB,MAAmB,KAAX,SAC7B,QAA4B,EAAM,QAAwB,KAAd,YAC5C,UAES,KAEV,CAGK,MAAsB,CAK1B,GAJA,EAAS,MAAQ,GACjB,EAAa,MAAQ,GAGjB,CAAC,EAAM,KACT,OAAO,EAAY,aAAc,WAAW,CAI9C,IAAM,EAAY,EAAgB,EAAM,MACxC,GAAI,CAAC,EACH,OAAO,EAAY,OAAQ,WAAW,CAGxC,IAAM,EAAW,GAAW,CACxB,GACF,EAAY,EAAM,KAAM,EAAS,CAI/B,EAAM,OAAS,SACjB,GAAc,SAKlB,MACQ,CAAC,EAAM,KAAM,EAAM,KAAM,EAAM,QAAQ,KACvC,CACJ,EAAS,EAAc,EAEzB,CAAE,UAAW,GAAM,CACpB,CAGD,MAAgB,CACV,CAAC,EAAS,OAAS,EAAM,OAAS,SACpC,EAAK,OAAO,EAEd,CAGF,EAAa,CAEX,SAAU,EAEV,SAAU,EAAS,EAAS,CAE5B,aAAc,EAAS,EAAa,CAEpC,GAAI,EACL,CAAC,aCzYF,EAuGM,MAAA,SAtGA,UAAJ,IAAI,EACJ,MAAK,EAAA,CAAC,SAAQ,CAAA,WACcA,EAAAA,OAAAA,qBAA+CC,EAAAA,4BAAuCC,EAAAA,wBAAmC,EAAA,UAQpJ,MAAK,EAAE,EAAA,MAAS,CAChB,MAAOC,EAAAA,OAAS,IAAA,GAChB,aAAYC,EAAAA,WAAa,EAAA,MACzB,KAAMH,EAAAA,UAAS,SAAA,MACf,SAAUA,EAAAA,UAAS,EAAA,GACnB,QAAO,EACP,UAAS,IAEV,EAAA,wBAA4B,EAETD,EAAAA,OAAI,WAAA,CAAmBA,EAAAA,OAAI,CAAM,EAAA,OAAQ,OAAWK,EAAAA,MAAI,UAAA,GAAA,CAD3E,EAUE,EAAA,EAAA,CAAA,OANC,KAAMA,EAAAA,KACN,MAAOC,EAAAA,KACP,OAAQA,EAAAA,KACR,MAAOC,EAAAA,MACP,MAAK,EAAE,EAAA,MAAS,CAChB,QAAK,AAAA,EAAA,SAAQ,EAAW,UAAA,gBAAA,qDAKdP,EAAAA,OAAI,UAAA,CAAkB,EAAA,OAAQ,OAAWK,EAAAA,MAAI,UAAA,GAAA,CAD1D,EAKE,EAAA,CAAA,IAAA,EAAA,CAAA,CANF,EAAA,iBAAqB,CACrB,EAKE,MAAA,CAHC,MAAK,EAAA,CAAGA,EAAAA,KAAM,EAAA,MAAW,CAAA,CACzB,MAAK,EAAE,EAAA,MAAS,CAChB,QAAK,AAAA,EAAA,SAAQ,EAAW,SAAA,eAAA,mBAKdL,EAAAA,OAAI,aAAoB,EAAA,OAAiB,CAAK,EAAA,OAAA,GAAA,CAD3D,EAME,EAAA,CAAA,IAAA,EAAA,CAAA,CAPF,EAAA,eAAmB,EAAA,GAAA,CACnB,EAME,EAJK,EAAA,MAAiB,CAFxB,EAME,CAHC,MAAO,EAAA,MAAS,CACTQ,EAAAA,eAAc,CACrB,QAAK,AAAA,EAAA,SAAQ,EAAW,YAAA,WAAA,CAAA,CAAA,CAAA,KAAA,GAAA,CAAA,QAAA,CAAA,EAAA,CAAA,KAAA,EAKdR,EAAAA,OAAI,OAAcS,EAAAA,SAAO,CAAK,EAAA,OAAA,GAAA,CAD3C,EAaM,EAAA,CAAA,IAAA,EAAA,CAAA,CAdN,EAAA,gBAAoB,EAAA,GAAA,CACpB,EAaM,MAAA,CAXH,MAAOH,EAAAA,KACP,OAAQA,EAAAA,KACR,QAASI,EAAAA,QACT,MAAK,EAAE,EAAA,MAAS,CAChB,KAAMH,EAAAA,MACN,QAAK,AAAA,EAAA,SAAQ,EAAW,MAAA,YAAA,GAEzB,EAGE,OAAA,CAFC,EAAGE,EAAAA,QACH,KAAMF,EAAAA,iCAMEP,EAAAA,OAAI,SAAgB,EAAA,OAAQ,CAAK,EAAA,OAAQ,CAAK,EAAA,OAAA,GAAA,CAD3D,EASE,EAAA,CAAA,IAAA,EAAA,CAAA,CAVF,EAAA,sBAA0B,CAC1B,EASE,MAAA,CAPC,IAAK,EAAA,MACL,IAAKW,EAAAA,KAAO,EAAA,MACZ,MAAOL,EAAAA,KACP,OAAQA,EAAAA,KACT,MAAA,CAAA,QAAA,eAAA,iBAAA,SAAqD,CACpD,QAAK,AAAA,EAAA,SAAQ,EAAW,QAAA,WAAA,CACxB,OAAM,mCAGT,EAAA,WAAe,EAENJ,EAAAA,SAAW,EAAA,QAAY,CAAM,EAAA,OAAA,GAAA,CADtC,EAMM,MAAA,OAJJ,MAAM,kBACL,MAAK,EAAE,EAAA,MAAA,UAER,EAA+B,MAAA,CAA1B,MAAM,kBAAiB,CAAA,KAAA,GAAA,CAAA,CAAA,EAAA,EAKjB,EAAA,OAAYU,EAAAA,cAAAA,GAAAA,CADzB,EAOE,EAAA,CAAA,IAAA,EAAA,CAAA,CARF,EAAA,aAAiB,CACjB,EAOE,EAAA,EAAA,CAAA,CALC,KAAMA,EAAAA,aACN,MAAON,EAAAA,KACP,OAAQA,EAAAA,KACR,MAAOC,EAAAA,MACP,MAAK,EAAE,EAAA,MAAA,4DAGG,EAAA,OAAA,GAAA,CADb,EAOM,MAAA,OALJ,MAAM,gBACL,MAAK,EAAE,EAAA,MAAS,CAChB,MAAK,WAAa,EAAA,MAAe,IAAK,EAAA,MAAY,IACpD,OAED,GAAA,EAAA,EAAA,EAAA,OAAA,GAAA"}

package/dist/C_Language.d.cts

@@ -1,2 +1,2 @@
-import { n as _default, t as LanguageOption } from "./index16.vue.js";
+import { n as LanguageOption, t as _default } from "./index16.vue.js";
 export { _default as C_Language, type LanguageOption };

package/dist/C_Language.d.ts

@@ -1,2 +1,2 @@
-import { n as _default, t as LanguageOption } from "./index16.vue.js";
+import { n as LanguageOption, t as _default } from "./index16.vue.js";
 export { _default as C_Language, type LanguageOption };

package/dist/C_Language.js.map

@@ -1 +1 @@
-{"version":3,"file":"C_Language.js","names":["modelValue"],"sources":["../src/components/C_Language/index.vue","../src/components/C_Language/index.vue"],"sourcesContent":["<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2025-11-19\n * @Description: 语言切换组件\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n  <NDropdown\n    size=\"small\"\n    trigger=\"hover\"\n    :options=\"finalOptions\"\n    :value=\"modelValue\"\n    @select=\"handleLanguageChange\"\n  >\n    <NButton text>\n      <div class=\"flex items-center\">\n        <C_Icon\n          name=\"mdi:language\"\n          :size=\"18\"\n          :title=\"tooltipText\"\n        />\n      </div>\n    </NButton>\n  </NDropdown>\n</template>\n\n<script setup lang=\"ts\">\n  import { computed, h } from 'vue'\n  import { NDropdown, NButton } from 'naive-ui'\n  import C_Icon from '../C_Icon/index.vue'\n\n  defineOptions({ name: 'C_Language' })\n\n  export interface LanguageOption {\n    key: string\n    label: string\n    iconClass?: string\n  }\n\n  const props = withDefaults(\n    defineProps<{\n      modelValue?: string\n      options?: LanguageOption[]\n      /** Tooltip 文案，默认 \"语言切换\" */\n      tooltip?: string\n    }>(),\n    {\n      modelValue: 'zh-cn',\n      tooltip: '语言切换',\n      options: () => [\n        { key: 'zh-cn', label: '简体中文', iconClass: 'mdi:alpha-c' },\n        { key: 'en', label: 'English', iconClass: 'mdi:alpha-u' },\n        { key: 'ja', label: '日本語', iconClass: 'mdi:alpha-j' },\n        { key: 'ko', label: '한국어', iconClass: 'mdi:alpha-k' },\n      ],\n    }\n  )\n\n  const emit = defineEmits<{\n    'update:modelValue': [key: string]\n    change: [key: string]\n  }>()\n\n  /** 当前语言显示名 */\n  const currentLabel = computed(() => {\n    const opt = props.options.find(o => o.key === props.modelValue)\n    return opt?.label ?? props.modelValue\n  })\n\n  const tooltipText = computed(() => `${props.tooltip} (${currentLabel.value})`)\n\n  const finalOptions = computed(() =>\n    props.options.map(opt => ({\n      key: opt.key,\n      label: opt.label,\n      icon: opt.iconClass\n        ? () => h(C_Icon, { name: opt.iconClass, size: 16 })\n        : undefined,\n    }))\n  )\n\n  const handleLanguageChange = (key: string) => {\n    if (key === props.modelValue) return\n    emit('update:modelValue', key)\n    emit('change', key)\n  }\n</script>\n","<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2025-11-19\n * @Description: 语言切换组件\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n  <NDropdown\n    size=\"small\"\n    trigger=\"hover\"\n    :options=\"finalOptions\"\n    :value=\"modelValue\"\n    @select=\"handleLanguageChange\"\n  >\n    <NButton text>\n      <div class=\"flex items-center\">\n        <C_Icon\n          name=\"mdi:language\"\n          :size=\"18\"\n          :title=\"tooltipText\"\n        />\n      </div>\n    </NButton>\n  </NDropdown>\n</template>\n\n<script setup lang=\"ts\">\n  import { computed, h } from 'vue'\n  import { NDropdown, NButton } from 'naive-ui'\n  import C_Icon from '../C_Icon/index.vue'\n\n  defineOptions({ name: 'C_Language' })\n\n  export interface LanguageOption {\n    key: string\n    label: string\n    iconClass?: string\n  }\n\n  const props = withDefaults(\n    defineProps<{\n      modelValue?: string\n      options?: LanguageOption[]\n      /** Tooltip 文案，默认 \"语言切换\" */\n      tooltip?: string\n    }>(),\n    {\n      modelValue: 'zh-cn',\n      tooltip: '语言切换',\n      options: () => [\n        { key: 'zh-cn', label: '简体中文', iconClass: 'mdi:alpha-c' },\n        { key: 'en', label: 'English', iconClass: 'mdi:alpha-u' },\n        { key: 'ja', label: '日本語', iconClass: 'mdi:alpha-j' },\n        { key: 'ko', label: '한국어', iconClass: 'mdi:alpha-k' },\n      ],\n    }\n  )\n\n  const emit = defineEmits<{\n    'update:modelValue': [key: string]\n    change: [key: string]\n  }>()\n\n  /** 当前语言显示名 */\n  const currentLabel = computed(() => {\n    const opt = props.options.find(o => o.key === props.modelValue)\n    return opt?.label ?? props.modelValue\n  })\n\n  const tooltipText = computed(() => `${props.tooltip} (${currentLabel.value})`)\n\n  const finalOptions = computed(() =>\n    props.options.map(opt => ({\n      key: opt.key,\n      label: opt.label,\n      icon: opt.iconClass\n        ? () => h(C_Icon, { name: opt.iconClass, size: 16 })\n        : undefined,\n    }))\n  )\n\n  const handleLanguageChange = (key: string) => {\n    if (key === props.modelValue) return\n    emit('update:modelValue', key)\n    emit('change', key)\n  }\n</script>\n"],"mappings":"+gBAwCE,IAAM,EAAQ,EAmBR,EAAO,EAMP,GAAA,EAAA,EAAA,cACQ,EAAM,QAAQ,KAAK,GAAK,EAAE,MAAQ,EAAM,WAAU,EAClD,OAAS,EAAM,WAC5B,CAEK,GAAA,EAAA,EAAA,cAA6B,GAAG,EAAM,QAAQ,IAAI,EAAa,MAAM,GAAE,CAEvE,GAAA,EAAA,EAAA,cACJ,EAAM,QAAQ,IAAI,IAAQ,CACxB,IAAK,EAAI,IACT,MAAO,EAAI,MACX,KAAM,EAAI,eAAA,EAAA,EAAA,GACE,EAAA,EAAQ,CAAE,KAAM,EAAI,UAAW,KAAM,GAAI,CAAA,CACjD,IAAA,GACL,EAAC,CACJ,CAEM,EAAwB,GAAgB,CACxC,IAAQ,EAAM,aAClB,EAAK,oBAAqB,EAAG,CAC7B,EAAK,SAAU,EAAG,iEC7DR,EAAA,UAAA,CAAA,CAfV,KAAK,QACL,QAAQ,QACP,QAAS,EAAA,MACT,MAAOA,EAAAA,WACP,SAAQ,8BAUC,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,OAAA,EAAA,QAAA,CAAA,CARD,KAAA,GAAI,CAAA,2BAOL,EAAA,EAAA,EAAA,oBAAA,MANN,EAMM,EAAA,EAAA,EAAA,aADF,EAAA,EAAA,CAHA,KAAK,eACJ,KAAM,GACN,MAAO,EAAA"}
+{"version":3,"file":"C_Language.js","names":["modelValue"],"sources":["../src/components/C_Language/index.vue","../src/components/C_Language/index.vue"],"sourcesContent":["<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-11-19\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  <NDropdown\r\n    size=\"small\"\r\n    trigger=\"hover\"\r\n    :options=\"finalOptions\"\r\n    :value=\"modelValue\"\r\n    @select=\"handleLanguageChange\"\r\n  >\r\n    <NButton text>\r\n      <div class=\"flex items-center\">\r\n        <C_Icon\r\n          name=\"mdi:language\"\r\n          :size=\"18\"\r\n          :title=\"tooltipText\"\r\n        />\r\n      </div>\r\n    </NButton>\r\n  </NDropdown>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n  import { computed, h } from 'vue'\r\n  import { NDropdown, NButton } from 'naive-ui'\r\n  import C_Icon from '../C_Icon/index.vue'\r\n  import type { LanguageOption } from './types'\r\n\r\n  defineOptions({ name: 'C_Language' })\r\n\r\n  interface LegacyLanguageOption extends LanguageOption {\r\n    key: string\r\n    label: string\r\n    iconClass?: string\r\n  }\r\n\r\n  const props = withDefaults(\r\n    defineProps<{\r\n      modelValue?: string\r\n      options?: LegacyLanguageOption[]\r\n      /** Tooltip 文案，默认 \"语言切换\" */\r\n      tooltip?: string\r\n    }>(),\r\n    {\r\n      modelValue: 'zh-cn',\r\n      tooltip: '语言切换',\r\n      options: () => [\r\n        { key: 'zh-cn', label: '简体中文', iconClass: 'mdi:alpha-c' },\r\n        { key: 'en', label: 'English', iconClass: 'mdi:alpha-u' },\r\n        { key: 'ja', label: '日本語', iconClass: 'mdi:alpha-j' },\r\n        { key: 'ko', label: '한국어', iconClass: 'mdi:alpha-k' },\r\n      ],\r\n    }\r\n  )\r\n\r\n  const emit = defineEmits<{\r\n    'update:modelValue': [key: string]\r\n    change: [key: string]\r\n  }>()\r\n\r\n  /** 当前语言显示名 */\r\n  const currentLabel = computed(() => {\r\n    const opt = props.options.find(o => o.key === props.modelValue)\r\n    return opt?.label ?? props.modelValue\r\n  })\r\n\r\n  const tooltipText = computed(() => `${props.tooltip} (${currentLabel.value})`)\r\n\r\n  const finalOptions = computed(() =>\r\n    props.options.map(opt => ({\r\n      key: opt.key,\r\n      label: opt.label,\r\n      icon: opt.iconClass\r\n        ? () => h(C_Icon, { name: opt.iconClass, size: 16 })\r\n        : undefined,\r\n    }))\r\n  )\r\n\r\n  const handleLanguageChange = (key: string) => {\r\n    if (key === props.modelValue) return\r\n    emit('update:modelValue', key)\r\n    emit('change', key)\r\n  }\r\n</script>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-11-19\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  <NDropdown\r\n    size=\"small\"\r\n    trigger=\"hover\"\r\n    :options=\"finalOptions\"\r\n    :value=\"modelValue\"\r\n    @select=\"handleLanguageChange\"\r\n  >\r\n    <NButton text>\r\n      <div class=\"flex items-center\">\r\n        <C_Icon\r\n          name=\"mdi:language\"\r\n          :size=\"18\"\r\n          :title=\"tooltipText\"\r\n        />\r\n      </div>\r\n    </NButton>\r\n  </NDropdown>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n  import { computed, h } from 'vue'\r\n  import { NDropdown, NButton } from 'naive-ui'\r\n  import C_Icon from '../C_Icon/index.vue'\r\n  import type { LanguageOption } from './types'\r\n\r\n  defineOptions({ name: 'C_Language' })\r\n\r\n  interface LegacyLanguageOption extends LanguageOption {\r\n    key: string\r\n    label: string\r\n    iconClass?: string\r\n  }\r\n\r\n  const props = withDefaults(\r\n    defineProps<{\r\n      modelValue?: string\r\n      options?: LegacyLanguageOption[]\r\n      /** Tooltip 文案，默认 \"语言切换\" */\r\n      tooltip?: string\r\n    }>(),\r\n    {\r\n      modelValue: 'zh-cn',\r\n      tooltip: '语言切换',\r\n      options: () => [\r\n        { key: 'zh-cn', label: '简体中文', iconClass: 'mdi:alpha-c' },\r\n        { key: 'en', label: 'English', iconClass: 'mdi:alpha-u' },\r\n        { key: 'ja', label: '日本語', iconClass: 'mdi:alpha-j' },\r\n        { key: 'ko', label: '한국어', iconClass: 'mdi:alpha-k' },\r\n      ],\r\n    }\r\n  )\r\n\r\n  const emit = defineEmits<{\r\n    'update:modelValue': [key: string]\r\n    change: [key: string]\r\n  }>()\r\n\r\n  /** 当前语言显示名 */\r\n  const currentLabel = computed(() => {\r\n    const opt = props.options.find(o => o.key === props.modelValue)\r\n    return opt?.label ?? props.modelValue\r\n  })\r\n\r\n  const tooltipText = computed(() => `${props.tooltip} (${currentLabel.value})`)\r\n\r\n  const finalOptions = computed(() =>\r\n    props.options.map(opt => ({\r\n      key: opt.key,\r\n      label: opt.label,\r\n      icon: opt.iconClass\r\n        ? () => h(C_Icon, { name: opt.iconClass, size: 16 })\r\n        : undefined,\r\n    }))\r\n  )\r\n\r\n  const handleLanguageChange = (key: string) => {\r\n    if (key === props.modelValue) return\r\n    emit('update:modelValue', key)\r\n    emit('change', key)\r\n  }\r\n</script>\r\n"],"mappings":"+gBAyCE,IAAM,EAAQ,EAmBR,EAAO,EAMP,GAAA,EAAA,EAAA,cACQ,EAAM,QAAQ,KAAK,GAAK,EAAE,MAAQ,EAAM,WAAW,EACnD,OAAS,EAAM,WAC3B,CAEI,GAAA,EAAA,EAAA,cAA6B,GAAG,EAAM,QAAQ,IAAI,EAAa,MAAM,GAAG,CAExE,GAAA,EAAA,EAAA,cACJ,EAAM,QAAQ,IAAI,IAAQ,CACxB,IAAK,EAAI,IACT,MAAO,EAAI,MACX,KAAM,EAAI,eAAA,EAAA,EAAA,GACE,EAAA,EAAQ,CAAE,KAAM,EAAI,UAAW,KAAM,GAAI,CAAC,CAClD,IAAA,GACL,EAAE,CACJ,CAEK,EAAwB,GAAgB,CACxC,IAAQ,EAAM,aAClB,EAAK,oBAAqB,EAAI,CAC9B,EAAK,SAAU,EAAI,iEC9DT,EAAA,UAAA,CAAA,CAfV,KAAK,QACL,QAAQ,QACP,QAAS,EAAA,MACT,MAAOA,EAAAA,WACP,SAAQ,8BAUC,EAAA,EAAA,EAAA,cAAA,EAAA,EAAA,OAAA,EAAA,QAAA,CAAA,CARD,KAAA,GAAI,CAAA,2BAOL,EAAA,EAAA,EAAA,oBAAA,MANN,EAMM,EAAA,EAAA,EAAA,aADF,EAAA,EAAA,CAHA,KAAK,eACJ,KAAM,GACN,MAAO,EAAA"}

package/dist/C_Language2.js.map

@@ -1 +1 @@
-{"version":3,"file":"C_Language2.js","names":["modelValue"],"sources":["../src/components/C_Language/index.vue","../src/components/C_Language/index.vue"],"sourcesContent":["<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2025-11-19\n * @Description: 语言切换组件\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n  <NDropdown\n    size=\"small\"\n    trigger=\"hover\"\n    :options=\"finalOptions\"\n    :value=\"modelValue\"\n    @select=\"handleLanguageChange\"\n  >\n    <NButton text>\n      <div class=\"flex items-center\">\n        <C_Icon\n          name=\"mdi:language\"\n          :size=\"18\"\n          :title=\"tooltipText\"\n        />\n      </div>\n    </NButton>\n  </NDropdown>\n</template>\n\n<script setup lang=\"ts\">\n  import { computed, h } from 'vue'\n  import { NDropdown, NButton } from 'naive-ui'\n  import C_Icon from '../C_Icon/index.vue'\n\n  defineOptions({ name: 'C_Language' })\n\n  export interface LanguageOption {\n    key: string\n    label: string\n    iconClass?: string\n  }\n\n  const props = withDefaults(\n    defineProps<{\n      modelValue?: string\n      options?: LanguageOption[]\n      /** Tooltip 文案，默认 \"语言切换\" */\n      tooltip?: string\n    }>(),\n    {\n      modelValue: 'zh-cn',\n      tooltip: '语言切换',\n      options: () => [\n        { key: 'zh-cn', label: '简体中文', iconClass: 'mdi:alpha-c' },\n        { key: 'en', label: 'English', iconClass: 'mdi:alpha-u' },\n        { key: 'ja', label: '日本語', iconClass: 'mdi:alpha-j' },\n        { key: 'ko', label: '한국어', iconClass: 'mdi:alpha-k' },\n      ],\n    }\n  )\n\n  const emit = defineEmits<{\n    'update:modelValue': [key: string]\n    change: [key: string]\n  }>()\n\n  /** 当前语言显示名 */\n  const currentLabel = computed(() => {\n    const opt = props.options.find(o => o.key === props.modelValue)\n    return opt?.label ?? props.modelValue\n  })\n\n  const tooltipText = computed(() => `${props.tooltip} (${currentLabel.value})`)\n\n  const finalOptions = computed(() =>\n    props.options.map(opt => ({\n      key: opt.key,\n      label: opt.label,\n      icon: opt.iconClass\n        ? () => h(C_Icon, { name: opt.iconClass, size: 16 })\n        : undefined,\n    }))\n  )\n\n  const handleLanguageChange = (key: string) => {\n    if (key === props.modelValue) return\n    emit('update:modelValue', key)\n    emit('change', key)\n  }\n</script>\n","<!--\n * @Author: ChenYu ycyplus@gmail.com\n * @Date: 2025-11-19\n * @Description: 语言切换组件\n * @Migration: naive-ui-components 组件库迁移版本\n * Copyright (c) 2025 by CHENY, All Rights Reserved.\n-->\n<template>\n  <NDropdown\n    size=\"small\"\n    trigger=\"hover\"\n    :options=\"finalOptions\"\n    :value=\"modelValue\"\n    @select=\"handleLanguageChange\"\n  >\n    <NButton text>\n      <div class=\"flex items-center\">\n        <C_Icon\n          name=\"mdi:language\"\n          :size=\"18\"\n          :title=\"tooltipText\"\n        />\n      </div>\n    </NButton>\n  </NDropdown>\n</template>\n\n<script setup lang=\"ts\">\n  import { computed, h } from 'vue'\n  import { NDropdown, NButton } from 'naive-ui'\n  import C_Icon from '../C_Icon/index.vue'\n\n  defineOptions({ name: 'C_Language' })\n\n  export interface LanguageOption {\n    key: string\n    label: string\n    iconClass?: string\n  }\n\n  const props = withDefaults(\n    defineProps<{\n      modelValue?: string\n      options?: LanguageOption[]\n      /** Tooltip 文案，默认 \"语言切换\" */\n      tooltip?: string\n    }>(),\n    {\n      modelValue: 'zh-cn',\n      tooltip: '语言切换',\n      options: () => [\n        { key: 'zh-cn', label: '简体中文', iconClass: 'mdi:alpha-c' },\n        { key: 'en', label: 'English', iconClass: 'mdi:alpha-u' },\n        { key: 'ja', label: '日本語', iconClass: 'mdi:alpha-j' },\n        { key: 'ko', label: '한국어', iconClass: 'mdi:alpha-k' },\n      ],\n    }\n  )\n\n  const emit = defineEmits<{\n    'update:modelValue': [key: string]\n    change: [key: string]\n  }>()\n\n  /** 当前语言显示名 */\n  const currentLabel = computed(() => {\n    const opt = props.options.find(o => o.key === props.modelValue)\n    return opt?.label ?? props.modelValue\n  })\n\n  const tooltipText = computed(() => `${props.tooltip} (${currentLabel.value})`)\n\n  const finalOptions = computed(() =>\n    props.options.map(opt => ({\n      key: opt.key,\n      label: opt.label,\n      icon: opt.iconClass\n        ? () => h(C_Icon, { name: opt.iconClass, size: 16 })\n        : undefined,\n    }))\n  )\n\n  const handleLanguageChange = (key: string) => {\n    if (key === props.modelValue) return\n    emit('update:modelValue', key)\n    emit('change', key)\n  }\n</script>\n"],"mappings":"0oBAwCE,IAAM,EAAQ,EAmBR,EAAO,EAMP,EAAe,MACP,EAAM,QAAQ,KAAK,GAAK,EAAE,MAAQ,EAAM,WAAU,EAClD,OAAS,EAAM,WAC5B,CAEK,EAAc,MAAe,GAAG,EAAM,QAAQ,IAAI,EAAa,MAAM,GAAE,CAEvE,EAAe,MACnB,EAAM,QAAQ,IAAI,IAAQ,CACxB,IAAK,EAAI,IACT,MAAO,EAAI,MACX,KAAM,EAAI,cACA,EAAE,EAAQ,CAAE,KAAM,EAAI,UAAW,KAAM,GAAI,CAAA,CACjD,IAAA,GACL,EAAC,CACJ,CAEM,EAAwB,GAAgB,CACxC,IAAQ,EAAM,aAClB,EAAK,oBAAqB,EAAG,CAC7B,EAAK,SAAU,EAAG,qBC7EpB,EAgBY,EAAA,EAAA,CAAA,CAfV,KAAK,QACL,QAAQ,QACP,QAAS,EAAA,MACT,MAAOA,EAAAA,WACP,SAAQ,kBAUC,CARV,EAQU,EAAA,EAAA,CAAA,CARD,KAAA,GAAI,CAAA,eAOL,CANN,EAMM,MANN,EAMM,CALJ,EAIE,EAAA,CAHA,KAAK,eACJ,KAAM,GACN,MAAO,EAAA"}
+{"version":3,"file":"C_Language2.js","names":["modelValue"],"sources":["../src/components/C_Language/index.vue","../src/components/C_Language/index.vue"],"sourcesContent":["<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-11-19\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  <NDropdown\r\n    size=\"small\"\r\n    trigger=\"hover\"\r\n    :options=\"finalOptions\"\r\n    :value=\"modelValue\"\r\n    @select=\"handleLanguageChange\"\r\n  >\r\n    <NButton text>\r\n      <div class=\"flex items-center\">\r\n        <C_Icon\r\n          name=\"mdi:language\"\r\n          :size=\"18\"\r\n          :title=\"tooltipText\"\r\n        />\r\n      </div>\r\n    </NButton>\r\n  </NDropdown>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n  import { computed, h } from 'vue'\r\n  import { NDropdown, NButton } from 'naive-ui'\r\n  import C_Icon from '../C_Icon/index.vue'\r\n  import type { LanguageOption } from './types'\r\n\r\n  defineOptions({ name: 'C_Language' })\r\n\r\n  interface LegacyLanguageOption extends LanguageOption {\r\n    key: string\r\n    label: string\r\n    iconClass?: string\r\n  }\r\n\r\n  const props = withDefaults(\r\n    defineProps<{\r\n      modelValue?: string\r\n      options?: LegacyLanguageOption[]\r\n      /** Tooltip 文案，默认 \"语言切换\" */\r\n      tooltip?: string\r\n    }>(),\r\n    {\r\n      modelValue: 'zh-cn',\r\n      tooltip: '语言切换',\r\n      options: () => [\r\n        { key: 'zh-cn', label: '简体中文', iconClass: 'mdi:alpha-c' },\r\n        { key: 'en', label: 'English', iconClass: 'mdi:alpha-u' },\r\n        { key: 'ja', label: '日本語', iconClass: 'mdi:alpha-j' },\r\n        { key: 'ko', label: '한국어', iconClass: 'mdi:alpha-k' },\r\n      ],\r\n    }\r\n  )\r\n\r\n  const emit = defineEmits<{\r\n    'update:modelValue': [key: string]\r\n    change: [key: string]\r\n  }>()\r\n\r\n  /** 当前语言显示名 */\r\n  const currentLabel = computed(() => {\r\n    const opt = props.options.find(o => o.key === props.modelValue)\r\n    return opt?.label ?? props.modelValue\r\n  })\r\n\r\n  const tooltipText = computed(() => `${props.tooltip} (${currentLabel.value})`)\r\n\r\n  const finalOptions = computed(() =>\r\n    props.options.map(opt => ({\r\n      key: opt.key,\r\n      label: opt.label,\r\n      icon: opt.iconClass\r\n        ? () => h(C_Icon, { name: opt.iconClass, size: 16 })\r\n        : undefined,\r\n    }))\r\n  )\r\n\r\n  const handleLanguageChange = (key: string) => {\r\n    if (key === props.modelValue) return\r\n    emit('update:modelValue', key)\r\n    emit('change', key)\r\n  }\r\n</script>\r\n","<!--\r\n * @Author: ChenYu ycyplus@gmail.com\r\n * @Date: 2025-11-19\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  <NDropdown\r\n    size=\"small\"\r\n    trigger=\"hover\"\r\n    :options=\"finalOptions\"\r\n    :value=\"modelValue\"\r\n    @select=\"handleLanguageChange\"\r\n  >\r\n    <NButton text>\r\n      <div class=\"flex items-center\">\r\n        <C_Icon\r\n          name=\"mdi:language\"\r\n          :size=\"18\"\r\n          :title=\"tooltipText\"\r\n        />\r\n      </div>\r\n    </NButton>\r\n  </NDropdown>\r\n</template>\r\n\r\n<script setup lang=\"ts\">\r\n  import { computed, h } from 'vue'\r\n  import { NDropdown, NButton } from 'naive-ui'\r\n  import C_Icon from '../C_Icon/index.vue'\r\n  import type { LanguageOption } from './types'\r\n\r\n  defineOptions({ name: 'C_Language' })\r\n\r\n  interface LegacyLanguageOption extends LanguageOption {\r\n    key: string\r\n    label: string\r\n    iconClass?: string\r\n  }\r\n\r\n  const props = withDefaults(\r\n    defineProps<{\r\n      modelValue?: string\r\n      options?: LegacyLanguageOption[]\r\n      /** Tooltip 文案，默认 \"语言切换\" */\r\n      tooltip?: string\r\n    }>(),\r\n    {\r\n      modelValue: 'zh-cn',\r\n      tooltip: '语言切换',\r\n      options: () => [\r\n        { key: 'zh-cn', label: '简体中文', iconClass: 'mdi:alpha-c' },\r\n        { key: 'en', label: 'English', iconClass: 'mdi:alpha-u' },\r\n        { key: 'ja', label: '日本語', iconClass: 'mdi:alpha-j' },\r\n        { key: 'ko', label: '한국어', iconClass: 'mdi:alpha-k' },\r\n      ],\r\n    }\r\n  )\r\n\r\n  const emit = defineEmits<{\r\n    'update:modelValue': [key: string]\r\n    change: [key: string]\r\n  }>()\r\n\r\n  /** 当前语言显示名 */\r\n  const currentLabel = computed(() => {\r\n    const opt = props.options.find(o => o.key === props.modelValue)\r\n    return opt?.label ?? props.modelValue\r\n  })\r\n\r\n  const tooltipText = computed(() => `${props.tooltip} (${currentLabel.value})`)\r\n\r\n  const finalOptions = computed(() =>\r\n    props.options.map(opt => ({\r\n      key: opt.key,\r\n      label: opt.label,\r\n      icon: opt.iconClass\r\n        ? () => h(C_Icon, { name: opt.iconClass, size: 16 })\r\n        : undefined,\r\n    }))\r\n  )\r\n\r\n  const handleLanguageChange = (key: string) => {\r\n    if (key === props.modelValue) return\r\n    emit('update:modelValue', key)\r\n    emit('change', key)\r\n  }\r\n</script>\r\n"],"mappings":"0oBAyCE,IAAM,EAAQ,EAmBR,EAAO,EAMP,EAAe,MACP,EAAM,QAAQ,KAAK,GAAK,EAAE,MAAQ,EAAM,WAAW,EACnD,OAAS,EAAM,WAC3B,CAEI,EAAc,MAAe,GAAG,EAAM,QAAQ,IAAI,EAAa,MAAM,GAAG,CAExE,EAAe,MACnB,EAAM,QAAQ,IAAI,IAAQ,CACxB,IAAK,EAAI,IACT,MAAO,EAAI,MACX,KAAM,EAAI,cACA,EAAE,EAAQ,CAAE,KAAM,EAAI,UAAW,KAAM,GAAI,CAAC,CAClD,IAAA,GACL,EAAE,CACJ,CAEK,EAAwB,GAAgB,CACxC,IAAQ,EAAM,aAClB,EAAK,oBAAqB,EAAI,CAC9B,EAAK,SAAU,EAAI,qBC9ErB,EAgBY,EAAA,EAAA,CAAA,CAfV,KAAK,QACL,QAAQ,QACP,QAAS,EAAA,MACT,MAAOA,EAAAA,WACP,SAAQ,kBAUC,CARV,EAQU,EAAA,EAAA,CAAA,CARD,KAAA,GAAI,CAAA,eAOL,CANN,EAMM,MANN,EAMM,CALJ,EAIE,EAAA,CAHA,KAAK,eACJ,KAAM,GACN,MAAO,EAAA"}

package/dist/C_Steps-27Exh7PM.css.map

@@ -0,0 +1 @@
+{"version":3,"file":"C_Steps-27Exh7PM.css","names":[],"sources":["../src/components/C_Steps/index.vue?vue&type=style&index=0&scoped=c63dbbdc&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled */.c-steps[data-v-c63dbbdc] {\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-c63dbbdc] {\n  --line-gap: 0px;\n}\n.steps-horizontal[data-v-c63dbbdc] {\n  flex-direction: row;\n  align-items: flex-start;\n}\n.steps-vertical[data-v-c63dbbdc] {\n  flex-direction: column;\n}\n.step-item[data-v-c63dbbdc] {\n  display: flex;\n  position: relative;\n  flex: 1;\n  gap: 12px;\n}\n.steps-horizontal .step-item[data-v-c63dbbdc] {\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n  min-width: 0;\n}\n.steps-vertical .step-item[data-v-c63dbbdc] {\n  flex-direction: row;\n  min-height: 72px;\n  flex: none;\n  width: 100%;\n}\n.step-indicator[data-v-c63dbbdc] {\n  position: relative;\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n.steps-horizontal .step-indicator[data-v-c63dbbdc] {\n  width: 100%;\n  justify-content: center;\n}\n.steps-vertical .step-indicator[data-v-c63dbbdc] {\n  flex-direction: column;\n}\n.step-icon[data-v-c63dbbdc] {\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-c63dbbdc] {\n  border-color: var(--success);\n  color: var(--success);\n}\n.step-process .step-icon[data-v-c63dbbdc] {\n  border-color: var(--primary);\n  background: var(--primary);\n  color: white;\n}\n.step-error .step-icon[data-v-c63dbbdc] {\n  border-color: var(--error);\n  color: var(--error);\n}\n.step-index[data-v-c63dbbdc] {\n  font-size: 14px;\n  font-weight: 500;\n}\n.step-line[data-v-c63dbbdc] {\n  background: var(--border);\n  position: absolute;\n  transition: background 0.2s ease;\n}\n.steps-horizontal .step-line[data-v-c63dbbdc] {\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-c63dbbdc] {\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-c63dbbdc] {\n  background: var(--success);\n}\n.step-content[data-v-c63dbbdc] {\n  flex: 1;\n  min-width: 0;\n}\n.steps-vertical .step-content[data-v-c63dbbdc] {\n  padding-top: 4px;\n}\n.step-title[data-v-c63dbbdc] {\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-c63dbbdc] {\n  font-size: 12px;\n  line-height: 20px;\n  margin-bottom: 2px;\n  opacity: 0.65;\n}\n.step-finish .step-time[data-v-c63dbbdc] {\n  color: var(--success);\n}\n.step-description[data-v-c63dbbdc] {\n  font-size: 12px;\n  line-height: 20px;\n  opacity: 0.65;\n}\n.step-wait .step-title[data-v-c63dbbdc] {\n  opacity: 0.65;\n}\n.step-process .step-title[data-v-c63dbbdc] {\n  color: var(--primary);\n  font-weight: 600;\n}\n.step-error .step-title[data-v-c63dbbdc] {\n  color: var(--error);\n}\n.step-clickable[data-v-c63dbbdc] {\n  cursor: pointer;\n}\n.step-clickable:hover .step-icon[data-v-c63dbbdc] {\n  transform: scale(1.05);\n}\n.step-clickable:not(.step-process):hover .step-icon[data-v-c63dbbdc] {\n  background: var(--bg-hover);\n}\n.step-clickable:hover .step-title[data-v-c63dbbdc] {\n  color: var(--primary);\n}\n@media (max-width: 768px) {\n.steps-horizontal[data-v-c63dbbdc] {\n    flex-wrap: wrap;\n}\n.steps-horizontal .step-item[data-v-c63dbbdc] {\n    flex: 0 0 50%;\n    margin-bottom: 24px;\n}\n.steps-horizontal .step-line[data-v-c63dbbdc] {\n    display: none;\n}\n}\n@media (prefers-reduced-motion: reduce) {\n.step-icon[data-v-c63dbbdc],\n  .step-line[data-v-c63dbbdc] {\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-DU9ZsFrs.css.map

@@ -0,0 +1 @@
+{"version":3,"file":"C_Steps-DU9ZsFrs.css","names":[],"sources":["../src/components/C_Steps/index.vue?vue&type=style&index=0&scoped=c63dbbdc&lang.scss"],"sourcesContent":["/* unplugin-vue-components disabled */.c-steps[data-v-c63dbbdc] {\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-c63dbbdc] {\n  --line-gap: 0px;\n}\n.steps-horizontal[data-v-c63dbbdc] {\n  flex-direction: row;\n  align-items: flex-start;\n}\n.steps-vertical[data-v-c63dbbdc] {\n  flex-direction: column;\n}\n.step-item[data-v-c63dbbdc] {\n  display: flex;\n  position: relative;\n  flex: 1;\n  gap: 12px;\n}\n.steps-horizontal .step-item[data-v-c63dbbdc] {\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n  min-width: 0;\n}\n.steps-vertical .step-item[data-v-c63dbbdc] {\n  flex-direction: row;\n  min-height: 72px;\n  flex: none;\n  width: 100%;\n}\n.step-indicator[data-v-c63dbbdc] {\n  position: relative;\n  display: flex;\n  align-items: center;\n  flex-shrink: 0;\n}\n.steps-horizontal .step-indicator[data-v-c63dbbdc] {\n  width: 100%;\n  justify-content: center;\n}\n.steps-vertical .step-indicator[data-v-c63dbbdc] {\n  flex-direction: column;\n}\n.step-icon[data-v-c63dbbdc] {\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-c63dbbdc] {\n  border-color: var(--success);\n  color: var(--success);\n}\n.step-process .step-icon[data-v-c63dbbdc] {\n  border-color: var(--primary);\n  background: var(--primary);\n  color: white;\n}\n.step-error .step-icon[data-v-c63dbbdc] {\n  border-color: var(--error);\n  color: var(--error);\n}\n.step-index[data-v-c63dbbdc] {\n  font-size: 14px;\n  font-weight: 500;\n}\n.step-line[data-v-c63dbbdc] {\n  background: var(--border);\n  position: absolute;\n  transition: background 0.2s ease;\n}\n.steps-horizontal .step-line[data-v-c63dbbdc] {\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-c63dbbdc] {\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-c63dbbdc] {\n  background: var(--success);\n}\n.step-content[data-v-c63dbbdc] {\n  flex: 1;\n  min-width: 0;\n}\n.steps-vertical .step-content[data-v-c63dbbdc] {\n  padding-top: 4px;\n}\n.step-title[data-v-c63dbbdc] {\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-c63dbbdc] {\n  font-size: 12px;\n  line-height: 20px;\n  margin-bottom: 2px;\n  opacity: 0.65;\n}\n.step-finish .step-time[data-v-c63dbbdc] {\n  color: var(--success);\n}\n.step-description[data-v-c63dbbdc] {\n  font-size: 12px;\n  line-height: 20px;\n  opacity: 0.65;\n}\n.step-wait .step-title[data-v-c63dbbdc] {\n  opacity: 0.65;\n}\n.step-process .step-title[data-v-c63dbbdc] {\n  color: var(--primary);\n  font-weight: 600;\n}\n.step-error .step-title[data-v-c63dbbdc] {\n  color: var(--error);\n}\n.step-clickable[data-v-c63dbbdc] {\n  cursor: pointer;\n}\n.step-clickable:hover .step-icon[data-v-c63dbbdc] {\n  transform: scale(1.05);\n}\n.step-clickable:not(.step-process):hover .step-icon[data-v-c63dbbdc] {\n  background: var(--bg-hover);\n}\n.step-clickable:hover .step-title[data-v-c63dbbdc] {\n  color: var(--primary);\n}\n@media (max-width: 768px) {\n.steps-horizontal[data-v-c63dbbdc] {\n    flex-wrap: wrap;\n}\n.steps-horizontal .step-item[data-v-c63dbbdc] {\n    flex: 0 0 50%;\n    margin-bottom: 24px;\n}\n.steps-horizontal .step-line[data-v-c63dbbdc] {\n    display: none;\n}\n}\n@media (prefers-reduced-motion: reduce) {\n.step-icon[data-v-c63dbbdc],\n  .step-line[data-v-c63dbbdc] {\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-a8fd528e] {
+/* unplugin-vue-components disabled */.c-steps[data-v-c63dbbdc] {
   --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-a8fd528e] {
+.steps-connected[data-v-c63dbbdc] {
   --line-gap: 0px;
 }
-.steps-horizontal[data-v-a8fd528e] {
+.steps-horizontal[data-v-c63dbbdc] {
   flex-direction: row;
   align-items: flex-start;
 }
-.steps-vertical[data-v-a8fd528e] {
+.steps-vertical[data-v-c63dbbdc] {
   flex-direction: column;
 }
-.step-item[data-v-a8fd528e] {
+.step-item[data-v-c63dbbdc] {
   display: flex;
   position: relative;
   flex: 1;
   gap: 12px;
 }
-.steps-horizontal .step-item[data-v-a8fd528e] {
+.steps-horizontal .step-item[data-v-c63dbbdc] {
   flex-direction: column;
   align-items: center;
   text-align: center;
   min-width: 0;
 }
-.steps-vertical .step-item[data-v-a8fd528e] {
+.steps-vertical .step-item[data-v-c63dbbdc] {
   flex-direction: row;
   min-height: 72px;
   flex: none;
   width: 100%;
 }
-.step-indicator[data-v-a8fd528e] {
+.step-indicator[data-v-c63dbbdc] {
   position: relative;
   display: flex;
   align-items: center;
   flex-shrink: 0;
 }
-.steps-horizontal .step-indicator[data-v-a8fd528e] {
+.steps-horizontal .step-indicator[data-v-c63dbbdc] {
   width: 100%;
   justify-content: center;
 }
-.steps-vertical .step-indicator[data-v-a8fd528e] {
+.steps-vertical .step-indicator[data-v-c63dbbdc] {
   flex-direction: column;
 }
-.step-icon[data-v-a8fd528e] {
+.step-icon[data-v-c63dbbdc] {
   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-a8fd528e] {
+.step-finish .step-icon[data-v-c63dbbdc] {
   border-color: var(--success);
   color: var(--success);
 }
-.step-process .step-icon[data-v-a8fd528e] {
+.step-process .step-icon[data-v-c63dbbdc] {
   border-color: var(--primary);
   background: var(--primary);
   color: white;
 }
-.step-error .step-icon[data-v-a8fd528e] {
+.step-error .step-icon[data-v-c63dbbdc] {
   border-color: var(--error);
   color: var(--error);
 }
-.step-index[data-v-a8fd528e] {
+.step-index[data-v-c63dbbdc] {
   font-size: 14px;
   font-weight: 500;
 }
-.step-line[data-v-a8fd528e] {
+.step-line[data-v-c63dbbdc] {
   background: var(--border);
   position: absolute;
   transition: background 0.2s ease;
 }
-.steps-horizontal .step-line[data-v-a8fd528e] {
+.steps-horizontal .step-line[data-v-c63dbbdc] {
   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-a8fd528e] {
+.steps-vertical .step-line[data-v-c63dbbdc] {
   width: var(--line-width);
   top: var(--icon-size);
   bottom: 0;
   left: calc(var(--icon-size) / 2 - 1px);
 }
-.step-finish .step-line[data-v-a8fd528e] {
+.step-finish .step-line[data-v-c63dbbdc] {
   background: var(--success);
 }
-.step-content[data-v-a8fd528e] {
+.step-content[data-v-c63dbbdc] {
   flex: 1;
   min-width: 0;
 }
-.steps-vertical .step-content[data-v-a8fd528e] {
+.steps-vertical .step-content[data-v-c63dbbdc] {
   padding-top: 4px;
 }
-.step-title[data-v-a8fd528e] {
+.step-title[data-v-c63dbbdc] {
   font-size: 14px;
   font-weight: 500;
   line-height: 22px;
   margin-bottom: 2px;
   word-break: break-word;
 }
-.step-time[data-v-a8fd528e] {
+.step-time[data-v-c63dbbdc] {
   font-size: 12px;
   line-height: 20px;
   margin-bottom: 2px;
   opacity: 0.65;
 }
-.step-finish .step-time[data-v-a8fd528e] {
+.step-finish .step-time[data-v-c63dbbdc] {
   color: var(--success);
 }
-.step-description[data-v-a8fd528e] {
+.step-description[data-v-c63dbbdc] {
   font-size: 12px;
   line-height: 20px;
   opacity: 0.65;
 }
-.step-wait .step-title[data-v-a8fd528e] {
+.step-wait .step-title[data-v-c63dbbdc] {
   opacity: 0.65;
 }
-.step-process .step-title[data-v-a8fd528e] {
+.step-process .step-title[data-v-c63dbbdc] {
   color: var(--primary);
   font-weight: 600;
 }
-.step-error .step-title[data-v-a8fd528e] {
+.step-error .step-title[data-v-c63dbbdc] {
   color: var(--error);
 }
-.step-clickable[data-v-a8fd528e] {
+.step-clickable[data-v-c63dbbdc] {
   cursor: pointer;
 }
-.step-clickable:hover .step-icon[data-v-a8fd528e] {
+.step-clickable:hover .step-icon[data-v-c63dbbdc] {
   transform: scale(1.05);
 }
-.step-clickable:not(.step-process):hover .step-icon[data-v-a8fd528e] {
+.step-clickable:not(.step-process):hover .step-icon[data-v-c63dbbdc] {
   background: var(--bg-hover);
 }
-.step-clickable:hover .step-title[data-v-a8fd528e] {
+.step-clickable:hover .step-title[data-v-c63dbbdc] {
   color: var(--primary);
 }
 @media (max-width: 768px) {
-.steps-horizontal[data-v-a8fd528e] {
+.steps-horizontal[data-v-c63dbbdc] {
     flex-wrap: wrap;
 }
-.steps-horizontal .step-item[data-v-a8fd528e] {
+.steps-horizontal .step-item[data-v-c63dbbdc] {
     flex: 0 0 50%;
     margin-bottom: 24px;
 }
-.steps-horizontal .step-line[data-v-a8fd528e] {
+.steps-horizontal .step-line[data-v-c63dbbdc] {
     display: none;
 }
 }
 @media (prefers-reduced-motion: reduce) {
-.step-icon[data-v-a8fd528e],
-  .step-line[data-v-a8fd528e] {
+.step-icon[data-v-c63dbbdc],
+  .step-line[data-v-c63dbbdc] {
     transition: none;
 }
 }
 
-/*# sourceMappingURL=C_Steps-Buyg7Axn.css.map*/
+/*# sourceMappingURL=C_Steps-27Exh7PM.css.map*/

package/dist/C_Steps.d.cts

@@ -1,2 +1,2 @@
-import { n as _default, t as StepItem } from "./index23.vue.js";
+import { n as StepItem, t as _default } from "./index23.vue.js";
 export { _default as C_Steps, type StepItem };

package/dist/C_Steps.d.ts

@@ -1,2 +1,2 @@
-import { n as _default, t as StepItem } from "./index23.vue.js";
+import { n as StepItem, t as _default } from "./index23.vue.js";
 export { _default as C_Steps, type StepItem };

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"],"sourcesContent":["<!--\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":"qlBA0EE,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,4DClDhB,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,EAAA,4BAsBd,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,KAAA,WAGF,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"],"sourcesContent":["<!--\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  import type { StepItem } from './types'\r\n\r\n  defineOptions({ name: 'C_Steps' })\r\n\r\n  interface LegacyStepItem extends 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: LegacyStepItem[]\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  import type { StepItem } from './types'\r\n\r\n  defineOptions({ name: 'C_Steps' })\r\n\r\n  interface LegacyStepItem extends 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: LegacyStepItem[]\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":"qlBA4EE,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,4DCpDjB,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,EAAA,4BAsBd,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,KAAA,WAGF,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-a8fd528e`]]);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-c63dbbdc`]]);export{b as t};
 //# sourceMappingURL=C_Steps2.js.map