@volverjs/ui-vue 0.0.3-beta.4 → 0.0.4

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

@@ -1 +1 @@
-(function(e,k){typeof exports=="object"&&typeof module<"u"?module.exports=k(require("vue"),require("nanoid"),require("@iconify/vue")):typeof define=="function"&&define.amd?define(["vue","nanoid","@iconify/vue"],k):(e=typeof globalThis<"u"?globalThis:e||self,e.VvButton=k(e.vue,e.nanoid,e.vue$1))})(this,function(e,k,v){"use strict";const P="ds",N={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]}},E={name:"VvIcon"},C=e.defineComponent({...E,props:N,setup(n){const i=n,o=ref(!0),{modifiers:g}=toRefs(i),a=inject(P),{bemCssClasses:u}=useBemModifiers("vv-icon",{modifiers:g}),p=computed(()=>i.provider||(a==null?void 0:a.provider)),h=computed(()=>{const t=i.name??"",r=`@${p.value}:${i.prefix}:${i.name}`;return v.iconExists(t)?t:v.iconExists(r)?r:(a==null?void 0:a.iconsCollections.find(d=>{const m=`@${p.value}:${d.prefix}:${t}`;if(v.iconExists(m))return m}))||t});function l(t){let r=null;if(typeof window>"u"){const{JSDOM:S}=require("jsdom");r=new S().window}return(r?new r.DOMParser:new window.DOMParser).parseFromString(t,"text/html").querySelector("svg")}function c(t){const r=l(t),d=(r==null?void 0:r.innerHTML.trim())||"";r&&d&&v.addIcon(`@${p.value}:${i.prefix}:${i.name}`,{body:d,height:r.viewBox.baseVal.height,width:r.viewBox.baseVal.width})}return a&&(i.src&&!v.iconExists(`@${p.value}:${i.prefix}:${i.name}`)?(o.value=!1,a.fetchIcon(i.src).then(t=>{t&&(c(t),o.value=!0)}).catch(t=>{throw new Error(`During fetch icon: ${t==null?void 0:t.message}`)})):i.svg&&c(i.svg)),(t,r)=>e.unref(o)?(e.openBlock(),e.createBlock(e.unref(v.Icon),e.mergeProps({key:0,class:e.unref(u)},{inline:t.inline,width:t.width,height:t.height,horizontalFlip:t.horizontalFlip,verticalFlip:t.verticalFlip,flip:t.flip,rotate:t.rotate,color:t.color,onLoad:t.onLoad,icon:e.unref(h)}),null,16,["class"])):e.createCommentVNode("",!0)}}),O={disabled:Boolean},A={modifiers:[String,Array]},F={unselectable:{type:Boolean,default:!0}},D="VV_BUTTON_GROUP";var b=(n=>(n.left="left",n.right="right",n.top="top",n.bottom="bottom",n))(b||{}),L=(n=>(n.button="button",n.submit="submit",n.reset="reset",n))(L||{}),f=(n=>(n.nuxtLink="nuxt-link",n.routerLink="router-link",n.a="a",n.button="button",n))(f||{}),$=(n=>(n._blank="_blank",n._self="_self",n._parent="_parent",n._top="_top",n))($||{});const I=["update:modelValue"],M={...A,...O,...F,icon:{type:[String,Object],default:""},iconPosition:{type:String,default:"left",validator:n=>n 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:n=>n in $},active:Boolean,pressed:Boolean,rel:{type:String,default:"noopener noreferrer"},type:{type:String,default:"button",validator:n=>n in L},toggle:{type:Boolean,default:!1},modelValue:String};function q(n,i){var V;const{group:o,isInGroup:g,getGroupOrLocalRef:a}=useInjectedGroupState(D),{iconPosition:u,icon:p,label:h,pressed:l,modifiers:c}=toRefs(n),t=a("modelValue",n,i),r=a("disabled",n),d=a("toggle",n),m=a("unselectable",n),y=((V=o==null?void 0:o.value)==null?void 0:V.multiple)??ref(!1),S=computed(()=>{var _;const w=c!=null&&c.value?Array.isArray(c.value)?c.value:[c.value]:[],B=(_=o==null?void 0:o.value.itemModifiers)!=null&&_.value?Array.isArray(o.value.itemModifiers.value)?o.value.itemModifiers.value:[o.value.itemModifiers.value]:[];return[...w,...B]});return{group:o,isInGroup:g,modelValue:t,disabled:r,toggle:d,unselectable:m,multiple:y,modifiers:S,pressed:l,iconPosition:u,icon:p,label:h}}const R={key:1,class:"vv-button__label"},j={key:1,class:"vv-button__label"},G={name:"VvButton"};return e.defineComponent({...G,props:M,emits:I,setup(n,{emit:i}){const o=n,g=useAttrs(),a=useSlots(),u=(g==null?void 0:g.name)||k.nanoid(),{modifiers:p,iconPosition:h,icon:l,label:c,modelValue:t,disabled:r,toggle:d,unselectable:m}=q(o,i),y=inject(P),S=computed(()=>{switch(!0){case r.value:return f.button;case o.to!==void 0:return y!=null&&y.nuxt?f.nuxtLink:f.routerLink;case o.href!==void 0:return f.a;default:return f.button}}),V=computed(()=>d.value?Array.isArray(t.value)?contains(u,t.value):equals(u,t.value):o.pressed),{bemCssClasses:w}=useBemModifiers("vv-button",{modifiers:p,active:o.active,pressed:V,disabled:r,reverse:computed(()=>[b.right,b.bottom].includes(h.value)),column:computed(()=>[b.top,b.bottom].includes(h.value)),iconOnly:computed(()=>(l==null?void 0:l.value)&&!(c!=null&&c.value)&&!a.default)}),B=computed(()=>typeof(l==null?void 0:l.value)=="string"?{name:l==null?void 0:l.value}:l==null?void 0:l.value),_=computed(()=>{const s={class:w.value,"aria-pressed":V.value?!0:void 0};switch(S.value){case f.a:return{...s,role:"button",href:o.href,target:o.target,rel:o.rel};case f.routerLink:case f.nuxtLink:return{...s,role:"button",to:o.to,target:o.target};default:return{...s,type:o.type,disabled:r.value}}}),U=()=>{if(d.value){if(Array.isArray(t.value)){if(contains(u,t.value)){m.value&&(t.value=t.value.filter(s=>s!==u));return}t.value.push(u);return}if(equals(u,t.value)&&m.value){t.value=void 0;return}t.value=u}};return(s,z)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(S)),e.mergeProps(e.unref(_),{onClickPassive:U}),{default:e.withCtx(()=>[e.renderSlot(s.$slots,"default",{},()=>[s.loading?e.renderSlot(s.$slots,"loading",{key:0},()=>[s.loadingIcon?(e.openBlock(),e.createBlock(C,{key:0,class:"vv-button__loading-icon",name:s.loadingIcon},null,8,["name"])):e.createCommentVNode("",!0),s.loadingLabel?(e.openBlock(),e.createElementBlock("span",R,e.toDisplayString(s.loadingLabel),1)):e.createCommentVNode("",!0)]):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.renderSlot(s.$slots,"before"),e.unref(l)?(e.openBlock(),e.createBlock(C,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(s.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(e.unref(c)),1)])])):e.createCommentVNode("",!0),e.renderSlot(s.$slots,"after")],64))])]),_:3},16))}})});
+(function(e,b){typeof exports=="object"&&typeof module<"u"?module.exports=b(require("vue"),require("@iconify/vue"),require("nanoid")):typeof define=="function"&&define.amd?define(["vue","@iconify/vue","nanoid"],b):(e=typeof globalThis<"u"?globalThis:e||self,e.VvButton=b(e.vue,e.vue$1,e.nanoid))})(this,function(e,b,M){"use strict";const F={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]}};var S=(t=>(t.left="left",t.right="right",t.top="top",t.bottom="bottom",t))(S||{}),C=(t=>(t.topStart="top-start",t.topEnd="top-end",t.bottomStart="bottom-start",t.bottomEnd="bottom-end",t.leftStart="left-start",t.leftEnd="left-end",t.rightStart="right-start",t.rightEnd="right-end",t))(C||{}),j=(t=>(t.before="before",t.after="after",t))(j||{}),I=(t=>(t.button="button",t.submit="submit",t.reset="reset",t))(I||{}),k=(t=>(t.nuxtLink="nuxt-link",t.routerLink="router-link",t.a="a",t.button="button",t))(k||{}),E=(t=>(t._blank="_blank",t._self="_self",t._parent="_parent",t._top="_top",t))(E||{});const T=Symbol.for("volver"),G=Symbol.for("buttonGroup"),q=Symbol.for("dropdownTrigger"),J=Symbol.for("dropdownAction");function N(){return e.inject(T)}function w(t,n,s){return e.computed(()=>{const o={[t]:!0},l=typeof(n==null?void 0:n.value)=="string"?n.value.split(" "):n==null?void 0:n.value;return l&&Array.isArray(l)&&l.forEach(c=>{o[`${t}--${c}`]=!0}),s&&Object.keys(s.value).forEach(c=>{o[`${t}--${c}`]=e.unref(s.value[c])}),o})}const z={name:"VvIcon"},A=e.defineComponent({...z,props:F,setup(t){const n=t,s=e.ref(!0),o=N(),{modifiers:l}=e.toRefs(n),c=w("vv-icon",l),m=e.computed(()=>n.provider||(o==null?void 0:o.provider)),d=e.computed(()=>{const r=n.name??"",i=`@${m.value}:${n.prefix}:${n.name}`;return b.iconExists(r)?r:b.iconExists(i)?i:(o==null?void 0:o.iconsCollections.find(g=>{const h=`@${m.value}:${g.prefix}:${r}`;if(b.iconExists(h))return h}))||r});function p(r){let i=null;if(typeof window>"u"){const{JSDOM:v}=require("jsdom");i=new v().window}return(i?new i.DOMParser:new window.DOMParser).parseFromString(r,"text/html").querySelector("svg")}function a(r){const i=p(r),g=(i==null?void 0:i.innerHTML.trim())||"";i&&g&&b.addIcon(`@${m.value}:${n.prefix}:${n.name}`,{body:g,height:i.viewBox.baseVal.height,width:i.viewBox.baseVal.width})}return o&&(n.src&&!b.iconExists(`@${m.value}:${n.prefix}:${n.name}`)?(s.value=!1,o.fetchIcon(n.src).then(r=>{r&&(a(r),s.value=!0)}).catch(r=>{throw new Error(`During fetch icon: ${r==null?void 0:r.message}`)})):n.svg&&a(n.svg)),(r,i)=>e.unref(s)?(e.openBlock(),e.createBlock(e.unref(b.Icon),e.mergeProps({key:0,class:e.unref(c)},{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(d)}),null,16,["class"])):e.createCommentVNode("",!0)}}),K={to:{type:[String,Object]},href:String,target:{type:String,validator:t=>Object.values(E).includes(t)},rel:{type:String,default:"noopener noreferrer"}},U={loading:Boolean,loadingLabel:{type:String,default:"Loading..."}},Y={disabled:Boolean},W={active:Boolean},H={pressed:Boolean},x={label:[String,Number]},Q={modifiers:[String,Array]};j.before;const X={unselectable:{type:Boolean,default:!0}},Z={id:[String,Number]};S.bottom;const D={...Y,...x,...H,...W,...K,type:{type:String,default:I.button,validator:t=>Object.values(I).includes(t)}},ee=["click","mouseover","mouseleave"],te=D;function ne(){return e.inject(q,{})}function re(){return e.inject(J,{})}const oe={name:"VvAction"},se=e.defineComponent({...oe,props:te,emits:ee,setup(t,{expose:n,emit:s}){const o=t,l=N(),c=e.ref(null);n({$el:c});const{reference:m,bus:d,aria:p,expanded:a}=ne();e.watch(()=>c.value,u=>{m&&(m.value=u)});const r=e.computed(()=>o.pressed||(a==null?void 0:a.value)),{role:i}=re(),g=e.computed(()=>{switch(!0){case o.disabled:return k.button;case o.to!==void 0:return l!=null&&l.nuxt?k.nuxtLink:k.routerLink;case o.href!==void 0:return k.a;default:return k.button}}),h=e.computed(()=>{const u={...p==null?void 0:p.value,"aria-pressed":r.value?!0:void 0,role:i};switch(g.value){case k.a:return{...u,href:o.href,target:o.target,rel:o.rel};case k.routerLink:case k.nuxtLink:return{...u,to:o.to,target:o.target};default:return{...u,type:o.type,disabled:o.disabled}}}),O=u=>{if(o.disabled){u.preventDefault();return}d==null||d.emit("click",u),s("click",u)},v=u=>{d==null||d.emit("mouseover",u),s("mouseover",u)},y=u=>{d==null||d.emit("mouseleave",u),s("mouseleave",u)};return(u,B)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(e.unref(g)),e.mergeProps(e.unref(h),{ref_key:"element",ref:c,class:{active:u.active,pressed:e.unref(r),disabled:u.disabled},onClickPassive:O,onMouseoverPassive:v,onMouseleavePassive:y}),{default:e.withCtx(()=>[e.renderSlot(u.$slots,"default",{},()=>[e.createTextVNode(e.toDisplayString(u.label),1)])]),_:3},16,["class"]))}});function P(t,n,s){return s?L(t,s)===L(n,s):V(t,n)}function V(t,n){if(t===n)return!0;if(t&&n&&typeof t=="object"&&typeof n=="object"){const s=Array.isArray(t),o=Array.isArray(n);let l,c,m;if(s&&o){if(c=t.length,c!=n.length)return!1;for(l=c;l--!==0;)if(!V(t[l],n[l]))return!1;return!0}if(s!=o)return!1;const d=t instanceof Date,p=n instanceof Date;if(d!=p)return!1;if(d&&p)return t.getTime()==n.getTime();const a=t instanceof RegExp,r=n instanceof RegExp;if(a!=r)return!1;if(a&&r)return t.toString()==n.toString();const i=Object.keys(t);if(c=i.length,c!==Object.keys(n).length)return!1;for(l=c;l--!==0;)if(!Object.prototype.hasOwnProperty.call(n,i[l]))return!1;for(l=c;l--!==0;)if(m=i[l],!V(t[m],n[m]))return!1;return!0}return t!==t&&n!==n}function L(t,n){if(t&&Object.keys(t).length&&n){if(n.indexOf(".")===-1)return t[n];{const s=n.split(".");let o=t;for(let l=0,c=s.length;l<c;++l){if(t==null)return null;o=o[s[l]]}return o}}else return null}function R(t,n){if(t!=null&&n&&n.length){for(const s of n)if(P(t,s))return!0}return!1}function le(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 ie(t){const n=e.inject(t,void 0),s=e.computed(()=>!le(n));function o(l,c,m){if(n!=null&&n.value){const p=e.unref(n.value)[l];return e.computed({get(){return p==null?void 0:p.value},set(a){p.value=a}})}const d=e.toRef(c,l);return e.computed({get(){return d.value},set(p){m&&m(`update:${l}`,p)}})}return{group:n,isInGroup:s,getGroupOrLocalRef:o}}const ae=["update:modelValue"],ce={...D,...Z,...Q,...X,...U,icon:[String,Object],iconPosition:{type:String,default:S.left,validator:t=>Object.values(S).includes(t)},loadingIcon:{type:String,default:"eos-icons:bubble-loading"},toggle:{type:Boolean,default:!1},modelValue:String};function ue(t,n){var u;const{group:s,isInGroup:o,getGroupOrLocalRef:l}=ie(G),{id:c,iconPosition:m,icon:d,label:p,pressed:a,modifiers:r}=e.toRefs(t),i=l("modelValue",t,n),g=l("disabled",t),h=l("toggle",t),O=l("unselectable",t),v=((u=s==null?void 0:s.value)==null?void 0:u.multiple)??e.ref(!1),y=e.computed(()=>{var _;const B=r!=null&&r.value?Array.isArray(r.value)?r.value:r.value.split(" "):[],$=(_=s==null?void 0:s.value.itemModifiers)!=null&&_.value?Array.isArray(s.value.itemModifiers.value)?s.value.itemModifiers.value:s.value.itemModifiers.value.split(" "):[];return[...B,...$]});return{group:s,isInGroup:o,modelValue:i,disabled:g,toggle:h,unselectable:O,multiple:v,id:c,modifiers:y,pressed:a,iconPosition:m,icon:d,label:p}}const fe=t=>e.computed(()=>String((t==null?void 0:t.value)||M.nanoid())),de={key:1,class:"vv-button__label"},pe={key:1,class:"vv-button__label"},me={name:"VvButton"};return e.defineComponent({...me,props:ce,emits:ae,setup(t,{expose:n,emit:s}){const o=t,l=e.useAttrs(),c=e.useSlots(),{id:m,modifiers:d,iconPosition:p,icon:a,label:r,modelValue:i,disabled:g,toggle:h,unselectable:O}=ue(o,s),v=fe(m),y=e.computed(()=>(l==null?void 0:l.name)||v.value),u=e.ref(null),B=e.computed(()=>{var f;return(f=u.value)==null?void 0:f.$el});n({$el:B});const $=e.computed(()=>h.value?Array.isArray(i.value)?R(y.value,i.value):P(y.value,i.value):o.pressed),_=w("vv-button",d,e.computed(()=>({reverse:[S.right,S.bottom].includes(p.value),column:[S.top,S.bottom].includes(p.value),"icon-only":Boolean((a==null?void 0:a.value)&&!(r!=null&&r.value)&&!c.default)}))),ge=e.computed(()=>typeof(a==null?void 0:a.value)=="string"?{name:a==null?void 0:a.value}:a==null?void 0:a.value),ye=()=>{if(h.value){if(Array.isArray(i.value)){if(R(y.value,i.value)){O.value&&(i.value=i.value.filter(f=>f!==y.value));return}i.value.push(y.value);return}if(P(y.value,i.value)&&O.value){i.value=void 0;return}i.value=y.value}};return(f,he)=>(e.openBlock(),e.createBlock(se,e.mergeProps({disabled:e.unref(g),pressed:e.unref($),active:f.active,type:f.type,to:f.to,href:f.href,target:f.target,rel:f.rel},{id:e.unref(v),ref_key:"element",ref:u,class:e.unref(_),onClick:ye}),{default:e.withCtx(()=>[e.renderSlot(f.$slots,"default",{},()=>[f.loading?e.renderSlot(f.$slots,"loading",{key:0},()=>[f.loadingIcon?(e.openBlock(),e.createBlock(A,{key:0,class:"vv-button__loading-icon",name:f.loadingIcon},null,8,["name"])):e.createCommentVNode("",!0),f.loadingLabel?(e.openBlock(),e.createElementBlock("span",de,e.toDisplayString(f.loadingLabel),1)):e.createCommentVNode("",!0)]):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.renderSlot(f.$slots,"before"),e.unref(a)?(e.openBlock(),e.createBlock(A,e.mergeProps({key:0,class:"vv-button__icon"},e.unref(ge)),null,16)):e.createCommentVNode("",!0),e.unref(r)?(e.openBlock(),e.createElementBlock("span",pe,[e.renderSlot(f.$slots,"label",{},()=>[e.createTextVNode(e.toDisplayString(e.unref(r)),1)])])):e.createCommentVNode("",!0),e.renderSlot(f.$slots,"after")],64))])]),_:3},16,["id","class"]))}})});

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

