@volverjs/ui-vue 0.0.1 → 0.0.2

package/README.md

@@ -117,6 +117,23 @@ export default defineConfig({
 })
 ```
 
+## Roadmap
+
+The following features are planned for the next releases:
+
+- [ ] `VvAvatar` component;
+- [ ] Alerts, notifications and toasts with `VvAlert` and `VvToast` component;
+- [ ] Loaders with `VvLoader` and `VvSkeleton`;
+- [ ] `VvTooltip` component;
+- [ ] Redesign `VvCombobox` for better accessibility;
+- [ ] Rewrite `VvDropdown` component and get it applicable to any element;
+- [ ] Menus, navigation and tabs with `VvNav`;
+- [ ] Input masks for `VvInputText` component;
+- [ ] `VvTable` component with sort, filters, pagination and cell editing;
+- [ ] Multiple uploads, image crop and file previews with `VvInputFile`;
+- [ ] Carousel and galleries with `VvCarousel` component;
+- [ ] Calendar and date picker with `VvCalendar` component.
+
 ## Documentation
 
 To learn more about `@volverjs/ui-vue`, check [its documentation](https://volverjs.github.io/ui-vue).

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

@@ -1,99 +1,99 @@
-import { unref as v, computed as g, defineComponent as I, ref as G, toRefs as M, inject as P, openBlock as b, createBlock as A, mergeProps as C, createCommentVNode as $, toRef as T, useAttrs as X, useSlots as K, resolveDynamicComponent as Q, withCtx as W, renderSlot as _, createElementBlock as O, toDisplayString as j, Fragment as Y, createTextVNode as ee } from "vue";
+import { unref as g, computed as d, defineComponent as N, ref as q, toRefs as z, inject as F, openBlock as h, createBlock as V, mergeProps as D, createCommentVNode as $, toRef as T, useAttrs as X, useSlots as K, resolveDynamicComponent as Q, withCtx as W, renderSlot as _, createElementBlock as P, toDisplayString as R, Fragment as Y, createTextVNode as ee } from "vue";
 import { nanoid as te } from "nanoid";
-import { iconExists as w, Icon as ne, addIcon as re } from "@iconify/vue";
-function V(e, t, r) {
-  return r ? B(e, r) === B(t, r) : L(e, t);
+import { iconExists as O, Icon as re, addIcon as ne } from "@iconify/vue";
+function j(e, t, r) {
+  return r ? E(e, r) === E(t, r) : B(e, t);
 }
-function L(e, t) {
+function B(e, t) {
   if (e === t)
     return !0;
   if (e && t && typeof e == "object" && typeof t == "object") {
-    const r = Array.isArray(e), u = Array.isArray(t);
-    let o, i, a;
-    if (r && u) {
-      if (i = e.length, i != t.length)
+    const r = Array.isArray(e), c = Array.isArray(t);
+    let o, l, u;
+    if (r && c) {
+      if (l = e.length, l != t.length)
         return !1;
-      for (o = i; o-- !== 0; )
-        if (!L(e[o], t[o]))
+      for (o = l; o-- !== 0; )
+        if (!B(e[o], t[o]))
           return !1;
       return !0;
     }
-    if (r != u)
+    if (r != c)
       return !1;
-    const d = e instanceof Date, s = t instanceof Date;
-    if (d != s)
+    const v = e instanceof Date, s = t instanceof Date;
+    if (v != s)
       return !1;
-    if (d && s)
+    if (v && s)
       return e.getTime() == t.getTime();
-    const c = e instanceof RegExp, n = t instanceof RegExp;
-    if (c != n)
+    const a = e instanceof RegExp, n = t instanceof RegExp;
+    if (a != n)
       return !1;
-    if (c && n)
+    if (a && n)
       return e.toString() == t.toString();
-    const l = Object.keys(e);
-    if (i = l.length, i !== Object.keys(t).length)
+    const i = Object.keys(e);
+    if (l = i.length, l !== Object.keys(t).length)
       return !1;
-    for (o = i; o-- !== 0; )
-      if (!Object.prototype.hasOwnProperty.call(t, l[o]))
+    for (o = l; o-- !== 0; )
+      if (!Object.prototype.hasOwnProperty.call(t, i[o]))
         return !1;
-    for (o = i; o-- !== 0; )
-      if (a = l[o], !L(e[a], t[a]))
+    for (o = l; o-- !== 0; )
+      if (u = i[o], !B(e[u], t[u]))
         return !1;
     return !0;
   }
   return e !== e && t !== t;
 }
-function B(e, t) {
+function E(e, t) {
   if (e && Object.keys(e).length && t) {
     if (t.indexOf(".") === -1)
       return e[t];
     {
       const r = t.split(".");
-      let u = e;
-      for (let o = 0, i = r.length; o < i; ++o) {
+      let c = e;
+      for (let o = 0, l = r.length; o < l; ++o) {
         if (e == null)
           return null;
-        u = u[r[o]];
+        c = c[r[o]];
       }
-      return u;
+      return c;
     }
   } else
     return null;
 }
-function F(e, t) {
+function I(e, t) {
   if (e != null && t && t.length) {
     for (const r of t)
-      if (V(e, r))
+      if (j(e, r))
         return !0;
   }
   return !1;
 }
 function oe(e) {
-  return ((t) => t == null || t === "" || Array.isArray(t) && t.length === 0 || !(t instanceof Date) && typeof t == "object" && Object.keys(t).length === 0)(v(e));
+  return ((t) => t == null || t === "" || Array.isArray(t) && t.length === 0 || !(t instanceof Date) && typeof t == "object" && Object.keys(t).length === 0)(g(e));
 }
-function R(e) {
+function M(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();
 }
-const N = "ds";
-function q(e, t) {
+const U = "ds";
+function Z(e, t) {
   const r = { [`${e}`]: !0 };
   return {
-    bemCssClasses: g(() => Object.keys(t).reduce((o, i) => {
-      const a = v(t[i]) || !1;
-      if (!a)
+    bemCssClasses: d(() => Object.keys(t).reduce((o, l) => {
+      const u = g(t[l]) || !1;
+      if (!u)
         return o;
-      if (i === "modifiers") {
-        const d = Array.isArray(a) ? a : a.split(" ");
+      if (l === "modifiers") {
+        const v = Array.isArray(u) ? u : u.split(" ");
         return {
           ...o,
-          ...d.reduce(
-            (s, c) => ({
+          ...v.reduce(
+            (s, a) => ({
               ...s,
-              [`${e}--${R(c)}`]: !0
+              [`${e}--${M(a)}`]: !0
             }),
             {}
           )
@@ -101,7 +101,7 @@ function q(e, t) {
       } else
         return {
           ...o,
-          [`${e}--${R(i)}`]: a
+          [`${e}--${M(l)}`]: u
         };
     }, r) || {})
   };
@@ -137,45 +137,45 @@ const se = {
   modifiers: {
     type: [String, Array]
   }
-}, ie = {
+}, le = {
   name: "VvIcon"
-}, E = /* @__PURE__ */ I({
-  ...ie,
+}, G = /* @__PURE__ */ N({
+  ...le,
   props: se,
   setup(e) {
-    const t = e, r = G(!0), { modifiers: u } = M(t), o = P(N), { bemCssClasses: i } = q("vv-icon", {
-      modifiers: u
-    }), a = g(() => t.provider || (o == null ? void 0 : o.provider)), d = g(() => {
-      const n = t.name ?? "", l = `@${a.value}:${t.prefix}:${t.name}`;
-      return w(n) ? n : w(l) ? l : (o == null ? void 0 : o.iconsCollections.find((p) => {
-        const y = `@${a.value}:${p.prefix}:${n}`;
-        if (w(y))
+    const t = e, r = q(!0), { modifiers: c } = z(t), o = F(U), { bemCssClasses: l } = Z("vv-icon", {
+      modifiers: c
+    }), u = d(() => t.provider || (o == null ? void 0 : o.provider)), v = d(() => {
+      const n = t.name ?? "", i = `@${u.value}:${t.prefix}:${t.name}`;
+      return O(n) ? n : O(i) ? i : (o == null ? void 0 : o.iconsCollections.find((p) => {
+        const y = `@${u.value}:${p.prefix}:${n}`;
+        if (O(y))
           return y;
       })) || n;
     });
     function s(n) {
-      let l = null;
+      let i = null;
       if (typeof window > "u") {
-        const { JSDOM: h } = require("jsdom");
-        l = new h().window;
+        const { JSDOM: S } = require("jsdom");
+        i = new S().window;
       }
-      return (l ? new l.DOMParser() : new window.DOMParser()).parseFromString(n, "text/html").querySelector("svg");
+      return (i ? new i.DOMParser() : new window.DOMParser()).parseFromString(n, "text/html").querySelector("svg");
     }
-    function c(n) {
-      const l = s(n), p = (l == null ? void 0 : l.innerHTML.trim()) || "";
-      l && p && re(`@${a.value}:${t.prefix}:${t.name}`, {
+    function a(n) {
+      const i = s(n), p = (i == null ? void 0 : i.innerHTML.trim()) || "";
+      i && p && ne(`@${u.value}:${t.prefix}:${t.name}`, {
         body: p,
-        height: l.viewBox.baseVal.height,
-        width: l.viewBox.baseVal.width
+        height: i.viewBox.baseVal.height,
+        width: i.viewBox.baseVal.width
       });
     }
-    return o && (t.src && !w(`@${a.value}:${t.prefix}:${t.name}`) ? (r.value = !1, o.fetchIcon(t.src).then((n) => {
-      n && (c(n), r.value = !0);
+    return o && (t.src && !O(`@${u.value}:${t.prefix}:${t.name}`) ? (r.value = !1, o.fetchIcon(t.src).then((n) => {
+      n && (a(n), r.value = !0);
     }).catch((n) => {
       throw new Error(`During fetch icon: ${n == null ? void 0 : n.message}`);
-    })) : t.svg && c(t.svg)), (n, l) => r.value ? (b(), A(v(ne), C({
+    })) : t.svg && a(t.svg)), (n, i) => r.value ? (h(), V(g(re), D({
       key: 0,
-      class: v(i)
+      class: g(l)
     }, {
       inline: n.inline,
       width: n.width,
@@ -186,49 +186,52 @@ const se = {
       rotate: n.rotate,
       color: n.color,
       onLoad: n.onLoad,
-      icon: v(d)
+      icon: g(v)
     }), null, 16, ["class"])) : $("", !0);
   }
-}), le = {
+}), ie = {
   disabled: Boolean
 }, ae = {
   modifiers: [String, Array]
+}, ue = {
+  unselectable: { type: Boolean, default: !0 }
 };
-function ue(e) {
-  const t = P(e, void 0), r = g(() => !oe(t));
-  function u(o, i, a) {
+function ce(e) {
+  const t = F(e, void 0), r = d(() => !oe(t));
+  function c(o, l, u) {
     if (t != null && t.value) {
-      const s = v(t.value)[o];
-      return g({
+      const s = g(t.value)[o];
+      return d({
         get() {
           return s == null ? void 0 : s.value;
         },
-        set(c) {
-          s.value = c;
+        set(a) {
+          s.value = a;
         }
       });
     }
-    const d = T(i, o);
-    return g({
+    const v = T(l, o);
+    return d({
       get() {
-        return d.value;
+        return v.value;
       },
       set(s) {
-        a && a(`update:${o}`, s);
+        u && u(`update:${o}`, s);
       }
     });
   }
   return {
     group: t,
     isInGroup: r,
-    getGroupOrLocalRef: u
+    getGroupOrLocalRef: c
   };
 }
-const ce = "VV_BUTTON_GROUP";
-var k = /* @__PURE__ */ ((e) => (e.left = "left", e.right = "right", e.top = "top", e.bottom = "bottom", e))(k || {}), z = /* @__PURE__ */ ((e) => (e.button = "button", e.submit = "submit", e.reset = "reset", e))(z || {}), m = /* @__PURE__ */ ((e) => (e.nuxtLink = "nuxt-link", e.routerLink = "router-link", e.a = "a", e.button = "button", e))(m || {}), U = /* @__PURE__ */ ((e) => (e._blank = "_blank", e._self = "_self", e._parent = "_parent", e._top = "_top", e))(U || {});
-const fe = ["update:modelValue"], de = {
+const fe = "VV_BUTTON_GROUP";
+var k = /* @__PURE__ */ ((e) => (e.left = "left", e.right = "right", e.top = "top", e.bottom = "bottom", e))(k || {}), x = /* @__PURE__ */ ((e) => (e.button = "button", e.submit = "submit", e.reset = "reset", e))(x || {}), m = /* @__PURE__ */ ((e) => (e.nuxtLink = "nuxt-link", e.routerLink = "router-link", e.a = "a", e.button = "button", e))(m || {}), H = /* @__PURE__ */ ((e) => (e._blank = "_blank", e._self = "_self", e._parent = "_parent", e._top = "_top", e))(H || {});
+const de = ["update:modelValue"], ve = {
   ...ae,
-  ...le,
+  ...ie,
+  ...ue,
   icon: {
     type: [String, Object],
     default: ""
@@ -251,7 +254,7 @@ const fe = ["update:modelValue"], de = {
   href: String,
   target: {
     type: String,
-    validator: (e) => e in U
+    validator: (e) => e in H
   },
   active: Boolean,
   pressed: Boolean,
@@ -262,95 +265,104 @@ const fe = ["update:modelValue"], de = {
   type: {
     type: String,
     default: "button",
-    validator: (e) => e in z
+    validator: (e) => e in x
   },
   toggle: {
     type: Boolean,
     default: !1
   },
-  modelValue: String,
-  unselectable: { type: Boolean, default: !0 }
+  modelValue: String
 };
 function ge(e, t) {
-  var h;
-  const { group: r, isInGroup: u, getGroupOrLocalRef: o } = ue(ce), { iconPosition: i, icon: a, label: d, pressed: s } = M(e), c = o("modelValue", e, t), n = o("disabled", e), l = o("toggle", e), p = o(
+  var A;
+  const { group: r, isInGroup: c, getGroupOrLocalRef: o } = ce(fe), {
+    iconPosition: l,
+    icon: u,
+    label: v,
+    pressed: s,
+    modifiers: a
+  } = z(e), n = o("modelValue", e, t), i = o("disabled", e), p = o("toggle", e), y = o(
     "unselectable",
     e
-  ), y = o("modifiers", e), S = ((h = r == null ? void 0 : r.value) == null ? void 0 : h.multiple) ?? G(!1);
+  ), b = ((A = r == null ? void 0 : r.value) == null ? void 0 : A.multiple) ?? q(!1), S = d(() => {
+    var w;
+    const C = a != null && a.value ? Array.isArray(a.value) ? a.value : [a.value] : [], L = (w = r == null ? void 0 : r.value.itemModifiers) != null && w.value ? Array.isArray(r.value.itemModifiers.value) ? r.value.itemModifiers.value : [r.value.itemModifiers.value] : [];
+    return [...C, ...L];
+  });
   return {
-    modelValue: c,
-    disabled: n,
-    toggle: l,
-    isInGroup: u,
     group: r,
-    modifiers: y,
-    multiple: S,
-    unselectable: p,
+    isInGroup: c,
+    modelValue: n,
+    disabled: i,
+    toggle: p,
+    unselectable: y,
+    multiple: b,
+    modifiers: S,
     pressed: s,
-    iconPosition: i,
-    icon: a,
-    label: d
+    iconPosition: l,
+    icon: u,
+    label: v
   };
 }
-const ve = {
+const pe = {
   key: 1,
   class: "vv-button__label"
-}, pe = {
+}, me = {
   key: 1,
   class: "vv-button__label"
-}, me = {
+}, ye = {
   name: "VvButton"
-}, ke = /* @__PURE__ */ I({
-  ...me,
-  props: de,
-  emits: fe,
+}, Ae = /* @__PURE__ */ N({
+  ...ye,
+  props: ve,
+  emits: de,
   setup(e, { emit: t }) {
-    const r = e, u = X(), o = K(), i = (u == null ? void 0 : u.name) || te(), {
-      modifiers: a,
-      iconPosition: d,
+    const r = e, c = X(), o = K(), l = (c == null ? void 0 : c.name) || te(), {
+      modifiers: u,
+      iconPosition: v,
       icon: s,
-      label: c,
+      label: a,
       modelValue: n,
-      disabled: l,
+      disabled: i,
       toggle: p,
       unselectable: y
-    } = ge(r, t), S = P(N), h = g(() => {
+    } = ge(r, t), b = F(U), S = d(() => {
       switch (!0) {
-        case l.value:
+        case i.value:
           return m.button;
         case r.to !== void 0:
-          return S != null && S.nuxt ? m.nuxtLink : m.routerLink;
+          return b != null && b.nuxt ? m.nuxtLink : m.routerLink;
         case r.href !== void 0:
           return m.a;
         default:
           return m.button;
       }
-    }), D = g(() => p.value ? Array.isArray(n.value) ? F(i, n.value) : V(i, n.value) : r.pressed), { bemCssClasses: Z } = q("vv-button", {
-      modifiers: a,
+    }), A = d(() => p.value ? Array.isArray(n.value) ? I(l, n.value) : j(l, n.value) : r.pressed), { bemCssClasses: C } = Z("vv-button", {
+      modifiers: u,
       active: r.active,
-      pressed: D,
-      disabled: l,
-      reverse: g(
+      pressed: A,
+      disabled: i,
+      reverse: d(
         () => [k.right, k.bottom].includes(
-          d.value
+          v.value
         )
       ),
-      column: g(
+      column: d(
         () => [k.top, k.bottom].includes(
-          d.value
+          v.value
         )
       ),
-      iconOnly: g(
-        () => (s == null ? void 0 : s.value) && !(c != null && c.value) && !o.default
+      iconOnly: d(
+        () => (s == null ? void 0 : s.value) && !(a != null && a.value) && !o.default
       )
-    }), x = g(
+    }), L = d(
       () => typeof (s == null ? void 0 : s.value) == "string" ? { name: s == null ? void 0 : s.value } : s == null ? void 0 : s.value
-    ), H = g(() => {
+    ), w = d(() => {
       const f = {
-        class: Z.value,
-        "aria-pressed": D.value ? !0 : void 0
+        class: C.value,
+        "aria-pressed": A.value ? !0 : void 0
       };
-      switch (h.value) {
+      switch (S.value) {
         case m.a:
           return {
             ...f,
@@ -371,47 +383,47 @@ const ve = {
           return {
             ...f,
             type: r.type,
-            disabled: l.value
+            disabled: i.value
           };
       }
     }), J = () => {
       if (p.value) {
         if (Array.isArray(n.value)) {
-          if (F(i, n.value)) {
+          if (I(l, n.value)) {
             y.value && (n.value = n.value.filter(
-              (f) => f !== i
+              (f) => f !== l
             ));
             return;
           }
-          n.value.push(i);
+          n.value.push(l);
           return;
         }
-        if (V(i, n.value) && y.value) {
+        if (j(l, n.value) && y.value) {
           n.value = void 0;
           return;
         }
-        n.value = i;
+        n.value = l;
       }
     };
-    return (f, ye) => (b(), A(Q(v(h)), C(v(H), { onClickPassive: J }), {
+    return (f, he) => (h(), V(Q(g(S)), D(g(w), { onClickPassive: J }), {
       default: W(() => [
         _(f.$slots, "default", {}, () => [
           f.loading ? _(f.$slots, "loading", { key: 0 }, () => [
-            f.loadingIcon ? (b(), A(E, {
+            f.loadingIcon ? (h(), V(G, {
               key: 0,
               class: "vv-button__loading-icon",
               name: f.loadingIcon
             }, null, 8, ["name"])) : $("", !0),
-            f.loadingLabel ? (b(), O("span", ve, j(f.loadingLabel), 1)) : $("", !0)
-          ]) : (b(), O(Y, { key: 1 }, [
+            f.loadingLabel ? (h(), P("span", pe, R(f.loadingLabel), 1)) : $("", !0)
+          ]) : (h(), P(Y, { key: 1 }, [
             _(f.$slots, "before"),
-            v(s) ? (b(), A(E, C({
+            g(s) ? (h(), V(G, D({
               key: 0,
               class: "vv-button__icon"
-            }, v(x)), null, 16)) : $("", !0),
-            v(c) ? (b(), O("span", pe, [
+            }, g(L)), null, 16)) : $("", !0),
+            g(a) ? (h(), P("span", me, [
               _(f.$slots, "label", {}, () => [
-                ee(j(v(c)), 1)
+                ee(R(g(a)), 1)
               ])
             ])) : $("", !0),
             _(f.$slots, "after")
@@ -423,5 +435,5 @@ const ve = {
   }
 });
 export {
-  ke as default
+  Ae as default
 };

package/dist/components/VvButton/VvButton.umd.js

@@ -1 +1 @@
-(function(e,_){typeof exports=="object"&&typeof module<"u"?module.exports=_(require("vue"),require("nanoid"),require("@iconify/vue")):typeof define=="function"&&define.amd?define(["vue","nanoid","@iconify/vue"],_):(e=typeof globalThis<"u"?globalThis:e||self,e.VvButton=_(e.vue,e.nanoid,e.vue$1))})(this,function(e,_,b){"use strict";function C(t,n,o){return o?B(t,o)===B(n,o):w(t,n)}function w(t,n){if(t===n)return!0;if(t&&n&&typeof t=="object"&&typeof n=="object"){const o=Array.isArray(t),u=Array.isArray(n);let s,l,c;if(o&&u){if(l=t.length,l!=n.length)return!1;for(s=l;s--!==0;)if(!w(t[s],n[s]))return!1;return!0}if(o!=u)return!1;const p=t instanceof Date,i=n instanceof Date;if(p!=i)return!1;if(p&&i)return t.getTime()==n.getTime();const f=t instanceof RegExp,r=n instanceof RegExp;if(f!=r)return!1;if(f&&r)return t.toString()==n.toString();const a=Object.keys(t);if(l=a.length,l!==Object.keys(n).length)return!1;for(s=l;s--!==0;)if(!Object.prototype.hasOwnProperty.call(n,a[s]))return!1;for(s=l;s--!==0;)if(c=a[s],!w(t[c],n[c]))return!1;return!0}return t!==t&&n!==n}function B(t,n){if(t&&Object.keys(t).length&&n){if(n.indexOf(".")===-1)return t[n];{const o=n.split(".");let u=t;for(let s=0,l=o.length;s<l;++s){if(t==null)return null;u=u[o[s]]}return u}}else return null}function V(t,n){if(t!=null&&n&&n.length){for(const o of n)if(C(t,o))return!0}return!1}function E(t){return(n=>n==null||n===""||Array.isArray(n)&&n.length===0||!(n instanceof Date)&&typeof n=="object"&&Object.keys(n).length===0)(e.unref(t))}function v(t){var n,o;if(t)return(o=(n=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:n.join("-"))==null?void 0:o.toLowerCase()}const A="ds";function $(t,n){const o={[`${t}`]:!0};return{bemCssClasses:e.computed(()=>Object.keys(n).reduce((s,l)=>{const c=e.unref(n[l])||!1;if(!c)return s;if(l==="modifiers"){const p=Array.isArray(c)?c:c.split(" ");return{...s,...p.reduce((i,f)=>({...i,[`${t}--${v(f)}`]:!0}),{})}}else return{...s,[`${t}--${v(l)}`]:c}},o)||{})}}const D={color:String,width:{type:[String,Number]},height:{type:[String,Number]},name:{type:String,required:!0},provider:{type:String},prefix:{type:String,default:"normal"},src:String,horizontalFlip:Boolean,verticalFlip:Boolean,flip:String,mode:String,inline:Boolean,rotate:[Number,String],onLoad:Function,svg:String,modifiers:{type:[String,Array]}},R={name:"VvIcon"},O=e.defineComponent({...R,props:D,setup(t){const n=t,o=e.ref(!0),{modifiers:u}=e.toRefs(n),s=e.inject(A),{bemCssClasses:l}=$("vv-icon",{modifiers:u}),c=e.computed(()=>n.provider||(s==null?void 0:s.provider)),p=e.computed(()=>{const r=n.name??"",a=`@${c.value}:${n.prefix}:${n.name}`;return b.iconExists(r)?r:b.iconExists(a)?a:(s==null?void 0:s.iconsCollections.find(m=>{const y=`@${c.value}:${m.prefix}:${r}`;if(b.iconExists(y))return y}))||r});function i(r){let a=null;if(typeof window>"u"){const{JSDOM:h}=require("jsdom");a=new h().window}return(a?new a.DOMParser:new window.DOMParser).parseFromString(r,"text/html").querySelector("svg")}function f(r){const a=i(r),m=(a==null?void 0:a.innerHTML.trim())||"";a&&m&&b.addIcon(`@${c.value}:${n.prefix}:${n.name}`,{body:m,height:a.viewBox.baseVal.height,width:a.viewBox.baseVal.width})}return s&&(n.src&&!b.iconExists(`@${c.value}:${n.prefix}:${n.name}`)?(o.value=!1,s.fetchIcon(n.src).then(r=>{r&&(f(r),o.value=!0)}).catch(r=>{throw new Error(`During fetch icon: ${r==null?void 0:r.message}`)})):n.svg&&f(n.svg)),(r,a)=>o.value?(e.openBlock(),e.createBlock(e.unref(b.Icon),e.mergeProps({key:0,class:e.unref(l)},{inline:r.inline,width:r.width,height:r.height,horizontalFlip:r.horizontalFlip,verticalFlip:r.verticalFlip,flip:r.flip,rotate:r.rotate,color:r.color,onLoad:r.onLoad,icon:e.unref(p)}),null,16,["class"])):e.createCommentVNode("",!0)}}),F={disabled:Boolean},I={modifiers:[String,Array]};function N(t){const n=e.inject(t,void 0),o=e.computed(()=>!E(n));function u(s,l,c){if(n!=null&&n.value){const i=e.unref(n.value)[s];return e.computed({get(){return i==null?void 0:i.value},set(f){i.value=f}})}const p=e.toRef(l,s);return e.computed({get(){return p.value},set(i){c&&c(`update:${s}`,i)}})}return{group:n,isInGroup:o,getGroupOrLocalRef:u}}const q="VV_BUTTON_GROUP";var S=(t=>(t.left="left",t.right="right",t.top="top",t.bottom="bottom",t))(S||{}),P=(t=>(t.button="button",t.submit="submit",t.reset="reset",t))(P||{}),g=(t=>(t.nuxtLink="nuxt-link",t.routerLink="router-link",t.a="a",t.button="button",t))(g||{}),L=(t=>(t._blank="_blank",t._self="_self",t._parent="_parent",t._top="_top",t))(L||{});const G=["update:modelValue"],x={...I,...F,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..."},to:{type:[String,Object]},href:String,target:{type:String,validator:t=>t in L},active:Boolean,pressed:Boolean,rel:{type:String,default:"noopener noreferrer"},type:{type:String,default:"button",validator:t=>t in P},toggle:{type:Boolean,default:!1},modelValue:String,unselectable:{type:Boolean,default:!0}};function M(t,n){var h;const{group:o,isInGroup:u,getGroupOrLocalRef:s}=N(q),{iconPosition:l,icon:c,label:p,pressed:i}=e.toRefs(t),f=s("modelValue",t,n),r=s("disabled",t),a=s("toggle",t),m=s("unselectable",t),y=s("modifiers",t),k=((h=o==null?void 0:o.value)==null?void 0:h.multiple)??e.ref(!1);return{modelValue:f,disabled:r,toggle:a,isInGroup:u,group:o,modifiers:y,multiple:k,unselectable:m,pressed:i,iconPosition:l,icon:c,label:p}}const z={key:1,class:"vv-button__label"},U={key:1,class:"vv-button__label"},Z={name:"VvButton"};return e.defineComponent({...Z,props:x,emits:G,setup(t,{emit:n}){const o=t,u=e.useAttrs(),s=e.useSlots(),l=(u==null?void 0:u.name)||_.nanoid(),{modifiers:c,iconPosition:p,icon:i,label:f,modelValue:r,disabled:a,toggle:m,unselectable:y}=M(o,n),k=e.inject(A),h=e.computed(()=>{switch(!0){case a.value:return g.button;case o.to!==void 0:return k!=null&&k.nuxt?g.nuxtLink:g.routerLink;case o.href!==void 0:return g.a;default:return g.button}}),j=e.computed(()=>m.value?Array.isArray(r.value)?V(l,r.value):C(l,r.value):o.pressed),{bemCssClasses:T}=$("vv-button",{modifiers:c,active:o.active,pressed:j,disabled:a,reverse:e.computed(()=>[S.right,S.bottom].includes(p.value)),column:e.computed(()=>[S.top,S.bottom].includes(p.value)),iconOnly:e.computed(()=>(i==null?void 0:i.value)&&!(f!=null&&f.value)&&!s.default)}),H=e.computed(()=>typeof(i==null?void 0:i.value)=="string"?{name:i==null?void 0:i.value}:i==null?void 0:i.value),J=e.computed(()=>{const d={class:T.value,"aria-pressed":j.value?!0:void 0};switch(h.value){case g.a:return{...d,role:"button",href:o.href,target:o.target,rel:o.rel};case g.routerLink:case g.nuxtLink:return{...d,role:"button",to:o.to,target:o.target};default:return{...d,type:o.type,disabled:a.value}}}),X=()=>{if(m.value){if(Array.isArray(r.value)){if(V(l,r.value)){y.value&&(r.value=r.value.filter(d=>d!==l));return}r.value.push(l);return}if(C(l,r.value)&&y.value){r.value=void 0;return}r.value=l}};return(d,Q)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(h)),e.mergeProps(e.unref(J),{onClickPassive:X}),{default:e.withCtx(()=>[e.renderSlot(d.$slots,"default",{},()=>[d.loading?e.renderSlot(d.$slots,"loading",{key:0},()=>[d.loadingIcon?(e.openBlock(),e.createBlock(O,{key:0,class:"vv-button__loading-icon",name:d.loadingIcon},null,8,["name"])):e.createCommentVNode("",!0),d.loadingLabel?(e.openBlock(),e.createElementBlock("span",z,e.toDisplayString(d.loadingLabel),1)):e.createCommentVNode("",!0)]):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.renderSlot(d.$slots,"before"),e.unref(i)?(e.openBlock(),e.createBlock(O,e.mergeProps({key:0,class:"vv-button__icon"},e.unref(H)),null,16)):e.createCommentVNode("",!0),e.unref(f)?(e.openBlock(),e.createElementBlock("span",U,[e.renderSlot(d.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(e.unref(f)),1)])])):e.createCommentVNode("",!0),e.renderSlot(d.$slots,"after")],64))])]),_:3},16))}})});
+(function(e,v){typeof exports=="object"&&typeof module<"u"?module.exports=v(require("vue"),require("nanoid"),require("@iconify/vue")):typeof define=="function"&&define.amd?define(["vue","nanoid","@iconify/vue"],v):(e=typeof globalThis<"u"?globalThis:e||self,e.VvButton=v(e.vue,e.nanoid,e.vue$1))})(this,function(e,v,h){"use strict";function V(t,n,r){return r?$(t,r)===$(n,r):C(t,n)}function C(t,n){if(t===n)return!0;if(t&&n&&typeof t=="object"&&typeof n=="object"){const r=Array.isArray(t),f=Array.isArray(n);let s,l,u;if(r&&f){if(l=t.length,l!=n.length)return!1;for(s=l;s--!==0;)if(!C(t[s],n[s]))return!1;return!0}if(r!=f)return!1;const p=t instanceof Date,i=n instanceof Date;if(p!=i)return!1;if(p&&i)return t.getTime()==n.getTime();const c=t instanceof RegExp,o=n instanceof RegExp;if(c!=o)return!1;if(c&&o)return t.toString()==n.toString();const a=Object.keys(t);if(l=a.length,l!==Object.keys(n).length)return!1;for(s=l;s--!==0;)if(!Object.prototype.hasOwnProperty.call(n,a[s]))return!1;for(s=l;s--!==0;)if(u=a[s],!C(t[u],n[u]))return!1;return!0}return t!==t&&n!==n}function $(t,n){if(t&&Object.keys(t).length&&n){if(n.indexOf(".")===-1)return t[n];{const r=n.split(".");let f=t;for(let s=0,l=r.length;s<l;++s){if(t==null)return null;f=f[r[s]]}return f}}else return null}function O(t,n){if(t!=null&&n&&n.length){for(const r of n)if(V(t,r))return!0}return!1}function F(t){return(n=>n==null||n===""||Array.isArray(n)&&n.length===0||!(n instanceof Date)&&typeof n=="object"&&Object.keys(n).length===0)(e.unref(t))}function P(t){var n,r;if(t)return(r=(n=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:n.join("-"))==null?void 0:r.toLowerCase()}const L="ds";function j(t,n){const r={[`${t}`]:!0};return{bemCssClasses:e.computed(()=>Object.keys(n).reduce((s,l)=>{const u=e.unref(n[l])||!1;if(!u)return s;if(l==="modifiers"){const p=Array.isArray(u)?u:u.split(" ");return{...s,...p.reduce((i,c)=>({...i,[`${t}--${P(c)}`]:!0}),{})}}else return{...s,[`${t}--${P(l)}`]:u}},r)||{})}}const I={color:String,width:{type:[String,Number]},height:{type:[String,Number]},name:{type:String,required:!0},provider:{type:String},prefix:{type:String,default:"normal"},src:String,horizontalFlip:Boolean,verticalFlip:Boolean,flip:String,mode:String,inline:Boolean,rotate:[Number,String],onLoad:Function,svg:String,modifiers:{type:[String,Array]}},N={name:"VvIcon"},E=e.defineComponent({...N,props:I,setup(t){const n=t,r=e.ref(!0),{modifiers:f}=e.toRefs(n),s=e.inject(L),{bemCssClasses:l}=j("vv-icon",{modifiers:f}),u=e.computed(()=>n.provider||(s==null?void 0:s.provider)),p=e.computed(()=>{const o=n.name??"",a=`@${u.value}:${n.prefix}:${n.name}`;return h.iconExists(o)?o:h.iconExists(a)?a:(s==null?void 0:s.iconsCollections.find(m=>{const y=`@${u.value}:${m.prefix}:${o}`;if(h.iconExists(y))return y}))||o});function i(o){let a=null;if(typeof window>"u"){const{JSDOM:k}=require("jsdom");a=new k().window}return(a?new a.DOMParser:new window.DOMParser).parseFromString(o,"text/html").querySelector("svg")}function c(o){const a=i(o),m=(a==null?void 0:a.innerHTML.trim())||"";a&&m&&h.addIcon(`@${u.value}:${n.prefix}:${n.name}`,{body:m,height:a.viewBox.baseVal.height,width:a.viewBox.baseVal.width})}return s&&(n.src&&!h.iconExists(`@${u.value}:${n.prefix}:${n.name}`)?(r.value=!1,s.fetchIcon(n.src).then(o=>{o&&(c(o),r.value=!0)}).catch(o=>{throw new Error(`During fetch icon: ${o==null?void 0:o.message}`)})):n.svg&&c(n.svg)),(o,a)=>r.value?(e.openBlock(),e.createBlock(e.unref(h.Icon),e.mergeProps({key:0,class:e.unref(l)},{inline:o.inline,width:o.width,height:o.height,horizontalFlip:o.horizontalFlip,verticalFlip:o.verticalFlip,flip:o.flip,rotate:o.rotate,color:o.color,onLoad:o.onLoad,icon:e.unref(p)}),null,16,["class"])):e.createCommentVNode("",!0)}}),M={disabled:Boolean},q={modifiers:[String,Array]},G={unselectable:{type:Boolean,default:!0}};function x(t){const n=e.inject(t,void 0),r=e.computed(()=>!F(n));function f(s,l,u){if(n!=null&&n.value){const i=e.unref(n.value)[s];return e.computed({get(){return i==null?void 0:i.value},set(c){i.value=c}})}const p=e.toRef(l,s);return e.computed({get(){return p.value},set(i){u&&u(`update:${s}`,i)}})}return{group:n,isInGroup:r,getGroupOrLocalRef:f}}const z="VV_BUTTON_GROUP";var b=(t=>(t.left="left",t.right="right",t.top="top",t.bottom="bottom",t))(b||{}),D=(t=>(t.button="button",t.submit="submit",t.reset="reset",t))(D||{}),g=(t=>(t.nuxtLink="nuxt-link",t.routerLink="router-link",t.a="a",t.button="button",t))(g||{}),R=(t=>(t._blank="_blank",t._self="_self",t._parent="_parent",t._top="_top",t))(R||{});const U=["update:modelValue"],Z={...q,...M,...G,icon:{type:[String,Object],default:""},iconPosition:{type:String,default:"left",validator:t=>t in b},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 R},active:Boolean,pressed:Boolean,rel:{type:String,default:"noopener noreferrer"},type:{type:String,default:"button",validator:t=>t in D},toggle:{type:Boolean,default:!1},modelValue:String};function T(t,n){var _;const{group:r,isInGroup:f,getGroupOrLocalRef:s}=x(z),{iconPosition:l,icon:u,label:p,pressed:i,modifiers:c}=e.toRefs(t),o=s("modelValue",t,n),a=s("disabled",t),m=s("toggle",t),y=s("unselectable",t),S=((_=r==null?void 0:r.value)==null?void 0:_.multiple)??e.ref(!1),k=e.computed(()=>{var A;const w=c!=null&&c.value?Array.isArray(c.value)?c.value:[c.value]:[],B=(A=r==null?void 0:r.value.itemModifiers)!=null&&A.value?Array.isArray(r.value.itemModifiers.value)?r.value.itemModifiers.value:[r.value.itemModifiers.value]:[];return[...w,...B]});return{group:r,isInGroup:f,modelValue:o,disabled:a,toggle:m,unselectable:y,multiple:S,modifiers:k,pressed:i,iconPosition:l,icon:u,label:p}}const H={key:1,class:"vv-button__label"},J={key:1,class:"vv-button__label"},X={name:"VvButton"};return e.defineComponent({...X,props:Z,emits:U,setup(t,{emit:n}){const r=t,f=e.useAttrs(),s=e.useSlots(),l=(f==null?void 0:f.name)||v.nanoid(),{modifiers:u,iconPosition:p,icon:i,label:c,modelValue:o,disabled:a,toggle:m,unselectable:y}=T(r,n),S=e.inject(L),k=e.computed(()=>{switch(!0){case a.value:return g.button;case r.to!==void 0:return S!=null&&S.nuxt?g.nuxtLink:g.routerLink;case r.href!==void 0:return g.a;default:return g.button}}),_=e.computed(()=>m.value?Array.isArray(o.value)?O(l,o.value):V(l,o.value):r.pressed),{bemCssClasses:w}=j("vv-button",{modifiers:u,active:r.active,pressed:_,disabled:a,reverse:e.computed(()=>[b.right,b.bottom].includes(p.value)),column:e.computed(()=>[b.top,b.bottom].includes(p.value)),iconOnly:e.computed(()=>(i==null?void 0:i.value)&&!(c!=null&&c.value)&&!s.default)}),B=e.computed(()=>typeof(i==null?void 0:i.value)=="string"?{name:i==null?void 0:i.value}:i==null?void 0:i.value),A=e.computed(()=>{const d={class:w.value,"aria-pressed":_.value?!0:void 0};switch(k.value){case g.a:return{...d,role:"button",href:r.href,target:r.target,rel:r.rel};case g.routerLink:case g.nuxtLink:return{...d,role:"button",to:r.to,target:r.target};default:return{...d,type:r.type,disabled:a.value}}}),K=()=>{if(m.value){if(Array.isArray(o.value)){if(O(l,o.value)){y.value&&(o.value=o.value.filter(d=>d!==l));return}o.value.push(l);return}if(V(l,o.value)&&y.value){o.value=void 0;return}o.value=l}};return(d,W)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(k)),e.mergeProps(e.unref(A),{onClickPassive:K}),{default:e.withCtx(()=>[e.renderSlot(d.$slots,"default",{},()=>[d.loading?e.renderSlot(d.$slots,"loading",{key:0},()=>[d.loadingIcon?(e.openBlock(),e.createBlock(E,{key:0,class:"vv-button__loading-icon",name:d.loadingIcon},null,8,["name"])):e.createCommentVNode("",!0),d.loadingLabel?(e.openBlock(),e.createElementBlock("span",H,e.toDisplayString(d.loadingLabel),1)):e.createCommentVNode("",!0)]):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.renderSlot(d.$slots,"before"),e.unref(i)?(e.openBlock(),e.createBlock(E,e.mergeProps({key:0,class:"vv-button__icon"},e.unref(B)),null,16)):e.createCommentVNode("",!0),e.unref(c)?(e.openBlock(),e.createElementBlock("span",J,[e.renderSlot(d.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(e.unref(c)),1)])])):e.createCommentVNode("",!0),e.renderSlot(d.$slots,"after")],64))])]),_:3},16))}})});

package/dist/components/VvButton/VvButton.vue.d.ts

@@ -2,10 +2,6 @@ import { ButtonIconPosition } from '@/components/VvButton';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     icon: {
         type: (ObjectConstructor | StringConstructor)[];
-        /**
-         * @description The tag defined by props.
-         * @returns {string} The tag.
-         */
         default: string;
     };
     iconPosition: {
@@ -56,10 +52,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, string[], string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     icon: {
         type: (ObjectConstructor | StringConstructor)[];
-        /**
-         * @description The tag defined by props.
-         * @returns {string} The tag.
-         */
         default: string;
     };
     iconPosition: {

package/dist/components/VvButton/index.d.ts

@@ -117,14 +117,14 @@ export type VvButtonPropsTypes = ExtractPropTypes<typeof VvButtonProps>;
  * Merges local and group props
  */
 export declare function useGroupProps(props: VvButtonPropsTypes, emit: (event: (typeof VvButtonEvents)[number], value: unknown) => void): {
+    group: Ref<IButtonGroupState> | undefined;
+    isInGroup: import("vue").ComputedRef<boolean>;
     modelValue: Ref<string | string[] | undefined>;
     disabled: Ref<boolean>;
     toggle: Ref<boolean>;
-    isInGroup: import("vue").ComputedRef<boolean>;
-    group: Ref<IButtonGroupState> | undefined;
-    modifiers: Ref<string | string[]>;
-    multiple: Ref<boolean>;
     unselectable: Ref<boolean>;
+    multiple: Ref<boolean>;
+    modifiers: import("vue").ComputedRef<string[]>;
     pressed: Ref<boolean>;
     iconPosition: Ref<ButtonIconPosition>;
     icon: Ref<string | Record<string, any>>;