@gct-paas/core-components 0.1.5-dev.4
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/CHANGELOG.md +14 -0
- package/LICENSE +21 -0
- package/README.md +1 -0
- package/dist/IconNext-Cz0XmLgr.js +1 -0
- package/dist/index.min.css +2 -0
- package/dist/loader.esm.min.js +1 -0
- package/dist/types-Ct3W9C4R.js +1 -0
- package/es/_virtual/_plugin-vue_export-helper.mjs +8 -0
- package/es/assets-svg-icon/assets-svg-icon.css +188 -0
- package/es/assets-svg-icon/assets-svg-icon.d.ts +134 -0
- package/es/assets-svg-icon/assets-svg-icon.mjs +167 -0
- package/es/assets-svg-icon/request.d.ts +2 -0
- package/es/assets-svg-icon/request.mjs +68 -0
- package/es/assets-svg-icon/utils.d.ts +9 -0
- package/es/assets-svg-icon/utils.mjs +23 -0
- package/es/assets-svg-icon/validate.d.ts +4 -0
- package/es/assets-svg-icon/validate.mjs +29 -0
- package/es/icon-next/data/icons.data.d.ts +5 -0
- package/es/icon-next/hooks/useIconAsset.d.ts +16 -0
- package/es/icon-next/hooks/useIconAsset.mjs +36 -0
- package/es/icon-next/hooks/useIconPark.d.ts +16 -0
- package/es/icon-next/hooks/useIconPark.mjs +52 -0
- package/es/icon-next/hooks/useIconPlatform.d.ts +8 -0
- package/es/icon-next/hooks/useIconPlatform.mjs +43 -0
- package/es/icon-next/index.d.ts +43 -0
- package/es/icon-next/index.mjs +10 -0
- package/es/icon-next/src/IconNext.vue.d.ts +40 -0
- package/es/icon-next/src/IconNext.vue.mjs +7 -0
- package/es/icon-next/src/IconNext.vue_vue_type_script_setup_true_name_IconNext_lang.mjs +113 -0
- package/es/icon-next/src/IconNext.vue_vue_type_style_index_0_scoped_0940cc40_lang.css +18 -0
- package/es/icon-next/types/index.d.ts +17 -0
- package/es/icon-next/types/index.mjs +11 -0
- package/es/index.d.ts +10 -0
- package/es/index.mjs +17 -0
- package/es/loader.d.ts +2 -0
- package/es/svg-icon/svg-icon.vue.d.ts +40 -0
- package/es/svg-icon/svg-icon.vue.mjs +6 -0
- package/es/svg-icon/svg-icon.vue_vue_type_script_setup_true_name_SvgIcon_lang.mjs +52 -0
- package/es/svg-icon/svg-icon.vue_vue_type_style_index_0_lang.css +73 -0
- package/es/types/index.d.ts +1 -0
- package/es/wujie-container/wujie-container.css +74 -0
- package/es/wujie-container/wujie-container.d.ts +11 -0
- package/es/wujie-container/wujie-container.mjs +61 -0
- package/package.json +68 -0
package/CHANGELOG.md
ADDED
package/LICENSE
ADDED
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2025 冠骋信息技术有限公司
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{n as e,t}from"./types-Ct3W9C4R.js";import{VITE_MINIO_PATH as o}from"@gct-paas/core";import{computed as l,createBlock as s,createElementBlock as r,defineComponent as n,normalizeClass as a,normalizeStyle as c,openBlock as i,unref as u}from"vue";import{IconPark as p}from"@icon-park/vue-next/es/all";var v=/* @__PURE__ */(e=>{const t=e.__vccOpts||e;for(const[o,l]of[["__scopeId","data-v-0940cc40"]])t[o]=l;return t})(/* @__PURE__ */n({__name:"IconNext",props:{value:{type:[String,Object],required:!0},color:{type:String,default:"#FFFFFF"},background:{type:String,default:"transparent"},size:{type:Number,default:24}},setup(n){const v=n,y=l(()=>{const e=v.value;if(e)return e.includes(":")?e.split(":")[0]:e.startsWith("preset-")?t.Preset:void 0}),g=l(()=>{const e=v.value;if(e)return e.includes(":")?e.split(":")[1]:v.value}),z=l(()=>{return`url('${e=g.value,e?`${o}${e.startsWith("/")?"":"/"}${e}`:e}')`;var e});return(o,l)=>y.value===u(t).IconPark?(i(),s(u(p),{key:`${g.value}-${n.size}`,type:g.value,style:c({"--color":n.color,"--bg-color":n.background}),class:"icon-next",size:n.size},null,8,["type","style","size"])):y.value===u(t).Preset||y.value===u(t).Platform?(i(),s(e,{key:1,name:g.value,style:c({"--color":n.color,"--bg-color":n.background}),class:"icon-next",size:n.size},null,8,["name","style","size"])):y.value===u(t).Asset?(i(),r("i",{key:2,class:"icon-next",style:c({"--size":n.size+"px","--bg-image":z.value})},null,4)):y.value===u(t).GctIconFont?(i(),r("i",{key:3,class:a([`gct-iconfont ${g.value}`,"icon-next"]),style:c({fontSize:n.size+"px",lineHeight:1,"--color":n.color,"--bg-color":n.background,"--size":n.size+"px"})},null,6)):(i(),r("i",{key:4,class:a([`iconfont ${g.value}`,"icon-next"]),style:c({fontSize:n.size+"px",lineHeight:1,"--color":n.color,"--bg-color":n.background,"--size":n.size+"px"})},null,6))}}));export{v as default};
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
.gct-svg-icon{fill:currentColor;vertical-align:-.15em;display:inline-block;overflow:hidden}.gct-svg-icon--spin{animation:1s linear infinite loadingCircle}.gct-assets-svg-icon{contain:strict;fill:currentColor;width:1em;height:1em;display:inline-block;box-sizing:content-box!important}.gct-assets-svg-icon .ionicon{stroke:currentColor}.gct-assets-svg-icon .ionicon-fill-none{fill:none}.gct-assets-svg-icon .ionicon-stroke-width{stroke-width:var(--ionicon-stroke-width,32px)}.gct-assets-svg-icon .icon-inner,.gct-assets-svg-icon .ionicon,.gct-assets-svg-icon svg{width:100%;height:100%;display:block}@supports (background:-webkit-named-image(i)){.gct-assets-svg-icon.icon-rtl .icon-inner{transform:scaleX(-1)}}.gct-assets-svg-icon.icon-rtl .icon-inner,.gct-assets-svg-icon.flip-rtl[dir=rtl] .icon-inner{transform:scaleX(-1)}@supports selector(:dir(rtl)){.gct-assets-svg-icon.flip-rtl:is(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)) .icon-inner{transform:scaleX(-1)}.gct-assets-svg-icon.flip-rtl:not(:lang(ae),:lang(ar),:lang(arc),:lang(bcc),:lang(bqi),:lang(ckb),:lang(dv),:lang(fa),:lang(glk),:lang(he),:lang(ku),:lang(mzn),:lang(nqo),:lang(pnb),:lang(ps),:lang(sd),:lang(ug),:lang(ur),:lang(yi)) .icon-inner{transform:scaleX(1)}}.gct-assets-svg-icon.icon-small{font-size:1.125rem!important}.gct-assets-svg-icon.icon-large{font-size:2rem!important}.gct-assets-svg-icon.ion-color{color:var(--ion-color-base)!important}.gct-assets-svg-icon.ion-color-primary{--ion-color-base:var(--ion-color-primary,#3880ff)!important}.gct-assets-svg-icon.ion-color-secondary{--ion-color-base:var(--ion-color-secondary,#3dc2ff)!important}.gct-assets-svg-icon.ion-color-tertiary{--ion-color-base:var(--ion-color-tertiary,#5260ff)!important}.gct-assets-svg-icon.ion-color-success{--ion-color-base:var(--ion-color-success,#2dd36f)!important}.gct-assets-svg-icon.ion-color-warning{--ion-color-base:var(--ion-color-warning,#ffc409)!important}.gct-assets-svg-icon.ion-color-danger{--ion-color-base:var(--ion-color-danger,#eb445a)!important}.gct-assets-svg-icon.ion-color-light{--ion-color-base:var(--ion-color-light,#f4f5f8)!important}.gct-assets-svg-icon.ion-color-medium{--ion-color-base:var(--ion-color-medium,#92949c)!important}.gct-assets-svg-icon.ion-color-dark{--ion-color-base:var(--ion-color-dark,#222428)!important}.gct-wujie-container{width:100%;height:100%}.gct-wujie-container .__vue-devtools-container__{display:none}.gct-wujie-container iframe{border:0}.icon-next[data-v-0940cc40]{color:var(--color);background-color:var(--bg-color);align-items:center;transition:all .3s;display:inline-flex}.icon-next>svg[data-v-0940cc40]{transform:translateY(1px)}i.icon-next[data-v-0940cc40]{height:var(--size);width:var(--size);background-image:var(--bg-image);background-position:50%;background-repeat:no-repeat;background-size:contain}
|
|
2
|
+
/*$vite$:1*/
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{n as t,t as e}from"./types-Ct3W9C4R.js";import{cssLoader as r,getToken as n,useNamespace as o,useUserStore as i}from"@gct-paas/core";import{computed as a,createVNode as u,defineAsyncComponent as c,defineComponent as l,getCurrentInstance as s,h as f,mergeProps as p,nextTick as d,onMounted as h,onUnmounted as v,ref as y,resolveComponent as m,useAttrs as g,watch as w}from"vue";import{bus as b,destroyApp as E,preloadApp as L,setupApp as _,startApp as O}from"wujie";import{iconsNames as j}from"@gct-paas/platform-icons";import"@icon-park/vue-next/icons.json";var x,S=t=>"string"==typeof t,P=t=>{if(1===t.nodeType){if("script"===t.nodeName.toLowerCase())return!1;for(let e=0;e<t.attributes.length;e++){const r=t.attributes[e].name;if(S(r)&&0===r.toLowerCase().indexOf("on"))return!1}for(let e=0;e<t.childNodes.length;e++)if(!P(t.childNodes[e]))return!1}return!0},A=/* @__PURE__ */new Map,U=/* @__PURE__ */new Map;function I(t){return A.set(t,""),""}var M=t=>t?{"ion-color":!0,[`ion-color-${t}`]:!0}:null,N=/* @__PURE__ */l({name:"AssetsSvgIcon",props:{color:{type:String},flipRtl:{type:Boolean},src:{type:String,required:!0},size:{type:String},lazy:{type:Boolean,default:!1},sanitize:{type:Boolean,default:!0}},setup(t){const e=o("assets-svg-icon"),r=s();let n;const i=y(!1),u=y(void 0),c=y(!1),l=()=>{if("undefined"!=typeof window&&c.value&&t.src){const n=(e=t.src,S(e)&&((r=e=e.trim()).length>0&&/(\/|\.)/.test(r))?e:null);n&&(A.has(n)?u.value=A.get(n):((t,e)=>U.get(t)||("undefined"!=typeof fetch&&"undefined"!=typeof document?(t=>t.startsWith("data:image/svg+xml"))(t)&&(t=>-1!==t.indexOf(";utf8,"))(t)?Promise.resolve(function(t){x||(x=new DOMParser);const e=x.parseFromString(t,"text/html").querySelector("svg");if(e)return A.set(t,e.outerHTML),e.outerHTML;throw new Error(`Could not parse svg from ${t}`)}(t)):function(t,e){const r=fetch(t).then(r=>r.text().then(r=>{r&&!1!==e&&(r=(t=>{const e=document.createElement("div");e.innerHTML=t;for(let n=e.childNodes.length-1;n>=0;n--)"svg"!==e.childNodes[n].nodeName.toLowerCase()&&e.removeChild(e.childNodes[n]);const r=e.firstElementChild;if(r&&"svg"===r.nodeName.toLowerCase()){const t=r.getAttribute("class")||"";if(r.setAttribute("class",(t+" s-ion-icon").trim()),P(r))return e.innerHTML}return""})(r));const n=r||"";return A.set(t,n),n}).catch(()=>I(t))).catch(()=>I(t));return U.set(t,r),r}(t,e):Promise.resolve(I(t))))(n,t.sanitize).then(()=>{u.value=A.get(n)}),i.value=!0)}var e,r};return h(()=>{const e=null==r?void 0:r.vnode.el;e&&((e,r,o)=>{if(!Boolean("undefined"!=typeof window&&t.lazy&&window.IntersectionObserver))return o();const i=n=new window.IntersectionObserver(t=>{var e;(null===(e=t[0])||void 0===e?void 0:e.isIntersecting)&&(i.disconnect(),n=void 0,o())},{rootMargin:"50px"});i.observe(e)})(e,0,()=>{c.value=!0,l()}),d(()=>{i.value||l()})}),v(()=>{n&&(n.disconnect(),n=void 0)}),w(()=>t.src,()=>{l()}),{ns:e,svgContent:u,classes:a(()=>{const{flipRtl:n,size:o,color:i}=t,a=null==r?void 0:r.vnode.el,u=n;return{...M(i),[`icon-${o}`]:!!o,"flip-rtl":u,"icon-rtl":u&&(c=a,c&&""!==c.dir?"rtl"===c.dir.toLowerCase():"rtl"===(null===(l=document)||void 0===l?void 0:l.dir.toLowerCase())),[e.b()]:!0};var c,l})}},render(){const{svgContent:t,classes:e}=this;return u("div",{role:"img",class:e},["undefined"!=typeof window&&t?u("div",{class:"icon-inner",innerHTML:t},null):u("div",{class:"icon-inner"},null)])}});function F(t){return F="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t},F(t)}function k(t,e){var r=Object.keys(t);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(t);e&&(n=n.filter(function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})),r.push.apply(r,n)}return r}function C(t){for(var e=1;e<arguments.length;e++){var r=null!=arguments[e]?arguments[e]:{};e%2?k(Object(r),!0).forEach(function(e){$(t,e,r[e])}):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(r)):k(Object(r)).forEach(function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(r,e))})}return t}function T(){T=function(){return e};var t,e={},r=Object.prototype,n=r.hasOwnProperty,o=Object.defineProperty||function(t,e,r){t[e]=r.value},i="function"==typeof Symbol?Symbol:{},a=i.iterator||"@@iterator",u=i.asyncIterator||"@@asyncIterator",c=i.toStringTag||"@@toStringTag";function l(t,e,r){return Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}),t[e]}try{l({},"")}catch(t){l=function(t,e,r){return t[e]=r}}function s(t,e,r,n){var i=e&&e.prototype instanceof m?e:m,a=Object.create(i.prototype);return o(a,"_invoke",{value:x(t,r,new U(n||[]))}),a}function f(t,e,r){try{return{type:"normal",arg:t.call(e,r)}}catch(t){return{type:"throw",arg:t}}}e.wrap=s;var p="suspendedStart",d="suspendedYield",h="executing",v="completed",y={};function m(){}function g(){}function w(){}var b={};l(b,a,function(){return this});var E=Object.getPrototypeOf,L=E&&E(E(I([])));L&&L!==r&&n.call(L,a)&&(b=L);var _=w.prototype=m.prototype=Object.create(b);function O(t){["next","throw","return"].forEach(function(e){l(t,e,function(t){return this._invoke(e,t)})})}function j(t,e){function r(o,i,a,u){var c=f(t[o],t,i);if("throw"!==c.type){var l=c.arg,s=l.value;return s&&"object"==F(s)&&n.call(s,"__await")?e.resolve(s.__await).then(function(t){r("next",t,a,u)},function(t){r("throw",t,a,u)}):e.resolve(s).then(function(t){l.value=t,a(l)},function(t){return r("throw",t,a,u)})}u(c.arg)}var i;o(this,"_invoke",{value:function(t,n){function o(){return new e(function(e,o){r(t,n,e,o)})}return i=i?i.then(o,o):o()}})}function x(e,r,n){var o=p;return function(i,a){if(o===h)throw Error("Generator is already running");if(o===v){if("throw"===i)throw a;return{value:t,done:!0}}for(n.method=i,n.arg=a;;){var u=n.delegate;if(u){var c=S(u,n);if(c){if(c===y)continue;return c}}if("next"===n.method)n.sent=n._sent=n.arg;else if("throw"===n.method){if(o===p)throw o=v,n.arg;n.dispatchException(n.arg)}else"return"===n.method&&n.abrupt("return",n.arg);o=h;var l=f(e,r,n);if("normal"===l.type){if(o=n.done?v:d,l.arg===y)continue;return{value:l.arg,done:n.done}}"throw"===l.type&&(o=v,n.method="throw",n.arg=l.arg)}}}function S(e,r){var n=r.method,o=e.iterator[n];if(o===t)return r.delegate=null,"throw"===n&&e.iterator.return&&(r.method="return",r.arg=t,S(e,r),"throw"===r.method)||"return"!==n&&(r.method="throw",r.arg=/* @__PURE__ */new TypeError("The iterator does not provide a '"+n+"' method")),y;var i=f(o,e.iterator,r.arg);if("throw"===i.type)return r.method="throw",r.arg=i.arg,r.delegate=null,y;var a=i.arg;return a?a.done?(r[e.resultName]=a.value,r.next=e.nextLoc,"return"!==r.method&&(r.method="next",r.arg=t),r.delegate=null,y):a:(r.method="throw",r.arg=/* @__PURE__ */new TypeError("iterator result is not an object"),r.delegate=null,y)}function P(t){var e={tryLoc:t[0]};1 in t&&(e.catchLoc=t[1]),2 in t&&(e.finallyLoc=t[2],e.afterLoc=t[3]),this.tryEntries.push(e)}function A(t){var e=t.completion||{};e.type="normal",delete e.arg,t.completion=e}function U(t){this.tryEntries=[{tryLoc:"root"}],t.forEach(P,this),this.reset(!0)}function I(e){if(e||""===e){var r=e[a];if(r)return r.call(e);if("function"==typeof e.next)return e;if(!isNaN(e.length)){var o=-1,i=function r(){for(;++o<e.length;)if(n.call(e,o))return r.value=e[o],r.done=!1,r;return r.value=t,r.done=!0,r};return i.next=i}}throw new TypeError(F(e)+" is not iterable")}return g.prototype=w,o(_,"constructor",{value:w,configurable:!0}),o(w,"constructor",{value:g,configurable:!0}),g.displayName=l(w,c,"GeneratorFunction"),e.isGeneratorFunction=function(t){var e="function"==typeof t&&t.constructor;return!!e&&(e===g||"GeneratorFunction"===(e.displayName||e.name))},e.mark=function(t){return Object.setPrototypeOf?Object.setPrototypeOf(t,w):(t.__proto__=w,l(t,c,"GeneratorFunction")),t.prototype=Object.create(_),t},e.awrap=function(t){return{__await:t}},O(j.prototype),l(j.prototype,u,function(){return this}),e.AsyncIterator=j,e.async=function(t,r,n,o,i){void 0===i&&(i=Promise);var a=new j(s(t,r,n,o),i);return e.isGeneratorFunction(r)?a:a.next().then(function(t){return t.done?t.value:a.next()})},O(_),l(_,c,"Generator"),l(_,a,function(){return this}),l(_,"toString",function(){return"[object Generator]"}),e.keys=function(t){var e=Object(t),r=[];for(var n in e)r.push(n);return r.reverse(),function t(){for(;r.length;){var n=r.pop();if(n in e)return t.value=n,t.done=!1,t}return t.done=!0,t}},e.values=I,U.prototype={constructor:U,reset:function(e){if(this.prev=0,this.next=0,this.sent=this._sent=t,this.done=!1,this.delegate=null,this.method="next",this.arg=t,this.tryEntries.forEach(A),!e)for(var r in this)"t"===r.charAt(0)&&n.call(this,r)&&!isNaN(+r.slice(1))&&(this[r]=t)},stop:function(){this.done=!0;var t=this.tryEntries[0].completion;if("throw"===t.type)throw t.arg;return this.rval},dispatchException:function(e){if(this.done)throw e;var r=this;function o(n,o){return u.type="throw",u.arg=e,r.next=n,o&&(r.method="next",r.arg=t),!!o}for(var i=this.tryEntries.length-1;i>=0;--i){var a=this.tryEntries[i],u=a.completion;if("root"===a.tryLoc)return o("end");if(a.tryLoc<=this.prev){var c=n.call(a,"catchLoc"),l=n.call(a,"finallyLoc");if(c&&l){if(this.prev<a.catchLoc)return o(a.catchLoc,!0);if(this.prev<a.finallyLoc)return o(a.finallyLoc)}else if(c){if(this.prev<a.catchLoc)return o(a.catchLoc,!0)}else{if(!l)throw Error("try statement without catch or finally");if(this.prev<a.finallyLoc)return o(a.finallyLoc)}}}},abrupt:function(t,e){for(var r=this.tryEntries.length-1;r>=0;--r){var o=this.tryEntries[r];if(o.tryLoc<=this.prev&&n.call(o,"finallyLoc")&&this.prev<o.finallyLoc){var i=o;break}}i&&("break"===t||"continue"===t)&&i.tryLoc<=e&&e<=i.finallyLoc&&(i=null);var a=i?i.completion:{};return a.type=t,a.arg=e,i?(this.method="next",this.next=i.finallyLoc,y):this.complete(a)},complete:function(t,e){if("throw"===t.type)throw t.arg;return"break"===t.type||"continue"===t.type?this.next=t.arg:"return"===t.type?(this.rval=this.arg=t.arg,this.method="return",this.next="end"):"normal"===t.type&&e&&(this.next=e),y},finish:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var r=this.tryEntries[e];if(r.finallyLoc===t)return this.complete(r.completion,r.afterLoc),A(r),y}},catch:function(t){for(var e=this.tryEntries.length-1;e>=0;--e){var r=this.tryEntries[e];if(r.tryLoc===t){var n=r.completion;if("throw"===n.type){var o=n.arg;A(r)}return o}}throw Error("illegal catch attempt")},delegateYield:function(e,r,n){return this.delegate={iterator:I(e),resultName:r,nextLoc:n},"next"===this.method&&(this.arg=t),y}},e}function Q(t,e,r,n,o,i,a){try{var u=t[i](a),c=u.value}catch(t){return void r(t)}u.done?e(c):Promise.resolve(c).then(n,o)}function $(t,e,r){return(e=function(t){var e=function(t){if("object"!=F(t)||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var r=e.call(t,"string");if("object"!=F(r))return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return String(t)}(t);return"symbol"==F(e)?e:e+""}(e))in t?Object.defineProperty(t,e,{value:r,enumerable:!0,configurable:!0,writable:!0}):t[e]=r,t}var J=l({name:"WujieVue",props:{width:{type:String,default:""},height:{type:String,default:""},name:{type:String,default:""},loading:{type:HTMLElement,default:void 0},url:{type:String,default:""},sync:{type:Boolean,default:void 0},prefix:{type:Object,default:void 0},alive:{type:Boolean,default:void 0},props:{type:Object,default:void 0},attrs:{type:Object,default:void 0},replace:{type:Function,default:void 0},fetch:{type:Function,default:void 0},fiber:{type:Boolean,default:void 0},degrade:{type:Boolean,default:void 0},plugins:{type:Array,default:null},beforeLoad:{type:Function,default:null},beforeMount:{type:Function,default:null},afterMount:{type:Function,default:null},beforeUnmount:{type:Function,default:null},afterUnmount:{type:Function,default:null},activated:{type:Function,default:null},deactivated:{type:Function,default:null},loadError:{type:Function,default:null},style:{type:Object,default:void 0},iframeAddEventListeners:{type:Array,default:null},iframeOnEvents:{type:Array,default:null}},data:function(){return{startAppQueue:Promise.resolve()}},mounted:function(){var t=this;this.name&&(window.__WUJIE_QUEUE?window.__WUJIE_QUEUE[this.name]?this.startAppQueue=window.__WUJIE_QUEUE[this.name]:window.__WUJIE_QUEUE[this.name]=this.startAppQueue:window.__WUJIE_QUEUE=$({},this.name,this.startAppQueue)),b.$onAll(this.handleEmit),this.execStartApp(),this.$watch(function(){return t.name+t.url},function(){return t.execStartApp()})},methods:{handleEmit:function(t){for(var e=arguments.length,r=new Array(e>1?e-1:0),n=1;n<e;n++)r[n-1]=arguments[n];this.$emit.apply(this,[t].concat(r))},startApp:function(){var t,e=this;return(t=/* @__PURE__ */T().mark(function t(){return T().wrap(function(t){for(;;)switch(t.prev=t.next){case 0:return t.prev=0,t.next=3,O({name:e.name,url:e.url,el:e.$refs.wujie,loading:e.loading,alive:e.alive,fetch:e.fetch,props:e.props,attrs:e.attrs,replace:e.replace,sync:e.sync,prefix:e.prefix,fiber:e.fiber,degrade:e.degrade,plugins:e.plugins,beforeLoad:e.beforeLoad,beforeMount:e.beforeMount,afterMount:e.afterMount,beforeUnmount:e.beforeUnmount,afterUnmount:e.afterUnmount,activated:e.activated,deactivated:e.deactivated,loadError:e.loadError,iframeAddEventListeners:e.iframeAddEventListeners,iframeOnEvents:e.iframeOnEvents});case 3:t.next=8;break;case 5:t.prev=5,t.t0=t.catch(0),console.log(t.t0);case 8:case"end":return t.stop()}},t,null,[[0,5]])}),function(){var e=this,r=arguments;return new Promise(function(n,o){var i=t.apply(e,r);function a(t){Q(i,n,o,a,u,"next",t)}function u(t){Q(i,n,o,a,u,"throw",t)}a(void 0)})})()},execStartApp:function(){this.startAppQueue=this.startAppQueue.then(this.startApp),window.__WUJIE_QUEUE[this.name]=this.startAppQueue},destroy:function(){E(this.name)}},beforeDestroy:function(){b.$offAll(this.handleEmit)},render:function(){return f("div",{style:C({width:this.width,height:this.height},this.style),ref:"wujie"})}});J.setupApp=_,J.preloadApp=L,J.bus=b,J.destroyApp=E,J.install=function(t){t.component("WujieVue",J)};var{destroyApp:W}=J,B=/* @__PURE__ */l({name:"WuJieContainer",props:{wuJieName:{type:String,required:!0}},setup(t){const e=o("wujie-container"),r=g();function c(t){Object.defineProperty(t,"pSystem",{get:()=>window.System}),Object.defineProperty(t,"_gct",{get:()=>window._gct}),Object.defineProperty(t,"_api",{get:()=>window._api})}function l(t){console.debug("beforeMount System",t.System),console.debug("beforeMount _gct",t._gct),console.debug("beforeMount _api",t._api)}function s(t){console.debug("loadError",t.System)}const{userInfo:f}=i(),d=n(),h=a(()=>({appInfo:_gct.store.appInfo,userInfo:f,token:d,...r.props??{}}));return v(()=>{!0!==r.alive&&W(t.wuJieName)}),()=>u(m("wujieVue"),p({class:e.b(),name:t.wuJieName,beforeLoad:c,beforeMount:l,loadError:s},r,{props:h.value}),null)}}),G=y([]),z=(a(()=>[{id:"IconAsset",name:"资产图标",children:G.value}].filter(t=>{var e;return null===(e=t.children)||void 0===e?void 0:e.length})),y([])),D=(a(()=>[{id:"IconPark",name:"IconPark",children:z.value}]),a(()=>[{id:"medicalCare",name:"医疗器械",icons:H.value},{id:"IconPlatform",name:"平台图标",icons:D.value}]),a(()=>j.filter(t=>/^(icon-platform)/.test(t)).map(t=>{const r=t.replace(/icon-/g,"");return{id:`${e.Platform}:${r}`,name:r,_filter_:[r]}}))),H=a(()=>j.filter(t=>/^(icon-medicalCare)/.test(t)).map(t=>{const r=t.replace(/icon-/g,"");return{id:`${e.Platform}:${r}`,name:t.replace(/icon-medicalCare-/g,""),_filter_:[r]}})),q=c(()=>import("./IconNext-Cz0XmLgr.js")),R={install(e){e.component(N.name,N),e.component(t.name,t),e.component(B.name,B),e.component(q.name||q.__name,q)}},V=new URL("./index.min.css",import.meta.url);r.load(V.href);var Y=R;export{Y as default};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{useNamespace as e}from"@gct-paas/core";import{computed as t,createElementBlock as r,createElementVNode as n,defineComponent as i,normalizeClass as s,normalizeStyle as o,openBlock as a,unref as p}from"vue";var c=["xlink:href"],l=/* @__PURE__ */i({__name:"svg-icon",props:{prefix:{type:String,default:"icon"},name:{type:String,required:!0},size:{type:[Number,String],default:16},spin:{type:Boolean,default:!1}},setup(i){const l=e("svg-icon"),u=i,f=t(()=>`#${u.prefix}-${u.name}`),m=t(()=>{const{size:e}=u;let t=`${e}`;return t=`${t.replace("px","")}px`,{width:t,height:t}});return(e,t)=>(a(),r("svg",{class:s([e.$attrs.class,p(l).b(),i.spin&&p(l).m("spin")]),style:o(m.value),"aria-hidden":"true"},[n("use",{"xlink:href":f.value},null,8,c)],6))}}),u=/* @__PURE__ */function(e){return e.Preset="icon-preset",e.IconPark="icon-park",e.Asset="icon-assert",e.Platform="icon-platform",e.GctIconFont="gct-iconfont",e}({});export{l as n,u as t};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
//#region \0plugin-vue:export-helper
|
|
2
|
+
var _plugin_vue_export_helper_default = (sfc, props) => {
|
|
3
|
+
const target = sfc.__vccOpts || sfc;
|
|
4
|
+
for (const [key, val] of props) target[key] = val;
|
|
5
|
+
return target;
|
|
6
|
+
};
|
|
7
|
+
//#endregion
|
|
8
|
+
export { _plugin_vue_export_helper_default as default };
|
|
@@ -0,0 +1,188 @@
|
|
|
1
|
+
@charset "UTF-8";
|
|
2
|
+
/* stylelint-disable scss/no-global-function-names */
|
|
3
|
+
/* bem('block', 'element', 'modifier') => 'ibiz-block__element--modifier' */
|
|
4
|
+
/**
|
|
5
|
+
* 定义 Block 块
|
|
6
|
+
* @param {String} $block - Block 块名称
|
|
7
|
+
* @example
|
|
8
|
+
* @include b('button') {
|
|
9
|
+
* padding: 10px;
|
|
10
|
+
* }
|
|
11
|
+
*/
|
|
12
|
+
/**
|
|
13
|
+
* 定义 Element 元素
|
|
14
|
+
* @param {String|List} $element - Element 元素名称,支持单个或多个
|
|
15
|
+
* @example
|
|
16
|
+
* @include b('button') {
|
|
17
|
+
* @include e('text') {
|
|
18
|
+
* color: #000;
|
|
19
|
+
* }
|
|
20
|
+
* }
|
|
21
|
+
* // 或传入多个元素
|
|
22
|
+
* @include b('button') {
|
|
23
|
+
* @include e(('text', 'icon')) {
|
|
24
|
+
* margin: 5px;
|
|
25
|
+
* }
|
|
26
|
+
* }
|
|
27
|
+
*/
|
|
28
|
+
/**
|
|
29
|
+
* 定义 Modifier 修饰符
|
|
30
|
+
* @param {String|List} $modifier - Modifier 修饰符名称,支持单个或多个
|
|
31
|
+
* @example
|
|
32
|
+
* @include b('button') {
|
|
33
|
+
* @include m('primary') {
|
|
34
|
+
* background: blue;
|
|
35
|
+
* }
|
|
36
|
+
* }
|
|
37
|
+
* // 或传入多个修饰符
|
|
38
|
+
* @include b('button') {
|
|
39
|
+
* @include m(('primary', 'large')) {
|
|
40
|
+
* background: blue;
|
|
41
|
+
* font-size: 16px;
|
|
42
|
+
* }
|
|
43
|
+
* }
|
|
44
|
+
*/
|
|
45
|
+
/**
|
|
46
|
+
* 定义状态选择器
|
|
47
|
+
* @param {String} $state - 状态名称
|
|
48
|
+
* @example
|
|
49
|
+
* @include b('button') {
|
|
50
|
+
* @include when('disabled') {
|
|
51
|
+
* opacity: 0.5;
|
|
52
|
+
* }
|
|
53
|
+
* }
|
|
54
|
+
*/
|
|
55
|
+
/**
|
|
56
|
+
* 深色主题样式
|
|
57
|
+
* @param {String} $block - Block 块名称
|
|
58
|
+
* @example
|
|
59
|
+
* @include dark('button') {
|
|
60
|
+
* background: #333;
|
|
61
|
+
* color: #fff;
|
|
62
|
+
* }
|
|
63
|
+
*/
|
|
64
|
+
/* stylelint-disable scss/no-global-function-names */
|
|
65
|
+
.gct-assets-svg-icon {
|
|
66
|
+
box-sizing: content-box !important;
|
|
67
|
+
display: inline-block;
|
|
68
|
+
width: 1em;
|
|
69
|
+
height: 1em;
|
|
70
|
+
contain: strict;
|
|
71
|
+
fill: currentcolor;
|
|
72
|
+
}
|
|
73
|
+
.gct-assets-svg-icon .ionicon {
|
|
74
|
+
stroke: currentcolor;
|
|
75
|
+
}
|
|
76
|
+
.gct-assets-svg-icon .ionicon-fill-none {
|
|
77
|
+
fill: none;
|
|
78
|
+
}
|
|
79
|
+
.gct-assets-svg-icon .ionicon-stroke-width {
|
|
80
|
+
stroke-width: var(--ionicon-stroke-width, 32px);
|
|
81
|
+
}
|
|
82
|
+
.gct-assets-svg-icon .icon-inner,
|
|
83
|
+
.gct-assets-svg-icon .ionicon,
|
|
84
|
+
.gct-assets-svg-icon svg {
|
|
85
|
+
display: block;
|
|
86
|
+
width: 100%;
|
|
87
|
+
height: 100%;
|
|
88
|
+
}
|
|
89
|
+
.gct-assets-svg-icon {
|
|
90
|
+
/* Icon RTL
|
|
91
|
+
* -----------------------------------------------------------
|
|
92
|
+
*/
|
|
93
|
+
/**
|
|
94
|
+
* Safari <16.4 incorrectly reports
|
|
95
|
+
* that it supports :dir(rtl) when it does not.
|
|
96
|
+
* This @supports statement lets us target
|
|
97
|
+
* WebKit browsers to apply the RTL fallback.
|
|
98
|
+
* -webkit-named-image only exists on WebKit.
|
|
99
|
+
* For WebKit browsers that do support :dir(rtl)
|
|
100
|
+
* (i.e. Safari >= 16.4) then the :dir(rtl)
|
|
101
|
+
* code farther down on the page will take
|
|
102
|
+
* effect and override this fallback.
|
|
103
|
+
*/
|
|
104
|
+
}
|
|
105
|
+
@supports (background: -webkit-named-image(i)) {
|
|
106
|
+
.gct-assets-svg-icon.icon-rtl .icon-inner {
|
|
107
|
+
transform: scaleX(-1);
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
.gct-assets-svg-icon {
|
|
111
|
+
/**
|
|
112
|
+
* Fallback for browsers that support
|
|
113
|
+
* neither :host-context nor :dir.
|
|
114
|
+
* The icon will not react to dir
|
|
115
|
+
* changes, but it will at least
|
|
116
|
+
* respect the dir on component load.
|
|
117
|
+
*/
|
|
118
|
+
}
|
|
119
|
+
.gct-assets-svg-icon.icon-rtl .icon-inner {
|
|
120
|
+
transform: scaleX(-1);
|
|
121
|
+
}
|
|
122
|
+
.gct-assets-svg-icon {
|
|
123
|
+
/* For Vue components, we use attribute selectors instead of :host-context */
|
|
124
|
+
}
|
|
125
|
+
.gct-assets-svg-icon.flip-rtl[dir=rtl] .icon-inner {
|
|
126
|
+
transform: scaleX(-1);
|
|
127
|
+
}
|
|
128
|
+
@supports selector(:dir(rtl)) {
|
|
129
|
+
.gct-assets-svg-icon.flip-rtl:dir(rtl) .icon-inner {
|
|
130
|
+
transform: scaleX(-1);
|
|
131
|
+
}
|
|
132
|
+
.gct-assets-svg-icon {
|
|
133
|
+
/**
|
|
134
|
+
* This is needed for WebKit otherwise the fallback
|
|
135
|
+
* will always cause the icon to be flipped if the document
|
|
136
|
+
* loads in RTL.
|
|
137
|
+
*/
|
|
138
|
+
}
|
|
139
|
+
.gct-assets-svg-icon.flip-rtl:dir(ltr) .icon-inner {
|
|
140
|
+
transform: scaleX(1);
|
|
141
|
+
}
|
|
142
|
+
}
|
|
143
|
+
.gct-assets-svg-icon {
|
|
144
|
+
/* Icon Sizes
|
|
145
|
+
* -----------------------------------------------------------
|
|
146
|
+
*/
|
|
147
|
+
}
|
|
148
|
+
.gct-assets-svg-icon.icon-small {
|
|
149
|
+
font-size: 1.125rem !important;
|
|
150
|
+
}
|
|
151
|
+
.gct-assets-svg-icon.icon-large {
|
|
152
|
+
font-size: 2rem !important;
|
|
153
|
+
}
|
|
154
|
+
.gct-assets-svg-icon {
|
|
155
|
+
/* Icon Colors
|
|
156
|
+
* -----------------------------------------------------------
|
|
157
|
+
*/
|
|
158
|
+
}
|
|
159
|
+
.gct-assets-svg-icon.ion-color {
|
|
160
|
+
color: var(--ion-color-base) !important;
|
|
161
|
+
}
|
|
162
|
+
.gct-assets-svg-icon.ion-color-primary {
|
|
163
|
+
--ion-color-base: var(--ion-color-primary, #3880ff) !important;
|
|
164
|
+
}
|
|
165
|
+
.gct-assets-svg-icon.ion-color-secondary {
|
|
166
|
+
--ion-color-base: var(--ion-color-secondary, #3dc2ff) !important;
|
|
167
|
+
}
|
|
168
|
+
.gct-assets-svg-icon.ion-color-tertiary {
|
|
169
|
+
--ion-color-base: var(--ion-color-tertiary, #5260ff) !important;
|
|
170
|
+
}
|
|
171
|
+
.gct-assets-svg-icon.ion-color-success {
|
|
172
|
+
--ion-color-base: var(--ion-color-success, #2dd36f) !important;
|
|
173
|
+
}
|
|
174
|
+
.gct-assets-svg-icon.ion-color-warning {
|
|
175
|
+
--ion-color-base: var(--ion-color-warning, #ffc409) !important;
|
|
176
|
+
}
|
|
177
|
+
.gct-assets-svg-icon.ion-color-danger {
|
|
178
|
+
--ion-color-base: var(--ion-color-danger, #eb445a) !important;
|
|
179
|
+
}
|
|
180
|
+
.gct-assets-svg-icon.ion-color-light {
|
|
181
|
+
--ion-color-base: var(--ion-color-light, #f4f5f8) !important;
|
|
182
|
+
}
|
|
183
|
+
.gct-assets-svg-icon.ion-color-medium {
|
|
184
|
+
--ion-color-base: var(--ion-color-medium, #92949c) !important;
|
|
185
|
+
}
|
|
186
|
+
.gct-assets-svg-icon.ion-color-dark {
|
|
187
|
+
--ion-color-base: var(--ion-color-dark, #222428) !important;
|
|
188
|
+
}
|
|
@@ -0,0 +1,134 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* SVG图标组件 - 简化版本 (仅浏览器环境)
|
|
3
|
+
*
|
|
4
|
+
* 此组件是基于Stencil ion-icon组件简化的Vue实现,
|
|
5
|
+
* 专门用于浏览器环境,仅支持通过src属性加载SVG。
|
|
6
|
+
*
|
|
7
|
+
* ## 功能
|
|
8
|
+
* - 支持通过直接URL加载SVG图标
|
|
9
|
+
* - 支持懒加载
|
|
10
|
+
* - 支持RTL文本方向自动翻转
|
|
11
|
+
* - 支持颜色和大小变化
|
|
12
|
+
* - 支持SVG内容安全检查
|
|
13
|
+
*
|
|
14
|
+
* ## 使用示例
|
|
15
|
+
*
|
|
16
|
+
* // 使用 src 属性
|
|
17
|
+
* <SvgIcon src="/path/to/icon.svg" />
|
|
18
|
+
*
|
|
19
|
+
* // 设置大小和颜色
|
|
20
|
+
* <SvgIcon src="/path/to/icon.svg" size="large" color="primary" />
|
|
21
|
+
*
|
|
22
|
+
* // RTL 支持
|
|
23
|
+
* <SvgIcon src="/path/to/icon.svg" flipRtl={true} />
|
|
24
|
+
*
|
|
25
|
+
* // 懒加载
|
|
26
|
+
* <SvgIcon src="/path/to/icon.svg" lazy={true} />
|
|
27
|
+
*
|
|
28
|
+
* // 禁用 SVG 清理
|
|
29
|
+
* <SvgIcon src="/path/to/icon.svg" sanitize={false} />
|
|
30
|
+
*/
|
|
31
|
+
export declare const AssetsSvgIcon: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
|
|
32
|
+
/**
|
|
33
|
+
* The color to use for the background of the item.
|
|
34
|
+
*/
|
|
35
|
+
color: {
|
|
36
|
+
type: StringConstructor;
|
|
37
|
+
};
|
|
38
|
+
/**
|
|
39
|
+
* Specifies whether the icon should horizontally flip when `dir` is `"rtl"`.
|
|
40
|
+
*/
|
|
41
|
+
flipRtl: {
|
|
42
|
+
type: BooleanConstructor;
|
|
43
|
+
};
|
|
44
|
+
/**
|
|
45
|
+
* Specifies the exact `src` of an SVG file to use.
|
|
46
|
+
*/
|
|
47
|
+
src: {
|
|
48
|
+
type: StringConstructor;
|
|
49
|
+
required: true;
|
|
50
|
+
};
|
|
51
|
+
/**
|
|
52
|
+
* The size of the icon.
|
|
53
|
+
* Available options are: `"small"` and `"large"`.
|
|
54
|
+
*/
|
|
55
|
+
size: {
|
|
56
|
+
type: StringConstructor;
|
|
57
|
+
};
|
|
58
|
+
/**
|
|
59
|
+
* If enabled, ion-icon will be loaded lazily when it's visible in the viewport.
|
|
60
|
+
* Default, `false`.
|
|
61
|
+
*/
|
|
62
|
+
lazy: {
|
|
63
|
+
type: BooleanConstructor;
|
|
64
|
+
default: boolean;
|
|
65
|
+
};
|
|
66
|
+
/**
|
|
67
|
+
* When set to `false`, SVG content that is HTTP fetched will not be checked
|
|
68
|
+
* if the response SVG content has any `<script>` elements, or any attributes
|
|
69
|
+
* that start with `on`, such as `onclick`.
|
|
70
|
+
* @default true
|
|
71
|
+
*/
|
|
72
|
+
sanitize: {
|
|
73
|
+
type: BooleanConstructor;
|
|
74
|
+
default: boolean;
|
|
75
|
+
};
|
|
76
|
+
}>, {
|
|
77
|
+
ns: import('@gct-paas/core').Namespace;
|
|
78
|
+
svgContent: import('vue').Ref<string | undefined, string | undefined>;
|
|
79
|
+
classes: import('vue').ComputedRef<{
|
|
80
|
+
[x: string]: boolean;
|
|
81
|
+
'ion-color'?: boolean | undefined;
|
|
82
|
+
'flip-rtl': boolean;
|
|
83
|
+
'icon-rtl': boolean;
|
|
84
|
+
}>;
|
|
85
|
+
}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
|
|
86
|
+
/**
|
|
87
|
+
* The color to use for the background of the item.
|
|
88
|
+
*/
|
|
89
|
+
color: {
|
|
90
|
+
type: StringConstructor;
|
|
91
|
+
};
|
|
92
|
+
/**
|
|
93
|
+
* Specifies whether the icon should horizontally flip when `dir` is `"rtl"`.
|
|
94
|
+
*/
|
|
95
|
+
flipRtl: {
|
|
96
|
+
type: BooleanConstructor;
|
|
97
|
+
};
|
|
98
|
+
/**
|
|
99
|
+
* Specifies the exact `src` of an SVG file to use.
|
|
100
|
+
*/
|
|
101
|
+
src: {
|
|
102
|
+
type: StringConstructor;
|
|
103
|
+
required: true;
|
|
104
|
+
};
|
|
105
|
+
/**
|
|
106
|
+
* The size of the icon.
|
|
107
|
+
* Available options are: `"small"` and `"large"`.
|
|
108
|
+
*/
|
|
109
|
+
size: {
|
|
110
|
+
type: StringConstructor;
|
|
111
|
+
};
|
|
112
|
+
/**
|
|
113
|
+
* If enabled, ion-icon will be loaded lazily when it's visible in the viewport.
|
|
114
|
+
* Default, `false`.
|
|
115
|
+
*/
|
|
116
|
+
lazy: {
|
|
117
|
+
type: BooleanConstructor;
|
|
118
|
+
default: boolean;
|
|
119
|
+
};
|
|
120
|
+
/**
|
|
121
|
+
* When set to `false`, SVG content that is HTTP fetched will not be checked
|
|
122
|
+
* if the response SVG content has any `<script>` elements, or any attributes
|
|
123
|
+
* that start with `on`, such as `onclick`.
|
|
124
|
+
* @default true
|
|
125
|
+
*/
|
|
126
|
+
sanitize: {
|
|
127
|
+
type: BooleanConstructor;
|
|
128
|
+
default: boolean;
|
|
129
|
+
};
|
|
130
|
+
}>> & Readonly<{}>, {
|
|
131
|
+
flipRtl: boolean;
|
|
132
|
+
lazy: boolean;
|
|
133
|
+
sanitize: boolean;
|
|
134
|
+
}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
|
|
@@ -0,0 +1,167 @@
|
|
|
1
|
+
import { getSrc, isRTL } from "./utils.mjs";
|
|
2
|
+
import { getSvgContent, ioniconContent } from "./request.mjs";
|
|
3
|
+
import './assets-svg-icon.css';/* empty css */
|
|
4
|
+
import { computed, createVNode, defineComponent, getCurrentInstance, nextTick, onMounted, onUnmounted, ref, watch } from "vue";
|
|
5
|
+
import { useNamespace } from "@gct-paas/core";
|
|
6
|
+
//#region src/assets-svg-icon/assets-svg-icon.tsx
|
|
7
|
+
/**
|
|
8
|
+
* Create color classes for the icon.
|
|
9
|
+
* @param color - The color of the icon.
|
|
10
|
+
* @returns The color classes for the icon.
|
|
11
|
+
*/
|
|
12
|
+
var createColorClasses = (color) => {
|
|
13
|
+
return color ? {
|
|
14
|
+
"ion-color": true,
|
|
15
|
+
[`ion-color-${color}`]: true
|
|
16
|
+
} : null;
|
|
17
|
+
};
|
|
18
|
+
/**
|
|
19
|
+
* SVG图标组件 - 简化版本 (仅浏览器环境)
|
|
20
|
+
*
|
|
21
|
+
* 此组件是基于Stencil ion-icon组件简化的Vue实现,
|
|
22
|
+
* 专门用于浏览器环境,仅支持通过src属性加载SVG。
|
|
23
|
+
*
|
|
24
|
+
* ## 功能
|
|
25
|
+
* - 支持通过直接URL加载SVG图标
|
|
26
|
+
* - 支持懒加载
|
|
27
|
+
* - 支持RTL文本方向自动翻转
|
|
28
|
+
* - 支持颜色和大小变化
|
|
29
|
+
* - 支持SVG内容安全检查
|
|
30
|
+
*
|
|
31
|
+
* ## 使用示例
|
|
32
|
+
*
|
|
33
|
+
* // 使用 src 属性
|
|
34
|
+
* <SvgIcon src="/path/to/icon.svg" />
|
|
35
|
+
*
|
|
36
|
+
* // 设置大小和颜色
|
|
37
|
+
* <SvgIcon src="/path/to/icon.svg" size="large" color="primary" />
|
|
38
|
+
*
|
|
39
|
+
* // RTL 支持
|
|
40
|
+
* <SvgIcon src="/path/to/icon.svg" flipRtl={true} />
|
|
41
|
+
*
|
|
42
|
+
* // 懒加载
|
|
43
|
+
* <SvgIcon src="/path/to/icon.svg" lazy={true} />
|
|
44
|
+
*
|
|
45
|
+
* // 禁用 SVG 清理
|
|
46
|
+
* <SvgIcon src="/path/to/icon.svg" sanitize={false} />
|
|
47
|
+
*/
|
|
48
|
+
var AssetsSvgIcon = /* @__PURE__ */ defineComponent({
|
|
49
|
+
name: "AssetsSvgIcon",
|
|
50
|
+
props: {
|
|
51
|
+
color: { type: String },
|
|
52
|
+
flipRtl: { type: Boolean },
|
|
53
|
+
src: {
|
|
54
|
+
type: String,
|
|
55
|
+
required: true
|
|
56
|
+
},
|
|
57
|
+
size: { type: String },
|
|
58
|
+
lazy: {
|
|
59
|
+
type: Boolean,
|
|
60
|
+
default: false
|
|
61
|
+
},
|
|
62
|
+
sanitize: {
|
|
63
|
+
type: Boolean,
|
|
64
|
+
default: true
|
|
65
|
+
}
|
|
66
|
+
},
|
|
67
|
+
setup(props) {
|
|
68
|
+
const ns = useNamespace("assets-svg-icon");
|
|
69
|
+
const instance = getCurrentInstance();
|
|
70
|
+
let io;
|
|
71
|
+
const didLoadIcon = ref(false);
|
|
72
|
+
const svgContent = ref(void 0);
|
|
73
|
+
const isVisible = ref(false);
|
|
74
|
+
/**
|
|
75
|
+
* Wait until the icon is visible in the viewport.
|
|
76
|
+
* @param el - The element to observe.
|
|
77
|
+
* @param rootMargin - The root margin of the observer.
|
|
78
|
+
* @param cb - The callback to call when the element is visible.
|
|
79
|
+
*/
|
|
80
|
+
const waitUntilVisible = (el, rootMargin, cb) => {
|
|
81
|
+
/**
|
|
82
|
+
* browser doesn't support IntersectionObserver
|
|
83
|
+
* so just fallback to always show it
|
|
84
|
+
*/
|
|
85
|
+
if (!Boolean(typeof window !== "undefined" && props.lazy && window.IntersectionObserver)) return cb();
|
|
86
|
+
const intersectionObserver = io = new window.IntersectionObserver((data) => {
|
|
87
|
+
if (data[0]?.isIntersecting) {
|
|
88
|
+
intersectionObserver.disconnect();
|
|
89
|
+
io = void 0;
|
|
90
|
+
cb();
|
|
91
|
+
}
|
|
92
|
+
}, { rootMargin });
|
|
93
|
+
intersectionObserver.observe(el);
|
|
94
|
+
};
|
|
95
|
+
/**
|
|
96
|
+
* Load the icon using only src URL
|
|
97
|
+
*/
|
|
98
|
+
const loadIcon = () => {
|
|
99
|
+
if (typeof window !== "undefined" && isVisible.value && props.src) {
|
|
100
|
+
const url = getSrc(props.src);
|
|
101
|
+
if (url) {
|
|
102
|
+
if (ioniconContent.has(url)) svgContent.value = ioniconContent.get(url);
|
|
103
|
+
else getSvgContent(url, props.sanitize).then(() => {
|
|
104
|
+
svgContent.value = ioniconContent.get(url);
|
|
105
|
+
});
|
|
106
|
+
didLoadIcon.value = true;
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
};
|
|
110
|
+
onMounted(() => {
|
|
111
|
+
const el = instance?.vnode.el;
|
|
112
|
+
if (el)
|
|
113
|
+
/**
|
|
114
|
+
* purposely do not return the promise here because loading
|
|
115
|
+
* the svg file should not hold up loading the app
|
|
116
|
+
* only load the svg if it's visible
|
|
117
|
+
*/
|
|
118
|
+
waitUntilVisible(el, "50px", () => {
|
|
119
|
+
isVisible.value = true;
|
|
120
|
+
loadIcon();
|
|
121
|
+
});
|
|
122
|
+
nextTick(() => {
|
|
123
|
+
if (!didLoadIcon.value) loadIcon();
|
|
124
|
+
});
|
|
125
|
+
});
|
|
126
|
+
onUnmounted(() => {
|
|
127
|
+
if (io) {
|
|
128
|
+
io.disconnect();
|
|
129
|
+
io = void 0;
|
|
130
|
+
}
|
|
131
|
+
});
|
|
132
|
+
watch(() => props.src, () => {
|
|
133
|
+
loadIcon();
|
|
134
|
+
});
|
|
135
|
+
return {
|
|
136
|
+
ns,
|
|
137
|
+
svgContent,
|
|
138
|
+
classes: computed(() => {
|
|
139
|
+
const { flipRtl, size, color } = props;
|
|
140
|
+
const el = instance?.vnode.el;
|
|
141
|
+
/**
|
|
142
|
+
* if flipRtl is true, the icon should change direction when `dir` changes
|
|
143
|
+
*/
|
|
144
|
+
const shouldBeFlippable = flipRtl;
|
|
145
|
+
return {
|
|
146
|
+
...createColorClasses(color),
|
|
147
|
+
[`icon-${size}`]: !!size,
|
|
148
|
+
"flip-rtl": shouldBeFlippable,
|
|
149
|
+
"icon-rtl": shouldBeFlippable && isRTL(el),
|
|
150
|
+
[ns.b()]: true
|
|
151
|
+
};
|
|
152
|
+
})
|
|
153
|
+
};
|
|
154
|
+
},
|
|
155
|
+
render() {
|
|
156
|
+
const { svgContent, classes } = this;
|
|
157
|
+
return createVNode("div", {
|
|
158
|
+
"role": "img",
|
|
159
|
+
"class": classes
|
|
160
|
+
}, [typeof window !== "undefined" && svgContent ? createVNode("div", {
|
|
161
|
+
"class": "icon-inner",
|
|
162
|
+
"innerHTML": svgContent
|
|
163
|
+
}, null) : createVNode("div", { "class": "icon-inner" }, null)]);
|
|
164
|
+
}
|
|
165
|
+
});
|
|
166
|
+
//#endregion
|
|
167
|
+
export { AssetsSvgIcon };
|
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
import { isEncodedDataUrl, isSvgDataUrl, validateContent } from "./validate.mjs";
|
|
2
|
+
//#region src/assets-svg-icon/request.ts
|
|
3
|
+
var ioniconContent = /* @__PURE__ */ new Map();
|
|
4
|
+
var requests = /* @__PURE__ */ new Map();
|
|
5
|
+
var parser;
|
|
6
|
+
/**
|
|
7
|
+
* Safely fallback to an empty svg
|
|
8
|
+
*/
|
|
9
|
+
function safeFallback(url) {
|
|
10
|
+
const svg = "";
|
|
11
|
+
ioniconContent.set(url, svg);
|
|
12
|
+
return svg;
|
|
13
|
+
}
|
|
14
|
+
var getSvgContent = (url, sanitize) => {
|
|
15
|
+
/**
|
|
16
|
+
* See if we already have a request for this url
|
|
17
|
+
*/
|
|
18
|
+
const req = requests.get(url);
|
|
19
|
+
if (req) return req;
|
|
20
|
+
if (typeof fetch !== "undefined" && typeof document !== "undefined") {
|
|
21
|
+
/**
|
|
22
|
+
* If the url is a data url of an svg, then try to parse it
|
|
23
|
+
* with the DOMParser. This works with content security policies enabled.
|
|
24
|
+
*/
|
|
25
|
+
if (isSvgDataUrl(url) && isEncodedDataUrl(url)) return Promise.resolve(getSvgByUrl(url));
|
|
26
|
+
return fetchSvg(url, sanitize);
|
|
27
|
+
}
|
|
28
|
+
return Promise.resolve(safeFallback(url));
|
|
29
|
+
};
|
|
30
|
+
function getSvgByUrl(url) {
|
|
31
|
+
if (!parser)
|
|
32
|
+
/**
|
|
33
|
+
* Create an instance of the DOM parser. This creates a single
|
|
34
|
+
* parser instance for the entire app, which is more efficient.
|
|
35
|
+
*/
|
|
36
|
+
parser = new DOMParser();
|
|
37
|
+
const svg = parser.parseFromString(url, "text/html").querySelector("svg");
|
|
38
|
+
if (svg) {
|
|
39
|
+
ioniconContent.set(url, svg.outerHTML);
|
|
40
|
+
return svg.outerHTML;
|
|
41
|
+
}
|
|
42
|
+
throw new Error(`Could not parse svg from ${url}`);
|
|
43
|
+
}
|
|
44
|
+
function fetchSvg(url, sanitize) {
|
|
45
|
+
/**
|
|
46
|
+
* We don't already have a request
|
|
47
|
+
*/
|
|
48
|
+
const req = fetch(url).then((rsp) => {
|
|
49
|
+
/**
|
|
50
|
+
* When fetching from a file:// URL, some browsers return
|
|
51
|
+
* a 0 status code even when the request succeeds so don't
|
|
52
|
+
* rely on rsp.ok as the only signal of success.
|
|
53
|
+
*/
|
|
54
|
+
return rsp.text().then((svgContent) => {
|
|
55
|
+
if (svgContent && sanitize !== false) svgContent = validateContent(svgContent);
|
|
56
|
+
const svg = svgContent || "";
|
|
57
|
+
ioniconContent.set(url, svg);
|
|
58
|
+
return svg;
|
|
59
|
+
}).catch(() => safeFallback(url));
|
|
60
|
+
}).catch(() => safeFallback(url));
|
|
61
|
+
/**
|
|
62
|
+
* Cache for the same requests
|
|
63
|
+
*/
|
|
64
|
+
requests.set(url, req);
|
|
65
|
+
return req;
|
|
66
|
+
}
|
|
67
|
+
//#endregion
|
|
68
|
+
export { getSvgContent, ioniconContent };
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
export declare const isStr: (val: any) => val is string;
|
|
2
|
+
export declare const isSrc: (str: string) => boolean;
|
|
3
|
+
export declare const getSrc: (src: string | undefined) => string | null;
|
|
4
|
+
/**
|
|
5
|
+
* Returns `true` if the document or host element
|
|
6
|
+
* has a `dir` set to `rtl`. The host value will always
|
|
7
|
+
* take priority over the root document value.
|
|
8
|
+
*/
|
|
9
|
+
export declare const isRTL: (hostEl?: Pick<HTMLElement, "dir">) => boolean;
|