@@ -1,119 +1,116 @@
-import { ButtonIconPosition } from '@/components/VvButton';
+import { Side } from '@/constants';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
-    icon: {
-        type: (StringConstructor | ObjectConstructor)[];
-        default: string;
-    };
+    icon: (StringConstructor | ObjectConstructor)[];
     iconPosition: {
-        type: import("vue").PropType<ButtonIconPosition>;
-        default: ButtonIconPosition;
-        validator: (value: string) => boolean;
+        type: import("vue").PropType<Side>;
+        default: Side;
+        validator: (value: Side) => boolean;
     };
-    label: (StringConstructor | NumberConstructor)[];
-    loading: BooleanConstructor;
     loadingIcon: {
         type: StringConstructor;
         default: string;
     };
+    toggle: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    modelValue: StringConstructor;
+    loading: BooleanConstructor;
     loadingLabel: {
         type: StringConstructor;
         default: string;
     };
+    unselectable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    modifiers: import("vue").PropType<string | string[]>;
+    id: (StringConstructor | NumberConstructor)[];
+    type: {
+        type: StringConstructor;
+        default: import("@/constants").ButtonType;
+        validator: (value: import("@/constants").ButtonType) => boolean;
+    };
     to: {
         type: (StringConstructor | ObjectConstructor)[];
     };
     href: StringConstructor;
     target: {
-        type: import("vue").PropType<import("@/components/VvButton").ButtonTarget>;
-        validator: (value: string) => boolean;
+        type: import("vue").PropType<import("@/constants").AnchorTarget>;
+        validator: (value: import("@/constants").AnchorTarget) => boolean;
     };
