@volverjs/ui-vue 0.0.10-beta.3 → 0.0.10-beta.31

package/dist/components/VvAlert/VvAlert.es.js

@@ -1,100 +1,15 @@
-import { inject, computed, unref, defineComponent, ref, toRefs, openBlock, createBlock, mergeProps, createCommentVNode, watch, withModifiers, createElementBlock, normalizeProps, guardReactiveProps, renderSlot, createTextVNode, toDisplayString, createElementVNode } from "vue";
+import { inject, computed, unref, defineComponent, mergeDefaults, ref, toRefs, openBlock, createBlock, mergeProps, createCommentVNode, watch, withModifiers, createElementBlock, normalizeProps, guardReactiveProps, renderSlot, createTextVNode, toDisplayString, createElementVNode } from "vue";
 import { iconExists, Icon, addIcon } from "@iconify/vue";
-import { nanoid } from "nanoid";
-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 { uid } from "uid";
+const VvIconPropsDefaults = {
+  prefix: "normal"
+  /* normal */
 };
+var StorageType = /* @__PURE__ */ ((StorageType2) => {
+  StorageType2["local"] = "local";
+  StorageType2["session"] = "session";
+  return StorageType2;
+})(StorageType || {});
 var Strategy = /* @__PURE__ */ ((Strategy2) => {
   Strategy2["absolute"] = "absolute";
   Strategy2["fixed"] = "fixed";
@@ -129,13 +44,18 @@ var ButtonType = /* @__PURE__ */ ((ButtonType2) => {
   ButtonType2["reset"] = "reset";
   return ButtonType2;
 })(ButtonType || {});
-var AnchorTarget = /* @__PURE__ */ ((AnchorTarget2) => {
-  AnchorTarget2["_blank"] = "_blank";
-  AnchorTarget2["_self"] = "_self";
-  AnchorTarget2["_parent"] = "_parent";
-  AnchorTarget2["_top"] = "_top";
-  return AnchorTarget2;
-})(AnchorTarget || {});
+var ActionTag = /* @__PURE__ */ ((ActionTag2) => {
+  ActionTag2["nuxtLink"] = "nuxt-link";
+  ActionTag2["routerLink"] = "router-link";
+  ActionTag2["a"] = "a";
+  ActionTag2["button"] = "button";
+  return ActionTag2;
+})(ActionTag || {});
+var AlertRole = /* @__PURE__ */ ((AlertRole2) => {
+  AlertRole2["alert"] = "alert";
+  AlertRole2["alertdialog"] = "alertdialog";
+  return AlertRole2;
+})(AlertRole || {});
 const INJECTION_KEY_VOLVER = Symbol.for("volver");
 const INJECTION_KEY_ALERT_GROUP = Symbol.for(
   "alertGroup"
@@ -171,7 +91,24 @@ const __default__$1 = {
 };
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   ...__default__$1,
-  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(() => {
@@ -258,7 +195,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         color: _ctx.color,
         onLoad: _ctx.onLoad,
         icon: unref(icon)
-      }), null, 16, ["class"])) : createCommentVNode("", true);
+      }), null, 16, ["class"])) : createCommentVNode("v-if", true);
     };
   }
 });
