@volverjs/ui-vue 0.0.10-beta.5 → 0.0.10-beta.51

package/dist/components/VvAlertGroup/VvAlertGroup.es.js

@@ -1,7 +1,11 @@
-import { provide, computed, unref, inject, defineComponent, ref, toRefs, openBlock, createBlock, mergeProps, createCommentVNode, watch, withModifiers, createElementBlock, normalizeProps, guardReactiveProps, renderSlot, createTextVNode, toDisplayString, createElementVNode, createVNode, TransitionGroup, toHandlers, withCtx, Fragment, renderList } from "vue";
+import { provide, computed, unref, inject, useId, watch, ref, defineComponent, mergeDefaults, toRefs, openBlock, createBlock, mergeProps, createCommentVNode, createElementBlock, normalizeProps, guardReactiveProps, renderSlot, createTextVNode, toDisplayString, withModifiers, createElementVNode, createVNode, TransitionGroup, toHandlers, withCtx, Fragment, renderList } from "vue";
 import mitt from "mitt";
 import { iconExists, Icon, addIcon } from "@iconify/vue";
-import { uid } from "uid";
+var StorageType = /* @__PURE__ */ ((StorageType2) => {
+  StorageType2["local"] = "local";
+  StorageType2["session"] = "session";
+  return StorageType2;
+})(StorageType || {});
 var Strategy = /* @__PURE__ */ ((Strategy2) => {
   Strategy2["absolute"] = "absolute";
   Strategy2["fixed"] = "fixed";
@@ -36,13 +40,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"
@@ -62,10 +71,7 @@ const LinkProps = {
   /**
    * Anchor target
    */
-  target: {
-    type: String,
-    validator: (value) => Object.values(AnchorTarget).includes(value)
-  },
+  target: String,
   /**
    * Anchor rel
    */
@@ -78,44 +84,65 @@ 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]
+  label: {
+    type: [String, Number],
+    default: void 0
+  }
 };
 const ModifiersProps = {
   /**
    * Component BEM modifiers
    */
-  modifiers: [String, Array]
+  modifiers: {
+    type: [String, Array],
+    default: void 0
+  }
 };
 const IconProps = {
   /**
    * VvIcon name or props
    * @see VVIcon
    */
-  icon: { type: [String, Object] },
+  icon: {
+    type: [String, Object],
+    default: void 0
+  },
   /**
    * VvIcon position
    */
@@ -153,7 +180,8 @@ const IdProps = {
    * Dropdown show / hide transition name
    */
   transitionName: {
-    type: String
+    type: String,
+    default: void 0
   },
   /**
    * Offset of the dropdown from the trigger
@@ -221,7 +249,8 @@ const IdProps = {
    * Set dropdown width to the same as the trigger
    */
   triggerWidth: {
-    type: Boolean
+    type: Boolean,
+    default: false
   }
 });
 ({
@@ -245,9 +274,24 @@ const IdProps = {
   ariaLabel: {
     type: String,
     default: void 0
+  },
+  /**
+   * Default tag for the action
+   */
+  defaultTag: {
+    type: String,
+    default: ActionTag.button
   }
 });
-function useProvideAlertGroup({
+({
+  storageType: {
+    type: String,
+    default: StorageType.local,
+    validator: (value) => Object.values(StorageType).includes(value)
+  },
+  storageKey: String
+});
+function useAlertProvideGroup({
   name
 }) {
   const bus = mitt();
@@ -317,17 +361,17 @@ const VvAlertGroupProps = {
 };
 const VvAlertGroupEvents = [
   "close",
-  "before-enter",
-  "after-leave",
+  "beforeEnter",
+  "afterLeave",
   "enter",
-  "after-enter",
-  "enter-cancelled",
-  "before-leave",
+  "afterEnter",
+  "enterCancelled",
+  "beforeLeave",
   "leave",
-  "leave-cancelled"
+  "leaveCancelled"
 ];
-const useVvAlertGroup = (props, emit) => {
-  const bus = useProvideAlertGroup({ name: computed(() => props.name) });
+function useVvAlertGroup(props, emit) {
+  const bus = useAlertProvideGroup({ name: computed(() => props.name) });
   if (props.block && !props.inline || !props.block && props.inline) {
     console.warn(
       `[VvAlertGroup]: block and inline props must coexist at the same time.`
@@ -381,101 +425,197 @@ const useVvAlertGroup = (props, emit) => {
       class: hasClass.value
     }))
   };
-};
-const VvIconProps = {
+}
+function useInjectedAlertGroup() {
+  return inject(INJECTION_KEY_ALERT_GROUP, {});
+}
+function useUniqueId(id) {
+  return computed(() => String((id == null ? void 0 : id.value) || useId()));
+}
+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,
+  ...IconProps,
   /**
-   * Color
+   * Component BEM modifiers
    */
-  color: String,
+  modifiers: {
+    type: [String, Array],
+    default: void 0
+  },
   /**
-   * Width
+   * The alert is dismissable
+   * @default false
+   * @type boolean
    */
-  width: {
-    type: [String, Number]
+  dismissable: {
+    type: Boolean,
+    default: false
   },
   /**
-   * Height
+   * The alert auto close after the specified time in milliseconds
+   * @default 0
+   * @type number
    */
-  height: {
-    type: [String, Number]
+  autoClose: {
+    type: Number,
+    default: 0
   },
   /**
-   * 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
+   * The alert close label
+   * @default 'Close'
+   * @type string
    */
-  name: {
+  closeLabel: {
     type: String,
-    required: true
+    default: "Close"
   },
   /**
-   * 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
+   * The alert title
+   * @default ''
+   * @type string
    */
-  provider: {
-    type: String
+  title: {
+    type: String,
+    default: void 0
   },
   /**
-   * The name of icon set.
-   * Icon default options prefix: simple | normal | detailed
+   * The alert content
+   * @default ''
+   * @type string
    */
-  prefix: {
+  content: {
     type: String,
-    default: "normal"
+    default: void 0
   },
   /**
-   * 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
+   * The alert footer
+   * @default ''
+   * @type string
    */
-  svg: String,
+  footer: {
+    type: String,
+    default: void 0
+  },
   /**
-   * Icon modifiers: vv-icon css helper classes, value/s are concatened with prefix 'vv-icon--'
-   * @values string | string[]
+   * 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
    */
-  modifiers: {
-    type: [String, Array]
+  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 == null ? void 0 : 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
+    }))
+  };
+}
+const VvIconPropsDefaults = {
+  prefix: "normal"
+  /* normal */
+};
 function useVolver() {
   return inject(INJECTION_KEY_VOLVER);
 }
@@ -484,12 +624,29 @@ const __default__$2 = {
 };
 const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   ...__default__$2,
-  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;
     });
@@ -571,170 +728,21 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         color: _ctx.color,
         onLoad: _ctx.onLoad,
         icon: unref(icon)
-      }), null, 16, ["class"])) : createCommentVNode("", true);
+      }), null, 16, ["class"])) : createCommentVNode("v-if", true);
     };
   }
 });
