@volverjs/ui-vue 0.0.8-beta.7 → 0.0.8-beta.9

package/dist/components/VvCombobox/VvCombobox.es.js

@@ -1,8 +1,8 @@
-import { inject, computed, unref, defineComponent, ref, toRefs, openBlock, createBlock, mergeProps, createCommentVNode, provide, h, Fragment, useAttrs, watch, nextTick, createElementBlock, createVNode, withCtx, renderSlot, normalizeProps, guardReactiveProps, Transition, toHandlers, withDirectives, createElementVNode, normalizeStyle, normalizeClass, vShow, createTextVNode, toDisplayString, useSlots, isRef, renderList, vModelSelect, createSlots, withModifiers, vModelText } from "vue";
+import { inject, computed, unref, defineComponent, ref, toRefs, openBlock, createBlock, mergeProps, createCommentVNode, provide, h, Fragment, useAttrs, onMounted, watch, nextTick, createElementBlock, createVNode, withCtx, renderSlot, normalizeProps, guardReactiveProps, Transition, toHandlers, withDirectives, createElementVNode, normalizeStyle, normalizeClass, vShow, createTextVNode, toDisplayString, useSlots, isRef, renderList, vModelSelect, createSlots, resolveDynamicComponent, toRef, withModifiers, vModelText } from "vue";
 import { iconExists, Icon, addIcon } from "@iconify/vue";
 import { autoPlacement, flip, shift, size, offset, arrow, useFloating, autoUpdate } from "@floating-ui/vue";
 import { nanoid } from "nanoid";