@@ -277,10 +214,7 @@ const LinkProps = {
   /**
    * Anchor target
    */
-  target: {
-    type: String,
-    validator: (value) => Object.values(AnchorTarget).includes(value)
-  },
+  target: String,
   /**
    * Anchor rel
    */
@@ -293,44 +227,56 @@ const DisabledProps = {
   /**
    * Whether the form control is disabled
    */
-  disabled: Boolean
+  disabled: {
+    type: Boolean,
+    default: false
+  }
 };
 const ActiveProps = {
   /**
    * Whether the item is active
    */
-  active: Boolean
+  active: {
+    type: Boolean,
+    default: false
+  }
 };
 const CurrentProps = {
   /**
    * Whether the item is current
    */
-  current: Boolean
+  current: {
+    type: Boolean,
+    default: false
+  }
 };
 const PressedProps = {
   /**
    * Whether the item is pressed
    */
-  pressed: Boolean
+  pressed: {
+    type: Boolean,
+    default: false
+  }
 };
 const LabelProps = {
   /**
    * The item label
    */
-  label: [String, Number]
-};
-const ModifiersProps = {
-  /**
-   * Component BEM modifiers
-   */
-  modifiers: [String, Array]
+  label: {
+    type: [String, Number],
+    default: void 0
+  }
 };
 const IconProps = {
   /**
    * VvIcon name or props
    * @see VVIcon
    */
-  icon: { type: [String, Object] },
+  icon: {
+    type: [String, Object],
+    default: void 0
+  },
   /**
    * VvIcon position
    */
@@ -368,7 +314,8 @@ const IdProps = {
    * Dropdown show / hide transition name
    */
   transitionName: {
-    type: String
+    type: String,
+    default: void 0
   },
   /**
    * Offset of the dropdown from the trigger
@@ -436,7 +383,8 @@ const IdProps = {
    * Set dropdown width to the same as the trigger
    */
   triggerWidth: {
-    type: Boolean
+    type: Boolean,
+    default: false
   }
 });
 ({
@@ -460,16 +408,72 @@ const IdProps = {
   ariaLabel: {
     type: String,
     default: void 0
+  },
+  /**
+   * Default tag for the action
+   */
+  defaultTag: {
+    type: String,
+    default: ActionTag.button
   }
 });
+({
+  storageType: {
+    type: String,
+    default: StorageType.local,
+    validator: (value) => Object.values(StorageType).includes(value)
+  },
+  storageKey: String
+});
 function useInjectedAlertGroup() {
   return inject(INJECTION_KEY_ALERT_GROUP, {});
 }
-const useUniqueId = (id) => computed(() => String((id == null ? void 0 : id.value) || nanoid()));
+const useUniqueId = (id) => computed(() => String((id == null ? void 0 : id.value) || uid()));
+function useComponentIcon(icon, iconPosition) {
+  const hasIcon = computed(() => {
+    if (typeof (icon == null ? void 0 : icon.value) === "string") {
+      return { name: icon == null ? void 0 : icon.value };
+    }
+    return icon == null ? void 0 : icon.value;
+  });
+  const hasIconBefore = computed(
+    () => (iconPosition == null ? void 0 : iconPosition.value) === Position.before ? hasIcon.value : void 0
+  );
+  const hasIconAfter = computed(
+    () => (iconPosition == null ? void 0 : iconPosition.value) === Position.after ? hasIcon.value : void 0
+  );
+  const hasIconLeft = computed(
+    () => (iconPosition == null ? void 0 : iconPosition.value) === Side.left ? hasIcon.value : void 0
+  );
+  const hasIconRight = computed(
+    () => (iconPosition == null ? void 0 : iconPosition.value) === Side.right ? hasIcon.value : void 0
+  );
+  const hasIconTop = computed(
+    () => (iconPosition == null ? void 0 : iconPosition.value) === Side.top ? hasIcon.value : void 0
+  );
+  const hasIconBottom = computed(
+    () => (iconPosition == null ? void 0 : iconPosition.value) === Side.bottom ? hasIcon.value : void 0
+  );
+  return {
+    hasIcon,
+    hasIconLeft,
+    hasIconRight,
+    hasIconTop,
+    hasIconBottom,
+    hasIconBefore,
+    hasIconAfter
+  };
+}
 const VvAlertProps = {
   ...IdProps,
-  ...ModifiersProps,
   ...IconProps,
+  /**
+   * Component BEM modifiers
+   */
+  modifiers: {
+    type: [String, Array],
+    default: void 0
+  },
   /**
    * The alert is dismissable
    * @default false
@@ -534,7 +538,7 @@ const VvAlertProps = {
    */
   role: {
     type: String,
-    default: "alert"
+    default: AlertRole.alert
   }
 };
 const VvAlertEvents = ["close"];
@@ -542,9 +546,7 @@ const useVvAlert = (props, emit) => {
   const { bus } = useInjectedAlertGroup();
   const hasId = useUniqueId(computed(() => props.id));
   const hasTitleId = computed(() => `${hasId.value}-title`);
-  const hasIcon = computed(
-    () => typeof props.icon === "string" ? { name: props.icon } : props.icon
-  );
+  const { hasIcon } = useComponentIcon(computed(() => props.icon));
   const hasClass = useModifiers(
     "vv-alert",
     computed(() => props.modifiers),
@@ -613,7 +615,13 @@ const _hoisted_1 = {
 };
 const _hoisted_2 = ["id"];
 const _hoisted_3 = ["aria-label"];
-const _hoisted_4 = /* @__PURE__ */ createElementVNode("div", { class: "vv-alert__close-mask" }, null, -1);
+const _hoisted_4 = /* @__PURE__ */ createElementVNode(
+  "div",
+  { class: "vv-alert__close-mask" },
+  null,
+  -1
+  /* HOISTED */
+);
 const _hoisted_5 = [
   _hoisted_4
 ];
@@ -632,52 +640,77 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
   props: VvAlertProps,
   emits: VvAlertEvents,
-  setup(__props, { expose: __expose, emit }) {
+  setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
+    const emit = __emit;
     const { hasProps, hasTitleId, hasIcon, close } = useVvAlert(props, emit);
     __expose({ close });
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps(unref(hasProps))), [
-        _ctx.$slots.header || _ctx.$slots.title || _ctx.$slots.close || _ctx.$slots["title::before"] || _ctx.$slots["title::after"] || _ctx.title || _ctx.dismissable || _ctx.autoClose ? (openBlock(), createElementBlock("div", _hoisted_1, [
-          unref(hasIcon) ? (openBlock(), createBlock(_sfc_main$1, mergeProps({ key: 0 }, unref(hasIcon), { class: "vv-alert__icon" }), null, 16)) : createCommentVNode("", true),
-          renderSlot(_ctx.$slots, "header", {}, () => [
-            renderSlot(_ctx.$slots, "title::before"),
-            _ctx.$slots.title || _ctx.title ? (openBlock(), createElementBlock("strong", {
-              key: 0,
-              id: unref(hasTitleId),
-              class: "vv-alert__title"
-            }, [
-              renderSlot(_ctx.$slots, "title", {}, () => [
-                createTextVNode(toDisplayString(_ctx.title), 1)
-              ])
-            ], 8, _hoisted_2)) : createCommentVNode("", true),
-            renderSlot(_ctx.$slots, "title::after")
-          ]),
-          renderSlot(_ctx.$slots, "close", normalizeProps(guardReactiveProps({ close: unref(close) })), () => [
-            _ctx.dismissable || _ctx.autoClose ? (openBlock(), createElementBlock("button", {
-              key: 0,
-              class: "vv-alert__close",
-              type: "button",
-              "aria-label": _ctx.closeLabel,
-              onClick: _cache[0] || (_cache[0] = withModifiers(
-                //@ts-ignore
-                (...args) => unref(close) && unref(close)(...args),
-                ["stop"]
-              ))
-            }, _hoisted_5, 8, _hoisted_3)) : createCommentVNode("", true)
-          ])
-        ])) : createCommentVNode("", true),
-        _ctx.$slots.default || _ctx.content ? (openBlock(), createElementBlock("div", _hoisted_6, [
-          renderSlot(_ctx.$slots, "default", {}, () => [
-            createTextVNode(toDisplayString(_ctx.content), 1)
-          ])
-        ])) : createCommentVNode("", true),
-        _ctx.$slots.footer || _ctx.footer ? (openBlock(), createElementBlock("div", _hoisted_7, [
-          renderSlot(_ctx.$slots, "footer", {}, () => [
-            createTextVNode(toDisplayString(_ctx.footer), 1)
-          ])
-        ])) : createCommentVNode("", true)
-      ], 16);
+      return openBlock(), createElementBlock(
+        "div",
+        normalizeProps(guardReactiveProps(unref(hasProps))),
+        [
+          _ctx.$slots.header || _ctx.$slots.title || _ctx.$slots.close || _ctx.$slots["title::before"] || _ctx.$slots["title::after"] || _ctx.title || _ctx.dismissable || _ctx.autoClose ? (openBlock(), createElementBlock("div", _hoisted_1, [
+            unref(hasIcon) ? (openBlock(), createBlock(
+              _sfc_main$1,
+              mergeProps({ key: 0 }, unref(hasIcon), { class: "vv-alert__icon" }),
+              null,
+              16
+              /* FULL_PROPS */
+            )) : createCommentVNode("v-if", true),
+            renderSlot(_ctx.$slots, "header", {}, () => [
+              renderSlot(_ctx.$slots, "title::before"),
+              _ctx.$slots.title || _ctx.title ? (openBlock(), createElementBlock("strong", {
+                key: 0,
+                id: unref(hasTitleId),
+                class: "vv-alert__title"
+              }, [
+                renderSlot(_ctx.$slots, "title", {}, () => [
+                  createTextVNode(
+                    toDisplayString(_ctx.title),
+                    1
+                    /* TEXT */
+                  )
+                ])
+              ], 8, _hoisted_2)) : createCommentVNode("v-if", true),
+              renderSlot(_ctx.$slots, "title::after")
+            ]),
+            renderSlot(_ctx.$slots, "close", normalizeProps(guardReactiveProps({ close: unref(close) })), () => [
+              _ctx.dismissable || _ctx.autoClose ? (openBlock(), createElementBlock("button", {
+                key: 0,
+                class: "vv-alert__close",
+                type: "button",
+                "aria-label": _ctx.closeLabel,
+                onClick: _cache[0] || (_cache[0] = withModifiers(
+                  //@ts-ignore
+                  (...args) => unref(close) && unref(close)(...args),
+                  ["stop"]
+                ))
+              }, _hoisted_5, 8, _hoisted_3)) : createCommentVNode("v-if", true)
+            ])
+          ])) : createCommentVNode("v-if", true),
+          _ctx.$slots.default || _ctx.content ? (openBlock(), createElementBlock("div", _hoisted_6, [
+            renderSlot(_ctx.$slots, "default", {}, () => [
+              createTextVNode(
+                toDisplayString(_ctx.content),
+                1
+                /* TEXT */
+              )
+            ])
+          ])) : createCommentVNode("v-if", true),
+          _ctx.$slots.footer || _ctx.footer ? (openBlock(), createElementBlock("div", _hoisted_7, [
+            renderSlot(_ctx.$slots, "footer", {}, () => [
+              createTextVNode(
+                toDisplayString(_ctx.footer),
+                1
+                /* TEXT */
+              )
+            ])
+          ])) : createCommentVNode("v-if", true)
+        ],
+        16
+        /* FULL_PROPS */
+      );
     };
   }
 });

