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

package/dist/components/VvCheckbox/VvCheckbox.es.js

@@ -1,84 +1,138 @@
-import { defineComponent as I, openBlock as N, createElementBlock as H, normalizeClass as w, unref as i, withDirectives as E, createElementVNode as G, isRef as D, vModelCheckbox as j, renderSlot as O, createTextVNode as M, toDisplayString as F, createVNode as T } from "vue";
-import { nanoid as U } from "nanoid";
-const q = {
+import { defineComponent as G, openBlock as H, createElementBlock as D, normalizeClass as M, unref as l, withDirectives as F, createElementVNode as T, isRef as q, vModelCheckbox as U, renderSlot as z, createTextVNode as K, toDisplayString as J, createVNode as W } from "vue";
+var j = /* @__PURE__ */ ((e) => (e.left = "left", e.right = "right", e.top = "top", e.bottom = "bottom", e))(j || {}), O = /* @__PURE__ */ ((e) => (e.topStart = "top-start", e.topEnd = "top-end", e.bottomStart = "bottom-start", e.bottomEnd = "bottom-end", e.leftStart = "left-start", e.leftEnd = "left-end", e.rightStart = "right-start", e.rightEnd = "right-end", e))(O || {}), I = /* @__PURE__ */ ((e) => (e.before = "before", e.after = "after", e))(I || {});
+const Y = Symbol.for("checkGroup"), $ = {
   valid: Boolean,
   validLabel: [String, Array]
-}, K = {
+}, Q = {
   invalid: Boolean,
   invalidLabel: [String, Array]
-}, z = {
+}, X = {
+  /**
+   * Whether the form control is disabled
+   */
   disabled: Boolean
-}, $ = {
+}, Z = {
+  /**
+   * The value is not editable
+   */
   readonly: Boolean
-}, J = {
+}, N = {
+  /**
+   * Component BEM modifiers
+   */
+  modifiers: [String, Array]
+}, L = {
   hintLabel: { type: String, default: "" }
-}, Q = {
+};
+I.before;
+const ee = {
+  /**
+   * Global attribute tabindex
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
+   */
   tabindex: { type: [String, Number], default: 0 }
-}, W = {
-  id: [String, Number],
+}, te = {
+  /**
+   * Global attribute id
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
+   */
+  id: [String, Number]
+};
+j.bottom;
+const ae = {
+  ...te,
+  /**
+   * Input / Textarea name
+   * Name of the form control. Submitted with the form as part of a name/value pair
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name
+   */
   name: { type: String, required: !0 }
-}, X = {
-  ...W,
-  ...Q,
-  ...q,
-  ...K,
-  ...J,
-  ...z,
+}, oe = {
+  ...ae,
+  ...ee,
   ...$,
+  ...Q,
+  ...L,
+  ...X,
+  ...Z,
+  ...N,
+  /**
+   * Input value
+   * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value
+   */
   value: [String, Number, Boolean],
+  /**
+   * Input value
+   */
   modelValue: [Object, Number, Boolean, String],
+  /**
+   * <label> for input
+   */
   label: String
-}, Y = "VV_CHECK_GROUP", Z = {
-  ...X,
+}, re = {
+  ...oe,
+  ...N,
+  /**
+   * If true, the input will be indeterminated
+   */
   indeterminate: Boolean,
+  /**
+   * Value associated with the unchecked state
+   */
   uncheckedValue: [String, Number, Boolean],
+  /**
+   * If true, the input will be displayed as a switch
+   */
   switch: Boolean
-}, L = ["click", "update:modelValue", "change", "blur"];
-function ee(u, m) {
-  const { group: t, isInGroup: p, getGroupOrLocalRef: r } = useInjectedGroupState(Y), { switch: d, indeterminate: a } = toRefs(u), y = r("modelValue", u, m), f = r("readonly", u), e = r("disabled", u), s = r("valid", u), n = r("invalid", u);
+}, ne = ["click", "update:modelValue", "change", "blur"];
+function ue(e, f) {
+  const { group: a, isInGroup: p, getGroupOrLocalRef: u } = useInjectedGroupState(Y), { id: d, switch: o, indeterminate: S } = toRefs(e), c = u("modelValue", e, f), s = u("readonly", e), t = u("disabled", e), r = u("valid", e), g = u("invalid", e);
   return {
-    propsSwitch: d,
-    indeterminate: a,
-    group: t,
+    // local props
+    id: d,
+    propsSwitch: o,
+    indeterminate: S,
+    // global props
+    group: a,
     isInGroup: p,
-    modelValue: y,
-    readonly: f,
-    disabled: e,
-    valid: s,
-    invalid: n
+    modelValue: c,
+    readonly: s,
+    disabled: t,
+    valid: r,
+    invalid: g
   };
 }
-function A(u) {
-  return Array.isArray(u) ? u.filter((m) => isString(m)).join(" ") : u;
+function A(e) {
+  return Array.isArray(e) ? e.filter((f) => isString(f)).join(" ") : e;
 }
-function te(u, m) {
+function le(e, f) {
   const {
-    invalid: t,
+    invalid: a,
     valid: p,
-    hint: r,
+    hint: u,
     loading: d
-  } = m, {
-    hintLabel: a,
-    modelValue: y,
-    valid: f,
-    validLabel: e,
-    invalid: s,
-    invalidLabel: n,
-    ...k
-  } = toRefs(u), o = resolveFieldData(k, "loading"), l = resolveFieldData(k, "loadingLabel"), v = computed(() => s.value ? !!(s.value && t || n != null && n.value && Array.isArray(n.value) && n.value.length > 0 || n != null && n.value && !isEmpty(n)) : !1), S = computed(
-    () => !!(a && a.value || r)
+  } = f, {
+    hintLabel: o,
+    modelValue: S,
+    valid: c,
+    validLabel: s,
+    invalid: t,
+    invalidLabel: r,
+    ...g
+  } = toRefs(e), n = resolveFieldData(g, "loading"), v = resolveFieldData(g, "loadingLabel"), m = computed(() => t.value ? !!(t.value && a || r != null && r.value && Array.isArray(r.value) && r.value.length > 0 || r != null && r.value && !isEmpty(r)) : !1), b = computed(
+    () => !!(o && o.value || u)
+  ), V = computed(
+    () => !!(s && s.value || p)
+  ), k = computed(
+    () => !!(n != null && n.value && d || n != null && n.value && (v != null && v.value))
   ), C = computed(
-    () => !!(e && e.value || p)
-  ), x = computed(
-    () => !!(o != null && o.value && d || o != null && o.value && (l != null && l.value))
-  ), g = computed(
-    () => S.value || C.value || v.value || x.value
+    () => b.value || V.value || m.value || k.value
   );
   return {
-    hasInvalid: v,
-    hasHint: S,
-    hasValid: C,
-    hasLoading: x,
+    hasInvalid: m,
+    hasHint: b,
+    hasValid: V,
+    hasLoading: k,
     HintSlot: {
       name: "HintSlot",
       props: {
@@ -87,25 +141,25 @@ function te(u, m) {
           default: () => ({})
         }
       },
-      setup(P) {
+      setup(x) {
         const _ = computed(() => {
-          const b = toReactive({
-            hintLabel: a,
-            modelValue: y,
-            valid: f,
-            validLabel: e,
-            invalid: s,
-            invalidLabel: n,
-            loading: o,
-            loadingLabel: l,
-            ...P.params
+          const y = toReactive({
+            hintLabel: o,
+            modelValue: S,
+            valid: c,
+            validLabel: s,
+            invalid: t,
+            invalidLabel: r,
+            loading: n,
+            loadingLabel: v,
+            ...x.params
           });
-          return s != null && s.value ? (t == null ? void 0 : t(b)) || A(n == null ? void 0 : n.value) || (a == null ? void 0 : a.value) : f != null && f.value ? (p == null ? void 0 : p(b)) || A(e == null ? void 0 : e.value) || (a == null ? void 0 : a.value) : o != null && o.value ? (d == null ? void 0 : d(b)) || A(l == null ? void 0 : l.value) || (a == null ? void 0 : a.value) : (r == null ? void 0 : r(b)) || A(a == null ? void 0 : a.value) || (a == null ? void 0 : a.value);
+          return t != null && t.value ? (a == null ? void 0 : a(y)) || A(r == null ? void 0 : r.value) || (o == null ? void 0 : o.value) : c != null && c.value ? (p == null ? void 0 : p(y)) || A(s == null ? void 0 : s.value) || (o == null ? void 0 : o.value) : n != null && n.value ? (d == null ? void 0 : d(y)) || A(v == null ? void 0 : v.value) || (o == null ? void 0 : o.value) : (u == null ? void 0 : u(y)) || A(o == null ? void 0 : o.value) || (o == null ? void 0 : o.value);
         });
         return {
-          isVisible: g,
-          hasInvalid: v,
-          hasValid: C,
+          isVisible: C,
+          hasInvalid: m,
+          hasValid: V,
           hintContent: _
         };
       },
@@ -114,7 +168,7 @@ function te(u, m) {
           return h(
             "small",
             {
-              role: this.hasInvalid || this.hasValid ? "alert" : void 0
+              role: this.hasInvalid ? "alert" : this.hasValid ? "status" : void 0
             },
             this.hintContent
           );
@@ -122,98 +176,103 @@ function te(u, m) {
     }
   };
 }
-const ae = ["for"], ne = ["id", "name", "disabled", "value", "tabindex", "aria-invalid"], ue = {
+const se = ["for"], ie = ["id", "name", "disabled", "value", "tabindex", "aria-invalid"], de = {
   name: "VvCheckbox"
-}, le = /* @__PURE__ */ I({
-  ...ue,
-  props: Z,
-  emits: L,
-  setup(u, { emit: m }) {
-    const t = u, p = useSlots(), {
-      disabled: r,
-      readonly: d,
-      valid: a,
-      invalid: y,
-      propsSwitch: f,
-      modelValue: e,
-      indeterminate: s,
-      isInGroup: n
-    } = ee(t, m), k = computed(() => String(t.id || U())), o = computed(() => S.value ? -1 : t.tabindex), l = ref(), v = computed(
-      () => t.uncheckedValue !== void 0 && !n.value
-    ), S = computed(() => r.value || d.value), C = computed(() => {
-      if (y.value === !0)
+}, ve = /* @__PURE__ */ G({
+  ...de,
+  props: re,
+  emits: ne,
+  setup(e, { emit: f }) {
+    const a = e, p = useSlots(), {
+      id: u,
+      disabled: d,
+      readonly: o,
+      valid: S,
+      invalid: c,
+      propsSwitch: s,
+      modelValue: t,
+      indeterminate: r,
+      isInGroup: g
+    } = ue(a, f), n = useUniqueId(u), v = computed(() => V.value ? -1 : a.tabindex), m = ref(), b = computed(
+      () => a.uncheckedValue !== void 0 && !g.value
+    ), V = computed(() => d.value || o.value), k = computed(() => {
+      if (c.value === !0)
         return !0;
-      if (a.value === !0)
+      if (S.value === !0)
         return !1;
-    }), x = computed(() => v.value ? e.value === t.value : Array.isArray(e.value) ? contains(t.value, e.value) : equals(t.value, e.value)), g = computed(() => !!(s.value || !x.value && v.value && t.uncheckedValue !== e.value)), P = computed(() => {
-      if (!v.value)
-        return ["string", "number", "boolean"].includes(typeof t.value) ? t.value : !0;
-    }), _ = computed({
+    }), C = computed(() => b.value ? t.value === a.value : Array.isArray(t.value) ? contains(a.value, t.value) : equals(a.value, t.value)), x = computed(() => !!(r.value || !C.value && b.value && a.uncheckedValue !== t.value)), _ = computed(() => {
+      if (!b.value)
+        return ["string", "number", "boolean"].includes(typeof a.value) ? a.value : !0;
+    }), y = computed({
       get() {
-        return x.value;
+        return C.value;
       },
-      set(c) {
-        if (v.value)
-          e.value = c ? t.value : t.uncheckedValue;
-        else if (Array.isArray(e.value) || n.value) {
-          const V = new Set(
-            Array.isArray(e.value) ? e.value : e.value !== void 0 ? [e.value] : []
+      set(i) {
+        if (b.value)
+          t.value = i ? a.value : a.uncheckedValue;
+        else if (Array.isArray(t.value) || g.value) {
+          const B = new Set(
+            Array.isArray(t.value) ? t.value : t.value !== void 0 ? [t.value] : []
           );
-          c ? V.add(t.value) : V.delete(t.value), e.value = [...V];
+          i ? B.add(a.value) : B.delete(a.value), t.value = [...B];
         } else
-          e.value = c ? t.value : void 0;
-        m("change", c);
+          t.value = i ? a.value : void 0;
+        f("change", i);
       }
-    }), { bemCssClasses: b } = useBemModifiers("vv-checkbox", {
-      switch: f,
-      valid: a,
-      invalid: y,
-      disabled: r,
-      readonly: d,
-      indeterminate: s
-    });
+    }), { modifiers: E } = toRefs(a), R = useBemModifiers(
+      "vv-checkbox",
+      E,
+      computed(() => ({
+        switch: s.value,
+        valid: S.value,
+        invalid: c.value,
+        disabled: d.value,
+        readonly: o.value,
+        indeterminate: r.value
+      }))
+    );
     watchEffect(() => {
-      v.value && Array.isArray(e.value) && console.warn(
+      b.value && Array.isArray(t.value) && console.warn(
         "[VvCheckbox] The model value is an array but the component is in binary mode."
       );
     }), watch(
-      () => g.value,
-      (c) => {
-        c ? l.value.indeterminate = !0 : l.value.indeterminate = !1;
+      () => x.value,
+      (i) => {
+        i ? m.value.indeterminate = !0 : m.value.indeterminate = !1;
       }
     ), onMounted(() => {
-      g.value && (l.value.indeterminate = !0);
+      x.value && (m.value.indeterminate = !0);
     });
-    const { HintSlot: B } = te(t, p);
-    return (c, V) => (N(), H("label", {
-      class: w(i(b)),
-      for: i(k)
+    const { HintSlot: P } = le(a, p);
+    return (i, B) => (H(), D("label", {
+      class: M(l(R)),
+      for: l(n)
     }, [
-      E(G("input", {
-        id: i(k),
+      F(T("input", {
+        id: l(n),
         ref_key: "input",
-        ref: l,
-        "onUpdate:modelValue": V[0] || (V[0] = (R) => D(_) ? _.value = R : null),
+        ref: m,
+        "onUpdate:modelValue": B[0] || (B[0] = (w) => q(y) ? y.value = w : null),
         type: "checkbox",
         class: "vv-checkbox__input",
-        name: c.name,
-        disabled: i(S),
-        value: i(P),
-        tabindex: i(o),
-        "aria-invalid": i(C)
-      }, null, 8, ne), [
-        [j, i(_)]
+        name: i.name,
+        disabled: l(V),
+        value: l(_),
+        tabindex: l(v),
+        "aria-invalid": l(k)
+      }, null, 8, ie), [
+        [U, l(y)]
       ]),
-      O(c.$slots, "default", { value: i(e) }, () => [
-        M(F(c.label), 1)
+      z(i.$slots, "default", { value: l(t) }, () => [
+        K(J(i.label), 1)
       ]),
-      T(i(B), {
+      W(l(P), {
         class: "vv-checkbox__hint",
-        params: { value: i(e) }
+        params: { value: l(t) }
       }, null, 8, ["params"])
-    ], 10, ae));
+    ], 10, se));
   }
 });
 export {
-  le as default
+  ve as default
 };

package/dist/components/VvCheckbox/VvCheckbox.umd.js

@@ -1 +1 @@
-(function(e,P){typeof exports=="object"&&typeof module<"u"?module.exports=P(require("vue"),require("nanoid")):typeof define=="function"&&define.amd?define(["vue","nanoid"],P):(e=typeof globalThis<"u"?globalThis:e||self,e.VvCheckbox=P(e.vue,e.nanoid))})(this,function(e,P){"use strict";const I={...{id:[String,Number],name:{type:String,required:!0}},...{tabindex:{type:[String,Number],default:0}},...{valid:Boolean,validLabel:[String,Array]},...{invalid:Boolean,invalidLabel:[String,Array]},...{hintLabel:{type:String,default:""}},...{disabled:Boolean},...{readonly:Boolean},value:[String,Number,Boolean],modelValue:[Object,Number,Boolean,String],label:String},R="VV_CHECK_GROUP",N={...I,indeterminate:Boolean,uncheckedValue:[String,Number,Boolean],switch:Boolean},H=["click","update:modelValue","change","blur"];function w(o,f){const{group:n,isInGroup:p,getGroupOrLocalRef:u}=useInjectedGroupState(R),{switch:c,indeterminate:a}=toRefs(o),y=u("modelValue",o,f),m=u("readonly",o),t=u("disabled",o),i=u("valid",o),r=u("invalid",o);return{propsSwitch:c,indeterminate:a,group:n,isInGroup:p,modelValue:y,readonly:m,disabled:t,valid:i,invalid:r}}function A(o){return Array.isArray(o)?o.filter(f=>isString(f)).join(" "):o}function D(o,f){const{invalid:n,valid:p,hint:u,loading:c}=f,{hintLabel:a,modelValue:y,valid:m,validLabel:t,invalid:i,invalidLabel:r,...k}=toRefs(o),s=resolveFieldData(k,"loading"),l=resolveFieldData(k,"loadingLabel"),v=computed(()=>i.value?!!(i.value&&n||r!=null&&r.value&&Array.isArray(r.value)&&r.value.length>0||r!=null&&r.value&&!isEmpty(r)):!1),x=computed(()=>!!(a&&a.value||u)),S=computed(()=>!!(t&&t.value||p)),C=computed(()=>!!(s!=null&&s.value&&c||s!=null&&s.value&&(l!=null&&l.value))),g=computed(()=>x.value||S.value||v.value||C.value);return{hasInvalid:v,hasHint:x,hasValid:S,hasLoading:C,HintSlot:{name:"HintSlot",props:{params:{type:Object,default:()=>({})}},setup(B){const _=computed(()=>{const b=toReactive({hintLabel:a,modelValue:y,valid:m,validLabel:t,invalid:i,invalidLabel:r,loading:s,loadingLabel:l,...B.params});return i!=null&&i.value?(n==null?void 0:n(b))||A(r==null?void 0:r.value)||(a==null?void 0:a.value):m!=null&&m.value?(p==null?void 0:p(b))||A(t==null?void 0:t.value)||(a==null?void 0:a.value):s!=null&&s.value?(c==null?void 0:c(b))||A(l==null?void 0:l.value)||(a==null?void 0:a.value):(u==null?void 0:u(b))||A(a==null?void 0:a.value)||(a==null?void 0:a.value)});return{isVisible:g,hasInvalid:v,hasValid:S,hintContent:_}},render(){if(this.isVisible)return h("small",{role:this.hasInvalid||this.hasValid?"alert":void 0},this.hintContent)}}}}const E=["for"],G=["id","name","disabled","value","tabindex","aria-invalid"],j={name:"VvCheckbox"};return e.defineComponent({...j,props:N,emits:H,setup(o,{emit:f}){const n=o,p=useSlots(),{disabled:u,readonly:c,valid:a,invalid:y,propsSwitch:m,modelValue:t,indeterminate:i,isInGroup:r}=w(n,f),k=computed(()=>String(n.id||P.nanoid())),s=computed(()=>x.value?-1:n.tabindex),l=ref(),v=computed(()=>n.uncheckedValue!==void 0&&!r.value),x=computed(()=>u.value||c.value),S=computed(()=>{if(y.value===!0)return!0;if(a.value===!0)return!1}),C=computed(()=>v.value?t.value===n.value:Array.isArray(t.value)?contains(n.value,t.value):equals(n.value,t.value)),g=computed(()=>!!(i.value||!C.value&&v.value&&n.uncheckedValue!==t.value)),B=computed(()=>{if(!v.value)return["string","number","boolean"].includes(typeof n.value)?n.value:!0}),_=computed({get(){return C.value},set(d){if(v.value)t.value=d?n.value:n.uncheckedValue;else if(Array.isArray(t.value)||r.value){const V=new Set(Array.isArray(t.value)?t.value:t.value!==void 0?[t.value]:[]);d?V.add(n.value):V.delete(n.value),t.value=[...V]}else t.value=d?n.value:void 0;f("change",d)}}),{bemCssClasses:b}=useBemModifiers("vv-checkbox",{switch:m,valid:a,invalid:y,disabled:u,readonly:c,indeterminate:i});watchEffect(()=>{v.value&&Array.isArray(t.value)&&console.warn("[VvCheckbox] The model value is an array but the component is in binary mode.")}),watch(()=>g.value,d=>{d?l.value.indeterminate=!0:l.value.indeterminate=!1}),onMounted(()=>{g.value&&(l.value.indeterminate=!0)});const{HintSlot:T}=D(n,p);return(d,V)=>(e.openBlock(),e.createElementBlock("label",{class:e.normalizeClass(e.unref(b)),for:e.unref(k)},[e.withDirectives(e.createElementVNode("input",{id:e.unref(k),ref_key:"input",ref:l,"onUpdate:modelValue":V[0]||(V[0]=O=>e.isRef(_)?_.value=O:null),type:"checkbox",class:"vv-checkbox__input",name:d.name,disabled:e.unref(x),value:e.unref(B),tabindex:e.unref(s),"aria-invalid":e.unref(S)},null,8,G),[[e.vModelCheckbox,e.unref(_)]]),e.renderSlot(d.$slots,"default",{value:e.unref(t)},()=>[e.createTextVNode(e.toDisplayString(d.label),1)]),e.createVNode(e.unref(T),{class:"vv-checkbox__hint",params:{value:e.unref(t)}},null,8,["params"])],10,E))}})});
+(function(t,g){typeof exports=="object"&&typeof module<"u"?module.exports=g(require("vue")):typeof define=="function"&&define.amd?define(["vue"],g):(t=typeof globalThis<"u"?globalThis:t||self,t.VvCheckbox=g(t.vue))})(this,function(t){"use strict";var g=(e=>(e.left="left",e.right="right",e.top="top",e.bottom="bottom",e))(g||{}),N=(e=>(e.topStart="top-start",e.topEnd="top-end",e.bottomStart="bottom-start",e.bottomEnd="bottom-end",e.leftStart="left-start",e.leftEnd="left-end",e.rightStart="right-start",e.rightEnd="right-end",e))(N||{}),A=(e=>(e.before="before",e.after="after",e))(A||{});const E=Symbol.for("checkGroup"),P={valid:Boolean,validLabel:[String,Array]},R={invalid:Boolean,invalidLabel:[String,Array]},w={disabled:Boolean},G={readonly:Boolean},O={modifiers:[String,Array]},H={hintLabel:{type:String,default:""}};A.before;const D={tabindex:{type:[String,Number],default:0}},T={id:[String,Number]};g.bottom;const M={...{...{...T,name:{type:String,required:!0}},...D,...P,...R,...H,...w,...G,...O,value:[String,Number,Boolean],modelValue:[Object,Number,Boolean,String],label:String},...O,indeterminate:Boolean,uncheckedValue:[String,Number,Boolean],switch:Boolean},q=["click","update:modelValue","change","blur"];function F(e,v){const{group:o,isInGroup:p,getGroupOrLocalRef:l}=useInjectedGroupState(E),{id:d,switch:r,indeterminate:V}=toRefs(e),c=l("modelValue",e,v),s=l("readonly",e),a=l("disabled",e),n=l("valid",e),S=l("invalid",e);return{id:d,propsSwitch:r,indeterminate:V,group:o,isInGroup:p,modelValue:c,readonly:s,disabled:a,valid:n,invalid:S}}function x(e){return Array.isArray(e)?e.filter(v=>isString(v)).join(" "):e}function U(e,v){const{invalid:o,valid:p,hint:l,loading:d}=v,{hintLabel:r,modelValue:V,valid:c,validLabel:s,invalid:a,invalidLabel:n,...S}=toRefs(e),u=resolveFieldData(S,"loading"),f=resolveFieldData(S,"loadingLabel"),m=computed(()=>a.value?!!(a.value&&o||n!=null&&n.value&&Array.isArray(n.value)&&n.value.length>0||n!=null&&n.value&&!isEmpty(n)):!1),b=computed(()=>!!(r&&r.value||l)),k=computed(()=>!!(s&&s.value||p)),C=computed(()=>!!(u!=null&&u.value&&d||u!=null&&u.value&&(f!=null&&f.value))),_=computed(()=>b.value||k.value||m.value||C.value);return{hasInvalid:m,hasHint:b,hasValid:k,hasLoading:C,HintSlot:{name:"HintSlot",props:{params:{type:Object,default:()=>({})}},setup(j){const I=computed(()=>{const y=toReactive({hintLabel:r,modelValue:V,valid:c,validLabel:s,invalid:a,invalidLabel:n,loading:u,loadingLabel:f,...j.params});return a!=null&&a.value?(o==null?void 0:o(y))||x(n==null?void 0:n.value)||(r==null?void 0:r.value):c!=null&&c.value?(p==null?void 0:p(y))||x(s==null?void 0:s.value)||(r==null?void 0:r.value):u!=null&&u.value?(d==null?void 0:d(y))||x(f==null?void 0:f.value)||(r==null?void 0:r.value):(l==null?void 0:l(y))||x(r==null?void 0:r.value)||(r==null?void 0:r.value)});return{isVisible:_,hasInvalid:m,hasValid:k,hintContent:I}},render(){if(this.isVisible)return h("small",{role:this.hasInvalid?"alert":this.hasValid?"status":void 0},this.hintContent)}}}}const z=["for"],K=["id","name","disabled","value","tabindex","aria-invalid"],J={name:"VvCheckbox"};return t.defineComponent({...J,props:M,emits:q,setup(e,{emit:v}){const o=e,p=useSlots(),{id:l,disabled:d,readonly:r,valid:V,invalid:c,propsSwitch:s,modelValue:a,indeterminate:n,isInGroup:S}=F(o,v),u=useUniqueId(l),f=computed(()=>k.value?-1:o.tabindex),m=ref(),b=computed(()=>o.uncheckedValue!==void 0&&!S.value),k=computed(()=>d.value||r.value),C=computed(()=>{if(c.value===!0)return!0;if(V.value===!0)return!1}),_=computed(()=>b.value?a.value===o.value:Array.isArray(a.value)?contains(o.value,a.value):equals(o.value,a.value)),j=computed(()=>!!(n.value||!_.value&&b.value&&o.uncheckedValue!==a.value)),I=computed(()=>{if(!b.value)return["string","number","boolean"].includes(typeof o.value)?o.value:!0}),y=computed({get(){return _.value},set(i){if(b.value)a.value=i?o.value:o.uncheckedValue;else if(Array.isArray(a.value)||S.value){const B=new Set(Array.isArray(a.value)?a.value:a.value!==void 0?[a.value]:[]);i?B.add(o.value):B.delete(o.value),a.value=[...B]}else a.value=i?o.value:void 0;v("change",i)}}),{modifiers:W}=toRefs(o),Y=useBemModifiers("vv-checkbox",W,computed(()=>({switch:s.value,valid:V.value,invalid:c.value,disabled:d.value,readonly:r.value,indeterminate:n.value})));watchEffect(()=>{b.value&&Array.isArray(a.value)&&console.warn("[VvCheckbox] The model value is an array but the component is in binary mode.")}),watch(()=>j.value,i=>{i?m.value.indeterminate=!0:m.value.indeterminate=!1}),onMounted(()=>{j.value&&(m.value.indeterminate=!0)});const{HintSlot:$}=U(o,p);return(i,B)=>(t.openBlock(),t.createElementBlock("label",{class:t.normalizeClass(t.unref(Y)),for:t.unref(u)},[t.withDirectives(t.createElementVNode("input",{id:t.unref(u),ref_key:"input",ref:m,"onUpdate:modelValue":B[0]||(B[0]=Q=>t.isRef(y)?y.value=Q:null),type:"checkbox",class:"vv-checkbox__input",name:i.name,disabled:t.unref(k),value:t.unref(I),tabindex:t.unref(f),"aria-invalid":t.unref(C)},null,8,K),[[t.vModelCheckbox,t.unref(y)]]),t.renderSlot(i.$slots,"default",{value:t.unref(a)},()=>[t.createTextVNode(t.toDisplayString(i.label),1)]),t.createVNode(t.unref($),{class:"vv-checkbox__hint",params:{value:t.unref(a)}},null,8,["params"])],10,z))}})});

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

@@ -2,6 +2,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     indeterminate: BooleanConstructor;
     uncheckedValue: (StringConstructor | BooleanConstructor | NumberConstructor)[];
     switch: BooleanConstructor;
+    modifiers: import("vue").PropType<string | string[]>;
     value: (StringConstructor | BooleanConstructor | NumberConstructor)[];
     modelValue: (StringConstructor | BooleanConstructor | ObjectConstructor | NumberConstructor)[];
     label: StringConstructor;
@@ -19,15 +20,16 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: (StringConstructor | NumberConstructor)[];
         default: number;
     };
-    id: (StringConstructor | NumberConstructor)[];
     name: {
         type: StringConstructor;
         required: boolean;
     };
+    id: (StringConstructor | NumberConstructor)[];
 }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, string[], string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     indeterminate: BooleanConstructor;
     uncheckedValue: (StringConstructor | BooleanConstructor | NumberConstructor)[];
     switch: BooleanConstructor;
+    modifiers: import("vue").PropType<string | string[]>;
     value: (StringConstructor | BooleanConstructor | NumberConstructor)[];
     modelValue: (StringConstructor | BooleanConstructor | ObjectConstructor | NumberConstructor)[];
     label: StringConstructor;
@@ -45,18 +47,18 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         type: (StringConstructor | NumberConstructor)[];
         default: number;
     };
-    id: (StringConstructor | NumberConstructor)[];
     name: {
         type: StringConstructor;
         required: boolean;
     };
+    id: (StringConstructor | NumberConstructor)[];
 }>> & {
     [x: `on${Capitalize<string>}`]: ((...args: any[]) => any) | undefined;
 }, {
     disabled: boolean;
     switch: boolean;
-    readonly: boolean;
     indeterminate: boolean;
+    readonly: boolean;
     hintLabel: string;
     invalid: boolean;
     valid: boolean;

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

@@ -1,5 +1,5 @@
 import type { ExtractPropTypes, Ref } from 'vue';
-import type { IInputGroupState } from '@/composables/group/types/IInputGroup';
+import type { InputGroupState } from '@/types/group';
 export declare const VvCheckboxProps: {
     /**
      * If true, the input will be indeterminated
@@ -13,18 +13,13 @@ export declare const VvCheckboxProps: {
      * If true, the input will be displayed as a switch
      */
     switch: BooleanConstructor;
+    modifiers: import("vue").PropType<string | string[]>;
     value: (StringConstructor | BooleanConstructor | NumberConstructor)[];
     modelValue: (StringConstructor | BooleanConstructor | ObjectConstructor | NumberConstructor)[];
     label: StringConstructor;
-    /**
-     * If true, the input will be displayed as a switch
-     */
     readonly: BooleanConstructor;
     disabled: BooleanConstructor;
     hintLabel: {
-        /**
-         * Merges local and group props
-         */
         type: StringConstructor;
         default: string;
     };
@@ -36,11 +31,11 @@ export declare const VvCheckboxProps: {
         type: (StringConstructor | NumberConstructor)[];
         default: number;
     };
-    id: (StringConstructor | NumberConstructor)[];
     name: {
         type: StringConstructor;
         required: boolean;
     };
+    id: (StringConstructor | NumberConstructor)[];
 };
 export declare const VvCheckboxEvents: string[];
 export type VvCheckboxPropsTypes = ExtractPropTypes<typeof VvCheckboxProps>;
@@ -48,9 +43,10 @@ export type VvCheckboxPropsTypes = ExtractPropTypes<typeof VvCheckboxProps>;
  * Merges local and group props
  */
 export declare function useGroupProps(props: VvCheckboxPropsTypes, emit: (event: (typeof VvCheckboxEvents)[number], value: unknown) => void): {
+    id: Ref<string | number | undefined> | undefined;
     propsSwitch: Ref<boolean>;
     indeterminate: Ref<boolean>;
-    group: Ref<IInputGroupState> | undefined;
+    group: Ref<InputGroupState> | undefined;
     isInGroup: import("vue").ComputedRef<boolean>;
     modelValue: import("vue").WritableComputedRef<unknown>;
     readonly: Ref<boolean>;