-import { useVModel, onClickOutside, useFocusWithin, onKeyStroke, useElementHover, useFocus, useElementVisibility, refDebounced } from "@vueuse/core";
+import { useMutationObserver, useVModel, onClickOutside, useFocusWithin, onKeyStroke, useElementHover, useFocus, useElementVisibility, refDebounced } from "@vueuse/core";
 import mitt from "mitt";
 import { get } from "ts-dot-prop";
 var Side = /* @__PURE__ */ ((Side2) => {
@@ -34,6 +34,13 @@ var ButtonType = /* @__PURE__ */ ((ButtonType2) => {
   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 ActionRoles = /* @__PURE__ */ ((ActionRoles2) => {
   ActionRoles2["button"] = "button";
   ActionRoles2["link"] = "link";
@@ -58,6 +65,7 @@ var AnchorTarget = /* @__PURE__ */ ((AnchorTarget2) => {
   return AnchorTarget2;
 })(AnchorTarget || {});
 const INJECTION_KEY_VOLVER = Symbol.for("volver");
+const INJECTION_KEY_BUTTON_GROUP = Symbol.for("buttonGroup");
 const INJECTION_KEY_DROPDOWN_TRIGGER = Symbol.for(
   "dropdownTrigger"
 );
@@ -353,7 +361,7 @@ const AutocompleteProps = {
    */
   autocomplete: { type: String, default: "off" }
 };
-({
+const ActionProps = {
   ...DisabledProps,
   ...LabelProps,
   ...PressedProps,
@@ -367,7 +375,7 @@ const AutocompleteProps = {
     default: ButtonType.button,
     validator: (value) => Object.values(ButtonType).includes(value)
   }
-});
+};
 const VvComboboxEvents = [
   "update:modelValue",
   "change:search",
@@ -481,7 +489,8 @@ const VvComboboxProps = {
    * Dropdown modifiers
    */
   dropdownModifiers: {
-    type: [String, Array]
+    type: [String, Array],
+    default: "mobile"
   },
   /**
    * Open dropdown on focus
@@ -618,11 +627,11 @@ function useModifiers(prefix, modifiers, others) {
     return toReturn;
   });
 }
-const __default__$7 = {
+const __default__$9 = {
   name: "VvIcon"
 };
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
-  ...__default__$7,
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+  ...__default__$9,
   props: VvIconProps,
   setup(__props) {
     const props = __props;
@@ -716,8 +725,14 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
 });
 const VvDropdownProps = {
   ...IdProps,
-  ...ModifiersProps,
   ...DropdownProps,
+  /**
+   * Component BEM modifiers
+   */
+  modifiers: {
+    type: [String, Array],
+    default: "mobile"
+  },
   /**
    * Show / hide dropdown programmatically
    */
@@ -791,13 +806,13 @@ function useProvideDropdownAction({
     expanded
   });
 }
-const _hoisted_1$4 = ["id", "tabindex", "role", "aria-labelledby"];
-const __default__$6 = {
+const _hoisted_1$5 = ["id", "tabindex", "role", "aria-labelledby"];
+const __default__$8 = {
   name: "VvDropdown",
   inheritAttrs: false
 };
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
-  ...__default__$6,
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+  ...__default__$8,
   props: VvDropdownProps,
   emits: [
     "update:modelValue",
@@ -814,7 +829,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     const maxWidth = ref("auto");
     const maxHeight = ref("auto");
     const localReferenceEl = ref(null);
-    const floatingEl = ref(null);
+    const floatingEl = ref();
     const arrowEl = ref(null);
     const listEl = ref(null);
     const referenceEl = computed({
@@ -823,6 +838,17 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
         localReferenceEl.value = newValue;
       }
     });
+    const dropdownCustomPosition = ref();
+    const onChangeDropdownCustomPosition = () => {
+      var _a;
+      dropdownCustomPosition.value = (_a = window.getComputedStyle(floatingEl.value).getPropertyValue("--dropdown-custom-position")) == null ? void 0 : _a.trim();
+    };
+    onMounted(() => {
+      useMutationObserver(floatingEl.value, onChangeDropdownCustomPosition, {
+        attributeFilter: ["style"],
+        window
+      });
+    });
     const middleware = computed(() => {
       const toReturn = [];
       if (props.autoPlacement) {
@@ -897,14 +923,19 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
         middleware
       }
     );
-    const dropdownPlacement = computed(() => ({
-      position: strategy.value,
-      top: `${y.value ?? 0}px`,
-      left: `${x.value ?? 0}px`,
-      maxWidth: maxWidth.value,
-      maxHeight: maxHeight.value,
-      width: props.triggerWidth && referenceEl.value ? `${referenceEl.value.offsetWidth}px` : void 0
-    }));
+    const dropdownPlacement = computed(() => {
+      if ((dropdownCustomPosition == null ? void 0 : dropdownCustomPosition.value) === "true") {
+        return {};
+      }
+      return {
+        position: strategy.value,
+        top: `${y.value ?? 0}px`,
+        left: `${x.value ?? 0}px`,
+        maxWidth: maxWidth.value,
+        maxHeight: maxHeight.value,
+        width: props.triggerWidth && referenceEl.value ? `${referenceEl.value.offsetWidth}px` : void 0
+      };
+    });
     const side = computed(() => placement.value.split("-")[0]);
     const staticSide = computed(
       () => ({
@@ -916,6 +947,9 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     );
     const arrowPlacement = computed(() => {
       var _a, _b, _c, _d;
+      if ((dropdownCustomPosition == null ? void 0 : dropdownCustomPosition.value) === "true") {
+        return {};
+      }
       if (["bottom", "top"].includes(staticSide.value)) {
         return {
           right: `${((_a = middlewareData.value.arrow) == null ? void 0 : _a.x) ?? 0}px`,
@@ -951,7 +985,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     const init = (el) => {
       referenceEl.value = el;
     };
-    __expose({ toggle, show, hide, init });
+    __expose({ toggle, show, hide, init, dropdownCustomPosition });
     watch(expanded, (newValue) => {
       if (newValue && props.autofocusFirst) {
         nextTick(() => {
@@ -1080,10 +1114,9 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
       }
     });
     onKeyStroke([" ", "Enter"], (e) => {
-      if (expanded.value && focused.value && e.target !== document.activeElement) {
-        e.preventDefault();
-        const activeElement = document.activeElement;
-        activeElement.click();
+      const htmlEl = e.target;
+      if (expanded.value && focused.value && htmlEl) {
+        htmlEl == null ? void 0 : htmlEl.click();
       }
     });
     const onTransitionBeforeEnter = () => {
@@ -1131,7 +1164,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
                 renderSlot(_ctx.$slots, "items", normalizeProps(guardReactiveProps({
                   role: unref(itemRole)
                 })))
-              ], 16, _hoisted_1$4),
+              ], 16, _hoisted_1$5),
               renderSlot(_ctx.$slots, "after", normalizeProps(guardReactiveProps({ expanded: unref(expanded) })))
             ], 6), [
               [vShow, unref(expanded)]
@@ -1143,14 +1176,20 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
     };
   }
 });
+function useInjectedDropdownTrigger() {
+  return inject(INJECTION_KEY_DROPDOWN_TRIGGER, {});
+}
 function useInjectedDropdownItem() {
   return inject(INJECTION_KEY_DROPDOWN_ITEM, {});
 }
-const __default__$5 = {
+function useInjectedDropdownAction() {
+  return inject(INJECTION_KEY_DROPDOWN_ACTION, {});
+}
+const __default__$7 = {
   name: "VvDropdownItem"
 };
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
-  ...__default__$5,
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+  ...__default__$7,
   setup(__props) {
     const { role, expanded } = useInjectedDropdownItem();
     const element = ref(null);
@@ -1174,12 +1213,12 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
     };
   }
 });
-const _hoisted_1$3 = ["title"];
-const __default__$4 = {
+const _hoisted_1$4 = ["title"];
+const __default__$6 = {
   name: "VvDropdownOption"
 };
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
-  ...__default__$4,
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+  ...__default__$6,
   props: {
     ...DisabledProps,
     ...SelectedProps,
@@ -1216,7 +1255,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
       }
     });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$5, {
+      return openBlock(), createBlock(_sfc_main$7, {
         class: normalizeClass(unref(bemCssClasses)),
         tabindex: _ctx.disabled ? -1 : 0,
         "aria-selected": _ctx.selected,
@@ -1231,30 +1270,30 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
             renderSlot(_ctx.$slots, "hint", normalizeProps(guardReactiveProps({ disabled: _ctx.disabled, selected: _ctx.selected, unselectable: _ctx.unselectable })), () => [
               createTextVNode(toDisplayString(unref(hintLabel)), 1)
             ])
-          ], 8, _hoisted_1$3)
+          ], 8, _hoisted_1$4)
         ]),
         _: 3
       }, 8, ["class", "tabindex", "aria-selected", "aria-disabled"]);
     };
   }
 });
