@volverjs/ui-vue 0.0.11 → 0.0.12

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

@@ -1,527 +1 @@
-import { inject, computed, useId, unref, watch, ref, defineComponent, mergeDefaults, toRefs, createBlock, createCommentVNode, openBlock, mergeProps, createElementBlock, normalizeProps, guardReactiveProps, renderSlot, createTextVNode, toDisplayString, withModifiers, createElementVNode } from "vue";
-import { iconLoaded, Icon, addIcon } from "@iconify/vue";
-var StorageType = /* @__PURE__ */ ((StorageType2) => {
-  StorageType2["local"] = "local";
-  StorageType2["session"] = "session";
-  return StorageType2;
-})(StorageType || {});
-var Side = /* @__PURE__ */ ((Side2) => {
-  Side2["left"] = "left";
-  Side2["right"] = "right";
-  Side2["top"] = "top";
-  Side2["bottom"] = "bottom";
-  return Side2;
-})(Side || {});
-var Position = /* @__PURE__ */ ((Position2) => {
-  Position2["before"] = "before";
-  Position2["after"] = "after";
-  return Position2;
-})(Position || {});
-var ButtonType = /* @__PURE__ */ ((ButtonType2) => {
-  ButtonType2["button"] = "button";
-  ButtonType2["submit"] = "submit";
-  ButtonType2["reset"] = "reset";
-  return ButtonType2;
-})(ButtonType || {});
-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"
-);
-const VvIconPropsDefaults = {
-  prefix: "normal"
-  /* normal */
-};
-const IconProps = {
-  /**
-   * VvIcon name or props
-   * @see VvIcon
-   */
-  icon: {
-    type: [String, Object],
-    default: void 0
-  },
-  /**
-   * VvIcon position
-   */
-  iconPosition: {
-    type: String,
-    default: Position.before,
-    validation: (value) => Object.values(Position).includes(value)
-  }
-};
-const IdProps = {
-  /**
-   * Global attribute id
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
-   */
-  id: [String, Number]
-};
-({
-  /**
-   * Dropdown placement
-   */
-  placement: {
-    default: Side.bottom
-  }
-});
-({
-  /**
-   * Button type
-   */
-  type: {
-    default: ButtonType.button
-  },
-  /**
-   * Default tag for the action
-   */
-  defaultTag: {
-    default: ActionTag.button
-  }
-});
-({
-  storageType: {
-    default: StorageType.local
-  }
-});
-function useInjectedAlertGroup() {
-  return inject(INJECTION_KEY_ALERT_GROUP, {});
-}
-function useUniqueId(id) {
-  return computed(() => String(id?.value || useId()));
-}
-function useComponentIcon(icon, iconPosition) {
-  const hasIcon = computed(() => {
-    if (typeof icon?.value === "string") {
-      return { name: icon?.value };
-    }
-    return icon?.value;
-  });
-  const hasIconBefore = computed(
-    () => iconPosition?.value === Position.before ? hasIcon.value : void 0
-  );
-  const hasIconAfter = computed(
-    () => iconPosition?.value === Position.after ? hasIcon.value : void 0
-  );
-  const hasIconLeft = computed(
-    () => iconPosition?.value === Side.left ? hasIcon.value : void 0
-  );
-  const hasIconRight = computed(
-    () => iconPosition?.value === Side.right ? hasIcon.value : void 0
-  );
-  const hasIconTop = computed(
-    () => iconPosition?.value === Side.top ? hasIcon.value : void 0
-  );
-  const hasIconBottom = computed(
-    () => iconPosition?.value === Side.bottom ? hasIcon.value : void 0
-  );
-  return {
-    hasIcon,
-    hasIconLeft,
-    hasIconRight,
-    hasIconTop,
-    hasIconBottom,
-    hasIconBefore,
-    hasIconAfter
-  };
-}
-function useModifiers(prefix, modifiers, others) {
-  return computed(() => {
-    const toReturn = {
-      [prefix]: true
-    };
-    const modifiersArray = typeof modifiers?.value === "string" ? modifiers.value.split(" ") : 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 VvAlertProps = {
-  ...IdProps,
-  ...IconProps,
-  /**
-   * Component BEM modifiers
-   */
-  modifiers: {
-    type: [String, Array],
-    default: void 0
-  },
-  /**
-   * The alert is dismissable
-   * @default false
-   * @type boolean
-   */
-  dismissable: {
-    type: Boolean,
-    default: false
-  },
-  /**
-   * The alert auto close after the specified time in milliseconds
-   * @default 0
-   * @type number
-   */
-  autoClose: {
-    type: Number,
-    default: 0
-  },
-  /**
-   * The alert close label
-   * @default 'Close'
-   * @type string
-   */
-  closeLabel: {
-    type: String,
-    default: "Close"
-  },
-  /**
-   * The alert title
-   * @default ''
-   * @type string
-   */
-  title: {
-    type: String,
-    default: void 0
-  },
-  /**
-   * The alert content
-   * @default ''
-   * @type string
-   */
-  content: {
-    type: String,
-    default: void 0
-  },
-  /**
-   * The alert footer
-   * @default ''
-   * @type string
-   */
-  footer: {
-    type: String,
-    default: void 0
-  },
-  /**
-   * The alert role
-   * @default 'alert'
-   * @type string
-   * @values 'alert', 'alertdialog'
-   * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Alert_Role
-   * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Alertdialog_role
-   */
-  role: {
-    type: String,
-    default: AlertRole.alert
-  }
-};
-const VvAlertEvents = ["close"];
-function useVvAlert(props, emit) {
-  const { bus } = useInjectedAlertGroup();
-  const hasId = useUniqueId(computed(() => props.id));
-  const hasTitleId = computed(() => `${hasId.value}-title`);
-  let timeout;
-  const close = () => {
-    if (timeout) {
-      clearTimeout(timeout);
-    }
-    emit("close", hasId.value);
-    bus?.emit("close", hasId.value);
-  };
-  watch(
-    () => props.autoClose,
-    (value) => {
-      if (value > 0) {
-        timeout = setTimeout(close, value);
-        return;
-      }
-      if (timeout) {
-        clearTimeout(timeout);
-      }
-    },
-    {
-      immediate: true
-    }
-  );
-  const isMouseover = ref(false);
-  const onMouseover = () => {
-    isMouseover.value = true;
-    if (timeout) {
-      clearTimeout(timeout);
-    }
-  };
-  const onMouseleave = () => {
-    isMouseover.value = false;
-    if (props.autoClose > 0) {
-      timeout = setTimeout(close, props.autoClose);
-    }
-  };
-  const { hasIcon } = useComponentIcon(computed(() => props.icon));
-  const hasClass = useModifiers(
-    "vv-alert",
-    computed(() => props.modifiers),
-    computed(() => ({
-      "dismissable": props.autoClose > 0 || props.dismissable,
-      "auto-close": props.autoClose > 0,
-      "hover": isMouseover.value
-    }))
-  );
-  const hasStyle = computed(() => ({
-    "--alert-duration": `${props.autoClose}ms`
-  }));
-  return {
-    close,
-    hasIcon,
-    hasTitleId,
-    hasProps: computed(() => ({
-      onMouseover,
-      onMouseleave,
-      "class": hasClass.value,
-      "style": hasStyle.value,
-      "role": props.role,
-      "aria-labelledby": hasTitleId.value
-    }))
-  };
-}
-function useVolver() {
-  return inject(INJECTION_KEY_VOLVER, void 0);
-}
-const __default__$1 = {
-  name: "VvIcon"
-};
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
-  ...__default__$1,
-  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 Number.parseFloat(props.rotate);
-      }
-      return props.rotate;
-    });
-    const show = ref(true);
-    const volver = useVolver();
-    const { modifiers } = toRefs(props);
-    const bemCssClasses = useModifiers("vv-icon", modifiers);
-    const provider = computed(() => {
-      return props.provider || volver?.iconsProvider;
-    });
-    const icon = computed(() => {
-      const name = props.name ?? "";
-      const iconName = `@${provider.value}:${props.prefix}:${name}`;
-      if (iconLoaded(iconName)) {
-        return iconName;
-      }
-      const iconsCollection = volver?.iconsCollections.find(
-        (iconsCollection2) => {
-          const icon2 = `@${provider.value}:${iconsCollection2.prefix}:${name}`;
-          return iconLoaded(icon2);
-        }
-      );
-      if (iconsCollection) {
-        return `@${provider.value}:${iconsCollection.prefix}:${name}`;
-      }
-      return name;
-    });
-    function getSvgContent(svg) {
-      let dom;
-      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 addIconFromSvg(svg) {
-      const svgContentEl = getSvgContent(svg);
-      const svgContent = 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 && !iconLoaded(`@${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(`Error during fetch icon: ${e?.message}`);
-        });
-      }
-    }
-    if (props.svg) {
-      addIconFromSvg(props.svg);
-    }
-    return (_ctx, _cache) => {
-      return unref(show) ? (openBlock(), createBlock(unref(Icon), mergeProps({
-        key: 0,
-        class: unref(bemCssClasses)
-      }, {
-        inline: __props.inline,
-        width: __props.width,
-        height: __props.height,
-        horizontalFlip: __props.horizontalFlip,
-        verticalFlip: __props.verticalFlip,
-        flip: __props.flip,
-        rotate: unref(hasRotate),
-        color: __props.color,
-        icon: unref(icon)
-      }, { onLoad: __props.onLoad }), null, 16, ["class", "onLoad"])) : createCommentVNode("v-if", true);
-    };
-  }
-});
-const _hoisted_1 = {
-  key: 0,
-  class: "vv-alert__header"
-};
-const _hoisted_2 = ["id"];
-const _hoisted_3 = ["aria-label"];
-const _hoisted_4 = {
-  key: 1,
-  class: "vv-alert__content"
-};
-const _hoisted_5 = {
-  key: 2,
-  class: "vv-alert__footer"
-};
-const __default__ = {
-  name: "VvAlert"
-};
-const _sfc_main = /* @__PURE__ */ defineComponent({
-  ...__default__,
-  props: VvAlertProps,
-  emits: VvAlertEvents,
-  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 || unref(hasIcon) || _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"]
-                ))
-              }, [..._cache[1] || (_cache[1] = [
-                createElementVNode(
-                  "div",
-                  { class: "vv-alert__close-mask" },
-                  null,
-                  -1
-                  /* CACHED */
-                )
-              ])], 8, _hoisted_3)) : createCommentVNode("v-if", true)
-            ])
-          ])) : createCommentVNode("v-if", true),
-          _ctx.$slots.default || _ctx.content ? (openBlock(), createElementBlock("div", _hoisted_4, [
-            renderSlot(_ctx.$slots, "default", {}, () => [
-              createTextVNode(
-                toDisplayString(_ctx.content),
-                1
-                /* TEXT */
-              )
-            ])
-          ])) : createCommentVNode("v-if", true),
-          _ctx.$slots.footer || _ctx.footer ? (openBlock(), createElementBlock("div", _hoisted_5, [
-            renderSlot(_ctx.$slots, "footer", {}, () => [
-              createTextVNode(
-                toDisplayString(_ctx.footer),
-                1
-                /* TEXT */
-              )
-            ])
-          ])) : createCommentVNode("v-if", true)
-        ],
-        16
-        /* FULL_PROPS */
-      );
-    };
-  }
-});
-export {
-  _sfc_main as default
-};
+import{inject as e,computed as t,useId as o,unref as l,watch as a,ref as i,defineComponent as s,mergeDefaults as r,toRefs as n,createBlock as u,createCommentVNode as v,openBlock as c,mergeProps as f,createElementBlock as d,normalizeProps as p,guardReactiveProps as m,renderSlot as h,createTextVNode as b,toDisplayString as y,withModifiers as $,createElementVNode as g}from"vue";import{iconLoaded as w,Icon as S,addIcon as k}from"@iconify/vue";var x=/* @__PURE__ */(e=>(e.local="local",e.session="session",e))(x||{}),I=/* @__PURE__ */(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(I||{}),_=/* @__PURE__ */(e=>(e.before="before",e.after="after",e))(_||{}),C=/* @__PURE__ */(e=>(e.button="button",e.submit="submit",e.reset="reset",e))(C||{}),L=/* @__PURE__ */(e=>(e.nuxtLink="nuxt-link",e.routerLink="router-link",e.a="a",e.button="button",e))(L||{}),F=/* @__PURE__ */(e=>(e.alert="alert",e.alertdialog="alertdialog",e))(F||{});const T=Symbol.for("volver"),B=Symbol.for("alertGroup"),M={prefix:"normal"},O={icon:{type:[String,Object],default:void 0},iconPosition:{type:String,default:_.before,validation:e=>Object.values(_).includes(e)}},P={id:[String,Number]};function A(e,o,a){return t(()=>{const t={[e]:!0},i="string"==typeof o?.value?o.value.split(" "):o?.value;return i&&Array.isArray(i)&&i.forEach(o=>{o&&(t[`${e}--${o}`]=!0)}),a&&Object.keys(a.value).forEach(o=>{t[`${e}--${o}`]=l(a.value[o])}),t})}I.bottom,C.button,L.button,x.local;const j={...P,...O,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:F.alert}};function E(l,s){const{bus:r}=e(B,{}),n=(u=t(()=>l.id),t(()=>String(u?.value||o())));var u;const v=t(()=>`${n.value}-title`);let c;const f=()=>{c&&clearTimeout(c),s("close",n.value),r?.emit("close",n.value)};a(()=>l.autoClose,e=>{e>0?c=setTimeout(f,e):c&&clearTimeout(c)},{immediate:!0});const d=i(!1),p=()=>{d.value=!0,c&&clearTimeout(c)},m=()=>{d.value=!1,l.autoClose>0&&(c=setTimeout(f,l.autoClose))},{hasIcon:h}=function(e,o){const l=t(()=>"string"==typeof e?.value?{name:e?.value}:e?.value),a=t(()=>o?.value===_.before?l.value:void 0),i=t(()=>o?.value===_.after?l.value:void 0),s=t(()=>o?.value===I.left?l.value:void 0),r=t(()=>o?.value===I.right?l.value:void 0),n=t(()=>o?.value===I.top?l.value:void 0),u=t(()=>o?.value===I.bottom?l.value:void 0);return{hasIcon:l,hasIconLeft:s,hasIconRight:r,hasIconTop:n,hasIconBottom:u,hasIconBefore:a,hasIconAfter:i}}(t(()=>l.icon)),b=A("vv-alert",t(()=>l.modifiers),t(()=>({dismissable:l.autoClose>0||l.dismissable,"auto-close":l.autoClose>0,hover:d.value}))),y=t(()=>({"--alert-duration":`${l.autoClose}ms`}));return{close:f,hasIcon:h,hasTitleId:v,hasProps:t(()=>({onMouseover:p,onMouseleave:m,class:b.value,style:y.value,role:l.role,"aria-labelledby":v.value}))}}const V=/* @__PURE__ */s({name:"VvIcon",props:/* @__PURE__ */r({name:{},color:{},width:{},height:{},provider:{},prefix:{},src:{},horizontalFlip:{type:Boolean},verticalFlip:{type:Boolean},flip:{},mode:{},inline:{type:Boolean},rotate:{},onLoad:{type:Function},svg:{},modifiers:{}},M),setup(o){const a=o,s=t(()=>"string"==typeof a.rotate?Number.parseFloat(a.rotate):a.rotate),r=i(!0),d=e(T,void 0),{modifiers:p}=n(a),m=A("vv-icon",p),h=t(()=>a.provider||d?.iconsProvider),b=t(()=>{const e=a.name??"",t=`@${h.value}:${a.prefix}:${e}`;if(w(t))return t;const o=d?.iconsCollections.find(t=>{const o=`@${h.value}:${t.prefix}:${e}`;return w(o)});return o?`@${h.value}:${o.prefix}:${e}`:e});function y(e){const t=function(e){let t;if("undefined"==typeof window){const{JSDOM:e}=require("jsdom");t=(new e).window}return(t?new t.DOMParser:new window.DOMParser).parseFromString(e,"text/html").querySelector("svg")}(e),o=t?.innerHTML.trim()||"";t&&o&&k(`@${h.value}:${a.prefix}:${a.name}`,{body:o,height:t.viewBox.baseVal.height,width:t.viewBox.baseVal.width})}return d&&a.src&&!w(`@${h.value}:${a.prefix}:${a.name}`)&&(r.value=!1,d.fetchIcon(a.src).then(e=>{e&&(y(e),r.value=!0)}).catch(e=>{throw new Error(`Error during fetch icon: ${e?.message}`)})),a.svg&&y(a.svg),(e,t)=>l(r)?(c(),u(l(S),f({key:0,class:l(m)},{inline:o.inline,width:o.width,height:o.height,horizontalFlip:o.horizontalFlip,verticalFlip:o.verticalFlip,flip:o.flip,rotate:l(s),color:o.color,icon:l(b)},{onLoad:o.onLoad}),null,16,["class","onLoad"])):v("v-if",!0)}}),z={key:0,class:"vv-alert__header"},D=["id"],N=["aria-label"],q={key:1,class:"vv-alert__content"},G={key:2,class:"vv-alert__footer"},H=/* @__PURE__ */s({name:"VvAlert",props:j,emits:["close"],setup(e,{expose:t,emit:o}){const a=e,i=o,{hasProps:s,hasTitleId:r,hasIcon:n,close:w}=E(a,i);return t({close:w}),(e,t)=>(c(),d("div",p(m(l(s))),[e.$slots.header||e.$slots.title||e.$slots.close||e.$slots["title::before"]||e.$slots["title::after"]||e.title||l(n)||e.dismissable||e.autoClose?(c(),d("div",z,[l(n)?(c(),u(V,f({key:0},l(n),{class:"vv-alert__icon"}),null,16)):v("v-if",!0),h(e.$slots,"header",{},()=>[h(e.$slots,"title::before"),e.$slots.title||e.title?(c(),d("strong",{key:0,id:l(r),class:"vv-alert__title"},[h(e.$slots,"title",{},()=>[b(y(e.title),1)])],8,D)):v("v-if",!0),h(e.$slots,"title::after")]),h(e.$slots,"close",p(m({close:l(w)})),()=>[e.dismissable||e.autoClose?(c(),d("button",{key:0,class:"vv-alert__close",type:"button","aria-label":e.closeLabel,onClick:t[0]||(t[0]=$((...e)=>l(w)&&l(w)(...e),["stop"]))},[...t[1]||(t[1]=[g("div",{class:"vv-alert__close-mask"},null,-1)])],8,N)):v("v-if",!0)])])):v("v-if",!0),e.$slots.default||e.content?(c(),d("div",q,[h(e.$slots,"default",{},()=>[b(y(e.content),1)])])):v("v-if",!0),e.$slots.footer||e.footer?(c(),d("div",G,[h(e.$slots,"footer",{},()=>[b(y(e.footer),1)])])):v("v-if",!0)],16))}});export{H as default};