@volverjs/ui-vue 0.0.3-beta.4 → 0.0.4

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

@@ -1,303 +1,627 @@
-import { defineComponent as I, unref as d, openBlock as g, createBlock as P, mergeProps as A, createCommentVNode as w, resolveDynamicComponent as E, withCtx as G, renderSlot as k, createElementBlock as O, toDisplayString as F, Fragment as j, createTextVNode as q } from "vue";
-import { nanoid as U } from "nanoid";
-import { iconExists as $, Icon as z, addIcon as H } from "@iconify/vue";
-const M = "ds", J = {
+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 = {
+  /**
+   * Color
+   */
   color: String,
+  /**
+   * Width
+   */
   width: {
     type: [String, Number]
   },
+  /**
+   * Height
+   */
   height: {
     type: [String, Number]
   },
+  /**
+   * Icon name
+   * Can be the full composition of iconify name "@{provider}:{prefix}:{name}" or "{prefix}:{name}" or "{name}"
+   * https://docs.iconify.design/api/providers.html#provider-in-icon-name
+   */
   name: {
     type: String,
     required: !0
   },
+  /**
+   * By default 'vv'
+   * If custom collection is not added with "addCollection" DS class method, this prop could not be used
+   * Icon provider: https://docs.iconify.design/api/providers.html#provider-in-icon-name
+   */
   provider: {
     type: String
   },
+  /**
+   * The name of icon set.
+   * Icon default options prefix: simple | normal | detailed
+   */
   prefix: {
     type: String,
     default: "normal"
   },
+  /**
+   * Url remote SVG icon
+   */
   src: String,
+  /**
+   * Horizontal flip
+   */
   horizontalFlip: Boolean,
+  /**
+   * Vertical flip
+   */
   verticalFlip: Boolean,
+  /**
+   * String alternative to "horizontalFlip" and "verticalFlip".
+   * Example: https://docs.iconify.design/icon-components/vue/transform.html
+   */
   flip: String,
+  /**
+   * Icon render mode
+   * 'style' = 'bg' or 'mask', depending on icon content
+   * 'bg' = span with style using `background`
+   * 'mask' = span with style using `mask`
+   * 'svg' = svg
+   * Iconify doc: https://docs.iconify.design/iconify-icon/modes.html
+   */
   mode: String,
+  /**
+   * Toggles inline or block mode
+   * Example https://docs.iconify.design/icon-components/vue/inline.html
+   */
   inline: Boolean,
+  /**
+   * rotates icon
+   * Example https://docs.iconify.design/icon-components/vue/transform.html
+   */
   rotate: [Number, String],
+  /**
+   * A callback that is called when icon data has been loaded
+   */
   onLoad: Function,
+  /**
+   * SVG icon string
+   */
   svg: String,
+  /**
+   * Icon modifiers: vv-icon css helper classes, value/s are concatened with prefix 'vv-icon--'
+   * @values string | Array<string>
+   */
   modifiers: {
     type: [String, Array]
   }
-}, X = {
+};
+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);
+}
+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;
+  });
+}
+const pe = {
   name: "VvIcon"
-}, B = /* @__PURE__ */ I({
-  ...X,
-  props: J,
-  setup(t) {
-    const r = t, o = ref(!0), { modifiers: m } = toRefs(r), i = inject(M), { bemCssClasses: u } = useBemModifiers("vv-icon", {
-      modifiers: m
-    }), f = computed(() => r.provider || (i == null ? void 0 : i.provider)), b = computed(() => {
-      const e = r.name ?? "", n = `@${f.value}:${r.prefix}:${r.name}`;
-      return $(e) ? e : $(n) ? n : (i == null ? void 0 : i.iconsCollections.find((c) => {
-        const p = `@${f.value}:${c.prefix}:${e}`;
-        if ($(p))
-          return p;
-      })) || e;
+}, 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;
     });
-    function a(e) {
-      let n = null;
+    function d(n) {
+      let l = null;
       if (typeof window > "u") {
-        const { JSDOM: y } = require("jsdom");
-        n = new y().window;
+        const { JSDOM: O } = require("jsdom");
+        l = new O().window;
       }
-      return (n ? new n.DOMParser() : new window.DOMParser()).parseFromString(e, "text/html").querySelector("svg");
+      return (l ? new l.DOMParser() : new window.DOMParser()).parseFromString(n, "text/html").querySelector("svg");
     }
-    function s(e) {
-      const n = a(e), c = (n == null ? void 0 : n.innerHTML.trim()) || "";
-      n && c && H(`@${f.value}:${r.prefix}:${r.name}`, {
-        body: c,
-        height: n.viewBox.baseVal.height,
-        width: n.viewBox.baseVal.width
+    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
       });
     }
-    return i && (r.src && !$(`@${f.value}:${r.prefix}:${r.name}`) ? (o.value = !1, i.fetchIcon(r.src).then((e) => {
-      e && (s(e), o.value = !0);
-    }).catch((e) => {
-      throw new Error(`During fetch icon: ${e == null ? void 0 : e.message}`);
-    })) : r.svg && s(r.svg)), (e, n) => d(o) ? (g(), P(d(z), A({
+    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: d(u)
+      class: p(i)
     }, {
-      inline: e.inline,
-      width: e.width,
-      height: e.height,
-      horizontalFlip: e.horizontalFlip,
-      verticalFlip: e.verticalFlip,
-      flip: e.flip,
-      rotate: e.rotate,
-      color: e.color,
-      onLoad: e.onLoad,
-      icon: d(b)
-    }), null, 16, ["class"])) : w("", !0);
+      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);
   }
-}), x = {
-  disabled: Boolean
-}, K = {
-  modifiers: [String, Array]
-}, Q = {
-  unselectable: { type: Boolean, default: !0 }
-}, W = "VV_BUTTON_GROUP";
-var S = /* @__PURE__ */ ((t) => (t.left = "left", t.right = "right", t.top = "top", t.bottom = "bottom", t))(S || {}), D = /* @__PURE__ */ ((t) => (t.button = "button", t.submit = "submit", t.reset = "reset", t))(D || {}), v = /* @__PURE__ */ ((t) => (t.nuxtLink = "nuxt-link", t.routerLink = "router-link", t.a = "a", t.button = "button", t))(v || {}), N = /* @__PURE__ */ ((t) => (t._blank = "_blank", t._self = "_self", t._parent = "_parent", t._top = "_top", t))(N || {});
-const Y = ["update:modelValue"], Z = {
-  ...K,
-  ...x,
-  ...Q,
-  icon: {
-    type: [String, Object],
-    default: ""
-  },
-  iconPosition: {
-    type: String,
-    default: "left",
-    validator: (t) => t in S
-  },
-  label: [String, Number],
-  loading: Boolean,
-  loadingIcon: { type: String, default: "eos-icons:bubble-loading" },
-  loadingLabel: {
-    type: String,
-    default: "Loading..."
-  },
+}), ge = {
+  /**
+   * 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: (t) => t in N
+    validator: (e) => Object.values(W).includes(e)
   },
-  active: Boolean,
-  pressed: Boolean,
+  /**
+   * Anchor rel
+   */
   rel: {
     type: String,
     default: "noopener noreferrer"
-  },
+  }
+}, me = {
+  /**
+   * Loading status
+   */
+  loading: Boolean,
+  /**
+   * Loading label
+   */
+  loadingLabel: {
+    type: String,
+    default: "Loading..."
+  }
+}, ye = {
+  /**
+   * Whether the form control is disabled
+   */
+  disabled: Boolean
+}, be = {
+  /**
+   * Whether the item is active
+   */
+  active: Boolean
+}, he = {
+  /**
+   * Whether the item is pressed
+   */
+  pressed: Boolean
+}, Se = {
+  /**
+   * The item label
+   */
+  label: [String, Number]
+}, Oe = {
+  /**
+   * Component BEM modifiers
+   */
+  modifiers: [String, Array]
+};
+C.before;
+const ke = {
+  /**
+   * If true the input will be unselectable
+   */
+  unselectable: { type: Boolean, default: !0 }
+}, _e = {
+  /**
+   * 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,
+  /**
+   * Button type
+   */
   type: {
     type: String,
-    default: "button",
-    validator: (t) => t in D
+    default: R.button,
+    validator: (e) => Object.values(R).includes(e)
+  }
+}, $e = ["click", "mouseover", "mouseleave"], Ie = X;
+function je() {
+  return V(de, {});
+}
+function Pe() {
+  return V(ve, {});
+}
+const Ae = {
+  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 {
+      reference: v,
+      bus: f,
+      aria: d,
+      expanded: a
+    } = je();
+    ee(
+      () => i.value,
+      (u) => {
+        v && (v.value = u);
+      }
+    );
+    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;
+        default:
+          return h.button;
+      }
+    }), b = g(() => {
+      const u = {
+        ...d == null ? void 0 : d.value,
+        "aria-pressed": n.value ? !0 : void 0,
+        role: l
+      };
+      switch (m.value) {
+        case h.a:
+          return {
+            ...u,
+            href: r.href,
+            target: r.target,
+            rel: r.rel
+          };
+        case h.routerLink:
+        case h.nuxtLink:
+          return {
+            ...u,
+            to: r.to,
+            target: r.target
+          };
+        default:
+          return {
+            ...u,
+            type: r.type,
+            disabled: r.disabled
+          };
+      }
+    }), _ = (u) => {
+      if (r.disabled) {
+        u.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);
+    };
+    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 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;
+    }
+    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 e !== e && t !== t;
+}
+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)
+          return null;
+        r = r[o[s]];
+      }
+      return r;
+    }
+  } else
+    return null;
+}
+function J(e, t) {
+  if (e != null && t && t.length) {
+    for (const o of t)
+      if (M(e, o))
+        return !0;
+  }
+  return !1;
+}
+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 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({
+        get() {
+          return d == null ? void 0 : d.value;
+        },
+        set(a) {
+          d.value = a;
+        }
+      });
+    }
+    const f = ne(i, s);
+    return g({
+      get() {
+        return f.value;
+      },
+      set(d) {
+        v && v(`update:${s}`, d);
+      }
+    });
+  }
+  return {
+    group: t,
+    isInGroup: o,
+    getGroupOrLocalRef: r
+  };
+}
+const De = ["update:modelValue"], Ee = {
+  ...X,
+  ..._e,
+  ...Oe,
+  ...ke,
+  ...me,
+  /**
+   * Button icon
+   */
+  icon: [String, Object],
+  /**
+   * Button icon position
+   */
+  iconPosition: {
+    type: String,
+    default: S.left,
+    validator: (e) => Object.values(S).includes(e)
   },
+  /**
+   * Loading icon
+   */
+  loadingIcon: { type: String, default: "eos-icons:bubble-loading" },
   toggle: {
     type: Boolean,
     default: !1
   },
   modelValue: String
 };
