@rhino-design/vue 0.2.2 → 0.2.3

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

@@ -0,0 +1,192 @@
+import { StyleValue } from 'vue';
+import { XScrollbarThumbData } from './x-scrollbar-types';
+type ScrollbarType = 'track' | 'embed';
+type ScrollbarClass = string | Record<string, boolean> | Array<string | Record<string, boolean>>;
+type __VLS_Props = {
+    type?: ScrollbarType;
+    outerClass?: ScrollbarClass;
+    outerStyle?: StyleValue;
+    hide?: boolean;
+    disableHorizontal?: boolean;
+    disableVertical?: boolean;
+};
+declare function scrollTo(options?: number | {
+    left?: number;
+    top?: number;
+}, y?: number): void;
+declare function scrollTop(top: number): void;
+declare function scrollLeft(left: number): void;
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        default?(_: {}): any;
+    };
+    refs: {
+        containerRef: HTMLDivElement;
+        horizontalThumbRef: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
+            data?: XScrollbarThumbData;
+            direction?: "horizontal" | "vertical";
+            both?: boolean;
+        }> & Readonly<{
+            onScroll?: ((offset: number) => any) | undefined;
+        }>, {
+            setOffset: (nextOffset: number) => void;
+        }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+            scroll: (offset: number) => any;
+        }, import('vue').PublicProps, {
+            direction: "horizontal" | "vertical";
+            both: boolean;
+        }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
+            trackRef: HTMLDivElement;
+            thumbRef: HTMLDivElement;
+        }, HTMLDivElement, import('vue').ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<{
+            data?: XScrollbarThumbData;
+            direction?: "horizontal" | "vertical";
+            both?: boolean;
+        }> & Readonly<{
+            onScroll?: ((offset: number) => any) | undefined;
+        }>, {
+            setOffset: (nextOffset: number) => void;
+        }, {}, {}, {}, {
+            direction: "horizontal" | "vertical";
+            both: boolean;
+        }> | null;
+        verticalThumbRef: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
+            data?: XScrollbarThumbData;
+            direction?: "horizontal" | "vertical";
+            both?: boolean;
+        }> & Readonly<{
+            onScroll?: ((offset: number) => any) | undefined;
+        }>, {
+            setOffset: (nextOffset: number) => void;
+        }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+            scroll: (offset: number) => any;
+        }, import('vue').PublicProps, {
+            direction: "horizontal" | "vertical";
+            both: boolean;
+        }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
+            trackRef: HTMLDivElement;
+            thumbRef: HTMLDivElement;
+        }, HTMLDivElement, import('vue').ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<{
+            data?: XScrollbarThumbData;
+            direction?: "horizontal" | "vertical";
+            both?: boolean;
+        }> & Readonly<{
+            onScroll?: ((offset: number) => any) | undefined;
+        }>, {
+            setOffset: (nextOffset: number) => void;
+        }, {}, {}, {}, {
+            direction: "horizontal" | "vertical";
+            both: boolean;
+        }> | null;
+    };
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {
+    scrollTo: typeof scrollTo;
+    scrollTop: typeof scrollTop;
+    scrollLeft: typeof scrollLeft;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+    scroll: (ev: Event) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onScroll?: ((ev: Event) => any) | undefined;
+}>, {
+    type: ScrollbarType;
+    hide: boolean;
+    disableHorizontal: boolean;
+    disableVertical: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
+    containerRef: HTMLDivElement;
+    horizontalThumbRef: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
+        data?: XScrollbarThumbData;
+        direction?: "horizontal" | "vertical";
+        both?: boolean;
+    }> & Readonly<{
+        onScroll?: ((offset: number) => any) | undefined;
+    }>, {
+        setOffset: (nextOffset: number) => void;
+    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+        scroll: (offset: number) => any;
+    }, import('vue').PublicProps, {
+        direction: "horizontal" | "vertical";
+        both: boolean;
+    }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
+        trackRef: HTMLDivElement;
+        thumbRef: HTMLDivElement;
+    }, HTMLDivElement, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<{
+        data?: XScrollbarThumbData;
+        direction?: "horizontal" | "vertical";
+        both?: boolean;
+    }> & Readonly<{
+        onScroll?: ((offset: number) => any) | undefined;
+    }>, {
+        setOffset: (nextOffset: number) => void;
+    }, {}, {}, {}, {
+        direction: "horizontal" | "vertical";
+        both: boolean;
+    }> | null;
+    verticalThumbRef: import('vue').CreateComponentPublicInstanceWithMixins<Readonly<{
+        data?: XScrollbarThumbData;
+        direction?: "horizontal" | "vertical";
+        both?: boolean;
+    }> & Readonly<{
+        onScroll?: ((offset: number) => any) | undefined;
+    }>, {
+        setOffset: (nextOffset: number) => void;
+    }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
+        scroll: (offset: number) => any;
+    }, import('vue').PublicProps, {
+        direction: "horizontal" | "vertical";
+        both: boolean;
+    }, false, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {
+        trackRef: HTMLDivElement;
+        thumbRef: HTMLDivElement;
+    }, HTMLDivElement, import('vue').ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<{
+        data?: XScrollbarThumbData;
+        direction?: "horizontal" | "vertical";
+        both?: boolean;
+    }> & Readonly<{
+        onScroll?: ((offset: number) => any) | undefined;
+    }>, {
+        setOffset: (nextOffset: number) => void;
+    }, {}, {}, {}, {
+        direction: "horizontal" | "vertical";
+        both: boolean;
+    }> | null;
+}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/XScrollbar.vue.js

