@volverjs/ui-vue 0.0.4 → 0.0.5-beta.2

package/dist/components/VvIcon/VvIcon.es.js

@@ -1,6 +1,6 @@
-import { inject as S, computed as g, unref as l, defineComponent as w, ref as $, toRefs as y, openBlock as b, createBlock as F, mergeProps as B, createCommentVNode as E } from "vue";
-import { iconExists as p, Icon as I, addIcon as V } from "@iconify/vue";
-const C = {
+import { inject, computed, unref, defineComponent, ref, toRefs, openBlock, createBlock, mergeProps, createCommentVNode } from "vue";
+import { iconExists, Icon, addIcon } from "@iconify/vue";
+const VvIconProps = {
   /**
    * Color
    */
@@ -24,7 +24,7 @@ const C = {
    */
   name: {
     type: String,
-    required: !0
+    required: true
   },
   /**
    * By default 'vv'
@@ -93,76 +93,124 @@ const C = {
   modifiers: {
     type: [String, Array]
   }
-}, N = Symbol.for("volver");
-function D() {
-  return S(N);
+};
+const INJECTION_KEY_VOLVER = Symbol.for("volver");
+function useVolver() {
+  return inject(INJECTION_KEY_VOLVER);
 }
-function O(a, n, o) {
-  return g(() => {
-    const t = {
-      [a]: !0
-    }, s = typeof (n == null ? void 0 : n.value) == "string" ? n.value.split(" ") : n == null ? void 0 : n.value;
-    return s && Array.isArray(s) && s.forEach((i) => {
-      t[`${a}--${i}`] = !0;
-    }), o && Object.keys(o.value).forEach((i) => {
-      t[`${a}--${i}`] = l(o.value[i]);
-    }), t;
+function useModifiers(prefix, modifiers, others) {
+  return computed(() => {
+    const toReturn = {
+      [prefix]: true
+    };
+    const modifiersArray = typeof (modifiers == null ? void 0 : modifiers.value) === "string" ? modifiers.value.split(" ") : modifiers == null ? void 0 : modifiers.value;
+    if (modifiersArray) {
+      if (Array.isArray(modifiersArray)) {
+        modifiersArray.forEach((modifier) => {
+          if (modifier) {
+            toReturn[`${prefix}--${modifier}`] = true;
+          }
+        });
+      }
+    }
+    if (others) {
+      Object.keys(others.value).forEach((key) => {
+        toReturn[`${prefix}--${key}`] = unref(others.value[key]);
+      });
+    }
+    return toReturn;
   });
 }
-const P = {
+const __default__ = {
   name: "VvIcon"
-}, k = /* @__PURE__ */ w({
-  ...P,
-  props: C,
-  setup(a) {
-    const n = a, o = $(!0), t = D(), { modifiers: s } = y(n), i = O("vv-icon", s), u = g(() => n.provider || (t == null ? void 0 : t.provider)), m = g(() => {
-      const e = n.name ?? "", r = `@${u.value}:${n.prefix}:${n.name}`;
-      return p(e) ? e : p(r) ? r : (t == null ? void 0 : t.iconsCollections.find(
-        (c) => {
-          const f = `@${u.value}:${c.prefix}:${e}`;
-          if (p(f))
-            return f;
-        }
-      )) || e;
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  props: VvIconProps,
+  setup(__props) {
+    const props = __props;
+    const show = ref(true);
+    const volver = useVolver();
+    const { modifiers } = toRefs(props);
+    const bemCssClasses = useModifiers("vv-icon", modifiers);
+    const provider = computed(() => {
+      return props.provider || (volver == null ? void 0 : volver.iconsProvider);
     });
-    function d(e) {
-      let r = null;
-      if (typeof window > "u") {
-        const { JSDOM: h } = require("jsdom");
-        r = new h().window;
+    const icon = computed(() => {
+      const _name = props.name ?? "";
+      const iconName = `@${provider.value}:${props.prefix}:${props.name}`;
+      if (iconExists(_name)) {
+        return _name;
+      } else if (iconExists(iconName)) {
+        return iconName;
+      } else {
+        return (volver == null ? void 0 : volver.iconsCollections.find(
+          (iconsCollection) => {
+            const icon2 = `@${provider.value}:${iconsCollection.prefix}:${_name}`;
+            if (iconExists(icon2)) {
+              return icon2;
+            }
+          }
+        )) || _name;
       }
-      return (r ? new r.DOMParser() : new window.DOMParser()).parseFromString(e, "text/html").querySelector("svg");
+    });
+    function getSvgContent(svg) {
+      let dom = null;
+      if (typeof window === "undefined") {
+        const { JSDOM } = require("jsdom");
+        dom = new JSDOM().window;
+      }
+      const domParser = dom ? new dom.DOMParser() : new window.DOMParser();
+      const svgDomString = domParser.parseFromString(svg, "text/html");
+      const svgEl = svgDomString.querySelector("svg");
+      return svgEl;
     }
-    function v(e) {
-      const r = d(e), c = (r == null ? void 0 : r.innerHTML.trim()) || "";
-      r && c && V(`@${u.value}:${n.prefix}:${n.name}`, {
-        body: c,
-        // Set height and width from svg content
-        height: r.viewBox.baseVal.height,
-        width: r.viewBox.baseVal.width
-      });
+    function addIconFromSvg(svg) {
+      const svgContentEl = getSvgContent(svg);
+      const svgContent = (svgContentEl == null ? void 0 : svgContentEl.innerHTML.trim()) || "";
+      if (svgContentEl && svgContent) {
+        addIcon(`@${provider.value}:${props.prefix}:${props.name}`, {
+          body: svgContent,
+          // Set height and width from svg content
+          height: svgContentEl.viewBox.baseVal.height,
+          width: svgContentEl.viewBox.baseVal.width
+        });
+      }
+    }
+    if (volver) {
+      if (props.src && !iconExists(`@${provider.value}:${props.prefix}:${props.name}`)) {
+        show.value = false;
+        volver.fetchIcon(props.src).then((svg) => {
+          if (svg) {
+            addIconFromSvg(svg);
+            show.value = true;
+          }
+        }).catch((e) => {
+          throw new Error(`During fetch icon: ${e == null ? void 0 : e.message}`);
+        });
+      } else if (props.svg) {
+        addIconFromSvg(props.svg);
+      }
     }
-    return t && (n.src && !p(`@${u.value}:${n.prefix}:${n.name}`) ? (o.value = !1, t.fetchIcon(n.src).then((e) => {
-      e && (v(e), o.value = !0);
-    }).catch((e) => {
-      throw new Error(`During fetch icon: ${e == null ? void 0 : e.message}`);
-    })) : n.svg && v(n.svg)), (e, r) => l(o) ? (b(), F(l(I), B({
-      key: 0,
-      class: l(i)
-    }, {
-      inline: e.inline,
-      width: e.width,
-      height: e.height,
-      horizontalFlip: e.horizontalFlip,
-      verticalFlip: e.verticalFlip,
-      flip: e.flip,
-      rotate: e.rotate,
-      color: e.color,
-      onLoad: e.onLoad,
-      icon: l(m)
-    }), null, 16, ["class"])) : E("", !0);
+    return (_ctx, _cache) => {
+      return unref(show) ? (openBlock(), createBlock(unref(Icon), mergeProps({
+        key: 0,
+        class: unref(bemCssClasses)
+      }, {
+        inline: _ctx.inline,
+        width: _ctx.width,
+        height: _ctx.height,
+        horizontalFlip: _ctx.horizontalFlip,
+        verticalFlip: _ctx.verticalFlip,
+        flip: _ctx.flip,
+        rotate: _ctx.rotate,
+        color: _ctx.color,
+        onLoad: _ctx.onLoad,
+        icon: unref(icon)
+      }), null, 16, ["class"])) : createCommentVNode("", true);
+    };
   }
 });
 export {
-  k as default
+  _sfc_main as default
 };

package/dist/components/VvIcon/VvIcon.umd.js

@@ -1 +1 @@
-(function(e,i){typeof exports=="object"&&typeof module<"u"?module.exports=i(require("vue"),require("@iconify/vue")):typeof define=="function"&&define.amd?define(["vue","@iconify/vue"],i):(e=typeof globalThis<"u"?globalThis:e||self,e.VvIcon=i(e.vue,e.vue$1))})(this,function(e,i){"use strict";const g={color:String,width:{type:[String,Number]},height:{type:[String,Number]},name:{type:String,required:!0},provider:{type:String},prefix:{type:String,default:"normal"},src:String,horizontalFlip:Boolean,verticalFlip:Boolean,flip:String,mode:String,inline:Boolean,rotate:[Number,String],onLoad:Function,svg:String,modifiers:{type:[String,Array]}},m=Symbol.for("volver");function h(){return e.inject(m)}function y(a,t,s){return e.computed(()=>{const r={[a]:!0},l=typeof(t==null?void 0:t.value)=="string"?t.value.split(" "):t==null?void 0:t.value;return l&&Array.isArray(l)&&l.forEach(c=>{r[`${a}--${c}`]=!0}),s&&Object.keys(s.value).forEach(c=>{r[`${a}--${c}`]=e.unref(s.value[c])}),r})}const S={name:"VvIcon"};return e.defineComponent({...S,props:g,setup(a){const t=a,s=e.ref(!0),r=h(),{modifiers:l}=e.toRefs(t),c=y("vv-icon",l),f=e.computed(()=>t.provider||(r==null?void 0:r.provider)),w=e.computed(()=>{const n=t.name??"",o=`@${f.value}:${t.prefix}:${t.name}`;return i.iconExists(n)?n:i.iconExists(o)?o:(r==null?void 0:r.iconsCollections.find(u=>{const p=`@${f.value}:${u.prefix}:${n}`;if(i.iconExists(p))return p}))||n});function v(n){let o=null;if(typeof window>"u"){const{JSDOM:$}=require("jsdom");o=new $().window}return(o?new o.DOMParser:new window.DOMParser).parseFromString(n,"text/html").querySelector("svg")}function d(n){const o=v(n),u=(o==null?void 0:o.innerHTML.trim())||"";o&&u&&i.addIcon(`@${f.value}:${t.prefix}:${t.name}`,{body:u,height:o.viewBox.baseVal.height,width:o.viewBox.baseVal.width})}return r&&(t.src&&!i.iconExists(`@${f.value}:${t.prefix}:${t.name}`)?(s.value=!1,r.fetchIcon(t.src).then(n=>{n&&(d(n),s.value=!0)}).catch(n=>{throw new Error(`During fetch icon: ${n==null?void 0:n.message}`)})):t.svg&&d(t.svg)),(n,o)=>e.unref(s)?(e.openBlock(),e.createBlock(e.unref(i.Icon),e.mergeProps({key:0,class:e.unref(c)},{inline:n.inline,width:n.width,height:n.height,horizontalFlip:n.horizontalFlip,verticalFlip:n.verticalFlip,flip:n.flip,rotate:n.rotate,color:n.color,onLoad:n.onLoad,icon:e.unref(w)}),null,16,["class"])):e.createCommentVNode("",!0)}})});
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n(require("vue"),require("@iconify/vue")):"function"==typeof define&&define.amd?define(["vue","@iconify/vue"],n):(e="undefined"!=typeof globalThis?globalThis:e||self).VvIcon=n(e.vue,e.vue$1)}(this,(function(e,n){"use strict";const i={color:String,width:{type:[String,Number]},height:{type:[String,Number]},name:{type:String,required:!0},provider:{type:String},prefix:{type:String,default:"normal"},src:String,horizontalFlip:Boolean,verticalFlip:Boolean,flip:String,mode:String,inline:Boolean,rotate:[Number,String],onLoad:Function,svg:String,modifiers:{type:[String,Array]}},o=Symbol.for("volver");return e.defineComponent({name:"VvIcon",props:i,setup(i){const r=i,t=e.ref(!0),l=e.inject(o),{modifiers:u}=e.toRefs(r),c=function(n,i,o){return e.computed((()=>{const r={[n]:!0},t="string"==typeof(null==i?void 0:i.value)?i.value.split(" "):null==i?void 0:i.value;return t&&Array.isArray(t)&&t.forEach((e=>{e&&(r[`${n}--${e}`]=!0)})),o&&Object.keys(o.value).forEach((i=>{r[`${n}--${i}`]=e.unref(o.value[i])})),r}))}("vv-icon",u),a=e.computed((()=>r.provider||(null==l?void 0:l.iconsProvider))),s=e.computed((()=>{const e=r.name??"",i=`@${a.value}:${r.prefix}:${r.name}`;return n.iconExists(e)?e:n.iconExists(i)?i:(null==l?void 0:l.iconsCollections.find((i=>{const o=`@${a.value}:${i.prefix}:${e}`;if(n.iconExists(o))return o})))||e}));function f(e){const i=function(e){let n=null;if("undefined"==typeof window){const{JSDOM:e}=require("jsdom");n=(new e).window}return(n?new n.DOMParser:new window.DOMParser).parseFromString(e,"text/html").querySelector("svg")}(e),o=(null==i?void 0:i.innerHTML.trim())||"";i&&o&&n.addIcon(`@${a.value}:${r.prefix}:${r.name}`,{body:o,height:i.viewBox.baseVal.height,width:i.viewBox.baseVal.width})}return l&&(r.src&&!n.iconExists(`@${a.value}:${r.prefix}:${r.name}`)?(t.value=!1,l.fetchIcon(r.src).then((e=>{e&&(f(e),t.value=!0)})).catch((e=>{throw new Error(`During fetch icon: ${null==e?void 0:e.message}`)}))):r.svg&&f(r.svg)),(i,o)=>e.unref(t)?(e.openBlock(),e.createBlock(e.unref(n.Icon),e.mergeProps({key:0,class:e.unref(c)},{inline:i.inline,width:i.width,height:i.height,horizontalFlip:i.horizontalFlip,verticalFlip:i.verticalFlip,flip:i.flip,rotate:i.rotate,color:i.color,onLoad:i.onLoad,icon:e.unref(s)}),null,16,["class"])):e.createCommentVNode("",!0)}})}));

package/dist/components/VvIcon/VvIcon.vue.d.ts

@@ -14,20 +14,20 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
     };
     prefix: {
-        type: import("vue").PropType<import("@/components/VvIcon").PREFIX>;
+        type: globalThis.PropType<string>;
         default: string;
     };
     src: StringConstructor;
     horizontalFlip: BooleanConstructor;
     verticalFlip: BooleanConstructor;
     flip: StringConstructor;
-    mode: import("vue").PropType<import("@iconify/vue").IconifyRenderMode>;
+    mode: globalThis.PropType<import("@iconify/vue").IconifyRenderMode>;
     inline: BooleanConstructor;
     rotate: (StringConstructor | NumberConstructor)[];
     onLoad: FunctionConstructor;
     svg: StringConstructor;
     modifiers: {
-        type: import("vue").PropType<string | string[]>;
+        type: globalThis.PropType<string | string[]>;
     };
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     color: StringConstructor;
@@ -45,23 +45,23 @@ declare const _default: import("vue").DefineComponent<{
         type: StringConstructor;
     };
     prefix: {
-        type: import("vue").PropType<import("@/components/VvIcon").PREFIX>;
+        type: globalThis.PropType<string>;
         default: string;
     };
     src: StringConstructor;
     horizontalFlip: BooleanConstructor;
     verticalFlip: BooleanConstructor;
     flip: StringConstructor;
-    mode: import("vue").PropType<import("@iconify/vue").IconifyRenderMode>;
+    mode: globalThis.PropType<import("@iconify/vue").IconifyRenderMode>;
     inline: BooleanConstructor;
     rotate: (StringConstructor | NumberConstructor)[];
     onLoad: FunctionConstructor;
     svg: StringConstructor;
     modifiers: {
-        type: import("vue").PropType<string | string[]>;
+        type: globalThis.PropType<string | string[]>;
     };
 }>>, {
-    prefix: import("@/components/VvIcon").PREFIX;
+    prefix: string;
     horizontalFlip: boolean;
     verticalFlip: boolean;
     inline: boolean;

package/dist/components/VvIcon/index.d.ts

@@ -1,6 +1,6 @@
 import type { PropType } from 'vue';
 import type { IconifyRenderMode } from '@iconify/vue';
-export declare enum PREFIX {
+export declare enum IconPrefix {
     simple = "simple",
     normal = "normal",
     detailed = "detailed"
@@ -44,7 +44,7 @@ export declare const VvIconProps: {
      * Icon default options prefix: simple | normal | detailed
      */
     prefix: {
-        type: PropType<PREFIX>;
+        type: PropType<string>;
         default: string;
     };
     /**

package/dist/components/VvInputText/VvInputPasswordAction.d.ts

@@ -20,8 +20,8 @@ declare const _default: import("vue").DefineComponent<{
         default: "eye-off";
     };
 }, {
-    active: import("vue").Ref<boolean>;
-    activeIcon: import("vue").ComputedRef<string>;
+    active: globalThis.Ref<boolean>;
+    activeIcon: globalThis.ComputedRef<string>;
     onClick: (e: Event) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "toggle-password"[], "toggle-password", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     disabled: {

package/dist/components/VvInputText/VvInputStepAction.d.ts

@@ -12,7 +12,7 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
 }, {
-    isUp: import("vue").ComputedRef<boolean>;
+    isUp: globalThis.ComputedRef<boolean>;
     onClick: (e: Event) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("step-up" | "step-down")[], "step-up" | "step-down", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     disabled: {