@volverjs/ui-vue 0.0.1-beta.11 → 0.0.1-beta.16

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

@@ -1,158 +1,112 @@
-import { computed as f, unref as y, defineComponent as D, ref as T, toRefs as R, inject as q, openBlock as b, createBlock as O, mergeProps as F, createCommentVNode as C, toRef as Z, useAttrs as z, resolveDynamicComponent as H, withCtx as J, renderSlot as A, createElementBlock as w, toDisplayString as j, Fragment as X, createTextVNode as K } from "vue";
-import { v4 as W } from "uuid";
-import { iconExists as E, Icon as Y, addIcon as ee } from "@iconify/vue";
-var _ = /* @__PURE__ */ ((e) => (e.left = "left", e.right = "right", e.top = "top", e.bottom = "bottom", e))(_ || {}), k = /* @__PURE__ */ ((e) => (e.nuxtLink = "nuxt-link", e.routerLink = "router-link", e.a = "a", e.button = "button", e))(k || {}), P = /* @__PURE__ */ ((e) => (e._blank = "_blank", e._self = "_self", e._parent = "_parent", e._top = "_top", e))(P || {});
-const te = {
-  icon: String,
-  iconPosition: {
-    type: String,
-    default: "left",
-    validator: (e) => e in _
-  },
-  label: String,
-  loading: Boolean,
-  loadingIcon: { type: String, default: "eos-icons:bubble-loading" },
-  loadingLabel: {
-    type: String,
-    default: "Loading..."
-  },
-  to: {
-    type: [String, Object]
-  },
-  href: String,
-  target: {
-    type: String,
-    validator: (e) => e in P
-  },
-  block: Boolean,
-  active: Boolean,
-  rounded: Boolean,
-  disabled: Boolean,
-  fullBleed: Boolean,
-  action: Boolean,
-  actionQuiet: Boolean,
-  selected: Boolean,
-  modifiers: [Array, String]
-}, h = {
-  equals(e, t, n) {
-    return n ? this.resolveFieldData(e, n) === this.resolveFieldData(t, n) : this.deepEquals(e, t);
-  },
-  deepEquals(e, t) {
-    if (e === t)
-      return !0;
-    if (e && t && typeof e == "object" && typeof t == "object") {
-      const n = Array.isArray(e), o = Array.isArray(t);
-      let r, l, a;
-      if (n && o) {
-        if (l = e.length, l != t.length)
-          return !1;
-        for (r = l; r-- !== 0; )
-          if (!this.deepEquals(e[r], t[r]))
-            return !1;
-        return !0;
-      }
-      if (n != o)
-        return !1;
-      const u = e instanceof Date, c = t instanceof Date;
-      if (u != c)
-        return !1;
-      if (u && c)
-        return e.getTime() == t.getTime();
-      const v = e instanceof RegExp, s = t instanceof RegExp;
-      if (v != s)
-        return !1;
-      if (v && s)
-        return e.toString() == t.toString();
-      const i = Object.keys(e);
-      if (l = i.length, l !== Object.keys(t).length)
+import { unref as p, computed as g, defineComponent as R, ref as z, toRefs as x, inject as L, openBlock as b, createBlock as w, mergeProps as C, createCommentVNode as _, toRef as H, useAttrs as J, useSlots as T, resolveDynamicComponent as X, withCtx as K, renderSlot as S, createElementBlock as A, toDisplayString as V, Fragment as Q, createTextVNode as W } from "vue";
+import { nanoid as Y } from "nanoid";
+import { iconExists as $, Icon as ee, addIcon as te } from "@iconify/vue";
+function B(t, e, n) {
+  return n ? D(t, n) === D(e, n) : P(t, e);
+}
+function P(t, e) {
+  if (t === e)
+    return !0;
+  if (t && e && typeof t == "object" && typeof e == "object") {
+    const n = Array.isArray(t), c = Array.isArray(e);
+    let r, a, i;
+    if (n && c) {
+      if (a = t.length, a != e.length)
         return !1;
-      for (r = l; r-- !== 0; )
-        if (!Object.prototype.hasOwnProperty.call(t, i[r]))
-          return !1;
-      for (r = l; r-- !== 0; )
-        if (a = i[r], !this.deepEquals(e[a], t[a]))
+      for (r = a; r-- !== 0; )
+        if (!P(t[r], e[r]))
           return !1;
       return !0;
     }
-    return e !== e && t !== t;
-  },
-  resolveFieldData(e, t) {
-    if (e && Object.keys(e).length && t) {
-      if (t.indexOf(".") === -1)
-        return e[t];
-      {
-        const n = t.split(".");
-        let o = e;
-        for (let r = 0, l = n.length; r < l; ++r) {
-          if (e == null)
-            return null;
-          o = o[n[r]];
-        }
-        return o;
+    if (n != c)
+      return !1;
+    const s = t instanceof Date, u = e instanceof Date;
+    if (s != u)
+      return !1;
+    if (s && u)
+      return t.getTime() == e.getTime();
+    const f = t instanceof RegExp, o = e instanceof RegExp;
+    if (f != o)
+      return !1;
+    if (f && o)
+      return t.toString() == e.toString();
+    const l = Object.keys(t);
+    if (a = l.length, a !== Object.keys(e).length)
+      return !1;
+    for (r = a; r-- !== 0; )
+      if (!Object.prototype.hasOwnProperty.call(e, l[r]))
+        return !1;
+    for (r = a; r-- !== 0; )
+      if (i = l[r], !P(t[i], e[i]))
+        return !1;
+    return !0;
+  }
+  return t !== t && e !== e;
+}
+function D(t, e) {
+  if (t && Object.keys(t).length && e) {
+    if (e.indexOf(".") === -1)
+      return t[e];
+    {
+      const n = e.split(".");
+      let c = t;
+      for (let r = 0, a = n.length; r < a; ++r) {
+        if (t == null)
+          return null;
+        c = c[n[r]];
       }
-    } else
-      return null;
-  },
-  isFunction(e) {
-    return !!(e && e.constructor && e.call && e.apply);
-  },
-  findIndexInList(e, t) {
-    let n = -1;
-    if (t) {
-      for (let o = 0; o < t.length; o++)
-        if (this.equals(t[o], e)) {
-          n = o;
-          break;
-        }
+      return c;
     }
-    return n;
-  },
-  contains(e, t) {
-    if (e != null && t && t.length) {
-      for (const n of t)
-        if (this.equals(e, n))
-          return !0;
-    }
-    return !1;
-  },
-  isEmpty(e) {
-    return e == null || e === "" || Array.isArray(e) && e.length === 0 || !(e instanceof Date) && typeof e == "object" && Object.keys(e).length === 0;
-  },
-  isNotEmpty(e) {
-    return !this.isEmpty(e);
-  },
-  pickBy(e, t) {
-    return Object.fromEntries(
-      Object.entries(e).filter(([n]) => t(n))
-    );
-  },
-  removeFromList(e, t) {
-    const n = this.findIndexInList(e, t);
-    return n > -1 ? t.filter((o, r) => r !== n) : t;
-  },
-  isString(e) {
-    return typeof e == "string" || e instanceof String;
-  },
-  propsToObject(e) {
-    return Object.keys(e).reduce((t, n) => {
-      var o, r, l, a, u;
-      return this.isFunction(e[n]) ? t[n] = e[n]() : Array.isArray(e[n]) ? t[n] = e[n][0]() : (o = e[n]) != null && o.type && (Array.isArray(e[n].type) ? t[n] = ((r = e[n]) == null ? void 0 : r.default) || ((l = e[n]) == null ? void 0 : l.type[0]()) : t[n] = ((a = e[n]) == null ? void 0 : a.default) || ((u = e[n]) == null ? void 0 : u.type())), t;
-    }, {});
-  },
-  filterArray(e, t, n) {
-    return e.filter((o) => t.some((r) => typeof r == "string" ? o[n] == r : this.equals(
-      o[n],
-      r[n]
-    )));
-  },
-  kebabCase(e) {
-    var t, n;
-    if (e)
-      return (n = (t = e.match(
-        /[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g
-      )) == null ? void 0 : t.join("-")) == null ? void 0 : n.toLowerCase();
+  } else
+    return null;
+}
+function re(t, e) {
+  if (t != null && e && e.length) {
+    for (const n of e)
+      if (B(t, n))
+        return !0;
   }
-}, ne = "ds", re = {
+  return !1;
+}
+function ne(t) {
+  return ((e) => e == null || e === "" || Array.isArray(e) && e.length === 0 || !(e instanceof Date) && typeof e == "object" && Object.keys(e).length === 0)(p(t));
+}
+function j(t) {
+  var e, n;
+  if (t)
+    return (n = (e = t.match(
+      /[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g
+    )) == null ? void 0 : e.join("-")) == null ? void 0 : n.toLowerCase();
+}
+const E = "ds";
+function G(t, e) {
+  const n = { [`${t}`]: !0 };
+  return {
+    bemCssClasses: g(() => Object.keys(e).reduce((r, a) => {
+      const i = p(e[a]) || !1;
+      if (!i)
+        return r;
+      if (a === "modifiers") {
+        const s = Array.isArray(i) ? i : i.split(" ");
+        return {
+          ...r,
+          ...s.reduce(
+            (u, f) => ({
+              ...u,
+              [`${t}--${j(f)}`]: !0
+            }),
+            {}
+          )
+        };
+      } else
+        return {
+          ...r,
+          [`${t}--${j(a)}`]: i
+        };
+    }, n) || {})
+  };
+}
+const oe = {
   color: String,
   width: {
     type: [String, Number]
@@ -183,231 +137,248 @@ const te = {
   modifiers: {
     type: [String, Array]
   }
-};
-function V(e, t) {
-  const n = { [`${e}`]: !0 };
-  return {
-    bemCssClasses: f(() => Object.keys(t).reduce((r, l) => {
-      const a = y(t[l]) || !1;
-      if (!a)
-        return r;
-      if (l === "modifiers") {
-        const u = Array.isArray(a) ? a : [a];
-        return {
-          ...r,
-          ...u.reduce(
-            (c, v) => ({
-              ...c,
-              [`${e}--${h.kebabCase(
-                v
-              )}`]: !0
-            }),
-            {}
-          )
-        };
-      } else
-        return {
-          ...r,
-          [`${e}--${h.kebabCase(l)}`]: a
-        };
-    }, n) || {})
-  };
-}
-const I = /* @__PURE__ */ D({
-  __name: "VvIcon",
-  props: re,
-  setup(e) {
-    const t = e, n = T(!0), { modifiers: o } = R(t), r = q(ne), { bemCssClasses: l } = V("vv-icon", {
-      modifiers: o
-    }), a = f(() => t.provider || (r == null ? void 0 : r.provider)), u = f(() => {
-      const s = t.name || "", i = `@${a.value}:${t.prefix}:${t.name}`;
-      return E(s) ? s : E(i) ? i : (r == null ? void 0 : r.iconsCollections.find((d) => {
-        const g = `@${a.value}:${d.prefix}:${s}`;
-        if (E(g))
-          return g;
-      })) || s;
+}, se = {
+  name: "VvIcon"
+}, I = /* @__PURE__ */ R({
+  ...se,
+  props: oe,
+  setup(t) {
+    const e = t, n = z(!0), { modifiers: c } = x(e), r = L(E), { bemCssClasses: a } = G("vv-icon", {
+      modifiers: c
+    }), i = g(() => e.provider || (r == null ? void 0 : r.provider)), s = g(() => {
+      const o = e.name || "", l = `@${i.value}:${e.prefix}:${e.name}`;
+      return $(o) ? o : $(l) ? l : (r == null ? void 0 : r.iconsCollections.find((m) => {
+        const y = `@${i.value}:${m.prefix}:${o}`;
+        if ($(y))
+          return y;
+      })) || o;
     });
-    function c(s) {
-      let i = null;
+    function u(o) {
+      let l = null;
       if (typeof window > "u") {
-        const { JSDOM: S } = require("jsdom");
-        i = new S().window;
+        const { JSDOM: k } = require("jsdom");
+        l = new k().window;
       }
-      return (i ? new i.DOMParser() : new window.DOMParser()).parseFromString(s, "text/html").querySelector("svg");
+      return (l ? new l.DOMParser() : new window.DOMParser()).parseFromString(o, "text/html").querySelector("svg");
     }
-    function v(s) {
-      const i = c(s), d = (i == null ? void 0 : i.innerHTML.trim()) || "";
-      i && d && ee(`@${a.value}:${t.prefix}:${t.name}`, {
-        body: d,
-        height: i.viewBox.baseVal.height,
-        width: i.viewBox.baseVal.width
+    function f(o) {
+      const l = u(o), m = (l == null ? void 0 : l.innerHTML.trim()) || "";
+      l && m && te(`@${i.value}:${e.prefix}:${e.name}`, {
+        body: m,
+        height: l.viewBox.baseVal.height,
+        width: l.viewBox.baseVal.width
       });
     }
-    return r && (t.src ? (n.value = !1, r.fetchIcon(t.src).then((s) => {
-      s && (v(s), n.value = !0);
-    }).catch((s) => {
-      throw new Error(`During fetch icon: ${s == null ? void 0 : s.message}`);
-    })) : t.svg && v(t.svg)), (s, i) => n.value ? (b(), O(y(Y), F({
+    return r && (e.src && !$(`@${i.value}:${e.prefix}:${e.name}`) ? (n.value = !1, r.fetchIcon(e.src).then((o) => {
+      o && (f(o), n.value = !0);
+    }).catch((o) => {
+      throw new Error(`During fetch icon: ${o == null ? void 0 : o.message}`);
+    })) : e.svg && f(e.svg)), (o, l) => n.value ? (b(), w(p(ee), C({
       key: 0,
-      class: y(l)
+      class: p(a)
     }, {
-      ...s.$props,
-      provider: y(a),
-      icon: y(u)
-    }), null, 16, ["class"])) : C("", !0);
+      ...o.$props,
+      provider: p(i),
+      icon: p(s)
+    }), null, 16, ["class"])) : _("", !0);
   }
-});
-function oe(e) {
-  const t = q(e, void 0), n = f(() => h.isNotEmpty(t));
-  function o(r, l, a) {
-    if (t != null && t.value) {
-      const u = y(t.value)[r];
-      return f({
+}), ie = {
+  disabled: Boolean
+}, le = {
+  modifiers: [String, Array]
+};
+function ae(t) {
+  const e = L(t, void 0), n = g(() => !ne(e));
+  function c(r, a, i) {
+    if (e != null && e.value) {
+      const u = p(e.value)[r];
+      return g({
         get() {
           return u == null ? void 0 : u.value;
         },
-        set(c) {
-          u.value = c;
-        }
-      });
-    } else {
-      const u = Z(l, r);
-      return f({
-        get() {
-          return u.value;
-        },
-        set(c) {
-          a && a(`update:${r}`, c);
+        set(f) {
+          u.value = f;
         }
       });
     }
+    const s = H(a, r);
+    return g({
+      get() {
+        return s.value;
+      },
+      set(u) {
+        i && i(`update:${r}`, u);
+      }
+    });
   }
   return {
-    group: t,
+    group: e,
     isInGroup: n,
-    getGroupOrLocalRef: o
+    getGroupOrLocalRef: c
   };
 }
-const ie = Symbol("VV_BUTTON_GROUP");
-function se(e) {
-  const { group: t, isInGroup: n, getGroupOrLocalRef: o } = oe(ie), { modifiers: r, fullBleed: l, iconPosition: a, icon: u, label: c, block: v, selected: s } = R(e), i = o("modelValue", e), d = o("disabled", e), g = o("toggle", e), p = o("rounded", e), S = o("action", e), $ = o("actionQuiet", e);
+const ue = "VV_BUTTON_GROUP";
+var h = /* @__PURE__ */ ((t) => (t.left = "left", t.right = "right", t.top = "top", t.bottom = "bottom", t))(h || {}), F = /* @__PURE__ */ ((t) => (t.button = "button", t.submit = "submit", t.reset = "reset", t))(F || {}), 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 ce = {
+  ...le,
+  ...ie,
+  icon: {
+    type: [String, Object],
+    default: ""
+  },
+  iconPosition: {
+    type: String,
+    default: "left",
+    validator: (t) => t in h
+  },
+  label: [String, Number],
+  loading: Boolean,
+  loadingIcon: { type: String, default: "eos-icons:bubble-loading" },
+  loadingLabel: {
+    type: String,
+    default: "Loading..."
+  },
+  to: {
+    type: [String, Object]
+  },
+  href: String,
+  target: {
+    type: String,
+    validator: (t) => t in N
+  },
+  active: Boolean,
+  pressed: Boolean,
+  rel: {
+    type: String,
+    default: "noopener noreferrer"
+  },
+  type: {
+    type: String,
+    default: "button",
+    validator: (t) => t in F
+  }
+};
+function fe(t) {
+  const { group: e, isInGroup: n, getGroupOrLocalRef: c } = ae(ue), { iconPosition: r, icon: a, label: i, pressed: s } = x(t), u = c("modelValue", t), f = c("disabled", t), o = c("toggle", t), l = c("modifiers", t);
   return {
-    modelValue: i,
-    disabled: d,
-    toggle: g,
+    modelValue: u,
+    disabled: f,
+    toggle: o,
     isInGroup: n,
-    group: t,
-    modifiers: r,
-    action: S,
-    actionQuiet: $,
-    selected: s,
-    block: v,
-    rounded: p,
-    fullBleed: l,
-    iconPosition: a,
-    icon: u,
-    label: c
+    group: e,
+    modifiers: l,
+    pressed: s,
+    iconPosition: r,
+    icon: a,
+    label: i
   };
 }
-const le = {
+const de = {
   key: 1,
   class: "vv-button__label"
-}, ae = {
+}, ge = {
   key: 1,
   class: "vv-button__label"
-}, de = /* @__PURE__ */ D({
-  __name: "VvButton",
-  props: te,
-  setup(e) {
-    const t = e, n = z(), o = (n == null ? void 0 : n.name) || W(), {
-      modifiers: r,
-      action: l,
-      actionQuiet: a,
-      block: u,
-      rounded: c,
-      fullBleed: v,
-      iconPosition: s,
-      icon: i,
-      label: d,
-      modelValue: g,
-      disabled: p,
-      toggle: S,
-      isInGroup: $
-    } = se(t), L = f(() => {
+}, pe = {
+  name: "VvButton"
+}, he = /* @__PURE__ */ R({
+  ...pe,
+  props: ce,
+  setup(t) {
+    const e = t, n = J(), c = T(), r = (n == null ? void 0 : n.name) || Y(), {
+      modifiers: a,
+      iconPosition: i,
+      icon: s,
+      label: u,
+      modelValue: f,
+      disabled: o,
+      toggle: l,
+      isInGroup: m
+    } = fe(e), y = L(E), O = g(() => {
       switch (!0) {
-        case p.value:
-          return k.button;
-        case t.to !== void 0:
-          return k.routerLink;
-        case t.href !== void 0:
-          return k.a;
+        case o.value:
+          return v.button;
+        case e.to !== void 0:
+          return y != null && y.nuxt ? v.nuxtLink : v.routerLink;
+        case e.href !== void 0:
+          return v.a;
         default:
-          return k.button;
+          return v.button;
       }
-    }), x = f(() => S.value ? Array.isArray(g.value) ? h.contains(o, g.value) : h.equals(o, g.value) : t.active), N = f(() => S.value ? Array.isArray(g.value) ? h.contains(o, g.value) : h.equals(o, g.value) : t.selected), { bemCssClasses: G } = V("vv-button", {
-      modifiers: r,
-      active: x,
-      action: l,
-      actionQuiet: a,
-      selected: N,
-      block: u,
-      rounded: c,
-      fullBleed: v,
-      disabled: p,
-      reverse: f(
-        () => [_.right, _.bottom].includes(
-          s.value
+    }), k = g(() => l.value ? Array.isArray(f.value) ? re(r, f.value) : B(r, f.value) : e.pressed), { bemCssClasses: M } = G("vv-button", {
+      modifiers: a,
+      active: e.active,
+      pressed: k,
+      disabled: o,
+      reverse: g(
+        () => [h.right, h.bottom].includes(
+          i.value
         )
       ),
-      column: f(
-        () => [_.top, _.bottom].includes(
-          s.value
+      column: g(
+        () => [h.top, h.bottom].includes(
+          i.value
         )
       ),
-      iconOnly: f(() => (i == null ? void 0 : i.value) && !(d != null && d.value))
-    }), M = f(() => ({
-      ...U.value,
-      "aria-label": t.label || n["aria-label"],
-      "aria-disabled": p.value,
-      role: "button",
-      class: G.value,
-      to: t.to
-    })), U = f(() => {
-      const m = L.value === k.a;
-      let B = {};
-      return m && (B = p.value ? {
-        href: "javascript:;"
-      } : {
-        target: t.target,
-        href: t.href
-      }), B;
+      iconOnly: g(() => (s == null ? void 0 : s.value) && !(u != null && u.value) && !c.default)
+    }), q = g(
+      () => typeof (s == null ? void 0 : s.value) == "string" ? { name: s == null ? void 0 : s.value } : s == null ? void 0 : s.value
+    ), U = g(() => {
+      const d = {
+        class: M.value,
+        "aria-label": n["aria-label"],
+        "aria-pressed": k.value ? !0 : void 0
+      };
+      switch (O.value) {
+        case v.a:
+          return {
+            ...d,
+            role: "button",
+            href: e.href,
+            target: e.target,
+            rel: e.rel
+          };
+        case v.routerLink:
+        case v.nuxtLink:
+          return {
+            ...d,
+            role: "button",
+            to: e.to,
+            target: e.target
+          };
+        default:
+          return {
+            ...d,
+            type: e.type,
+            disabled: o.value
+          };
+      }
     });
-    function Q() {
-      $.value && (g.value = o);
+    function Z() {
+      m.value && (f.value = r);
     }
-    return (m, B) => (b(), O(H(y(L)), F(y(M), { onClickPassive: Q }), {
-      default: J(() => [
-        A(m.$slots, "default", {}, () => [
-          m.loading ? A(m.$slots, "loading", { key: 0 }, () => [
-            m.loadingIcon ? (b(), O(I, {
+    return (d, ve) => (b(), w(X(p(O)), C(p(U), { onClickPassive: Z }), {
+      default: K(() => [
+        S(d.$slots, "default", {}, () => [
+          d.loading ? S(d.$slots, "loading", { key: 0 }, () => [
+            d.loadingIcon ? (b(), w(I, {
               key: 0,
               class: "vv-button__loading-icon",
-              name: m.loadingIcon
-            }, null, 8, ["name"])) : C("", !0),
-            m.loadingLabel ? (b(), w("span", le, j(m.loadingLabel), 1)) : C("", !0)
-          ]) : (b(), w(X, { key: 1 }, [
-            A(m.$slots, "before"),
-            y(i) ? (b(), O(I, {
+              name: d.loadingIcon
+            }, null, 8, ["name"])) : _("", !0),
+            d.loadingLabel ? (b(), A("span", de, V(d.loadingLabel), 1)) : _("", !0)
+          ]) : (b(), A(Q, { key: 1 }, [
+            S(d.$slots, "before"),
+            p(s) ? (b(), w(I, C({
               key: 0,
-              class: "vv-button__icon",
-              name: y(i)
-            }, null, 8, ["name"])) : C("", !0),
-            y(d) ? (b(), w("span", ae, [
-              A(m.$slots, "label", {}, () => [
-                K(j(y(d)), 1)
+              class: "vv-button__icon"
+            }, p(q)), null, 16)) : _("", !0),
+            p(u) ? (b(), A("span", ge, [
+              S(d.$slots, "label", {}, () => [
+                W(V(p(u)), 1)
               ])
-            ])) : C("", !0),
-            A(m.$slots, "after")
+            ])) : _("", !0),
+            S(d.$slots, "after")
           ], 64))
         ])
       ]),
@@ -416,5 +387,5 @@ const le = {
   }
 });
 export {
-  de as default
+  he as default
 };