@volverjs/ui-vue 0.0.6-beta.1 → 0.0.6-beta.15

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

@@ -0,0 +1,661 @@
+import { inject, computed, unref, defineComponent, ref, toRefs, openBlock, createBlock, mergeProps, createCommentVNode, watch, withModifiers, createElementBlock, normalizeProps, guardReactiveProps, createElementVNode, renderSlot, toDisplayString, createTextVNode } 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]
+  }
+};
+var Side = /* @__PURE__ */ ((Side2) => {
+  Side2["left"] = "left";
+  Side2["right"] = "right";
+  Side2["top"] = "top";
+  Side2["bottom"] = "bottom";
+  return Side2;
+})(Side || {});
+var Placement = /* @__PURE__ */ ((Placement2) => {
+  Placement2["topStart"] = "top-start";
+  Placement2["topEnd"] = "top-end";
+  Placement2["bottomStart"] = "bottom-start";
+  Placement2["bottomEnd"] = "bottom-end";
+  Placement2["leftStart"] = "left-start";
+  Placement2["leftEnd"] = "left-end";
+  Placement2["rightStart"] = "right-start";
+  Placement2["rightEnd"] = "right-end";
+  return Placement2;
+})(Placement || {});
+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 AnchorTarget = /* @__PURE__ */ ((AnchorTarget2) => {
+  AnchorTarget2["_blank"] = "_blank";
+  AnchorTarget2["_self"] = "_self";
+  AnchorTarget2["_parent"] = "_parent";
+  AnchorTarget2["_top"] = "_top";
+  return AnchorTarget2;
+})(AnchorTarget || {});
+const INJECTION_KEY_VOLVER = Symbol.for("volver");
+const INJECTION_KEY_ALERT_GROUP = Symbol.for(
+  "alertGroup"
+);
+function useVolver() {
+  return inject(INJECTION_KEY_VOLVER);
+}
+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 __default__$1 = {
+  name: "VvIcon"
+};
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  ...__default__$1,
+  props: VvIconProps,
+  setup(__props) {
+    const props = __props;
+    const hasRotate = computed(() => {
+      if (typeof props.rotate === "string") {
+        return 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 == null ? void 0 : volver.iconsProvider);
+    });
+    const icon = computed(() => {
+      const name = props.name ?? "";
+      const iconName = `@${provider.value}:${props.prefix}:${name}`;
+      if (iconExists(iconName)) {
+        return iconName;
+      }
+      const iconsCollection = volver == null ? void 0 : volver.iconsCollections.find(
+        (iconsCollection2) => {
+          const icon2 = `@${provider.value}:${iconsCollection2.prefix}:${name}`;
+          return iconExists(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 == 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(`Error during fetch icon: ${e == null ? void 0 : 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: _ctx.inline,
+        width: _ctx.width,
+        height: _ctx.height,
+        horizontalFlip: _ctx.horizontalFlip,
+        verticalFlip: _ctx.verticalFlip,
+        flip: _ctx.flip,
+        rotate: unref(hasRotate),
+        color: _ctx.color,
+        onLoad: _ctx.onLoad,
+        icon: unref(icon)
+      }), null, 16, ["class"])) : createCommentVNode("", true);
+    };
+  }
+});
+const LinkProps = {
+  /**
+   * The router-link/nuxt-link property, if it is defined the button is rendered as a ruouter-link or nuxt-link.
+   * @see Documentation of [router-link](https://router.vuejs.org/api/#router-link) and [nuxt-link](https://nuxtjs.org/api/components-nuxt-link/)
+   */
+  to: {
+    type: [String, Object]
+  },
+  /**
+   * Anchor href
+   */
+  href: String,
+  /**
+   * Anchor target
+   */
+  target: {
+    type: String,
+    validator: (value) => Object.values(AnchorTarget).includes(value)
+  },
+  /**
+   * Anchor rel
+   */
+  rel: {
+    type: String,
+    default: "noopener noreferrer"
+  }
+};
+const DisabledProps = {
+  /**
+   * Whether the form control is disabled
+   */
+  disabled: Boolean
+};
+const ActiveProps = {
+  /**
+   * Whether the item is active
+   */
+  active: Boolean
+};
+const PressedProps = {
+  /**
+   * Whether the item is pressed
+   */
+  pressed: Boolean
+};
+const LabelProps = {
+  /**
+   * The item label
+   */
+  label: [String, Number]
+};
+const ModifiersProps = {
+  /**
+   * Component BEM modifiers
+   */
+  modifiers: [String, Array]
+};
+const IconProps = {
+  /**
+   * VvIcon name or props
+   * @see VVIcon
+   */
+  icon: { type: [String, Object] },
+  /**
+   * 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: {
+    type: String,
+    default: Side.bottom,
+    validator: (value) => {
+      return Object.values(Side).includes(value) || Object.values(Placement).includes(value);
+    }
+  },
+  /**
+   * Dropdown strategy
+   */
+  strategy: {
+    type: String,
+    default: "absolute",
+    validator: (value) => {
+      return ["fixed", "absolute"].includes(value);
+    }
+  },
+  /**
+   * Dropdown show / hide transition name
+   */
+  transitionName: {
+    type: String
+  },
+  /**
+   * Offset of the dropdown from the trigger
+   * @see https://floating-ui.com/docs/offset
+   */
+  offset: {
+    type: [Number, String, Object],
+    default: 0
+  },
+  /**
+   * Move dropdown to the side if there is no space in the default position
+   * @see https://floating-ui.com/docs/shift
+   */
+  shift: {
+    type: [Boolean, Object],
+    default: false
+  },
+  /**
+   * Flip dropdown position if there is no space in the default position
+   * @see https://floating-ui.com/docs/flip
+   */
+  flip: {
+    type: [Boolean, Object],
+    default: true
+  },
+  /**
+   * Size of the dropdown
+   * @see https://floating-ui.com/docs/size
+   */
+  size: {
+    type: [Boolean, Object],
+    default: () => ({ padding: 10 })
+  },
+  /**
+   * Automatically change the position of the dropdown
+   * @see https://floating-ui.com/docs/autoPlacement
+   */
+  autoPlacement: {
+    type: [Boolean, Object],
+    default: false
+  },
+  /**
+   * Add arrow to the dropdown
+   * @see https://floating-ui.com/docs/arrow
+   */
+  arrow: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * Keep open dropdown on click outside
+   */
+  keepOpen: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * Autofocus first item on dropdown open
+   */
+  autofocusFirst: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * Set dropdown width to the same as the trigger
+   */
+  triggerWidth: {
+    type: Boolean
+  }
+});
+({
+  ...DisabledProps,
+  ...LabelProps,
+  ...PressedProps,
+  ...ActiveProps,
+  ...LinkProps,
+  /**
+   * Button type
+   */
+  type: {
+    type: String,
+    default: ButtonType.button,
+    validator: (value) => Object.values(ButtonType).includes(value)
+  }
+});
+function useInjectedAlertGroup() {
+  return inject(INJECTION_KEY_ALERT_GROUP, {});
+}
+const useUniqueId = (id) => computed(() => String((id == null ? void 0 : id.value) || nanoid()));
+const VvAlertProps = {
+  ...IdProps,
+  ...ModifiersProps,
+  ...IconProps,
+  /**
+   * 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: ""
+  },
+  /**
+   * The alert content
+   * @default ''
+   * @type string
+   */
+  content: {
+    type: String,
+    default: ""
+  },
+  /**
+   * The alert footer
+   * @default ''
+   * @type string
+   */
+  footer: {
+    type: String,
+    default: ""
+  },
+  /**
+   * 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: "alert"
+  }
+};
+const VvAlertEvents = ["close"];
+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 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`
+  }));
+  const close = () => {
+    if (timeout) {
+      clearTimeout(timeout);
+    }
+    emit("close", hasId.value);
+    bus == null ? void 0 : bus.emit("close", hasId.value);
+  };
+  let timeout;
+  watch(
+    () => props.autoClose,
+    (value) => {
+      if (value > 0) {
+        timeout = setTimeout(close, value);
+        return;
+      }
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+    },
+    {
+      immediate: true
+    }
+  );
+  const isMouseover = ref(false);
+  const onMouseover = withModifiers(() => {
+    isMouseover.value = true;
+    if (timeout) {
+      clearTimeout(timeout);
+    }
+  }, ["passive"]);
+  const onMouseleave = withModifiers(() => {
+    isMouseover.value = false;
+    if (props.autoClose > 0) {
+      timeout = setTimeout(close, props.autoClose);
+    }
+  }, ["passive"]);
+  return {
+    close,
+    hasIcon,
+    hasTitleId,
+    hasProps: computed(() => ({
+      onMouseover,
+      onMouseleave,
+      class: hasClass.value,
+      style: hasStyle.value,
+      role: props.role,
+      "aria-labelledby": hasTitleId.value
+    }))
+  };
+};
+const _hoisted_1 = { class: "vv-alert__header" };
+const _hoisted_2 = ["id"];
+const _hoisted_3 = ["aria-label"];
+const _hoisted_4 = /* @__PURE__ */ createElementVNode("div", { class: "vv-alert__close-mask" }, null, -1);
+const _hoisted_5 = [
+  _hoisted_4
+];
+const _hoisted_6 = {
+  key: 0,
+  class: "vv-alert__content"
+};
+const _hoisted_7 = {
+  key: 1,
+  class: "vv-alert__footer"
+};
+const __default__ = {
+  name: "VvAlert"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  props: VvAlertProps,
+  emits: VvAlertEvents,
+  setup(__props, { expose: __expose, emit }) {
+    const props = __props;
+    const { hasProps, hasTitleId, hasIcon, close } = useVvAlert(props, emit);
+    __expose({ close });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps(unref(hasProps))), [
+        createElementVNode("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"),
+            createElementVNode("strong", {
+              id: unref(hasTitleId),
+              class: "vv-alert__title"
+            }, toDisplayString(_ctx.title), 9, _hoisted_2),
+            renderSlot(_ctx.$slots, "title::after")
+          ]),
+          _ctx.dismissable || _ctx.autoClose ? (openBlock(), createElementBlock("button", {
+            key: 1,
+            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)
+        ]),
+        _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);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

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

@@ -0,0 +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 r={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 n=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(n||{}),l=(e=>(e.before="before",e.after="after",e))(l||{}),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,r){return e.computed((()=>{const n={[o]:!0},l="string"==typeof(null==t?void 0:t.value)?t.value.split(" "):null==t?void 0:t.value;return l&&Array.isArray(l)&&l.forEach((e=>{e&&(n[`${o}--${e}`]=!0)})),r&&Object.keys(r.value).forEach((t=>{n[`${o}--${t}`]=e.unref(r.value[t])})),n}))}const u=e.defineComponent({name:"VvIcon",props:r,setup(t){const r=t,n=e.computed((()=>"string"==typeof r.rotate?parseFloat(r.rotate):r.rotate)),l=e.ref(!0),i=e.inject(a),{modifiers:s}=e.toRefs(r),u=c("vv-icon",s),d=e.computed((()=>r.provider||(null==i?void 0:i.iconsProvider))),f=e.computed((()=>{const e=r.name??"",t=`@${d.value}:${r.prefix}:${e}`;if(o.iconExists(t))return t;const n=null==i?void 0:i.iconsCollections.find((t=>{const r=`@${d.value}:${t.prefix}:${e}`;return o.iconExists(r)}));return n?`@${d.value}:${n.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),n=(null==t?void 0:t.innerHTML.trim())||"";t&&n&&o.addIcon(`@${d.value}:${r.prefix}:${r.name}`,{body:n,height:t.viewBox.baseVal.height,width:t.viewBox.baseVal.width})}return i&&r.src&&!o.iconExists(`@${d.value}:${r.prefix}:${r.name}`)&&(l.value=!1,i.fetchIcon(r.src).then((e=>{e&&(p(e),l.value=!0)})).catch((e=>{throw new Error(`Error during fetch icon: ${null==e?void 0:e.message}`)}))),r.svg&&p(r.svg),(t,r)=>e.unref(l)?(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(n),color:t.color,onLoad:t.onLoad,icon:e.unref(f)}),null,16,["class"])):e.createCommentVNode("",!0)}}),d=(Boolean,Boolean,Boolean,{modifiers:[String,Array]}),f={icon:{type:[String,Object]},iconPosition:{type:String,default:l.before,validation:e=>Object.values(l).includes(e)}},p={id:[String,Number]};n.bottom,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,Boolean,i.button;const v={...p,...d,...f,dismissable:{type:Boolean,default:!1},autoClose:{type:Number,default:0},closeLabel:{type:String,default:"Close"},title:{type:String,default:""},content:{type:String,default:""},footer:{type:String,default:""},role:{type:String,default:"alert"}},m=(o,r)=>{const{bus:n}=e.inject(s,{}),l=(i=e.computed((()=>o.id)),e.computed((()=>String((null==i?void 0:i.value)||t.nanoid()))));var i;const a=e.computed((()=>`${l.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:m.value})))),f=e.computed((()=>({"--alert-duration":`${o.autoClose}ms`}))),p=()=>{v&&clearTimeout(v),r("close",l.value),null==n||n.emit("close",l.value)};let v;e.watch((()=>o.autoClose),(e=>{e>0?v=setTimeout(p,e):v&&clearTimeout(v)}),{immediate:!0});const m=e.ref(!1),g=e.withModifiers((()=>{m.value=!0,v&&clearTimeout(v)}),["passive"]),y=e.withModifiers((()=>{m.value=!1,o.autoClose>0&&(v=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={class:"vv-alert__header"},y=["id"],h=["aria-label"],b=[e.createElementVNode("div",{class:"vv-alert__close-mask"},null,-1)],S={key:0,class:"vv-alert__content"},$={key:1,class:"vv-alert__footer"};return e.defineComponent({name:"VvAlert",props:v,emits:["close"],setup(o,{expose:t,emit:r}){const n=o,{hasProps:l,hasTitleId:i,hasIcon:a,close:s}=m(n,r);return t({close:s}),(o,t)=>(e.openBlock(),e.createElementBlock("div",e.normalizeProps(e.guardReactiveProps(e.unref(l))),[e.createElementVNode("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"),e.createElementVNode("strong",{id:e.unref(i),class:"vv-alert__title"},e.toDisplayString(o.title),9,y),e.renderSlot(o.$slots,"title::after")])),o.dismissable||o.autoClose?(e.openBlock(),e.createElementBlock("button",{key:1,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)]),o.$slots.default||o.content?(e.openBlock(),e.createElementBlock("div",S,[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",$,[e.renderSlot(o.$slots,"footer",{},(()=>[e.createTextVNode(e.toDisplayString(o.footer),1)]))])):e.createCommentVNode("",!0)],16))}})}));