-    active: BooleanConstructor;
-    pressed: BooleanConstructor;
     rel: {
         type: StringConstructor;
         default: string;
     };
-    type: {
+    active: BooleanConstructor;
+    pressed: BooleanConstructor;
+    label: (StringConstructor | NumberConstructor)[];
+    disabled: BooleanConstructor;
+}, {
+    $el: import("vue").ComputedRef<HTMLElement | undefined>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, string[], string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    icon: (StringConstructor | ObjectConstructor)[];
+    iconPosition: {
+        type: import("vue").PropType<Side>;
+        default: Side;
+        validator: (value: Side) => boolean;
+    };
+    loadingIcon: {
         type: StringConstructor;
-        default: import("@/components/VvButton").ButtonType;
-        validator: (value: string) => boolean;
+        default: string;
     };
     toggle: {
         type: BooleanConstructor;
         default: boolean;
     };
     modelValue: StringConstructor;
+    loading: BooleanConstructor;
+    loadingLabel: {
+        type: StringConstructor;
+        default: string;
+    };
     unselectable: {
         type: BooleanConstructor;
         default: boolean;
     };
-    disabled: BooleanConstructor;
     modifiers: import("vue").PropType<string | string[]>;
-}, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, string[], string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
-    icon: {
-        type: (StringConstructor | ObjectConstructor)[];
-        default: string;
-    };
-    iconPosition: {
-        type: import("vue").PropType<ButtonIconPosition>;
-        default: ButtonIconPosition;
-        validator: (value: string) => boolean;
-    };
-    label: (StringConstructor | NumberConstructor)[];
-    loading: BooleanConstructor;
-    loadingIcon: {
-        type: StringConstructor;
-        default: string;
-    };
-    loadingLabel: {
+    id: (StringConstructor | NumberConstructor)[];
+    type: {
         type: StringConstructor;
-        default: string;
+        default: import("@/constants").ButtonType;
+        validator: (value: import("@/constants").ButtonType) => boolean;
     };
     to: {
         type: (StringConstructor | ObjectConstructor)[];
     };
     href: StringConstructor;
     target: {
-        type: import("vue").PropType<import("@/components/VvButton").ButtonTarget>;
-        validator: (value: string) => boolean;
+        type: import("vue").PropType<import("@/constants").AnchorTarget>;
+        validator: (value: import("@/constants").AnchorTarget) => boolean;
     };
-    active: BooleanConstructor;
-    pressed: BooleanConstructor;
     rel: {
         type: StringConstructor;
         default: string;
     };
-    type: {
-        type: StringConstructor;
-        default: import("@/components/VvButton").ButtonType;
-        validator: (value: string) => boolean;
-    };
-    toggle: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    modelValue: StringConstructor;
-    unselectable: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
+    active: BooleanConstructor;
+    pressed: BooleanConstructor;
+    label: (StringConstructor | NumberConstructor)[];
     disabled: BooleanConstructor;
-    modifiers: import("vue").PropType<string | string[]>;
 }>> & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
     disabled: boolean;
     type: string;
