@rhino-design/vue 0.2.1 → 0.2.3

package/dist/composables/menu-hooks/use-menu-context.js

@@ -0,0 +1,8 @@
+import { inject as t } from "vue";
+import { MenuInjectionKey as e } from "../menu-context.js";
+function r() {
+  return t(e) || {};
+}
+export {
+  r as default
+};

package/dist/composables/menu-hooks/use-menu-data-collector.js

@@ -0,0 +1,63 @@
+import { ref as b, provide as k, onMounted as d, onUnmounted as h, computed as p, inject as D } from "vue";
+import { DataCollectorInjectionKey as y } from "../menu-context.js";
+const v = (t) => t === void 0;
+function M(t, o) {
+  const n = [], e = (u) => {
+    u.forEach((r) => {
+      o(r) && n.push(r.key), r.children && e(r.children);
+    });
+  };
+  return e(t), n;
+}
+function I(t = !1) {
+  return t ? void 0 : D(y);
+}
+function j(t) {
+  const { key: o, type: n } = t, e = b([]), u = I(n === "menu");
+  return k(y, {
+    collectSubMenu(l, a, f = !1) {
+      const s = {
+        key: l,
+        children: a
+      }, i = e.value.findIndex((c) => c.key === l);
+      if (f)
+        if (i > -1) {
+          const c = [...e.value];
+          c[i] = s, e.value = c;
+        } else
+          e.value.push(s);
+      else {
+        if (i > -1)
+          return;
+        e.value = [...e.value, s];
+      }
+      f && (n === "popupMenu" ? u == null || u.reportMenuData(e.value) : n === "subMenu" && !v(o) && (u == null || u.collectSubMenu(o, e.value, !0)));
+    },
+    removeSubMenu(l) {
+      e.value = e.value.filter((a) => a.key !== l);
+    },
+    collectMenuItem(l) {
+      e.value.some((a) => a.key === l) || e.value.push({ key: l });
+    },
+    removeMenuItem(l) {
+      e.value = e.value.filter((a) => a.key !== l);
+    },
+    reportMenuData(l) {
+      e.value = l, n === "subMenu" && !v(o) && (u == null || u.collectSubMenu(o, e.value, !0));
+    }
+  }), n === "subMenu" && !v(o) ? (d(() => {
+    u == null || u.collectSubMenu(o, e.value);
+  }), h(() => {
+    u == null || u.removeSubMenu(o);
+  })) : n === "popupMenu" && d(() => {
+    u == null || u.reportMenuData(e.value);
+  }), {
+    menuData: e,
+    subMenuKeys: p(() => M(e.value, (l) => !!l.children)),
+    menuItemKeys: p(() => M(e.value, (l) => !l.children))
+  };
+}
+export {
+  j as default,
+  I as useMenuDataCollectorContext
+};

package/dist/composables/menu-hooks/use-menu-open-state.js

