@volverjs/ui-vue 0.0.3 → 0.0.5-beta.1

package/dist/components/VvButton/VvButton.es.js

@@ -1,6 +1,7 @@
-import { defineComponent as E, unref as c, openBlock as b, createBlock as B, mergeProps as C, createCommentVNode as I, resolveDynamicComponent as Q, withCtx as T, renderSlot as w, createElementBlock as L, toDisplayString as F, Fragment as X, createTextVNode as Z } from "vue";
-import { iconExists as j, Icon as ee, addIcon as te } from "@iconify/vue";
-const oe = {
+import { inject, computed, unref, defineComponent, ref, toRefs, openBlock, createBlock, mergeProps, createCommentVNode, watch, resolveDynamicComponent, withCtx, renderSlot, createTextVNode, toDisplayString, toRef, useAttrs, useSlots, createElementBlock, Fragment } from "vue";
+import { iconExists, Icon, addIcon } from "@iconify/vue";
+import { nanoid } from "nanoid";
+const VvIconProps = {
   /**
    * Color
    */
@@ -24,7 +25,7 @@ const oe = {
    */
   name: {
     type: String,
-    required: !0
+    required: true
   },
   /**
    * By default 'vv'
@@ -93,352 +94,810 @@ const oe = {
   modifiers: {
     type: [String, Array]
   }
-}, re = {
+};
+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 ActionTag = /* @__PURE__ */ ((ActionTag2) => {
+  ActionTag2["nuxtLink"] = "nuxt-link";
+  ActionTag2["routerLink"] = "router-link";
+  ActionTag2["a"] = "a";
+  ActionTag2["button"] = "button";
+  return ActionTag2;
+})(ActionTag || {});
+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_BUTTON_GROUP = Symbol.for("buttonGroup");
+const INJECTION_KEY_DROPDOWN_TRIGGER = Symbol.for("dropdownTrigger");
+const INJECTION_KEY_DROPDOWN_ACTION = Symbol.for("dropdownAction");
+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__$2 = {
   name: "VvIcon"
-}, q = /* @__PURE__ */ E({
-  ...re,
-  props: oe,
-  setup(e) {
-    const l = e, s = ref(!0), n = useVolver(), { modifiers: d } = toRefs(l), k = useBemModifiers("vv-icon", d), m = computed(() => l.provider || (n == null ? void 0 : n.provider)), _ = computed(() => {
-      const t = l.name ?? "", o = `@${m.value}:${l.prefix}:${l.name}`;
-      return j(t) ? t : j(o) ? o : (n == null ? void 0 : n.iconsCollections.find(
-        (u) => {
-          const g = `@${m.value}:${u.prefix}:${t}`;
-          if (j(g))
-            return g;
-        }
-      )) || t;
+};
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  ...__default__$2,
+  props: VvIconProps,
+  setup(__props) {
+    const props = __props;
+    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}:${props.name}`;
+      if (iconExists(_name)) {
+        return _name;
+      } else if (iconExists(iconName)) {
+        return iconName;
+      } else {
+        return (volver == null ? void 0 : volver.iconsCollections.find(
+          (iconsCollection) => {
+            const icon2 = `@${provider.value}:${iconsCollection.prefix}:${_name}`;
+            if (iconExists(icon2)) {
+              return icon2;
+            }
+          }
+        )) || _name;
+      }
     });
-    function y(t) {
-      let o = null;
-      if (typeof window > "u") {
-        const { JSDOM: h } = require("jsdom");
-        o = new h().window;
+    function getSvgContent(svg) {
+      let dom = null;
+      if (typeof window === "undefined") {
+        const { JSDOM } = require("jsdom");
+        dom = new JSDOM().window;
       }
-      return (o ? new o.DOMParser() : new window.DOMParser()).parseFromString(t, "text/html").querySelector("svg");
+      const domParser = dom ? new dom.DOMParser() : new window.DOMParser();
+      const svgDomString = domParser.parseFromString(svg, "text/html");
+      const svgEl = svgDomString.querySelector("svg");
+      return svgEl;
     }
-    function a(t) {
-      const o = y(t), u = (o == null ? void 0 : o.innerHTML.trim()) || "";
-      o && u && te(`@${m.value}:${l.prefix}:${l.name}`, {
-        body: u,
-        // Set height and width from svg content
-        height: o.viewBox.baseVal.height,
-        width: o.viewBox.baseVal.width
-      });
+    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(`During fetch icon: ${e == null ? void 0 : e.message}`);
+        });
+      } else if (props.svg) {
+        addIconFromSvg(props.svg);
+      }
     }
-    return n && (l.src && !j(`@${m.value}:${l.prefix}:${l.name}`) ? (s.value = !1, n.fetchIcon(l.src).then((t) => {
-      t && (a(t), s.value = !0);
-    }).catch((t) => {
-      throw new Error(`During fetch icon: ${t == null ? void 0 : t.message}`);
-    })) : l.svg && a(l.svg)), (t, o) => c(s) ? (b(), B(c(ee), C({
-      key: 0,
-      class: c(k)
-    }, {
-      inline: t.inline,
-      width: t.width,
-      height: t.height,
-      horizontalFlip: t.horizontalFlip,
-      verticalFlip: t.verticalFlip,
-      flip: t.flip,
-      rotate: t.rotate,
-      color: t.color,
-      onLoad: t.onLoad,
-      icon: c(_)
-    }), null, 16, ["class"])) : I("", !0);
+    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: _ctx.rotate,
+        color: _ctx.color,
+        onLoad: _ctx.onLoad,
+        icon: unref(icon)
+      }), null, 16, ["class"])) : createCommentVNode("", true);
+    };
   }
 });
-var p = /* @__PURE__ */ ((e) => (e.left = "left", e.right = "right", e.top = "top", e.bottom = "bottom", e))(p || {}), G = /* @__PURE__ */ ((e) => (e.topStart = "top-start", e.topEnd = "top-end", e.bottomStart = "bottom-start", e.bottomEnd = "bottom-end", e.leftStart = "left-start", e.leftEnd = "left-end", e.rightStart = "right-start", e.rightEnd = "right-end", e))(G || {}), M = /* @__PURE__ */ ((e) => (e.before = "before", e.after = "after", e))(M || {});
-const ne = Symbol.for("buttonGroup"), ae = {
+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 LoadingProps = {
+  /**
+   * Loading status
+   */
+  loading: Boolean,
+  /**
+   * Loading label
+   */
+  loadingLabel: {
+    type: String,
+    default: "Loading..."
+  }
+};
+const DisabledProps = {
   /**
    * Whether the form control is disabled
    */
   disabled: Boolean
-}, le = {
+};
+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]
 };
-M.before;
-const se = {
+({
+  /**
+   * 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 UnselectableProps = {
   /**
    * If true the input will be unselectable
    */
-  unselectable: { type: Boolean, default: !0 }
-}, ie = {
+  unselectable: { type: Boolean, default: true }
+};
+const IdProps = {
   /**
    * Global attribute id
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
    */
   id: [String, Number]
 };
-p.bottom;
-var R = /* @__PURE__ */ ((e) => (e.button = "button", e.submit = "submit", e.reset = "reset", e))(R || {}), v = /* @__PURE__ */ ((e) => (e.nuxtLink = "nuxt-link", e.routerLink = "router-link", e.a = "a", e.button = "button", e))(v || {}), z = /* @__PURE__ */ ((e) => (e._blank = "_blank", e._self = "_self", e._parent = "_parent", e._top = "_top", e))(z || {});
-const ue = ["update:modelValue"], ce = {
-  ...ie,
-  ...le,
-  ...ae,
-  ...se,
+({
   /**
-   * Button icon
+   * Dropdown placement
    */
-  icon: [String, Object],
-  /**
-   * Button icon position
-   */
-  iconPosition: {
+  placement: {
     type: String,
-    default: p.left,
-    validator: (e) => Object.values(p).includes(e)
+    default: Side.bottom,
+    validator: (value) => {
+      return Object.values(Side).includes(value) || Object.values(Placement).includes(value);
+    }
   },
   /**
-   * Button label
+   * Dropdown show / hide transition name
    */
-  label: [String, Number],
+  transitionName: {
+    type: String
+  },
   /**
-   * Loading status
+   * Offset of the dropdown from the trigger
+   * @see https://floating-ui.com/docs/offset
    */
-  loading: Boolean,
+  offset: {
+    type: [Number, String, Object],
+    default: 0
+  },
   /**
-   * Loading icon
+   * Move dropdown to the side if there is no space in the default position
+   * @see https://floating-ui.com/docs/shift
    */
-  loadingIcon: { type: String, default: "eos-icons:bubble-loading" },
+  shift: {
+    type: [Boolean, Object],
+    default: false
+  },
   /**
-   * Loading label
+   * Flip dropdown position if there is no space in the default position
+   * @see https://floating-ui.com/docs/flip
    */
-  loadingLabel: {
-    type: String,
-    default: "Loading..."
+  flip: {
+    type: [Boolean, Object],
+    default: true
   },
   /**
-   * 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/)
+   * Size of the dropdown
+   * @see https://floating-ui.com/docs/size
    */
-  to: {
-    type: [String, Object]
+  size: {
+    type: [Boolean, Object],
+    default: () => ({ padding: 10 })
   },
   /**
-   * Link href
+   * Automatically change the position of the dropdown
+   * @see https://floating-ui.com/docs/autoPlacement
    */
-  href: String,
+  autoPlacement: {
+    type: [Boolean, Object],
+    default: false
+  },
   /**
-   * Link target
+   * Add arrow to the dropdown
+   * @see https://floating-ui.com/docs/arrow
    */
-  target: {
-    type: String,
-    validator: (e) => Object.values(z).includes(e)
+  arrow: {
+    type: Boolean,
+    default: false
   },
-  active: Boolean,
   /**
-   * Button pressed mode
+   * Close dropdown on click outside
    */
-  pressed: Boolean,
+  autoClose: {
+    type: Boolean,
+    default: true
+  },
   /**
-   * Link rel
+   * Autofocus first item on dropdown open
    */
-  rel: {
-    type: String,
-    default: "noopener noreferrer"
+  autofocusFirst: {
+    type: Boolean,
+    default: true
   },
+  /**
+   * Set dropdown width to the same as the trigger
+   */
+  triggerWidth: {
+    type: Boolean
+  }
+});
+const ActionProps = {
+  ...DisabledProps,
+  ...LabelProps,
+  ...PressedProps,
+  ...ActiveProps,
+  ...LinkProps,
   /**
    * Button type
    */
   type: {
     type: String,
-    default: "button",
-    validator: (e) => Object.values(R).includes(e)
+    default: ButtonType.button,
+    validator: (value) => Object.values(ButtonType).includes(value)
+  }
+};
+const VvActionEvents = ["click", "mouseover", "mouseleave"];
+const VvActionProps = ActionProps;
+function useInjectedDropdownTrigger() {
+  return inject(INJECTION_KEY_DROPDOWN_TRIGGER, {});
+}
+function useInjectedDropdownAction() {
+  return inject(INJECTION_KEY_DROPDOWN_ACTION, {});
+}
+const __default__$1 = {
+  name: "VvAction"
+};
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  ...__default__$1,
+  props: VvActionProps,
+  emits: VvActionEvents,
+  setup(__props, { 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
+      };
+      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 equals(obj1, obj2, field) {
+  if (field)
+    return resolveFieldData(obj1, field) === resolveFieldData(obj2, field);
+  else
+    return deepEquals(obj1, obj2);
+}
+function deepEquals(a, b) {
+  if (a === b)
+    return true;
+  if (a && b && typeof a == "object" && typeof b == "object") {
+    const arrA = Array.isArray(a);
+    const arrB = Array.isArray(b);
+    let i, length, key;
+    if (arrA && arrB) {
+      length = a.length;
+      if (length != b.length)
+        return false;
+      for (i = length; i-- !== 0; )
+        if (!deepEquals(a[i], b[i]))
+          return false;
+      return true;
+    }
+    if (arrA != arrB)
+      return false;
+    const dateA = a instanceof Date, dateB = b instanceof Date;
+    if (dateA != dateB)
+      return false;
+    if (dateA && dateB)
+      return a.getTime() == b.getTime();
+    const regexpA = a instanceof RegExp, regexpB = b instanceof RegExp;
+    if (regexpA != regexpB)
+      return false;
+    if (regexpA && regexpB)
+      return a.toString() == b.toString();
+    const keys = Object.keys(a);
+    length = keys.length;
+    if (length !== Object.keys(b).length)
+      return false;
+    for (i = length; i-- !== 0; )
+      if (!Object.prototype.hasOwnProperty.call(b, keys[i]))
+        return false;
+    for (i = length; i-- !== 0; ) {
+      key = keys[i];
+      if (!deepEquals(a[key], b[key]))
+        return false;
+    }
+    return true;
+  }
+  return a !== a && b !== b;
+}
+function resolveFieldData(data, field) {
+  if (data && Object.keys(data).length && field) {
+    if (field.indexOf(".") === -1) {
+      return data[field];
+    } else {
+      const fields = field.split(".");
+      let value = data;
+      for (let i = 0, len = fields.length; i < len; ++i) {
+        if (data == null) {
+          return null;
+        }
+        value = value[fields[i]];
+      }
+      return value;
+    }
+  } else {
+    return null;
+  }
+}
+function contains(value, list) {
+  if (value != null && list && list.length) {
+    for (const val of list) {
+      if (equals(value, val)) {
+        return true;
+      }
+    }
+  }
+  return false;
+}
+function isEmpty(value) {
+  return ((value2) => value2 === null || value2 === void 0 || value2 === "" || Array.isArray(value2) && value2.length === 0 || !(value2 instanceof Date) && typeof value2 === "object" && Object.keys(value2).length === 0)(unref(value));
+}
+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" },
   toggle: {
     type: Boolean,
-    default: !1
+    default: false
   },
   modelValue: String
 };
-function de(e, l) {
-  var S;
-  const { group: s, isInGroup: n, getGroupOrLocalRef: d } = useInjectedGroupState(ne), {
-    id: k,
-    iconPosition: m,
-    icon: _,
-    label: y,
-    pressed: a,
-    modifiers: t
-  } = toRefs(e), o = d("modelValue", e, l), u = d("disabled", e), g = d("toggle", e), O = d(
+function useGroupProps(props, emit) {
+  const { group, isInGroup, getGroupOrLocalRef } = useInjectedGroupState(INJECTION_KEY_BUTTON_GROUP);
+  const {
+    id,
+    iconPosition,
+    icon,
+    label,
+    pressed,
+    modifiers: localModifiers
+  } = toRefs(props);
+  const modelValue = getGroupOrLocalRef("modelValue", props, emit);
+  const toggle = getGroupOrLocalRef("toggle", props);
+  const unselectable = getGroupOrLocalRef(
     "unselectable",
-    e
-  ), h = ((S = s == null ? void 0 : s.value) == null ? void 0 : S.multiple) ?? ref(!1), f = computed(() => {
-    var i;
-    const $ = t != null && t.value ? Array.isArray(t.value) ? t.value : [t.value] : [], V = (i = s == null ? void 0 : s.value.itemModifiers) != null && i.value ? Array.isArray(s.value.itemModifiers.value) ? s.value.itemModifiers.value : [s.value.itemModifiers.value] : [];
-    return [...$, ...V];
+    props
+  );
+  const multiple = computed(() => (group == null ? void 0 : group.value.multiple.value) ?? false);
+  const modifiers = computed(() => {
+    var _a;
+    const localValue = (localModifiers == null ? void 0 : localModifiers.value) ? Array.isArray(localModifiers.value) ? localModifiers.value : localModifiers.value.split(" ") : [];
+    const groupValue = ((_a = group == null ? void 0 : group.value.itemModifiers) == null ? void 0 : _a.value) ? Array.isArray(group.value.itemModifiers.value) ? group.value.itemModifiers.value : group.value.itemModifiers.value.split(" ") : [];
+    return [...localValue, ...groupValue];
   });
+  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: s,
-    isInGroup: n,
-    modelValue: o,
-    disabled: u,
-    toggle: g,
-    unselectable: O,
-    multiple: h,
+    group,
+    isInGroup,
+    modelValue,
+    toggle,
+    unselectable,
+    multiple,
+    modifiers,
+    disabled,
     // local props
-    id: k,
-    modifiers: f,
-    pressed: a,
-    iconPosition: m,
-    icon: _,
-    label: y
+    id,
+    pressed,
+    iconPosition,
+    icon,
+    label
   };
 }
-const fe = {
+const useUniqueId = (id) => computed(() => String((id == null ? void 0 : id.value) || nanoid()));
+const _hoisted_1 = {
   key: 1,
   class: "vv-button__label"
-}, ve = {
+};
+const _hoisted_2 = {
   key: 1,
   class: "vv-button__label"
-}, pe = {
+};
+const __default__ = {
   name: "VvButton"
-}, be = /* @__PURE__ */ E({
-  ...pe,
-  props: ce,
-  emits: ue,
-  setup(e, { expose: l, emit: s }) {
-    const n = e, d = useAttrs(), k = useSlots(), {
-      id: m,
-      modifiers: _,
-      iconPosition: y,
-      icon: a,
-      label: t,
-      modelValue: o,
-      disabled: u,
-      toggle: g,
-      unselectable: O
-    } = de(n, s), h = useUniqueId(m), f = computed(() => (d == null ? void 0 : d.name) || h.value), S = useVolver(), $ = ref(null);
-    l({ $el: $ });
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  props: VvButtonProps,
+  emits: VvButtonEvents,
+  setup(__props, { expose, emit }) {
+    const props = __props;
+    const attrs = useAttrs();
+    const slots = useSlots();
     const {
-      reference: V,
-      bus: i,
-      aria: P
-    } = useInjectedDropdownTrigger();
-    watch(
-      () => $.value,
-      (r) => {
-        V && (V.value = r);
+      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;
       }
-    );
-    const { role: U } = useInjectedDropdownAction(), N = computed(() => {
-      switch (!0) {
-        case u.value:
-          return v.button;
-        case n.to !== void 0:
-          return S != null && S.nuxt ? v.nuxtLink : v.routerLink;
-        case n.href !== void 0:
-          return v.a;
-        default:
-          return v.button;
+      if (Array.isArray(modelValue.value)) {
+        return contains(name.value, modelValue.value);
       }
-    }), A = computed(() => g.value ? Array.isArray(o.value) ? contains(f.value, o.value) : equals(f.value, o.value) : n.pressed), J = useBemModifiers(
+      return equals(name.value, modelValue.value);
+    });
+    const bemCssClasses = useModifiers(
       "vv-button",
-      _,
+      modifiers,
       computed(() => ({
-        active: n.active,
-        pressed: A.value,
-        disabled: u.value,
-        reverse: [p.right, p.bottom].includes(y.value),
-        column: [p.top, p.bottom].includes(y.value),
-        iconOnly: Boolean((a == null ? void 0 : a.value) && !(t != null && t.value) && !k.default)
+        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
+        )
       }))
-    ), H = computed(
-      () => typeof (a == null ? void 0 : a.value) == "string" ? { name: a == null ? void 0 : a.value } : a == null ? void 0 : a.value
-    ), K = computed(() => {
-      const r = {
-        ...P == null ? void 0 : P.value,
-        "aria-pressed": A.value ? !0 : void 0,
-        class: J.value,
-        role: U
-      };
-      switch (N.value) {
-        case v.a:
-          return {
-            ...r,
-            role: r.role ?? "button",
-            href: n.href,
-            target: n.target,
-            rel: n.rel
-          };
-        case v.routerLink:
-        case v.nuxtLink:
-          return {
-            ...r,
-            role: r.role ?? "button",
-            to: n.to,
-            target: n.target
-          };
-        default:
-          return {
-            ...r,
-            type: n.type,
-            disabled: u.value
-          };
-      }
-    }), W = (r) => {
-      if (i == null || i.emit("click", r), g.value) {
-        if (Array.isArray(o.value)) {
-          if (contains(f.value, o.value)) {
-            O.value && (o.value = o.value.filter(
-              (D) => D !== f.value
-            ));
+    );
+    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 onClick = () => {
+      if (toggle.value) {
+        if (Array.isArray(modelValue.value)) {
+          if (contains(name.value, modelValue.value)) {
+            if (unselectable.value) {
+              modelValue.value = modelValue.value.filter(
+                (n) => n !== name.value
+              );
+            }
             return;
           }
-          o.value.push(f.value);
+          modelValue.value.push(name.value);
           return;
         }
-        if (equals(f, o.value) && O.value) {
-          o.value = void 0;
+        if (equals(name.value, modelValue.value) && unselectable.value) {
+          modelValue.value = void 0;
           return;
         }
-        o.value = f.value;
+        modelValue.value = name.value;
       }
-    }, Y = (r) => {
-      i == null || i.emit("mouseover", r);
-    }, x = (r) => {
-      i == null || i.emit("mouseleave", r);
     };
-    return (r, D) => (b(), B(Q(c(N)), C(c(K), {
-      id: c(h),
-      ref_key: "$el",
-      ref: $,
-      onClickPassive: W,
-      onMouseoverPassive: Y,
-      onMouseleavePassive: x
-    }), {
-      default: T(() => [
-        w(r.$slots, "default", {}, () => [
-          r.loading ? w(r.$slots, "loading", { key: 0 }, () => [
-            r.loadingIcon ? (b(), B(q, {
-              key: 0,
-              class: "vv-button__loading-icon",
-              name: r.loadingIcon
-            }, null, 8, ["name"])) : I("", !0),
-            r.loadingLabel ? (b(), L("span", fe, F(r.loadingLabel), 1)) : I("", !0)
-          ]) : (b(), L(X, { key: 1 }, [
-            w(r.$slots, "before"),
-            c(a) ? (b(), B(q, C({
-              key: 0,
-              class: "vv-button__icon"
-            }, c(H)), null, 16)) : I("", !0),
-            c(t) ? (b(), L("span", ve, [
-              w(r.$slots, "label", {}, () => [
-                Z(F(c(t)), 1)
-              ])
-            ])) : I("", !0),
-            w(r.$slots, "after")
-          ], 64))
-        ])
-      ]),
-      _: 3
-    }, 16, ["id"]));
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(_sfc_main$1, 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$2, {
+                key: 0,
+                class: "vv-button__loading-icon",
+                name: _ctx.loadingIcon
+              }, null, 8, ["name"])) : createCommentVNode("", true),
+              _ctx.loadingLabel ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(_ctx.loadingLabel), 1)) : createCommentVNode("", true)
+            ]) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+              renderSlot(_ctx.$slots, "before"),
+              unref(icon) ? (openBlock(), createBlock(_sfc_main$2, mergeProps({
+                key: 0,
+                class: "vv-button__icon"
+              }, unref(hasIconProps)), null, 16)) : createCommentVNode("", true),
+              unref(label) ? (openBlock(), createElementBlock("span", _hoisted_2, [
+                renderSlot(_ctx.$slots, "label", {}, () => [
+                  createTextVNode(toDisplayString(unref(label)), 1)
+                ])
+              ])) : createCommentVNode("", true),
+              renderSlot(_ctx.$slots, "after")
+            ], 64))
+          ])
+        ]),
+        _: 3
+      }, 16, ["id", "class"]);
+    };
   }
 });
 export {
-  be as default
+  _sfc_main as default
 };