-const _hoisted_1$2 = {
+const _hoisted_1$3 = {
   class: "vv-dropdown-optgroup",
   role: "presentation",
   tabindex: "-1"
 };
-const __default__$3 = {
+const __default__$5 = {
   name: "VvDropdownOptgroup"
 };
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
-  ...__default__$3,
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+  ...__default__$5,
   props: {
     ...LabelProps
   },
   setup(__props) {
     const props = __props;
     return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("li", _hoisted_1$2, toDisplayString(props.label), 1);
+      return openBlock(), createElementBlock("li", _hoisted_1$3, toDisplayString(props.label), 1);
     };
   }
 });
@@ -1598,8 +1637,8 @@ function useOptions(props) {
     getOptionGrouped
   };
 }
-const _hoisted_1$1 = ["for"];
-const _hoisted_2$1 = { class: "vv-select__wrapper" };
+const _hoisted_1$2 = ["for"];
+const _hoisted_2$2 = { class: "vv-select__wrapper" };
 const _hoisted_3$1 = {
   key: 0,
   class: "vv-select__input-before"
@@ -1614,11 +1653,11 @@ const _hoisted_10 = {
   key: 1,
   class: "vv-select__input-after"
 };
-const __default__$2 = {
+const __default__$4 = {
   name: "VvSelect"
 };
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
-  ...__default__$2,
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+  ...__default__$4,
   props: VvSelectProps,
   emits: VvSelectEmits,
   setup(__props, { emit }) {
@@ -1736,13 +1775,13 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
         _ctx.label ? (openBlock(), createElementBlock("label", {
           key: 0,
           for: unref(hasId)
-        }, toDisplayString(_ctx.label), 9, _hoisted_1$1)) : createCommentVNode("", true),
-        createElementVNode("div", _hoisted_2$1, [
+        }, toDisplayString(_ctx.label), 9, _hoisted_1$2)) : createCommentVNode("", true),
+        createElementVNode("div", _hoisted_2$2, [
           _ctx.$slots.before ? (openBlock(), createElementBlock("div", _hoisted_3$1, [
             renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps(unref(slotProps))))
           ])) : createCommentVNode("", true),
           createElementVNode("div", _hoisted_4$1, [
-            unref(hasIconBefore) ? (openBlock(), createBlock(_sfc_main$7, mergeProps({
+            unref(hasIconBefore) ? (openBlock(), createBlock(_sfc_main$9, mergeProps({
               key: 0,
               class: "vv-select__icon"
             }, unref(hasIcon)), null, 16)) : createCommentVNode("", true),
@@ -1782,7 +1821,7 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
             ], 16, _hoisted_5$1), [
               [vModelSelect, unref(localModelValue)]
             ]),
-            unref(hasIconAfter) ? (openBlock(), createBlock(_sfc_main$7, mergeProps({
+            unref(hasIconAfter) ? (openBlock(), createBlock(_sfc_main$9, mergeProps({
               key: 1,
               class: "vv-select__icon vv-select__icon-after"
             }, unref(hasIcon)), null, 16)) : createCommentVNode("", true)
@@ -1832,11 +1871,11 @@ const VvBadgeProps = {
   ...ModifiersProps,
   value: [String, Number]
 };
-const __default__$1 = {
+const __default__$3 = {
   name: "VvBadge"
 };
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
-  ...__default__$1,
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+  ...__default__$3,
   props: VvBadgeProps,
   setup(__props) {
     const props = __props;
@@ -1854,6 +1893,389 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     };
   }
 });
+const VvActionEvents = ["click", "mouseover", "mouseleave"];
+const VvActionProps = ActionProps;
+const __default__$2 = {
+  name: "VvAction"
+};
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  ...__default__$2,
+  props: VvActionProps,
+  emits: VvActionEvents,
+  setup(__props, { expose: __expose, emit }) {
+    const props = __props;
+    const volver = useVolver();
+    const element = ref(null);
+    __expose({ $el: element });
+    const {
+      reference: dropdownTriggerReference,
+      bus: dropdownEventBus,
+      aria: dropdownAria,
+      expanded: dropdownExpanded
+    } = useInjectedDropdownTrigger();
+    watch(
+      () => element.value,
+      (newValue) => {
+        if (dropdownTriggerReference) {
+          dropdownTriggerReference.value = newValue;
+        }
+      }
+    );
+    const pressed = computed(() => {
+      return props.pressed || (dropdownExpanded == null ? void 0 : dropdownExpanded.value);
+    });
+    const { role } = useInjectedDropdownAction();
+    const hasTag = computed(() => {
+      switch (true) {
+        case props.disabled:
+          return ActionTag.button;
+        case props.to !== void 0:
+          return (volver == null ? void 0 : volver.nuxt) ? ActionTag.nuxtLink : ActionTag.routerLink;
+        case props.href !== void 0:
+          return ActionTag.a;
+        default:
+          return ActionTag.button;
+      }
+    });
+    const hasProps = computed(() => {
+      const toReturn = {
+        ...dropdownAria == null ? void 0 : dropdownAria.value,
+        "aria-pressed": pressed.value ? true : void 0,
+        role: role == null ? void 0 : role.value
+      };
+      switch (hasTag.value) {
+        case ActionTag.a:
+          return {
+            ...toReturn,
+            href: props.href,
+            target: props.target,
+            rel: props.rel
+          };
+        case ActionTag.routerLink:
+        case ActionTag.nuxtLink:
+          return {
+            ...toReturn,
+            to: props.to,
+            target: props.target
+          };
+        default:
+          return {
+            ...toReturn,
+            type: props.type,
+            disabled: props.disabled
+          };
+      }
+    });
+    const onClick = (e) => {
+      if (props.disabled) {
+        e.preventDefault();
+        return;
+      }
+      dropdownEventBus == null ? void 0 : dropdownEventBus.emit("click", e);
+      emit("click", e);
+    };
+    const onMouseover = (e) => {
+      dropdownEventBus == null ? void 0 : dropdownEventBus.emit("mouseover", e);
+      emit("mouseover", e);
+    };
+    const onMouseleave = (e) => {
+      dropdownEventBus == null ? void 0 : dropdownEventBus.emit("mouseleave", e);
+      emit("mouseleave", e);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(unref(hasTag)), mergeProps(unref(hasProps), {
+        ref_key: "element",
+        ref: element,
+        class: {
+          active: _ctx.active,
+          pressed: unref(pressed),
+          disabled: _ctx.disabled
+        },
+        onClickPassive: onClick,
+        onMouseoverPassive: onMouseover,
+        onMouseleavePassive: onMouseleave
+      }), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default", {}, () => [
+            createTextVNode(toDisplayString(_ctx.label), 1)
+          ])
+        ]),
+        _: 3
+      }, 16, ["class"]);
+    };
+  }
+});
+function useInjectedGroupState(groupKey) {
+  const group = inject(groupKey, void 0);
+  const isInGroup = computed(() => !isEmpty(group));
+  function getGroupOrLocalRef(propName, props, emit) {
+    if (group == null ? void 0 : group.value) {
+      const groupPropValue = unref(group.value)[propName];
+      return computed({
+        get() {
+          return groupPropValue == null ? void 0 : groupPropValue.value;
+        },
+        set(value) {
+          groupPropValue.value = value;
+        }
+      });
+    }
+    const propRef = toRef(props, propName);
+    return computed({
+      get() {
+        return propRef.value;
+      },
+      set(value) {
+        if (emit)
+          emit(`update:${propName}`, value);
+      }
+    });
+  }
+  return {
+    group,
+    isInGroup,
+    getGroupOrLocalRef
+  };
+}
+const VvButtonEvents = ["update:modelValue"];
+const VvButtonProps = {
+  ...ActionProps,
+  ...IdProps,
+  ...ModifiersProps,
+  ...UnselectableProps,
+  ...LoadingProps,
+  /**
+   * Button icon
+   */
+  icon: [String, Object],
+  /**
+   * Button icon position
+   */
+  iconPosition: {
+    type: String,
+    default: Side.left,
+    validator: (value) => Object.values(Side).includes(value)
+  },
+  /**
+   * Loading icon
+   */
+  loadingIcon: { type: String, default: "eos-icons:bubble-loading" },
+  /**
+   * Enable button toggle
+   */
+  toggle: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * Button toggle value
+   */
+  value: {
+    type: [String, Number, Boolean],
+    default: void 0
+  },
+  /**
+   * Value associated with the unchecked state
+   */
+  uncheckedValue: {
+    type: [String, Number, Boolean],
+    default: void 0
+  },
+  /**
+   * Button toggle model value
+   */
+  modelValue: {
+    type: [String, Number, Boolean],
+    default: void 0
+  }
+};
+function useGroupProps(props, emit) {
+  const { group, isInGroup, getGroupOrLocalRef } = useInjectedGroupState(INJECTION_KEY_BUTTON_GROUP);
+  const { id, iconPosition, icon, label, pressed } = toRefs(props);
+  const modelValue = getGroupOrLocalRef("modelValue", props, emit);
+  const toggle = getGroupOrLocalRef("toggle", props);
+  const unselectable = getGroupOrLocalRef(
+    "unselectable",
+    props
+  );
+  const multiple = computed(() => (group == null ? void 0 : group.value.multiple.value) ?? false);
+  const modifiers = computed(() => {
+    let localModifiers = props.modifiers;
+    let groupModifiers = group == null ? void 0 : group.value.modifiers.value;
+    const toReturn = /* @__PURE__ */ new Set();
+    if (localModifiers) {
+      if (!Array.isArray(localModifiers)) {
+        localModifiers = localModifiers.split(" ");
+      }
+      localModifiers.forEach((modifier) => toReturn.add(modifier));
+    }
+    if (groupModifiers) {
+      if (!Array.isArray(groupModifiers)) {
+        groupModifiers = groupModifiers.split(" ");
+      }
+      groupModifiers.forEach((modifier) => toReturn.add(modifier));
+    }
+    return Array.from(toReturn);
+  });
+  const disabled = computed(
+    () => {
+      var _a;
+      return Boolean(props.disabled || ((_a = group == null ? void 0 : group.value) == null ? void 0 : _a.disabled.value));
+    }
+  );
+  return {
+    // group props
+    group,
+    isInGroup,
+    modelValue,
+    toggle,
+    unselectable,
+    multiple,
+    modifiers,
+    disabled,
+    // local props
+    id,
+    pressed,
+    iconPosition,
+    icon,
+    label
+  };
+}
+const _hoisted_1$1 = {
+  key: 1,
+  class: "vv-button__label"
+};
+const _hoisted_2$1 = {
+  key: 1,
+  class: "vv-button__label"
+};
+const __default__$1 = {
+  name: "VvButton"
+};
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  ...__default__$1,
+  props: VvButtonProps,
+  emits: VvButtonEvents,
+  setup(__props, { expose: __expose, emit }) {
+    const props = __props;
+    const attrs = useAttrs();
+    const slots = useSlots();
+    const {
+      id,
+      modifiers,
+      iconPosition,
+      icon,
+      label,
+      modelValue,
+      disabled,
+      toggle,
+      unselectable
+    } = useGroupProps(props, emit);
+    const hasId = useUniqueId(id);
+    const name = computed(() => (attrs == null ? void 0 : attrs.name) || hasId.value);
+    const element = ref(null);
+    const $el = computed(() => {
+      var _a;
+      return (_a = element.value) == null ? void 0 : _a.$el;
+    });
+    __expose({ $el });
+    const pressed = computed(() => {
+      if (!toggle.value) {
+        return props.pressed;
+      }
+      if (Array.isArray(modelValue.value)) {
+        return contains(name.value, modelValue.value);
+      }
+      return equals(name.value, modelValue.value);
+    });
+    const bemCssClasses = useModifiers(
+      "vv-button",
+      modifiers,
+      computed(() => ({
+        reverse: [Side.right, Side.bottom].includes(
+          iconPosition.value
+        ),
+        column: [Side.top, Side.bottom].includes(
+          iconPosition.value
+        ),
+        "icon-only": Boolean(
+          (icon == null ? void 0 : icon.value) && !(label == null ? void 0 : label.value) && !slots.default
+        )
+      }))
+    );
+    const hasIconProps = computed(
+      () => typeof (icon == null ? void 0 : icon.value) === "string" ? { name: icon == null ? void 0 : icon.value } : icon == null ? void 0 : icon.value
+    );
+    const toggleValue = computed(() => {
+      return props.value !== void 0 ? props.value : name.value;
+    });
+    const onClick = () => {
+      if (toggle.value) {
+        if (Array.isArray(modelValue.value)) {
+          if (contains(toggleValue.value, modelValue.value)) {
+            if (unselectable.value) {
+              modelValue.value = modelValue.value.filter(
+                (n) => n !== toggleValue.value
+              );
+            }
+            return;
+          }
+          modelValue.value.push(toggleValue.value);
+          return;
+        }
+        if (toggleValue.value === modelValue.value && unselectable.value) {
+          modelValue.value = props.uncheckedValue;
+          return;
+        }
+        modelValue.value = toggleValue.value;
+      }
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$2, mergeProps({
+        disabled: unref(disabled),
+        pressed: unref(pressed),
+        active: _ctx.active,
+        type: _ctx.type,
+        to: _ctx.to,
+        href: _ctx.href,
+        target: _ctx.target,
+        rel: _ctx.rel
+      }, {
+        id: unref(hasId),
+        ref_key: "element",
+        ref: element,
+        class: unref(bemCssClasses),
+        onClick
+      }), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default", {}, () => [
+            _ctx.loading ? renderSlot(_ctx.$slots, "loading", { key: 0 }, () => [
+              _ctx.loadingIcon ? (openBlock(), createBlock(_sfc_main$9, {
+                key: 0,
+                class: "vv-button__loading-icon",
+                name: _ctx.loadingIcon
+              }, null, 8, ["name"])) : createCommentVNode("", true),
+              _ctx.loadingLabel ? (openBlock(), createElementBlock("span", _hoisted_1$1, toDisplayString(_ctx.loadingLabel), 1)) : createCommentVNode("", true)
+            ]) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+              renderSlot(_ctx.$slots, "before"),
+              unref(icon) ? (openBlock(), createBlock(_sfc_main$9, mergeProps({
+                key: 0,
+                class: "vv-button__icon"
+              }, unref(hasIconProps)), null, 16)) : createCommentVNode("", true),
+              unref(label) ? (openBlock(), createElementBlock("span", _hoisted_2$1, [
+                renderSlot(_ctx.$slots, "label", {}, () => [
+                  createTextVNode(toDisplayString(unref(label)), 1)
+                ])
+              ])) : createCommentVNode("", true),
+              renderSlot(_ctx.$slots, "after")
+            ], 64))
+          ])
+        ]),
+        _: 3
+      }, 16, ["id", "class"]);
+    };
+  }
+});
 function useDefaults(componentName, propsDefinition, props) {
   const volver = useVolver();
   const volverComponentDefaults = computed(() => {
@@ -1927,7 +2349,12 @@ const _hoisted_9 = {
 };
 const __default__ = {
   name: "VvCombobox",
-  components: { VvDropdown: _sfc_main$6, VvDropdownOption: _sfc_main$4, VvDropdownOptgroup: _sfc_main$3 }
+  components: {
+    VvDropdown: _sfc_main$8,
+    VvDropdownOption: _sfc_main$6,
+    VvDropdownOptgroup: _sfc_main$5,
+    VvButton: _sfc_main$1
+  }
 };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
@@ -2032,6 +2459,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const hasDropdownId = computed(() => `${hasId.value}-dropdown`);
     const hasSearchId = computed(() => `${hasId.value}-search`);
     const hasLabelId = computed(() => `${hasId.value}-label`);
+    const dropdownEl = ref();
     const { hasIcon, hasIconBefore, hasIconAfter } = useComponentIcon(
       icon,
       iconPosition
@@ -2208,9 +2636,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           ref: wrapperEl,
           class: "vv-select__wrapper"
         }, [
-          createVNode(_sfc_main$6, mergeProps({
+          createVNode(_sfc_main$8, mergeProps({
+            ref_key: "dropdownEl",
+            ref: dropdownEl,
             modelValue: unref(expanded),
-            "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => isRef(expanded) ? expanded.value = $event : null)
+            "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => isRef(expanded) ? expanded.value = $event : null)
           }, unref(dropdownProps), {
             role: unref(DropdownRole).listbox,
             onAfterExpand,
@@ -2221,7 +2651,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 renderSlot(_ctx.$slots, "before", normalizeProps(guardReactiveProps(unref(slotProps))))
               ])) : createCommentVNode("", true),
               createElementVNode("div", _hoisted_5, [
-                unref(hasIconBefore) ? (openBlock(), createBlock(_sfc_main$7, mergeProps({
+                unref(hasIconBefore) ? (openBlock(), createBlock(_sfc_main$9, mergeProps({
                   key: 0,
                   class: "vv-select__icon"
                 }, unref(hasIcon)), null, 16)) : createCommentVNode("", true),
@@ -2241,7 +2671,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   renderSlot(_ctx.$slots, "value", normalizeProps(guardReactiveProps({ selectedOptions: unref(selectedOptions), onInput })), () => [
                     unref(hasValue) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
                       !_ctx.badges ? (openBlock(), createElementBlock("div", _hoisted_7, toDisplayString(unref(hasValue)), 1)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(unref(selectedOptions), (option, index) => {
-                        return openBlock(), createBlock(_sfc_main$1, {
+                        return openBlock(), createBlock(_sfc_main$3, {
                           key: index,
                           modifiers: _ctx.badgeModifiers,
                           class: "vv-select__badge"
@@ -2253,7 +2683,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                               "aria-label": unref(propsDefaults).deselectActionLabel,
                               onClick: withModifiers(($event) => onInput(option), ["stop"])
                             }, [
-                              createVNode(_sfc_main$7, { name: "close" })
+                              createVNode(_sfc_main$9, { name: "close" })
                             ], 8, _hoisted_8)) : createCommentVNode("", true)
                           ]),
                           _: 2
@@ -2264,7 +2694,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     ], 64))
                   ])
                 ], 16, _hoisted_6),
-                unref(hasIconAfter) ? (openBlock(), createBlock(_sfc_main$7, mergeProps({
+                unref(hasIconAfter) ? (openBlock(), createBlock(_sfc_main$9, mergeProps({
                   key: 1,
                   class: "vv-select__icon vv-select__icon-after"
                 }, unref(hasIcon)), null, 16)) : createCommentVNode("", true)
@@ -2277,13 +2707,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               unref(filteredOptions).length ? (openBlock(true), createElementBlock(Fragment, { key: 0 }, renderList(unref(filteredOptions), (option, index) => {
                 return openBlock(), createElementBlock(Fragment, { key: index }, [
                   isGroup(option) ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-                    createVNode(_sfc_main$3, {
+                    createVNode(_sfc_main$5, {
                       label: unref(getOptionLabel)(option)
                     }, null, 8, ["label"]),
                     (openBlock(true), createElementBlock(Fragment, null, renderList(unref(getOptionGrouped)(
                       option
                     ), (item, i) => {
-                      return openBlock(), createBlock(_sfc_main$4, mergeProps({
+                      return openBlock(), createBlock(_sfc_main$6, mergeProps({
                         disabled: unref(getOptionDisabled)(item),
                         selected: getOptionSelected(item),
                         unselectable: _ctx.unselectable,
@@ -2308,7 +2738,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         _: 2
                       }, 1040, ["onClickPassive"]);
                     }), 128))
-                  ], 64)) : (openBlock(), createBlock(_sfc_main$4, mergeProps({ key: 1 }, {
+                  ], 64)) : (openBlock(), createBlock(_sfc_main$6, mergeProps({ key: 1 }, {
                     disabled: unref(getOptionDisabled)(option),
                     selected: getOptionSelected(option),
                     unselectable: _ctx.unselectable,
@@ -2332,7 +2762,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                     _: 2
                   }, 1040, ["onClickPassive"]))
                 ], 64);
-              }), 128)) : !_ctx.options.length ? (openBlock(), createBlock(_sfc_main$4, {
+              }), 128)) : !_ctx.options.length ? (openBlock(), createBlock(_sfc_main$6, {
                 key: 1,
                 modifiers: "inert"
               }, {
@@ -2342,7 +2772,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   ])
                 ]),
                 _: 3
-              })) : (openBlock(), createBlock(_sfc_main$4, {
+              })) : (openBlock(), createBlock(_sfc_main$6, {
                 key: 2,
                 modifiers: "inert"
               }, {
@@ -2354,6 +2784,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 _: 3
               }))
             ]),
+            after: withCtx(() => [
+              renderSlot(_ctx.$slots, "dropdown::after", {}, () => {
+                var _a;
+                return [
+                  ((_a = unref(dropdownEl)) == null ? void 0 : _a.dropdownCustomPosition) === "true" ? (openBlock(), createBlock(_sfc_main$1, {
+                    key: 0,
+                    label: "Close",
+                    modifiers: "secondary",
+                    onClick: _cache[1] || (_cache[1] = ($event) => unref(dropdownEl).hide())
+                  })) : createCommentVNode("", true)
+                ];
+              })
+            ]),
             _: 2
           }, [
             unref(searchable) || _ctx.$slots["dropdown::before"] ? {
@@ -2379,13 +2822,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 ]) : createCommentVNode("", true)
               ]),
               key: "0"
-            } : void 0,
-            _ctx.$slots["dropdown::after"] ? {
-              name: "after",
-              fn: withCtx(() => [
-                renderSlot(_ctx.$slots, "dropdown::after")
-              ]),
-              key: "1"
             } : void 0
           ]), 1040, ["modelValue", "role"])
         ], 512),
@@ -2422,8 +2858,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             key: "3"
           } : void 0
         ]), 1032, ["id"])
-      ], 10, _hoisted_1)) : (openBlock(), createBlock(_sfc_main$2, mergeProps({ key: 1 }, unref(selectProps), {
-        "onUpdate:modelValue": _cache[2] || (_cache[2] = ($event) => emit("update:modelValue", $event))
+      ], 10, _hoisted_1)) : (openBlock(), createBlock(_sfc_main$4, mergeProps({ key: 1 }, unref(selectProps), {
+        "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => emit("update:modelValue", $event))
       }), null, 16));
     };
   }