-    icon: string | Record<string, any>;
+    rel: string;
+    active: boolean;
+    pressed: boolean;
+    iconPosition: Side;
+    loadingIcon: string;
     toggle: boolean;
-    unselectable: boolean;
-    iconPosition: ButtonIconPosition;
     loading: boolean;
-    loadingIcon: string;
     loadingLabel: string;
-    active: boolean;
-    pressed: boolean;
-    rel: string;
+    unselectable: boolean;
 }>, {
     default: (_: {}) => any;
     loading: (_: {}) => any;

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

@@ -1,53 +1,20 @@
 import type { Ref, PropType, ExtractPropTypes } from 'vue';
-import type IButtonGroupState from '@/composables/group/types/IButtonGroupState';
-export declare enum ButtonIconPosition {
-    left = "left",
-    right = "right",
-    top = "top",
-    bottom = "bottom"
-}
-export declare enum ButtonType {
-    button = "button",
-    submit = "submit",
-    reset = "reset"
-}
-export declare enum ButtonTag {
-    nuxtLink = "nuxt-link",
-    routerLink = "router-link",
-    a = "a",
-    button = "button"
-}
-export declare enum ButtonTarget {
-    _blank = "_blank",
-    _self = "_self",
-    _parent = "_parent",
-    _top = "_top"
-}
+import type { ButtonGroupState } from '@/types/group';
+import { Side } from '@/constants';
 export declare const VvButtonEvents: string[];
 export declare const VvButtonProps: {
     /**
      * Button icon
      */
-    icon: {
-        type: (StringConstructor | ObjectConstructor)[];
-        default: string;
-    };
+    icon: (StringConstructor | ObjectConstructor)[];
     /**
      * Button icon position
      */
     iconPosition: {
-        type: PropType<ButtonIconPosition>;
-        default: ButtonIconPosition;
-        validator: (value: string) => boolean;
+        type: PropType<Side>;
+        default: Side;
+        validator: (value: Side) => boolean;
     };
-    /**
-     * Button label
-     */
-    label: (StringConstructor | NumberConstructor)[];
-    /**
-     * Loading status
-     */
-    loading: BooleanConstructor;
     /**
      * Loading icon
      */
@@ -55,78 +22,60 @@ export declare const VvButtonProps: {
         type: StringConstructor;
         default: string;
     };
-    /**
-     * Loading label
-     */
+    toggle: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    modelValue: StringConstructor;
+    loading: BooleanConstructor;
     loadingLabel: {
         type: StringConstructor;
         default: string;
     };
-    /**
-     * The router-link/nuxt-link property, if it is defined the button is rendered as a ruouter-link or nuxt-link.
-     * @see Documentation of [router-link](https://router.vuejs.org/api/#router-link) and [nuxt-link](https://nuxtjs.org/api/components-nuxt-link/)
-     */
+    unselectable: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    modifiers: PropType<string | string[]>;
+    id: (StringConstructor | NumberConstructor)[];
+    type: {
+        type: StringConstructor;
+        default: import("@/constants").ButtonType;
+        validator: (value: import("@/constants").ButtonType) => boolean;
+    };
     to: {
         type: (StringConstructor | ObjectConstructor)[];
     };
-    /**
-     * Link href
-     */
     href: StringConstructor;
-    /**
-     * Link target
-     */
     target: {
-        type: PropType<ButtonTarget>;
-        validator: (value: string) => boolean;
+        type: PropType<import("@/constants").AnchorTarget>;
+        validator: (value: import("@/constants").AnchorTarget) => boolean;
     };
-    active: BooleanConstructor;
-    /**
-     * Button pressed mode
-     */
-    pressed: BooleanConstructor;
-    /**
-     * Link rel
-     */
     rel: {
         type: StringConstructor;
         default: string;
     };
-    /**
-     * Button type
-     */
-    type: {
-        type: StringConstructor;
-        default: ButtonType;
-        validator: (value: string) => boolean;
-    };
-    toggle: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    modelValue: StringConstructor;
-    unselectable: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
+    active: BooleanConstructor;
+    pressed: BooleanConstructor;
+    label: (StringConstructor | NumberConstructor)[];
     disabled: BooleanConstructor;
-    modifiers: PropType<string | string[]>;
 };
 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;
+    group: Ref<ButtonGroupState> | undefined;
     isInGroup: import("vue").ComputedRef<boolean>;
     modelValue: Ref<string | string[] | undefined>;
     disabled: Ref<boolean>;
     toggle: Ref<boolean>;
     unselectable: Ref<boolean>;
     multiple: Ref<boolean>;
+    id: Ref<string | number | undefined> | undefined;
     modifiers: import("vue").ComputedRef<string[]>;
     pressed: Ref<boolean>;
-    iconPosition: Ref<ButtonIconPosition>;
-    icon: Ref<string | Record<string, any>>;
+    iconPosition: Ref<Side>;
+    icon: Ref<string | Record<string, any> | undefined> | undefined;
     label: Ref<string | number | undefined> | undefined;
 };

