@rhino-design/vue 0.2.2 → 0.2.6

package/dist/components/XAutoComplete.vue.js

@@ -0,0 +1,399 @@
+import { defineComponent as Te, useAttrs as Ve, ref as x, computed as o, watch as T, nextTick as Se, openBlock as c, createElementBlock as d, createVNode as Z, mergeProps as ee, withCtx as y, unref as Me, createSlots as Pe, renderSlot as m, createElementVNode as te, normalizeStyle as B, Fragment as V, createCommentVNode as H, renderList as L, withModifiers as le, normalizeClass as oe, createTextVNode as ae, toDisplayString as R } from "vue";
+import Oe from "./XInput.vue.js";
+import Be from "./XTrigger.vue.js";
+import { useXFormField as He } from "../composables/form.js";
+const Ae = { class: "x-auto-complete" }, Fe = { class: "x-select__panel" }, Ne = ["data-option-key", "onMouseenter", "onMousedown"], De = {
+  key: 0,
+  class: "x-select__group-title"
+}, Ie = ["data-option-key", "onMouseenter", "onMousedown"], Ee = {
+  key: 0,
+  class: "x-select__footer x-auto-complete__footer"
+}, Ke = /* @__PURE__ */ Te({
+  inheritAttrs: !1,
+  __name: "XAutoComplete",
+  props: {
+    modelValue: {},
+    defaultValue: { default: "" },
+    disabled: { type: Boolean, default: !1 },
+    data: { default: () => [] },
+    popupContainer: { default: void 0 },
+    strict: { type: Boolean, default: !1 },
+    filterOption: { type: [Boolean, Function], default: !0 },
+    triggerProps: { default: void 0 },
+    allowClear: { type: Boolean, default: !1 },
+    virtualListProps: { default: void 0 }
+  },
+  emits: ["update:modelValue", "change", "search", "select", "clear", "dropdownScroll", "dropdown-scroll", "dropdownReachBottom", "dropdown-reach-bottom"],
+  setup(G, { expose: ne, emit: re }) {
+    const n = G, f = re, ue = Ve(), k = He(), S = x(null), g = x(null), M = x(!1), u = x(""), P = x(0), z = o(() => n.modelValue !== void 0), A = x(String(n.defaultValue ?? ""));
+    T(
+      () => n.modelValue,
+      (e) => {
+        e == null && (A.value = "");
+      }
+    );
+    const _ = o(() => z.value ? String(n.modelValue ?? "") : A.value), K = o(() => !!(n.disabled || k != null && k.disabled.value)), ie = o(() => ({
+      trigger: "focus",
+      position: "bottom-start",
+      animationName: "slide-dynamic-origin",
+      autoFitTransformOrigin: !0,
+      clickToClose: !1,
+      preventFocus: !0,
+      popupOffset: 4,
+      autoFitPopupWidth: !0,
+      popupContainer: n.popupContainer,
+      ...n.triggerProps ?? {}
+    })), se = o(() => {
+      var e;
+      return ["x-auto-complete__popup", (e = n.triggerProps) == null ? void 0 : e.contentClass];
+    });
+    function ce(e) {
+      return typeof e != "object" || e === null ? !1 : e.isGroup === !0 ? !0 : Array.isArray(e.options);
+    }
+    function X(e, t, l, r) {
+      if (typeof e != "object" || e === null) {
+        const h = String(e);
+        return {
+          key: t,
+          value: h,
+          label: h,
+          disabled: !1,
+          groupLabel: r,
+          info: {
+            key: t,
+            index: l,
+            value: h,
+            label: h,
+            disabled: !1,
+            groupLabel: r,
+            raw: {
+              value: h,
+              label: h,
+              disabled: !1
+            }
+          }
+        };
+      }
+      const a = e.value ?? e.label;
+      if (a == null)
+        return null;
+      const i = String(a), b = e.label !== void 0 ? String(e.label) : i, w = !!e.disabled, C = {
+        ...e,
+        value: i,
+        label: b,
+        disabled: w
+      };
+      return {
+        key: t,
+        value: i,
+        label: b,
+        disabled: w,
+        groupLabel: r,
+        info: {
+          key: t,
+          index: l,
+          value: i,
+          label: b,
+          disabled: w,
+          groupLabel: r,
+          raw: C
+        }
+      };
+    }
+    const de = o(() => {
+      const e = [];
+      let t = 0;
+      return n.data.forEach((l) => {
+        if (ce(l)) {
+          const i = l.label === void 0 || l.label === null ? void 0 : String(l.label), w = (Array.isArray(l.options) ? l.options : []).map((C) => {
+            const h = `x-auto-complete-option-${t}`, Y = X(C, h, t, i);
+            return t += 1, Y;
+          }).filter((C) => C !== null);
+          w.length > 0 && e.push({
+            label: i,
+            options: w
+          });
+          return;
+        }
+        const r = `x-auto-complete-option-${t}`, a = X(l, r, t);
+        t += 1, a && e.push({ options: [a] });
+      }), e;
+    });
+    function pe(e, t) {
+      return typeof n.filterOption == "function" ? n.filterOption(e, t.info.raw) : n.filterOption === !1 || !e ? !0 : n.strict ? t.label.includes(e) : t.label.toLowerCase().includes(e.toLowerCase());
+    }
+    const F = o(() => {
+      const e = _.value;
+      return de.value.map((t) => ({
+        label: t.label,
+        options: t.options.filter((l) => pe(e, l))
+      })).filter((t) => t.options.length > 0);
+    }), s = o(() => F.value.flatMap((e) => e.options)), j = o(() => s.value.filter((e) => !e.disabled)), fe = o(() => F.value.some((e) => !!e.label)), $ = o(() => M.value && s.value.length > 0), q = o(() => {
+      var e;
+      return Math.max(Number(((e = n.virtualListProps) == null ? void 0 : e.threshold) ?? 0), 0);
+    }), v = o(() => {
+      var e;
+      return Math.max(Number(((e = n.virtualListProps) == null ? void 0 : e.estimatedSize) ?? 36), 24);
+    }), U = o(() => {
+      var e;
+      return Math.max(Number(((e = n.virtualListProps) == null ? void 0 : e.buffer) ?? 10), 0);
+    }), O = o(() => {
+      var e;
+      return ((e = n.virtualListProps) == null ? void 0 : e.height) ?? 200;
+    }), ve = o(() => {
+      const e = O.value;
+      if (typeof e == "number" && Number.isFinite(e))
+        return e;
+      const t = Number.parseFloat(String(e));
+      return Number.isFinite(t) ? t : 200;
+    }), p = o(() => !n.virtualListProps || fe.value || s.value.length === 0 ? !1 : q.value <= 0 ? !0 : s.value.length >= q.value), N = o(() => p.value ? Math.max(Math.floor(P.value / v.value) - U.value, 0) : 0), he = o(() => p.value ? Math.ceil(ve.value / v.value) + U.value * 2 : s.value.length), me = o(() => p.value ? Math.min(N.value + he.value, s.value.length) : s.value.length), W = o(() => p.value ? s.value.slice(N.value, me.value) : s.value), D = o(() => p.value ? N.value * v.value : 0), J = o(() => {
+      if (!p.value)
+        return 0;
+      const e = s.value.length * v.value, t = W.value.length * v.value;
+      return Math.max(e - D.value - t, 0);
+    }), ge = o(() => p.value ? {
+      maxHeight: "none",
+      height: typeof O.value == "number" ? `${O.value}px` : String(O.value)
+    } : void 0), be = o(() => {
+      const e = /* @__PURE__ */ new Map();
+      return s.value.forEach((t, l) => {
+        e.set(t.key, l);
+      }), e;
+    });
+    T([$, j], ([e, t]) => {
+      var l;
+      if (!e) {
+        u.value = "";
+        return;
+      }
+      u.value && t.some((r) => r.key === u.value) || (u.value = ((l = t[0]) == null ? void 0 : l.key) ?? "");
+    }), T(
+      () => _.value,
+      () => {
+        p.value && (P.value = 0, g.value && (g.value.scrollTop = 0));
+      }
+    ), T(
+      () => $.value,
+      (e) => {
+        if (!e) {
+          P.value = 0;
+          return;
+        }
+        g.value && (g.value.scrollTop = 0);
+      }
+    ), T(
+      () => u.value,
+      () => {
+        !$.value || !u.value || !g.value || Se(() => {
+          const e = g.value;
+          if (!e)
+            return;
+          if (p.value) {
+            const a = be.value.get(u.value);
+            if (a === void 0)
+              return;
+            const i = a * v.value, b = i + v.value;
+            i < e.scrollTop ? e.scrollTop = i : b > e.scrollTop + e.clientHeight && (e.scrollTop = b - e.clientHeight);
+            return;
+          }
+          const t = Array.from(e.querySelectorAll("[data-option-key]")).find((a) => a.getAttribute("data-option-key") === u.value);
+          if (!t)
+            return;
+          const l = t.offsetTop, r = l + t.offsetHeight;
+          l < e.scrollTop ? e.scrollTop = l : r > e.scrollTop + e.clientHeight && (e.scrollTop = r - e.clientHeight);
+        });
+      }
+    );
+    function I(e) {
+      z.value || (A.value = e), f("update:modelValue", e), f("change", e), k == null || k.notifyChange();
+    }
+    function ye(e) {
+      f("search", e), I(e);
+    }
+    function ke(e) {
+      I(""), f("clear", e);
+    }
+    function we(e) {
+      M.value = e;
+    }
+    function E(e, t) {
+      var l;
+      e.disabled || (f("select", e.value), I(e.value), M.value = !1, t.preventDefault(), (l = S.value) == null || l.blur());
+    }
+    function Q(e) {
+      const t = j.value;
+      if (t.length === 0)
+        return;
+      const l = t.findIndex((a) => a.key === u.value);
+      if (l === -1) {
+        u.value = t[e > 0 ? 0 : t.length - 1].key;
+        return;
+      }
+      const r = (l + e + t.length) % t.length;
+      u.value = t[r].key;
+    }
+    function xe(e) {
+      if (!(!$.value || e.defaultPrevented)) {
+        if (e.key === "ArrowDown") {
+          e.preventDefault(), Q(1);
+          return;
+        }
+        if (e.key === "ArrowUp") {
+          e.preventDefault(), Q(-1);
+          return;
+        }
+        if (e.key === "Enter") {
+          const t = s.value.find((l) => l.key === u.value);
+          if (!t)
+            return;
+          e.preventDefault(), E(t, e);
+          return;
+        }
+        e.key === "Escape" && (e.preventDefault(), M.value = !1);
+      }
+    }
+    function _e(e) {
+      const t = e.target;
+      t && (P.value = t.scrollTop), f("dropdownScroll", e), f("dropdown-scroll", e), t && t.scrollTop + t.clientHeight >= t.scrollHeight - 1 && (f("dropdownReachBottom", e), f("dropdown-reach-bottom", e));
+    }
+    function $e() {
+      var e;
+      (e = S.value) == null || e.focus();
+    }
+    function Ce() {
+      var e;
+      (e = S.value) == null || e.blur();
+    }
+    return ne({
+      focus: $e,
+      blur: Ce
+    }), (e, t) => (c(), d("div", Ae, [
+      Z(Be, ee({ class: "x-auto-complete__trigger" }, ie.value, {
+        "content-class": se.value,
+        "popup-visible": $.value,
+        disabled: K.value,
+        "onUpdate:popupVisible": we
+      }), {
+        content: y(() => [
+          te("div", Fe, [
+            te("div", {
+              ref_key: "dropdownRef",
+              ref: g,
+              class: "x-select__dropdown x-auto-complete__dropdown",
+              style: B(ge.value),
+              onScroll: _e
+            }, [
+              p.value ? (c(), d(V, { key: 0 }, [
+                D.value > 0 ? (c(), d("div", {
+                  key: 0,
+                  style: B({ height: `${D.value}px` })
+                }, null, 4)) : H("", !0),
+                (c(!0), d(V, null, L(W.value, (l) => (c(), d("button", {
+                  key: l.key,
+                  type: "button",
+                  class: oe(["x-select__option x-auto-complete__option", {
+                    "is-selected": l.value === _.value,
+                    "is-disabled": l.disabled,
+                    "is-active": u.value === l.key
+                  }]),
+                  style: B({ minHeight: `${v.value}px`, lineHeight: `${v.value}px` }),
+                  "data-option-key": l.key,
+                  onMouseenter: (r) => u.value = l.key,
+                  onMousedown: le((r) => E(l, r), ["prevent"])
+                }, [
+                  m(e.$slots, "option", {
+                    data: l.info
+                  }, () => [
+                    ae(R(l.label), 1)
+                  ])
+                ], 46, Ne))), 128)),
+                J.value > 0 ? (c(), d("div", {
+                  key: 1,
+                  style: B({ height: `${J.value}px` })
+                }, null, 4)) : H("", !0)
+              ], 64)) : (c(!0), d(V, { key: 1 }, L(F.value, (l, r) => (c(), d(V, {
+                key: l.label ?? `group-${r}`
+              }, [
+                l.label ? (c(), d("div", De, R(l.label), 1)) : H("", !0),
+                (c(!0), d(V, null, L(l.options, (a) => (c(), d("button", {
+                  key: a.key,
+                  type: "button",
+                  class: oe(["x-select__option x-auto-complete__option", {
+                    "is-selected": a.value === _.value,
+                    "is-disabled": a.disabled,
+                    "is-active": u.value === a.key
+                  }]),
+                  "data-option-key": a.key,
+                  onMouseenter: (i) => u.value = a.key,
+                  onMousedown: le((i) => E(a, i), ["prevent"])
+                }, [
+                  m(e.$slots, "option", {
+                    data: a.info
+                  }, () => [
+                    ae(R(a.label), 1)
+                  ])
+                ], 42, Ie))), 128))
+              ], 64))), 128))
+            ], 36),
+            e.$slots.footer ? (c(), d("div", Ee, [
+              m(e.$slots, "footer")
+            ])) : H("", !0)
+          ])
+        ]),
+        default: y(() => [
+          Z(Oe, ee({
+            ref_key: "inputRef",
+            ref: S
+          }, Me(ue), {
+            "model-value": _.value,
+            disabled: K.value,
+            "allow-clear": G.allowClear,
+            onInput: ye,
+            onClear: ke,
+            onKeydown: xe
+          }), Pe({ _: 2 }, [
+            e.$slots.prepend ? {
+              name: "prepend",
+              fn: y(() => [
+                m(e.$slots, "prepend")
+              ]),
+              key: "0"
+            } : void 0,
+            e.$slots.prefix ? {
+              name: "prefix",
+              fn: y(() => [
+                m(e.$slots, "prefix")
+              ]),
+              key: "1"
+            } : void 0,
+            e.$slots.suffix ? {
+              name: "suffix",
+              fn: y(() => [
+                m(e.$slots, "suffix")
+              ]),
+              key: "2"
+            } : void 0,
+            e.$slots.append ? {
+              name: "append",
+              fn: y(() => [
+                m(e.$slots, "append")
+              ]),
+              key: "3"
+            } : void 0,
+            e.$slots["clear-icon"] ? {
+              name: "clear-icon",
+              fn: y(() => [
+                m(e.$slots, "clear-icon")
+              ]),
+              key: "4"
+            } : void 0
+          ]), 1040, ["model-value", "disabled", "allow-clear"])
+        ]),
+        _: 3
+      }, 16, ["content-class", "popup-visible", "disabled"])
+    ]));
+  }
+});
+export {
+  Ke as default
+};

