@techui/scifi 0.0.1-alpha.3 → 0.0.3-alpha.1

package/dist/modules/echartsTheme.js

@@ -1 +1 @@
-import*as L from"echarts";import{$c as d}from"@techui/colors";const k=o=>{const{chart:e,common:r,font:l,scifi:n}=o,{bg:t,bd:i}=r,{line:{weak:s,base:a,strong:c},map:{bg:h,bd:b,bg_hov:$,bd_hov:y,glow:S,shadow:m},palette_pri:w,palette_sec:p,visual:x}=e,{deco:C,focus:u}=n,{weaker:g,weak:W,base:f,strong:L,stronger:k}=l;return`{\n"color":${JSON.stringify(d.scale(w,6,"lch"))},\n"textStyle":{},\n"title":{\n  "textStyle":{"color":"${f}"},\n  "subtextStyle":{"color":"${W}"}\n},\n"line":{\n  "label":{"color":"inherit","textBorderColor":"${t}", "textBorderWidth":5},\n  "itemStyle":{"borderWidth":"2"},\n  "lineStyle":{"width":"3"},\n  "symbolSize":"7",\n  "symbol":"emptyCircle",\n  "smooth":true\n},\n"radar":{\n  "splitLine":{"lineStyle":{"show":true,"color":"${a}","type":"dashed"}},\n  "axisLine":{"show":true,"lineStyle":{"color":"${a}","type":"dashed"}},\n  "axisName":{"show":true,"color":"${f}"},\n  "splitArea":{"areaStyle":{"color": ["${s}","${t}"]}},\n  "symbolSize":"7",\n  "symbol":"emptyCircle",\n  "markLine":{"label":{"color":"inherit","textBorderColor":"${t}", "textBorderWidth":5}},\n  "smooth":true\n},\n"bar":{\n  "itemStyle":{"barBorderWidth":0,"barBorderColor":"${s}"},\n  "markLine":{"label":{"color":"inherit","textBorderColor":"${t}", "textBorderWidth":5}}\n},\n"pie":{"itemStyle":{"borderWidth":0,"borderColor":"${t}"}},\n"scatter":{"itemStyle":{"borderWidth":0,"borderColor":"${s}"}},\n"boxplot":{"itemStyle":{"borderWidth":0,"borderColor":"${s}"}},\n"parallel":{"itemStyle":{"borderWidth":0,"borderColor":"${s}"}},\n"sankey":{"itemStyle":{"borderWidth":0,"borderColor":"${s}"}},\n"funnel":{"itemStyle":{"borderWidth":0,"borderColor":"${s}"}},\n"gauge":{\n  "itemStyle":{"borderWidth":0,"borderColor":"${c}"},\n  "axisLine":{"show":true,"lineStyle":{"color":[ [1, "${s}"] ]}},\n  "axisTick":{"show":true,"lineStyle":{"color":"${c}"}},\n  "axisLabel":{"show":true,"color":"${f}"},\n  "splitLine":{"show":true,"lineStyle":{"color":"${c}"}},\n  "detail":{"color":"inherit"}\n},\n"graph":{\n  "itemStyle":{"borderWidth":0,"borderColor":"${s}"},\n  "lineStyle":{"width":1,"color":"${a}"},\n  "symbolSize":"7",\n  "symbol":"circle",\n  "smooth":true,\n  "color":${JSON.stringify(d.scale(p,6,"lch"))},\n  "label":{"color":"${f}"}\n},\n"map":{\n  "itemStyle":{"areaColor":"${h}","borderColor":"${b}","borderWidth":0.5 },\n  "label":{"color":"${f}"},\n  "emphasis":{\n    "itemStyle":{"areaColor":"${$}","borderColor":"${b}","borderWidth":1 },\n    "label":{"color":"${f}"}\n  }\n},\n"geo":{\n  "itemStyle":{\n    "areaColor":"${h}",\n    "borderColor":"${b}",\n    "shadowColor":"${m}",\n    "borderWidth":0.5\n  },\n  "label":{"color":"${f}"},\n  "emphasis":{\n    "itemStyle":{\n      "areaColor":"${$}",\n      "borderColor":"${b}",\n      "borderWidth":1 \n    },\n    "label":{"color":"${f}"}\n  }\n},\n"categoryAxis":{\n  "axisLine":{"show":true,"lineStyle":{"color":"${a}"}},\n  "splitLine":{"show":false,"lineStyle":{"color":"${s}"}},\n  "axisTick":{"show":false,"lineStyle":{"color":"${s}"}},\n  "axisLabel":{"show":true,"color":"${f}"},\n  "splitArea":{"show":false }\n},\n"valueAxis":{\n  "axisLine":{"show":true,"lineStyle":{"color":"${a}"}},\n  "axisTick":{"show":false,"lineStyle":{"color":"${s}"}},\n  "axisLabel":{"show":true,"color":"${f}"},\n  "splitLine":{"show":true,"lineStyle":{"color":"${s}"}},\n  "splitArea":{"show":false }\n},\n"logAxis":{\n  "axisLine":{"show":true,"lineStyle":{"color":"${a}"}},\n  "axisTick":{"show":false,"lineStyle":{"color":"${s}"}},\n  "axisLabel":{"show":true,"color":"${f}"},\n  "splitLine":{"show":false,"lineStyle":{"color":"${s}"}},\n  "splitArea":{"show":false }\n},\n"timeAxis":{\n  "axisLine":{"show":true,"lineStyle":{"color":"${a}"}},\n  "axisTick":{"show":false,"lineStyle":{"color":"${s}"}},\n  "axisLabel":{"show":true,"color":"${f}"},\n  "splitLine":{"show":false,"lineStyle":{"color":"${s}"}},\n  "splitArea":{"show":false }\n},\n"toolbox":{\n  "iconStyle":{"borderColor":"${f}"},\n  "emphasis":{\n    "iconStyle":{"borderColor":"${L}"}\n  }\n},\n"legend":{\n  "y":"bottom",\n  "x":"center",\n  "textStyle":{"color":"${f}"},\n  "itemStyle":{\n    "borderColor":"transparent",\n    "borderWidth":1 ,\n    "opacity":1\n  }\n},\n"tooltip":{\n  "axisPointer":{\n    "lineStyle":{"color":"${f}","width":1 },\n    "crossStyle":{"color":"${f}","width":1 }\n  }\n},\n"timeline":{\n  "symbol":"circle",\n  "progress":{\n    "itemStyle":{"color":"${C}","borderColor":"white","borderWidth":0 },\n    "lineStyle":{"color":"${C}","shadowColor":"rgba(0, 0, 0, 0)" }\n  },\n  "lineStyle":{"color":"${u}","width":1,"shadowColor":"rgba(0, 0, 0, 0)" },\n  "itemStyle":{"color":"${u}","borderColor":"white","borderWidth":0 },\n  "controlStyle":{"color":"${g}","borderColor":"white","borderWidth":0 },\n  "checkpointStyle":{"symbol":"circle","color":"${C}","borderColor":"white","borderWidth":0,"shadowColor":"rgba(0, 0, 0, 0)"},\n  "label":{"color":"${f}"},\n  "emphasis":{\n    "itemStyle":{"color":"${u}"},\n    "controlStyle":{"color":"${f}","borderWidth":0 },\n    "label":{"color":"${L}"}\n  }\n},\n"visualMap":{"color":${JSON.stringify(d.scale(x,4,"lch"))},"textStyle":{"color":"${f}"},"zlevel":10}\n}`};let T=null;function J(o){if(o)try{const e=JSON.parse(k(o));L.registerTheme("eTheme",e),T=o}catch(o){}}export{J as registerEchartsTheme};
+import*as q from"echarts";import{$c as b}from"@techui/colors";const F=o=>{const{chart:e,common:l,font:r,scifi:t}=o,{bg:i,bd:s}=l,{line:{weak:a,base:c,strong:h},bubble:{fc:d,bg:y,hlite:n},map:{fc:S,fc_hov:m,fc_act:w,bg:p,bd:x,bg_hov:C,bd_hov:g,bg_act:W,bd_act:f,glow:L,shadow:u},palette_pri:k,palette_sec:A,visual:B}=e,{hlite:T,focus:_}=t,{weaker:v,weak:z,base:N,strong:O,stronger:q}=r;let D=b.scale(k,6,"lch"),F=b.scale(A,6,"lch"),J=b.scale(B,4,"lch");return JSON.stringify({color:D,textStyle:{},title:{textStyle:{color:N},subtextStyle:{color:z}},line:{label:{color:"inherit",textBorderColor:i,textBorderWidth:5},itemStyle:{borderWidth:"2"},lineStyle:{width:"3"},symbolSize:"7",symbol:"emptyCircle",smooth:!0},radar:{splitLine:{lineStyle:{show:!0,color:c,type:"dashed"}},axisLine:{show:!0,lineStyle:{color:c,type:"dashed"}},axisName:{show:!0,color:N},splitArea:{areaStyle:{color:[a,i]}},symbolSize:"7",symbol:"emptyCircle",markLine:{label:{color:"inherit",textBorderColor:i,textBorderWidth:5}},smooth:!0},bar:{itemStyle:{barBorderWidth:0,barBorderColor:a},markLine:{label:{color:"inherit",textBorderColor:i,textBorderWidth:5}}},pie:{itemStyle:{borderWidth:0,borderColor:i}},scatter:{label:{show:!0,color:d},emphasis:{labele:{fontWeight:"bold"}},itemStyle:{color:{type:"radial",x:.3,y:.3,r:.5,colorStops:[{offset:0,color:n},{offset:1,color:y}],global:!1},borderWidth:0,borderColor:a}},boxplot:{itemStyle:{borderWidth:0,borderColor:a}},parallel:{itemStyle:{borderWidth:0,borderColor:a}},sankey:{itemStyle:{borderWidth:0,borderColor:a}},funnel:{itemStyle:{borderWidth:0,borderColor:a}},gauge:{itemStyle:{borderWidth:0,borderColor:h},axisLine:{show:!0,lineStyle:{color:[[1,a]]}},axisTick:{show:!0,lineStyle:{color:h}},axisLabel:{show:!0,color:N},splitLine:{show:!0,lineStyle:{color:h}},detail:{color:"inherit"}},graph:{itemStyle:{borderWidth:0,borderColor:a},lineStyle:{width:1,color:c},symbolSize:"7",symbol:"circle",smooth:!0,color:F,label:{color:N}},map:{itemStyle:{areaColor:p,borderColor:x,borderWidth:.5},label:{color:N},emphasis:{itemStyle:{areaColor:C,borderColor:x,borderWidth:1},label:{color:N}}},geo:{scaleLimit:{min:.5,max:7},itemStyle:{areaColor:p,borderColor:x,shadowColor:u,shadowOffsetY:0,shadowBlur:5,borderWidth:.5},label:{show:!0,fontSize:12,color:S},emphasis:{itemStyle:{areaColor:C,borderColor:g,borderWidth:1},label:{fontSize:14,color:m}},select:{itemStyle:{areaColor:W,borderColor:f,borderWidth:1},label:{fontSize:14,color:w}}},categoryAxis:{axisLine:{show:!0,lineStyle:{color:c}},splitLine:{show:!1,lineStyle:{color:a}},axisTick:{show:!1,lineStyle:{color:a}},axisLabel:{show:!0,color:N},splitArea:{show:!1}},valueAxis:{axisLine:{show:!0,lineStyle:{color:c}},axisTick:{show:!1,lineStyle:{color:a}},axisLabel:{show:!0,color:N},splitLine:{show:!0,lineStyle:{color:a}},splitArea:{show:!1}},logAxis:{axisLine:{show:!0,lineStyle:{color:c}},axisTick:{show:!1,lineStyle:{color:a}},axisLabel:{show:!0,color:N},splitLine:{show:!1,lineStyle:{color:a}},splitArea:{show:!1}},timeAxis:{axisLine:{show:!0,lineStyle:{color:c}},axisTick:{show:!1,lineStyle:{color:a}},axisLabel:{show:!0,color:N},splitLine:{show:!1,lineStyle:{color:a}},splitArea:{show:!1}},toolbox:{iconStyle:{borderColor:N},emphasis:{iconStyle:{borderColor:O}}},legend:{y:"bottom",x:"center",textStyle:{color:N},itemStyle:{borderColor:"transparent",borderWidth:1,opacity:1}},tooltip:{backgroundColor:i,textStyle:{color:N},axisPointer:{lineStyle:{color:N,width:1},crossStyle:{color:N,width:1}}},timeline:{symbol:"circle",progress:{itemStyle:{color:T,borderColor:"white",borderWidth:0},lineStyle:{color:T,shadowColor:"rgba(0, 0, 0, 0)"}},lineStyle:{color:_,width:1,shadowColor:"rgba(0, 0, 0, 0)"},itemStyle:{color:_,borderColor:"white",borderWidth:0},controlStyle:{color:v,borderColor:"white",borderWidth:0},checkpointStyle:{symbol:"circle",color:T,borderColor:"white",borderWidth:0,shadowColor:"rgba(0, 0, 0, 0)"},label:{color:N},emphasis:{itemStyle:{color:_},controlStyle:{color:N,borderWidth:0},label:{color:O}}},visualMap:{color:J,textStyle:{color:N},zlevel:10}})};let y=null;function D(o){if(o)try{const e=JSON.parse(F(o));q.registerTheme("eTheme",e),y=o}catch(o){}}export{D as registerEchartsTheme};