package/dist/components/VvButtonGroup/VvButtonGroup.es.js

@@ -1,62 +1,152 @@
-import { defineComponent as c, openBlock as f, createElementBlock as y, normalizeClass as v, unref as V, renderSlot as g } from "vue";
-const B = "VV_BUTTON_GROUP", _ = {
+import { isRef as O, provide as _, computed as d, unref as f, defineComponent as S, toRefs as j, watchEffect as E, openBlock as V, createElementBlock as A, normalizeClass as h, renderSlot as k } from "vue";
+var u = /* @__PURE__ */ ((t) => (t.left = "left", t.right = "right", t.top = "top", t.bottom = "bottom", t))(u || {}), c = /* @__PURE__ */ ((t) => (t.topStart = "top-start", t.topEnd = "top-end", t.bottomStart = "bottom-start", t.bottomEnd = "bottom-end", t.leftStart = "left-start", t.leftEnd = "left-end", t.rightStart = "right-start", t.rightEnd = "right-end", t))(c || {}), i = /* @__PURE__ */ ((t) => (t.before = "before", t.after = "after", t))(i || {}), p = /* @__PURE__ */ ((t) => (t.button = "button", t.submit = "submit", t.reset = "reset", t))(p || {}), b = /* @__PURE__ */ ((t) => (t._blank = "_blank", t._self = "_self", t._parent = "_parent", t._top = "_top", t))(b || {});
+const G = Symbol.for("buttonGroup"), C = {
+  /**
+   * The router-link/nuxt-link property, if it is defined the button is rendered as a ruouter-link or nuxt-link.
+   * @see Documentation of [router-link](https://router.vuejs.org/api/#router-link) and [nuxt-link](https://nuxtjs.org/api/components-nuxt-link/)
+   */
+  to: {
+    type: [String, Object]
+  },
+  /**
+   * Anchor href
+   */
+  href: String,
+  /**
+   * Anchor target
+   */
+  target: {
+    type: String,
+    validator: (t) => Object.values(b).includes(t)
+  },
+  /**
+   * Anchor rel
+   */
+  rel: {
+    type: String,
+    default: "noopener noreferrer"
+  }
+}, y = {
+  /**
+   * Whether the form control is disabled
+   */
   disabled: Boolean
-}, b = {
+}, N = {
+  /**
+   * Whether the item is active
+   */
+  active: Boolean
+}, P = {
+  /**
+   * Whether the item is pressed
+   */
+  pressed: Boolean
+}, $ = {
+  /**
+   * The item label
+   */
+  label: [String, Number]
+}, M = {
+  /**
+   * Component BEM modifiers
+   */
   modifiers: [String, Array]
-}, A = {
+};
+i.before;
+const R = {
+  /**
+   * If true the input will be unselectable
+   */
   unselectable: { type: Boolean, default: !0 }
-}, G = {
-  ...b,
-  ..._,
-  ...A,
+};
+u.bottom;
+({
+  ...y,
+  ...$,
+  ...P,
+  ...N,
+  ...C,
+  /**
+   * Button type
+   */
+  type: p.button
+});
+const U = {
+  ...M,
+  ...y,
+  ...R,
+  /**
+   * String or String[] of css classes (modifiers) that will be provided to each button'
+   */
   itemModifiers: { type: [String, Array], default: void 0 },
   toggle: { type: Boolean, default: !1 },
   multiple: { type: Boolean, default: !1 },
   modelValue: { type: [String, Array], default: void 0 }
-}, P = ["update:modelValue"], S = {
+}, z = ["update:modelValue"];
+function I(t) {
+  if (Object.keys(t).some(
+    (e) => e !== "key" && !O(t[e])
+  ))
+    throw Error("One or more groupState props aren't ref.");
+  _(
+    t.key,
+    d(() => t)
+  );
+}
+function L(t, e, o) {
+  return d(() => {
+    const l = {
+      [t]: !0
+    }, n = typeof (e == null ? void 0 : e.value) == "string" ? e.value.split(" ") : e == null ? void 0 : e.value;
+    return n && Array.isArray(n) && n.forEach((a) => {
+      l[`${t}--${a}`] = !0;
+    }), o && Object.keys(o.value).forEach((a) => {
+      l[`${t}--${a}`] = f(o.value[a]);
+    }), l;
+  });
+}
+const D = {
   name: "VvButtonGroup"
-}, M = /* @__PURE__ */ c({
-  ...S,
-  props: G,
-  emits: P,
-  setup(r, { emit: l }) {
-    const e = r, {
-      disabled: s,
-      toggle: a,
-      modifiers: u,
-      multiple: o,
-      unselectable: n,
-      itemModifiers: i
-    } = toRefs(e);
-    watchEffect(() => {
-      typeof e.modelValue == "string" && o.value && console.warn(
+}, K = /* @__PURE__ */ S({
+  ...D,
+  props: U,
+  emits: z,
+  setup(t, { emit: e }) {
+    const o = t, {
+      disabled: l,
+      toggle: n,
+      modifiers: a,
+      multiple: s,
+      unselectable: v,
+      itemModifiers: m
+    } = j(o);
+    E(() => {
+      typeof o.modelValue == "string" && s.value && console.warn(
         "[VvButtonGroup]: modelValue is a string but multiple is true."
       );
     });
-    const d = computed({
-      get: () => o.value ? e.modelValue : Array.isArray(e.modelValue) ? e.modelValue[0] : e.modelValue,
-      set: (t) => (t !== void 0 && (Array.isArray(e.modelValue) || o.value) && !Array.isArray(t) && (t = [t]), l("update:modelValue", t))
-    }), p = {
-      key: B,
-      modelValue: d,
-      disabled: s,
-      toggle: a,
-      multiple: o,
-      unselectable: n,
-      itemModifiers: i
-    };
-    useProvideGroupState(p);
-    const { bemCssClasses: m } = useBemModifiers("vv-button-group", {
-      modifiers: u
+    const g = d({
+      get: () => s.value ? o.modelValue : Array.isArray(o.modelValue) ? o.modelValue[0] : o.modelValue,
+      set: (r) => (r !== void 0 && (Array.isArray(o.modelValue) || s.value) && !Array.isArray(r) && (r = [r]), e("update:modelValue", r))
+    });
+    I({
+      key: G,
+      modelValue: g,
+      disabled: l,
+      toggle: n,
+      multiple: s,
+      unselectable: v,
+      itemModifiers: m
     });
-    return (t, U) => (f(), y("div", {
-      class: v(V(m)),
+    const B = L("vv-button-group", a);
+    return (r, F) => (V(), A("div", {
+      class: h(f(B)),
       role: "group"
     }, [
-      g(t.$slots, "default")
+      k(r.$slots, "default")
     ], 2));
   }
 });
 export {
-  M as default
+  K as default
 };

package/dist/components/VvButtonGroup/VvButtonGroup.umd.js

@@ -1 +1 @@
-(function(e,s){typeof exports=="object"&&typeof module<"u"?module.exports=s(require("vue")):typeof define=="function"&&define.amd?define(["vue"],s):(e=typeof globalThis<"u"?globalThis:e||self,e.VvButtonGroup=s(e.vue))})(this,function(e){"use strict";const s="VV_BUTTON_GROUP",l={...{modifiers:[String,Array]},...{disabled:Boolean},...{unselectable:{type:Boolean,default:!0}},itemModifiers:{type:[String,Array],default:void 0},toggle:{type:Boolean,default:!1},multiple:{type:Boolean,default:!1},modelValue:{type:[String,Array],default:void 0}},n=["update:modelValue"],u={name:"VvButtonGroup"};return e.defineComponent({...u,props:l,emits:n,setup(i,{emit:a}){const t=i,{disabled:d,toggle:p,modifiers:f,multiple:r,unselectable:c,itemModifiers:m}=toRefs(t);watchEffect(()=>{typeof t.modelValue=="string"&&r.value&&console.warn("[VvButtonGroup]: modelValue is a string but multiple is true.")});const y=computed({get:()=>r.value?t.modelValue:Array.isArray(t.modelValue)?t.modelValue[0]:t.modelValue,set:o=>(o!==void 0&&(Array.isArray(t.modelValue)||r.value)&&!Array.isArray(o)&&(o=[o]),a("update:modelValue",o))}),V={key:s,modelValue:y,disabled:d,toggle:p,multiple:r,unselectable:c,itemModifiers:m};useProvideGroupState(V);const{bemCssClasses:v}=useBemModifiers("vv-button-group",{modifiers:f});return(o,P)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(e.unref(v)),role:"group"},[e.renderSlot(o.$slots,"default")],2))}})});
+(function(e,n){typeof exports=="object"&&typeof module<"u"?module.exports=n(require("vue")):typeof define=="function"&&define.amd?define(["vue"],n):(e=typeof globalThis<"u"?globalThis:e||self,e.VvButtonGroup=n(e.vue))})(this,function(e){"use strict";var n=(t=>(t.left="left",t.right="right",t.top="top",t.bottom="bottom",t))(n||{}),f=(t=>(t.topStart="top-start",t.topEnd="top-end",t.bottomStart="bottom-start",t.bottomEnd="bottom-end",t.leftStart="left-start",t.leftEnd="left-end",t.rightStart="right-start",t.rightEnd="right-end",t))(f||{}),p=(t=>(t.before="before",t.after="after",t))(p||{}),d=(t=>(t.button="button",t.submit="submit",t.reset="reset",t))(d||{}),c=(t=>(t._blank="_blank",t._self="_self",t._parent="_parent",t._top="_top",t))(c||{});const y=Symbol.for("buttonGroup"),m={to:{type:[String,Object]},href:String,target:{type:String,validator:t=>Object.values(c).includes(t)},rel:{type:String,default:"noopener noreferrer"}},b={disabled:Boolean},g={active:Boolean},v={pressed:Boolean},B={label:[String,Number]},_={modifiers:[String,Array]};p.before;const O={unselectable:{type:Boolean,default:!0}};n.bottom,{...b,...B,...v,...g,...m,type:d.button};const S={..._,...b,...O,itemModifiers:{type:[String,Array],default:void 0},toggle:{type:Boolean,default:!1},multiple:{type:Boolean,default:!1},modelValue:{type:[String,Array],default:void 0}},j=["update:modelValue"];function h(t){if(Object.keys(t).some(o=>o!=="key"&&!e.isRef(t[o])))throw Error("One or more groupState props aren't ref.");e.provide(t.key,e.computed(()=>t))}function E(t,o,r){return e.computed(()=>{const s={[t]:!0},u=typeof(o==null?void 0:o.value)=="string"?o.value.split(" "):o==null?void 0:o.value;return u&&Array.isArray(u)&&u.forEach(l=>{s[`${t}--${l}`]=!0}),r&&Object.keys(r.value).forEach(l=>{s[`${t}--${l}`]=e.unref(r.value[l])}),s})}const V={name:"VvButtonGroup"};return e.defineComponent({...V,props:S,emits:j,setup(t,{emit:o}){const r=t,{disabled:s,toggle:u,modifiers:l,multiple:i,unselectable:A,itemModifiers:k}=e.toRefs(r);e.watchEffect(()=>{typeof r.modelValue=="string"&&i.value&&console.warn("[VvButtonGroup]: modelValue is a string but multiple is true.")});const G=e.computed({get:()=>i.value?r.modelValue:Array.isArray(r.modelValue)?r.modelValue[0]:r.modelValue,set:a=>(a!==void 0&&(Array.isArray(r.modelValue)||i.value)&&!Array.isArray(a)&&(a=[a]),o("update:modelValue",a))});h({key:y,modelValue:G,disabled:s,toggle:u,multiple:i,unselectable:A,itemModifiers:k});const C=E("vv-button-group",l);return(a,P)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(e.unref(C)),role:"group"},[e.renderSlot(a.$slots,"default")],2))}})});

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

@@ -103,8 +103,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     disabled: boolean;
     itemModifiers: string | string[];
     toggle: boolean;
-    multiple: boolean;
     unselectable: boolean;
+    multiple: boolean;
 }>, {
     default: (_: {}) => any;
 }>;