@rhino-design/vue 0.2.1 → 0.2.3

package/dist/components/XSlider.vue.js

@@ -0,0 +1,402 @@
+import { defineComponent as _e, toRef as Te, computed as s, ref as _, watch as le, onBeforeUnmount as Ce, openBlock as c, createElementBlock as f, normalizeClass as F, createElementVNode as g, normalizeStyle as T, Fragment as I, renderList as W, createCommentVNode as C, toDisplayString as Ve, createBlock as Le, withCtx as ie, withModifiers as D, unref as V, createVNode as j } from "vue";
+import { useXFormItem as Ee } from "../composables/form.js";
+import ue from "./XInputNumber.vue.js";
+import oe from "./XTooltip.vue.js";
+const Me = { class: "x-slider__wrapper" }, Ne = {
+  key: 0,
+  class: "x-slider__ticks",
+  "aria-hidden": "true"
+}, Be = {
+  key: 1,
+  class: "x-slider__dots",
+  "aria-hidden": "true"
+}, Pe = {
+  key: 2,
+  class: "x-slider__marks",
+  "aria-hidden": "true"
+}, Se = ["id", "aria-disabled", "aria-valuemin", "aria-valuemax", "aria-valuenow", "aria-valuetext"], Ae = ["id", "aria-disabled", "aria-valuemin", "aria-valuemax", "aria-valuenow", "aria-valuetext"], Re = {
+  key: 0,
+  class: "x-slider__input-wrap"
+}, Ye = /* @__PURE__ */ _e({
+  __name: "XSlider",
+  props: {
+    modelValue: {},
+    defaultValue: { default: 0 },
+    min: { default: 0 },
+    max: { default: 100 },
+    step: { default: 1 },
+    marks: { default: void 0 },
+    direction: { default: "horizontal" },
+    disabled: { type: Boolean, default: !1 },
+    showTicks: { type: Boolean, default: !1 },
+    showInput: { type: Boolean, default: !1 },
+    range: { type: Boolean, default: !1 },
+    formatTooltip: { type: Function, default: void 0 },
+    showTooltip: { type: Boolean, default: !0 }
+  },
+  emits: ["update:modelValue", "change", "input"],
+  setup(Y, { emit: re }) {
+    const l = Y, z = re, { id: H, mergedDisabled: p, eventHandlers: se } = Ee({
+      disabled: Te(l, "disabled")
+    }), h = s(() => l.direction === "vertical"), x = s(() => l.range), O = s(() => l.modelValue !== void 0), $ = _(null), G = _(null), N = _(null), J = _(null), Q = _(null);
+    let B = 0;
+    function Z() {
+      return l.min <= l.max ? [l.min, l.max] : [l.max, l.min];
+    }
+    const a = s(() => Z()[0]), d = s(() => Z()[1]), k = s(() => l.step > 0 ? l.step : 1);
+    function U(e) {
+      const t = String(e);
+      if (t.includes("e-")) {
+        const [n, i] = t.split("e-");
+        return (n.split(".")[1] ?? "").length + Number(i || 0);
+      }
+      return (t.split(".")[1] ?? "").length;
+    }
+    const de = s(() => Math.max(
+      U(k.value),
+      U(a.value),
+      U(d.value)
+    ));
+    function ce(e) {
+      const t = 10 ** de.value;
+      return Math.round((e + Number.EPSILON) * t) / t;
+    }
+    function v(e) {
+      const t = Number.isFinite(e) ? e : a.value, i = Math.min(d.value, Math.max(a.value, t)) - a.value, u = Math.round(i / k.value), m = a.value + u * k.value, r = Math.min(d.value, Math.max(a.value, m));
+      return ce(r);
+    }
+    function P(e) {
+      if (x.value) {
+        if (Array.isArray(e))
+          return [
+            v(Number(e[0] ?? a.value)),
+            v(Number(e[1] ?? a.value))
+          ];
+        const t = v(Number(e ?? a.value));
+        return [t, t];
+      }
+      return Array.isArray(e) ? [
+        a.value,
+        v(Number(e[1] ?? e[0] ?? a.value))
+      ] : [
+        a.value,
+        v(Number(e ?? a.value))
+      ];
+    }
+    const S = _(P(l.modelValue ?? l.defaultValue));
+    le(
+      () => l.modelValue,
+      (e) => {
+        e !== void 0 && (S.value = P(e));
+      },
+      { deep: !0 }
+    ), le(
+      () => [l.defaultValue, l.range, l.min, l.max, l.step],
+      () => {
+        O.value || (S.value = P(l.defaultValue));
+      },
+      { deep: !0 }
+    );
+    const o = s(() => O.value ? P(l.modelValue) : S.value), q = s(() => {
+      const [e, t] = o.value;
+      return e <= t ? [e, t] : [t, e];
+    });
+    function ve(e) {
+      const t = d.value - a.value;
+      if (t <= 0)
+        return 0;
+      const n = (e - a.value) / t * 100;
+      return Math.max(0, Math.min(100, n));
+    }
+    function L(e) {
+      return `${Math.round((ve(e) + Number.EPSILON) * 100) / 100}%`;
+    }
+    function E(e) {
+      const t = L(e);
+      return h.value ? { bottom: t } : { left: t };
+    }
+    const me = s(() => {
+      const [e, t] = q.value;
+      return h.value ? {
+        bottom: L(e),
+        top: L(d.value + a.value - t)
+      } : {
+        left: L(e),
+        right: L(d.value + a.value - t)
+      };
+    }), M = s(() => {
+      const e = l.marks ?? {}, [t, n] = q.value, i = /* @__PURE__ */ new Map();
+      for (const [u, m] of Object.entries(e)) {
+        const r = Number(u);
+        if (!Number.isFinite(r))
+          continue;
+        const w = v(r);
+        i.set(w, {
+          key: w,
+          content: m,
+          isActive: w >= t && w <= n
+        });
+      }
+      return [...i.values()].sort((u, m) => u.key - m.key);
+    }), fe = s(() => {
+      const [e, t] = q.value, n = [], i = d.value - a.value;
+      if (i <= 0)
+        return n;
+      const u = Math.floor(i / k.value);
+      for (let m = 1; m < u; m += 1) {
+        const r = v(a.value + k.value * m);
+        r <= a.value || r >= d.value || n.push({
+          key: r,
+          isActive: r >= e && r <= t
+        });
+      }
+      return n;
+    }), pe = s(() => [
+      "x-slider",
+      {
+        "x-slider--vertical": h.value,
+        "x-slider--with-marks": M.value.length > 0
+      }
+    ]), he = s(() => [
+      "x-slider__track",
+      {
+        "x-slider__track--disabled": p.value,
+        "x-slider__track--vertical": h.value
+      }
+    ]);
+    function xe(e) {
+      return x.value ? e : e[1];
+    }
+    function y(e) {
+      var i, u;
+      const t = [
+        v(e[0]),
+        v(e[1])
+      ];
+      O.value || (S.value = t);
+      const n = xe(t);
+      z("update:modelValue", n), z("input", n), z("change", n), (u = (i = se.value).onChange) == null || u.call(i);
+    }
+    function ee() {
+      $.value && (G.value = $.value.getBoundingClientRect());
+    }
+    function te(e, t) {
+      const n = G.value;
+      if (!n)
+        return a.value;
+      const i = h.value ? n.height : n.width;
+      if (i <= 0)
+        return a.value;
+      const u = h.value ? n.top + n.height - t : e - n.left, r = Math.max(0, Math.min(i, u)) / i, w = a.value + r * (d.value - a.value);
+      return v(w);
+    }
+    function ke(e) {
+      return "touches" in e && e.touches.length > 0 ? {
+        clientX: e.touches[0].clientX,
+        clientY: e.touches[0].clientY
+      } : "changedTouches" in e && e.changedTouches.length > 0 ? {
+        clientX: e.changedTouches[0].clientX,
+        clientY: e.changedTouches[0].clientY
+      } : {
+        clientX: e.clientX,
+        clientY: e.clientY
+      };
+    }
+    function ge(e) {
+      if (p.value)
+        return;
+      ee();
+      const t = te(e.clientX, e.clientY), [n] = o.value;
+      if (x.value) {
+        y([n, t]);
+        return;
+      }
+      y([a.value, t]);
+    }
+    function A(e) {
+      const t = N.value;
+      if (!t || p.value)
+        return;
+      "touches" in e && e.preventDefault();
+      const { clientX: n, clientY: i } = ke(e), u = te(n, i), [m, r] = o.value;
+      if (t === "start" && x.value) {
+        y([u, r]), K("start");
+        return;
+      }
+      y([m, u]), K("end");
+    }
+    function ne() {
+      window.removeEventListener("mousemove", A), window.removeEventListener("mouseup", b), window.removeEventListener("touchmove", A), window.removeEventListener("touchend", b), window.removeEventListener("contextmenu", b);
+    }
+    function K(e) {
+      l.showTooltip && (cancelAnimationFrame(B), B = requestAnimationFrame(() => {
+        var t, n, i, u;
+        if (e === "start") {
+          (n = (t = J.value) == null ? void 0 : t.updatePosition) == null || n.call(t);
+          return;
+        }
+        (u = (i = Q.value) == null ? void 0 : i.updatePosition) == null || u.call(i);
+      }));
+    }
+    function b() {
+      N.value = null, ne(), cancelAnimationFrame(B);
+    }
+    function ye() {
+      window.addEventListener("mousemove", A), window.addEventListener("mouseup", b), window.addEventListener("touchmove", A, { passive: !1 }), window.addEventListener("touchend", b), window.addEventListener("contextmenu", b);
+    }
+    function R(e, t) {
+      p.value || (t.preventDefault(), N.value = e, ee(), ye(), K(e));
+    }
+    Ce(() => {
+      ne(), cancelAnimationFrame(B);
+    });
+    function be(e) {
+      const [, t] = o.value;
+      y([v(e ?? a.value), t]);
+    }
+    function we(e) {
+      const [t] = o.value;
+      y([t, v(e ?? a.value)]);
+    }
+    function X(e) {
+      return String(l.formatTooltip ? l.formatTooltip(e) : e);
+    }
+    function ae(e) {
+      return l.showTooltip ? N.value === e ? !0 : void 0 : !1;
+    }
+    return (e, t) => (c(), f("div", {
+      class: F(pe.value)
+    }, [
+      g("div", Me, [
+        g("div", {
+          ref_key: "trackRef",
+          ref: $,
+          class: F(he.value),
+          onClick: ge
+        }, [
+          g("div", {
+            class: "x-slider__bar",
+            style: T(me.value)
+          }, null, 4),
+          Y.showTicks ? (c(), f("div", Ne, [
+            (c(!0), f(I, null, W(fe.value, (n) => (c(), f("div", {
+              key: n.key,
+              class: F(["x-slider__tick", { "x-slider__tick--active": n.isActive }]),
+              style: T(E(n.key))
+            }, null, 6))), 128))
+          ])) : C("", !0),
+          M.value.length ? (c(), f("div", Be, [
+            (c(!0), f(I, null, W(M.value, (n) => (c(), f("div", {
+              key: `dot-${n.key}`,
+              class: "x-slider__dot-wrapper",
+              style: T(E(n.key))
+            }, [
+              g("div", {
+                class: F(["x-slider__dot", { "x-slider__dot--active": n.isActive }])
+              }, null, 2)
+            ], 4))), 128))
+          ])) : C("", !0),
+          M.value.length ? (c(), f("div", Pe, [
+            (c(!0), f(I, null, W(M.value, (n) => (c(), f("div", {
+              key: `mark-${n.key}`,
+              class: "x-slider__mark",
+              style: T(E(n.key))
+            }, Ve(n.content), 5))), 128))
+          ])) : C("", !0),
+          x.value ? (c(), Le(oe, {
+            key: 3,
+            ref_key: "startTooltipRef",
+            ref: J,
+            content: X(o.value[0]),
+            position: h.value ? "right" : "top",
+            "popup-visible": ae("start")
+          }, {
+            default: ie(() => [
+              g("div", {
+                id: V(H),
+                "data-trigger-anchor": "true",
+                class: "x-slider__thumb",
+                style: T(E(o.value[0])),
+                tabindex: "0",
+                role: "slider",
+                "aria-disabled": V(p),
+                "aria-valuemin": a.value,
+                "aria-valuemax": d.value,
+                "aria-valuenow": o.value[0],
+                "aria-valuetext": X(o.value[0]),
+                onMousedown: t[0] || (t[0] = (n) => R("start", n)),
+                onTouchstart: t[1] || (t[1] = (n) => R("start", n)),
+                onClick: t[2] || (t[2] = D(() => {
+                }, ["stop"])),
+                onContextmenu: t[3] || (t[3] = D(() => {
+                }, ["prevent"]))
+              }, null, 44, Se)
+            ]),
+            _: 1
+          }, 8, ["content", "position", "popup-visible"])) : C("", !0),
+          j(oe, {
+            ref_key: "endTooltipRef",
+            ref: Q,
+            content: X(o.value[1]),
+            position: h.value ? "right" : "top",
+            "popup-visible": ae("end")
+          }, {
+            default: ie(() => [
+              g("div", {
+                id: x.value ? void 0 : V(H),
+                "data-trigger-anchor": "true",
+                class: "x-slider__thumb",
+                style: T(E(o.value[1])),
+                tabindex: "0",
+                role: "slider",
+                "aria-disabled": V(p),
+                "aria-valuemin": a.value,
+                "aria-valuemax": d.value,
+                "aria-valuenow": o.value[1],
+                "aria-valuetext": X(o.value[1]),
+                onMousedown: t[4] || (t[4] = (n) => R("end", n)),
+                onTouchstart: t[5] || (t[5] = (n) => R("end", n)),
+                onClick: t[6] || (t[6] = D(() => {
+                }, ["stop"])),
+                onContextmenu: t[7] || (t[7] = D(() => {
+                }, ["prevent"]))
+              }, null, 44, Ae)
+            ]),
+            _: 1
+          }, 8, ["content", "position", "popup-visible"])
+        ], 2)
+      ]),
+      Y.showInput ? (c(), f("div", Re, [
+        x.value ? (c(), f(I, { key: 0 }, [
+          j(ue, {
+            class: "x-slider__input-number",
+            "model-value": o.value[0],
+            min: a.value,
+            max: d.value,
+            step: k.value,
+            disabled: V(p),
+            "hide-button": "",
+            onChange: be
+          }, null, 8, ["model-value", "min", "max", "step", "disabled"]),
+          t[8] || (t[8] = g("div", {
+            class: "x-slider__input-divider",
+            "aria-hidden": "true"
+          }, null, -1))
+        ], 64)) : C("", !0),
+        j(ue, {
+          class: "x-slider__input-number",
+          "model-value": o.value[1],
+          min: a.value,
+          max: d.value,
+          step: k.value,
+          disabled: V(p),
+          "hide-button": "",
+          onChange: we
+        }, null, 8, ["model-value", "min", "max", "step", "disabled"])
+      ])) : C("", !0)
+    ], 2));
+  }
+});
+export {
+  Ye as default
+};

