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

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

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