@volverjs/ui-vue 0.0.10-beta.8 → 0.0.10

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

@@ -1,109 +1,19 @@
-import { inject, computed, unref, defineComponent, ref, toRefs, openBlock, createBlock, mergeProps, createCommentVNode } from "vue";
-import { iconExists, Icon, addIcon } from "@iconify/vue";
-const VvIconProps = {
-  /**
-   * Color
-   */
-  color: String,
-  /**
-   * Width
-   */
-  width: {
-    type: [String, Number]
-  },
-  /**
-   * Height
-   */
-  height: {
-    type: [String, Number]
-  },
-  /**
-   * Icon name
-   * Can be the full composition of iconify name "@{provider}:{prefix}:{name}" or "{prefix}:{name}" or "{name}"
-   * https://docs.iconify.design/api/providers.html#provider-in-icon-name
-   */
-  name: {
-    type: String,
-    required: true
-  },
-  /**
-   * By default 'vv'
-   * If custom collection is not added with "addCollection" DS class method, this prop could not be used
-   * Icon provider: https://docs.iconify.design/api/providers.html#provider-in-icon-name
-   */
-  provider: {
-    type: String
-  },
-  /**
-   * The name of icon set.
-   * Icon default options prefix: simple | normal | detailed
-   */
-  prefix: {
-    type: String,
-    default: "normal"
-  },
-  /**
-   * Url remote SVG icon
-   */
-  src: String,
-  /**
-   * Horizontal flip
-   */
-  horizontalFlip: Boolean,
-  /**
-   * Vertical flip
-   */
-  verticalFlip: Boolean,
-  /**
-   * String alternative to "horizontalFlip" and "verticalFlip".
-   * Example: https://docs.iconify.design/icon-components/vue/transform.html
-   */
-  flip: String,
-  /**
-   * Icon render mode
-   * 'style' = 'bg' or 'mask', depending on icon content
-   * 'bg' = span with style using `background`
-   * 'mask' = span with style using `mask`
-   * 'svg' = svg
-   * Iconify doc: https://docs.iconify.design/iconify-icon/modes.html
-   */
-  mode: String,
-  /**
-   * Toggles inline or block mode
-   * Example https://docs.iconify.design/icon-components/vue/inline.html
-   */
-  inline: Boolean,
-  /**
-   * rotates icon
-   * Example https://docs.iconify.design/icon-components/vue/transform.html
-   */
-  rotate: [Number, String],
-  /**
-   * A callback that is called when icon data has been loaded
-   */
-  onLoad: Function,
-  /**
-   * SVG icon string
-   */
-  svg: String,
-  /**
-   * Icon modifiers: vv-icon css helper classes, value/s are concatened with prefix 'vv-icon--'
-   * @values string | string[]
-   */
-  modifiers: {
-    type: [String, Array]
-  }
+import { inject, computed, defineComponent, mergeDefaults, ref, toRefs, createBlock, createCommentVNode, unref, openBlock, mergeProps } from "vue";
+import { iconLoaded, Icon, addIcon } from "@iconify/vue";
+const VvIconPropsDefaults = {
+  prefix: "normal"
+  /* normal */
 };
 const INJECTION_KEY_VOLVER = Symbol.for("volver");
 function useVolver() {
-  return inject(INJECTION_KEY_VOLVER);
+  return inject(INJECTION_KEY_VOLVER, void 0);
 }
 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;
+    const modifiersArray = typeof modifiers?.value === "string" ? modifiers.value.split(" ") : modifiers?.value;
     if (modifiersArray) {
       if (Array.isArray(modifiersArray)) {
         modifiersArray.forEach((modifier) => {
@@ -113,11 +23,6 @@ function useModifiers(prefix, modifiers, others) {
         });
       }
     }
-    if (others) {
-      Object.keys(others.value).forEach((key) => {
-        toReturn[`${prefix}--${key}`] = unref(others.value[key]);
-      });
-    }
     return toReturn;
   });
 }
@@ -126,12 +31,29 @@ const __default__ = {
 };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