package/dist/components/XSlider.vue2.js

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

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

@@ -1,30 +1,61 @@
-type __VLS_Props = {
-    direction?: 'horizontal' | 'vertical';
-    align?: 'start' | 'center' | 'end' | 'stretch';
-    justify?: 'start' | 'center' | 'end' | 'space-between';
-    size?: 'small' | 'default' | 'large' | number | string;
-    wrap?: boolean;
-    fill?: boolean;
-};
-declare function __VLS_template(): {
-    attrs: Partial<{}>;
-    slots: {
-        default?(_: {}): any;
-    };
-    refs: {};
-    rootEl: HTMLDivElement;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+import { PropType, VNode } from 'vue';
+type SpaceSize = number | 'mini' | 'small' | 'medium' | 'large';
+type SpaceAlign = 'start' | 'end' | 'center' | 'baseline';
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    align: {
+        type: PropType<SpaceAlign>;
+    };
+    direction: {
+        type: PropType<"vertical" | "horizontal">;
+        default: string;
+    };
+    size: {
+        type: PropType<SpaceSize | [SpaceSize, SpaceSize]>;
+        default: string;
+    };
+    wrap: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    fill: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    justify: {
+        type: PropType<"start" | "center" | "end" | "space-between">;
+        default: undefined;
+    };
+}>, () => VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    align: {
+        type: PropType<SpaceAlign>;
+    };
+    direction: {
+        type: PropType<"vertical" | "horizontal">;
+        default: string;
+    };
+    size: {
+        type: PropType<SpaceSize | [SpaceSize, SpaceSize]>;
+        default: string;
+    };
+    wrap: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    fill: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    justify: {
+        type: PropType<"start" | "center" | "end" | "space-between">;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    size: SpaceSize | [SpaceSize, SpaceSize];
+    fill: boolean;
     direction: "horizontal" | "vertical";
-    size: "small" | "default" | "large" | number | string;
-    justify: "start" | "center" | "end" | "space-between";
-    align: "start" | "center" | "end" | "stretch";
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLDivElement>;
-declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+    wrap: boolean;
+    justify: "center" | "space-between" | "end" | "start";
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;
-type __VLS_WithTemplateSlots<T, S> = T & {
-    new (): {
-        $slots: S;
-    };
-};

package/dist/components/XSpace.vue.js

@@ -0,0 +1,125 @@
+import { defineComponent as g, computed as d, h as m, isVNode as $, Comment as v, Fragment as A, Text as w } from "vue";
+import { useXConfigProvider as z } from "../composables/config-provider.js";
+function S(t, i = !1) {
+  const n = [], r = (y) => {
+    var a, s;
+    for (const e of y ?? []) {
+      if (Array.isArray(e)) {
+        r(e);
+        continue;
+      }
+      if ($(e) && e.type !== v) {
+        if (e.type === A) {
+          Array.isArray(e.children) ? r(e.children) : e.children && typeof e.children == "object" && "default" in e.children && typeof e.children.default == "function" && r((s = (a = e.children).default) == null ? void 0 : s.call(a));
+          continue;
+        }
+        if (e.type === w) {
+          i && (typeof e.children == "string" ? e.children.trim() : e.children) !== "" && n.push(e);
+          continue;
+        }
+        n.push(e);
+      }
+    }
+  };
+  return r(t), n;
+}
+function h(t) {
+  if (typeof t == "number")
+    return t;
+  switch (t) {
+    case "mini":
+      return 4;
+    case "small":
+      return 8;
+    case "medium":
+      return 16;
+    case "large":
+      return 24;
+    default:
+      return 8;
+  }
+}
+const b = g({
+  name: "XSpace",
+  props: {
+    align: {
+      type: String
+    },
+    direction: {
+      type: String,
+      default: "horizontal"
+    },
+    size: {
+      type: [Number, String, Array],
+      default: "small"
+    },
+    wrap: {
+      type: Boolean,
+      default: !1
+    },
+    fill: {
+      type: Boolean,
+      default: !1
+    },
+    justify: {
+      type: String,
+      default: void 0
+    }
+  },
+  setup(t, { slots: i }) {
+    const n = "x-space", r = z(), y = d(() => (r == null ? void 0 : r.rtl.value) ?? !1), a = d(
+      () => t.align ?? (t.direction === "horizontal" ? "center" : "")
+    ), s = d(() => [
+      n,
+      {
+        [`${n}-${t.direction}`]: t.direction,
+        [`${n}-align-${a.value}`]: a.value,
+        [`${n}-wrap`]: t.wrap,
+        [`${n}-fill`]: t.fill,
+        [`${n}-rtl`]: y.value
+      }
+    ]), e = d(() => {
+      const l = Array.isArray(t.size) ? t.size : [t.size, t.size], c = h(l[0] ?? "small"), o = h(l[1] ?? l[0] ?? "small"), u = {
+        columnGap: `${c}px`,
+        rowGap: `${o}px`
+      };
+      if (t.justify) {
+        const f = {
+          start: "flex-start",
+          center: "center",
+          end: "flex-end",
+          "space-between": "space-between"
+        };
+        u.justifyContent = f[t.justify];
+      }
+      return u;
+    });
+    return () => {
+      var o;
+      const l = S((o = i.default) == null ? void 0 : o.call(i), !0), c = [];
+      return l.forEach((u, f) => {
+        var p;
+        i.split && f > 0 && c.push(
+          m(
+            "div",
+            { class: `${n}-item-split`, key: `split-${f}` },
+            (p = i.split) == null ? void 0 : p.call(i)
+          )
+        ), c.push(
+          m(
+            "div",
+            { class: `${n}-item`, key: u.key ?? `item-${f}` },
+            [u]
+          )
+        );
+      }), m(
+        "div",
+        { class: s.value, style: e.value },
+        c
+      );
+    };
+  }
+});
+export {
+  b as default
+};

package/dist/components/XSpace.vue2.js

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

package/dist/components/XSpin.vue.js

@@ -0,0 +1,54 @@
+import { defineComponent as x, toRefs as f, openBlock as s, createElementBlock as o, normalizeClass as c, unref as n, renderSlot as _, createStaticVNode as k, createBlock as y, resolveDynamicComponent as g, toDisplayString as h, createCommentVNode as d, createElementVNode as v } from "vue";
+import { useXConfigProviderSlotRender as B } from "../composables/config-provider.js";
+const C = {
+  key: 0,
+  class: "x-spin__mask"
+}, S = {
+  key: 0,
+  class: "x-spin__indicator x-spin__indicator--custom"
+}, $ = {
+  key: 1,
+  class: "x-spin__indicator x-spin__indicator--dot"
+}, z = {
+  key: 2,
+  class: "x-spin__indicator x-spin__indicator--custom"
+}, N = {
+  key: 3,
+  class: "x-spin__indicator"
+}, R = {
+  key: 4,
+  class: "x-spin__tip"
+}, E = /* @__PURE__ */ x({
+  __name: "XSpin",
+  props: {
+    loading: { type: Boolean, default: !0 },
+    tip: {},
+    size: { default: "medium" },
+    dot: { type: Boolean, default: !1 }
+  },
+  setup(l) {
+    const r = l, { loading: e, tip: i, size: m, dot: u } = f(r), a = B("loading");
+    return (t, p) => (s(), o("div", {
+      class: c(["x-spin", `x-spin--${n(m)}`])
+    }, [
+      n(e) ? (s(), o("div", C, [
+        t.$slots.icon ? (s(), o("span", S, [
+          _(t.$slots, "icon")
+        ])) : n(u) ? (s(), o("span", $, [...p[0] || (p[0] = [
+          k('<span class="x-spin__dot"></span><span class="x-spin__dot"></span><span class="x-spin__dot"></span><span class="x-spin__dot"></span><span class="x-spin__dot"></span>', 5)
+        ])])) : n(a) ? (s(), o("span", z, [
+          (s(), y(g(n(a))))
+        ])) : (s(), o("span", N)),
+        n(i) ? (s(), o("span", R, h(n(i)), 1)) : d("", !0)
+      ])) : d("", !0),
+      v("div", {
+        class: c(["x-spin__container", { "is-blur": n(e) }])
+      }, [
+        _(t.$slots, "default")
+      ], 2)
+    ], 2));
+  }
+});
+export {
+  E as default
+};

package/dist/components/XSpin.vue2.js

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