@@ -0,0 +1,120 @@
+import { toRefs as M, ref as x, watch as S, onMounted as y, computed as A } from "vue";
+const h = (l) => l === void 0, B = "__x_menu_root__";
+function m(l, t) {
+  const u = [], a = (v) => {
+    for (let s = 0; s < v.length; s++) {
+      const c = v[s];
+      if (c.key === t)
+        return !0;
+      if (c.children) {
+        if (u.push(c.key), a(c.children))
+          return !0;
+        u.pop();
+      }
+    }
+    return !1;
+  };
+  return a(l), u;
+}
+function E(l, t) {
+  return l.length !== t.length ? !1 : l.toString() === t.toString();
+}
+function g(l, t, u) {
+  if (!l) return [];
+  const a = [...new Set(l)];
+  if (!t) return a;
+  const v = /* @__PURE__ */ new Map();
+  a.forEach((n) => {
+    const o = m(u, n), K = o[o.length - 1] ?? B;
+    v.set(K, n);
+  });
+  const s = Array.from(v.values()), c = new Set(s);
+  return s.filter(
+    (n) => m(u, n).every((o) => c.has(o))
+  );
+}
+function P(l, t, u) {
+  return l.filter(
+    (a) => a !== u && !m(t, a).includes(u)
+  );
+}
+function T(l) {
+  const {
+    modelValue: t,
+    defaultValue: u,
+    autoOpen: a,
+    autoOpenSelected: v,
+    subMenuKeys: s,
+    selectedKeys: c,
+    menuData: n,
+    accordion: o
+  } = M(l), K = x(
+    g(
+      h(t.value) ? h(u.value) ? [] : u.value : t.value,
+      o.value,
+      n.value
+    )
+  ), d = (e) => {
+    K.value = g(e, o.value, n.value);
+  };
+  S(t, () => {
+    h(t.value) && d([]);
+  }), S(u, (e) => {
+    h(t.value) && !h(e) && d(e);
+  });
+  let _ = [];
+  y(() => {
+    _ = [...s.value];
+    let e = [];
+    if (a.value && (e = o.value ? s.value.slice(0, 1) : [...s.value]), v.value) {
+      const f = c.value.map(
+        (r) => m(n.value, r)
+      );
+      f.length && (!a.value || o.value) && (e = o.value ? f[0] : [...new Set([].concat(...f))]);
+    }
+    e.length && d(e);
+  });
+  let w = !1;
+  S(s, (e, f = []) => {
+    if (w || !E(e, _)) {
+      const r = i.value.filter(
+        (O) => e.includes(O)
+      );
+      if (a.value) {
+        const O = e.filter((p) => !f.includes(p));
+        r.push(...O);
+      }
+      d(r);
+    }
+    w = !0;
+  });
+  const i = A(
+    () => g(
+      h(t.value) ? K.value : t.value,
+      o.value,
+      n.value
+    )
+  );
+  return {
+    openKeys: i,
+    localOpenKeys: K,
+    setOpenKeys: d,
+    open(e, f) {
+      let r = [];
+      if (f === 1 && i.value.indexOf(e) > -1) {
+        const O = i.value.filter(
+          (p) => p === e || m(n.value, p).includes(e)
+        );
+        r = [e, ...O.filter((p) => p !== e)];
+      } else i.value.indexOf(e) > -1 ? r = P(i.value, n.value, e) : o.value ? r = g(
+        i.value.concat(m(n.value, e), [e]),
+        !0,
+        n.value
+      ) : r = i.value.concat([e]);
+      return d(r), r;
+    }
+  };
+}
+export {
+  T as default
+};

package/dist/composables/menu-hooks/use-menu.js

@@ -0,0 +1,19 @@
+import { getCurrentInstance as a, computed as u, unref as d } from "vue";
+const o = /* @__PURE__ */ (() => {
+  let e = 0;
+  return (r = "") => (e += 1, `${r}${e}`);
+})(), n = (e) => {
+  if (!(e == null || e === ""))
+    return String(e);
+};
+function f(e) {
+  const r = a(), t = (e == null ? void 0 : e.componentName) || "MenuNode", c = u(() => n(d(e == null ? void 0 : e.menuKey))), l = u(() => n(r == null ? void 0 : r.vnode.key)), m = u(
+    () => `__x_menu_auto_${t}_${(r == null ? void 0 : r.uid) ?? o("local_")}`
+  );
+  return {
+    key: u(() => c.value || l.value || m.value)
+  };
+}
+export {
+  f as default
+};

package/dist/composables/popup.js