-function useInjectedAlertGroup() {
-  return inject(INJECTION_KEY_ALERT_GROUP, {});
-}
-const useUniqueId = (id) => computed(() => String((id == null ? void 0 : id.value) || uid()));
-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: 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: "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 = {
   key: 0,
   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 = {
+const _hoisted_4 = {
   key: 1,
   class: "vv-alert__content"
 };
-const _hoisted_7 = {
+const _hoisted_5 = {
   key: 2,
   class: "vv-alert__footer"
 };
@@ -745,52 +753,85 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   ...__default__$1,
   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$2, 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$2,
+              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
+                  /* HOISTED */
+                )
+              ]), 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 */
+      );
     };
   }
 });
@@ -801,57 +842,77 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
   props: VvAlertGroupProps,
   emits: VvAlertGroupEvents,
-  setup(__props, { emit }) {
+  setup(__props, { emit: __emit }) {
     const props = __props;
+    const emit = __emit;
     const { hasProps, hasTransition } = useVvAlertGroup(props, emit);
     const alertGroupTransitionHandlers = {
       "before-enter": () => {
-        emit("before-enter");
+        emit("beforeEnter");
       },
       "after-leave": () => {
-        emit("after-leave");
+        emit("afterLeave");
       },
-      enter: () => {
+      "enter": () => {
         emit("enter");
       },
       "after-enter": () => {
-        emit("after-enter");
+        emit("afterEnter");
       },
       "enter-cancelled": () => {
-        emit("enter-cancelled");
+        emit("enterCancelled");
       },
       "before-leave": () => {
-        emit("before-leave");
+        emit("beforeLeave");
       },
-      leave: () => {
+      "leave": () => {
         emit("leave");
       },
       "leave-cancelled": () => {
-        emit("leave-cancelled");
+        emit("leaveCancelled");
       }
     };
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", normalizeProps(guardReactiveProps(unref(hasProps))), [
-        renderSlot(_ctx.$slots, "before"),
-        createVNode(TransitionGroup, mergeProps({
-          tag: "div",
-          role: "group",
-          name: unref(hasTransition),
-          class: "vv-alert-group__list"
-        }, toHandlers(alertGroupTransitionHandlers)), {
-          default: withCtx(() => [
-            renderSlot(_ctx.$slots, "default", {}, () => [
-              (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.items, (item) => {
-                return openBlock(), createBlock(_sfc_main$1, mergeProps(item, {
-                  key: item.id
-                }), null, 16);
-              }), 128))
-            ])
-          ]),
-          _: 3
-        }, 16, ["name"]),
-        renderSlot(_ctx.$slots, "after")
-      ], 16);
+      return openBlock(), createElementBlock(
+        "div",
+        normalizeProps(guardReactiveProps(unref(hasProps))),
+        [
+          renderSlot(_ctx.$slots, "before"),
+          createVNode(TransitionGroup, mergeProps({
+            tag: "div",
+            role: "group",
+            name: unref(hasTransition),
+            class: "vv-alert-group__list"
+          }, toHandlers(alertGroupTransitionHandlers)), {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "default", {}, () => [
+                (openBlock(true), createElementBlock(
+                  Fragment,
+                  null,
+                  renderList(_ctx.items, (item) => {
+                    return openBlock(), createBlock(
+                      _sfc_main$1,
+                      mergeProps({ ref_for: true }, item, {
+                        key: item.id
+                      }),
+                      null,
+                      16
+                      /* FULL_PROPS */
+                    );
+                  }),
+                  128
+                  /* KEYED_FRAGMENT */
+                ))
+              ])
+            ]),
+            _: 3
+            /* FORWARDED */
+          }, 16, ["name"]),
+          renderSlot(_ctx.$slots, "after")
+        ],
+        16
+        /* FULL_PROPS */
+      );
     };
   }
 });