-  props: VvIconProps,
+  props: /* @__PURE__ */ mergeDefaults({
+    name: {},
+    color: {},
+    width: {},
+    height: {},
+    provider: {},
+    prefix: {},
+    src: {},
+    horizontalFlip: { type: Boolean },
+    verticalFlip: { type: Boolean },
+    flip: {},
+    mode: {},
+    inline: { type: Boolean },
+    rotate: {},
+    onLoad: { type: Function },
+    svg: {},
+    modifiers: {}
+  }, VvIconPropsDefaults),
   setup(__props) {
     const props = __props;
     const hasRotate = computed(() => {
       if (typeof props.rotate === "string") {
-        return parseFloat(props.rotate);
+        return Number.parseFloat(props.rotate);
       }
       return props.rotate;
     });
@@ -140,18 +62,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const { modifiers } = toRefs(props);
     const bemCssClasses = useModifiers("vv-icon", modifiers);
     const provider = computed(() => {
-      return props.provider || (volver == null ? void 0 : volver.iconsProvider);
+      return props.provider || volver?.iconsProvider;
     });
     const icon = computed(() => {
       const name = props.name ?? "";
       const iconName = `@${provider.value}:${props.prefix}:${name}`;
-      if (iconExists(iconName)) {
+      if (iconLoaded(iconName)) {
         return iconName;
       }
-      const iconsCollection = volver == null ? void 0 : volver.iconsCollections.find(
+      const iconsCollection = volver?.iconsCollections.find(
         (iconsCollection2) => {
           const icon2 = `@${provider.value}:${iconsCollection2.prefix}:${name}`;
-          return iconExists(icon2);
+          return iconLoaded(icon2);
         }
       );
       if (iconsCollection) {
@@ -172,7 +94,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }
     function addIconFromSvg(svg) {
       const svgContentEl = getSvgContent(svg);
-      const svgContent = (svgContentEl == null ? void 0 : svgContentEl.innerHTML.trim()) || "";
+      const svgContent = svgContentEl?.innerHTML.trim() || "";
       if (svgContentEl && svgContent) {
         addIcon(`@${provider.value}:${props.prefix}:${props.name}`, {
           body: svgContent,
@@ -183,7 +105,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     }
     if (volver) {
-      if (props.src && !iconExists(`@${provider.value}:${props.prefix}:${props.name}`)) {
+      if (props.src && !iconLoaded(`@${provider.value}:${props.prefix}:${props.name}`)) {
         show.value = false;
         volver.fetchIcon(props.src).then((svg) => {
           if (svg) {
@@ -191,7 +113,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             show.value = true;
           }
         }).catch((e) => {
-          throw new Error(`Error during fetch icon: ${e == null ? void 0 : e.message}`);
+          throw new Error(`Error during fetch icon: ${e?.message}`);
         });
       }
     }
@@ -211,9 +133,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         flip: _ctx.flip,
         rotate: unref(hasRotate),
         color: _ctx.color,
-        onLoad: _ctx.onLoad,
         icon: unref(icon)
-      }), null, 16, ["class"])) : createCommentVNode("v-if", true);
+      }, { onLoad: _ctx.onLoad }), null, 16, ["class", "onLoad"])) : createCommentVNode("v-if", true);
     };
   }
 });

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

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

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