package/dist/components/VvAlert/VvAlert.umd.js

@@ -1 +1 @@
-!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?module.exports=o(require("vue"),require("@iconify/vue"),require("nanoid")):"function"==typeof define&&define.amd?define(["vue","@iconify/vue","nanoid"],o):(e="undefined"!=typeof globalThis?globalThis:e||self).VvAlert=o(e.vue,e.vue$1,e.nanoid)}(this,(function(e,o,t){"use strict";const l={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]}};var r=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(r||{}),n=(e=>(e.before="before",e.after="after",e))(n||{}),i=(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(i||{});const a=Symbol.for("volver"),s=Symbol.for("alertGroup");function c(o,t,l){return e.computed((()=>{const r={[o]:!0},n="string"==typeof(null==t?void 0:t.value)?t.value.split(" "):null==t?void 0:t.value;return n&&Array.isArray(n)&&n.forEach((e=>{e&&(r[`${o}--${e}`]=!0)})),l&&Object.keys(l.value).forEach((t=>{r[`${o}--${t}`]=e.unref(l.value[t])})),r}))}const u=e.defineComponent({name:"VvIcon",props:l,setup(t){const l=t,r=e.computed((()=>"string"==typeof l.rotate?parseFloat(l.rotate):l.rotate)),n=e.ref(!0),i=e.inject(a),{modifiers:s}=e.toRefs(l),u=c("vv-icon",s),d=e.computed((()=>l.provider||(null==i?void 0:i.iconsProvider))),f=e.computed((()=>{const e=l.name??"",t=`@${d.value}:${l.prefix}:${e}`;if(o.iconExists(t))return t;const r=null==i?void 0:i.iconsCollections.find((t=>{const l=`@${d.value}:${t.prefix}:${e}`;return o.iconExists(l)}));return r?`@${d.value}:${r.prefix}:${e}`:e}));function p(e){const t=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=(null==t?void 0:t.innerHTML.trim())||"";t&&r&&o.addIcon(`@${d.value}:${l.prefix}:${l.name}`,{body:r,height:t.viewBox.baseVal.height,width:t.viewBox.baseVal.width})}return i&&l.src&&!o.iconExists(`@${d.value}:${l.prefix}:${l.name}`)&&(n.value=!1,i.fetchIcon(l.src).then((e=>{e&&(p(e),n.value=!0)})).catch((e=>{throw new Error(`Error during fetch icon: ${null==e?void 0:e.message}`)}))),l.svg&&p(l.svg),(t,l)=>e.unref(n)?(e.openBlock(),e.createBlock(e.unref(o.Icon),e.mergeProps({key:0,class:e.unref(u)},{inline:t.inline,width:t.width,height:t.height,horizontalFlip:t.horizontalFlip,verticalFlip:t.verticalFlip,flip:t.flip,rotate:e.unref(r),color:t.color,onLoad:t.onLoad,icon:e.unref(f)}),null,16,["class"])):e.createCommentVNode("",!0)}}),d=(Boolean,Boolean,Boolean,Boolean,{modifiers:[String,Array]}),f={icon:{type:[String,Object]},iconPosition:{type:String,default:n.before,validation:e=>Object.values(n).includes(e)}},p={id:[String,Number]};r.bottom,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,i.button;const m={...p,...d,...f,dismissable:{type:Boolean,default:!1},autoClose:{type:Number,default:0},closeLabel:{type:String,default:"Close"},title:{type:String,default:void 0},content:{type:String,default:void 0},footer:{type:String,default:void 0},role:{type:String,default:"alert"}},v=(o,l)=>{const{bus:r}=e.inject(s,{}),n=(i=e.computed((()=>o.id)),e.computed((()=>String((null==i?void 0:i.value)||t.nanoid()))));var i;const a=e.computed((()=>`${n.value}-title`)),u=e.computed((()=>"string"==typeof o.icon?{name:o.icon}:o.icon)),d=c("vv-alert",e.computed((()=>o.modifiers)),e.computed((()=>({dismissable:o.autoClose>0||o.dismissable,"auto-close":o.autoClose>0,hover:v.value})))),f=e.computed((()=>({"--alert-duration":`${o.autoClose}ms`}))),p=()=>{m&&clearTimeout(m),l("close",n.value),null==r||r.emit("close",n.value)};let m;e.watch((()=>o.autoClose),(e=>{e>0?m=setTimeout(p,e):m&&clearTimeout(m)}),{immediate:!0});const v=e.ref(!1),g=e.withModifiers((()=>{v.value=!0,m&&clearTimeout(m)}),["passive"]),y=e.withModifiers((()=>{v.value=!1,o.autoClose>0&&(m=setTimeout(p,o.autoClose))}),["passive"]);return{close:p,hasIcon:u,hasTitleId:a,hasProps:e.computed((()=>({onMouseover:g,onMouseleave:y,class:d.value,style:f.value,role:o.role,"aria-labelledby":a.value})))}},g={key:0,class:"vv-alert__header"},y=["id"],h=["aria-label"],b=[e.createElementVNode("div",{class:"vv-alert__close-mask"},null,-1)],$={key:1,class:"vv-alert__content"},S={key:2,class:"vv-alert__footer"};return e.defineComponent({name:"VvAlert",props:m,emits:["close"],setup(o,{expose:t,emit:l}){const r=o,{hasProps:n,hasTitleId:i,hasIcon:a,close:s}=v(r,l);return t({close:s}),(o,t)=>(e.openBlock(),e.createElementBlock("div",e.normalizeProps(e.guardReactiveProps(e.unref(n))),[o.$slots.header||o.$slots.title||o.$slots.close||o.$slots["title::before"]||o.$slots["title::after"]||o.title||o.dismissable||o.autoClose?(e.openBlock(),e.createElementBlock("div",g,[e.unref(a)?(e.openBlock(),e.createBlock(u,e.mergeProps({key:0},e.unref(a),{class:"vv-alert__icon"}),null,16)):e.createCommentVNode("",!0),e.renderSlot(o.$slots,"header",{},(()=>[e.renderSlot(o.$slots,"title::before"),o.$slots.title||o.title?(e.openBlock(),e.createElementBlock("strong",{key:0,id:e.unref(i),class:"vv-alert__title"},[e.renderSlot(o.$slots,"title",{},(()=>[e.createTextVNode(e.toDisplayString(o.title),1)]))],8,y)):e.createCommentVNode("",!0),e.renderSlot(o.$slots,"title::after")])),e.renderSlot(o.$slots,"close",e.normalizeProps(e.guardReactiveProps({close:e.unref(s)})),(()=>[o.dismissable||o.autoClose?(e.openBlock(),e.createElementBlock("button",{key:0,class:"vv-alert__close",type:"button","aria-label":o.closeLabel,onClick:t[0]||(t[0]=e.withModifiers(((...o)=>e.unref(s)&&e.unref(s)(...o)),["stop"]))},b,8,h)):e.createCommentVNode("",!0)]))])):e.createCommentVNode("",!0),o.$slots.default||o.content?(e.openBlock(),e.createElementBlock("div",$,[e.renderSlot(o.$slots,"default",{},(()=>[e.createTextVNode(e.toDisplayString(o.content),1)]))])):e.createCommentVNode("",!0),o.$slots.footer||o.footer?(e.openBlock(),e.createElementBlock("div",S,[e.renderSlot(o.$slots,"footer",{},(()=>[e.createTextVNode(e.toDisplayString(o.footer),1)]))])):e.createCommentVNode("",!0)],16))}})}));
+!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?module.exports=o(require("vue"),require("@iconify/vue"),require("uid")):"function"==typeof define&&define.amd?define(["vue","@iconify/vue","uid"],o):(e="undefined"!=typeof globalThis?globalThis:e||self).VvAlert=o(e.vue,e.vue$1,e.uid)}(this,(function(e,o,t){"use strict";const l={prefix:"normal"};var n=(e=>(e.local="local",e.session="session",e))(n||{}),i=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(i||{}),r=(e=>(e.before="before",e.after="after",e))(r||{}),a=(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(a||{}),s=(e=>(e.nuxtLink="nuxt-link",e.routerLink="router-link",e.a="a",e.button="button",e))(s||{}),u=(e=>(e.alert="alert",e.alertdialog="alertdialog",e))(u||{});const c=Symbol.for("volver"),d=Symbol.for("alertGroup");function v(o,t,l){return e.computed((()=>{const n={[o]:!0},i="string"==typeof(null==t?void 0:t.value)?t.value.split(" "):null==t?void 0:t.value;return i&&Array.isArray(i)&&i.forEach((e=>{e&&(n[`${o}--${e}`]=!0)})),l&&Object.keys(l.value).forEach((t=>{n[`${o}--${t}`]=e.unref(l.value[t])})),n}))}const f=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:{}},l),setup(t){const l=t,n=e.computed((()=>"string"==typeof l.rotate?parseFloat(l.rotate):l.rotate)),i=e.ref(!0),r=e.inject(c),{modifiers:a}=e.toRefs(l),s=v("vv-icon",a),u=e.computed((()=>l.provider||(null==r?void 0:r.iconsProvider))),d=e.computed((()=>{const e=l.name??"",t=`@${u.value}:${l.prefix}:${e}`;if(o.iconExists(t))return t;const n=null==r?void 0:r.iconsCollections.find((t=>{const l=`@${u.value}:${t.prefix}:${e}`;return o.iconExists(l)}));return n?`@${u.value}:${n.prefix}:${e}`:e}));function f(e){const t=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),n=(null==t?void 0:t.innerHTML.trim())||"";t&&n&&o.addIcon(`@${u.value}:${l.prefix}:${l.name}`,{body:n,height:t.viewBox.baseVal.height,width:t.viewBox.baseVal.width})}return r&&l.src&&!o.iconExists(`@${u.value}:${l.prefix}:${l.name}`)&&(i.value=!1,r.fetchIcon(l.src).then((e=>{e&&(f(e),i.value=!0)})).catch((e=>{throw new Error(`Error during fetch icon: ${null==e?void 0:e.message}`)}))),l.svg&&f(l.svg),(t,l)=>e.unref(i)?(e.openBlock(),e.createBlock(e.unref(o.Icon),e.mergeProps({key:0,class:e.unref(s)},{inline:t.inline,width:t.width,height:t.height,horizontalFlip:t.horizontalFlip,verticalFlip:t.verticalFlip,flip:t.flip,rotate:e.unref(n),color:t.color,onLoad:t.onLoad,icon:e.unref(d)}),null,16,["class"])):e.createCommentVNode("v-if",!0)}}),p=(Boolean,Boolean,Boolean,Boolean,{icon:{type:[String,Object],default:void 0},iconPosition:{type:String,default:r.before,validation:e=>Object.values(r).includes(e)}}),m={id:[String,Number]};i.bottom,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,a.button,s.button,n.local;const h={...m,...p,modifiers:{type:[String,Array],default:void 0},dismissable:{type:Boolean,default:!1},autoClose:{type:Number,default:0},closeLabel:{type:String,default:"Close"},title:{type:String,default:void 0},content:{type:String,default:void 0},footer:{type:String,default:void 0},role:{type:String,default:u.alert}},b=(o,l)=>{const{bus:n}=e.inject(d,{}),a=(s=e.computed((()=>o.id)),e.computed((()=>String((null==s?void 0:s.value)||t.uid()))));var s;const u=e.computed((()=>`${a.value}-title`)),{hasIcon:c}=function(o,t){const l=e.computed((()=>"string"==typeof(null==o?void 0:o.value)?{name:null==o?void 0:o.value}:null==o?void 0:o.value)),n=e.computed((()=>(null==t?void 0:t.value)===r.before?l.value:void 0)),a=e.computed((()=>(null==t?void 0:t.value)===r.after?l.value:void 0)),s=e.computed((()=>(null==t?void 0:t.value)===i.left?l.value:void 0)),u=e.computed((()=>(null==t?void 0:t.value)===i.right?l.value:void 0)),c=e.computed((()=>(null==t?void 0:t.value)===i.top?l.value:void 0)),d=e.computed((()=>(null==t?void 0:t.value)===i.bottom?l.value:void 0));return{hasIcon:l,hasIconLeft:s,hasIconRight:u,hasIconTop:c,hasIconBottom:d,hasIconBefore:n,hasIconAfter:a}}(e.computed((()=>o.icon))),f=v("vv-alert",e.computed((()=>o.modifiers)),e.computed((()=>({dismissable:o.autoClose>0||o.dismissable,"auto-close":o.autoClose>0,hover:b.value})))),p=e.computed((()=>({"--alert-duration":`${o.autoClose}ms`}))),m=()=>{h&&clearTimeout(h),l("close",a.value),null==n||n.emit("close",a.value)};let h;e.watch((()=>o.autoClose),(e=>{e>0?h=setTimeout(m,e):h&&clearTimeout(h)}),{immediate:!0});const b=e.ref(!1),y=e.withModifiers((()=>{b.value=!0,h&&clearTimeout(h)}),["passive"]),g=e.withModifiers((()=>{b.value=!1,o.autoClose>0&&(h=setTimeout(m,o.autoClose))}),["passive"]);return{close:m,hasIcon:c,hasTitleId:u,hasProps:e.computed((()=>({onMouseover:y,onMouseleave:g,class:f.value,style:p.value,role:o.role,"aria-labelledby":u.value})))}},y={key:0,class:"vv-alert__header"},g=["id"],$=["aria-label"],B=[e.createElementVNode("div",{class:"vv-alert__close-mask"},null,-1)],k={key:1,class:"vv-alert__content"},S={key:2,class:"vv-alert__footer"};return e.defineComponent({name:"VvAlert",props:h,emits:["close"],setup(o,{expose:t,emit:l}){const n=o,i=l,{hasProps:r,hasTitleId:a,hasIcon:s,close:u}=b(n,i);return t({close:u}),(o,t)=>(e.openBlock(),e.createElementBlock("div",e.normalizeProps(e.guardReactiveProps(e.unref(r))),[o.$slots.header||o.$slots.title||o.$slots.close||o.$slots["title::before"]||o.$slots["title::after"]||o.title||o.dismissable||o.autoClose?(e.openBlock(),e.createElementBlock("div",y,[e.unref(s)?(e.openBlock(),e.createBlock(f,e.mergeProps({key:0},e.unref(s),{class:"vv-alert__icon"}),null,16)):e.createCommentVNode("v-if",!0),e.renderSlot(o.$slots,"header",{},(()=>[e.renderSlot(o.$slots,"title::before"),o.$slots.title||o.title?(e.openBlock(),e.createElementBlock("strong",{key:0,id:e.unref(a),class:"vv-alert__title"},[e.renderSlot(o.$slots,"title",{},(()=>[e.createTextVNode(e.toDisplayString(o.title),1)]))],8,g)):e.createCommentVNode("v-if",!0),e.renderSlot(o.$slots,"title::after")])),e.renderSlot(o.$slots,"close",e.normalizeProps(e.guardReactiveProps({close:e.unref(u)})),(()=>[o.dismissable||o.autoClose?(e.openBlock(),e.createElementBlock("button",{key:0,class:"vv-alert__close",type:"button","aria-label":o.closeLabel,onClick:t[0]||(t[0]=e.withModifiers(((...o)=>e.unref(u)&&e.unref(u)(...o)),["stop"]))},B,8,$)):e.createCommentVNode("v-if",!0)]))])):e.createCommentVNode("v-if",!0),o.$slots.default||o.content?(e.openBlock(),e.createElementBlock("div",k,[e.renderSlot(o.$slots,"default",{},(()=>[e.createTextVNode(e.toDisplayString(o.content),1)]))])):e.createCommentVNode("v-if",!0),o.$slots.footer||o.footer?(e.openBlock(),e.createElementBlock("div",S,[e.renderSlot(o.$slots,"footer",{},(()=>[e.createTextVNode(e.toDisplayString(o.footer),1)]))])):e.createCommentVNode("v-if",!0)],16))}})}));

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