package/dist/components/XAutoComplete.vue2.js

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

package/dist/components/XAvatar.vue.js

@@ -0,0 +1,166 @@
+import { defineComponent as K, inject as P, ref as X, computed as g, openBlock as x, createElementBlock as v, normalizeStyle as Z, normalizeClass as _, renderSlot as J, Fragment as Q, createTextVNode as Y, toDisplayString as q, createElementVNode as A } from "vue";
+const tt = ["src", "alt"], et = {
+  key: 1,
+  viewBox: "0 0 48 48",
+  fill: "none",
+  xmlns: "http://www.w3.org/2000/svg",
+  stroke: "currentColor",
+  "stroke-width": "4",
+  "stroke-linecap": "butt",
+  "stroke-linejoin": "miter",
+  class: "x-avatar__default-icon"
+}, nt = "#ffffff", rt = "#1f2329", ot = /* @__PURE__ */ K({
+  __name: "XAvatar",
+  props: {
+    src: {},
+    alt: {},
+    size: { default: "default" },
+    shape: { default: "circle" },
+    backgroundColor: { default: "" },
+    color: { default: "" },
+    autoFixFontSize: { type: Boolean, default: !0 }
+  },
+  setup(i) {
+    const c = i, a = P("x-avatar-group", null), y = X(!1), B = {
+      mini: 24,
+      small: 32,
+      default: 40,
+      large: 56
+    }, C = g(() => {
+      const t = c.size ?? (a == null ? void 0 : a.size.value) ?? "default";
+      return typeof t == "number" ? t : B[t];
+    }), E = g(() => c.shape ?? (a == null ? void 0 : a.shape.value) ?? "circle"), H = g(() => c.autoFixFontSize ?? (a == null ? void 0 : a.autoFixFontSize.value) ?? !0);
+    function f(t) {
+      return Math.min(255, Math.max(0, t));
+    }
+    function k(t) {
+      return Math.min(1, Math.max(0, t));
+    }
+    function I(t) {
+      const e = t.replace("#", "").trim();
+      if (![3, 4, 6, 8].includes(e.length))
+        return null;
+      const r = (o) => o.split("").map((d) => d + d).join(""), n = e.length <= 4 ? r(e) : e, s = n.length === 8, l = Number.parseInt(n.slice(0, 2), 16), h = Number.parseInt(n.slice(2, 4), 16), u = Number.parseInt(n.slice(4, 6), 16), m = s ? Number.parseInt(n.slice(6, 8), 16) / 255 : 1;
+      return { r: l, g: h, b: u, a: m };
+    }
+    function F(t) {
+      return t.endsWith("%") ? f(Number.parseFloat(t) / 100 * 255) : f(Number.parseFloat(t));
+    }
+    function w(t) {
+      return t.endsWith("%") ? k(Number.parseFloat(t) / 100) : k(Number.parseFloat(t));
+    }
+    function L(t) {
+      const e = t.match(/^rgba?\((.+)\)$/i);
+      if (!e)
+        return null;
+      const r = e[1].split(",").map((u) => u.trim()).filter(Boolean);
+      if (r.length !== 3 && r.length !== 4)
+        return null;
+      const [n, s, l, h = "1"] = r;
+      return {
+        r: F(n),
+        g: F(s),
+        b: F(l),
+        a: w(h)
+      };
+    }
+    function N(t, e, r) {
+      let n = r;
+      return n < 0 && (n += 1), n > 1 && (n -= 1), n < 1 / 6 ? t + (e - t) * 6 * n : n < 1 / 2 ? e : n < 2 / 3 ? t + (e - t) * (2 / 3 - n) * 6 : t;
+    }
+    function O(t) {
+      const e = Number.parseFloat(t);
+      return Number.isNaN(e) ? 0 : (e % 360 + 360) % 360;
+    }
+    function R(t) {
+      return k(Number.parseFloat(t) / 100);
+    }
+    function D(t) {
+      const e = t.match(/^hsla?\((.+)\)$/i);
+      if (!e)
+        return null;
+      const r = e[1].split(",").map((p) => p.trim()).filter(Boolean);
+      if (r.length !== 3 && r.length !== 4)
+        return null;
+      const [n, s, l, h = "1"] = r, u = O(n) / 360, m = R(s), o = R(l), d = w(h);
+      if (m === 0) {
+        const p = f(o * 255);
+        return { r: p, g: p, b: p, a: d };
+      }
+      const b = o < 0.5 ? o * (1 + m) : o + m - o * m, M = 2 * o - b;
+      return {
+        r: f(N(M, b, u + 1 / 3) * 255),
+        g: f(N(M, b, u) * 255),
+        b: f(N(M, b, u - 1 / 3) * 255),
+        a: d
+      };
+    }
+    function T(t) {
+      if (!t)
+        return null;
+      const e = t.trim().toLowerCase();
+      return I(e) ?? L(e) ?? D(e);
+    }
+    function j(t) {
+      return t.a >= 1 ? t : {
+        r: Math.round((1 - t.a) * 255 + t.a * t.r),
+        g: Math.round((1 - t.a) * 255 + t.a * t.g),
+        b: Math.round((1 - t.a) * 255 + t.a * t.b),
+        a: 1
+      };
+    }
+    function z(t) {
+      const e = t / 255;
+      return e <= 0.03928 ? e / 12.92 : ((e + 0.055) / 1.055) ** 2.4;
+    }
+    function S(t) {
+      return 0.2126 * z(t.r) + 0.7152 * z(t.g) + 0.0722 * z(t.b);
+    }
+    function $(t, e) {
+      const r = Math.max(t, e), n = Math.min(t, e);
+      return (r + 0.05) / (n + 0.05);
+    }
+    function G(t) {
+      const e = T(t);
+      if (!e)
+        return;
+      const r = j(e), n = S(r), s = $(n, 1), l = $(n, S({ r: 31, g: 35, b: 41 }));
+      return s >= l ? nt : rt;
+    }
+    const W = g(() => c.color || G(c.backgroundColor)), U = g(() => ({
+      width: `${C.value}px`,
+      height: `${C.value}px`,
+      fontSize: `${Math.max(12, Math.round(C.value / (H.value ? 2.6 : 2.2)))}px`,
+      backgroundColor: c.backgroundColor || void 0,
+      color: W.value
+    }));
+    function V() {
+      y.value = !0;
+    }
+    return (t, e) => (x(), v("span", {
+      class: _(["x-avatar", [`x-avatar--${E.value}`]]),
+      style: Z(U.value)
+    }, [
+      i.src && !y.value ? (x(), v("img", {
+        key: 0,
+        src: i.src,
+        alt: i.alt,
+        onError: V
+      }, null, 40, tt)) : J(t.$slots, "default", { key: 1 }, () => [
+        i.alt ? (x(), v(Q, { key: 0 }, [
+          Y(q(i.alt.slice(0, 2)), 1)
+        ], 64)) : (x(), v("svg", et, [...e[0] || (e[0] = [
+          A("path", { d: "M7 37c0-4.97 4.03-8 9-8h16c4.97 0 9 3.03 9 8v3a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1v-3Z" }, null, -1),
+          A("circle", {
+            cx: "24",
+            cy: "15",
+            r: "8"
+          }, null, -1)
+        ])]))
+      ])
+    ], 6));
+  }
+});
+export {
+  ot as default
+};