package/dist/modules/tuiEcharts.js

@@ -1 +1 @@
-import{inject as C,ref as q,shallowRef as H,reactive as L,watch as h,nextTick as v,computed as W,onMounted as F,onBeforeUnmount as V,resolveComponent as Q,resolveDirective as _,createBlock as J,openBlock as K,withCtx as X,withDirectives as Y,createElementVNode as Z,normalizeStyle as ee,normalizeClass as te,unref as B}from"vue";import{cidGen as ie}from"@techui/scifi";import{tQuery as T,tClass as R,tStr as ae,cssVarGen as re,tType as E}from"@techui/utils";import*as ne from"echarts";import{$c as oe}from"@techui/colors";const le=(e,t,a="358")=>{const i=T.get1stParent(e,".tui-3d-panel");if(!i)return;if(R.has(i,"is-3doff"))return;if(!(e&&e instanceof HTMLElement&&"string"==typeof t&&""!==t.trim()))return;const r=e.querySelector("svg");if(!r)return;const l="pathG"+t,n=r.querySelector(`g#${CSS.escape(l)}`);n&&r.removeChild(n);const s=r.querySelectorAll("path"),o=[];if(s.forEach((e=>{const t=e.getAttribute("stroke-width");null!=t&&""!==t.trim()&&String(t).includes(a)&&o.push(e)})),o.length>0){const e=document.createElementNS("http://www.w3.org/2000/svg","g");e.setAttribute("id",l),o.forEach((t=>{const a=t.getAttribute("fill"),i=t.getAttribute("stroke");t.setAttribute("class","ori-svg-item");const r=t.cloneNode(!0);r.setAttribute("class","t3d-shadow-item"),r.setAttribute("style",`--tui-t3d-thickcolor:${oe.darken("none"!=a?a:i,2.5)}`),e.appendChild(r)})),r.insertBefore(e,r.firstChild)}},se=e=>{const t="pathG"+e,a=T.el(`#${t}`);a&&a.remove()},P="TuiEcharts",fe=Object.assign({name:P},{__name:"tuiEcharts",props:{width:[Number,String],height:[Number,String],chartOption:{type:Object,required:!0},initOptions:{type:Object,default:()=>({})},loading:{type:Boolean,default:!0},initT3DShadow:{type:Boolean,default:!1},t3DShadowUpdate:{type:String,default:"finished",validator:e=>["rendered","finished"].includes(e)},initHold:{type:Boolean,default:!1},dataOpacity:Number,dataBlur:Number,initDelay:{type:Number,default:0},resizeObserver:{type:String,default:"global",validator:e=>["self","global","none"].includes(e)}},emits:["chartClick","chartDblClick","chartMouseDown","chartMouseUp","chartMouseOver","chartGlobalOut","chartInit","chartReady","chartRendered","chartFinished","update:loading"],setup(e,{expose:t,emit:a}){const{$gT3D:i,$gTheme:r,$optResizeCounter:l,initResizeBy:n}=C("$global"),s=n(),o=ie(P),u="echart_"+ae.rdm(),c=e,d=a,p=q(null),f=H(null);let g=null;const m=L({loading:!0,inited:!1,resizing:!0}),b=async()=>{if(p.value)try{if(S(),f.value)return;await v(),f.value=ne.init(p.value,"eTheme",{...c.initOptions,renderer:"svg"}),d("chartInit",f.value),f.value.setOption(c.chartOption),y(),await v(),f.value&&d("chartReady",f.value)}catch(e){}},y=()=>{if(!f.value)return;const e=(e,t)=>{f.value&&f.value.on(e,t)};e("click",(e=>d("chartClick",e))),e("dblclick",(e=>d("chartDblClick",e))),e("mousedown",(e=>d("chartMouseDown",e))),e("mouseup",(e=>d("chartMouseUp",e))),e("mouseover",(e=>d("chartMouseOver",e))),e("globalout",(e=>d("chartGlobalOut",e))),e("rendered",(()=>{f.value&&"rendered"==c.t3DShadowUpdate&&w(),d("chartRendered")})),e("finished",(function(){f.value&&("finished"==c.t3DShadowUpdate&&w(),d("chartFinished"),d("update:loading",!1),m.loading=!1,m.inited=!1)}))},w=()=>{if(!p.value)return;let e=!0;const t=T.get1stParent(p.value,".tui-3d-panel");(!t||t&&R.has(t,"is-3doff"))&&(e=!1),c.initT3DShadow&&e?le(p.value,u):se(u)},O=C("TuiT3DPanel");h((()=>[i.value,c.initT3DShadow,O?.view3d?.value]),(([e,t,a])=>{w()})),h((()=>r.value),(e=>{f.value&&f.value.setTheme("eTheme")}));const S=()=>{f.value&&(f.value.dispose(),f.value=null)},D=()=>{f.value&&f.value.resize()};h((()=>c.initHold),(e=>{e||b()})),h((()=>c.chartOption),(()=>{f.value&&v((()=>{f.value&&(f.value.setOption(c.chartOption),m.loading=!1,d("update:loading",!1))}))}),{deep:!0}),h((()=>c.loading),(e=>{null!=e&&(m.loading=e)}),{immediate:!0});const z=W((()=>re("cpt-echart",{...c.width&&{width:E.join("number",c.width,"px")},...c.height&&{height:E.join("number",c.height,"px")},...c.dataOpacity&&{opa:c.dataOpacity},...c.dataBlur&&{blur:c.dataBlur+"px"}})));h((()=>l.value),((e,t)=>{"root"==s.value(c.resizeObserver)&&e>t&&k()}));const k=async()=>{m.resizing=!0,D(),await v(),setTimeout((()=>{m?.resizing&&(m.resizing=!1)}),500)};return F((()=>{c.initHold||(c.initDelay>0?g=setTimeout((()=>{g=null,p.value&&b()}),c.initDelay):v((()=>{b()})))})),V((()=>{g&&(clearTimeout(g),g=null),S()})),t({resize:D,getChart:()=>f.value,setOption:(e,t)=>{f.value&&f.value.setOption(e,t)},clear:()=>{f.value&&f.value.clear()},dispose:S}),(t,a)=>{const i=Q("TuiLoaderPanel"),r=_("tui-resize"),l=_("tui-vcid");return K(),J(i,{loading:m.loading,inited:m.inited},{default:X((()=>[Y(Z("div",{ref_key:"chartRef",ref:p,class:te(["tui-echarts",{"is-resizing":m.resizing}]),style:ee(z.value)},null,6),[[r,{callback:k,uid:u,disabled:"self"!=B(s)(e.resizeObserver)}],[l,B(o)]])])),_:1},8,["loading","inited"])}}});export{fe as default};
+import{inject as D,ref as j,shallowRef as U,reactive as q,watch as h,nextTick as f,computed as H,onMounted as L,onBeforeUnmount as W,resolveComponent as F,resolveDirective as V,createBlock as Q,openBlock as J,withCtx as K,withDirectives as X,createElementVNode as Y,normalizeStyle as Z,normalizeClass as ee,unref as B}from"vue";import{cidGen as te,cssVarGen as ie}from"@techui/scifi";import{tQuery as T,tClass as E,tStr as ae,tType as _}from"@techui/utils";import*as re from"echarts";import{$c as ne}from"@techui/colors";const oe=(e,t,a="358")=>{const i=T.get1stParent(e,".tui-3d-panel");if(!i)return;if(E.has(i,"is-3doff"))return;if(!(e&&e instanceof HTMLElement&&"string"==typeof t&&""!==t.trim()))return;const r=e.querySelector("svg");if(!r)return;const l="pathG"+t,n=r.querySelector(`g#${CSS.escape(l)}`);n&&r.removeChild(n);const s=r.querySelectorAll("path"),o=[];if(s.forEach((e=>{const t=e.getAttribute("stroke-width");null!=t&&""!==t.trim()&&String(t).includes(a)&&o.push(e)})),o.length>0){const e=document.createElementNS("http://www.w3.org/2000/svg","g");e.setAttribute("id",l),o.forEach((t=>{const a=t.getAttribute("fill"),i=t.getAttribute("stroke");t.setAttribute("class","ori-svg-item");const r=t.cloneNode(!0);r.setAttribute("class","t3d-shadow-item"),r.setAttribute("style",`--tui-t3d-thickcolor:${ne.darken("none"!=a?a:i,2.5)}`),e.appendChild(r)})),r.insertBefore(e,r.firstChild)}},le=e=>{const t="pathG"+e,a=T.el(`#${t}`);a&&a.remove()},P="TuiEcharts",he=Object.assign({name:P},{__name:"tuiEcharts",props:{width:[Number,String],height:[Number,String],chartOption:{type:Object,required:!0},initOptions:{type:Object,default:()=>({})},loading:{type:Boolean,default:!0},initT3DShadow:{type:Boolean,default:!1},t3DShadowUpdate:{type:String,default:"finished",validator:e=>["rendered","finished"].includes(e)},initHold:{type:Boolean,default:!1},dataOpacity:Number,dataBlur:Number,initDelay:{type:Number,default:0},resizeObserver:{type:String,default:"global",validator:e=>["self","global","none"].includes(e)}},emits:["chartClick","chartDblClick","chartMouseDown","chartMouseUp","chartMouseOver","chartGlobalOut","chartInit","chartReady","chartRendered","chartFinished","update:loading"],setup(e,{expose:t,emit:a}){const{$gT3D:i,$gTheme:r,$optResizeCounter:l,initResizeBy:n}=D("$global"),s=n(),o=te(P),u="echart_"+ae.rdm(),c=e,d=a,p=j(null),v=U(null);let g=null;const m=q({loading:!0,inited:!1,resizing:!0}),b=async()=>{if(p.value)try{if(S(),v.value)return;await f(),v.value=re.init(p.value,"eTheme",{...c.initOptions,renderer:"svg"}),d("chartInit",v.value),v.value.setOption(c.chartOption),y(),await f(),v.value&&d("chartReady",v.value)}catch(e){}},y=()=>{if(!v.value)return;const e=(e,t)=>{v.value&&v.value.on(e,t)};e("click",(e=>d("chartClick",e))),e("dblclick",(e=>d("chartDblClick",e))),e("mousedown",(e=>d("chartMouseDown",e))),e("mouseup",(e=>d("chartMouseUp",e))),e("mouseover",(e=>d("chartMouseOver",e))),e("globalout",(e=>d("chartGlobalOut",e))),e("rendered",(()=>{v.value&&"rendered"==c.t3DShadowUpdate&&w(),d("chartRendered")})),e("finished",(function(){v.value&&("finished"==c.t3DShadowUpdate&&w(),d("chartFinished"),d("update:loading",!1),m.loading=!1,m.inited=!1)}))},w=()=>{if(!p.value)return;let e=!0;const t=T.get1stParent(p.value,".tui-3d-panel");(!t||t&&E.has(t,"is-3doff"))&&(e=!1),c.initT3DShadow&&e?oe(p.value,u):le(u)},O=D("TuiT3DPanel");h((()=>[i.value,c.initT3DShadow,O?.view3d?.value]),(([e,t,a])=>{w()})),h((()=>r.value),(async e=>{v.value&&(await f(),v.value.setTheme("eTheme"))}));const S=()=>{v.value&&(v.value.dispose(),v.value=null)},z=()=>{v.value&&v.value.resize()};h((()=>c.initHold),(e=>{e||b()})),h((()=>c.chartOption),(()=>{v.value&&f((()=>{v.value&&(v.value.setOption(c.chartOption),m.loading=!1,d("update:loading",!1))}))}),{deep:!0}),h((()=>c.loading),(e=>{null!=e&&(m.loading=e)}),{immediate:!0});const k=H((()=>ie("cpt-echart",{...c.width&&{width:_.join("number",c.width,"px")},...c.height&&{height:_.join("number",c.height,"px")},...c.dataOpacity&&{opa:c.dataOpacity},...c.dataBlur&&{blur:c.dataBlur+"px"}})));h((()=>l.value),((e,t)=>{"root"==s.value(c.resizeObserver)&&e>t&&C()}));const C=async()=>{m.resizing=!0,z(),await f(),setTimeout((()=>{m?.resizing&&(m.resizing=!1)}),500)};return L((()=>{c.initHold||(c.initDelay>0?g=setTimeout((()=>{g=null,p.value&&b()}),c.initDelay):f((()=>{b()})))})),W((()=>{g&&(clearTimeout(g),g=null),S()})),t({resize:z,getChart:()=>v.value,setOption:(e,t)=>{v.value&&v.value.setOption(e,t)},clear:()=>{v.value&&v.value.clear()},dispose:S}),(t,a)=>{const i=F("TuiLoaderPanel"),r=V("tui-resize");return J(),Q(i,{loading:m.loading,inited:m.inited},{default:K((()=>[X(Y("div",{ref_key:"chartRef",ref:p,class:ee(["tui-echarts",{"is-resizing":m.resizing}]),style:Z(k.value)},null,6),[[r,{callback:C,uid:u,cid:B(o),disabled:"self"!=B(s)(e.resizeObserver)}]])])),_:1},8,["loading","inited"])}}});export{he as default};

