@volverjs/ui-vue 0.0.3 → 0.0.4

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 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
    */
@@ -93,352 +94,534 @@ const oe = {
   modifiers: {
     type: [String, Array]
   }
-}, re = {
+};
+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"
-}, q = /* @__PURE__ */ E({
-  ...re,
-  props: oe,
+}, T = /* @__PURE__ */ G({
+  ...pe,
+  props: ue,
   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;
+    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;
         }
-      )) || t;
+      )) || n;
     });
-    function y(t) {
-      let o = null;
+    function d(n) {
+      let l = null;
       if (typeof window > "u") {
-        const { JSDOM: h } = require("jsdom");
-        o = new h().window;
+        const { JSDOM: O } = require("jsdom");
+        l = new O().window;
       }
-      return (o ? new o.DOMParser() : new window.DOMParser()).parseFromString(t, "text/html").querySelector("svg");
+      return (l ? new l.DOMParser() : new window.DOMParser()).parseFromString(n, "text/html").querySelector("svg");
     }
-    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,
+    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: o.viewBox.baseVal.height,
-        width: o.viewBox.baseVal.width
+        height: l.viewBox.baseVal.height,
+        width: l.viewBox.baseVal.width
       });
     }
-    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({
+    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: c(k)
+      class: p(i)
     }, {
-      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(_)
+      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);
   }
-});
-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 = {
-  /**
-   * Whether the form control is disabled
-   */
-  disabled: Boolean
-}, le = {
-  /**
-   * Component BEM modifiers
-   */
-  modifiers: [String, Array]
-};
-M.before;
-const se = {
-  /**
-   * If true the input will be unselectable
-   */
-  unselectable: { type: Boolean, default: !0 }
-}, ie = {
+}), ge = {
   /**
-   * Global attribute id
-   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
+   * 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/)
    */
-  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,
+  to: {
+    type: [String, Object]
+  },
   /**
-   * Button icon
+   * Anchor href
    */
-  icon: [String, Object],
+  href: String,
   /**
-   * Button icon position
+   * Anchor target
    */
-  iconPosition: {
+  target: {
     type: String,
-    default: p.left,
-    validator: (e) => Object.values(p).includes(e)
+    validator: (e) => Object.values(W).includes(e)
   },
   /**
-   * Button label
+   * Anchor rel
    */
-  label: [String, Number],
+  rel: {
+    type: String,
+    default: "noopener noreferrer"
+  }
+}, me = {
   /**
    * Loading status
    */
   loading: Boolean,
-  /**
-   * Loading icon
-   */
-  loadingIcon: { type: String, default: "eos-icons:bubble-loading" },
   /**
    * Loading label
    */
   loadingLabel: {
     type: String,
     default: "Loading..."
-  },
+  }
+}, ye = {
   /**
-   * 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/)
+   * Whether the form control is disabled
    */
-  to: {
-    type: [String, Object]
-  },
+  disabled: Boolean
+}, be = {
   /**
-   * Link href
+   * Whether the item is active
    */
-  href: String,
+  active: Boolean
+}, he = {
   /**
-   * Link target
+   * Whether the item is pressed
    */
-  target: {
-    type: String,
-    validator: (e) => Object.values(z).includes(e)
-  },
-  active: Boolean,
+  pressed: Boolean
+}, Se = {
   /**
-   * Button pressed mode
+   * The item label
    */
-  pressed: Boolean,
+  label: [String, Number]
+}, Oe = {
   /**
-   * Link rel
+   * Component BEM modifiers
    */
-  rel: {
-    type: String,
-    default: "noopener noreferrer"
-  },
+  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",
+    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 de(e, l) {
-  var S;
-  const { group: s, isInGroup: n, getGroupOrLocalRef: d } = useInjectedGroupState(ne), {
-    id: k,
-    iconPosition: m,
-    icon: _,
-    label: y,
+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: t
-  } = toRefs(e), o = d("modelValue", e, l), u = d("disabled", e), g = d("toggle", e), O = d(
+    modifiers: n
+  } = z(e), l = s("modelValue", e, t), m = s("disabled", e), b = s("toggle", e), _ = s(
     "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];
+  ), 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: s,
-    isInGroup: n,
-    modelValue: o,
-    disabled: u,
-    toggle: g,
-    unselectable: O,
-    multiple: h,
+    group: o,
+    isInGroup: r,
+    modelValue: l,
+    disabled: m,
+    toggle: b,
+    unselectable: _,
+    multiple: O,
     // local props
-    id: k,
-    modifiers: f,
+    id: i,
+    modifiers: y,
     pressed: a,
-    iconPosition: m,
-    icon: _,
-    label: y
+    iconPosition: v,
+    icon: f,
+    label: d
   };
 }
-const fe = {
+const Ne = (e) => g(() => String((e == null ? void 0 : e.value) || ie())), Ce = {
   key: 1,
   class: "vv-button__label"
-}, ve = {
+}, Re = {
   key: 1,
   class: "vv-button__label"
-}, pe = {
+}, Me = {
   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,
+}, 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: 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 {
-      reference: V,
-      bus: i,
-      aria: P
-    } = useInjectedDropdownTrigger();
-    watch(
-      () => $.value,
-      (r) => {
-        V && (V.value = r);
-      }
-    );
-    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;
-      }
-    }), A = computed(() => g.value ? Array.isArray(o.value) ? contains(f.value, o.value) : equals(f.value, o.value) : n.pressed), J = useBemModifiers(
+      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",
-      _,
-      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)
+      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
+        )
       }))
-    ), H = computed(
+    ), Z = g(
       () => 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
+    ), 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;
           }
-          o.value.push(f.value);
+          l.value.push(y.value);
           return;
         }
-        if (equals(f, o.value) && O.value) {
-          o.value = void 0;
+        if (M(y.value, l.value) && _.value) {
+          l.value = void 0;
           return;
         }
-        o.value = f.value;
+        l.value = y.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
+    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: T(() => [
-        w(r.$slots, "default", {}, () => [
-          r.loading ? w(r.$slots, "loading", { key: 0 }, () => [
-            r.loadingIcon ? (b(), B(q, {
+      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: r.loadingIcon
+              name: c.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({
+            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"
-            }, c(H)), null, 16)) : I("", !0),
-            c(t) ? (b(), L("span", ve, [
-              w(r.$slots, "label", {}, () => [
-                Z(F(c(t)), 1)
+            }, p(Z)), null, 16)) : I("", !0),
+            p(n) ? (k(), L("span", Re, [
+              $(c.$slots, "label", {}, () => [
+                U(N(p(n)), 1)
               ])
             ])) : I("", !0),
-            w(r.$slots, "after")
+            $(c.$slots, "after")
           ], 64))
         ])
       ]),
       _: 3
-    }, 16, ["id"]));
+    }, 16, ["id", "class"]));
   }
 });
 export {
-  be as default
+  Je as default
 };