package/dist/components/XAvatar.vue2.js

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

package/dist/components/XAvatarGroup.vue.js

@@ -0,0 +1,27 @@
+import { defineComponent as d, computed as t, useSlots as m, provide as x, openBlock as a, createElementBlock as n, Fragment as v, renderList as f, createBlock as C, resolveDynamicComponent as _, toDisplayString as h, createCommentVNode as g } from "vue";
+const z = { class: "x-avatar-group" }, F = {
+  key: 0,
+  class: "x-avatar x-avatar-group__overflow"
+}, B = /* @__PURE__ */ d({
+  __name: "XAvatarGroup",
+  props: {
+    size: { default: "default" },
+    shape: { default: "circle" },
+    maxCount: { default: 0 },
+    autoFixFontSize: { type: Boolean, default: !0 }
+  },
+  setup(s) {
+    const e = s, l = t(() => e.size), r = m(), o = t(() => r.default ? r.default() : []), i = t(() => !e.maxCount || e.maxCount <= 0 ? o.value : o.value.slice(0, e.maxCount)), u = t(() => !e.maxCount || e.maxCount <= 0 ? 0 : Math.max(0, o.value.length - e.maxCount));
+    return x("x-avatar-group", {
+      size: l,
+      shape: t(() => e.shape),
+      autoFixFontSize: t(() => e.autoFixFontSize)
+    }), (S, k) => (a(), n("div", z, [
+      (a(!0), n(v, null, f(i.value, (c, p) => (a(), C(_(c), { key: p }))), 128)),
+      u.value > 0 ? (a(), n("span", F, "+" + h(u.value), 1)) : g("", !0)
+    ]));
+  }
+});
+export {
+  B as default
+};

package/dist/components/XAvatarGroup.vue2.js

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