@@ -1,69 +1,5 @@
-declare const _default: import("vue").DefineComponent<{
-    color: StringConstructor;
-    width: {
-        type: (StringConstructor | NumberConstructor)[];
-    };
-    height: {
-        type: (StringConstructor | NumberConstructor)[];
-    };
-    name: {
-        type: StringConstructor;
-        required: boolean;
-    };
-    provider: {
-        type: StringConstructor;
-    };
-    prefix: {
-        type: globalThis.PropType<string>;
-        default: string;
-    };
-    src: StringConstructor;
-    horizontalFlip: BooleanConstructor;
-    verticalFlip: BooleanConstructor;
-    flip: StringConstructor;
-    mode: globalThis.PropType<import("@iconify/vue").IconifyRenderMode>;
-    inline: BooleanConstructor;
-    rotate: (StringConstructor | NumberConstructor)[];
-    onLoad: globalThis.PropType<import("@iconify/vue").IconifyIconOnLoad>;
-    svg: StringConstructor;
-    modifiers: {
-        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;
-    width: {
-        type: (StringConstructor | NumberConstructor)[];
-    };
-    height: {
-        type: (StringConstructor | NumberConstructor)[];
-    };
-    name: {
-        type: StringConstructor;
-        required: boolean;
-    };
-    provider: {
-        type: StringConstructor;
-    };
-    prefix: {
-        type: globalThis.PropType<string>;
-        default: string;
-    };
-    src: StringConstructor;
-    horizontalFlip: BooleanConstructor;
-    verticalFlip: BooleanConstructor;
-    flip: StringConstructor;
-    mode: globalThis.PropType<import("@iconify/vue").IconifyRenderMode>;
-    inline: BooleanConstructor;
-    rotate: (StringConstructor | NumberConstructor)[];
-    onLoad: globalThis.PropType<import("@iconify/vue").IconifyIconOnLoad>;
-    svg: StringConstructor;
-    modifiers: {
-        type: globalThis.PropType<string | string[]>;
-    };
-}>>, {
-    prefix: string;
-    horizontalFlip: boolean;
-    verticalFlip: boolean;
-    inline: boolean;
-}, {}>;
+import type { VvIconProps } from '.';
+declare const _default: import("vue").DefineComponent<VvIconProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<VvIconProps> & Readonly<{}>, {
+    prefix: import(".").IconPrefix | string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

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

@@ -1,69 +1,53 @@
-import type { PropType } from 'vue';
-import type { IconifyIconOnLoad, IconifyRenderMode } from '@iconify/vue';
+import type { IconifyIcon, IconifyRenderMode } from '@iconify/vue';
+export declare const ACTION_ICONS: {
+    readonly showPassword: "eye-on";
+    readonly hidePassword: "eye-off";
+    readonly showDatePicker: "calendar";
+    readonly showTimePicker: "time";
+    readonly showColorPicker: "color";
+    readonly clear: "close";
+    readonly add: "add";
+    readonly remove: "trash";
+    readonly edit: "edit";
+    readonly download: "download";
+};
 export declare enum IconPrefix {
     simple = "simple",
     normal = "normal",
     detailed = "detailed"
 }
-export declare const VvIconProps: {
-    /**
-     * Color
-     */
-    color: StringConstructor;
-    /**
-     * Width
-     */
-    width: {
-        type: (StringConstructor | NumberConstructor)[];
-    };
-    /**
-     * Height
-     */
-    height: {
-        type: (StringConstructor | NumberConstructor)[];
-    };
+export type VvIconProps = {
     /**
      * Icon name
      * Can be the full composition of iconify name "@{provider}:{prefix}:{name}" or "{prefix}:{name}" or "{name}"
      * https://docs.iconify.design/api/providers.html#provider-in-icon-name
      */
-    name: {
-        type: StringConstructor;
-        required: boolean;
-    };
+    name: string;
+    color?: string;
+    width?: string | number;
+    height?: string | number;
     /**
-     * By default 'vv'
      * If custom collection is not added with "addCollection" DS class method, this prop could not be used
      * Icon provider: https://docs.iconify.design/api/providers.html#provider-in-icon-name
      */
-    provider: {
-        type: StringConstructor;
-    };
+    provider?: string;
     /**
+     * @default 'normal'
      * The name of icon set.
      * Icon default options prefix: simple | normal | detailed
      */
-    prefix: {
-        type: PropType<string>;
-        default: string;
-    };
+    prefix?: IconPrefix | string;
     /**
      * Url remote SVG icon
      */
-    src: StringConstructor;
-    /**
-     * Horizontal flip
-     */
-    horizontalFlip: BooleanConstructor;
-    /**
-     * Vertical flip
-     */
-    verticalFlip: BooleanConstructor;
+    src?: string;
+    horizontalFlip?: boolean;
+    verticalFlip?: boolean;
     /**
      * String alternative to "horizontalFlip" and "verticalFlip".
      * Example: https://docs.iconify.design/icon-components/vue/transform.html
      */
-    flip: StringConstructor;
+    flip?: string;
     /**
      * Icon render mode
      * 'style' = 'bg' or 'mask', depending on icon content
@@ -72,30 +56,31 @@ export declare const VvIconProps: {
      * 'svg' = svg
      * Iconify doc: https://docs.iconify.design/iconify-icon/modes.html
      */
-    mode: PropType<IconifyRenderMode>;
+    mode?: IconifyRenderMode;
     /**
      * Toggles inline or block mode
      * Example https://docs.iconify.design/icon-components/vue/inline.html
      */
-    inline: BooleanConstructor;
+    inline?: boolean;
     /**
      * rotates icon
      * Example https://docs.iconify.design/icon-components/vue/transform.html
      */
-    rotate: (StringConstructor | NumberConstructor)[];
+    rotate?: number | string;
     /**
      * A callback that is called when icon data has been loaded
      */
-    onLoad: PropType<IconifyIconOnLoad>;
+    onLoad?: (icon: IconifyIcon) => void;
     /**
      * SVG icon string
      */
-    svg: StringConstructor;
+    svg?: string;
     /**
      * Icon modifiers: vv-icon css helper classes, value/s are concatened with prefix 'vv-icon--'
      * @values string | string[]
      */
-    modifiers: {
-        type: PropType<string | string[]>;
-    };
+    modifiers?: string | string[];
+};
+export declare const VvIconPropsDefaults: {
+    prefix: IconPrefix;
 };