@@ -0,0 +1,177 @@
+import { ref as C, watch as x, onBeforeUnmount as W, nextTick as z } from "vue";
+function m(e, t) {
+  return e === void 0 ? t : typeof e == "object" && e !== null && "value" in e ? e.value : e;
+}
+function D(e) {
+  const [t, l] = e.split("-");
+  return {
+    side: t,
+    align: l ?? "center"
+  };
+}
+function j(e) {
+  switch (e) {
+    case "top":
+      return "bottom";
+    case "bottom":
+      return "top";
+    case "left":
+      return "right";
+    default:
+      return "left";
+  }
+}
+function b(e, t, l) {
+  return l < t ? t : Math.min(Math.max(e, t), l);
+}
+function $(e, t, l, n, r) {
+  switch (e) {
+    case "top":
+      return t.top >= l.height + n + r;
+    case "bottom":
+      return window.innerHeight - t.bottom >= l.height + n + r;
+    case "left":
+      return t.left >= l.width + n + r;
+    case "right":
+      return window.innerWidth - t.right >= l.width + n + r;
+  }
+}
+function k(e, t) {
+  return e ? Array.isArray(e) ? e : e[t] ?? [0, 0] : [0, 0];
+}
+function I(e) {
+  return typeof DOMRect < "u" ? new DOMRect(e.x, e.y, 0, 0) : {
+    x: e.x,
+    y: e.y,
+    width: 0,
+    height: 0,
+    top: e.y,
+    bottom: e.y,
+    left: e.x,
+    right: e.x,
+    toJSON: () => ({})
+  };
+}
+function B(e) {
+  const t = e.querySelector('[data-trigger-anchor="true"]');
+  if (t)
+    return t;
+  const l = e.getBoundingClientRect();
+  return (l.width === 0 || l.height === 0) && e.firstElementChild instanceof HTMLElement ? e.firstElementChild : e;
+}
+function J(e, t, l, n, r, v, d, o) {
+  const s = D(l), A = j(s.side);
+  let h = s.side;
+  d && !v && !$(s.side, e, t, n, r) && $(A, e, t, n, r) && (h = A);
+  let c = 0, u = 0;
+  h === "top" || h === "bottom" ? (s.align === "start" ? u = e.left : s.align === "end" ? u = e.right - t.width : u = e.left + e.width / 2 - t.width / 2, c = h === "top" ? e.top - t.height - n : e.bottom + n, d && !v && (u = b(u, r, window.innerWidth - t.width - r), c = b(c, r, window.innerHeight - t.height - r))) : (s.align === "start" ? c = e.top : s.align === "end" ? c = e.bottom - t.height : c = e.top + e.height / 2 - t.height / 2, u = h === "left" ? e.left - t.width - n : e.right + n, d && !v && (c = b(c, r, window.innerHeight - t.height - r), u = b(u, r, window.innerWidth - t.width - r)));
+  const y = `${h}${s.align === "center" ? "" : `-${s.align}`}`, [E, w] = k(o, y);
+  return {
+    top: c + w,
+    left: u + E,
+    placement: y
+  };
+}
+function V(e, t, l, n) {
+  const r = C({}), v = C(n.placement.value);
+  let d = 0, o = null;
+  const s = () => m(n.offset, 8), A = () => m(n.viewportPadding, 8), h = () => m(n.allowOverflow, !1), c = () => {
+    var i;
+    return ((i = n.autoFitPosition) == null ? void 0 : i.value) ?? !0;
+  }, u = () => {
+    var i;
+    return ((i = n.alignPoint) == null ? void 0 : i.value) ?? !1;
+  }, y = () => {
+    var i;
+    return ((i = n.updateAtScroll) == null ? void 0 : i.value) ?? !0;
+  }, E = () => {
+    var i;
+    return ((i = n.autoFixPosition) == null ? void 0 : i.value) ?? !0;
+  }, w = async () => {
+    var S, M;
+    if (!l.value) return;
+    await z();
+    const i = e.value, f = t.value;
+    if (!i || !f) return;
+    const U = u(), O = (S = n.point) == null ? void 0 : S.value, q = B(i), T = U && O ? I(O) : q.getBoundingClientRect(), F = J(
+      T,
+      f.getBoundingClientRect(),
+      n.placement.value,
+      s(),
+      A(),
+      h(),
+      c(),
+      (M = n.translate) == null ? void 0 : M.value
+    );
+    v.value = F.placement, r.value = {
+      position: "fixed",
+      top: `${F.top}px`,
+      left: `${F.left}px`
+    };
+  }, a = () => {
+    cancelAnimationFrame(d), d = requestAnimationFrame(() => {
+      w();
+    });
+  }, H = () => {
+    cancelAnimationFrame(d), d = requestAnimationFrame(() => {
+      w();
+    });
+  }, P = () => {
+    typeof ResizeObserver > "u" || (o == null || o.disconnect(), o = new ResizeObserver(() => {
+      a();
+    }), E() && e.value && o.observe(B(e.value)), t.value && o.observe(t.value));
+  }, L = () => {
+    o == null || o.disconnect(), o = null;
+  };
+  return x(
+    () => {
+      var i, f;
+      return [l.value, n.placement.value, (i = n.updateAtScroll) == null ? void 0 : i.value, (f = n.autoFixPosition) == null ? void 0 : f.value];
+    },
+    ([i]) => {
+      window.removeEventListener("resize", a), window.removeEventListener("scroll", a, !0), window.removeEventListener("scroll", a, !1), L(), i && (H(), P(), window.addEventListener("resize", a), y() && window.addEventListener("scroll", a, !0));
+    },
+    { immediate: !0 }
+  ), x([e, t], () => {
+    l.value && (P(), a());
+  }), n.point && x(
+    n.point,
+    () => {
+      l.value && u() && a();
+    },
+    { deep: !0 }
+  ), x(
+    () => {
+      var i;
+      return (i = n.translate) == null ? void 0 : i.value;
+    },
+    () => {
+      l.value && a();
+    },
+    { deep: !0 }
+  ), x(
+    () => {
+      var i, f;
+      return [
+        m(n.offset, 8),
+        m(n.viewportPadding, 8),
+        m(n.allowOverflow, !1),
+        ((i = n.autoFitPosition) == null ? void 0 : i.value) ?? !0,
+        ((f = n.alignPoint) == null ? void 0 : f.value) ?? !1
+      ];
+    },
+    () => {
+      l.value && a();
+    },
+    { deep: !0 }
+  ), W(() => {
+    cancelAnimationFrame(d), window.removeEventListener("resize", a), window.removeEventListener("scroll", a, !0), window.removeEventListener("scroll", a, !1), L();
+  }), {
+    popupStyle: r,
+    resolvedPlacement: v,
+    updatePosition: w
+  };
+}
+export {
+  V as usePopupPosition
+};