-function T(t, r) {
-  var _;
-  const { group: o, isInGroup: m, getGroupOrLocalRef: i } = useInjectedGroupState(W), {
-    iconPosition: u,
+function Le(e, t) {
+  var u;
+  const { group: o, isInGroup: r, getGroupOrLocalRef: s } = Ve(fe), {
+    id: i,
+    iconPosition: v,
     icon: f,
-    label: b,
+    label: d,
     pressed: a,
-    modifiers: s
-  } = toRefs(t), e = i("modelValue", t, r), n = i("disabled", t), c = i("toggle", t), p = i(
+    modifiers: n
+  } = z(e), l = s("modelValue", e, t), m = s("disabled", e), b = s("toggle", e), _ = s(
     "unselectable",
-    t
-  ), h = ((_ = o == null ? void 0 : o.value) == null ? void 0 : _.multiple) ?? ref(!1), y = computed(() => {
-    var V;
-    const L = s != null && s.value ? Array.isArray(s.value) ? s.value : [s.value] : [], C = (V = o == null ? void 0 : o.value.itemModifiers) != null && V.value ? Array.isArray(o.value.itemModifiers.value) ? o.value.itemModifiers.value : [o.value.itemModifiers.value] : [];
-    return [...L, ...C];
+    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];
   });
   return {
+    // group props
     group: o,
-    isInGroup: m,
-    modelValue: e,
-    disabled: n,
-    toggle: c,
-    unselectable: p,
-    multiple: h,
+    isInGroup: r,
+    modelValue: l,
+    disabled: m,
+    toggle: b,
+    unselectable: _,
+    multiple: O,
+    // local props
+    id: i,
     modifiers: y,
     pressed: a,
-    iconPosition: u,
+    iconPosition: v,
     icon: f,
-    label: b
+    label: d
   };
 }
-const ee = {
+const Ne = (e) => g(() => String((e == null ? void 0 : e.value) || ie())), Ce = {
   key: 1,
   class: "vv-button__label"
-}, te = {
+}, Re = {
   key: 1,
   class: "vv-button__label"
-}, oe = {
+}, Me = {
   name: "VvButton"
-}, ie = /* @__PURE__ */ I({
-  ...oe,
-  props: Z,
-  emits: Y,
-  setup(t, { emit: r }) {
-    const o = t, m = useAttrs(), i = useSlots(), u = (m == null ? void 0 : m.name) || U(), {
+}, 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: b,
+      iconPosition: d,
       icon: a,
-      label: s,
-      modelValue: e,
-      disabled: n,
-      toggle: c,
-      unselectable: p
-    } = T(o, r), h = inject(M), y = computed(() => {
-      switch (!0) {
-        case n.value:
-          return v.button;
-        case o.to !== void 0:
-          return h != null && h.nuxt ? v.nuxtLink : v.routerLink;
-        case o.href !== void 0:
-          return v.a;
-        default:
-          return v.button;
-      }
-    }), _ = computed(() => c.value ? Array.isArray(e.value) ? contains(u, e.value) : equals(u, e.value) : o.pressed), { bemCssClasses: L } = useBemModifiers("vv-button", {
-      modifiers: f,
-      active: o.active,
-      pressed: _,
-      disabled: n,
-      reverse: computed(
-        () => [S.right, S.bottom].includes(
-          b.value
-        )
-      ),
-      column: computed(
-        () => [S.top, S.bottom].includes(
-          b.value
+      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;
+    });
+    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(
+      "vv-button",
+      f,
+      g(() => ({
+        reverse: [S.right, S.bottom].includes(d.value),
+        column: [S.top, S.bottom].includes(d.value),
+        "icon-only": Boolean(
+          (a == null ? void 0 : a.value) && !(n != null && n.value) && !i.default
         )
-      ),
-      iconOnly: computed(
-        () => (a == null ? void 0 : a.value) && !(s != null && s.value) && !i.default
-      )
-    }), C = computed(
+      }))
+    ), Z = g(
       () => typeof (a == null ? void 0 : a.value) == "string" ? { name: a == null ? void 0 : a.value } : a == null ? void 0 : a.value
-    ), V = computed(() => {
-      const l = {
-        class: L.value,
-        "aria-pressed": _.value ? !0 : void 0
-      };
-      switch (y.value) {
-        case v.a:
-          return {
-            ...l,
-            role: "button",
-            href: o.href,
-            target: o.target,
-            rel: o.rel
-          };
-        case v.routerLink:
-        case v.nuxtLink:
-          return {
-            ...l,
-            role: "button",
-            to: o.to,
-            target: o.target
-          };
-        default:
-          return {
-            ...l,
-            type: o.type,
-            disabled: n.value
-          };
-      }
-    }), R = () => {
-      if (c.value) {
-        if (Array.isArray(e.value)) {
-          if (contains(u, e.value)) {
-            p.value && (e.value = e.value.filter(
-              (l) => l !== u
+    ), 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
             ));
             return;
           }
-          e.value.push(u);
+          l.value.push(y.value);
           return;
         }
-        if (equals(u, e.value) && p.value) {
-          e.value = void 0;
+        if (M(y.value, l.value) && _.value) {
+          l.value = void 0;
           return;
         }
-        e.value = u;
+        l.value = y.value;
       }
     };
-    return (l, ne) => (g(), P(E(d(y)), A(d(V), { onClickPassive: R }), {
-      default: G(() => [
-        k(l.$slots, "default", {}, () => [
-          l.loading ? k(l.$slots, "loading", { key: 0 }, () => [
-            l.loadingIcon ? (g(), P(B, {
+    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: l.loadingIcon
-            }, null, 8, ["name"])) : w("", !0),
-            l.loadingLabel ? (g(), O("span", ee, F(l.loadingLabel), 1)) : w("", !0)
-          ]) : (g(), O(j, { key: 1 }, [
-            k(l.$slots, "before"),
-            d(a) ? (g(), P(B, A({
+              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"
-            }, d(C)), null, 16)) : w("", !0),
-            d(s) ? (g(), O("span", te, [
-              k(l.$slots, "label", {}, () => [
-                q(F(d(s)), 1)
+            }, p(Z)), null, 16)) : I("", !0),
+            p(n) ? (k(), L("span", Re, [
+              $(c.$slots, "label", {}, () => [
+                U(N(p(n)), 1)
               ])
-            ])) : w("", !0),
-            k(l.$slots, "after")
+            ])) : I("", !0),
+            $(c.$slots, "after")
           ], 64))
         ])
       ]),
       _: 3
-    }, 16));
+    }, 16, ["id", "class"]));
   }
 });
 export {
-  ie as default
+  Je as default
 };