package/dist/modules/tuiEchartsMap.js

@@ -1 +1 @@
-import{useCssVars as x,computed as g,getCurrentInstance as I,ref as w,reactive as P,watch as v,markRaw as B,onMounted as L,nextTick as M,onBeforeUnmount as $,resolveComponent as E,createBlock as N,openBlock as l,withCtx as R,createElementBlock as p,createCommentVNode as b,normalizeClass as S,createElementVNode as y,Fragment as V,renderList as J,toDisplayString as z}from"vue";import{tStr as A,tQuery as F}from"@techui/utils";import*as O from"echarts";const H={key:1,class:"map-breadcrumb"},Q=["onClick"],U={class:"desc"},W=Object.assign({name:"TuiEchartsMap"},{__name:"tuiEchartsMap",props:{chartOption:{type:Object,default:{}},chartData:{type:Object,default:{}}},setup(a){x((a=>({v4844748c:s.value.top,v5b644141:s.value.right,v139e00b4:s.value.bottom,c051af7c:s.value.left})));const{proxy:{$emit:t}}=I(),{$tState:e}=proxy,r=w(!1),n=P({chartInitTime:0,chart:"",loading:!0,inited:!1}),i="echartmap_"+A.rdm(),o=a,c=g((()=>null==o.chartData.nav.show||o.chartData.nav.show)),s=g((()=>{let a=o.chartData.nav.position||{};for(let t in a)"number"==typeof a[t]&&(a[t]=a[t]+"px");return a}));v((()=>o.chartOption.loading),((a,t)=>{null!=a&&(n.loading=a)}),{immediate:!0}),v((()=>o.chartOption.series),(a=>{a.length>0&&h()}),{deep:!0});const h=()=>{if(!F.el("#tuiRoot"))return void tConsolei18n("error","echartsInit","error.echartsInit");const{chartData:a,chartOption:e}=o;O.registerMap(a.geoJson.name,a.geoJson),0==n.chartInitTime&&(n.chart=B(O.init(r.value,"eTheme")),n.chart.on("finished",(()=>{0==n.chartInitTime&&(n.chartInitTime++,n.inited=!0)})),0==n.chart._chartsViews.length&&(n.chart.on("click",(a=>{let e,r=a;a.value&&(e=n.chart.convertToPixel("geo",[a.value[0],a.value[1]]),r.domPosition=e,r.chart=n.chart),t("mapClick",r)})),n.chart.on("georoam",(a=>{let e=a;e.chart=n.chart,t("mapAction",e)})),n.chart.on("dblclick",(a=>{let e=a;e.chart=n.chart,t("mapDBClick",e)})),n.chart.on("mouseover",(a=>{let e=a;e.chart=n.chart,t("mapHover",e)})),n.chart.on("timelinechanged",(a=>{const{timeLine:e,alladcode:r}=o.chartData;let i=a;if(i.chart=n.chart,"geoTitle"==e.titleType){let t=e.title[a.currentIndex],n=r.filter((a=>a.name.includes(t)))[0],o=a.chart.convertToPixel("geo",[n.lng,n.lat]);i.domPosition=o}t("mapTimeLineChanged",i)})))),n.chart.clear(),n.chart.setOption(e,!0),n.loading=!1,o.chartOption.loading=!1};return L((()=>{n.inited=!0,M((()=>{o.chartOption.geo&&h()}))})),$((()=>{try{if(n.loading)return;n.chart.clear(),n.chart.dispose()}catch{tConsolei18n("error","echartsDestory","error.echartsDestory")}})),(a,e)=>{const s=E("TuiLoaderPanel");return l(),N(s,{class:"tui-echarts-map-wrap",loading:n.loading,inited:n.inited,loadingOpacity:.5},{default:R((()=>[n.inited?(l(),p("div",{key:0,class:S(`echarts-map chart-map-${i} ${n.loading?"map-loading":""}`),ref_key:"mapRef",ref:r},null,2)):b("",!0),c.value?(l(),p("div",H,[(l(!0),p(V,null,J(o.chartData.nav.data,((a,e)=>(l(),p("div",{class:"item",onClick:r=>((a,e)=>{const{alladcode:r,initChart:n,nav:i}=o.chartData,c=i.data;let l=a;c[c.length-1].name!=a.name&&(l.componentType="mapNav",t("mapClick",l),c.splice(e+1,c.length-e+1))})(a,e),key:e},[y("span",U,z(a.name),1)],8,Q)))),128)),e[0]||(e[0]=y("i",{class:"svg-icon svg-map"},null,-1))])):b("",!0)])),_:1},8,["loading","inited"])}}});export{W as default};
+import{nextTick as y,markRaw as Q,inject as W,ref as Z,shallowRef as I,reactive as ee,computed as T,watch as b,onMounted as te,onBeforeUnmount as ae,resolveComponent as ie,resolveDirective as re,createBlock as oe,openBlock as C,withCtx as ne,withDirectives as le,createElementBlock as D,createCommentVNode as ue,createElementVNode as B,normalizeStyle as x,normalizeClass as ce,unref as N,Fragment as se,renderList as de,toDisplayString as fe}from"vue";import{cidGen as pe,cssVarGen as ve}from"@techui/scifi";import{tEvent as me,tStr as ge,tType as j}from"@techui/utils";import*as U from"echarts";const he=(e,a,t,i,l)=>{if(!e.value)return;const r=(a,t)=>{e.value&&e.value.on(a,t)};r("click",me.debounce((t=>{let l,r=t;if(t.value&&!a.chartOption.geo3D)l=e.value.convertToPixel("geo",[t.value[0],t.value[1]]),r.domPosition=l;else if("geo"==t.componentType&&t.event?.offsetX){const{offsetX:a,offsetY:i}=t.event;l=e.value.convertFromPixel("geo",[a,i]),r.coordPosition=l}i("chartClick",r,t)}),500,!0)),r("dblclick",(e=>i("chartDblClick",e))),r("mousedown",(e=>i("chartMouseDown",e))),r("mouseup",(e=>i("chartMouseUp",e))),r("mouseover",(e=>i("chartMouseOver",e))),r("globalout",(e=>i("chartGlobalOut",e))),r("geoRoam",(e=>i("chartGeoRoam",e))),r("timelinechanged",(t=>{const{allAreaCodes:l,chartOption:{timeline:r}}=a;let o=t;if("geoTitle"==r.titleType){let a=r.data[t.currentIndex],i=l.find((e=>e.name.includes(a))),n=e.value.convertToPixel("geo",[i.lng,i.lat]);o.domPosition=n,o.current=i}i("chartTimelinechanged",o)})),r("rendered",(()=>{e.value&&"rendered"===a.t3DShadowUpdate&&P(l),i("chartRendered")})),r("finished",(()=>{e.value&&("finished"===a.t3DShadowUpdate&&P(l),i("chartFinished"),i("update:loading",!1),t.loading=!1,t.inited=!0)}))},P=e=>{e.value},be=e=>{e.value&&e.value.resize()},ye=e=>e.value,Oe=(e,a,t)=>{e.value&&e.value.setOption(a,t)},Ce=e=>{e.value&&e.value.clear()},ke=e=>{if(e.value)try{const a=e.value.getOption();a.geo&&a.geo[0]&&(a.geo[0].roam=!0,a.geo[0].zoom=1,a.geo[0].center=null,e.value.setOption(a,!1))}catch(e){}},G=(e,a)=>{try{return!!a&&(U.registerMap(e,a),!0)}catch(e){return!1}},we=async(e,a,t,i,l,r)=>{if(e.value)try{if(F(a),a.value)return;if(!G(t.mapName,t.geoJsonData))return;await y(),a.value=Q(U.init(e.value,"eTheme",{...t.initOptions,notMerge:!1})),l("chartInit",a.value),a.value.setOption(t.chartOption),r(),await y(),a.value&&l("chartReady",a.value)}catch(e){}},ze=(e,a,t,i,l=!1)=>{e.value&&(e.value.setOption(a,l),t.loading=!1,i("update:loading",!1),i("chartUpdate"))},F=e=>{e.value&&(e.value.dispose(),e.value=null)},Te=["onClick"],De={class:"breadcrumb-text"},E="TuiEchartsMap",Se=Object.assign({name:E},{__name:"tuiEchartsMap",props:{width:[Number,String],height:[Number,String],chartOption:{type:Object,required:!0},geoJsonData:{type:Object,required:!0},allAreaCodes:Object,mapName:{type:String,required:!0},initOptions:{type:Object,default:()=>({})},loading:{type:Boolean,default:!0},initT3DShadow:{type:Boolean,default:!1},t3DShadowUpdate:{type:String,default:"finished",validator:e=>["rendered","finished"].includes(e)},initHold:{type:Boolean,default:!1},dataOpacity:Number,dataBlur:Number,initDelay:{type:Number,default:0},resizeObserver:{type:String,default:"global",validator:e=>["self","global","none"].includes(e)},updateReplace:{type:Boolean,default:!0},enableBreadcrumb:{type:Boolean,default:!1},breadcrumbConfig:{type:Object,default:()=>({data:[{code:1e5,name:"全国"}],position:{top:"5%",left:"5%"}})}},emits:["chartClick","chartDblClick","chartMouseDown","chartMouseUp","chartMouseOver","chartGlobalOut","chartInit","chartReady","chartRendered","chartFinished","chartGeoRoam","chartUpdate","chartTimelinechanged","breadcrumbClick","update:loading"],setup(e,{expose:a,emit:t}){const{$gT3D:i,$gTheme:l,$optResizeCounter:r,initResizeBy:o}=W("$global"),n=o(),u=pe(E),s="echart_map_"+ge.rdm(),c=Z(null),d=I(null);let p=null;const m=e,h=t,v=ee({loading:!0,inited:!1,resizing:!0}),g=T((()=>m.breadcrumbConfig?.data||[])),f=T((()=>{let e=m.breadcrumbConfig?.position||{},a={};for(let t in e)"number"==typeof e[t]?a[t]=e[t]+"px":a[t]=e[t];return a})),O=async()=>{await we(c,d,m,0,h,k,m.updateReplace)},w=()=>{ze(d,m.chartOption,v,h,m.updateReplace)},k=()=>{he(d,m,v,h,c)},z=()=>{F(d)},R=()=>{be(d)},S=T((()=>ve("cpt-echart-map",{...m.width&&{width:j.join("number",m.width,"px")},...m.height&&{height:j.join("number",m.height,"px")},...m.dataOpacity&&{opa:m.dataOpacity},...m.dataBlur&&{blur:m.dataBlur+"px"}})));b((()=>m.geoJsonData),(()=>{d.value&&(G(m.mapName,m.geoJsonData),y((()=>{w()})))}),{deep:!0}),b((()=>m.initHold),(e=>{e||O()})),b((()=>m.chartOption),(()=>{d.value&&y((()=>{w()}))}),{deep:!0}),b((()=>m.loading),(e=>{void 0!==e&&(v.loading=e)}),{immediate:!0}),b((()=>l.value),(e=>{d.value&&d.value.setTheme("eTheme")})),b((()=>r.value),((e,a)=>{"root"==n.value(m.resizeObserver)&&e>a&&M()}));const M=async()=>{v.resizing=!0,R(),await y(),setTimeout((()=>{v?.resizing&&(v.resizing=!1)}),500)};return te((()=>{m.initHold||(m.initDelay>0?p=setTimeout((()=>{p=null,c.value&&O()}),m.initDelay):y((()=>{O()})))})),ae((()=>{p&&(clearTimeout(p),p=null),z()})),a({resize:R,getChart:()=>ye(d),setOption:(e,a)=>{Oe(d,e,a)},clear:()=>{Ce(d)},resetMapView:()=>{ke(d)},dispose:z}),(a,t)=>{const i=ie("TuiLoaderPanel"),l=re("tui-resize");return C(),oe(i,{loading:v.loading,inited:v.inited},{default:ne((()=>[le(B("div",{ref_key:"mapRef",ref:c,class:ce(["tui-echarts-map",{"is-resizing":v.resizing}]),style:x(S.value)},null,6),[[l,{callback:M,uid:s,cid:N(u),disabled:"self"!=N(n)(e.resizeObserver)}]]),e.enableBreadcrumb&&g.value.length>0?(C(),D("div",{key:0,class:"tui-map-breadcrumb",style:x(f.value)},[(C(!0),D(se,null,de(g.value,((e,a)=>(C(),D("div",{key:`${e.code}-${a}`,class:"breadcrumb-item",onClick:t=>((e,a)=>{const t=g.value.slice(0,a+1);h("breadcrumbClick",{item:e,index:a,breadcrumb:t,chart:d.value})})(e,a)},[B("span",De,fe(e.name),1)],8,Te)))),128)),t[0]||(t[0]=B("i",{class:"tui-icon ti-map breadcrumb-icon"},null,-1))],4)):ue("",!0)])),_:1},8,["loading","inited"])}}});export{Se as default};

