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

package/dist/components/VvRadioGroup/VvRadioGroup.es.js

@@ -0,0 +1,398 @@
+import { isRef as G, provide as W, computed as c, toRefs as B, unref as f, h as X, inject as Y, toRef as L, defineComponent as D, useSlots as I, ref as ee, openBlock as A, createElementBlock as C, normalizeClass as E, withDirectives as te, createElementVNode as x, vModelRadio as ne, renderSlot as H, createTextVNode as re, toDisplayString as N, createVNode as w, createCommentVNode as oe, Fragment as se, renderList as ae, createBlock as le, mergeProps as ue } from "vue";
+import { toReactive as ie, useVModel as ce } from "@vueuse/core";
+import { nanoid as fe } from "nanoid";
+function de(t) {
+  if (Object.keys(t).some(
+    (e) => e !== "key" && !G(t[e])
+  ))
+    throw Error("One or more groupState props aren't ref.");
+  W(
+    t.key,
+    c(() => t)
+  );
+}
+function ve(t) {
+  const { options: e, labelKey: r, valueKey: a } = B(t);
+  return {
+    options: e,
+    getOptionLabel: (n) => typeof n != "object" && n !== null ? n : typeof r.value == "function" ? r.value(n) : n[r.value],
+    getOptionValue: (n) => typeof n != "object" && n !== null ? n : typeof a.value == "function" ? a.value(n) : n[a.value]
+  };
+}
+function F(t, e, r) {
+  return r ? R(t, r) === R(e, r) : j(t, e);
+}
+function j(t, e) {
+  if (t === e)
+    return !0;
+  if (t && e && typeof t == "object" && typeof e == "object") {
+    const r = Array.isArray(t), a = Array.isArray(e);
+    let o, s, n;
+    if (r && a) {
+      if (s = t.length, s != e.length)
+        return !1;
+      for (o = s; o-- !== 0; )
+        if (!j(t[o], e[o]))
+          return !1;
+      return !0;
+    }
+    if (r != a)
+      return !1;
+    const d = t instanceof Date, l = e instanceof Date;
+    if (d != l)
+      return !1;
+    if (d && l)
+      return t.getTime() == e.getTime();
+    const u = t instanceof RegExp, y = e instanceof RegExp;
+    if (u != y)
+      return !1;
+    if (u && y)
+      return t.toString() == e.toString();
+    const i = Object.keys(t);
+    if (s = i.length, s !== Object.keys(e).length)
+      return !1;
+    for (o = s; o-- !== 0; )
+      if (!Object.prototype.hasOwnProperty.call(e, i[o]))
+        return !1;
+    for (o = s; o-- !== 0; )
+      if (n = i[o], !j(t[n], e[n]))
+        return !1;
+    return !0;
+  }
+  return t !== t && e !== e;
+}
+function R(t, e) {
+  if (t && Object.keys(t).length && e) {
+    if (e.indexOf(".") === -1)
+      return t[e];
+    {
+      const r = e.split(".");
+      let a = t;
+      for (let o = 0, s = r.length; o < s; ++o) {
+        if (t == null)
+          return null;
+        a = a[r[o]];
+      }
+      return a;
+    }
+  } else
+    return null;
+}
+function pe(t, e) {
+  if (t != null && e && e.length) {
+    for (const r of e)
+      if (F(t, r))
+        return !0;
+  }
+  return !1;
+}
+function M(t) {
+  return ((e) => e == null || e === "" || Array.isArray(e) && e.length === 0 || !(e instanceof Date) && typeof e == "object" && Object.keys(e).length === 0)(f(t));
+}
+function ye(t) {
+  return typeof t == "string" || t instanceof String;
+}
+function $(t) {
+  var e, r;
+  if (t)
+    return (r = (e = t.match(
+      /[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g
+    )) == null ? void 0 : e.join("-")) == null ? void 0 : r.toLowerCase();
+}
+function q(t, e) {
+  const r = { [`${t}`]: !0 };
+  return {
+    bemCssClasses: c(() => Object.keys(e).reduce((o, s) => {
+      const n = f(e[s]) || !1;
+      if (!n)
+        return o;
+      if (s === "modifiers") {
+        const d = Array.isArray(n) ? n : n.split(" ");
+        return {
+          ...o,
+          ...d.reduce(
+            (l, u) => ({
+              ...l,
+              [`${t}--${$(u)}`]: !0
+            }),
+            {}
+          )
+        };
+      } else
+        return {
+          ...o,
+          [`${t}--${$(s)}`]: n
+        };
+    }, r) || {})
+  };
+}
+const z = "VV_RADIO_GROUP";
+function k(t) {
+  return Array.isArray(t) ? t.filter((e) => ye(e)).join(" ") : t;
+}
+function K(t, e) {
+  const {
+    invalid: r,
+    valid: a,
+    hint: o,
+    loading: s
+  } = e, {
+    hintLabel: n,
+    modelValue: d,
+    valid: l,
+    validLabel: u,
+    invalid: y,
+    invalidLabel: i,
+    ...b
+  } = B(t), p = R(b, "loading"), m = R(b, "loadingLabel"), h = c(() => y.value ? !!(y.value && r || i != null && i.value && Array.isArray(i.value) && i.value.length > 0 || i != null && i.value && !M(i)) : !1), v = c(
+    () => !!(n && n.value || o)
+  ), V = c(
+    () => !!(u && u.value || a)
+  ), _ = c(
+    () => !!(p != null && p.value && s || p != null && p.value && (m != null && m.value))
+  ), g = c(
+    () => v.value || V.value || h.value || _.value
+  );
+  return {
+    hasInvalid: h,
+    hasHint: v,
+    hasValid: V,
+    hasLoading: _,
+    HintSlot: {
+      name: "HintSlot",
+      props: {
+        params: {
+          type: Object,
+          default: () => ({})
+        }
+      },
+      setup(O) {
+        const P = c(() => {
+          const S = ie({
+            hintLabel: n,
+            modelValue: d,
+            valid: l,
+            validLabel: u,
+            invalid: y,
+            invalidLabel: i,
+            loading: p,
+            loadingLabel: m,
+            ...O.params
+          });
+          return y != null && y.value ? (r == null ? void 0 : r(S)) || k(i == null ? void 0 : i.value) || (n == null ? void 0 : n.value) : l != null && l.value ? (a == null ? void 0 : a(S)) || k(u == null ? void 0 : u.value) || (n == null ? void 0 : n.value) : p != null && p.value ? (s == null ? void 0 : s(S)) || k(m == null ? void 0 : m.value) || (n == null ? void 0 : n.value) : (o == null ? void 0 : o(S)) || k(n == null ? void 0 : n.value) || (n == null ? void 0 : n.value);
+        });
+        return {
+          isVisible: g,
+          hasInvalid: h,
+          hasValid: V,
+          hintContent: P
+        };
+      },
+      render() {
+        if (this.isVisible)
+          return X(
+            "small",
+            {
+              role: this.hasInvalid || this.hasValid ? "alert" : void 0
+            },
+            this.hintContent
+          );
+      }
+    }
+  };
+}
+const T = {
+  valid: Boolean,
+  validLabel: [String, Array]
+}, Z = {
+  invalid: Boolean,
+  invalidLabel: [String, Array]
+}, U = {
+  disabled: Boolean
+}, J = {
+  readonly: Boolean
+}, Q = {
+  hintLabel: { type: String, default: "" }
+}, me = {
+  options: {
+    type: Array,
+    default: () => []
+  },
+  labelKey: { type: [String, Function], default: "label" },
+  valueKey: { type: [String, Function], default: "value" }
+}, ge = {
+  tabindex: { type: [String, Number], default: 0 }
+}, he = {
+  id: [String, Number],
+  name: { type: String, required: !0 }
+}, Ve = {
+  ...he,
+  ...ge,
+  ...T,
+  ...Z,
+  ...Q,
+  ...U,
+  ...J,
+  value: [String, Number, Boolean],
+  modelValue: [Object, Number, Boolean, String],
+  label: String
+}, be = {
+  ...T,
+  ...Z,
+  ...me,
+  ...Q,
+  ...U,
+  ...J,
+  modelValue: [String, Array],
+  label: String,
+  name: { type: String, required: !0 },
+  vertical: Boolean
+};
+function _e(t) {
+  const e = Y(t, void 0), r = c(() => !M(e));
+  function a(o, s, n) {
+    if (e != null && e.value) {
+      const l = f(e.value)[o];
+      return c({
+        get() {
+          return l == null ? void 0 : l.value;
+        },
+        set(u) {
+          l.value = u;
+        }
+      });
+    }
+    const d = L(s, o);
+    return c({
+      get() {
+        return d.value;
+      },
+      set(l) {
+        n && n(`update:${o}`, l);
+      }
+    });
+  }
+  return {
+    group: e,
+    isInGroup: r,
+    getGroupOrLocalRef: a
+  };
+}
+const Ae = Ve, Oe = ["click", "update:modelValue", "change", "blur"];
+function Se(t, e) {
+  const { group: r, isInGroup: a, getGroupOrLocalRef: o } = _e(z), s = o("modelValue", t, e), n = o("readonly", t), d = o("disabled", t), l = o("valid", t), u = o("invalid", t);
+  return {
+    group: r,
+    isInGroup: a,
+    modelValue: s,
+    readonly: n,
+    disabled: d,
+    valid: l,
+    invalid: u
+  };
+}
+const ke = ["for"], Ce = ["id", "name", "disabled", "value", "tabindex", "aria-invalid"], Re = {
+  name: "VvRadio"
+}, Pe = /* @__PURE__ */ D({
+  ...Re,
+  props: Ae,
+  emits: Oe,
+  setup(t, { emit: e }) {
+    const r = t, a = I(), { disabled: o, readonly: s, modelValue: n, valid: d, invalid: l } = Se(
+      r,
+      e
+    ), u = c(() => String(r.id || fe())), y = c(() => b.value ? -1 : r.tabindex), i = ee(), b = c(() => o.value || s.value), p = c(() => {
+      if (l.value === !0)
+        return !0;
+      if (d.value === !0)
+        return !1;
+    }), m = c(
+      () => Array.isArray(n.value) ? pe(r.value, n.value) : F(r.value, n.value)
+    ), h = c(
+      () => ["string", "number", "boolean"].includes(typeof r.value) ? r.value : !0
+    ), v = c({
+      get() {
+        return m.value ? h.value : null;
+      },
+      set(g) {
+        Array.isArray(n.value) ? n.value = [r.value] : n.value = r.value, e("change", g);
+      }
+    }), { bemCssClasses: V } = q("vv-radio", {
+      valid: d,
+      invalid: l,
+      disabled: o,
+      readonly: s
+    }), { HintSlot: _ } = K(r, a);
+    return (g, O) => (A(), C("label", {
+      class: E(f(V)),
+      for: f(u)
+    }, [
+      te(x("input", {
+        id: f(u),
+        ref_key: "input",
+        ref: i,
+        "onUpdate:modelValue": O[0] || (O[0] = (P) => G(v) ? v.value = P : null),
+        type: "radio",
+        class: "vv-radio__input",
+        name: g.name,
+        disabled: f(b),
+        value: f(h),
+        tabindex: f(y),
+        "aria-invalid": f(p)
+      }, null, 8, Ce), [
+        [ne, f(v)]
+      ]),
+      H(g.$slots, "default", { value: f(n) }, () => [
+        re(N(g.label), 1)
+      ]),
+      w(f(_), {
+        class: "vv-radio__hint",
+        params: { value: f(n) }
+      }, null, 8, ["params"])
+    ], 10, ke));
+  }
+}), je = be, Be = ["update:modelValue", "change"], $e = ["textContent"], Ge = { class: "vv-radio-group__wrapper" }, De = {
+  name: "VvRadioGroup"
+}, He = /* @__PURE__ */ D({
+  ...De,
+  props: je,
+  emits: Be,
+  setup(t, { emit: e }) {
+    const r = t, a = I(), o = ce(r, "modelValue", e), { disabled: s, readonly: n, vertical: d, valid: l, invalid: u } = B(r);
+    de({
+      key: z,
+      modelValue: o,
+      disabled: s,
+      readonly: n,
+      valid: l,
+      invalid: u
+    });
+    const { getOptionLabel: i, getOptionValue: b } = ve(r), { bemCssClasses: p } = q("vv-radio-group", {
+      disabled: s,
+      readonly: n,
+      horizontal: c(() => !d.value),
+      valid: l,
+      invalid: u
+    }), m = (v, V) => ({
+      id: `${r.name}_opt${V}`,
+      name: r.name,
+      label: i(v),
+      value: b(v)
+    }), { HintSlot: h } = K(r, a);
+    return (v, V) => (A(), C("fieldset", {
+      class: E(f(p))
+    }, [
+      v.label ? (A(), C("legend", {
+        key: 0,
+        textContent: N(v.label)
+      }, null, 8, $e)) : oe("", !0),
+      x("div", Ge, [
+        v.options.length > 0 ? (A(!0), C(se, { key: 0 }, ae(v.options, (_, g) => (A(), le(Pe, ue({ key: g }, m(_, g)), null, 16))), 128)) : H(v.$slots, "default", { key: 1 })
+      ]),
+      w(f(h), { class: "vv-radio-group__hint" })
+    ], 2));
+  }
+});
+export {
+  He as default
+};

package/dist/components/VvRadioGroup/VvRadioGroup.umd.js

@@ -0,0 +1 @@
+(function(e,_){typeof exports=="object"&&typeof module<"u"?module.exports=_(require("vue"),require("@vueuse/core"),require("nanoid")):typeof define=="function"&&define.amd?define(["vue","@vueuse/core","nanoid"],_):(e=typeof globalThis<"u"?globalThis:e||self,e.VvRadioGroup=_(e.vue,e.core,e.nanoid))})(this,function(e,_,H){"use strict";function T(n){if(Object.keys(n).some(t=>t!=="key"&&!e.isRef(n[t])))throw Error("One or more groupState props aren't ref.");e.provide(n.key,e.computed(()=>n))}function w(n){const{options:t,labelKey:o,valueKey:l}=e.toRefs(n);return{options:t,getOptionLabel:r=>typeof r!="object"&&r!==null?r:typeof o.value=="function"?o.value(r):r[o.value],getOptionValue:r=>typeof r!="object"&&r!==null?r:typeof l.value=="function"?l.value(r):r[l.value]}}function P(n,t,o){return o?k(n,o)===k(t,o):R(n,t)}function R(n,t){if(n===t)return!0;if(n&&t&&typeof n=="object"&&typeof t=="object"){const o=Array.isArray(n),l=Array.isArray(t);let s,a,r;if(o&&l){if(a=n.length,a!=t.length)return!1;for(s=a;s--!==0;)if(!R(n[s],t[s]))return!1;return!0}if(o!=l)return!1;const d=n instanceof Date,i=t instanceof Date;if(d!=i)return!1;if(d&&i)return n.getTime()==t.getTime();const u=n instanceof RegExp,m=t instanceof RegExp;if(u!=m)return!1;if(u&&m)return n.toString()==t.toString();const c=Object.keys(n);if(a=c.length,a!==Object.keys(t).length)return!1;for(s=a;s--!==0;)if(!Object.prototype.hasOwnProperty.call(t,c[s]))return!1;for(s=a;s--!==0;)if(r=c[s],!R(n[r],t[r]))return!1;return!0}return n!==n&&t!==t}function k(n,t){if(n&&Object.keys(n).length&&t){if(t.indexOf(".")===-1)return n[t];{const o=t.split(".");let l=n;for(let s=0,a=o.length;s<a;++s){if(n==null)return null;l=l[o[s]]}return l}}else return null}function z(n,t){if(n!=null&&t&&t.length){for(const o of t)if(P(n,o))return!0}return!1}function B(n){return(t=>t==null||t===""||Array.isArray(t)&&t.length===0||!(t instanceof Date)&&typeof t=="object"&&Object.keys(t).length===0)(e.unref(n))}function F(n){return typeof n=="string"||n instanceof String}function j(n){var t,o;if(n)return(o=(t=n.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:o.toLowerCase()}function G(n,t){const o={[`${n}`]:!0};return{bemCssClasses:e.computed(()=>Object.keys(t).reduce((s,a)=>{const r=e.unref(t[a])||!1;if(!r)return s;if(a==="modifiers"){const d=Array.isArray(r)?r:r.split(" ");return{...s,...d.reduce((i,u)=>({...i,[`${n}--${j(u)}`]:!0}),{})}}else return{...s,[`${n}--${j(a)}`]:r}},o)||{})}}const $="VV_RADIO_GROUP";function A(n){return Array.isArray(n)?n.filter(t=>F(t)).join(" "):n}function E(n,t){const{invalid:o,valid:l,hint:s,loading:a}=t,{hintLabel:r,modelValue:d,valid:i,validLabel:u,invalid:m,invalidLabel:c,...v}=e.toRefs(n),p=k(v,"loading"),y=k(v,"loadingLabel"),h=e.computed(()=>m.value?!!(m.value&&o||c!=null&&c.value&&Array.isArray(c.value)&&c.value.length>0||c!=null&&c.value&&!B(c)):!1),f=e.computed(()=>!!(r&&r.value||s)),V=e.computed(()=>!!(u&&u.value||l)),b=e.computed(()=>!!(p!=null&&p.value&&a||p!=null&&p.value&&(y!=null&&y.value))),g=e.computed(()=>f.value||V.value||h.value||b.value);return{hasInvalid:h,hasHint:f,hasValid:V,hasLoading:b,HintSlot:{name:"HintSlot",props:{params:{type:Object,default:()=>({})}},setup(S){const C=e.computed(()=>{const O=_.toReactive({hintLabel:r,modelValue:d,valid:i,validLabel:u,invalid:m,invalidLabel:c,loading:p,loadingLabel:y,...S.params});return m!=null&&m.value?(o==null?void 0:o(O))||A(c==null?void 0:c.value)||(r==null?void 0:r.value):i!=null&&i.value?(l==null?void 0:l(O))||A(u==null?void 0:u.value)||(r==null?void 0:r.value):p!=null&&p.value?(a==null?void 0:a(O))||A(y==null?void 0:y.value)||(r==null?void 0:r.value):(s==null?void 0:s(O))||A(r==null?void 0:r.value)||(r==null?void 0:r.value)});return{isVisible:g,hasInvalid:h,hasValid:V,hintContent:C}},render(){if(this.isVisible)return e.h("small",{role:this.hasInvalid||this.hasValid?"alert":void 0},this.hintContent)}}}}const D={valid:Boolean,validLabel:[String,Array]},I={invalid:Boolean,invalidLabel:[String,Array]},x={disabled:Boolean},N={readonly:Boolean},q={hintLabel:{type:String,default:""}},M={options:{type:Array,default:()=>[]},labelKey:{type:[String,Function],default:"label"},valueKey:{type:[String,Function],default:"value"}},K={...{id:[String,Number],name:{type:String,required:!0}},...{tabindex:{type:[String,Number],default:0}},...D,...I,...q,...x,...N,value:[String,Number,Boolean],modelValue:[Object,Number,Boolean,String],label:String},Z={...D,...I,...M,...q,...x,...N,modelValue:[String,Array],label:String,name:{type:String,required:!0},vertical:Boolean};function U(n){const t=e.inject(n,void 0),o=e.computed(()=>!B(t));function l(s,a,r){if(t!=null&&t.value){const i=e.unref(t.value)[s];return e.computed({get(){return i==null?void 0:i.value},set(u){i.value=u}})}const d=e.toRef(a,s);return e.computed({get(){return d.value},set(i){r&&r(`update:${s}`,i)}})}return{group:t,isInGroup:o,getGroupOrLocalRef:l}}const J=K,Q=["click","update:modelValue","change","blur"];function W(n,t){const{group:o,isInGroup:l,getGroupOrLocalRef:s}=U($),a=s("modelValue",n,t),r=s("readonly",n),d=s("disabled",n),i=s("valid",n),u=s("invalid",n);return{group:o,isInGroup:l,modelValue:a,readonly:r,disabled:d,valid:i,invalid:u}}const X=["for"],Y=["id","name","disabled","value","tabindex","aria-invalid"],L={name:"VvRadio"},ee=e.defineComponent({...L,props:J,emits:Q,setup(n,{emit:t}){const o=n,l=e.useSlots(),{disabled:s,readonly:a,modelValue:r,valid:d,invalid:i}=W(o,t),u=e.computed(()=>String(o.id||H.nanoid())),m=e.computed(()=>v.value?-1:o.tabindex),c=e.ref(),v=e.computed(()=>s.value||a.value),p=e.computed(()=>{if(i.value===!0)return!0;if(d.value===!0)return!1}),y=e.computed(()=>Array.isArray(r.value)?z(o.value,r.value):P(o.value,r.value)),h=e.computed(()=>["string","number","boolean"].includes(typeof o.value)?o.value:!0),f=e.computed({get(){return y.value?h.value:null},set(g){Array.isArray(r.value)?r.value=[o.value]:r.value=o.value,t("change",g)}}),{bemCssClasses:V}=G("vv-radio",{valid:d,invalid:i,disabled:s,readonly:a}),{HintSlot:b}=E(o,l);return(g,S)=>(e.openBlock(),e.createElementBlock("label",{class:e.normalizeClass(e.unref(V)),for:e.unref(u)},[e.withDirectives(e.createElementVNode("input",{id:e.unref(u),ref_key:"input",ref:c,"onUpdate:modelValue":S[0]||(S[0]=C=>e.isRef(f)?f.value=C:null),type:"radio",class:"vv-radio__input",name:g.name,disabled:e.unref(v),value:e.unref(h),tabindex:e.unref(m),"aria-invalid":e.unref(p)},null,8,Y),[[e.vModelRadio,e.unref(f)]]),e.renderSlot(g.$slots,"default",{value:e.unref(r)},()=>[e.createTextVNode(e.toDisplayString(g.label),1)]),e.createVNode(e.unref(b),{class:"vv-radio__hint",params:{value:e.unref(r)}},null,8,["params"])],10,X))}}),te=Z,ne=["update:modelValue","change"],re=["textContent"],oe={class:"vv-radio-group__wrapper"},se={name:"VvRadioGroup"};return e.defineComponent({...se,props:te,emits:ne,setup(n,{emit:t}){const o=n,l=e.useSlots(),s=_.useVModel(o,"modelValue",t),{disabled:a,readonly:r,vertical:d,valid:i,invalid:u}=e.toRefs(o);T({key:$,modelValue:s,disabled:a,readonly:r,valid:i,invalid:u});const{getOptionLabel:c,getOptionValue:v}=w(o),{bemCssClasses:p}=G("vv-radio-group",{disabled:a,readonly:r,horizontal:e.computed(()=>!d.value),valid:i,invalid:u}),y=(f,V)=>({id:`${o.name}_opt${V}`,name:o.name,label:c(f),value:v(f)}),{HintSlot:h}=E(o,l);return(f,V)=>(e.openBlock(),e.createElementBlock("fieldset",{class:e.normalizeClass(e.unref(p))},[f.label?(e.openBlock(),e.createElementBlock("legend",{key:0,textContent:e.toDisplayString(f.label)},null,8,re)):e.createCommentVNode("",!0),e.createElementVNode("div",oe,[f.options.length>0?(e.openBlock(!0),e.createElementBlock(e.Fragment,{key:0},e.renderList(f.options,(b,g)=>(e.openBlock(),e.createBlock(ee,e.mergeProps({key:g},y(b,g)),null,16))),128)):e.renderSlot(f.$slots,"default",{key:1})]),e.createVNode(e.unref(h),{class:"vv-radio-group__hint"})],2))}})});