@qxs-bns/components 0.0.86 → 0.0.88
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/es/package.json.mjs +1 -1
- package/es/src/data-chart/src/components/pie.vue2.mjs +1 -1
- package/es/src/data-chart/src/components/pie.vue2.mjs.map +1 -1
- package/es/src/icon/src/icon.mjs +1 -1
- package/es/src/icon/src/icon.mjs.map +1 -1
- package/lib/package.json.cjs +1 -1
- package/lib/src/data-chart/src/components/pie.vue2.cjs +1 -1
- package/lib/src/data-chart/src/components/pie.vue2.cjs.map +1 -1
- package/lib/src/icon/src/icon.cjs +1 -1
- package/lib/src/icon/src/icon.cjs.map +1 -1
- package/package.json +2 -2
- package/types/src/data-chart/src/components/pie.vue.d.ts.map +1 -1
- package/types/src/icon/src/icon.d.ts.map +1 -1
- package/types/tsconfig.tsbuildinfo +1 -1
package/es/package.json.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
var r="0.0.
|
|
1
|
+
var r="0.0.88";export{r as version};
|
|
2
2
|
//# sourceMappingURL=package.json.mjs.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{defineComponent as e,inject as t,ref as r,computed as a,createElementBlock as o,openBlock as i}from"vue";import{orderBy as l}from"lodash-es";import{InjectionChartMerge as s}from"../utils/injectionKeys.mjs";import{useCharts as c}from"../utils/useCharts.mjs";var n=e({name:"DataChartPie",__name:"pie",props:{chartData:{type:Object,required:!0},subShowType:{type:String,required:!0,default:"pie-simple"},chartOptions:{type:null,required:!0},lazyLoad:{type:Boolean,required:!1,default:!0}},setup(e,{expose:n}){const
|
|
1
|
+
import{defineComponent as e,inject as t,ref as r,computed as a,createElementBlock as o,openBlock as i}from"vue";import{orderBy as l}from"lodash-es";import{InjectionChartMerge as s}from"../utils/injectionKeys.mjs";import{useCharts as c}from"../utils/useCharts.mjs";var n=e({name:"DataChartPie",__name:"pie",props:{chartData:{type:Object,required:!0},subShowType:{type:String,required:!0,default:"pie-simple"},chartOptions:{type:null,required:!0},lazyLoad:{type:Boolean,required:!1,default:!0}},setup(e,{expose:n}){const m=t(s,e=>e,!0),u=r(null),p=a(()=>{const{colDesc:t,xGroupByDesc:r,data:a,modelName:o}=e.chartData,i=t.length,s={title:{text:o},series:t.map((t,o)=>{const s={name:t,type:"pie",center:["50%","50%"],data:[],emphasis:{itemStyle:{shadowBlur:10,shadowOffsetX:0,shadowColor:"rgba(0, 0, 0, 0.5)"}},label:{formatter:"{b}:{c}({d}%)",rich:{b:{color:"#4C5058",fontSize:14,fontWeight:"bold",lineHeight:33}}}};let c=5;const n=a.filter(e=>void 0!==e[t]),m=l(n,[t],["desc"]),u=m.reduce((e,r)=>{const a=Number(r[t])||0;return Number.isNaN(a)?e:e+a},0);if(n.length>c)for(;c<9;){const e=m.slice(0,c);if(e.reduce((e,r)=>e+Number(r[t]),0)/u>.9||8===c){const a=m.slice(c);s.data=e.map(e=>({name:r?.colDesc?String(e[r.colDesc]||""):"",value:Number(e[t])||0}));const o=a.reduce((e,r)=>e+Number(r[t]),0);o>0&&s.data&&s.data.push({name:"其它",value:o});break}c++}else s.data=n.map(e=>({name:r?.colDesc&&e[r.colDesc]||"",value:Number(e[t]||0)}));if(1===i?s.center=["50%","60%"]:2===i?0===o?(s.right="40%",s.left="",s.center=["40%","60%"]):(s.right="",s.left="40%",s.center=["60%","60%"]):3===i?0===o?(s.right="40%",s.bottom="50%",s.top="",s.left="",s.center=["40%","78%"]):1===o?(s.right="",s.bottom="50%",s.top="",s.left="40%",s.center=["60%","78%"]):(s.right="40%",s.bottom="",s.top="50%",s.left="",s.center=["40%","60%"]):4===i&&(0===o?(s.right="40%",s.bottom="50%",s.top="",s.left="",s.center=["40%","78%"]):1===o?(s.right="",s.bottom="50%",s.top="",s.left="40%",s.center=["60%","78%"]):2===o?(s.right="40%",s.bottom="",s.top="50%",s.left="",s.center=["40%","60%"]):(s.right="",s.bottom="",s.top="50%",s.left="40%",s.center=["60%","60%"])),"pie-borderRadius"===e.subShowType)s.radius=["50%","70%"];else s.radius="50%";return s})};return console.log(s),m(s,e.chartOptions)}),{myChart:h}=c({chartDOM:u,chartOptions:p,chartData:a(()=>e.chartData),lazyLoad:e.lazyLoad});return n({myChart:h}),(e,t)=>(i(),o("div",{ref_key:"dataChartPie",ref:u,class:"data-chart-pie"},null,512))}});export{n as default};
|
|
2
2
|
//# sourceMappingURL=pie.vue2.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pie.vue2.mjs","sources":["../../../../../../../packages/components/src/data-chart/src/components/pie.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { PieSeriesOption } from 'echarts/charts'\nimport type { EChartsOption, IFormatPublicData } from '../utils/types'\nimport { orderBy } from 'lodash-es'\nimport { computed, inject, ref } from 'vue'\nimport { InjectionChartMerge } from '../utils/injectionKeys'\nimport { useCharts } from '../utils/useCharts'\n\ndefineOptions({\n name: 'DataChartPie',\n})\nconst {\n chartData,\n subShowType = 'pie-simple',\n chartOptions,\n lazyLoad = true,\n} = defineProps<{\n chartData: IFormatPublicData\n subShowType: string\n chartOptions: EChartsOption\n lazyLoad?: boolean\n}>()\nconst merge = inject(InjectionChartMerge, (v: any) => v, true)\n\nconst dataChartPie = ref(null)\nconst pieChartOptions = computed<EChartsOption>(() => {\n const { colDesc, xGroupByDesc, data, modelName } = chartData\n const colDescLength = colDesc.length\n const config = {\n title: { text: modelName },\n series: colDesc.map((item, index) => {\n const seriesItem: PieSeriesOption = {\n name: item,\n type: 'pie',\n center: ['50%', '50%'],\n data: [],\n emphasis: {\n itemStyle: {\n shadowBlur: 10,\n shadowOffsetX: 0,\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n },\n },\n label: {\n formatter: '{b}:{c}({d}%)',\n rich: {\n b: {\n color: '#4C5058',\n fontSize: 14,\n fontWeight: 'bold',\n lineHeight: 33,\n },\n },\n },\n }\n\n let cutNum = 5\n const currentItemData = data.filter(row => row[item] !== undefined)\n const orderByData = orderBy(currentItemData, [item], ['desc'])\n // 总数\n const totalDesc = orderByData.reduce((prev, cur) => {\n const value = Number(cur[item]) || 0\n return Number.isNaN(value) ? prev : prev + value\n }, 0)\n if (currentItemData.length > cutNum) {\n while (cutNum < 9) {\n const headerData = orderByData.slice(0, cutNum)\n // 前 cutNum 个总数\n const headerTotal = headerData.reduce(\n (prev, cur) => prev + Number(cur[item]),\n 0,\n )\n // 前五总占比\n const headerScale = headerTotal / totalDesc\n if (headerScale > 0.9 || cutNum === 8) {\n const footerData = orderByData.slice(\n cutNum,\n orderByData.length - 1,\n )\n seriesItem.data = currentItemData\n .map((yItem) => {\n let obj = {}\n headerData.forEach((headerDataItem) => {\n if (JSON.stringify(headerDataItem) === JSON.stringify(yItem)) {\n obj = {\n name: xGroupByDesc?.colDesc\n ? yItem[xGroupByDesc.colDesc]\n : '',\n value: yItem[item],\n }\n }\n })\n return obj\n })\n .filter(v => v && Object.keys(v).length > 0)\n seriesItem.data.push({\n name: '其它',\n value: footerData.reduce(\n (prev, cur) => prev + Number(cur[item]),\n 0,\n ),\n })\n\n break\n }\n else {\n cutNum++\n }\n }\n }\n else {\n seriesItem.data = currentItemData.map(yItem => ({\n name: xGroupByDesc?.colDesc ? (yItem[xGroupByDesc.colDesc] || '') : '',\n value: Number(yItem[item] || 0),\n }))\n }\n\n if (colDescLength === 1) {\n seriesItem.center = ['50%', '60%']\n }\n else if (colDescLength === 2) {\n if (index === 0) {\n seriesItem.right = '40%'\n seriesItem.left = ''\n seriesItem.center = ['40%', '60%']\n }\n else {\n seriesItem.right = ''\n seriesItem.left = '40%'\n seriesItem.center = ['60%', '60%']\n }\n }\n else if (colDescLength === 3) {\n if (index === 0) {\n seriesItem.right = '40%'\n seriesItem.bottom = '50%'\n seriesItem.top = ''\n seriesItem.left = ''\n seriesItem.center = ['40%', '78%']\n }\n else if (index === 1) {\n seriesItem.right = ''\n seriesItem.bottom = '50%'\n seriesItem.top = ''\n seriesItem.left = '40%'\n seriesItem.center = ['60%', '78%']\n }\n else {\n seriesItem.right = '40%'\n seriesItem.bottom = ''\n seriesItem.top = '50%'\n seriesItem.left = ''\n seriesItem.center = ['40%', '60%']\n }\n }\n else if (colDescLength === 4) {\n if (index === 0) {\n seriesItem.right = '40%'\n seriesItem.bottom = '50%'\n seriesItem.top = ''\n seriesItem.left = ''\n seriesItem.center = ['40%', '78%']\n }\n else if (index === 1) {\n seriesItem.right = ''\n seriesItem.bottom = '50%'\n seriesItem.top = ''\n seriesItem.left = '40%'\n seriesItem.center = ['60%', '78%']\n }\n else if (index === 2) {\n seriesItem.right = '40%'\n seriesItem.bottom = ''\n seriesItem.top = '50%'\n seriesItem.left = ''\n seriesItem.center = ['40%', '60%']\n }\n else {\n seriesItem.right = ''\n seriesItem.bottom = ''\n seriesItem.top = '50%'\n seriesItem.left = '40%'\n seriesItem.center = ['60%', '60%']\n }\n }\n // 处理图表形状\n switch (subShowType) {\n case 'pie-borderRadius':\n seriesItem.radius = ['50%', '70%']\n break\n case 'pie-simple':\n seriesItem.radius = '50%'\n break\n default:\n seriesItem.radius = '50%'\n break\n }\n return seriesItem\n }),\n }\n\n return merge(config, chartOptions)\n})\n\nconst { myChart } = useCharts({\n chartDOM: dataChartPie,\n chartOptions: pieChartOptions,\n chartData: computed(() => chartData),\n lazyLoad,\n})\n\n// 暴露 myChart 方法供父组件访问\ndefineExpose({\n myChart,\n})\n</script>\n\n<template>\n <div\n ref=\"dataChartPie\"\n class=\"data-chart-pie\"\n />\n</template>\n\n<style scoped lang=\"scss\">\n.data-chart-pie {\n width: 100%;\n height: 100%;\n}\n</style>\n"],"names":["merge","inject","InjectionChartMerge","v","dataChartPie","ref","pieChartOptions","computed","colDesc","xGroupByDesc","data","modelName","__props","chartData","colDescLength","length","config","title","text","series","map","item","index","seriesItem","name","type","center","emphasis","itemStyle","shadowBlur","shadowOffsetX","shadowColor","label","formatter","rich","b","color","fontSize","fontWeight","lineHeight","cutNum","currentItemData","filter","row","orderByData","orderBy","totalDesc","reduce","prev","cur","value","Number","isNaN","headerData","slice","footerData","yItem","obj","forEach","headerDataItem","JSON","stringify","Object","keys","push","right","left","bottom","top","subShowType","radius","chartOptions","myChart","useCharts","chartDOM","lazyLoad","__expose","_createElementBlock","class"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"pie.vue2.mjs","sources":["../../../../../../../packages/components/src/data-chart/src/components/pie.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { PieSeriesOption } from 'echarts/charts'\nimport type { EChartsOption, IFormatPublicData } from '../utils/types'\nimport { orderBy } from 'lodash-es'\nimport { computed, inject, ref } from 'vue'\nimport { InjectionChartMerge } from '../utils/injectionKeys'\nimport { useCharts } from '../utils/useCharts'\n\ndefineOptions({\n name: 'DataChartPie',\n})\nconst {\n chartData,\n subShowType = 'pie-simple',\n chartOptions,\n lazyLoad = true,\n} = defineProps<{\n chartData: IFormatPublicData\n subShowType: string\n chartOptions: EChartsOption\n lazyLoad?: boolean\n}>()\nconst merge = inject(InjectionChartMerge, (v: any) => v, true)\n\nconst dataChartPie = ref(null)\nconst pieChartOptions = computed<EChartsOption>(() => {\n const { colDesc, xGroupByDesc, data, modelName } = chartData\n const colDescLength = colDesc.length\n const config = {\n title: { text: modelName },\n series: colDesc.map((item, index) => {\n const seriesItem: PieSeriesOption = {\n name: item,\n type: 'pie',\n center: ['50%', '50%'],\n data: [],\n emphasis: {\n itemStyle: {\n shadowBlur: 10,\n shadowOffsetX: 0,\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n },\n },\n label: {\n formatter: '{b}:{c}({d}%)',\n rich: {\n b: {\n color: '#4C5058',\n fontSize: 14,\n fontWeight: 'bold',\n lineHeight: 33,\n },\n },\n },\n }\n\n let cutNum = 5\n const currentItemData = data.filter(row => row[item] !== undefined)\n const orderByData = orderBy(currentItemData, [item], ['desc'])\n // 总数\n const totalDesc = orderByData.reduce((prev, cur) => {\n const value = Number(cur[item]) || 0\n return Number.isNaN(value) ? prev : prev + value\n }, 0)\n if (currentItemData.length > cutNum) {\n while (cutNum < 9) {\n const headerData = orderByData.slice(0, cutNum)\n // 前 cutNum 个总数\n const headerTotal = headerData.reduce(\n (prev, cur) => prev + Number(cur[item]),\n 0,\n )\n // 前N项总占比\n const headerScale = headerTotal / totalDesc\n if (headerScale > 0.9 || cutNum === 8) {\n const footerData = orderByData.slice(cutNum)\n\n // 处理前N项数据\n seriesItem.data = headerData.map(headerItem => ({\n name: xGroupByDesc?.colDesc\n ? String(headerItem[xGroupByDesc.colDesc] || '')\n : '',\n value: Number(headerItem[item]) || 0,\n }))\n\n // 添加\"其它\"项,包含剩余所有数据\n const footerTotal = footerData.reduce(\n (prev, cur) => prev + Number(cur[item]),\n 0,\n )\n\n if (footerTotal > 0 && seriesItem.data) {\n seriesItem.data.push({\n name: '其它',\n value: footerTotal,\n })\n }\n\n break\n }\n else {\n cutNum++\n }\n }\n }\n else {\n seriesItem.data = currentItemData.map(yItem => ({\n name: xGroupByDesc?.colDesc ? (yItem[xGroupByDesc.colDesc] || '') : '',\n value: Number(yItem[item] || 0),\n }))\n }\n\n if (colDescLength === 1) {\n seriesItem.center = ['50%', '60%']\n }\n else if (colDescLength === 2) {\n if (index === 0) {\n seriesItem.right = '40%'\n seriesItem.left = ''\n seriesItem.center = ['40%', '60%']\n }\n else {\n seriesItem.right = ''\n seriesItem.left = '40%'\n seriesItem.center = ['60%', '60%']\n }\n }\n else if (colDescLength === 3) {\n if (index === 0) {\n seriesItem.right = '40%'\n seriesItem.bottom = '50%'\n seriesItem.top = ''\n seriesItem.left = ''\n seriesItem.center = ['40%', '78%']\n }\n else if (index === 1) {\n seriesItem.right = ''\n seriesItem.bottom = '50%'\n seriesItem.top = ''\n seriesItem.left = '40%'\n seriesItem.center = ['60%', '78%']\n }\n else {\n seriesItem.right = '40%'\n seriesItem.bottom = ''\n seriesItem.top = '50%'\n seriesItem.left = ''\n seriesItem.center = ['40%', '60%']\n }\n }\n else if (colDescLength === 4) {\n if (index === 0) {\n seriesItem.right = '40%'\n seriesItem.bottom = '50%'\n seriesItem.top = ''\n seriesItem.left = ''\n seriesItem.center = ['40%', '78%']\n }\n else if (index === 1) {\n seriesItem.right = ''\n seriesItem.bottom = '50%'\n seriesItem.top = ''\n seriesItem.left = '40%'\n seriesItem.center = ['60%', '78%']\n }\n else if (index === 2) {\n seriesItem.right = '40%'\n seriesItem.bottom = ''\n seriesItem.top = '50%'\n seriesItem.left = ''\n seriesItem.center = ['40%', '60%']\n }\n else {\n seriesItem.right = ''\n seriesItem.bottom = ''\n seriesItem.top = '50%'\n seriesItem.left = '40%'\n seriesItem.center = ['60%', '60%']\n }\n }\n // 处理图表形状\n switch (subShowType) {\n case 'pie-borderRadius':\n seriesItem.radius = ['50%', '70%']\n break\n case 'pie-simple':\n seriesItem.radius = '50%'\n break\n default:\n seriesItem.radius = '50%'\n break\n }\n return seriesItem\n }),\n }\n console.log(config)\n\n return merge(config, chartOptions)\n})\n\nconst { myChart } = useCharts({\n chartDOM: dataChartPie,\n chartOptions: pieChartOptions,\n chartData: computed(() => chartData),\n lazyLoad,\n})\n\n// 暴露 myChart 方法供父组件访问\ndefineExpose({\n myChart,\n})\n</script>\n\n<template>\n <div\n ref=\"dataChartPie\"\n class=\"data-chart-pie\"\n />\n</template>\n\n<style scoped lang=\"scss\">\n.data-chart-pie {\n width: 100%;\n height: 100%;\n}\n</style>\n"],"names":["merge","inject","InjectionChartMerge","v","dataChartPie","ref","pieChartOptions","computed","colDesc","xGroupByDesc","data","modelName","__props","chartData","colDescLength","length","config","title","text","series","map","item","index","seriesItem","name","type","center","emphasis","itemStyle","shadowBlur","shadowOffsetX","shadowColor","label","formatter","rich","b","color","fontSize","fontWeight","lineHeight","cutNum","currentItemData","filter","row","orderByData","orderBy","totalDesc","reduce","prev","cur","value","Number","isNaN","headerData","slice","footerData","headerItem","String","footerTotal","push","yItem","right","left","bottom","top","subShowType","radius","console","log","chartOptions","myChart","useCharts","chartDOM","lazyLoad","__expose","_createElementBlock","class"],"mappings":"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"}
|
package/es/src/icon/src/icon.mjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{Icon as e}from"../../../node_modules/.pnpm/@iconify_vue@5.0.0_vue@3.5.18_typescript@5.9.2_/node_modules/@iconify/vue/dist/iconify.mjs";import{useNamespace as t}from"@qxs-bns/hooks";import{defineComponent as s,useAttrs as i,computed as
|
|
1
|
+
import{Icon as e}from"../../../node_modules/.pnpm/@iconify_vue@5.0.0_vue@3.5.18_typescript@5.9.2_/node_modules/@iconify/vue/dist/iconify.mjs";import{useNamespace as t}from"@qxs-bns/hooks";import{defineComponent as s,useAttrs as i,computed as l,ref as r,h as a}from"vue";var o=s({name:"QxsIcon",inheritAttrs:!1,props:{icon:{type:[String,Object,Function],required:!0},flip:{type:String,default:""},rotate:{type:Number,default:0},color:String,size:[String,Number],localIconPrefix:{type:String,default:"icon-"},fallback:String,loading:String},setup(s){const o=i(),n=t("icon"),u=l(()=>{const e=[n.b()];return o.class&&("string"==typeof o.class?e.push(o.class):Array.isArray(o.class)?e.push(...o.class):e.push(o.class)),e}),c=l(()=>{const{class:e,style:t,...s}=o;return s}),v=l(()=>"object"==typeof s.icon||"function"==typeof s.icon),f=l(()=>{if(v.value)return"component";const e=s.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=l(()=>{if(v.value)return"";const e=s.icon;return"img"===f.value||"unocss"===f.value||f.value,e}),h=l(()=>"css"===f.value?p.value.split(" ").filter(e=>e.trim()):[]);function d(e){return e?"number"==typeof e||/^\d+(?:\.\d+)?$/.test(e)?`${e}px`:e:""}const g=l(()=>{const e=[];switch(s.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)")}s.rotate&&e.push(`rotate(${s.rotate%360}deg)`);let t=`${s.color?`color: ${s.color};`:""}${s.size?`font-size: ${d(s.size)};`:""}${e.length?`transform: ${e.join(" ")};`:""}`;const i=o.style;if(i)if("string"==typeof i)t+=i;else if("object"==typeof i){t+=Object.entries(i).map(e=>{let[t,s]=e;return`${t.replace(/([A-Z])/g,"-$1").toLowerCase()}: ${s};`}).join("")}return t}),y=r(!0),m=r(!1);function b(){y.value=!1,m.value=!1}function $(){y.value=!1,m.value=!0}return()=>{if("component"===f.value)return a(s.icon,{class:["size-inherit","shrink-0",...u.value],style:g.value,...c.value});if("unocss"===f.value)return a("i",{class:[...u.value,p.value],style:g.value,...c.value});if("css"===f.value)return a("i",{class:["size-inherit","shrink-0",...u.value,...h.value],style:g.value,...c.value});if("iconify"===f.value){const t={class:["size-inherit","shrink-0",...u.value],icon:p.value,...c.value};if(s.color&&(t.color=s.color),s.flip&&(t.flip=s.flip),s.rotate&&(t.rotate=s.rotate),s.size){const e=d(s.size);t.width=e,t.height=e}const i=o.style;return i&&(t.style=i),a(e,t)}return"img"===f.value?y.value&&s.loading?a("i",{class:s.loading,...c.value}):m.value&&s.fallback?a("i",{class:s.fallback,...c.value}):a("img",{src:p.value,class:["size-inherit","shrink-0",...u.value],style:[g.value,{width:s.size?d(s.size):"auto",height:"auto"}],onLoad:b,onError:$,...c.value}):p.value?a("i",{class:u.value,style:g.value,...c.value},[a("svg",{"aria-hidden":"true",class:"size-inherit shrink-0"},[a("use",{"xlink:href":`#${s.localIconPrefix}${p.value}`})])]):null}}});export{o as default};
|
|
2
2
|
//# sourceMappingURL=icon.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon.mjs","sources":["../../../../../../packages/components/src/icon/src/icon.tsx"],"sourcesContent":["import type { Component, CSSProperties } from 'vue'\nimport { Icon } from '@iconify/vue'\nimport { useNamespace } from '@qxs-bns/hooks'\nimport { computed, defineComponent, h, ref, useAttrs } from 'vue'\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\nexport default defineComponent({\n name: 'QxsIcon',\n inheritAttrs: false,\n props: {\n icon: {\n type: [String, Object, Function] as any,\n required: true,\n },\n flip: {\n type: String as () => 'horizontal' | 'vertical' | 'both' | '' | undefined,\n default: '',\n },\n rotate: {\n type: Number,\n default: 0,\n },\n color: String,\n size: [String, Number],\n localIconPrefix: {\n type: String,\n default: 'icon-',\n },\n fallback: String,\n loading: String,\n },\n setup(props) {\n const attrs = useAttrs()\n const ns = useNamespace('icon')\n\n // 合并外部传入的类名\n const mergedClass = computed(() => {\n const classes: any[] = [ns.b()]\n if (attrs.class) {\n if (typeof attrs.class === 'string') {\n classes.push(attrs.class)\n }\n else if (Array.isArray(attrs.class)) {\n classes.push(...attrs.class)\n }\n else {\n classes.push(attrs.class)\n }\n }\n return classes\n })\n\n // 获取非 class 的其他属性\n const otherAttrs = computed(() => {\n const { class: _, style: __, ...rest } = attrs\n return rest\n })\n\n const isComponentName = computed(() => typeof props.icon === 'object' || typeof props.icon === 'function')\n\n const outputType = computed(() => {\n if (isComponentName.value) {\n return 'component'\n }\n\n const iconStr = props.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\n const outputName = computed(() => {\n if (isComponentName.value) {\n return ''\n }\n\n const iconStr = props.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类图标,将字符串拆分为类名数组\n const 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 结尾的单位,没有则拼接\n function 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 const style = computed(() => {\n const transform = [] as string[]\n switch (props.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 (props.rotate) {\n transform.push(`rotate(${props.rotate % 360}deg)`)\n }\n\n // 构建基础样式\n let baseStyle = `${props.color ? `color: ${props.color};` : ''}${props.size ? `font-size: ${formatSize(props.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 // 图片加载状态管理\n const imageLoading = ref(true)\n const imageError = ref(false)\n\n function handleImageLoad() {\n imageLoading.value = false\n imageError.value = false\n }\n\n function handleImageError() {\n imageLoading.value = false\n imageError.value = true\n }\n\n return () => {\n // Vue组件\n if (outputType.value === 'component') {\n return h(\n props.icon as Component,\n {\n class: ['size-inherit', 'shrink-0', ...mergedClass.value],\n style: style.value,\n ...otherAttrs.value,\n },\n )\n }\n\n // UnoCSS图标\n if (outputType.value === 'unocss') {\n return h(\n 'i',\n {\n class: [...mergedClass.value, outputName.value],\n style: style.value,\n ...otherAttrs.value,\n },\n )\n }\n\n // CSS类图标\n if (outputType.value === 'css') {\n return h(\n 'i',\n {\n class: ['size-inherit', 'shrink-0', ...mergedClass.value, ...cssClasses.value],\n style: style.value,\n ...otherAttrs.value,\n },\n )\n }\n\n // Iconify图标\n if (outputType.value === 'iconify') {\n return h(\n Icon,\n {\n class: ['size-inherit', 'shrink-0', ...mergedClass.value],\n icon: outputName.value,\n style: style.value,\n ...otherAttrs.value,\n },\n )\n }\n\n // 图片\n if (outputType.value === 'img') {\n // 加载中状态\n if (imageLoading.value && props.loading) {\n return h('i', {\n class: props.loading,\n ...otherAttrs.value,\n })\n }\n // 错误状态\n if (imageError.value && props.fallback) {\n return h('i', {\n class: props.fallback,\n ...otherAttrs.value,\n })\n }\n // 图片本体\n return h('img', {\n src: outputName.value,\n class: ['size-inherit', 'shrink-0', ...mergedClass.value],\n style: [style.value, { width: props.size ? formatSize(props.size) : 'auto', height: 'auto' }],\n onLoad: handleImageLoad,\n onError: handleImageError,\n ...otherAttrs.value,\n })\n }\n\n // SVG Sprite\n if (outputName.value) {\n return h(\n 'i',\n {\n class: mergedClass.value,\n style: style.value,\n ...otherAttrs.value,\n },\n [\n h(\n 'svg',\n {\n 'aria-hidden': 'true',\n 'class': 'size-inherit shrink-0',\n },\n [\n h('use', {\n 'xlink:href': `#${props.localIconPrefix}${outputName.value}`,\n }),\n ],\n ),\n ],\n )\n }\n\n return null\n }\n },\n})\n"],"names":["component","defineComponent","name","inheritAttrs","props","icon","type","String","Object","Function","required","flip","default","rotate","Number","color","size","localIconPrefix","fallback","loading","setup","attrs","useAttrs","ns","useNamespace","mergedClass","computed","classes","b","class","push","Array","isArray","otherAttrs","_","style","__","rest","isComponentName","outputType","value","iconStr","test","str","startsWith","includes","outputName","cssClasses","split","filter","cls","trim","formatSize","transform","baseStyle","length","join","attrsStyle","entries","map","_ref","key","replace","toLowerCase","imageLoading","ref","imageError","handleImageLoad","handleImageError","h","Icon","src","width","height","onLoad","onError"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"icon.mjs","sources":["../../../../../../packages/components/src/icon/src/icon.tsx"],"sourcesContent":["import type { Component, CSSProperties } from 'vue'\nimport { Icon } from '@iconify/vue'\nimport { useNamespace } from '@qxs-bns/hooks'\nimport { computed, defineComponent, h, ref, useAttrs } from 'vue'\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\nexport default defineComponent({\n name: 'QxsIcon',\n inheritAttrs: false,\n props: {\n icon: {\n type: [String, Object, Function] as any,\n required: true,\n },\n flip: {\n type: String as () => 'horizontal' | 'vertical' | 'both' | '' | undefined,\n default: '',\n },\n rotate: {\n type: Number,\n default: 0,\n },\n color: String,\n size: [String, Number],\n localIconPrefix: {\n type: String,\n default: 'icon-',\n },\n fallback: String,\n loading: String,\n },\n setup(props) {\n const attrs = useAttrs()\n const ns = useNamespace('icon')\n\n // 合并外部传入的类名\n const mergedClass = computed(() => {\n const classes: any[] = [ns.b()]\n if (attrs.class) {\n if (typeof attrs.class === 'string') {\n classes.push(attrs.class)\n }\n else if (Array.isArray(attrs.class)) {\n classes.push(...attrs.class)\n }\n else {\n classes.push(attrs.class)\n }\n }\n return classes\n })\n\n // 获取非 class 的其他属性\n const otherAttrs = computed(() => {\n const { class: _, style: __, ...rest } = attrs\n return rest\n })\n\n const isComponentName = computed(() => typeof props.icon === 'object' || typeof props.icon === 'function')\n\n const outputType = computed(() => {\n if (isComponentName.value) {\n return 'component'\n }\n\n const iconStr = props.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\n const outputName = computed(() => {\n if (isComponentName.value) {\n return ''\n }\n\n const iconStr = props.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类图标,将字符串拆分为类名数组\n const 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 结尾的单位,没有则拼接\n function 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 const style = computed(() => {\n const transform = [] as string[]\n switch (props.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 (props.rotate) {\n transform.push(`rotate(${props.rotate % 360}deg)`)\n }\n\n // 构建基础样式\n let baseStyle = `${props.color ? `color: ${props.color};` : ''}${props.size ? `font-size: ${formatSize(props.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 // 图片加载状态管理\n const imageLoading = ref(true)\n const imageError = ref(false)\n\n function handleImageLoad() {\n imageLoading.value = false\n imageError.value = false\n }\n\n function handleImageError() {\n imageLoading.value = false\n imageError.value = true\n }\n\n return () => {\n // Vue组件\n if (outputType.value === 'component') {\n return h(\n props.icon as Component,\n {\n class: ['size-inherit', 'shrink-0', ...mergedClass.value],\n style: style.value,\n ...otherAttrs.value,\n },\n )\n }\n\n // UnoCSS图标\n if (outputType.value === 'unocss') {\n return h(\n 'i',\n {\n class: [...mergedClass.value, outputName.value],\n style: style.value,\n ...otherAttrs.value,\n },\n )\n }\n\n // CSS类图标\n if (outputType.value === 'css') {\n return h(\n 'i',\n {\n class: ['size-inherit', 'shrink-0', ...mergedClass.value, ...cssClasses.value],\n style: style.value,\n ...otherAttrs.value,\n },\n )\n }\n\n // Iconify图标\n if (outputType.value === 'iconify') {\n // Iconify 组件有自己的 color、width、height、flip、rotate 等属性\n // 需要单独处理这些属性\n const iconifyProps: any = {\n class: ['size-inherit', 'shrink-0', ...mergedClass.value],\n icon: outputName.value,\n ...otherAttrs.value,\n }\n\n // 传递 color 属性给 Iconify\n if (props.color) {\n iconifyProps.color = props.color\n }\n\n // 传递 flip 属性给 Iconify\n if (props.flip) {\n iconifyProps.flip = props.flip\n }\n\n // 传递 rotate 属性给 Iconify\n if (props.rotate) {\n iconifyProps.rotate = props.rotate\n }\n\n // 处理 size - Iconify 使用 width 和 height\n if (props.size) {\n const formattedSize = formatSize(props.size)\n iconifyProps.width = formattedSize\n iconifyProps.height = formattedSize\n }\n\n // 如果有额外的 style,也要传递\n const attrsStyle = attrs.style\n if (attrsStyle) {\n iconifyProps.style = attrsStyle\n }\n\n return h(Icon, iconifyProps)\n }\n\n // 图片\n if (outputType.value === 'img') {\n // 加载中状态\n if (imageLoading.value && props.loading) {\n return h('i', {\n class: props.loading,\n ...otherAttrs.value,\n })\n }\n // 错误状态\n if (imageError.value && props.fallback) {\n return h('i', {\n class: props.fallback,\n ...otherAttrs.value,\n })\n }\n // 图片本体\n return h('img', {\n src: outputName.value,\n class: ['size-inherit', 'shrink-0', ...mergedClass.value],\n style: [style.value, { width: props.size ? formatSize(props.size) : 'auto', height: 'auto' }],\n onLoad: handleImageLoad,\n onError: handleImageError,\n ...otherAttrs.value,\n })\n }\n\n // SVG Sprite\n if (outputName.value) {\n return h(\n 'i',\n {\n class: mergedClass.value,\n style: style.value,\n ...otherAttrs.value,\n },\n [\n h(\n 'svg',\n {\n 'aria-hidden': 'true',\n 'class': 'size-inherit shrink-0',\n },\n [\n h('use', {\n 'xlink:href': `#${props.localIconPrefix}${outputName.value}`,\n }),\n ],\n ),\n ],\n )\n }\n\n return null\n }\n },\n})\n"],"names":["component","defineComponent","name","inheritAttrs","props","icon","type","String","Object","Function","required","flip","default","rotate","Number","color","size","localIconPrefix","fallback","loading","setup","attrs","useAttrs","ns","useNamespace","mergedClass","computed","classes","b","class","push","Array","isArray","otherAttrs","_","style","__","rest","isComponentName","outputType","value","iconStr","test","str","startsWith","includes","outputName","cssClasses","split","filter","cls","trim","formatSize","transform","baseStyle","length","join","attrsStyle","entries","map","_ref","key","replace","toLowerCase","imageLoading","ref","imageError","handleImageLoad","handleImageError","h","iconifyProps","formattedSize","width","height","Icon","src","onLoad","onError"],"mappings":"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"}
|
package/lib/package.json.cjs
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";exports.version="0.0.
|
|
1
|
+
"use strict";exports.version="0.0.88";
|
|
2
2
|
//# sourceMappingURL=package.json.cjs.map
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("vue"),t=require("lodash-es"),r=require("../utils/injectionKeys.cjs"),a=require("../utils/useCharts.cjs"),o=e.defineComponent({name:"DataChartPie",__name:"pie",props:{chartData:{type:Object,required:!0},subShowType:{type:String,required:!0,default:"pie-simple"},chartOptions:{type:null,required:!0},lazyLoad:{type:Boolean,required:!1,default:!0}},setup(o,{expose:
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("vue"),t=require("lodash-es"),r=require("../utils/injectionKeys.cjs"),a=require("../utils/useCharts.cjs"),o=e.defineComponent({name:"DataChartPie",__name:"pie",props:{chartData:{type:Object,required:!0},subShowType:{type:String,required:!0,default:"pie-simple"},chartOptions:{type:null,required:!0},lazyLoad:{type:Boolean,required:!1,default:!0}},setup(o,{expose:c}){const i=e.inject(r.InjectionChartMerge,e=>e,!0),l=e.ref(null),s=e.computed(()=>{const{colDesc:e,xGroupByDesc:r,data:a,modelName:c}=o.chartData,l=e.length,s={title:{text:c},series:e.map((e,c)=>{const i={name:e,type:"pie",center:["50%","50%"],data:[],emphasis:{itemStyle:{shadowBlur:10,shadowOffsetX:0,shadowColor:"rgba(0, 0, 0, 0.5)"}},label:{formatter:"{b}:{c}({d}%)",rich:{b:{color:"#4C5058",fontSize:14,fontWeight:"bold",lineHeight:33}}}};let s=5;const n=a.filter(t=>void 0!==t[e]),u=t.orderBy(n,[e],["desc"]),d=u.reduce((t,r)=>{const a=Number(r[e])||0;return Number.isNaN(a)?t:t+a},0);if(n.length>s)for(;s<9;){const t=u.slice(0,s);if(t.reduce((t,r)=>t+Number(r[e]),0)/d>.9||8===s){const a=u.slice(s);i.data=t.map(t=>({name:r?.colDesc?String(t[r.colDesc]||""):"",value:Number(t[e])||0}));const o=a.reduce((t,r)=>t+Number(r[e]),0);o>0&&i.data&&i.data.push({name:"其它",value:o});break}s++}else i.data=n.map(t=>({name:r?.colDesc&&t[r.colDesc]||"",value:Number(t[e]||0)}));if(1===l?i.center=["50%","60%"]:2===l?0===c?(i.right="40%",i.left="",i.center=["40%","60%"]):(i.right="",i.left="40%",i.center=["60%","60%"]):3===l?0===c?(i.right="40%",i.bottom="50%",i.top="",i.left="",i.center=["40%","78%"]):1===c?(i.right="",i.bottom="50%",i.top="",i.left="40%",i.center=["60%","78%"]):(i.right="40%",i.bottom="",i.top="50%",i.left="",i.center=["40%","60%"]):4===l&&(0===c?(i.right="40%",i.bottom="50%",i.top="",i.left="",i.center=["40%","78%"]):1===c?(i.right="",i.bottom="50%",i.top="",i.left="40%",i.center=["60%","78%"]):2===c?(i.right="40%",i.bottom="",i.top="50%",i.left="",i.center=["40%","60%"]):(i.right="",i.bottom="",i.top="50%",i.left="40%",i.center=["60%","60%"])),"pie-borderRadius"===o.subShowType)i.radius=["50%","70%"];else i.radius="50%";return i})};return console.log(s),i(s,o.chartOptions)}),{myChart:n}=a.useCharts({chartDOM:l,chartOptions:s,chartData:e.computed(()=>o.chartData),lazyLoad:o.lazyLoad});return c({myChart:n}),(t,r)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"dataChartPie",ref:l,class:"data-chart-pie"},null,512))}});exports.default=o;
|
|
2
2
|
//# sourceMappingURL=pie.vue2.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"pie.vue2.cjs","sources":["../../../../../../../packages/components/src/data-chart/src/components/pie.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { PieSeriesOption } from 'echarts/charts'\nimport type { EChartsOption, IFormatPublicData } from '../utils/types'\nimport { orderBy } from 'lodash-es'\nimport { computed, inject, ref } from 'vue'\nimport { InjectionChartMerge } from '../utils/injectionKeys'\nimport { useCharts } from '../utils/useCharts'\n\ndefineOptions({\n name: 'DataChartPie',\n})\nconst {\n chartData,\n subShowType = 'pie-simple',\n chartOptions,\n lazyLoad = true,\n} = defineProps<{\n chartData: IFormatPublicData\n subShowType: string\n chartOptions: EChartsOption\n lazyLoad?: boolean\n}>()\nconst merge = inject(InjectionChartMerge, (v: any) => v, true)\n\nconst dataChartPie = ref(null)\nconst pieChartOptions = computed<EChartsOption>(() => {\n const { colDesc, xGroupByDesc, data, modelName } = chartData\n const colDescLength = colDesc.length\n const config = {\n title: { text: modelName },\n series: colDesc.map((item, index) => {\n const seriesItem: PieSeriesOption = {\n name: item,\n type: 'pie',\n center: ['50%', '50%'],\n data: [],\n emphasis: {\n itemStyle: {\n shadowBlur: 10,\n shadowOffsetX: 0,\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n },\n },\n label: {\n formatter: '{b}:{c}({d}%)',\n rich: {\n b: {\n color: '#4C5058',\n fontSize: 14,\n fontWeight: 'bold',\n lineHeight: 33,\n },\n },\n },\n }\n\n let cutNum = 5\n const currentItemData = data.filter(row => row[item] !== undefined)\n const orderByData = orderBy(currentItemData, [item], ['desc'])\n // 总数\n const totalDesc = orderByData.reduce((prev, cur) => {\n const value = Number(cur[item]) || 0\n return Number.isNaN(value) ? prev : prev + value\n }, 0)\n if (currentItemData.length > cutNum) {\n while (cutNum < 9) {\n const headerData = orderByData.slice(0, cutNum)\n // 前 cutNum 个总数\n const headerTotal = headerData.reduce(\n (prev, cur) => prev + Number(cur[item]),\n 0,\n )\n // 前五总占比\n const headerScale = headerTotal / totalDesc\n if (headerScale > 0.9 || cutNum === 8) {\n const footerData = orderByData.slice(\n cutNum,\n orderByData.length - 1,\n )\n seriesItem.data = currentItemData\n .map((yItem) => {\n let obj = {}\n headerData.forEach((headerDataItem) => {\n if (JSON.stringify(headerDataItem) === JSON.stringify(yItem)) {\n obj = {\n name: xGroupByDesc?.colDesc\n ? yItem[xGroupByDesc.colDesc]\n : '',\n value: yItem[item],\n }\n }\n })\n return obj\n })\n .filter(v => v && Object.keys(v).length > 0)\n seriesItem.data.push({\n name: '其它',\n value: footerData.reduce(\n (prev, cur) => prev + Number(cur[item]),\n 0,\n ),\n })\n\n break\n }\n else {\n cutNum++\n }\n }\n }\n else {\n seriesItem.data = currentItemData.map(yItem => ({\n name: xGroupByDesc?.colDesc ? (yItem[xGroupByDesc.colDesc] || '') : '',\n value: Number(yItem[item] || 0),\n }))\n }\n\n if (colDescLength === 1) {\n seriesItem.center = ['50%', '60%']\n }\n else if (colDescLength === 2) {\n if (index === 0) {\n seriesItem.right = '40%'\n seriesItem.left = ''\n seriesItem.center = ['40%', '60%']\n }\n else {\n seriesItem.right = ''\n seriesItem.left = '40%'\n seriesItem.center = ['60%', '60%']\n }\n }\n else if (colDescLength === 3) {\n if (index === 0) {\n seriesItem.right = '40%'\n seriesItem.bottom = '50%'\n seriesItem.top = ''\n seriesItem.left = ''\n seriesItem.center = ['40%', '78%']\n }\n else if (index === 1) {\n seriesItem.right = ''\n seriesItem.bottom = '50%'\n seriesItem.top = ''\n seriesItem.left = '40%'\n seriesItem.center = ['60%', '78%']\n }\n else {\n seriesItem.right = '40%'\n seriesItem.bottom = ''\n seriesItem.top = '50%'\n seriesItem.left = ''\n seriesItem.center = ['40%', '60%']\n }\n }\n else if (colDescLength === 4) {\n if (index === 0) {\n seriesItem.right = '40%'\n seriesItem.bottom = '50%'\n seriesItem.top = ''\n seriesItem.left = ''\n seriesItem.center = ['40%', '78%']\n }\n else if (index === 1) {\n seriesItem.right = ''\n seriesItem.bottom = '50%'\n seriesItem.top = ''\n seriesItem.left = '40%'\n seriesItem.center = ['60%', '78%']\n }\n else if (index === 2) {\n seriesItem.right = '40%'\n seriesItem.bottom = ''\n seriesItem.top = '50%'\n seriesItem.left = ''\n seriesItem.center = ['40%', '60%']\n }\n else {\n seriesItem.right = ''\n seriesItem.bottom = ''\n seriesItem.top = '50%'\n seriesItem.left = '40%'\n seriesItem.center = ['60%', '60%']\n }\n }\n // 处理图表形状\n switch (subShowType) {\n case 'pie-borderRadius':\n seriesItem.radius = ['50%', '70%']\n break\n case 'pie-simple':\n seriesItem.radius = '50%'\n break\n default:\n seriesItem.radius = '50%'\n break\n }\n return seriesItem\n }),\n }\n\n return merge(config, chartOptions)\n})\n\nconst { myChart } = useCharts({\n chartDOM: dataChartPie,\n chartOptions: pieChartOptions,\n chartData: computed(() => chartData),\n lazyLoad,\n})\n\n// 暴露 myChart 方法供父组件访问\ndefineExpose({\n myChart,\n})\n</script>\n\n<template>\n <div\n ref=\"dataChartPie\"\n class=\"data-chart-pie\"\n />\n</template>\n\n<style scoped lang=\"scss\">\n.data-chart-pie {\n width: 100%;\n height: 100%;\n}\n</style>\n"],"names":["merge","inject","InjectionChartMerge","v","dataChartPie","ref","pieChartOptions","computed","colDesc","xGroupByDesc","data","modelName","__props","chartData","colDescLength","length","config","title","text","series","map","item","index","seriesItem","name","type","center","emphasis","itemStyle","shadowBlur","shadowOffsetX","shadowColor","label","formatter","rich","b","color","fontSize","fontWeight","lineHeight","cutNum","currentItemData","filter","row","orderByData","orderBy","totalDesc","reduce","prev","cur","value","Number","isNaN","headerData","slice","footerData","yItem","obj","forEach","headerDataItem","JSON","stringify","Object","keys","push","right","left","bottom","top","subShowType","radius","chartOptions","myChart","useCharts","chartDOM","lazyLoad","__expose","_createElementBlock","class"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"pie.vue2.cjs","sources":["../../../../../../../packages/components/src/data-chart/src/components/pie.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport type { PieSeriesOption } from 'echarts/charts'\nimport type { EChartsOption, IFormatPublicData } from '../utils/types'\nimport { orderBy } from 'lodash-es'\nimport { computed, inject, ref } from 'vue'\nimport { InjectionChartMerge } from '../utils/injectionKeys'\nimport { useCharts } from '../utils/useCharts'\n\ndefineOptions({\n name: 'DataChartPie',\n})\nconst {\n chartData,\n subShowType = 'pie-simple',\n chartOptions,\n lazyLoad = true,\n} = defineProps<{\n chartData: IFormatPublicData\n subShowType: string\n chartOptions: EChartsOption\n lazyLoad?: boolean\n}>()\nconst merge = inject(InjectionChartMerge, (v: any) => v, true)\n\nconst dataChartPie = ref(null)\nconst pieChartOptions = computed<EChartsOption>(() => {\n const { colDesc, xGroupByDesc, data, modelName } = chartData\n const colDescLength = colDesc.length\n const config = {\n title: { text: modelName },\n series: colDesc.map((item, index) => {\n const seriesItem: PieSeriesOption = {\n name: item,\n type: 'pie',\n center: ['50%', '50%'],\n data: [],\n emphasis: {\n itemStyle: {\n shadowBlur: 10,\n shadowOffsetX: 0,\n shadowColor: 'rgba(0, 0, 0, 0.5)',\n },\n },\n label: {\n formatter: '{b}:{c}({d}%)',\n rich: {\n b: {\n color: '#4C5058',\n fontSize: 14,\n fontWeight: 'bold',\n lineHeight: 33,\n },\n },\n },\n }\n\n let cutNum = 5\n const currentItemData = data.filter(row => row[item] !== undefined)\n const orderByData = orderBy(currentItemData, [item], ['desc'])\n // 总数\n const totalDesc = orderByData.reduce((prev, cur) => {\n const value = Number(cur[item]) || 0\n return Number.isNaN(value) ? prev : prev + value\n }, 0)\n if (currentItemData.length > cutNum) {\n while (cutNum < 9) {\n const headerData = orderByData.slice(0, cutNum)\n // 前 cutNum 个总数\n const headerTotal = headerData.reduce(\n (prev, cur) => prev + Number(cur[item]),\n 0,\n )\n // 前N项总占比\n const headerScale = headerTotal / totalDesc\n if (headerScale > 0.9 || cutNum === 8) {\n const footerData = orderByData.slice(cutNum)\n\n // 处理前N项数据\n seriesItem.data = headerData.map(headerItem => ({\n name: xGroupByDesc?.colDesc\n ? String(headerItem[xGroupByDesc.colDesc] || '')\n : '',\n value: Number(headerItem[item]) || 0,\n }))\n\n // 添加\"其它\"项,包含剩余所有数据\n const footerTotal = footerData.reduce(\n (prev, cur) => prev + Number(cur[item]),\n 0,\n )\n\n if (footerTotal > 0 && seriesItem.data) {\n seriesItem.data.push({\n name: '其它',\n value: footerTotal,\n })\n }\n\n break\n }\n else {\n cutNum++\n }\n }\n }\n else {\n seriesItem.data = currentItemData.map(yItem => ({\n name: xGroupByDesc?.colDesc ? (yItem[xGroupByDesc.colDesc] || '') : '',\n value: Number(yItem[item] || 0),\n }))\n }\n\n if (colDescLength === 1) {\n seriesItem.center = ['50%', '60%']\n }\n else if (colDescLength === 2) {\n if (index === 0) {\n seriesItem.right = '40%'\n seriesItem.left = ''\n seriesItem.center = ['40%', '60%']\n }\n else {\n seriesItem.right = ''\n seriesItem.left = '40%'\n seriesItem.center = ['60%', '60%']\n }\n }\n else if (colDescLength === 3) {\n if (index === 0) {\n seriesItem.right = '40%'\n seriesItem.bottom = '50%'\n seriesItem.top = ''\n seriesItem.left = ''\n seriesItem.center = ['40%', '78%']\n }\n else if (index === 1) {\n seriesItem.right = ''\n seriesItem.bottom = '50%'\n seriesItem.top = ''\n seriesItem.left = '40%'\n seriesItem.center = ['60%', '78%']\n }\n else {\n seriesItem.right = '40%'\n seriesItem.bottom = ''\n seriesItem.top = '50%'\n seriesItem.left = ''\n seriesItem.center = ['40%', '60%']\n }\n }\n else if (colDescLength === 4) {\n if (index === 0) {\n seriesItem.right = '40%'\n seriesItem.bottom = '50%'\n seriesItem.top = ''\n seriesItem.left = ''\n seriesItem.center = ['40%', '78%']\n }\n else if (index === 1) {\n seriesItem.right = ''\n seriesItem.bottom = '50%'\n seriesItem.top = ''\n seriesItem.left = '40%'\n seriesItem.center = ['60%', '78%']\n }\n else if (index === 2) {\n seriesItem.right = '40%'\n seriesItem.bottom = ''\n seriesItem.top = '50%'\n seriesItem.left = ''\n seriesItem.center = ['40%', '60%']\n }\n else {\n seriesItem.right = ''\n seriesItem.bottom = ''\n seriesItem.top = '50%'\n seriesItem.left = '40%'\n seriesItem.center = ['60%', '60%']\n }\n }\n // 处理图表形状\n switch (subShowType) {\n case 'pie-borderRadius':\n seriesItem.radius = ['50%', '70%']\n break\n case 'pie-simple':\n seriesItem.radius = '50%'\n break\n default:\n seriesItem.radius = '50%'\n break\n }\n return seriesItem\n }),\n }\n console.log(config)\n\n return merge(config, chartOptions)\n})\n\nconst { myChart } = useCharts({\n chartDOM: dataChartPie,\n chartOptions: pieChartOptions,\n chartData: computed(() => chartData),\n lazyLoad,\n})\n\n// 暴露 myChart 方法供父组件访问\ndefineExpose({\n myChart,\n})\n</script>\n\n<template>\n <div\n ref=\"dataChartPie\"\n class=\"data-chart-pie\"\n />\n</template>\n\n<style scoped lang=\"scss\">\n.data-chart-pie {\n width: 100%;\n height: 100%;\n}\n</style>\n"],"names":["merge","inject","InjectionChartMerge","v","dataChartPie","ref","pieChartOptions","computed","colDesc","xGroupByDesc","data","modelName","__props","chartData","colDescLength","length","config","title","text","series","map","item","index","seriesItem","name","type","center","emphasis","itemStyle","shadowBlur","shadowOffsetX","shadowColor","label","formatter","rich","b","color","fontSize","fontWeight","lineHeight","cutNum","currentItemData","filter","row","orderByData","orderBy","totalDesc","reduce","prev","cur","value","Number","isNaN","headerData","slice","footerData","headerItem","String","footerTotal","push","yItem","right","left","bottom","top","subShowType","radius","console","log","chartOptions","myChart","useCharts","chartDOM","lazyLoad","__expose","_createElementBlock","class"],"mappings":"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"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../node_modules/.pnpm/@iconify_vue@5.0.0_vue@3.5.18_typescript@5.9.2_/node_modules/@iconify/vue/dist/iconify.cjs"),t=require("@qxs-bns/hooks"),s=require("vue"),i=s.defineComponent({name:"QxsIcon",inheritAttrs:!1,props:{icon:{type:[String,Object,Function],required:!0},flip:{type:String,default:""},rotate:{type:Number,default:0},color:String,size:[String,Number],localIconPrefix:{type:String,default:"icon-"},fallback:String,loading:String},setup(i){const
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../node_modules/.pnpm/@iconify_vue@5.0.0_vue@3.5.18_typescript@5.9.2_/node_modules/@iconify/vue/dist/iconify.cjs"),t=require("@qxs-bns/hooks"),s=require("vue"),i=s.defineComponent({name:"QxsIcon",inheritAttrs:!1,props:{icon:{type:[String,Object,Function],required:!0},flip:{type:String,default:""},rotate:{type:Number,default:0},color:String,size:[String,Number],localIconPrefix:{type:String,default:"icon-"},fallback:String,loading:String},setup(i){const r=s.useAttrs(),l=t.useNamespace("icon"),o=s.computed(()=>{const e=[l.b()];return r.class&&("string"==typeof r.class?e.push(r.class):Array.isArray(r.class)?e.push(...r.class):e.push(r.class)),e}),a=s.computed(()=>{const{class:e,style:t,...s}=r;return s}),u=s.computed(()=>"object"==typeof i.icon||"function"==typeof i.icon),n=s.computed(()=>{if(u.value)return"component";const e=i.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}),c=s.computed(()=>{if(u.value)return"";const e=i.icon;return"img"===n.value||"unocss"===n.value||n.value,e}),v=s.computed(()=>"css"===n.value?c.value.split(" ").filter(e=>e.trim()):[]);function p(e){return e?"number"==typeof e||/^\d+(?:\.\d+)?$/.test(e)?`${e}px`:e:""}const f=s.computed(()=>{const e=[];switch(i.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)")}i.rotate&&e.push(`rotate(${i.rotate%360}deg)`);let t=`${i.color?`color: ${i.color};`:""}${i.size?`font-size: ${p(i.size)};`:""}${e.length?`transform: ${e.join(" ")};`:""}`;const s=r.style;if(s)if("string"==typeof s)t+=s;else if("object"==typeof s){t+=Object.entries(s).map(e=>{let[t,s]=e;return`${t.replace(/([A-Z])/g,"-$1").toLowerCase()}: ${s};`}).join("")}return t}),h=s.ref(!0),d=s.ref(!1);function y(){h.value=!1,d.value=!1}function g(){h.value=!1,d.value=!0}return()=>{if("component"===n.value)return s.h(i.icon,{class:["size-inherit","shrink-0",...o.value],style:f.value,...a.value});if("unocss"===n.value)return s.h("i",{class:[...o.value,c.value],style:f.value,...a.value});if("css"===n.value)return s.h("i",{class:["size-inherit","shrink-0",...o.value,...v.value],style:f.value,...a.value});if("iconify"===n.value){const t={class:["size-inherit","shrink-0",...o.value],icon:c.value,...a.value};if(i.color&&(t.color=i.color),i.flip&&(t.flip=i.flip),i.rotate&&(t.rotate=i.rotate),i.size){const e=p(i.size);t.width=e,t.height=e}const l=r.style;return l&&(t.style=l),s.h(e.Icon,t)}return"img"===n.value?h.value&&i.loading?s.h("i",{class:i.loading,...a.value}):d.value&&i.fallback?s.h("i",{class:i.fallback,...a.value}):s.h("img",{src:c.value,class:["size-inherit","shrink-0",...o.value],style:[f.value,{width:i.size?p(i.size):"auto",height:"auto"}],onLoad:y,onError:g,...a.value}):c.value?s.h("i",{class:o.value,style:f.value,...a.value},[s.h("svg",{"aria-hidden":"true",class:"size-inherit shrink-0"},[s.h("use",{"xlink:href":`#${i.localIconPrefix}${c.value}`})])]):null}}});exports.default=i;
|
|
2
2
|
//# sourceMappingURL=icon.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon.cjs","sources":["../../../../../../packages/components/src/icon/src/icon.tsx"],"sourcesContent":["import type { Component, CSSProperties } from 'vue'\nimport { Icon } from '@iconify/vue'\nimport { useNamespace } from '@qxs-bns/hooks'\nimport { computed, defineComponent, h, ref, useAttrs } from 'vue'\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\nexport default defineComponent({\n name: 'QxsIcon',\n inheritAttrs: false,\n props: {\n icon: {\n type: [String, Object, Function] as any,\n required: true,\n },\n flip: {\n type: String as () => 'horizontal' | 'vertical' | 'both' | '' | undefined,\n default: '',\n },\n rotate: {\n type: Number,\n default: 0,\n },\n color: String,\n size: [String, Number],\n localIconPrefix: {\n type: String,\n default: 'icon-',\n },\n fallback: String,\n loading: String,\n },\n setup(props) {\n const attrs = useAttrs()\n const ns = useNamespace('icon')\n\n // 合并外部传入的类名\n const mergedClass = computed(() => {\n const classes: any[] = [ns.b()]\n if (attrs.class) {\n if (typeof attrs.class === 'string') {\n classes.push(attrs.class)\n }\n else if (Array.isArray(attrs.class)) {\n classes.push(...attrs.class)\n }\n else {\n classes.push(attrs.class)\n }\n }\n return classes\n })\n\n // 获取非 class 的其他属性\n const otherAttrs = computed(() => {\n const { class: _, style: __, ...rest } = attrs\n return rest\n })\n\n const isComponentName = computed(() => typeof props.icon === 'object' || typeof props.icon === 'function')\n\n const outputType = computed(() => {\n if (isComponentName.value) {\n return 'component'\n }\n\n const iconStr = props.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\n const outputName = computed(() => {\n if (isComponentName.value) {\n return ''\n }\n\n const iconStr = props.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类图标,将字符串拆分为类名数组\n const 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 结尾的单位,没有则拼接\n function 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 const style = computed(() => {\n const transform = [] as string[]\n switch (props.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 (props.rotate) {\n transform.push(`rotate(${props.rotate % 360}deg)`)\n }\n\n // 构建基础样式\n let baseStyle = `${props.color ? `color: ${props.color};` : ''}${props.size ? `font-size: ${formatSize(props.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 // 图片加载状态管理\n const imageLoading = ref(true)\n const imageError = ref(false)\n\n function handleImageLoad() {\n imageLoading.value = false\n imageError.value = false\n }\n\n function handleImageError() {\n imageLoading.value = false\n imageError.value = true\n }\n\n return () => {\n // Vue组件\n if (outputType.value === 'component') {\n return h(\n props.icon as Component,\n {\n class: ['size-inherit', 'shrink-0', ...mergedClass.value],\n style: style.value,\n ...otherAttrs.value,\n },\n )\n }\n\n // UnoCSS图标\n if (outputType.value === 'unocss') {\n return h(\n 'i',\n {\n class: [...mergedClass.value, outputName.value],\n style: style.value,\n ...otherAttrs.value,\n },\n )\n }\n\n // CSS类图标\n if (outputType.value === 'css') {\n return h(\n 'i',\n {\n class: ['size-inherit', 'shrink-0', ...mergedClass.value, ...cssClasses.value],\n style: style.value,\n ...otherAttrs.value,\n },\n )\n }\n\n // Iconify图标\n if (outputType.value === 'iconify') {\n return h(\n Icon,\n {\n class: ['size-inherit', 'shrink-0', ...mergedClass.value],\n icon: outputName.value,\n style: style.value,\n ...otherAttrs.value,\n },\n )\n }\n\n // 图片\n if (outputType.value === 'img') {\n // 加载中状态\n if (imageLoading.value && props.loading) {\n return h('i', {\n class: props.loading,\n ...otherAttrs.value,\n })\n }\n // 错误状态\n if (imageError.value && props.fallback) {\n return h('i', {\n class: props.fallback,\n ...otherAttrs.value,\n })\n }\n // 图片本体\n return h('img', {\n src: outputName.value,\n class: ['size-inherit', 'shrink-0', ...mergedClass.value],\n style: [style.value, { width: props.size ? formatSize(props.size) : 'auto', height: 'auto' }],\n onLoad: handleImageLoad,\n onError: handleImageError,\n ...otherAttrs.value,\n })\n }\n\n // SVG Sprite\n if (outputName.value) {\n return h(\n 'i',\n {\n class: mergedClass.value,\n style: style.value,\n ...otherAttrs.value,\n },\n [\n h(\n 'svg',\n {\n 'aria-hidden': 'true',\n 'class': 'size-inherit shrink-0',\n },\n [\n h('use', {\n 'xlink:href': `#${props.localIconPrefix}${outputName.value}`,\n }),\n ],\n ),\n ],\n )\n }\n\n return null\n }\n },\n})\n"],"names":["component","defineComponent","name","inheritAttrs","props","icon","type","String","Object","Function","required","flip","default","rotate","Number","color","size","localIconPrefix","fallback","loading","setup","attrs","useAttrs","ns","useNamespace","mergedClass","computed","classes","b","class","push","Array","isArray","otherAttrs","_","style","__","rest","isComponentName","outputType","value","iconStr","test","str","startsWith","includes","outputName","cssClasses","split","filter","cls","trim","formatSize","transform","baseStyle","length","join","attrsStyle","entries","map","_ref","key","replace","toLowerCase","imageLoading","ref","imageError","handleImageLoad","handleImageError","h","Icon","src","width","height","onLoad","onError"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"icon.cjs","sources":["../../../../../../packages/components/src/icon/src/icon.tsx"],"sourcesContent":["import type { Component, CSSProperties } from 'vue'\nimport { Icon } from '@iconify/vue'\nimport { useNamespace } from '@qxs-bns/hooks'\nimport { computed, defineComponent, h, ref, useAttrs } from 'vue'\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\nexport default defineComponent({\n name: 'QxsIcon',\n inheritAttrs: false,\n props: {\n icon: {\n type: [String, Object, Function] as any,\n required: true,\n },\n flip: {\n type: String as () => 'horizontal' | 'vertical' | 'both' | '' | undefined,\n default: '',\n },\n rotate: {\n type: Number,\n default: 0,\n },\n color: String,\n size: [String, Number],\n localIconPrefix: {\n type: String,\n default: 'icon-',\n },\n fallback: String,\n loading: String,\n },\n setup(props) {\n const attrs = useAttrs()\n const ns = useNamespace('icon')\n\n // 合并外部传入的类名\n const mergedClass = computed(() => {\n const classes: any[] = [ns.b()]\n if (attrs.class) {\n if (typeof attrs.class === 'string') {\n classes.push(attrs.class)\n }\n else if (Array.isArray(attrs.class)) {\n classes.push(...attrs.class)\n }\n else {\n classes.push(attrs.class)\n }\n }\n return classes\n })\n\n // 获取非 class 的其他属性\n const otherAttrs = computed(() => {\n const { class: _, style: __, ...rest } = attrs\n return rest\n })\n\n const isComponentName = computed(() => typeof props.icon === 'object' || typeof props.icon === 'function')\n\n const outputType = computed(() => {\n if (isComponentName.value) {\n return 'component'\n }\n\n const iconStr = props.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\n const outputName = computed(() => {\n if (isComponentName.value) {\n return ''\n }\n\n const iconStr = props.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类图标,将字符串拆分为类名数组\n const 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 结尾的单位,没有则拼接\n function 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 const style = computed(() => {\n const transform = [] as string[]\n switch (props.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 (props.rotate) {\n transform.push(`rotate(${props.rotate % 360}deg)`)\n }\n\n // 构建基础样式\n let baseStyle = `${props.color ? `color: ${props.color};` : ''}${props.size ? `font-size: ${formatSize(props.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 // 图片加载状态管理\n const imageLoading = ref(true)\n const imageError = ref(false)\n\n function handleImageLoad() {\n imageLoading.value = false\n imageError.value = false\n }\n\n function handleImageError() {\n imageLoading.value = false\n imageError.value = true\n }\n\n return () => {\n // Vue组件\n if (outputType.value === 'component') {\n return h(\n props.icon as Component,\n {\n class: ['size-inherit', 'shrink-0', ...mergedClass.value],\n style: style.value,\n ...otherAttrs.value,\n },\n )\n }\n\n // UnoCSS图标\n if (outputType.value === 'unocss') {\n return h(\n 'i',\n {\n class: [...mergedClass.value, outputName.value],\n style: style.value,\n ...otherAttrs.value,\n },\n )\n }\n\n // CSS类图标\n if (outputType.value === 'css') {\n return h(\n 'i',\n {\n class: ['size-inherit', 'shrink-0', ...mergedClass.value, ...cssClasses.value],\n style: style.value,\n ...otherAttrs.value,\n },\n )\n }\n\n // Iconify图标\n if (outputType.value === 'iconify') {\n // Iconify 组件有自己的 color、width、height、flip、rotate 等属性\n // 需要单独处理这些属性\n const iconifyProps: any = {\n class: ['size-inherit', 'shrink-0', ...mergedClass.value],\n icon: outputName.value,\n ...otherAttrs.value,\n }\n\n // 传递 color 属性给 Iconify\n if (props.color) {\n iconifyProps.color = props.color\n }\n\n // 传递 flip 属性给 Iconify\n if (props.flip) {\n iconifyProps.flip = props.flip\n }\n\n // 传递 rotate 属性给 Iconify\n if (props.rotate) {\n iconifyProps.rotate = props.rotate\n }\n\n // 处理 size - Iconify 使用 width 和 height\n if (props.size) {\n const formattedSize = formatSize(props.size)\n iconifyProps.width = formattedSize\n iconifyProps.height = formattedSize\n }\n\n // 如果有额外的 style,也要传递\n const attrsStyle = attrs.style\n if (attrsStyle) {\n iconifyProps.style = attrsStyle\n }\n\n return h(Icon, iconifyProps)\n }\n\n // 图片\n if (outputType.value === 'img') {\n // 加载中状态\n if (imageLoading.value && props.loading) {\n return h('i', {\n class: props.loading,\n ...otherAttrs.value,\n })\n }\n // 错误状态\n if (imageError.value && props.fallback) {\n return h('i', {\n class: props.fallback,\n ...otherAttrs.value,\n })\n }\n // 图片本体\n return h('img', {\n src: outputName.value,\n class: ['size-inherit', 'shrink-0', ...mergedClass.value],\n style: [style.value, { width: props.size ? formatSize(props.size) : 'auto', height: 'auto' }],\n onLoad: handleImageLoad,\n onError: handleImageError,\n ...otherAttrs.value,\n })\n }\n\n // SVG Sprite\n if (outputName.value) {\n return h(\n 'i',\n {\n class: mergedClass.value,\n style: style.value,\n ...otherAttrs.value,\n },\n [\n h(\n 'svg',\n {\n 'aria-hidden': 'true',\n 'class': 'size-inherit shrink-0',\n },\n [\n h('use', {\n 'xlink:href': `#${props.localIconPrefix}${outputName.value}`,\n }),\n ],\n ),\n ],\n )\n }\n\n return null\n }\n },\n})\n"],"names":["component","defineComponent","name","inheritAttrs","props","icon","type","String","Object","Function","required","flip","default","rotate","Number","color","size","localIconPrefix","fallback","loading","setup","attrs","useAttrs","ns","useNamespace","mergedClass","computed","classes","b","class","push","Array","isArray","otherAttrs","_","style","__","rest","isComponentName","outputType","value","iconStr","test","str","startsWith","includes","outputName","cssClasses","split","filter","cls","trim","formatSize","transform","baseStyle","length","join","attrsStyle","entries","map","_ref","key","replace","toLowerCase","imageLoading","ref","imageError","handleImageLoad","handleImageError","h","iconifyProps","formattedSize","width","height","Icon","src","onLoad","onError"],"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.88",
|
|
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.34",
|
|
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":"pie.vue.d.ts","sourceRoot":"","sources":["../../../../../../../packages/components/src/data-chart/src/components/pie.vue"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"pie.vue.d.ts","sourceRoot":"","sources":["../../../../../../../packages/components/src/data-chart/src/components/pie.vue"],"names":[],"mappings":"AAqOA,OAAO,KAAK,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAA;AAStE,KAAK,WAAW,GAAG;IACjB,SAAS,EAAE,iBAAiB,CAAA;IAC5B,WAAW,EAAE,MAAM,CAAA;IACnB,YAAY,EAAE,aAAa,CAAA;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAC;;;;AA6OF,wBAGG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/icon/src/icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAiB,MAAM,KAAK,CAAA;AAKnD,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;;;cAOyC,GAAG;;;;cAIvB,MAAM,YAAY,GAAG,UAAU,GAAG,MAAM,GAAG,EAAE,GAAG,SAAS;;;;;;;;;;;;;;;;;;;cAJrC,GAAG;;;;cAIvB,MAAM,YAAY,GAAG,UAAU,GAAG,MAAM,GAAG,EAAE,GAAG,SAAS;;;;;;;;;;;;;;;;;;;;AAT/E,
|
|
1
|
+
{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../../../../packages/components/src/icon/src/icon.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAiB,MAAM,KAAK,CAAA;AAKnD,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;;;cAOyC,GAAG;;;;cAIvB,MAAM,YAAY,GAAG,UAAU,GAAG,MAAM,GAAG,EAAE,GAAG,SAAS;;;;;;;;;;;;;;;;;;;cAJrC,GAAG;;;;cAIvB,MAAM,YAAY,GAAG,UAAU,GAAG,MAAM,GAAG,EAAE,GAAG,SAAS;;;;;;;;;;;;;;;;;;;;AAT/E,wBAkVE"}
|