@volverjs/ui-vue 0.0.1-beta.6 → 0.0.1-beta.8

package/README.md

@@ -25,8 +25,67 @@
 $ npm i @volverjs/ui-vue
 ```
 
+## Style
+
+#### @volverjs/ui-vue is closely linked to [@volverjs/style](https://volverjs.github.io/style/) and is neeeded to style components
+
+<br />
+
 ## Basic usage
 
-```html
-<vv-text weight="thin">Size thin</vv-text>
+```typescript
+import { iconsSimple, iconsNormal, iconsDetailed } from '@volverjs/ui-vue/icons'
+import { DesygnSystem } from '@volverjs/ui-vue'
+
+const volver = new DesignSystem({
+	iconsCollections: [iconsSimple, iconsNormal, iconsDetailed]
+})
+
+app.use(volver)
+```
+
+Constructor parameters:
+
+```typescript
+interface IDesignSystemParams {
+	/**
+	 * If true set "fetchOptions" with credentials: 'include'
+	 */
+	fetchWithCredentials?: boolean
+	/**
+	 * Optional fetch params
+	 */
+	fetchOptions?: RequestInit
+	/**
+	 * Array of https://docs.iconify.design/types/iconify-json.html
+	 * This collections will be added during plugin install
+	 */
+	iconsCollections?: IconifyJSON[]
+}
+```
+
+Design System definition
+
+```typescript
+interface IDesignSystem extends IDesignSystemParams {
+	/**
+	 * @param {String} src Icon source path (url)
+	 * @param {RequestInit} options
+	 * @returns {Promise<string | undefined>} String SVG if exist
+	 */
+	fetchIcon(src: string, options?: RequestInit): Promise<string | undefined>
+	/**
+	 * Add iconify collection to library https://docs.iconify.design/icon-components/vue/add-collection.html
+	 * @param {IconifyJSON} collection
+	 * @param {String} providerName Optional provider name
+	 */
+	addCollection(collection: IconifyJSON, providerName?: string): boolean
+	/**
+	 * Add icon to collection https://docs.iconify.design/icon-components/vue/add-icon.html
+	 * @param {String} name
+	 * @param {IconifyIcon} data
+	 * @returns {Boolean} true on success, false if something is wrong with data
+	 */
+	addIcon(name: string, data: IconifyIcon): boolean
+}
 ```

package/dist/components/VvButton/vv-button.es.js

