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

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

@@ -1,7 +1,7 @@
-import { inject as V, computed as g, unref as p, defineComponent as G, ref as D, toRefs as z, openBlock as k, createBlock as j, mergeProps as w, createCommentVNode as I, watch as ee, resolveDynamicComponent as te, withCtx as K, renderSlot as $, createTextVNode as U, toDisplayString as N, toRef as ne, useAttrs as re, useSlots as oe, createElementBlock as L, Fragment as se } from "vue";
-import { iconExists as B, Icon as le, addIcon as ae } from "@iconify/vue";
-import { nanoid as ie } from "nanoid";
-const ue = {
+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
    */
@@ -25,7 +25,7 @@ const ue = {
    */
   name: {
     type: String,
-    required: !0
+    required: true
   },
   /**
    * By default 'vv'
@@ -95,77 +95,170 @@ const ue = {
     type: [String, Array]
   }
 };
-var S = /* @__PURE__ */ ((e) => (e.left = "left", e.right = "right", e.top = "top", e.bottom = "bottom", e))(S || {}), Y = /* @__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))(Y || {}), C = /* @__PURE__ */ ((e) => (e.before = "before", e.after = "after", e))(C || {}), R = /* @__PURE__ */ ((e) => (e.button = "button", e.submit = "submit", e.reset = "reset", e))(R || {}), h = /* @__PURE__ */ ((e) => (e.nuxtLink = "nuxt-link", e.routerLink = "router-link", e.a = "a", e.button = "button", e))(h || {}), W = /* @__PURE__ */ ((e) => (e._blank = "_blank", e._self = "_self", e._parent = "_parent", e._top = "_top", e))(W || {});
-const ce = Symbol.for("volver"), fe = Symbol.for("buttonGroup"), de = Symbol.for("dropdownTrigger"), ve = Symbol.for("dropdownAction");
-function H() {
-  return V(ce);
+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 Q(e, t, o) {
-  return g(() => {
-    const r = {
-      [e]: !0
-    }, s = typeof (t == null ? void 0 : t.value) == "string" ? t.value.split(" ") : t == null ? void 0 : t.value;
-    return s && Array.isArray(s) && s.forEach((i) => {
-      r[`${e}--${i}`] = !0;
-    }), o && Object.keys(o.value).forEach((i) => {
-      r[`${e}--${i}`] = p(o.value[i]);
-    }), r;
+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 pe = {
+const __default__$2 = {
   name: "VvIcon"
-}, T = /* @__PURE__ */ G({
-  ...pe,
-  props: ue,
-  setup(e) {
-    const t = e, o = D(!0), r = H(), { modifiers: s } = z(t), i = Q("vv-icon", s), v = g(() => t.provider || (r == null ? void 0 : r.provider)), f = g(() => {
-      const n = t.name ?? "", l = `@${v.value}:${t.prefix}:${t.name}`;
-      return B(n) ? n : B(l) ? l : (r == null ? void 0 : r.iconsCollections.find(
-        (m) => {
-          const b = `@${v.value}:${m.prefix}:${n}`;
-          if (B(b))
-            return b;
-        }
-      )) || n;
+};
+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 d(n) {
-      let l = null;
-      if (typeof window > "u") {
-        const { JSDOM: O } = require("jsdom");
-        l = new O().window;
+    function getSvgContent(svg) {
+      let dom = null;
+      if (typeof window === "undefined") {
+        const { JSDOM } = require("jsdom");
+        dom = new JSDOM().window;
       }
-      return (l ? new l.DOMParser() : new window.DOMParser()).parseFromString(n, "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(n) {
-      const l = d(n), m = (l == null ? void 0 : l.innerHTML.trim()) || "";
-      l && m && ae(`@${v.value}:${t.prefix}:${t.name}`, {
-        body: m,
-        // Set height and width from svg content
-        height: l.viewBox.baseVal.height,
-        width: l.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
+        });
+      }
     }
-    return r && (t.src && !B(`@${v.value}:${t.prefix}:${t.name}`) ? (o.value = !1, r.fetchIcon(t.src).then((n) => {
-      n && (a(n), o.value = !0);
-    }).catch((n) => {
-      throw new Error(`During fetch icon: ${n == null ? void 0 : n.message}`);
-    })) : t.svg && a(t.svg)), (n, l) => p(o) ? (k(), j(p(le), w({
-      key: 0,
-      class: p(i)
-    }, {
-      inline: n.inline,
-      width: n.width,
-      height: n.height,
-      horizontalFlip: n.horizontalFlip,
-      verticalFlip: n.verticalFlip,
-      flip: n.flip,
-      rotate: n.rotate,
-      color: n.color,
-      onLoad: n.onLoad,
-      icon: p(f)
-    }), null, 16, ["class"])) : I("", !0);
+    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 (_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);
+    };
   }
-}), ge = {
+});
+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/)
@@ -182,7 +275,7 @@ const pe = {
    */
   target: {
     type: String,
-    validator: (e) => Object.values(W).includes(e)
+    validator: (value) => Object.values(AnchorTarget).includes(value)
   },
   /**
    * Anchor rel
@@ -191,7 +284,8 @@ const pe = {
     type: String,
     default: "noopener noreferrer"
   }
-}, me = {
+};
+const LoadingProps = {
   /**
    * Loading status
    */
@@ -203,265 +297,405 @@ const pe = {
     type: String,
     default: "Loading..."
   }
-}, ye = {
+};
+const DisabledProps = {
   /**
    * Whether the form control is disabled
    */
   disabled: Boolean
-}, be = {
+};
+const ActiveProps = {
   /**
    * Whether the item is active
    */
   active: Boolean
-}, he = {
+};
+const PressedProps = {
   /**
    * Whether the item is pressed
    */
   pressed: Boolean
-}, Se = {
+};
+const LabelProps = {
   /**
    * The item label
    */
   label: [String, Number]
-}, Oe = {
+};
+const ModifiersProps = {
   /**
    * Component BEM modifiers
    */
   modifiers: [String, Array]
 };
-C.before;
-const ke = {
+({
+  /**
+   * 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 }
-}, _e = {
+  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]
 };
-S.bottom;
-const X = {
-  ...ye,
-  ...Se,
-  ...he,
-  ...be,
-  ...ge,
+({
+  /**
+   * Dropdown placement
+   */
+  placement: {
+    type: String,
+    default: Side.bottom,
+    validator: (value) => {
+      return Object.values(Side).includes(value) || Object.values(Placement).includes(value);
+    }
+  },
+  /**
+   * Dropdown show / hide transition name
+   */
+  transitionName: {
+    type: String
+  },
+  /**
+   * Offset of the dropdown from the trigger
+   * @see https://floating-ui.com/docs/offset
+   */
+  offset: {
+    type: [Number, String, Object],
+    default: 0
+  },
+  /**
+   * Move dropdown to the side if there is no space in the default position
+   * @see https://floating-ui.com/docs/shift
+   */
+  shift: {
+    type: [Boolean, Object],
+    default: false
+  },
+  /**
+   * Flip dropdown position if there is no space in the default position
+   * @see https://floating-ui.com/docs/flip
+   */
+  flip: {
+    type: [Boolean, Object],
+    default: true
+  },
+  /**
+   * Size of the dropdown
+   * @see https://floating-ui.com/docs/size
+   */
+  size: {
+    type: [Boolean, Object],
+    default: () => ({ padding: 10 })
+  },
+  /**
+   * Automatically change the position of the dropdown
+   * @see https://floating-ui.com/docs/autoPlacement
+   */
+  autoPlacement: {
+    type: [Boolean, Object],
+    default: false
+  },
+  /**
+   * Add arrow to the dropdown
+   * @see https://floating-ui.com/docs/arrow
+   */
+  arrow: {
+    type: Boolean,
+    default: false
+  },
+  /**
+   * Close dropdown on click outside
+   */
+  autoClose: {
+    type: Boolean,
+    default: true
+  },
+  /**
+   * Autofocus first item on dropdown open
+   */
+  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: R.button,
-    validator: (e) => Object.values(R).includes(e)
+    default: ButtonType.button,
+    validator: (value) => Object.values(ButtonType).includes(value)
   }
-}, $e = ["click", "mouseover", "mouseleave"], Ie = X;
-function je() {
-  return V(de, {});
+};
+const VvActionEvents = ["click", "mouseover", "mouseleave"];
+const VvActionProps = ActionProps;
+function useInjectedDropdownTrigger() {
+  return inject(INJECTION_KEY_DROPDOWN_TRIGGER, {});
 }
-function Pe() {
-  return V(ve, {});
+function useInjectedDropdownAction() {
+  return inject(INJECTION_KEY_DROPDOWN_ACTION, {});
 }
-const Ae = {
+const __default__$1 = {
   name: "VvAction"
-}, Be = /* @__PURE__ */ G({
-  ...Ae,
-  props: Ie,
-  emits: $e,
-  setup(e, { expose: t, emit: o }) {
-    const r = e, s = H(), i = D(null);
-    t({ $el: i });
+};
+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: v,
-      bus: f,
-      aria: d,
-      expanded: a
-    } = je();
-    ee(
-      () => i.value,
-      (u) => {
-        v && (v.value = u);
+      reference: dropdownTriggerReference,
+      bus: dropdownEventBus,
+      aria: dropdownAria,
+      expanded: dropdownExpanded
+    } = useInjectedDropdownTrigger();
+    watch(
+      () => element.value,
+      (newValue) => {
+        if (dropdownTriggerReference) {
+          dropdownTriggerReference.value = newValue;
+        }
       }
     );
-    const n = g(() => r.pressed || (a == null ? void 0 : a.value)), { role: l } = Pe(), m = g(() => {
-      switch (!0) {
-        case r.disabled:
-          return h.button;
-        case r.to !== void 0:
-          return s != null && s.nuxt ? h.nuxtLink : h.routerLink;
-        case r.href !== void 0:
-          return h.a;
+    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 h.button;
+          return ActionTag.button;
       }
-    }), b = g(() => {
-      const u = {
-        ...d == null ? void 0 : d.value,
-        "aria-pressed": n.value ? !0 : void 0,
-        role: l
+    });
+    const hasProps = computed(() => {
+      const toReturn = {
+        ...dropdownAria == null ? void 0 : dropdownAria.value,
+        "aria-pressed": pressed.value ? true : void 0,
+        role
       };
-      switch (m.value) {
-        case h.a:
+      switch (hasTag.value) {
+        case ActionTag.a:
           return {
-            ...u,
-            href: r.href,
-            target: r.target,
-            rel: r.rel
+            ...toReturn,
+            href: props.href,
+            target: props.target,
+            rel: props.rel
           };
-        case h.routerLink:
-        case h.nuxtLink:
+        case ActionTag.routerLink:
+        case ActionTag.nuxtLink:
           return {
-            ...u,
-            to: r.to,
-            target: r.target
+            ...toReturn,
+            to: props.to,
+            target: props.target
           };
         default:
           return {
-            ...u,
-            type: r.type,
-            disabled: r.disabled
+            ...toReturn,
+            type: props.type,
+            disabled: props.disabled
           };
       }
-    }), _ = (u) => {
-      if (r.disabled) {
-        u.preventDefault();
+    });
+    const onClick = (e) => {
+      if (props.disabled) {
+        e.preventDefault();
         return;
       }
-      f == null || f.emit("click", u), o("click", u);
-    }, O = (u) => {
-      f == null || f.emit("mouseover", u), o("mouseover", u);
-    }, y = (u) => {
-      f == null || f.emit("mouseleave", u), o("mouseleave", u);
+      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"]);
     };
-    return (u, P) => (k(), j(te(p(m)), w(p(b), {
-      ref_key: "element",
-      ref: i,
-      class: {
-        active: u.active,
-        pressed: p(n),
-        disabled: u.disabled
-      },
-      onClickPassive: _,
-      onMouseoverPassive: O,
-      onMouseleavePassive: y
-    }), {
-      default: K(() => [
-        $(u.$slots, "default", {}, () => [
-          U(N(u.label), 1)
-        ])
-      ]),
-      _: 3
-    }, 16, ["class"]));
   }
 });
-function M(e, t, o) {
-  return o ? q(e, o) === q(t, o) : F(e, t);
+function equals(obj1, obj2, field) {
+  if (field)
+    return resolveFieldData(obj1, field) === resolveFieldData(obj2, field);
+  else
+    return deepEquals(obj1, obj2);
 }
-function F(e, t) {
-  if (e === t)
-    return !0;
-  if (e && t && typeof e == "object" && typeof t == "object") {
-    const o = Array.isArray(e), r = Array.isArray(t);
-    let s, i, v;
-    if (o && r) {
-      if (i = e.length, i != t.length)
-        return !1;
-      for (s = i; s-- !== 0; )
-        if (!F(e[s], t[s]))
-          return !1;
-      return !0;
+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;
     }
-    if (o != r)
-      return !1;
-    const f = e instanceof Date, d = t instanceof Date;
-    if (f != d)
-      return !1;
-    if (f && d)
-      return e.getTime() == t.getTime();
-    const a = e instanceof RegExp, n = t instanceof RegExp;
-    if (a != n)
-      return !1;
-    if (a && n)
-      return e.toString() == t.toString();
-    const l = Object.keys(e);
-    if (i = l.length, i !== Object.keys(t).length)
-      return !1;
-    for (s = i; s-- !== 0; )
-      if (!Object.prototype.hasOwnProperty.call(t, l[s]))
-        return !1;
-    for (s = i; s-- !== 0; )
-      if (v = l[s], !F(e[v], t[v]))
-        return !1;
-    return !0;
+    return true;
   }
-  return e !== e && t !== t;
+  return a !== a && b !== b;
 }
-function q(e, t) {
-  if (e && Object.keys(e).length && t) {
-    if (t.indexOf(".") === -1)
-      return e[t];
-    {
-      const o = t.split(".");
-      let r = e;
-      for (let s = 0, i = o.length; s < i; ++s) {
-        if (e == null)
+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;
-        r = r[o[s]];
+        }
+        value = value[fields[i]];
       }
-      return r;
+      return value;
     }
-  } else
+  } else {
     return null;
+  }
 }
-function J(e, t) {
-  if (e != null && t && t.length) {
-    for (const o of t)
-      if (M(e, o))
-        return !0;
+function contains(value, list) {
+  if (value != null && list && list.length) {
+    for (const val of list) {
+      if (equals(value, val)) {
+        return true;
+      }
+    }
   }
-  return !1;
+  return false;
 }
-function we(e) {
-  return ((t) => t == null || t === "" || Array.isArray(t) && t.length === 0 || !(t instanceof Date) && typeof t == "object" && Object.keys(t).length === 0)(p(e));
+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 Ve(e) {
-  const t = V(e, void 0), o = g(() => !we(t));
-  function r(s, i, v) {
-    if (t != null && t.value) {
-      const d = p(t.value)[s];
-      return g({
+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 d == null ? void 0 : d.value;
+          return groupPropValue == null ? void 0 : groupPropValue.value;
         },
-        set(a) {
-          d.value = a;
+        set(value) {
+          groupPropValue.value = value;
         }
       });
     }
-    const f = ne(i, s);
-    return g({
+    const propRef = toRef(props, propName);
+    return computed({
       get() {
-        return f.value;
+        return propRef.value;
       },
-      set(d) {
-        v && v(`update:${s}`, d);
+      set(value) {
+        if (emit)
+          emit(`update:${propName}`, value);
       }
     });
   }
   return {
-    group: t,
-    isInGroup: o,
-    getGroupOrLocalRef: r
+    group,
+    isInGroup,
+    getGroupOrLocalRef
   };
 }
-const De = ["update:modelValue"], Ee = {
-  ...X,
-  ..._e,
-  ...Oe,
-  ...ke,
-  ...me,
+const VvButtonEvents = ["update:modelValue"];
+const VvButtonProps = {
+  ...ActionProps,
+  ...IdProps,
+  ...ModifiersProps,
+  ...UnselectableProps,
+  ...LoadingProps,
   /**
    * Button icon
    */
@@ -471,8 +705,8 @@ const De = ["update:modelValue"], Ee = {
    */
   iconPosition: {
     type: String,
-    default: S.left,
-    validator: (e) => Object.values(S).includes(e)
+    default: Side.left,
+    validator: (value) => Object.values(Side).includes(value)
   },
   /**
    * Loading icon
@@ -480,148 +714,190 @@ const De = ["update:modelValue"], Ee = {
   loadingIcon: { type: String, default: "eos-icons:bubble-loading" },
   toggle: {
     type: Boolean,
-    default: !1
+    default: false
   },
   modelValue: String
 };
-function Le(e, t) {
-  var u;
-  const { group: o, isInGroup: r, getGroupOrLocalRef: s } = Ve(fe), {
-    id: i,
-    iconPosition: v,
-    icon: f,
-    label: d,
-    pressed: a,
-    modifiers: n
-  } = z(e), l = s("modelValue", e, t), m = s("disabled", e), b = s("toggle", e), _ = s(
+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
-  ), O = ((u = o == null ? void 0 : o.value) == null ? void 0 : u.multiple) ?? D(!1), y = g(() => {
-    var A;
-    const P = n != null && n.value ? Array.isArray(n.value) ? n.value : n.value.split(" ") : [], E = (A = o == null ? void 0 : o.value.itemModifiers) != null && A.value ? Array.isArray(o.value.itemModifiers.value) ? o.value.itemModifiers.value : o.value.itemModifiers.value.split(" ") : [];
-    return [...P, ...E];
+    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: o,
-    isInGroup: r,
-    modelValue: l,
-    disabled: m,
-    toggle: b,
-    unselectable: _,
-    multiple: O,
+    group,
+    isInGroup,
+    modelValue,
+    toggle,
+    unselectable,
+    multiple,
+    modifiers,
+    disabled,
     // local props
-    id: i,
-    modifiers: y,
-    pressed: a,
-    iconPosition: v,
-    icon: f,
-    label: d
+    id,
+    pressed,
+    iconPosition,
+    icon,
+    label
   };
 }
-const Ne = (e) => g(() => String((e == null ? void 0 : e.value) || ie())), Ce = {
+const useUniqueId = (id) => computed(() => String((id == null ? void 0 : id.value) || nanoid()));
+const _hoisted_1 = {
   key: 1,
   class: "vv-button__label"
-}, Re = {
+};
+const _hoisted_2 = {
   key: 1,
   class: "vv-button__label"
-}, Me = {
+};
+const __default__ = {
   name: "VvButton"
-}, Je = /* @__PURE__ */ G({
-  ...Me,
-  props: Ee,
-  emits: De,
-  setup(e, { expose: t, emit: o }) {
-    const r = e, s = re(), i = oe(), {
-      id: v,
-      modifiers: f,
-      iconPosition: d,
-      icon: a,
-      label: n,
-      modelValue: l,
-      disabled: m,
-      toggle: b,
-      unselectable: _
-    } = Le(r, o), O = Ne(v), y = g(() => (s == null ? void 0 : s.name) || O.value), u = D(null), P = g(() => {
-      var c;
-      return (c = u.value) == null ? void 0 : c.$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 {
+      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;
     });
-    t({ $el: P });
-    const E = g(() => b.value ? Array.isArray(l.value) ? J(y.value, l.value) : M(y.value, l.value) : r.pressed), A = Q(
+    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",
-      f,
-      g(() => ({
-        reverse: [S.right, S.bottom].includes(d.value),
-        column: [S.top, S.bottom].includes(d.value),
+      modifiers,
+      computed(() => ({
+        reverse: [Side.right, Side.bottom].includes(
+          iconPosition.value
+        ),
+        column: [Side.top, Side.bottom].includes(
+          iconPosition.value
+        ),
         "icon-only": Boolean(
-          (a == null ? void 0 : a.value) && !(n != null && n.value) && !i.default
+          (icon == null ? void 0 : icon.value) && !(label == null ? void 0 : label.value) && !slots.default
         )
       }))
-    ), Z = g(
-      () => typeof (a == null ? void 0 : a.value) == "string" ? { name: a == null ? void 0 : a.value } : a == null ? void 0 : a.value
-    ), x = () => {
-      if (b.value) {
-        if (Array.isArray(l.value)) {
-          if (J(y.value, l.value)) {
-            _.value && (l.value = l.value.filter(
-              (c) => c !== y.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;
           }
-          l.value.push(y.value);
+          modelValue.value.push(name.value);
           return;
         }
-        if (M(y.value, l.value) && _.value) {
-          l.value = void 0;
+        if (equals(name.value, modelValue.value) && unselectable.value) {
+          modelValue.value = void 0;
           return;
         }
-        l.value = y.value;
+        modelValue.value = name.value;
       }
     };
-    return (c, Fe) => (k(), j(Be, w({
-      disabled: p(m),
-      pressed: p(E),
-      active: c.active,
-      type: c.type,
-      to: c.to,
-      href: c.href,
-      target: c.target,
-      rel: c.rel
-    }, {
-      id: p(O),
-      ref_key: "element",
-      ref: u,
-      class: p(A),
-      onClick: x
-    }), {
-      default: K(() => [
-        $(c.$slots, "default", {}, () => [
-          c.loading ? $(c.$slots, "loading", { key: 0 }, () => [
-            c.loadingIcon ? (k(), j(T, {
-              key: 0,
-              class: "vv-button__loading-icon",
-              name: c.loadingIcon
-            }, null, 8, ["name"])) : I("", !0),
-            c.loadingLabel ? (k(), L("span", Ce, N(c.loadingLabel), 1)) : I("", !0)
-          ]) : (k(), L(se, { key: 1 }, [
-            $(c.$slots, "before"),
-            p(a) ? (k(), j(T, w({
-              key: 0,
-              class: "vv-button__icon"
-            }, p(Z)), null, 16)) : I("", !0),
-            p(n) ? (k(), L("span", Re, [
-              $(c.$slots, "label", {}, () => [
-                U(N(p(n)), 1)
-              ])
-            ])) : I("", !0),
-            $(c.$slots, "after")
-          ], 64))
-        ])
-      ]),
-      _: 3
-    }, 16, ["id", "class"]));
+    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 {
-  Je as default
+  _sfc_main as default
 };