@@ -0,0 +1,190 @@
+import { defineComponent as J, useAttrs as Q, ref as c, computed as m, onMounted as Y, nextTick as k, onBeforeUnmount as ee, watch as le, openBlock as R, createElementBlock as te, normalizeStyle as oe, normalizeClass as ae, createElementVNode as re, mergeProps as ne, unref as se, renderSlot as ce, createBlock as E, createCommentVNode as L } from "vue";
+import O from "./XScrollbarThumb.vue.js";
+const ue = 20, p = 15, de = /* @__PURE__ */ J({
+  name: "XScrollbar",
+  inheritAttrs: !1,
+  __name: "XScrollbar",
+  props: {
+    type: { default: "embed" },
+    outerClass: {},
+    outerStyle: { type: [Boolean, null, String, Object, Array] },
+    hide: { type: Boolean, default: !1 },
+    disableHorizontal: { type: Boolean, default: !1 },
+    disableVertical: { type: Boolean, default: !1 }
+  },
+  emits: ["scroll"],
+  setup(y, { expose: W, emit: $ }) {
+    const a = y, S = $, A = Q(), o = c(null), f = c(), d = c(), T = c(null), x = c(null), H = c(!1), z = c(!1), v = m(
+      () => H.value && !a.disableHorizontal
+    ), h = m(
+      () => z.value && !a.disableVertical
+    ), M = m(
+      () => v.value && h.value
+    );
+    function B(e, l, t) {
+      if (e <= 0 || l <= 0 || t <= 0 || l <= t)
+        return {
+          ratio: 1,
+          thumbSize: Math.max(e, 0),
+          max: 0
+        };
+      const n = Math.round(
+        e / Math.min(l / t, e / ue)
+      ), r = Math.max(e - n, 0);
+      return {
+        ratio: r > 0 ? (l - t) / r : 1,
+        thumbSize: n,
+        max: r
+      };
+    }
+    function u() {
+      var C, _;
+      const e = o.value;
+      if (!e)
+        return;
+      const {
+        clientWidth: l,
+        clientHeight: t,
+        offsetWidth: n,
+        offsetHeight: r,
+        scrollWidth: b,
+        scrollHeight: V,
+        scrollTop: P,
+        scrollLeft: q
+      } = e;
+      H.value = b > l, z.value = V > t;
+      const g = v.value && h.value, F = a.type === "embed" && g ? n - p : n, G = a.type === "embed" && g ? r - p : r;
+      f.value = B(F, b, l), d.value = B(G, V, t), (C = T.value) == null || C.setOffset(
+        Math.round(q / (f.value.ratio || 1))
+      ), (_ = x.value) == null || _.setOffset(
+        Math.round(P / (d.value.ratio || 1))
+      );
+    }
+    function D(e) {
+      var t, n, r, b;
+      const l = o.value;
+      if (!l) {
+        S("scroll", e);
+        return;
+      }
+      v.value && !a.disableHorizontal && ((n = T.value) == null || n.setOffset(
+        Math.round(l.scrollLeft / (((t = f.value) == null ? void 0 : t.ratio) || 1))
+      )), h.value && !a.disableVertical && ((b = x.value) == null || b.setOffset(
+        Math.round(l.scrollTop / (((r = d.value) == null ? void 0 : r.ratio) || 1))
+      )), S("scroll", e);
+    }
+    function I(e) {
+      var l;
+      o.value && o.value.scrollTo({
+        left: e * (((l = f.value) == null ? void 0 : l.ratio) || 1)
+      });
+    }
+    function N(e) {
+      var l;
+      o.value && o.value.scrollTo({
+        top: e * (((l = d.value) == null ? void 0 : l.ratio) || 1)
+      });
+    }
+    let s = null, i = null;
+    const w = () => {
+      u();
+    };
+    Y(() => {
+      if (u(), k(() => {
+        u();
+      }), typeof ResizeObserver < "u" && o.value) {
+        s = new ResizeObserver(() => {
+          u();
+        }), s.observe(o.value);
+        const e = o.value.firstElementChild;
+        e && s.observe(e);
+      } else
+        window.addEventListener("resize", w);
+      typeof MutationObserver < "u" && o.value && (i = new MutationObserver(() => {
+        u();
+      }), i.observe(o.value, {
+        childList: !0,
+        subtree: !0,
+        characterData: !0
+      }));
+    }), ee(() => {
+      s == null || s.disconnect(), s = null, i == null || i.disconnect(), i = null, window.removeEventListener("resize", w);
+    }), le(
+      () => [a.type, a.disableHorizontal, a.disableVertical],
+      () => {
+        k(() => {
+          u();
+        });
+      }
+    );
+    const j = m(() => {
+      const e = {};
+      return a.type === "track" && (v.value && (e.paddingBottom = `${p}px`), h.value && (e.paddingRight = `${p}px`)), [e, a.outerStyle];
+    }), U = m(() => [
+      "x-scrollbar",
+      `x-scrollbar-type-${a.type}`,
+      {
+        "x-scrollbar-both": M.value
+      },
+      a.outerClass
+    ]);
+    function X(e, l) {
+      const t = o.value;
+      if (t) {
+        if (e && typeof e == "object") {
+          t.scrollTo(e);
+          return;
+        }
+        (typeof e == "number" || typeof l == "number") && t.scrollTo(
+          typeof e == "number" ? e : t.scrollLeft,
+          typeof l == "number" ? l : t.scrollTop
+        );
+      }
+    }
+    function Z(e) {
+      var l;
+      (l = o.value) == null || l.scrollTo({ top: e });
+    }
+    function K(e) {
+      var l;
+      (l = o.value) == null || l.scrollTo({ left: e });
+    }
+    return W({
+      scrollTo: X,
+      scrollTop: Z,
+      scrollLeft: K
+    }), (e, l) => (R(), te("div", {
+      class: ae(U.value),
+      style: oe(j.value)
+    }, [
+      re("div", ne({
+        ref_key: "containerRef",
+        ref: o,
+        class: "x-scrollbar-container"
+      }, se(A), { onScroll: D }), [
+        ce(e.$slots, "default")
+      ], 16),
+      !y.hide && v.value ? (R(), E(O, {
+        key: 0,
+        ref_key: "horizontalThumbRef",
+        ref: T,
+        data: f.value,
+        direction: "horizontal",
+        both: M.value,
+        onScroll: I
+      }, null, 8, ["data", "both"])) : L("", !0),
+      !y.hide && h.value ? (R(), E(O, {
+        key: 1,
+        ref_key: "verticalThumbRef",
+        ref: x,
+        data: d.value,
+        direction: "vertical",
+        both: M.value,
+        onScroll: N
+      }, null, 8, ["data", "both"])) : L("", !0)
+    ], 6));
+  }
+});
+export {
+  de as default
+};