package/dist/composables/scrollbar-visibility.d.ts

@@ -0,0 +1 @@
+export declare function initScrollbarVisibility(): void;

package/dist/composables/scrollbar-visibility.js

@@ -0,0 +1,96 @@
+const i = "x-scrollbar--scrolling", c = "x-native-scrollbar-container", d = "x-scrollbar-container";
+const a = "__xScrollbarVisibilityState__", f = [
+  "x-input",
+  "x-badge",
+  "x-avatar",
+  "x-image",
+  "x-cropper",
+  "x-switch",
+  "x-slider",
+  "x-page-header",
+  "x-icon",
+  "x-button",
+  "x-link",
+  "x-tag",
+  "x-radio",
+  "x-checkbox",
+  "x-rate",
+  "x-input-tag",
+  "x-cascader"
+];
+function S(t) {
+  return f.some((n) => t === n || t.startsWith(`${n}-`) || t.startsWith(`${n}__`));
+}
+function L(t) {
+  for (const n of t.classList)
+    if (n.startsWith("x-") && !S(n))
+      return !0;
+  return !1;
+}
+function l(t) {
+  return t === "auto" || t === "scroll" || t === "overlay";
+}
+function _(t) {
+  const n = window.getComputedStyle(t), e = l(n.overflowY) && t.scrollHeight - t.clientHeight > 1;
+  return l(n.overflowX) && t.scrollWidth - t.clientWidth > 1 || e;
+}
+function u(t) {
+  return t.classList.contains(d) || !L(t) || !_(t) ? (t.classList.remove(c), !1) : (t.classList.add(c), !0);
+}
+function b() {
+  const t = document.querySelectorAll('[class^="x-"], [class*=" x-"]');
+  for (const n of t)
+    u(n);
+}
+function s(t) {
+  t.scanRafId === null && (t.scanRafId = window.requestAnimationFrame(() => {
+    t.scanRafId = null, b();
+  }));
+}
+function x(t) {
+  let n = t instanceof HTMLElement ? t : null;
+  for (; n && n !== document.body && n !== document.documentElement; ) {
+    if (u(n))
+      return n;
+    n = n.parentElement;
+  }
+  return null;
+}
+function E(t, n) {
+  t.classList.add(i);
+  const e = n.get(t);
+  e && window.clearTimeout(e);
+  const r = window.setTimeout(() => {
+    t.classList.remove(i), n.delete(t);
+  }, 520);
+  n.set(t, r);
+}
+function R() {
+  var e;
+  if (typeof window > "u" || typeof document > "u")
+    return;
+  const t = globalThis;
+  if ((e = t[a]) != null && e.initialized)
+    return;
+  const n = {
+    initialized: !0,
+    timers: /* @__PURE__ */ new WeakMap(),
+    scanRafId: null
+  };
+  t[a] = n, s(n), window.addEventListener("resize", () => {
+    s(n);
+  }, { passive: !0 }), document.body && new MutationObserver(() => {
+    s(n);
+  }).observe(document.body, {
+    subtree: !0,
+    childList: !0,
+    attributes: !0,
+    attributeFilter: ["class", "style"]
+  }), document.addEventListener("scroll", (r) => {
+    const o = x(r.target);
+    o && E(o, n.timers);
+  }, { capture: !0, passive: !0 });
+}
+export {
+  R as initScrollbarVisibility
+};

