@volverjs/ui-vue 0.0.3 → 0.0.4

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

@@ -1,36 +1,111 @@
-import { defineComponent as k, openBlock as O, createElementBlock as C, normalizeClass as I, unref as d, withDirectives as U, createElementVNode as N, isRef as J, vModelRadio as W, renderSlot as E, createTextVNode as Y, toDisplayString as G, createVNode as F, createCommentVNode as Q, Fragment as X, renderList as Z, createBlock as L, mergeProps as ee } from "vue";
-var j = /* @__PURE__ */ ((e) => (e.left = "left", e.right = "right", e.top = "top", e.bottom = "bottom", e))(j || {}), $ = /* @__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))($ || {}), A = /* @__PURE__ */ ((e) => (e.before = "before", e.after = "after", e))(A || {});
-const D = Symbol.for("radioGroup");
-function R(e) {
-  return Array.isArray(e) ? e.filter((p) => isString(p)).join(" ") : e;
+import { unref as v, toRefs as k, computed as c, h as ne, inject as oe, toRef as ae, defineComponent as D, useSlots as x, ref as le, openBlock as j, createElementBlock as B, normalizeClass as F, withDirectives as se, createElementVNode as H, isRef as K, vModelRadio as ue, renderSlot as q, createTextVNode as ie, toDisplayString as w, createVNode as M, provide as ce, createCommentVNode as de, Fragment as fe, renderList as ve, createBlock as pe, mergeProps as ye } from "vue";
+import { toReactive as ge, useVModel as be } from "@vueuse/core";
+import { nanoid as me } from "nanoid";
+var E = /* @__PURE__ */ ((e) => (e.left = "left", e.right = "right", e.top = "top", e.bottom = "bottom", e))(E || {}), z = /* @__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))(z || {}), C = /* @__PURE__ */ ((e) => (e.before = "before", e.after = "after", e))(C || {}), I = /* @__PURE__ */ ((e) => (e.button = "button", e.submit = "submit", e.reset = "reset", e))(I || {}), U = /* @__PURE__ */ ((e) => (e._blank = "_blank", e._self = "_self", e._parent = "_parent", e._top = "_top", e))(U || {});
+const J = Symbol.for("radioGroup");
+function W(e, t, r) {
+  return r ? R(e, r) === R(t, r) : G(e, t);
 }
-function H(e, p) {
+function G(e, t) {
+  if (e === t)
+    return !0;
+  if (e && t && typeof e == "object" && typeof t == "object") {
+    const r = Array.isArray(e), s = Array.isArray(t);
+    let o, a, l;
+    if (r && s) {
+      if (a = e.length, a != t.length)
+        return !1;
+      for (o = a; o-- !== 0; )
+        if (!G(e[o], t[o]))
+          return !1;
+      return !0;
+    }
+    if (r != s)
+      return !1;
+    const i = e instanceof Date, n = t instanceof Date;
+    if (i != n)
+      return !1;
+    if (i && n)
+      return e.getTime() == t.getTime();
+    const d = e instanceof RegExp, f = t instanceof RegExp;
+    if (d != f)
+      return !1;
+    if (d && f)
+      return e.toString() == t.toString();
+    const u = Object.keys(e);
+    if (a = u.length, a !== Object.keys(t).length)
+      return !1;
+    for (o = a; o-- !== 0; )
+      if (!Object.prototype.hasOwnProperty.call(t, u[o]))
+        return !1;
+    for (o = a; o-- !== 0; )
+      if (l = u[o], !G(e[l], t[l]))
+        return !1;
+    return !0;
+  }
+  return e !== e && t !== t;
+}
+function R(e, t) {
+  if (e && Object.keys(e).length && t) {
+    if (t.indexOf(".") === -1)
+      return e[t];
+    {
+      const r = t.split(".");
+      let s = e;
+      for (let o = 0, a = r.length; o < a; ++o) {
+        if (e == null)
+          return null;
+        s = s[r[o]];
+      }
+      return s;
+    }
+  } else
+    return null;
+}
+function he(e, t) {
+  if (e != null && t && t.length) {
+    for (const r of t)
+      if (W(e, r))
+        return !0;
+  }
+  return !1;
+}
+function Y(e) {
+  return ((t) => t == null || t === "" || Array.isArray(t) && t.length === 0 || !(t instanceof Date) && typeof t == "object" && Object.keys(t).length === 0)(v(e));
+}
+function Oe(e) {
+  return typeof e == "string" || e instanceof String;
+}
+function A(e) {
+  return Array.isArray(e) ? e.filter((t) => Oe(t)).join(" ") : e;
+}
+function Q(e, t) {
   const {
-    invalid: o,
-    valid: f,
-    hint: m,
-    loading: r
-  } = p, {
-    hintLabel: t,
-    modelValue: l,
-    valid: c,
-    validLabel: s,
-    invalid: i,
-    invalidLabel: a,
-    ...V
-  } = toRefs(e), n = resolveFieldData(V, "loading"), v = resolveFieldData(V, "loadingLabel"), b = computed(() => i.value ? !!(i.value && o || a != null && a.value && Array.isArray(a.value) && a.value.length > 0 || a != null && a.value && !isEmpty(a)) : !1), u = computed(
-    () => !!(t && t.value || m)
-  ), y = computed(
-    () => !!(s && s.value || f)
-  ), _ = computed(
-    () => !!(n != null && n.value && r || n != null && n.value && (v != null && v.value))
-  ), B = computed(
-    () => u.value || y.value || b.value || _.value
+    invalid: r,
+    valid: s,
+    hint: o,
+    loading: a
+  } = t, {
+    hintLabel: l,
+    modelValue: i,
+    valid: n,
+    validLabel: d,
+    invalid: f,
+    invalidLabel: u,
+    ...S
+  } = k(e), p = R(S, "loading"), g = R(S, "loadingLabel"), m = c(() => f.value ? !!(f.value && r || u != null && u.value && Array.isArray(u.value) && u.value.length > 0 || u != null && u.value && !Y(u)) : !1), y = c(
+    () => !!(l && l.value || o)
+  ), b = c(
+    () => !!(d && d.value || s)
+  ), _ = c(
+    () => !!(p != null && p.value && a || p != null && p.value && (g != null && g.value))
+  ), V = c(
+    () => y.value || b.value || m.value || _.value
   );
   return {
-    hasInvalid: b,
-    hasHint: u,
-    hasValid: y,
+    hasInvalid: m,
+    hasHint: y,
+    hasValid: b,
     hasLoading: _,
     HintSlot: {
       name: "HintSlot",
@@ -41,30 +116,30 @@ function H(e, p) {
         }
       },
       setup(P) {
-        const g = computed(() => {
-          const S = toReactive({
-            hintLabel: t,
-            modelValue: l,
-            valid: c,
-            validLabel: s,
-            invalid: i,
-            invalidLabel: a,
-            loading: n,
-            loadingLabel: v,
+        const h = c(() => {
+          const O = ge({
+            hintLabel: l,
+            modelValue: i,
+            valid: n,
+            validLabel: d,
+            invalid: f,
+            invalidLabel: u,
+            loading: p,
+            loadingLabel: g,
             ...P.params
           });
-          return i != null && i.value ? (o == null ? void 0 : o(S)) || R(a == null ? void 0 : a.value) || (t == null ? void 0 : t.value) : c != null && c.value ? (f == null ? void 0 : f(S)) || R(s == null ? void 0 : s.value) || (t == null ? void 0 : t.value) : n != null && n.value ? (r == null ? void 0 : r(S)) || R(v == null ? void 0 : v.value) || (t == null ? void 0 : t.value) : (m == null ? void 0 : m(S)) || R(t == null ? void 0 : t.value) || (t == null ? void 0 : t.value);
+          return f != null && f.value ? (r == null ? void 0 : r(O)) || A(u == null ? void 0 : u.value) || (l == null ? void 0 : l.value) : n != null && n.value ? (s == null ? void 0 : s(O)) || A(d == null ? void 0 : d.value) || (l == null ? void 0 : l.value) : p != null && p.value ? (a == null ? void 0 : a(O)) || A(g == null ? void 0 : g.value) || (l == null ? void 0 : l.value) : (o == null ? void 0 : o(O)) || A(l == null ? void 0 : l.value) || (l == null ? void 0 : l.value);
         });
         return {
-          isVisible: B,
-          hasInvalid: b,
-          hasValid: y,
-          hintContent: g
+          isVisible: V,
+          hasInvalid: m,
+          hasValid: b,
+          hintContent: h
         };
       },
       render() {
         if (this.isVisible)
-          return h(
+          return ne(
             "small",
             {
               role: this.hasInvalid ? "alert" : this.hasValid ? "status" : void 0
@@ -75,30 +150,83 @@ function H(e, p) {
     }
   };
 }
-const M = {
+const Se = {
+  /**
+   * 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: (e) => Object.values(U).includes(e)
+  },
+  /**
+   * Anchor rel
+   */
+  rel: {
+    type: String,
+    default: "noopener noreferrer"
+  }
+}, T = {
+  /**
+   * Valid status
+   */
   valid: Boolean,
+  /**
+   * Valid label
+   */
   validLabel: [String, Array]
-}, x = {
+}, X = {
+  /**
+   * Invalid status
+   */
   invalid: Boolean,
+  /**
+   * Invalid label
+   */
   invalidLabel: [String, Array]
-}, q = {
+}, $ = {
   /**
    * Whether the form control is disabled
    */
   disabled: Boolean
-}, K = {
+}, _e = {
+  /**
+   * Whether the item is active
+   */
+  active: Boolean
+}, Ve = {
+  /**
+   * Whether the item is pressed
+   */
+  pressed: Boolean
+}, N = {
+  /**
+   * The item label
+   */
+  label: [String, Number]
+}, Z = {
   /**
    * The value is not editable
    */
   readonly: Boolean
-}, w = {
+}, L = {
   /**
    * Component BEM modifiers
    */
   modifiers: [String, Array]
-}, z = {
+}, ee = {
   hintLabel: { type: String, default: "" }
-}, te = {
+}, je = {
   /**
    * List of options, can be string[] or object[]
    */
@@ -119,38 +247,39 @@ const M = {
    */
   disabledKey: { type: [String, Function], default: "disabled" }
 };
-A.before;
-const oe = {
+C.before;
+const ke = {
   /**
    * Global attribute tabindex
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
    */
   tabindex: { type: [String, Number], default: 0 }
-}, ae = {
+}, Ae = {
   /**
    * Global attribute id
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
    */
   id: [String, Number]
 };
-j.bottom;
-const re = {
-  ...ae,
+E.bottom;
+const Be = {
+  ...Ae,
   /**
    * 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 }
-}, ne = {
-  ...re,
-  ...oe,
-  ...M,
-  ...x,
-  ...z,
-  ...q,
-  ...K,
-  ...w,
+}, Re = {
+  ...Be,
+  ...ke,
+  ...T,
+  ...X,
+  ...ee,
+  ...$,
+  ...Z,
+  ...L,
+  ...N,
   /**
    * Input value
    * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value
@@ -159,27 +288,20 @@ const re = {
   /**
    * Input value
    */
-  modelValue: [Object, Number, Boolean, String],
-  /**
-   * <label> for input
-   */
-  label: String
-}, le = {
-  ...M,
-  ...x,
-  ...te,
-  ...z,
-  ...q,
-  ...K,
-  ...w,
+  modelValue: [Object, Number, Boolean, String]
+}, Pe = {
+  ...T,
+  ...X,
+  ...je,
+  ...ee,
+  ...$,
+  ...Z,
+  ...L,
+  ...N,
   /**
    * Input value
    */
   modelValue: [String, Array],
-  /**
-   * Input label
-   */
-  label: String,
   /**
    * Input name
    */
@@ -188,129 +310,204 @@ const re = {
    * If true, the group will be displayed in a vertical column
    */
   vertical: Boolean
-}, se = ne, ue = ["click", "update:modelValue", "change", "blur"];
-function ie(e, p) {
-  const { id: o } = toRefs(e), { group: f, isInGroup: m, getGroupOrLocalRef: r } = useInjectedGroupState(D), t = r("modelValue", e, p), l = r("readonly", e), c = r("disabled", e), s = r("valid", e), i = r("invalid", e);
+};
+({
+  ...$,
+  ...N,
+  ...Ve,
+  ..._e,
+  ...Se,
+  /**
+   * Button type
+   */
+  type: I.button
+});
+function Ee(e) {
+  const t = oe(e, void 0), r = c(() => !Y(t));
+  function s(o, a, l) {
+    if (t != null && t.value) {
+      const n = v(t.value)[o];
+      return c({
+        get() {
+          return n == null ? void 0 : n.value;
+        },
+        set(d) {
+          n.value = d;
+        }
+      });
+    }
+    const i = ae(a, o);
+    return c({
+      get() {
+        return i.value;
+      },
+      set(n) {
+        l && l(`update:${o}`, n);
+      }
+    });
+  }
+  return {
+    group: t,
+    isInGroup: r,
+    getGroupOrLocalRef: s
+  };
+}
+const Ce = Re, Ie = ["click", "update:modelValue", "change", "blur"];
+function Ge(e, t) {
+  const { id: r } = k(e), { group: s, isInGroup: o, getGroupOrLocalRef: a } = Ee(J), l = a("modelValue", e, t), i = a("readonly", e), n = a("disabled", e), d = a("valid", e), f = a("invalid", e);
   return {
     // local props
-    id: o,
+    id: r,
     // global props
-    group: f,
-    isInGroup: m,
-    modelValue: t,
-    readonly: l,
-    disabled: c,
-    valid: s,
-    invalid: i
+    group: s,
+    isInGroup: o,
+    modelValue: l,
+    readonly: i,
+    disabled: n,
+    valid: d,
+    invalid: f
   };
 }
-const de = ["for"], ce = ["id", "name", "disabled", "value", "tabindex", "aria-invalid"], ve = {
+const $e = (e) => c(() => String((e == null ? void 0 : e.value) || me()));
+function te(e, t, r) {
+  return c(() => {
+    const s = {
+      [e]: !0
+    }, o = typeof (t == null ? void 0 : t.value) == "string" ? t.value.split(" ") : t == null ? void 0 : t.value;
+    return o && Array.isArray(o) && o.forEach((a) => {
+      s[`${e}--${a}`] = !0;
+    }), r && Object.keys(r.value).forEach((a) => {
+      s[`${e}--${a}`] = v(r.value[a]);
+    }), s;
+  });
+}
+const Ne = ["for"], De = ["id", "name", "disabled", "value", "tabindex", "aria-invalid"], xe = {
   name: "VvRadio"
-}, pe = /* @__PURE__ */ k({
-  ...ve,
-  props: se,
-  emits: ue,
-  setup(e, { emit: p }) {
-    const o = e, f = useSlots(), { id: m, disabled: r, readonly: t, modelValue: l, valid: c, invalid: s } = ie(o, p), i = useUniqueId(m), a = computed(() => n.value ? -1 : o.tabindex), V = ref(), n = computed(() => r.value || t.value), v = computed(() => {
-      if (s.value === !0)
+}, Fe = /* @__PURE__ */ D({
+  ...xe,
+  props: Ce,
+  emits: Ie,
+  setup(e, { emit: t }) {
+    const r = e, s = x(), { id: o, disabled: a, readonly: l, modelValue: i, valid: n, invalid: d } = Ge(r, t), f = $e(o), u = c(() => p.value ? -1 : r.tabindex), S = le(), p = c(() => a.value || l.value), g = c(() => {
+      if (d.value === !0)
         return !0;
-      if (c.value === !0)
+      if (n.value === !0)
         return !1;
-    }), b = computed(
-      () => Array.isArray(l.value) ? contains(o.value, l.value) : equals(o.value, l.value)
-    ), u = computed(
-      () => ["string", "number", "boolean"].includes(typeof o.value) ? o.value : !0
-    ), y = computed({
+    }), m = c(
+      () => Array.isArray(i.value) ? he(r.value, i.value) : W(r.value, i.value)
+    ), y = c(
+      () => ["string", "number", "boolean"].includes(typeof r.value) ? r.value : !0
+    ), b = c({
       get() {
-        return b.value ? u.value : null;
+        return m.value ? y.value : null;
       },
-      set(g) {
-        Array.isArray(l.value) ? l.value = [o.value] : l.value = o.value, p("change", g);
+      set(h) {
+        Array.isArray(i.value) ? i.value = [r.value] : i.value = r.value, t("change", h);
       }
-    }), { modifiers: _ } = toRefs(o), B = useBemModifiers(
+    }), { modifiers: _ } = k(r), V = te(
       "vv-radio",
       _,
-      computed(() => ({
-        valid: c.value,
-        invalid: s.value,
-        disabled: r.value,
-        readonly: t.value
+      c(() => ({
+        valid: n.value,
+        invalid: d.value,
+        disabled: a.value,
+        readonly: l.value
       }))
-    ), { HintSlot: P } = H(o, f);
-    return (g, S) => (O(), C("label", {
-      class: I(d(B)),
-      for: d(i)
+    ), { HintSlot: P } = Q(r, s);
+    return (h, O) => (j(), B("label", {
+      class: F(v(V)),
+      for: v(f)
     }, [
-      U(N("input", {
-        id: d(i),
+      se(H("input", {
+        id: v(f),
         ref_key: "input",
-        ref: V,
-        "onUpdate:modelValue": S[0] || (S[0] = (T) => J(y) ? y.value = T : null),
+        ref: S,
+        "onUpdate:modelValue": O[0] || (O[0] = (re) => K(b) ? b.value = re : null),
         type: "radio",
         class: "vv-radio__input",
-        name: g.name,
-        disabled: d(n),
-        value: d(u),
-        tabindex: d(a),
-        "aria-invalid": d(v)
-      }, null, 8, ce), [
-        [W, d(y)]
+        name: h.name,
+        disabled: v(p),
+        value: v(y),
+        tabindex: v(u),
+        "aria-invalid": v(g)
+      }, null, 8, De), [
+        [ue, v(b)]
       ]),
-      E(g.$slots, "default", { value: d(l) }, () => [
-        Y(G(g.label), 1)
+      q(h.$slots, "default", { value: v(i) }, () => [
+        ie(w(h.label), 1)
       ]),
-      F(d(P), {
+      M(v(P), {
         class: "vv-radio__hint",
-        params: { value: d(l) }
+        params: { value: v(i) }
       }, null, 8, ["params"])
-    ], 10, de));
+    ], 10, Ne));
   }
-}), fe = le, me = ["update:modelValue", "change"], ye = ["textContent"], be = { class: "vv-radio-group__wrapper" }, ge = {
+}), He = Pe, Ke = ["update:modelValue", "change"];
+function qe(e) {
+  if (Object.keys(e).some(
+    (t) => t !== "key" && !K(e[t])
+  ))
+    throw Error("One or more groupState props aren't ref.");
+  ce(
+    e.key,
+    c(() => e)
+  );
+}
+function we(e) {
+  const { options: t, labelKey: r, valueKey: s, disabledKey: o } = k(e);
+  return {
+    options: t,
+    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 s.value == "function" ? s.value(n) : n[s.value],
+    getOptionDisabled: (n) => typeof n != "object" && n !== null ? !1 : typeof o.value == "function" ? o.value(n) : n[o.value]
+  };
+}
+const Me = ["textContent"], ze = { class: "vv-radio-group__wrapper" }, Ue = {
   name: "VvRadioGroup"
-}, Se = /* @__PURE__ */ k({
-  ...ge,
-  props: fe,
-  emits: me,
-  setup(e, { emit: p }) {
-    const o = e, f = useSlots(), m = useVModel(o, "modelValue", p), { disabled: r, readonly: t, vertical: l, valid: c, invalid: s, modifiers: i } = toRefs(o);
-    useProvideGroupState({
-      key: D,
-      modelValue: m,
-      disabled: r,
-      readonly: t,
-      valid: c,
-      invalid: s
+}, Qe = /* @__PURE__ */ D({
+  ...Ue,
+  props: He,
+  emits: Ke,
+  setup(e, { emit: t }) {
+    const r = e, s = x(), o = be(r, "modelValue", t), { disabled: a, readonly: l, vertical: i, valid: n, invalid: d, modifiers: f } = k(r);
+    qe({
+      key: J,
+      modelValue: o,
+      disabled: a,
+      readonly: l,
+      valid: n,
+      invalid: d
     });
-    const { getOptionLabel: a, getOptionValue: V } = useOptions(o), n = useBemModifiers(
+    const { getOptionLabel: u, getOptionValue: S } = we(r), p = te(
       "vv-radio-group",
-      i,
-      computed(() => ({
-        disabled: r.value,
-        readonly: t.value,
-        horizontal: !l.value,
-        valid: c.value,
-        invalid: s.value
+      f,
+      c(() => ({
+        disabled: a.value,
+        readonly: l.value,
+        horizontal: !i.value,
+        valid: n.value,
+        invalid: d.value
       }))
-    ), v = (u, y) => ({
-      id: `${o.name}_opt${y}`,
-      name: o.name,
-      label: a(u),
-      value: V(u)
-    }), { HintSlot: b } = H(o, f);
-    return (u, y) => (O(), C("fieldset", {
-      class: I(d(n))
+    ), g = (y, b) => ({
+      id: `${r.name}_opt${b}`,
+      name: r.name,
+      label: u(y),
+      value: S(y)
+    }), { HintSlot: m } = Q(r, s);
+    return (y, b) => (j(), B("fieldset", {
+      class: F(v(p))
     }, [
-      u.label ? (O(), C("legend", {
+      y.label ? (j(), B("legend", {
         key: 0,
-        textContent: G(u.label)
-      }, null, 8, ye)) : Q("", !0),
-      N("div", be, [
-        u.options.length > 0 ? (O(!0), C(X, { key: 0 }, Z(u.options, (_, B) => (O(), L(pe, ee({ key: B }, v(_, B)), null, 16))), 128)) : E(u.$slots, "default", { key: 1 })
+        textContent: w(y.label)
+      }, null, 8, Me)) : de("", !0),
+      H("div", ze, [
+        y.options.length > 0 ? (j(!0), B(fe, { key: 0 }, ve(y.options, (_, V) => (j(), pe(Fe, ye({ key: V }, g(_, V)), null, 16))), 128)) : q(y.$slots, "default", { key: 1 })
       ]),
-      F(d(b), { class: "vv-radio-group__hint" })
+      M(v(m), { class: "vv-radio-group__hint" })
     ], 2));
   }
 });
 export {
-  Se as default
+  Qe as default
 };