package/dist/components/XScrollbar.vue2.js

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

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

@@ -1,11 +1,7 @@
-interface ThumbData {
-    ratio: number;
-    thumbSize: number;
-    max: number;
-}
+import { XScrollbarThumbData } from './x-scrollbar-types';
 type Direction = 'horizontal' | 'vertical';
 type __VLS_Props = {
-    data?: ThumbData;
+    data?: XScrollbarThumbData;
     direction?: Direction;
     both?: boolean;
 };

package/dist/components/XScrollbarThumb.vue.js

@@ -0,0 +1,97 @@
+import { defineComponent as y, ref as u, computed as v, onBeforeUnmount as S, openBlock as D, createElementBlock as O, withModifiers as _, normalizeClass as x, createElementVNode as k, normalizeStyle as $ } from "vue";
+const U = /* @__PURE__ */ y({
+  __name: "XScrollbarThumb",
+  props: {
+    data: {},
+    direction: { default: "horizontal" },
+    both: { type: Boolean, default: !1 }
+  },
+  emits: ["scroll"],
+  setup(m, { expose: z, emit: R }) {
+    const l = m, h = R, s = u(null), i = u(null), n = u(0), r = u(!1), b = u(0), o = v(() => l.direction === "horizontal" ? {
+      size: "width",
+      direction: "left",
+      client: "clientX"
+    } : {
+      size: "height",
+      direction: "top",
+      client: "clientY"
+    }), E = v(() => {
+      var e;
+      return {
+        [o.value.size]: `${((e = l.data) == null ? void 0 : e.thumbSize) ?? 0}px`,
+        [o.value.direction]: `${n.value}px`
+      };
+    }), M = v(() => [
+      "x-scrollbar-thumb",
+      `x-scrollbar-thumb-direction-${l.direction}`,
+      {
+        "x-scrollbar-thumb-dragging": r.value
+      }
+    ]);
+    function d(e) {
+      return e < 0 ? 0 : l.data && e > l.data.max ? l.data.max : e;
+    }
+    function p() {
+      r.value = !1, window.removeEventListener("mousemove", g), window.removeEventListener("mouseup", c), window.removeEventListener("contextmenu", c);
+    }
+    function c() {
+      p();
+    }
+    function g(e) {
+      if (!s.value)
+        return;
+      const t = s.value.getBoundingClientRect(), a = d(
+        e[o.value.client] - t[o.value.direction] - b.value
+      );
+      a !== n.value && (n.value = a, h("scroll", a));
+    }
+    function B(e) {
+      if (e.preventDefault(), !i.value)
+        return;
+      const t = i.value.getBoundingClientRect();
+      b.value = e[o.value.client] - t[o.value.direction], r.value = !0, window.addEventListener("mousemove", g), window.addEventListener("mouseup", c), window.addEventListener("contextmenu", c);
+    }
+    function C(e) {
+      var w;
+      if (e.preventDefault(), !i.value)
+        return;
+      const t = i.value.getBoundingClientRect()[o.value.direction], a = ((w = l.data) == null ? void 0 : w.thumbSize) ?? 0, f = d(
+        e[o.value.client] > t ? n.value + a : n.value - a
+      );
+      f !== n.value && (n.value = f, h("scroll", f));
+    }
+    function L(e) {
+      if (r.value)
+        return;
+      const t = d(e);
+      t !== n.value && (n.value = t);
+    }
+    return S(() => {
+      p();
+    }), z({
+      setOffset: L
+    }), (e, t) => (D(), O("div", {
+      ref_key: "trackRef",
+      ref: s,
+      class: x([
+        "x-scrollbar-track",
+        `x-scrollbar-track-direction-${m.direction}`
+      ]),
+      onMousedown: _(C, ["self"])
+    }, [
+      k("div", {
+        ref_key: "thumbRef",
+        ref: i,
+        class: x(M.value),
+        style: $(E.value),
+        onMousedown: B
+      }, [...t[0] || (t[0] = [
+        k("div", { class: "x-scrollbar-thumb-bar" }, null, -1)
+      ])], 38)
+    ], 34));
+  }
+});
+export {
+  U as default
+};