@@ -1,4 +1,8 @@
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+    modifiers: {
+        type: globalThis.PropType<string | string[]>;
+        default: undefined;
+    };
     dismissable: {
         type: BooleanConstructor;
         default: boolean;
@@ -25,21 +29,27 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
     role: {
         type: globalThis.PropType<"alert" | "alertdialog">;
-        default: string;
+        default: import("../../constants.js").AlertRole;
     };
     icon: {
-        type: (ObjectConstructor | StringConstructor)[];
+        type: globalThis.PropType<string | import("../VvIcon/index.js").VvIconProps>;
+        default: undefined;
     };
     iconPosition: {
         type: globalThis.PropType<"before" | "after">;
-        default: import("../../constants").Position;
-        validation: (value: import("../../constants").Position) => boolean;
+        default: import("../../constants.js").Position;
+        validation: (value: import("../../constants.js").Position) => boolean;
     };
-    modifiers: globalThis.PropType<string | string[]>;
     id: (StringConstructor | NumberConstructor)[];
 }, {
     close: () => void;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, string[], string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    [x: string]: (...args: any[]) => void;
+}, string, import("vue").PublicProps, Readonly<globalThis.ExtractPropTypes<{
+    modifiers: {
+        type: globalThis.PropType<string | string[]>;
+        default: undefined;
+    };
     dismissable: {
         type: BooleanConstructor;
         default: boolean;
@@ -66,25 +76,25 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
     role: {
         type: globalThis.PropType<"alert" | "alertdialog">;
-        default: string;
+        default: import("../../constants.js").AlertRole;
     };
     icon: {
-        type: (ObjectConstructor | StringConstructor)[];
+        type: globalThis.PropType<string | import("../VvIcon/index.js").VvIconProps>;
+        default: undefined;
     };
     iconPosition: {
         type: globalThis.PropType<"before" | "after">;
-        default: import("../../constants").Position;
-        validation: (value: import("../../constants").Position) => boolean;
+        default: import("../../constants.js").Position;
+        validation: (value: import("../../constants.js").Position) => boolean;
     };
-    modifiers: globalThis.PropType<string | string[]>;
     id: (StringConstructor | NumberConstructor)[];
-}>> & {
-    [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
-}, {
+}>>, {
     title: string;
     content: string;
+    modifiers: string | string[];
     footer: string;
     role: "alert" | "alertdialog";
+    icon: string | import("../VvIcon/index.js").VvIconProps;
     dismissable: boolean;
     autoClose: number;
     closeLabel: string;

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

@@ -1,5 +1,13 @@
-import type { ExtractPropTypes, PropType } from 'vue';
+import { type ExtractPropTypes, type PropType } from 'vue';
+import { AlertRole } from '@/constants';
 export declare const VvAlertProps: {
+    /**
+     * Component BEM modifiers
+     */
+    modifiers: {
+        type: PropType<string | string[]>;
+        default: undefined;
+    };
     /**
      * The alert is dismissable
      * @default false
@@ -64,27 +72,27 @@ export declare const VvAlertProps: {
      */
     role: {
         type: PropType<"alert" | "alertdialog">;
-        default: string;
+        default: AlertRole;
     };
     icon: {
-        type: (ObjectConstructor | StringConstructor)[];
+        type: PropType<string | import("../VvIcon").VvIconProps>;
+        default: undefined;
     };
     iconPosition: {
         type: PropType<"before" | "after">;
-        default: import("../../constants").Position;
-        validation: (value: import("../../constants").Position) => boolean;
+        default: import("@/constants").Position;
+        validation: (value: import("@/constants").Position) => boolean;
     };
-    modifiers: PropType<string | string[]>;
     id: (StringConstructor | NumberConstructor)[];
 };
 export declare const VvAlertEvents: string[];
 export declare const useVvAlert: (props: Readonly<ExtractPropTypes<typeof VvAlertProps>>, emit: (event: string, ...args: unknown[]) => void) => {
     close: () => void;
-    hasIcon: globalThis.ComputedRef<Record<string, any> | undefined>;
+    hasIcon: globalThis.ComputedRef<import("../VvIcon").VvIconProps | undefined>;
     hasTitleId: globalThis.ComputedRef<string>;
     hasProps: globalThis.ComputedRef<{
-        onMouseover: (event: Event, ...args: unknown[]) => any;
-        onMouseleave: (event: Event, ...args: unknown[]) => any;
+        onMouseover: () => void;
+        onMouseleave: () => void;
         class: Record<string, boolean>;
         style: {
             '--alert-duration': string;