@qxs-bns/components 0.0.82 → 0.0.84
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +566 -0
- package/es/package.json.mjs +1 -1
- package/es/src/icon/src/icon.vue.mjs +1 -1
- package/es/src/icon/src/icon.vue.mjs.map +1 -1
- package/lib/package.json.cjs +1 -1
- package/lib/src/icon/src/icon.vue.cjs +1 -1
- package/lib/src/icon/src/icon.vue.cjs.map +1 -1
- package/package.json +2 -2
- package/types/src/icon/src/icon.vue.d.ts.map +1 -1
- package/types/tsconfig.tsbuildinfo +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("vue"),t=require("../../../node_modules/.pnpm/@iconify_vue@5.0.0_vue@3.5.18_typescript@5.9.2_/node_modules/@iconify/vue/dist/iconify.cjs"),o=require("@qxs-bns/hooks");const
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("vue"),t=require("../../../node_modules/.pnpm/@iconify_vue@5.0.0_vue@3.5.18_typescript@5.9.2_/node_modules/@iconify/vue/dist/iconify.cjs"),o=require("@qxs-bns/hooks");const r=["src"],l={"aria-hidden":"true",class:"size-inherit shrink-0"},n=["xlink:href"];var a=e.defineComponent({name:"QxsIcon",inheritAttrs:!1,__name:"icon",props:{icon:{type:null,required:!0},flip:{type:null,required:!1,default:""},rotate:{type:Number,required:!1,default:0},color:{type:String,required:!1},size:{type:[String,Number],required:!1},localIconPrefix:{type:String,required:!1,default:"icon-"},fallback:{type:String,required:!1},loading:{type:String,required:!1}},setup(a){const s=e.useAttrs(),c=e.computed(()=>s.class||""),i=o.useNamespace("icon"),u=e.computed(()=>"object"==typeof a.icon||"function"==typeof a.icon),m=e.computed(()=>{if(u.value)return"component";const e=a.icon;return/^https?:\/\//.test(e)||(/^\.{1,2}\//.test(t=e)||t.startsWith("/")||t.includes("/"))?"img":/^i-[^:]+:[^:]+/.test(e)?"unocss":e.startsWith("i-")&&!e.includes(":")?"css":e.includes(":")&&!e.startsWith("i-")?"iconify":/^[\w-]+$/.test(e)&&!e.startsWith("i-")?"svg":"css";var t}),p=e.computed(()=>{if(u.value)return"";const e=a.icon;return"img"===m.value||"unocss"===m.value||m.value,e}),d=e.computed(()=>"css"===m.value?p.value.split(" ").filter(e=>e.trim()):[]);function v(e){return e?"number"==typeof e||/^\d+(?:\.\d+)?$/.test(e)?`${e}px`:e:""}const f=e.computed(()=>{const e=[];switch(a.flip){case"horizontal":e.push("rotateY(180deg)");break;case"vertical":e.push("rotateX(180deg)");break;case"both":e.push("rotateX(180deg)"),e.push("rotateY(180deg)")}a.rotate&&e.push(`rotate(${a.rotate%360}deg)`);let t=`${a.color?`color: ${a.color};`:""}${a.size?`font-size: ${v(a.size)};`:""}${e.length?`transform: ${e.join(" ")};`:""}`;const o=s.style;if(o)if("string"==typeof o)t+=o;else if("object"==typeof o){t+=Object.entries(o).map(([e,t])=>`${e.replace(/([A-Z])/g,"-$1").toLowerCase()}: ${t};`).join("")}return t}),k=e.ref(!0),y=e.ref(!1);function g(){k.value=!1,y.value=!1}function h(){k.value=!1,y.value=!0}return(o,a)=>(e.openBlock(),e.createElementBlock(e.Fragment,null,[e.createCommentVNode(" Vue组件 "),"component"===m.value?(e.openBlock(),e.createBlock(e.resolveDynamicComponent(o.icon),e.mergeProps({key:0,class:[e.unref(i).b(),c.value],style:[f.value]},o.$attrs,{class:"size-inherit shrink-0"}),null,16,["class","style"])):"unocss"===m.value?(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createCommentVNode(" UnoCSS图标 "),e.createElementVNode("i",e.mergeProps({class:[e.unref(i).b(),p.value,c.value],style:[f.value]},o.$attrs),null,16)],2112)):"css"===m.value?(e.openBlock(),e.createElementBlock(e.Fragment,{key:2},[e.createCommentVNode(" CSS类图标 "),e.createElementVNode("i",e.mergeProps({class:["size-inherit shrink-0",[e.unref(i).b(),...d.value,c.value]],style:[f.value]},o.$attrs),null,16)],2112)):"iconify"===m.value?(e.openBlock(),e.createElementBlock(e.Fragment,{key:3},[e.createCommentVNode(" Iconify图标 "),e.createVNode(e.unref(t.Icon),e.mergeProps({class:["size-inherit shrink-0",[e.unref(i).b(),c.value]],icon:p.value,style:[f.value]},o.$attrs),null,16,["icon","class","style"])],2112)):"img"===m.value?(e.openBlock(),e.createElementBlock(e.Fragment,{key:4},[e.createCommentVNode(" 图片 "),e.createCommentVNode(" 加载中状态 "),k.value&&o.loading?(e.openBlock(),e.createElementBlock("i",{key:0,class:e.normalizeClass([o.loading,c.value])},null,2)):y.value&&o.fallback?(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createCommentVNode(" 错误状态 "),e.createElementVNode("i",{class:e.normalizeClass([o.fallback,c.value])},null,2)],2112)):e.createCommentVNode("v-if",!0),e.createCommentVNode(" 图片本体 "),e.createElementVNode("img",e.mergeProps({src:p.value,class:"size-inherit shrink-0"},o.$attrs,{class:[e.unref(i).b(),c.value],style:[f.value,{width:o.size?v(o.size):"auto",height:"auto"}],onLoad:g,onError:h}),null,16,r)],64)):p.value?(e.openBlock(),e.createElementBlock(e.Fragment,{key:5},[e.createCommentVNode(" SVG Sprite "),e.createElementVNode("i",e.mergeProps({class:[e.unref(i).b(),c.value],style:[f.value]},o.$attrs),[(e.openBlock(),e.createElementBlock("svg",l,[e.createElementVNode("use",{"xlink:href":`#${o.localIconPrefix}${p.value}`},null,8,n)]))],16)],2112)):e.createCommentVNode("v-if",!0)],2112))}});exports.default=a;
|
|
2
2
|
//# sourceMappingURL=icon.vue.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon.vue.cjs","sources":["../../../../../../packages/components/src/icon/src/icon.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { Component, CSSProperties } from 'vue'\nimport { Icon } from '@iconify/vue'\nimport { useNamespace } from '@qxs-bns/hooks'\nimport { computed, ref, useAttrs } from 'vue'\n\ndefineOptions({\n name: 'QxsIcon',\n})\n\nconst {\n icon,\n flip = '',\n rotate = 0,\n color,\n size,\n localIconPrefix = 'icon-',\n fallback,\n loading,\n} = defineProps<PropsType>()\n\nconst attrs = useAttrs()\n\nconst ns = useNamespace('icon')\n\nexport interface PropsType {\n icon: string | Component\n flip?: 'horizontal' | 'vertical' | 'both' | '' | undefined\n rotate?: number\n color?: string\n size?: string | number\n localIconPrefix?: string\n // 新增功能：支持图片URL\n fallback?: string // 加载失败时的备用图标\n loading?: string // 加载中显示的图标\n}\n\nconst isComponentName = computed(() => typeof icon === 'object' || typeof icon === 'function')\n\nconst outputType = computed(() => {\n if (isComponentName.value) {\n return 'component'\n }\n\n const iconStr = icon as string\n\n // 检测是否为图片URL或路径\n const hasPathFeatures = (str: string) => {\n return /^\\.{1,2}\\//.test(str) || str.startsWith('/') || str.includes('/')\n }\n if (/^https?:\\/\\//.test(iconStr) || hasPathFeatures(iconStr)) {\n return 'img'\n }\n\n // 检测UnoCSS图标格式 (i-[provider]:[name])\n if (/^i-[^:]+:[^:]+/.test(iconStr)) {\n return 'unocss'\n }\n\n // 检测以i-开头的自定义CSS类图标（不包含冒号）\n if (iconStr.startsWith('i-') && !iconStr.includes(':')) {\n return 'css'\n }\n\n // 检测Iconify格式 (provider:name，但不以i-开头)\n if (iconStr.includes(':') && !iconStr.startsWith('i-')) {\n return 'iconify'\n }\n\n // 检测SVG sprite（单个单词，不包含空格和特殊字符，且不以i-开头）\n if (/^[\\w-]+$/.test(iconStr) && !iconStr.startsWith('i-')) {\n return 'svg'\n }\n\n // 其他情况都视为CSS类图标（包括多个类名等）\n return 'css'\n})\n\nconst outputName = computed(() => {\n if (isComponentName.value) {\n return ''\n }\n\n const iconStr = icon as string\n\n // 对于图片类型，直接返回URL\n if (outputType.value === 'img') {\n return iconStr\n }\n\n // 对于UnoCSS图标，直接返回类名\n if (outputType.value === 'unocss') {\n return iconStr\n }\n\n // 对于传统CSS图标，处理多个类名的情况\n if (outputType.value === 'css') {\n return iconStr\n }\n\n // 其他情况直接返回\n return iconStr\n})\n\n// 对于CSS类图标，将字符串拆分为类名数组\nconst cssClasses = computed(() => {\n if (outputType.value === 'css') {\n return outputName.value.split(' ').filter(cls => cls.trim())\n }\n return []\n})\n\n// 用正则匹配 size 是不是 number 值，再判断是否有 px 结尾的单位，没有则拼接\nfunction formatSize(size: string | number | undefined): string {\n if (!size) {\n return ''\n }\n\n // 如果是数字，直接添加 px\n if (typeof size === 'number') {\n return `${size}px`\n }\n\n // 如果是纯数字字符串，添加 px\n if (/^\\d+(?:\\.\\d+)?$/.test(size)) {\n return `${size}px`\n }\n\n // 如果已经有单位（px、em、rem等）或者不是纯数字，直接返回\n return size\n}\n\n// 统一的样式计算属性，适用于所有图标类型\n// 包含颜色、尺寸和变换（旋转、翻转）\n// Iconify 图标通过外层 i 标签应用这些样式\nconst style = computed(() => {\n const transform = [] as string[]\n switch (flip) {\n case 'horizontal':\n transform.push('rotateY(180deg)')\n break\n case 'vertical':\n transform.push('rotateX(180deg)')\n break\n case 'both':\n transform.push('rotateX(180deg)')\n transform.push('rotateY(180deg)')\n break\n // 对于 '' 和 undefined，不做任何处理\n }\n if (rotate) {\n transform.push(`rotate(${rotate % 360}deg)`)\n }\n\n // 构建基础样式\n let baseStyle = `${color ? `color: ${color};` : ''}${size ? `font-size: ${formatSize(size)};` : ''}${transform.length ? `transform: ${transform.join(' ')};` : ''}`\n\n // 拼接 attrs.style\n const attrsStyle = attrs.style\n if (attrsStyle) {\n if (typeof attrsStyle === 'string') {\n baseStyle += attrsStyle\n }\n else if (typeof attrsStyle === 'object') {\n // 处理对象形式的样式\n const styleEntries = Object.entries(attrsStyle as CSSProperties)\n const styleString = styleEntries\n .map(([key, value]) => `${key.replace(/([A-Z])/g, '-$1').toLowerCase()}: ${value};`)\n .join('')\n baseStyle += styleString\n }\n }\n\n return baseStyle\n})\n\n// 图片加载状态管理\nconst imageLoading = ref(true)\nconst imageError = ref(false)\n\nfunction handleImageLoad() {\n imageLoading.value = false\n imageError.value = false\n}\n\nfunction handleImageError() {\n imageLoading.value = false\n imageError.value = true\n}\n</script>\n\n<template>\n <!-- Vue组件 -->\n <component\n :is=\"icon\"\n v-if=\"outputType === 'component'\"\n :class=\"[ns.b()]\"\n :style=\"[style]\"\n class=\"size-inherit shrink-0\"\n />\n\n <!-- UnoCSS图标 -->\n <i\n v-else-if=\"outputType === 'unocss'\"\n :class=\"[ns.b(), outputName]\"\n :style=\"[style]\"\n />\n\n <!-- CSS类图标 -->\n <i\n v-else-if=\"outputType === 'css'\"\n class=\"size-inherit shrink-0\"\n :class=\"[ns.b(), ...cssClasses]\"\n :style=\"[style]\"\n />\n\n <!-- Iconify图标 -->\n <Icon\n v-else-if=\"outputType === 'iconify'\"\n class=\"size-inherit shrink-0\"\n :icon=\"outputName\"\n :class=\"[ns.b()]\"\n :style=\"[style]\"\n />\n\n <!-- 图片 -->\n <template v-else-if=\"outputType === 'img'\">\n <!-- 加载中状态 -->\n <i\n v-if=\"imageLoading && loading\"\n :class=\"loading\"\n />\n <!-- 错误状态 -->\n <i\n v-else-if=\"imageError && fallback\"\n :class=\"fallback\"\n />\n <!-- 图片本体 -->\n <img\n :src=\"outputName\"\n class=\"size-inherit shrink-0\"\n :class=\"[ns.b()]\"\n :style=\"[style, { width: size ? formatSize(size) : 'auto', height: 'auto' }]\"\n @load=\"handleImageLoad\"\n @error=\"handleImageError\"\n >\n </template>\n\n <!-- SVG Sprite -->\n <i\n v-else-if=\"outputName\"\n :class=\"[ns.b()]\"\n :style=\"[style]\"\n >\n <svg\n aria-hidden=\"true\"\n class=\"size-inherit shrink-0\"\n >\n <use :xlink:href=\"`#${localIconPrefix}${outputName}`\" />\n </svg>\n </i>\n</template>\n"],"names":["attrs","useAttrs","ns","useNamespace","isComponentName","computed","__props","icon","outputType","value","iconStr","test","str","startsWith","includes","outputName","cssClasses","split","filter","cls","trim","formatSize","size","style","transform","flip","push","rotate","baseStyle","color","length","join","attrsStyle","Object","entries","map","key","replace","toLowerCase","imageLoading","ref","imageError","handleImageLoad","handleImageError","_createCommentVNode","_openBlock","_createBlock","_resolveDynamicComponent","class","_normalizeClass","_unref","b","_createElementBlock","_Fragment","_createElementVNode","_createVNode","Icon","loading","fallback","src","width","height","onLoad","onError","_hoisted_2","localIconPrefix"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"icon.vue.cjs","sources":["../../../../../../packages/components/src/icon/src/icon.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { Component, CSSProperties } from 'vue'\nimport { Icon } from '@iconify/vue'\nimport { useNamespace } from '@qxs-bns/hooks'\nimport { computed, ref, useAttrs } from 'vue'\n\ndefineOptions({\n name: 'QxsIcon',\n inheritAttrs: false,\n})\n\nconst {\n icon,\n flip = '',\n rotate = 0,\n color,\n size,\n localIconPrefix = 'icon-',\n fallback,\n loading,\n} = defineProps<PropsType>()\n\n// 支持 attrs 传递给图标组件\nconst attrs = useAttrs()\n\n// 手动提取 class，因为多根组件不会自动继承\nconst externalClass = computed(() => attrs.class || '')\n\nconst ns = useNamespace('icon')\n\nexport interface PropsType {\n icon: string | Component\n flip?: 'horizontal' | 'vertical' | 'both' | '' | undefined\n rotate?: number\n color?: string\n size?: string | number\n localIconPrefix?: string\n // 新增功能：支持图片URL\n fallback?: string // 加载失败时的备用图标\n loading?: string // 加载中显示的图标\n}\n\nconst isComponentName = computed(() => typeof icon === 'object' || typeof icon === 'function')\n\nconst outputType = computed(() => {\n if (isComponentName.value) {\n return 'component'\n }\n\n const iconStr = icon as string\n\n // 检测是否为图片URL或路径\n const hasPathFeatures = (str: string) => {\n return /^\\.{1,2}\\//.test(str) || str.startsWith('/') || str.includes('/')\n }\n if (/^https?:\\/\\//.test(iconStr) || hasPathFeatures(iconStr)) {\n return 'img'\n }\n\n // 检测UnoCSS图标格式 (i-[provider]:[name])\n if (/^i-[^:]+:[^:]+/.test(iconStr)) {\n return 'unocss'\n }\n\n // 检测以i-开头的自定义CSS类图标（不包含冒号）\n if (iconStr.startsWith('i-') && !iconStr.includes(':')) {\n return 'css'\n }\n\n // 检测Iconify格式 (provider:name，但不以i-开头)\n if (iconStr.includes(':') && !iconStr.startsWith('i-')) {\n return 'iconify'\n }\n\n // 检测SVG sprite（单个单词，不包含空格和特殊字符，且不以i-开头）\n if (/^[\\w-]+$/.test(iconStr) && !iconStr.startsWith('i-')) {\n return 'svg'\n }\n\n // 其他情况都视为CSS类图标（包括多个类名等）\n return 'css'\n})\n\nconst outputName = computed(() => {\n if (isComponentName.value) {\n return ''\n }\n\n const iconStr = icon as string\n\n // 对于图片类型，直接返回URL\n if (outputType.value === 'img') {\n return iconStr\n }\n\n // 对于UnoCSS图标，直接返回类名\n if (outputType.value === 'unocss') {\n return iconStr\n }\n\n // 对于传统CSS图标，处理多个类名的情况\n if (outputType.value === 'css') {\n return iconStr\n }\n\n // 其他情况直接返回\n return iconStr\n})\n\n// 对于CSS类图标，将字符串拆分为类名数组\nconst cssClasses = computed(() => {\n if (outputType.value === 'css') {\n return outputName.value.split(' ').filter(cls => cls.trim())\n }\n return []\n})\n\n// 用正则匹配 size 是不是 number 值，再判断是否有 px 结尾的单位，没有则拼接\nfunction formatSize(size: string | number | undefined): string {\n if (!size) {\n return ''\n }\n\n // 如果是数字，直接添加 px\n if (typeof size === 'number') {\n return `${size}px`\n }\n\n // 如果是纯数字字符串，添加 px\n if (/^\\d+(?:\\.\\d+)?$/.test(size)) {\n return `${size}px`\n }\n\n // 如果已经有单位（px、em、rem等）或者不是纯数字，直接返回\n return size\n}\n\n// 统一的样式计算属性，适用于所有图标类型\n// 包含颜色、尺寸和变换（旋转、翻转）\n// Iconify 图标通过外层 i 标签应用这些样式\nconst style = computed(() => {\n const transform = [] as string[]\n switch (flip) {\n case 'horizontal':\n transform.push('rotateY(180deg)')\n break\n case 'vertical':\n transform.push('rotateX(180deg)')\n break\n case 'both':\n transform.push('rotateX(180deg)')\n transform.push('rotateY(180deg)')\n break\n // 对于 '' 和 undefined，不做任何处理\n }\n if (rotate) {\n transform.push(`rotate(${rotate % 360}deg)`)\n }\n\n // 构建基础样式\n let baseStyle = `${color ? `color: ${color};` : ''}${size ? `font-size: ${formatSize(size)};` : ''}${transform.length ? `transform: ${transform.join(' ')};` : ''}`\n\n // 拼接 attrs.style\n const attrsStyle = attrs.style\n if (attrsStyle) {\n if (typeof attrsStyle === 'string') {\n baseStyle += attrsStyle\n }\n else if (typeof attrsStyle === 'object') {\n // 处理对象形式的样式\n const styleEntries = Object.entries(attrsStyle as CSSProperties)\n const styleString = styleEntries\n .map(([key, value]) => `${key.replace(/([A-Z])/g, '-$1').toLowerCase()}: ${value};`)\n .join('')\n baseStyle += styleString\n }\n }\n\n return baseStyle\n})\n\n// 图片加载状态管理\nconst imageLoading = ref(true)\nconst imageError = ref(false)\n\nfunction handleImageLoad() {\n imageLoading.value = false\n imageError.value = false\n}\n\nfunction handleImageError() {\n imageLoading.value = false\n imageError.value = true\n}\n</script>\n\n<template>\n <!-- Vue组件 -->\n <component\n :is=\"icon\"\n v-if=\"outputType === 'component'\"\n :class=\"[ns.b(), externalClass]\"\n :style=\"[style]\"\n v-bind=\"$attrs\"\n class=\"size-inherit shrink-0\"\n />\n\n <!-- UnoCSS图标 -->\n <i\n v-else-if=\"outputType === 'unocss'\"\n :class=\"[ns.b(), outputName, externalClass]\"\n :style=\"[style]\"\n v-bind=\"$attrs\"\n />\n\n <!-- CSS类图标 -->\n <i\n v-else-if=\"outputType === 'css'\"\n class=\"size-inherit shrink-0\"\n :class=\"[ns.b(), ...cssClasses, externalClass]\"\n :style=\"[style]\"\n v-bind=\"$attrs\"\n />\n\n <!-- Iconify图标 -->\n <Icon\n v-else-if=\"outputType === 'iconify'\"\n class=\"size-inherit shrink-0\"\n :icon=\"outputName\"\n :class=\"[ns.b(), externalClass]\"\n :style=\"[style]\"\n v-bind=\"$attrs\"\n />\n\n <!-- 图片 -->\n <template v-else-if=\"outputType === 'img'\">\n <!-- 加载中状态 -->\n <i\n v-if=\"imageLoading && loading\"\n :class=\"[loading, externalClass]\"\n />\n <!-- 错误状态 -->\n <i\n v-else-if=\"imageError && fallback\"\n :class=\"[fallback, externalClass]\"\n />\n <!-- 图片本体 -->\n <img\n :src=\"outputName\"\n class=\"size-inherit shrink-0\"\n v-bind=\"$attrs\"\n :class=\"[ns.b(), externalClass]\"\n :style=\"[style, { width: size ? formatSize(size) : 'auto', height: 'auto' }]\"\n @load=\"handleImageLoad\"\n @error=\"handleImageError\"\n >\n </template>\n\n <!-- SVG Sprite -->\n <i\n v-else-if=\"outputName\"\n :class=\"[ns.b(), externalClass]\"\n :style=\"[style]\"\n v-bind=\"$attrs\"\n >\n <svg\n aria-hidden=\"true\"\n class=\"size-inherit shrink-0\"\n >\n <use :xlink:href=\"`#${localIconPrefix}${outputName}`\" />\n </svg>\n </i>\n</template>\n"],"names":["attrs","useAttrs","externalClass","computed","class","ns","useNamespace","isComponentName","__props","icon","outputType","value","iconStr","test","str","startsWith","includes","outputName","cssClasses","split","filter","cls","trim","formatSize","size","style","transform","flip","push","rotate","baseStyle","color","length","join","attrsStyle","Object","entries","map","key","replace","toLowerCase","imageLoading","ref","imageError","handleImageLoad","handleImageError","_createCommentVNode","_createBlock","_resolveDynamicComponent","_mergeProps","_unref","b","$attrs","_createElementBlock","_Fragment","_createElementVNode","_createVNode","loading","_normalizeClass","fallback","src","width","height","onLoad","onError","_openBlock","_hoisted_2","localIconPrefix"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@qxs-bns/components",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.84",
|
|
5
5
|
"description": "Vue 3 Component Library",
|
|
6
6
|
"license": "MIT",
|
|
7
7
|
"homepage": "https://qxs-bns.pages.dev/guide/components/overview.html",
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
"@qxs-bns/directives": "0.0.19",
|
|
47
47
|
"@qxs-bns/hooks": "0.0.7",
|
|
48
48
|
"@qxs-bns/icons": "0.0.10",
|
|
49
|
-
"@qxs-bns/utils": "0.0.
|
|
49
|
+
"@qxs-bns/utils": "0.0.29",
|
|
50
50
|
"@vueuse/core": "^11.3.0",
|
|
51
51
|
"echarts": "^5.5.1",
|
|
52
52
|
"lodash-es": "^4.17.21",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon.vue.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/icon/src/icon.vue"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"icon.vue.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/icon/src/icon.vue"],"names":[],"mappings":"AAAA,OAmRO,KAAK,EAAE,SAAS,EAAiB,MAAM,KAAK,CAAA;AA8BnD,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,MAAM,GAAG,SAAS,CAAA;IACxB,IAAI,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,MAAM,GAAG,EAAE,GAAG,SAAS,CAAA;IAC1D,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IACtB,eAAe,CAAC,EAAE,MAAM,CAAA;IAExB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,CAAC,EAAE,MAAM,CAAA;CACjB;;AA2TD,wBAEG"}
|