@rhino-design/vue 0.2.2 → 0.2.3

package/dist/components/XRadio.vue.js

@@ -0,0 +1,138 @@
+import { defineComponent as p, ref as g, useSlots as K, inject as L, computed as d, watch as m, onMounted as M, onBeforeUnmount as U, openBlock as i, createElementBlock as f, normalizeClass as A, createElementVNode as k, Fragment as B, createBlock as H, unref as J, renderSlot as R, createCommentVNode as O, nextTick as Q } from "vue";
+import { useXFormField as W } from "../composables/form.js";
+import { xRadioGroupKey as Y } from "./x-radio-context.js";
+const Z = ["checked", "value", "disabled"], C = {
+  key: 0,
+  class: "x-radio-label x-radio__label"
+}, P = {
+  key: 1,
+  class: "x-radio-button-content"
+}, le = /* @__PURE__ */ p({
+  __name: "XRadio",
+  props: {
+    modelValue: { type: [String, Number, Boolean] },
+    defaultChecked: { type: Boolean, default: !1 },
+    value: { type: [String, Number, Boolean], default: !0 },
+    type: { default: "radio" },
+    disabled: { type: Boolean, default: !1 },
+    uninjectGroupContext: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(_, { expose: V, emit: S }) {
+    const t = _, b = S, o = g(null), r = g(t.defaultChecked), F = K(), a = W(), l = t.uninjectGroupContext ? void 0 : L(Y, void 0), c = d(() => (l == null ? void 0 : l.name) === "XRadioGroup"), h = d(() => t.type === "button" ? "button" : (l == null ? void 0 : l.type.value) ?? t.type), D = d(() => !!(l != null && l.disabled.value || t.disabled)), N = d(() => !!(a != null && a.disabled.value)), v = d(() => D.value || N.value), u = d(() => t.value ?? !0), s = d(() => c.value ? (l == null ? void 0 : l.value.value) === u.value : t.modelValue !== void 0 ? t.modelValue === u.value : r.value);
+    m(
+      () => t.modelValue,
+      (e) => {
+        e == null && (r.value = !1);
+      }
+    ), m(s, (e, n) => {
+      e !== n && (r.value = e, o.value && (o.value.checked = e));
+    });
+    function X(e) {
+      e.stopPropagation();
+    }
+    function j(e) {
+      c.value && s.value && (l != null && l.allowCancel.value) && !v.value && (e.preventDefault(), e.stopPropagation(), o.value && (o.value.checked = !1), l.handleChange(void 0, e));
+    }
+    function q(e) {
+      r.value = !0, c.value ? l == null || l.handleChange(u.value, e) : (b("update:modelValue", u.value), b("change", u.value, e)), a == null || a.notifyChange(e), Q(() => {
+        o.value && o.value.checked !== s.value && (o.value.checked = s.value);
+      });
+    }
+    function $(e) {
+      a == null || a.notifyBlur(e);
+    }
+    function w(e) {
+      a == null || a.notifyFocus(e);
+    }
+    function E() {
+      var e;
+      (e = o.value) == null || e.focus();
+    }
+    function T() {
+      var e;
+      (e = o.value) == null || e.blur();
+    }
+    V({
+      focus: E,
+      blur: T
+    });
+    const z = d(() => [
+      h.value === "button" ? "x-radio-button" : "x-radio",
+      {
+        "x-radio-checked": s.value,
+        "x-radio-disabled": v.value,
+        "is-checked": s.value,
+        "is-disabled": v.value
+      }
+    ]), y = d(() => F.radio ?? (l == null ? void 0 : l.radioSlot));
+    M(() => {
+      c.value && (l == null || l.registerRadio(u.value));
+    }), U(() => {
+      c.value && (l == null || l.unregisterRadio(u.value));
+    }), m(u, (e, n) => {
+      !c.value || e === n || n === void 0 || (l == null || l.unregisterRadio(n), l == null || l.registerRadio(e));
+    });
+    const I = p({
+      name: "XRadioSlotRenderer",
+      props: {
+        render: {
+          type: Function,
+          required: !0
+        },
+        checked: {
+          type: Boolean,
+          required: !0
+        },
+        disabled: {
+          type: Boolean,
+          required: !0
+        }
+      },
+      setup(e) {
+        return () => {
+          var n;
+          return (n = e.render) == null ? void 0 : n.call(e, { checked: e.checked, disabled: e.disabled });
+        };
+      }
+    });
+    return (e, n) => (i(), f("label", {
+      class: A(z.value),
+      onClick: j
+    }, [
+      k("input", {
+        ref_key: "inputRef",
+        ref: o,
+        class: "x-radio-target x-radio__input",
+        type: "radio",
+        checked: s.value,
+        value: u.value,
+        disabled: v.value,
+        onClick: X,
+        onChange: q,
+        onFocus: w,
+        onBlur: $
+      }, null, 40, Z),
+      h.value === "radio" ? (i(), f(B, { key: 0 }, [
+        y.value ? (i(), H(J(I), {
+          key: 0,
+          render: y.value,
+          checked: s.value,
+          disabled: v.value
+        }, null, 8, ["render", "checked", "disabled"])) : (i(), f(B, { key: 1 }, [
+          n[0] || (n[0] = k("span", { class: "x-radio-icon-hover" }, [
+            k("span", { class: "x-radio-icon x-radio__dot" })
+          ], -1)),
+          e.$slots.default ? (i(), f("span", C, [
+            R(e.$slots, "default")
+          ])) : O("", !0)
+        ], 64))
+      ], 64)) : (i(), f("span", P, [
+        R(e.$slots, "default")
+      ]))
+    ], 2));
+  }
+});
+export {
+  le as default
+};

package/dist/components/XRadio.vue2.js

@@ -0,0 +1,4 @@
+import f from "./XRadio.vue.js";
+export {
+  f as default
+};

package/dist/components/XRadioButton.vue.js

@@ -0,0 +1,41 @@
+import { defineComponent as i, computed as m, openBlock as f, createBlock as r, withCtx as s, renderSlot as p, createTextVNode as b, toDisplayString as h } from "vue";
+import v from "./XRadio.vue.js";
+const V = /* @__PURE__ */ i({
+  __name: "XRadioButton",
+  props: {
+    modelValue: { type: [String, Number, Boolean] },
+    defaultChecked: { type: Boolean, default: !1 },
+    value: { type: [String, Number, Boolean], default: void 0 },
+    label: { type: [String, Number, Boolean], default: void 0 },
+    disabled: { type: Boolean, default: !1 }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(e, { emit: d }) {
+    const l = e, t = d, u = m(() => l.value ?? l.label ?? !0);
+    function n(a) {
+      t("update:modelValue", a);
+    }
+    function c(a, o) {
+      t("change", a, o);
+    }
+    return (a, o) => (f(), r(v, {
+      type: "button",
+      "model-value": e.modelValue,
+      "default-checked": e.defaultChecked,
+      value: u.value,
+      disabled: e.disabled,
+      "onUpdate:modelValue": n,
+      onChange: c
+    }, {
+      default: s(() => [
+        p(a.$slots, "default", {}, () => [
+          b(h(e.label), 1)
+        ])
+      ]),
+      _: 3
+    }, 8, ["model-value", "default-checked", "value", "disabled"]));
+  }
+});
+export {
+  V as default
+};

package/dist/components/XRadioButton.vue2.js

@@ -0,0 +1,4 @@
+import f from "./XRadioButton.vue.js";
+export {
+  f as default
+};

package/dist/components/XRadioGroup.vue.js

@@ -0,0 +1,168 @@
+import { defineComponent as z, useSlots as E, getCurrentInstance as K, ref as b, computed as a, provide as H, watch as g, onMounted as J, openBlock as s, createElementBlock as h, normalizeStyle as Q, normalizeClass as U, Fragment as V, renderList as W, createBlock as N, withCtx as Y, renderSlot as O, unref as Z, createTextVNode as P, toDisplayString as ee, Comment as te, Text as le } from "vue";
+import { useXConfig as oe } from "../composables/config.js";
+import ae from "./XRadio.vue.js";
+import { xRadioGroupKey as ne } from "./x-radio-context.js";
+const de = /* @__PURE__ */ z({
+  __name: "XRadioGroup",
+  props: {
+    modelValue: { type: [String, Number, Boolean] },
+    defaultValue: { type: [String, Number, Boolean] },
+    type: { default: "radio" },
+    size: {},
+    options: {},
+    direction: { default: "horizontal" },
+    disabled: { type: Boolean, default: !1 },
+    allowCancel: { type: Boolean, default: !1 },
+    fill: { default: "" },
+    color: { default: "" }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(_, { emit: $ }) {
+    const l = _, f = $, d = E(), p = K(), X = oe(), n = b(l.defaultValue), u = b([]), C = b(!1), B = a(() => l.size ?? X.size.value ?? "medium"), m = a(() => {
+      const e = (p == null ? void 0 : p.vnode.props) ?? {};
+      return Object.prototype.hasOwnProperty.call(e, "modelValue") || Object.prototype.hasOwnProperty.call(e, "model-value");
+    }), c = a(() => m.value ? l.modelValue : n.value);
+    function R(e) {
+      const t = e.children;
+      if (Array.isArray(t)) return t;
+      if (t && typeof t == "object") {
+        const o = t.default;
+        if (typeof o == "function") {
+          const r = o();
+          if (Array.isArray(r))
+            return r;
+        }
+      }
+      return [];
+    }
+    function j(e) {
+      if (typeof e == "string") return e;
+      if (!e || typeof e != "object" && typeof e != "function") return "";
+      const t = e;
+      return String(t.name ?? t.__name ?? "");
+    }
+    function v(e) {
+      return e.some((t) => {
+        if (!t || t.type === te || t.type === le) return !1;
+        if (t.type === V)
+          return v(R(t));
+        const o = t.props ?? {}, r = j(t.type);
+        if (r === "XRadioButton" || r === "RadioButton" || (r === "XRadio" || r === "Radio") && o.type === "button")
+          return !0;
+        const w = R(t);
+        return w.length > 0 ? v(w) : !1;
+      });
+    }
+    const A = a(() => {
+      var t;
+      const e = ((t = d.default) == null ? void 0 : t.call(d)) ?? [];
+      return v(e);
+    }), S = a(() => l.type === "button" || A.value || !!l.fill || !!l.color), i = a(() => (l.options ?? []).map((e) => typeof e == "string" || typeof e == "number" ? {
+      label: e,
+      value: e
+    } : e)), y = a(() => i.value.length > 0 ? i.value.map((e) => e.value) : u.value), k = a(() => y.value[0]);
+    function G(e) {
+      return e == null ? !1 : y.value.some((t) => t === e);
+    }
+    function L(e) {
+      u.value.some((t) => t === e) || u.value.push(e);
+    }
+    function M(e) {
+      const t = u.value.findIndex((o) => o === e);
+      t >= 0 && u.value.splice(t, 1);
+    }
+    function x() {
+      if (l.allowCancel)
+        return;
+      const e = k.value;
+      e !== void 0 && (G(c.value) || (n.value !== e && (n.value = e), m.value && l.modelValue !== e && f("update:modelValue", e)));
+    }
+    function q(e, t) {
+      !l.allowCancel && e == null && (e = k.value), n.value = e, f("update:modelValue", e), f("change", e, t);
+    }
+    H(ne, {
+      name: "XRadioGroup",
+      value: c,
+      size: B,
+      type: a(() => S.value ? "button" : l.type),
+      disabled: a(() => l.disabled),
+      allowCancel: a(() => l.allowCancel),
+      radioSlot: d.radio,
+      handleChange: q,
+      registerRadio: L,
+      unregisterRadio: M
+    }), g(c, (e) => {
+      n.value !== e && (n.value = e);
+    }), g(
+      () => l.modelValue,
+      (e) => {
+        m.value && e == null && (n.value = void 0);
+      }
+    ), g(
+      [c, y, () => l.allowCancel],
+      () => {
+        !C.value && i.value.length === 0 || x();
+      },
+      {
+        immediate: !0,
+        deep: !0
+      }
+    ), J(() => {
+      C.value = !0, x();
+    });
+    const F = a(() => [
+      `x-radio-group${S.value ? "-button" : ""}`,
+      `x-radio-group-size-${B.value}`,
+      `x-radio-group-direction-${l.direction}`,
+      {
+        "x-radio-group-disabled": l.disabled
+      }
+    ]), I = a(() => {
+      const e = {};
+      return l.fill && (e["--x-radio-button-active-bg"] = l.fill), l.color && (e["--x-radio-button-active-color"] = l.color), Object.keys(e).length > 0 ? e : void 0;
+    }), T = z({
+      name: "XRadioOptionLabelRenderer",
+      props: {
+        render: {
+          type: Function,
+          required: !0
+        }
+      },
+      setup(e) {
+        return () => {
+          var t;
+          return (t = e.render) == null ? void 0 : t.call(e);
+        };
+      }
+    });
+    function D(e) {
+      return typeof e == "function";
+    }
+    return (e, t) => (s(), h("span", {
+      class: U(F.value),
+      style: Q(I.value)
+    }, [
+      i.value.length > 0 ? (s(!0), h(V, { key: 0 }, W(i.value, (o) => (s(), N(ae, {
+        key: String(o.value),
+        value: o.value,
+        disabled: o.disabled
+      }, {
+        default: Y(() => [
+          e.$slots.label ? O(e.$slots, "label", {
+            key: 0,
+            data: o
+          }) : D(o.label) ? (s(), N(Z(T), {
+            key: 1,
+            render: o.label
+          }, null, 8, ["render"])) : (s(), h(V, { key: 2 }, [
+            P(ee(o.label), 1)
+          ], 64))
+        ]),
+        _: 2
+      }, 1032, ["value", "disabled"]))), 128)) : O(e.$slots, "default", { key: 1 })
+    ], 6));
+  }
+});
+export {
+  de as default
+};

package/dist/components/XRadioGroup.vue2.js

@@ -0,0 +1,4 @@
+import f from "./XRadioGroup.vue.js";
+export {
+  f as default
+};

package/dist/components/XRate.vue.js

@@ -0,0 +1,145 @@
+import { defineComponent as Q, useSlots as T, toRefs as U, toRef as W, ref as w, watch as Y, computed as r, openBlock as u, createElementBlock as V, normalizeClass as Z, Fragment as x, renderList as ee, mergeProps as b, unref as m, createElementVNode as F, createBlock as C, renderSlot as N } from "vue";
+import { useXFormItem as ae } from "../composables/form.js";
+import k from "./XIcon.js";
+const le = ["id", "onAnimationend"], te = ["onMouseenter", "onClick"], oe = ["onMouseenter", "onClick"], se = /* @__PURE__ */ Q({
+  __name: "XRate",
+  props: {
+    count: { default: 5 },
+    modelValue: {},
+    defaultValue: { default: 0 },
+    allowHalf: { type: Boolean, default: !1 },
+    allowClear: { type: Boolean, default: !1 },
+    grading: { type: Boolean, default: !1 },
+    readonly: { type: Boolean, default: !1 },
+    disabled: { type: Boolean, default: !1 },
+    color: { default: void 0 }
+  },
+  emits: ["update:modelValue", "change", "hoverChange"],
+  setup(s, { emit: X }) {
+    const l = s, c = X, j = T(), { modelValue: z } = U(l), { id: L, mergedDisabled: H, eventHandlers: B } = ae({
+      disabled: W(l, "disabled")
+    }), h = w(l.defaultValue), v = w(0), d = w(!1);
+    Y(z, (a) => {
+      a == null && (h.value = 0);
+    });
+    const f = r(() => l.modelValue ?? h.value), I = r(() => H.value || l.readonly), $ = r(() => l.grading ? 5 : Math.max(0, Math.floor(l.count))), g = r(() => Array.from({ length: $.value }, (a, o) => o)), A = r(() => !!j.character), n = r(() => {
+      const a = l.allowHalf ? Math.round(f.value * 2) / 2 : Math.round(f.value);
+      return v.value || a;
+    }), S = r(() => Math.max(Math.ceil(n.value) - 1, 0)), p = r(() => {
+      if (typeof l.color == "string")
+        return g.value.map(() => l.color);
+      if (l.color && typeof l.color == "object") {
+        const a = l.color, o = Object.keys(l.color).map((t) => Number(t)).filter((t) => Number.isFinite(t)).sort((t, i) => i - t);
+        let e = o.pop() ?? g.value.length;
+        return g.value.map((t, i) => (i + 1 > e && (e = o.pop() ?? e), a[String(e)]));
+      }
+    }), P = r(() => [
+      "x-rate",
+      {
+        "x-rate-readonly": l.readonly,
+        "x-rate-disabled": H.value
+      }
+    ]);
+    function G() {
+      v.value && (v.value = 0, c("hoverChange", 0));
+    }
+    function _(a, o) {
+      if (I.value)
+        return;
+      const e = o && l.allowHalf ? a + 0.5 : a + 1;
+      e !== v.value && (v.value = e, c("hoverChange", e));
+    }
+    function D(a, o) {
+      var t, i, y, R;
+      if (I.value)
+        return;
+      const e = o && l.allowHalf ? a + 0.5 : a + 1;
+      d.value = !0, e !== f.value ? (h.value = e, c("update:modelValue", e), c("change", e), (i = (t = B.value) == null ? void 0 : t.onChange) == null || i.call(t)) : l.allowClear && (h.value = 0, c("update:modelValue", 0), c("change", 0), (R = (y = B.value) == null ? void 0 : y.onChange) == null || R.call(y));
+    }
+    function O(a) {
+      d.value && a + 1 >= f.value - 1 && (d.value = !1);
+    }
+    function M(a, o = !1) {
+      return {
+        role: "radio",
+        "aria-checked": a + (o ? 0.5 : 1) <= f.value,
+        "aria-setsize": $.value,
+        "aria-posinset": a + (o ? 0.5 : 1)
+      };
+    }
+    function q(a) {
+      if (p.value && l.allowHalf && a + 0.5 === n.value)
+        return { color: p.value[S.value] };
+    }
+    function J(a) {
+      if (p.value && a + 1 <= n.value)
+        return { color: p.value[S.value] };
+    }
+    function E(a) {
+      return a > n.value ? "smile-full" : n.value <= 2 ? "disappointed-full" : n.value <= 3 ? "smile-full" : "happy-full";
+    }
+    function K(a) {
+      return [
+        "x-rate-character",
+        {
+          "x-rate-character-half": l.allowHalf && a + 0.5 === n.value,
+          "x-rate-character-full": a + 1 <= n.value,
+          "x-rate-character-scale": d.value && a + 1 < f.value
+        }
+      ];
+    }
+    return (a, o) => (u(), V("div", {
+      class: Z(P.value),
+      onMouseleave: G
+    }, [
+      (u(!0), V(x, null, ee(g.value, (e) => (u(), V("div", b({
+        id: e === 0 ? m(L) : void 0,
+        key: e,
+        class: K(e),
+        style: d.value ? { animationDelay: `${50 * e}ms` } : void 0
+      }, { ref_for: !0 }, s.allowHalf ? void 0 : M(e), {
+        onAnimationend: (t) => O(e)
+      }), [
+        F("div", b({
+          class: "x-rate-character-left",
+          style: q(e)
+        }, { ref_for: !0 }, s.allowHalf ? M(e, !0) : void 0, {
+          onMouseenter: (t) => _(e, !0),
+          onClick: (t) => D(e, !0)
+        }), [
+          s.grading ? (u(), C(m(k), {
+            key: 0,
+            name: E(e)
+          }, null, 8, ["name"])) : A.value ? N(a.$slots, "character", {
+            key: 1,
+            index: e
+          }) : (u(), C(m(k), {
+            key: 2,
+            name: "star-full"
+          }))
+        ], 16, te),
+        F("div", b({
+          class: "x-rate-character-right",
+          style: J(e)
+        }, { ref_for: !0 }, s.allowHalf ? M(e) : void 0, {
+          onMouseenter: (t) => _(e, !1),
+          onClick: (t) => D(e, !1)
+        }), [
+          s.grading ? (u(), C(m(k), {
+            key: 0,
+            name: E(e)
+          }, null, 8, ["name"])) : A.value ? N(a.$slots, "character", {
+            key: 1,
+            index: e
+          }) : (u(), C(m(k), {
+            key: 2,
+            name: "star-full"
+          }))
+        ], 16, oe)
+      ], 16, le))), 128))
+    ], 34));
+  }
+});
+export {
+  se as default
+};

package/dist/components/XRate.vue2.js

@@ -0,0 +1,4 @@
+import f from "./XRate.vue.js";
+export {
+  f as default
+};