package/dist/composables/steps.d.ts

@@ -8,6 +8,7 @@ export interface XStepData {
     status: () => XStepStatus;
 }
 export interface XStepsContext {
+    orderVersion: ComputedRef<number>;
     type: ComputedRef<XStepsType>;
     current: ComputedRef<number>;
     direction: ComputedRef<'horizontal' | 'vertical'>;

package/dist/composables/steps.js

@@ -0,0 +1,9 @@
+import { inject as t } from "vue";
+const e = Symbol("x-steps");
+function o() {
+  return t(e, null);
+}
+export {
+  o as useXSteps,
+  e as xStepsKey
+};

package/dist/composables/tabs.d.ts

@@ -1,18 +1,29 @@
-import { ComputedRef, InjectionKey } from 'vue';
+import { ComputedRef, InjectionKey, Slots } from 'vue';
+export type XTabsPosition = 'left' | 'right' | 'top' | 'bottom';
+export type XTabsDirection = 'horizontal' | 'vertical';
+export type XTabsType = 'line' | 'card' | 'card-gutter' | 'text' | 'rounded' | 'capsule';
+export type XTabsSize = 'mini' | 'small' | 'medium' | 'large';
+export type XTabTriggerEvent = 'click' | 'hover';
+export type XTabScrollPosition = 'start' | 'end' | 'center' | 'auto' | number;
 export interface XTabPaneRecord {
-    key: string;
-    title: string;
+    uid: number;
+    key: string | number;
+    title?: string;
     disabled?: boolean;
     closable?: boolean;
     destroyOnHide?: boolean;
+    slots: Slots;
 }
 export interface XTabsContext {
-    activeKey: ComputedRef<string>;
+    activeKey: ComputedRef<string | number | undefined>;
+    lazyLoad: ComputedRef<boolean>;
     destroyOnHide: ComputedRef<boolean>;
-    editable: ComputedRef<boolean>;
+    trigger: ComputedRef<XTabTriggerEvent>;
     register: (pane: XTabPaneRecord) => void;
-    unregister: (key: string) => void;
-    select: (key: string) => void;
+    unregister: (uid: number) => void;
 }
 export declare const xTabsKey: InjectionKey<XTabsContext>;
-export declare function resolveTabsClassName(type: string, size: string, position: string): ComputedRef<string[]>;
+export declare function resolveTabsClassName(type: XTabsType, size: XTabsSize, direction: XTabsDirection, position: XTabsPosition, justify: boolean): ComputedRef<(string | {
+    'x-tabs--justify': boolean;
+})[]>;
+export declare function updateTabsScrollOffset(parentNode: HTMLElement, direction: XTabsDirection): void;

package/dist/composables/tabs.js

@@ -0,0 +1,10 @@
+import "vue";
+const f = Symbol("x-tabs");
+function r(l, o) {
+  const { scrollTop: s, scrollLeft: t } = l;
+  o === "horizontal" && t && l.scrollTo({ left: -1 * t }), o === "vertical" && s && l.scrollTo({ top: -1 * s });
+}
+export {
+  r as updateTabsScrollOffset,
+  f as xTabsKey
+};

package/dist/composables/theme-context.d.ts

@@ -0,0 +1,9 @@
+interface DarkThemeContextOptions {
+    includeDescendants?: boolean;
+    checkDocumentRoot?: boolean;
+}
+export type XThemeMode = 'light' | 'dark';
+export declare function hasDarkThemeContext(element: HTMLElement | null, options?: DarkThemeContextOptions): boolean;
+export declare function resolveDarkThemeEnabled(theme?: XThemeMode, contextElement?: HTMLElement | null): boolean;
+export declare function syncThemeContextToElement(element: HTMLElement, theme?: XThemeMode, contextElement?: HTMLElement | null): void;
+export {};

package/dist/composables/theme-context.js

@@ -0,0 +1,24 @@
+function a(e) {
+  return e ? e.getAttribute("theme") === "dark" || e.getAttribute("data-theme") === "dark" || e.classList.contains("x-theme-dark") : !1;
+}
+function u(e, t = {}) {
+  let r = e;
+  for (; r; ) {
+    if (a(r))
+      return !0;
+    r = r.parentElement;
+  }
+  return t.includeDescendants && e && e.querySelector('[theme="dark"], [data-theme="dark"], .x-theme-dark') ? !0 : t.checkDocumentRoot === !1 || typeof document > "u" ? !1 : a(document.documentElement);
+}
+function c(e, t) {
+  return e === "dark" ? !0 : e === "light" ? !1 : t && u(t, { checkDocumentRoot: !1 }) ? !0 : u(null);
+}
+function i(e, t, r) {
+  const n = c(t, r);
+  e.classList.toggle("x-theme-dark", n), n ? e.setAttribute("theme", "dark") : e.removeAttribute("theme");
+}
+export {
+  u as hasDarkThemeContext,
+  c as resolveDarkThemeEnabled,
+  i as syncThemeContextToElement
+};

package/dist/composables/theme.js

@@ -0,0 +1,53 @@
+import { ref as u, watch as c } from "vue";
+const r = "rhino-design-theme", n = u("light"), t = typeof window < "u" ? window.matchMedia("(prefers-color-scheme: dark)") : null;
+function a(e) {
+  if (typeof document > "u") return;
+  const o = document.documentElement;
+  o.removeAttribute("data-theme"), (e === "dark" || e === "auto" && (t != null && t.matches)) && o.setAttribute("data-theme", "dark");
+}
+function l(e) {
+  typeof localStorage < "u" && localStorage.setItem(r, e);
+}
+function f() {
+  if (typeof localStorage < "u") {
+    const e = localStorage.getItem(r);
+    if (e && ["light", "dark", "auto"].includes(e))
+      return e;
+  }
+  return "light";
+}
+function h() {
+  n.value === "auto" && a("auto");
+}
+function m() {
+  const e = f();
+  n.value = e, a(e), t == null || t.addEventListener("change", h);
+}
+function i(e) {
+  n.value = e, a(e), l(e);
+}
+function d() {
+  const e = n.value === "light" ? "dark" : "light";
+  i(e);
+}
+function g() {
+  return n.value;
+}
+function v() {
+  const e = u(n.value);
+  return c(n, (o) => {
+    e.value = o;
+  }), {
+    theme: e,
+    setTheme: i,
+    toggleTheme: d,
+    isDark: () => !!(e.value === "dark" || e.value === "auto" && (t != null && t.matches))
+  };
+}
+export {
+  g as getTheme,
+  m as initTheme,
+  i as setTheme,
+  d as toggleTheme,
+  v as useTheme
+};

package/dist/composables/useMergeState.js

@@ -0,0 +1,27 @@
+import { ref as o, watch as i } from "vue";
+function s(l, v) {
+  const {
+    value: a,
+    defaultValue: e,
+    syncDefaultValue: f = !1
+  } = v, t = o(
+    (e == null ? void 0 : e.value) !== void 0 ? e.value : l
+  ), n = (u) => {
+    t.value = u;
+  };
+  return a && i(
+    () => a.value,
+    (u) => {
+      u !== void 0 && (t.value = u);
+    },
+    { immediate: !0 }
+  ), f && e && i(
+    () => e.value,
+    (u) => {
+      (a == null ? void 0 : a.value) === void 0 && (t.value = u);
+    }
+  ), [t, n];
+}
+export {
+  s as useMergeState
+};