package/index.js

@@ -1,3 +1,4 @@
+import "@techui/icons";
 import tuiLocales from "@techui/locales";
 import "./dist/index.css";
 import { dynamicEcharts, toComps, toDirective, toGlobal, toRoot } from "./dist/index.js";
@@ -48,8 +49,7 @@ import init, {
 } from './core/core.js';
 
 export {
-  adptCalc, bar3DPathGen, cidGen, cidVaild, coreConsoleError, coreConsoleInfo, coreConsoleWarn,
-  floatInfo, getEnv, getVer,
+  adptCalc, bar3DPathGen, cidGen, cidVaild, coreConsoleError, coreConsoleInfo, coreConsoleWarn, cssVarGen, floatInfo, getEnv, getVer,
   md5Enc, openDec, openEnc, pieArcPathGen,
 
   //button

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@techui/scifi",
-  "version": "0.0.1-alpha.3",
+  "version": "0.0.3-alpha.1",
   "description": "TechUI Scifi is a sci-fi SVG component library developed based on Vue3. It uses dynamically calculated SVG elements to generate a variety of cool, futuristic, and technological components.",
   "author": "aYin <ayin86cn@gmail.com> <wechat:jay1986cn>",
   "homepage": "https://techui.net",
@@ -41,6 +41,7 @@
   ],
   
   "dependencies": {
+    "@techui/icons": "*",
     "@techui/colors": "*",
     "@techui/lessmixins": "*",
     "@techui/locales": "*",