package/dist/components/XScrollbarThumb.vue2.js

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

package/dist/components/XSegmented.vue.js

@@ -0,0 +1,7 @@
+import o from "./XSegmented.vue2.js";
+/* empty css                */
+import t from "../_virtual/_plugin-vue_export-helper.js";
+const f = /* @__PURE__ */ t(o, [["__scopeId", "data-v-91fb8755"]]);
+export {
+  f as default
+};

package/dist/components/XSegmented.vue2.js

@@ -0,0 +1,71 @@
+import { defineComponent as V, computed as c, ref as r, watch as m, onMounted as B, openBlock as f, createElementBlock as v, normalizeClass as x, unref as _, createElementVNode as X, normalizeStyle as $, Fragment as E, renderList as I, renderSlot as T, createTextVNode as L, toDisplayString as N, nextTick as O } from "vue";
+import { useXConfig as j, sizeClass as D } from "../composables/config.js";
+const F = ["disabled", "onClick"], q = /* @__PURE__ */ V({
+  __name: "XSegmented",
+  props: {
+    modelValue: { default: void 0 },
+    options: {},
+    size: {},
+    block: { type: Boolean },
+    disabled: { type: Boolean }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(l, { emit: y }) {
+    const n = l, b = y, k = j(), z = c(() => n.size ?? k.size.value), g = c(
+      () => n.options.map(
+        (e) => typeof e == "object" && e !== null ? e : {
+          label: String(e),
+          value: e
+        }
+      )
+    ), p = c(() => g.value.findIndex((e) => e.value === n.modelValue)), h = r({
+      transform: "translateX(0)",
+      width: "0px"
+    }), o = r([]), u = r(), a = async () => {
+      await O();
+      const e = p.value;
+      if (e < 0 || !o.value[e] || !u.value) return;
+      const s = o.value[e], d = u.value.getBoundingClientRect(), i = s.getBoundingClientRect(), R = i.left - d.left, S = i.width;
+      h.value = {
+        transform: `translateX(${R}px)`,
+        width: `${S}px`
+      };
+    };
+    m(() => n.modelValue, a, { immediate: !0 }), m(() => n.options, a, { deep: !0 }), m(() => n.size, a), B(a), window.addEventListener("resize", a);
+    function w(e, s) {
+      n.disabled || e.disabled || (b("update:modelValue", e.value), b("change", e.value));
+    }
+    function C(e, s) {
+      e && (o.value[s] = e);
+    }
+    return (e, s) => (f(), v("div", {
+      ref_key: "containerRef",
+      ref: u,
+      class: x(["x-segmented", [_(D)(z.value), { "is-block": l.block, "is-disabled": l.disabled }]])
+    }, [
+      X("div", {
+        class: "x-segmented__thumb",
+        style: $(h.value)
+      }, null, 4),
+      (f(!0), v(E, null, I(g.value, (t, d) => (f(), v("button", {
+        key: String(t.value),
+        ref_for: !0,
+        ref: (i) => C(i, d),
+        type: "button",
+        class: x(["x-segmented__item", { "is-active": t.value === l.modelValue, "is-disabled": t.disabled }]),
+        disabled: l.disabled || t.disabled,
+        onClick: (i) => w(t)
+      }, [
+        T(e.$slots, "default", {
+          option: t,
+          index: d
+        }, () => [
+          L(N(t.label), 1)
+        ], !0)
+      ], 10, F))), 128))
+    ], 2));
+  }
+});
+export {
+  q as default
+};