@@ -1,8 +1,8 @@
-import { computed as f, unref as y, defineComponent as D, ref as T, toRefs as q, inject as F, openBlock as b, createBlock as O, mergeProps as P, createCommentVNode as C, toRef as Z, useAttrs as z, useSlots as H, resolveDynamicComponent as J, withCtx as K, renderSlot as A, createElementBlock as w, toDisplayString as L, Fragment as W, createTextVNode as X } from "vue";
-import { v4 as Y } from "uuid";
-import { iconExists as j, Icon as ee, addIcon as te } from "@iconify/vue";
+import { computed as f, unref as y, defineComponent as D, ref as T, toRefs as q, inject as F, openBlock as b, createBlock as O, mergeProps as P, createCommentVNode as C, toRef as Z, useAttrs as z, resolveDynamicComponent as H, withCtx as J, renderSlot as A, createElementBlock as w, toDisplayString as L, Fragment as K, createTextVNode as W } from "vue";
+import { v4 as X } from "uuid";
+import { iconExists as j, 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 || {}), R = /* @__PURE__ */ ((e) => (e._blank = "_blank", e._self = "_self", e._parent = "_parent", e._top = "_top", e))(R || {});
-const ne = {
+const te = {
   icon: String,
   iconPosition: {
     type: String,
@@ -58,19 +58,19 @@ const ne = {
         return !1;
       if (u && c)
         return e.getTime() == t.getTime();
-      const v = e instanceof RegExp, i = t instanceof RegExp;
-      if (v != i)
+      const v = e instanceof RegExp, s = t instanceof RegExp;
+      if (v != s)
         return !1;
-      if (v && i)
+      if (v && s)
         return e.toString() == t.toString();
-      const s = Object.keys(e);
-      if (l = s.length, l !== Object.keys(t).length)
+      const i = Object.keys(e);
+      if (l = i.length, l !== Object.keys(t).length)
         return !1;
       for (r = l; r-- !== 0; )
-        if (!Object.prototype.hasOwnProperty.call(t, s[r]))
+        if (!Object.prototype.hasOwnProperty.call(t, i[r]))
           return !1;
       for (r = l; r-- !== 0; )
-        if (a = s[r], !this.deepEquals(e[a], t[a]))
+        if (a = i[r], !this.deepEquals(e[a], t[a]))
           return !1;
       return !0;
     }
@@ -152,7 +152,7 @@ const ne = {
         /[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();
   }
-}, re = {
+}, ne = {
   color: String,
   width: {
     type: [String, Number]
@@ -215,49 +215,49 @@ function x(e, t) {
 }
 const I = /* @__PURE__ */ D({
   __name: "VvIcon",
-  props: re,
+  props: ne,
   setup(e) {
     const t = e, n = T(!0), { modifiers: o } = q(t), r = F("ds"), { bemCssClasses: l } = x("vv-icon", {
       modifiers: o
     }), a = f(() => t.provider || (r == null ? void 0 : r.provider)), u = f(() => {
-      const i = t.name || "", s = `@${a.value}:${t.prefix}:${t.name}`;
-      return j(i) ? i : j(s) ? s : (r == null ? void 0 : r.iconsCollections.find((d) => {
-        const g = `@${a.value}:${d.prefix}:${i}`;
+      const s = t.name || "", i = `@${a.value}:${t.prefix}:${t.name}`;
+      return j(s) ? s : j(i) ? i : (r == null ? void 0 : r.iconsCollections.find((d) => {
+        const g = `@${a.value}:${d.prefix}:${s}`;
         if (j(g))
           return g;
-      })) || i;
+      })) || s;
     });
-    function c(i) {
-      let s = null;
+    function c(s) {
+      let i = null;
       if (typeof window > "u") {
         const { JSDOM: S } = require("jsdom");
-        s = new S().window;
+        i = new S().window;
       }
-      return (s ? new s.DOMParser() : new window.DOMParser()).parseFromString(i, "text/html").querySelector("svg");
+      return (i ? new i.DOMParser() : new window.DOMParser()).parseFromString(s, "text/html").querySelector("svg");
     }
-    function v(i) {
-      const s = c(i), d = (s == null ? void 0 : s.innerHTML.trim()) || "";
-      s && d && te(`@${a.value}:${t.prefix}:${t.name}`, {
+    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: s.viewBox.baseVal.height,
-        width: s.viewBox.baseVal.width
+        height: i.viewBox.baseVal.height,
+        width: i.viewBox.baseVal.width
       });
     }
-    return r && (t.src ? (n.value = !1, r.fetchIcon(t.src).then((i) => {
-      i && (v(i), n.value = !0);
-    }).catch((i) => {
-      throw new Error(`During fetch icon: ${i == null ? void 0 : i.message}`);
-    })) : t.svg && v(t.svg)), (i, s) => n.value ? (b(), O(y(ee), P({
+    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), P({
       key: 0,
       class: y(l)
     }, {
-      ...i.$props,
+      ...s.$props,
       provider: y(a),
       icon: y(u)
     }), null, 16, ["class"])) : C("", !0);
   }
 });
-function oe(e) {
+function re(e) {
   const t = F(e, void 0);
   console.log("Inject - ", t);
   const n = f(() => h.isNotEmpty(t));
@@ -290,11 +290,11 @@ function oe(e) {
     getGroupOrLocalRef: o
   };
 }
-const se = Symbol("VV_BUTTON_GROUP");
+const oe = Symbol("VV_BUTTON_GROUP");
 function ie(e) {
-  const { group: t, isInGroup: n, getGroupOrLocalRef: o } = oe(se), { modifiers: r, fullBleed: l, iconPosition: a, icon: u, label: c, block: v, selected: i } = q(e), s = o("modelValue", e), d = o("disabled", e), g = o("toggle", e), p = o("rounded", e), S = o("action", e), $ = o("actionQuiet", e);
+  const { group: t, isInGroup: n, getGroupOrLocalRef: o } = re(oe), { modifiers: r, fullBleed: l, iconPosition: a, icon: u, label: c, block: v, selected: s } = q(e), i = o("modelValue", e), d = o("disabled", e), g = o("toggle", e), p = o("rounded", e), S = o("action", e), $ = o("actionQuiet", e);
   return {
-    modelValue: s,
+    modelValue: i,
     disabled: d,
     toggle: g,
     isInGroup: n,
@@ -302,7 +302,7 @@ function ie(e) {
     modifiers: r,
     action: S,
     actionQuiet: $,
-    selected: i,
+    selected: s,
     block: v,
     rounded: p,
     fullBleed: l,
@@ -311,27 +311,25 @@ function ie(e) {
     label: c
   };
 }
-const le = {
+const se = {
   key: 1,
   class: "vv-button__label"
-}, ae = {
+}, le = {
   key: 1,
   class: "vv-button__label"
-}, de = /* @__PURE__ */ D({
+}, fe = /* @__PURE__ */ D({
   __name: "VvButton",
-  props: ne,
+  props: te,
   setup(e) {
-    const t = e, n = z();
-    H();
-    const o = (n == null ? void 0 : n.name) || Y(), {
+    const t = e, n = z(), o = (n == null ? void 0 : n.name) || X(), {
       modifiers: r,
       action: l,
       actionQuiet: a,
       block: u,
       rounded: c,
       fullBleed: v,
-      iconPosition: i,
-      icon: s,
+      iconPosition: s,
+      icon: i,
       label: d,
       modelValue: g,
       disabled: p,
@@ -360,15 +358,15 @@ const le = {
       disabled: p,
       reverse: f(
         () => [_.right, _.bottom].includes(
-          i.value
+          s.value
         )
       ),
       column: f(
         () => [_.top, _.bottom].includes(
-          i.value
+          s.value
         )
       ),
-      iconOnly: f(() => (s == null ? void 0 : s.value) && !(d != null && d.value))
+      iconOnly: f(() => (i == null ? void 0 : i.value) && !(d != null && d.value))
     }), M = f(() => ({
       ...U.value,
       "aria-label": t.label || n["aria-label"],
@@ -389,8 +387,8 @@ const le = {
     function Q() {
       $.value && (g.value = o);
     }
-    return (m, B) => (b(), O(J(y(E)), P(y(M), { onClickPassive: Q }), {
-      default: K(() => [
+    return (m, B) => (b(), O(H(y(E)), P(y(M), { onClickPassive: Q }), {
+      default: J(() => [
         A(m.$slots, "default", {}, () => [
           m.loading ? A(m.$slots, "loading", { key: 0 }, () => [
             m.loadingIcon ? (b(), O(I, {
@@ -398,17 +396,17 @@ const le = {
               class: "vv-button__loading-icon",
               name: m.loadingIcon
             }, null, 8, ["name"])) : C("", !0),
-            m.loadingLabel ? (b(), w("span", le, L(m.loadingLabel), 1)) : C("", !0)
-          ]) : (b(), w(W, { key: 1 }, [
+            m.loadingLabel ? (b(), w("span", se, L(m.loadingLabel), 1)) : C("", !0)
+          ]) : (b(), w(K, { key: 1 }, [
             A(m.$slots, "before"),
-            y(s) ? (b(), O(I, {
+            y(i) ? (b(), O(I, {
               key: 0,
               class: "vv-button__icon",
-              name: y(s)
+              name: y(i)
             }, null, 8, ["name"])) : C("", !0),
-            y(d) ? (b(), w("span", ae, [
+            y(d) ? (b(), w("span", le, [
               A(m.$slots, "label", {}, () => [
-                X(L(y(d)), 1)
+                W(L(y(d)), 1)
               ])
             ])) : C("", !0),
             A(m.$slots, "after")
@@ -420,5 +418,5 @@ const le = {
   }
 });
 export {
-  de as default
+  fe as default
 };

package/dist/components/VvButton/vv-button.umd.js

@@ -1 +1 @@
-(function(n,B){typeof exports=="object"&&typeof module<"u"?module.exports=B(require("vue"),require("uuid"),require("@iconify/vue")):typeof define=="function"&&define.amd?define(["vue","uuid","@iconify/vue"],B):(n=typeof globalThis<"u"?globalThis:n||self,n.VvButton=B(n.vue,n.uuid,n.vue$1))})(this,function(n,B,_){"use strict";var b=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(b||{}),k=(e=>(e.nuxtLink="nuxt-link",e.routerLink="router-link",e.a="a",e.button="button",e))(k||{}),O=(e=>(e._blank="_blank",e._self="_self",e._parent="_parent",e._top="_top",e))(O||{});const j={icon:String,iconPosition:{type:String,default:"left",validator:e=>e in b},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 O},block:Boolean,active:Boolean,rounded:Boolean,disabled:Boolean,fullBleed:Boolean,action:Boolean,actionQuiet:Boolean,selected:Boolean,modifiers:[Array,String]},y={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),i=Array.isArray(t);let o,c,a;if(r&&i){if(c=e.length,c!=t.length)return!1;for(o=c;o--!==0;)if(!this.deepEquals(e[o],t[o]))return!1;return!0}if(r!=i)return!1;const u=e instanceof Date,f=t instanceof Date;if(u!=f)return!1;if(u&&f)return e.getTime()==t.getTime();const p=e instanceof RegExp,l=t instanceof RegExp;if(p!=l)return!1;if(p&&l)return e.toString()==t.toString();const s=Object.keys(e);if(c=s.length,c!==Object.keys(t).length)return!1;for(o=c;o--!==0;)if(!Object.prototype.hasOwnProperty.call(t,s[o]))return!1;for(o=c;o--!==0;)if(a=s[o],!this.deepEquals(e[a],t[a]))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 i=e;for(let o=0,c=r.length;o<c;++o){if(e==null)return null;i=i[r[o]]}return i}}else return null},isFunction(e){return!!(e&&e.constructor&&e.call&&e.apply)},findIndexInList(e,t){let r=-1;if(t){for(let i=0;i<t.length;i++)if(this.equals(t[i],e)){r=i;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!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((i,o)=>o!==r):t},isString(e){return typeof e=="string"||e instanceof String},propsToObject(e){return Object.keys(e).reduce((t,r)=>{var i,o,c,a,u;return this.isFunction(e[r])?t[r]=e[r]():Array.isArray(e[r])?t[r]=e[r][0]():(i=e[r])!=null&&i.type&&(Array.isArray(e[r].type)?t[r]=((o=e[r])==null?void 0:o.default)||((c=e[r])==null?void 0:c.type[0]()):t[r]=((a=e[r])==null?void 0:a.default)||((u=e[r])==null?void 0:u.type())),t},{})},filterArray(e,t,r){return e.filter(i=>t.some(o=>typeof o=="string"?i[r]==o:this.equals(i[r],o[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()}},q={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]}};function w(e,t){const r={[`${e}`]:!0};return{bemCssClasses:n.computed(()=>Object.keys(t).reduce((o,c)=>{const a=n.unref(t[c])||!1;if(!a)return o;if(c==="modifiers"){const u=Array.isArray(a)?a:[a];return{...o,...u.reduce((f,p)=>({...f,[`${e}--${y.kebabCase(p)}`]:!0}),{})}}else return{...o,[`${e}--${y.kebabCase(c)}`]:a}},r)||{})}}const E=n.defineComponent({__name:"VvIcon",props:q,setup(e){const t=e,r=n.ref(!0),{modifiers:i}=n.toRefs(t),o=n.inject("ds"),{bemCssClasses:c}=w("vv-icon",{modifiers:i}),a=n.computed(()=>t.provider||(o==null?void 0:o.provider)),u=n.computed(()=>{const l=t.name||"",s=`@${a.value}:${t.prefix}:${t.name}`;return _.iconExists(l)?l:_.iconExists(s)?s:(o==null?void 0:o.iconsCollections.find(d=>{const m=`@${a.value}:${d.prefix}:${l}`;if(_.iconExists(m))return m}))||l});function f(l){let s=null;if(typeof window>"u"){const{JSDOM:S}=require("jsdom");s=new S().window}return(s?new s.DOMParser:new window.DOMParser).parseFromString(l,"text/html").querySelector("svg")}function p(l){const s=f(l),d=(s==null?void 0:s.innerHTML.trim())||"";s&&d&&_.addIcon(`@${a.value}:${t.prefix}:${t.name}`,{body:d,height:s.viewBox.baseVal.height,width:s.viewBox.baseVal.width})}return o&&(t.src?(r.value=!1,o.fetchIcon(t.src).then(l=>{l&&(p(l),r.value=!0)}).catch(l=>{throw new Error(`During fetch icon: ${l==null?void 0:l.message}`)})):t.svg&&p(t.svg)),(l,s)=>r.value?(n.openBlock(),n.createBlock(n.unref(_.Icon),n.mergeProps({key:0,class:n.unref(c)},{...l.$props,provider:n.unref(a),icon:n.unref(u)}),null,16,["class"])):n.createCommentVNode("",!0)}});function L(e){const t=n.inject(e,void 0);console.log("Inject - ",t);const r=n.computed(()=>y.isNotEmpty(t));function i(o,c,a){if(t!=null&&t.value){const u=n.unref(t.value)[o];return n.computed({get(){return u==null?void 0:u.value},set(f){u.value=f}})}else{const u=n.toRef(c,o);return n.computed({get(){return u.value},set(f){a&&a(`update:${o}`,f)}})}}return{group:t,isInGroup:r,getGroupOrLocalRef:i}}const D=Symbol("VV_BUTTON_GROUP");function I(e){const{group:t,isInGroup:r,getGroupOrLocalRef:i}=L(D),{modifiers:o,fullBleed:c,iconPosition:a,icon:u,label:f,block:p,selected:l}=n.toRefs(e),s=i("modelValue",e),d=i("disabled",e),m=i("toggle",e),h=i("rounded",e),S=i("action",e),C=i("actionQuiet",e);return{modelValue:s,disabled:d,toggle:m,isInGroup:r,group:t,modifiers:o,action:S,actionQuiet:C,selected:l,block:p,rounded:h,fullBleed:c,iconPosition:a,icon:u,label:f}}const V={key:1,class:"vv-button__label"},x={key:1,class:"vv-button__label"};return n.defineComponent({__name:"VvButton",props:j,setup(e){const t=e,r=n.useAttrs();n.useSlots();const i=(r==null?void 0:r.name)||B.v4(),{modifiers:o,action:c,actionQuiet:a,block:u,rounded:f,fullBleed:p,iconPosition:l,icon:s,label:d,modelValue:m,disabled:h,toggle:S,isInGroup:C}=I(t),$=n.computed(()=>{switch(!0){case h.value:return k.button;case t.to!==void 0:return k.routerLink;case t.href!==void 0:return k.a;default:return k.button}}),N=n.computed(()=>S.value?Array.isArray(m.value)?y.contains(i,m.value):y.equals(i,m.value):t.active),P=n.computed(()=>S.value?Array.isArray(m.value)?y.contains(i,m.value):y.equals(i,m.value):t.selected),{bemCssClasses:R}=w("vv-button",{modifiers:o,active:N,action:c,actionQuiet:a,selected:P,block:u,rounded:f,fullBleed:p,disabled:h,reverse:n.computed(()=>[b.right,b.bottom].includes(l.value)),column:n.computed(()=>[b.top,b.bottom].includes(l.value)),iconOnly:n.computed(()=>(s==null?void 0:s.value)&&!(d!=null&&d.value))}),F=n.computed(()=>({...G.value,"aria-label":t.label||r["aria-label"],"aria-disabled":h.value,role:"button",class:R.value,to:t.to})),G=n.computed(()=>{const g=$.value===k.a;let A={};return g&&(A=h.value?{href:"javascript:;"}:{target:t.target,href:t.href}),A});function M(){C.value&&(m.value=i)}return(g,A)=>(n.openBlock(),n.createBlock(n.resolveDynamicComponent(n.unref($)),n.mergeProps(n.unref(F),{onClickPassive:M}),{default:n.withCtx(()=>[n.renderSlot(g.$slots,"default",{},()=>[g.loading?n.renderSlot(g.$slots,"loading",{key:0},()=>[g.loadingIcon?(n.openBlock(),n.createBlock(E,{key:0,class:"vv-button__loading-icon",name:g.loadingIcon},null,8,["name"])):n.createCommentVNode("",!0),g.loadingLabel?(n.openBlock(),n.createElementBlock("span",V,n.toDisplayString(g.loadingLabel),1)):n.createCommentVNode("",!0)]):(n.openBlock(),n.createElementBlock(n.Fragment,{key:1},[n.renderSlot(g.$slots,"before"),n.unref(s)?(n.openBlock(),n.createBlock(E,{key:0,class:"vv-button__icon",name:n.unref(s)},null,8,["name"])):n.createCommentVNode("",!0),n.unref(d)?(n.openBlock(),n.createElementBlock("span",x,[n.renderSlot(g.$slots,"label",{},()=>[n.createTextVNode(n.toDisplayString(n.unref(d)),1)])])):n.createCommentVNode("",!0),n.renderSlot(g.$slots,"after")],64))])]),_:3},16))}})});
+(function(n,B){typeof exports=="object"&&typeof module<"u"?module.exports=B(require("vue"),require("uuid"),require("@iconify/vue")):typeof define=="function"&&define.amd?define(["vue","uuid","@iconify/vue"],B):(n=typeof globalThis<"u"?globalThis:n||self,n.VvButton=B(n.vue,n.uuid,n.vue$1))})(this,function(n,B,_){"use strict";var b=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(b||{}),k=(e=>(e.nuxtLink="nuxt-link",e.routerLink="router-link",e.a="a",e.button="button",e))(k||{}),O=(e=>(e._blank="_blank",e._self="_self",e._parent="_parent",e._top="_top",e))(O||{});const j={icon:String,iconPosition:{type:String,default:"left",validator:e=>e in b},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 O},block:Boolean,active:Boolean,rounded:Boolean,disabled:Boolean,fullBleed:Boolean,action:Boolean,actionQuiet:Boolean,selected:Boolean,modifiers:[Array,String]},y={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),i=Array.isArray(t);let o,c,a;if(r&&i){if(c=e.length,c!=t.length)return!1;for(o=c;o--!==0;)if(!this.deepEquals(e[o],t[o]))return!1;return!0}if(r!=i)return!1;const u=e instanceof Date,f=t instanceof Date;if(u!=f)return!1;if(u&&f)return e.getTime()==t.getTime();const p=e instanceof RegExp,l=t instanceof RegExp;if(p!=l)return!1;if(p&&l)return e.toString()==t.toString();const s=Object.keys(e);if(c=s.length,c!==Object.keys(t).length)return!1;for(o=c;o--!==0;)if(!Object.prototype.hasOwnProperty.call(t,s[o]))return!1;for(o=c;o--!==0;)if(a=s[o],!this.deepEquals(e[a],t[a]))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 i=e;for(let o=0,c=r.length;o<c;++o){if(e==null)return null;i=i[r[o]]}return i}}else return null},isFunction(e){return!!(e&&e.constructor&&e.call&&e.apply)},findIndexInList(e,t){let r=-1;if(t){for(let i=0;i<t.length;i++)if(this.equals(t[i],e)){r=i;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!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((i,o)=>o!==r):t},isString(e){return typeof e=="string"||e instanceof String},propsToObject(e){return Object.keys(e).reduce((t,r)=>{var i,o,c,a,u;return this.isFunction(e[r])?t[r]=e[r]():Array.isArray(e[r])?t[r]=e[r][0]():(i=e[r])!=null&&i.type&&(Array.isArray(e[r].type)?t[r]=((o=e[r])==null?void 0:o.default)||((c=e[r])==null?void 0:c.type[0]()):t[r]=((a=e[r])==null?void 0:a.default)||((u=e[r])==null?void 0:u.type())),t},{})},filterArray(e,t,r){return e.filter(i=>t.some(o=>typeof o=="string"?i[r]==o:this.equals(i[r],o[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()}},q={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]}};function w(e,t){const r={[`${e}`]:!0};return{bemCssClasses:n.computed(()=>Object.keys(t).reduce((o,c)=>{const a=n.unref(t[c])||!1;if(!a)return o;if(c==="modifiers"){const u=Array.isArray(a)?a:[a];return{...o,...u.reduce((f,p)=>({...f,[`${e}--${y.kebabCase(p)}`]:!0}),{})}}else return{...o,[`${e}--${y.kebabCase(c)}`]:a}},r)||{})}}const E=n.defineComponent({__name:"VvIcon",props:q,setup(e){const t=e,r=n.ref(!0),{modifiers:i}=n.toRefs(t),o=n.inject("ds"),{bemCssClasses:c}=w("vv-icon",{modifiers:i}),a=n.computed(()=>t.provider||(o==null?void 0:o.provider)),u=n.computed(()=>{const l=t.name||"",s=`@${a.value}:${t.prefix}:${t.name}`;return _.iconExists(l)?l:_.iconExists(s)?s:(o==null?void 0:o.iconsCollections.find(d=>{const m=`@${a.value}:${d.prefix}:${l}`;if(_.iconExists(m))return m}))||l});function f(l){let s=null;if(typeof window>"u"){const{JSDOM:S}=require("jsdom");s=new S().window}return(s?new s.DOMParser:new window.DOMParser).parseFromString(l,"text/html").querySelector("svg")}function p(l){const s=f(l),d=(s==null?void 0:s.innerHTML.trim())||"";s&&d&&_.addIcon(`@${a.value}:${t.prefix}:${t.name}`,{body:d,height:s.viewBox.baseVal.height,width:s.viewBox.baseVal.width})}return o&&(t.src?(r.value=!1,o.fetchIcon(t.src).then(l=>{l&&(p(l),r.value=!0)}).catch(l=>{throw new Error(`During fetch icon: ${l==null?void 0:l.message}`)})):t.svg&&p(t.svg)),(l,s)=>r.value?(n.openBlock(),n.createBlock(n.unref(_.Icon),n.mergeProps({key:0,class:n.unref(c)},{...l.$props,provider:n.unref(a),icon:n.unref(u)}),null,16,["class"])):n.createCommentVNode("",!0)}});function L(e){const t=n.inject(e,void 0);console.log("Inject - ",t);const r=n.computed(()=>y.isNotEmpty(t));function i(o,c,a){if(t!=null&&t.value){const u=n.unref(t.value)[o];return n.computed({get(){return u==null?void 0:u.value},set(f){u.value=f}})}else{const u=n.toRef(c,o);return n.computed({get(){return u.value},set(f){a&&a(`update:${o}`,f)}})}}return{group:t,isInGroup:r,getGroupOrLocalRef:i}}const D=Symbol("VV_BUTTON_GROUP");function I(e){const{group:t,isInGroup:r,getGroupOrLocalRef:i}=L(D),{modifiers:o,fullBleed:c,iconPosition:a,icon:u,label:f,block:p,selected:l}=n.toRefs(e),s=i("modelValue",e),d=i("disabled",e),m=i("toggle",e),h=i("rounded",e),S=i("action",e),C=i("actionQuiet",e);return{modelValue:s,disabled:d,toggle:m,isInGroup:r,group:t,modifiers:o,action:S,actionQuiet:C,selected:l,block:p,rounded:h,fullBleed:c,iconPosition:a,icon:u,label:f}}const V={key:1,class:"vv-button__label"},x={key:1,class:"vv-button__label"};return n.defineComponent({__name:"VvButton",props:j,setup(e){const t=e,r=n.useAttrs(),i=(r==null?void 0:r.name)||B.v4(),{modifiers:o,action:c,actionQuiet:a,block:u,rounded:f,fullBleed:p,iconPosition:l,icon:s,label:d,modelValue:m,disabled:h,toggle:S,isInGroup:C}=I(t),$=n.computed(()=>{switch(!0){case h.value:return k.button;case t.to!==void 0:return k.routerLink;case t.href!==void 0:return k.a;default:return k.button}}),N=n.computed(()=>S.value?Array.isArray(m.value)?y.contains(i,m.value):y.equals(i,m.value):t.active),P=n.computed(()=>S.value?Array.isArray(m.value)?y.contains(i,m.value):y.equals(i,m.value):t.selected),{bemCssClasses:R}=w("vv-button",{modifiers:o,active:N,action:c,actionQuiet:a,selected:P,block:u,rounded:f,fullBleed:p,disabled:h,reverse:n.computed(()=>[b.right,b.bottom].includes(l.value)),column:n.computed(()=>[b.top,b.bottom].includes(l.value)),iconOnly:n.computed(()=>(s==null?void 0:s.value)&&!(d!=null&&d.value))}),F=n.computed(()=>({...G.value,"aria-label":t.label||r["aria-label"],"aria-disabled":h.value,role:"button",class:R.value,to:t.to})),G=n.computed(()=>{const g=$.value===k.a;let A={};return g&&(A=h.value?{href:"javascript:;"}:{target:t.target,href:t.href}),A});function M(){C.value&&(m.value=i)}return(g,A)=>(n.openBlock(),n.createBlock(n.resolveDynamicComponent(n.unref($)),n.mergeProps(n.unref(F),{onClickPassive:M}),{default:n.withCtx(()=>[n.renderSlot(g.$slots,"default",{},()=>[g.loading?n.renderSlot(g.$slots,"loading",{key:0},()=>[g.loadingIcon?(n.openBlock(),n.createBlock(E,{key:0,class:"vv-button__loading-icon",name:g.loadingIcon},null,8,["name"])):n.createCommentVNode("",!0),g.loadingLabel?(n.openBlock(),n.createElementBlock("span",V,n.toDisplayString(g.loadingLabel),1)):n.createCommentVNode("",!0)]):(n.openBlock(),n.createElementBlock(n.Fragment,{key:1},[n.renderSlot(g.$slots,"before"),n.unref(s)?(n.openBlock(),n.createBlock(E,{key:0,class:"vv-button__icon",name:n.unref(s)},null,8,["name"])):n.createCommentVNode("",!0),n.unref(d)?(n.openBlock(),n.createElementBlock("span",x,[n.renderSlot(g.$slots,"label",{},()=>[n.createTextVNode(n.toDisplayString(n.unref(d)),1)])])):n.createCommentVNode("",!0),n.renderSlot(g.$slots,"after")],64))])]),_:3},16))}})});