@nmorph/nmorph-ui-kit 2.2.12 → 2.2.13

package/dist/components/navigation/nmorph-dropdown/NmorphDropdown.vue2.js

@@ -1,13 +1,14 @@
 import './NmorphDropdown.css';
-import { defineComponent as a, ref as c, computed as l } from "vue";
-import { useModifiers as y } from "../../../utils/create-modifiers.js";
-import { usePlacement as h } from "../../../hooks/use-placement.js";
-import O from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
-const w = /* @__PURE__ */ a({
+import { defineComponent as w, ref as b, toRef as r, computed as i, watch as v } from "vue";
+import { useModifiers as x } from "../../../utils/create-modifiers.js";
+import { usePlacement as O } from "../../../hooks/use-placement.js";
+import q from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
+const g = /* @__PURE__ */ w({
   __name: "NmorphDropdown",
   props: {
     open: { type: Boolean, required: !0 },
     relativeElement: { type: null, required: !0 },
+    placement: { type: null, required: !1, default: "bottom" },
     width: { type: [Number, String], required: !1, default: 160 },
     minWidth: { type: [Number, String], required: !1 },
     maxWidth: { type: [Number, String], required: !1 },
@@ -17,26 +18,44 @@ const w = /* @__PURE__ */ a({
     zIndex: { type: Number, required: !1 }
   },
   emits: ["on-outside-click"],
-  setup(s, { expose: d, emit: f }) {
-    d();
-    const e = s, r = f, o = c(null), { placementCoords: m } = h({
-      initialPlacement: "bottom",
-      contentDOMElement: o,
-      relativeElement: e.relativeElement,
-      yOffset: e.yOffset,
-      xOffset: e.xOffset
-    }), u = l(
-      () => y({
+  setup(u, { expose: f, emit: c }) {
+    f();
+    const e = u, l = c, d = b(null), { placementCoords: n, placementReady: p, adjustPlacement: m } = O({
+      initialPlacement: r(e, "placement"),
+      contentDOMElement: d,
+      relativeElement: r(e, "relativeElement"),
+      yOffset: r(e, "yOffset"),
+      xOffset: r(e, "xOffset"),
+      enabled: r(e, "open")
+    }), h = i(
+      () => x({
         "nmorph-dropdown": [`${!e.open && "closed"}`]
       })
-    ), i = (t) => typeof t == "number" ? `${t}px` : t, p = l(() => e.fillWidth ? `${e.relativeElement?.clientWidth}px` : i(e.width)), n = { props: e, emit: r, dropdownDOMRef: o, placementCoords: m, modifiers: u, getCssSize: i, width: p, outsideClickHandler: () => {
-      r("on-outside-click");
+    ), o = (t) => typeof t == "number" ? `${t}px` : t, s = i(
+      () => e.fillWidth && e.relativeElement ? `${e.relativeElement.clientWidth}px` : o(e.width)
+    ), y = i(() => ({
+      "--nmorph-dropdown-width": s.value,
+      "--nmorph-dropdown-min-width": o(e.minWidth) || "auto",
+      "--nmorph-dropdown-max-width": o(e.maxWidth) || "none",
+      left: n.value.x,
+      top: n.value.y,
+      visibility: e.open && p.value ? "visible" : "hidden"
+    }));
+    v(
+      () => e.open,
+      (t) => {
+        t && m();
+      },
+      { flush: "post" }
+    );
+    const a = { props: e, emit: l, dropdownDOMRef: d, placementCoords: n, placementReady: p, adjustPlacement: m, modifiers: h, getCssSize: o, width: s, dropdownStyle: y, outsideClickHandler: () => {
+      l("on-outside-click");
     }, get NmorphOverlay() {
-      return O;
+      return q;
     } };
-    return Object.defineProperty(n, "__isScriptSetup", { enumerable: !1, value: !0 }), n;
+    return Object.defineProperty(a, "__isScriptSetup", { enumerable: !1, value: !0 }), a;
   }
 });
 export {
-  w as default
+  g as default
 };

package/dist/components/others/nmorph-overlay/NmorphOverlay.vue.js

@@ -1,30 +1,35 @@
 import './NmorphOverlay.css';
-import t from "./NmorphOverlay.vue2.js";
-import { openBlock as n, createElementBlock as i, withModifiers as e, normalizeStyle as s, normalizeClass as m, createElementVNode as a, renderSlot as p } from "vue";
+import s from "./NmorphOverlay.vue2.js";
+import { openBlock as i, createBlock as n, Teleport as p, createElementVNode as e, withModifiers as l, normalizeStyle as a, normalizeClass as d, renderSlot as m } from "vue";
 /* empty css                   */
 import c from "../../../_virtual/_plugin-vue_export-helper.js";
-function d(l, r, f, o, _, v) {
-  return n(), i(
-    "div",
-    {
-      class: m(o.modifiers),
-      style: s({ "--nmorph-overlay-z-index": o.zIndex }),
-      onClick: e(o.clickHandler, ["stop"])
-    },
-    [
-      a("div", {
-        class: "nmorph-overlay__slot",
-        onClick: r[0] || (r[0] = e(() => {
-        }, ["stop"]))
-      }, [
-        p(l.$slots, "default")
-      ])
-    ],
-    6
-    /* CLASS, STYLE */
-  );
+function f(t, r, _, o, h, v) {
+  return i(), n(p, {
+    to: o.props.teleportTo,
+    disabled: o.props.disabledTeleport || !o.props.show
+  }, [
+    e(
+      "div",
+      {
+        class: d(o.modifiers),
+        style: a({ "--nmorph-overlay-z-index": o.zIndex }),
+        onClick: l(o.clickHandler, ["stop"])
+      },
+      [
+        e("div", {
+          class: "nmorph-overlay__slot",
+          onClick: r[0] || (r[0] = l(() => {
+          }, ["stop"]))
+        }, [
+          m(t.$slots, "default")
+        ])
+      ],
+      6
+      /* CLASS, STYLE */
+    )
+  ], 8, ["to", "disabled"]);
 }
-const x = /* @__PURE__ */ c(t, [["render", d], ["__file", "/builds/ketjo/nmorph/library/src/components/others/nmorph-overlay/NmorphOverlay.vue"]]);
+const z = /* @__PURE__ */ c(s, [["render", f], ["__file", "/builds/ketjo/nmorph/library/src/components/others/nmorph-overlay/NmorphOverlay.vue"]]);
 export {
-  x as default
+  z as default
 };

package/dist/components/others/nmorph-overlay/NmorphOverlay.vue2.js

@@ -1,30 +1,32 @@
 import './NmorphOverlay.css';
-import { defineComponent as d, computed as t } from "vue";
-import { useModifiers as m } from "../../../utils/create-modifiers.js";
-import { useZIndex as c } from "../../../hooks/use-z-index.js";
-const h = /* @__PURE__ */ d({
+import { defineComponent as d, computed as o } from "vue";
+import { useModifiers as u } from "../../../utils/create-modifiers.js";
+import { useZIndex as f } from "../../../hooks/use-z-index.js";
+const y = /* @__PURE__ */ d({
   __name: "NmorphOverlay",
   props: {
     show: { type: Boolean, required: !0 },
     transparent: { type: Boolean, required: !1, default: !1 },
-    zIndex: { type: Number, required: !1 }
+    zIndex: { type: Number, required: !1 },
+    teleportTo: { type: null, required: !1, default: "body" },
+    disabledTeleport: { type: Boolean, required: !1, default: !1 }
   },
   emits: ["on-outside-click"],
-  setup(n, { expose: s, emit: i }) {
-    s();
-    const e = n, p = c(
-      t(() => e.show),
+  setup(s, { expose: n, emit: a }) {
+    n();
+    const e = s, l = f(
+      o(() => e.show),
       () => e.zIndex
-    ), a = t(
-      () => m({
+    ), p = o(
+      () => u({
         "nmorph-overlay": [`${e.show && "show"}`, `${e.transparent && "transparent"}`]
       })
-    ), u = () => {
+    ), i = () => {
       r("on-outside-click");
-    }, r = i, o = { props: e, zIndex: p, modifiers: a, clickHandler: u, emit: r };
-    return Object.defineProperty(o, "__isScriptSetup", { enumerable: !1, value: !0 }), o;
+    }, r = a, t = { props: e, zIndex: l, modifiers: p, clickHandler: i, emit: r };
+    return Object.defineProperty(t, "__isScriptSetup", { enumerable: !1, value: !0 }), t;
   }
 });
 export {
-  h as default
+  y as default
 };

package/dist/hooks/use-common-styles.js

@@ -1,18 +1,18 @@
-import { nmorphCombined as p, nmorphInset as o, nmorphOutset as e, title1 as s, title2 as d, title3 as l, title4 as m, body1 as n, body2 as c, body3 as i, body4 as u } from "../utils/theme-style.js";
+import { nmorphCombined as p, nmorphInset as t, nmorphOutset as e, title1 as s, title2 as d, title3 as m, title4 as l, body1 as n, body2 as c, body3 as i, body4 as u } from "../utils/theme-style.js";
 const b = {
   "nmorph-body-4": u,
   "nmorph-body-3": i,
   "nmorph-body-2": c,
   "nmorph-body-1": n,
-  "nmorph-title-4": m,
-  "nmorph-title-3": l,
+  "nmorph-title-4": l,
+  "nmorph-title-3": m,
   "nmorph-title-2": d,
   "nmorph-title-1": s,
   "nmorph--shadow-outset": e,
-  "nmorph--shadow-inset": o,
+  "nmorph--shadow-inset": t,
   "nmorph--shadow-combined": p
-}, g = () => {
-  let t = `
+}, v = () => {
+  let r = `
     :root {
       --font-size-tiny: 10px;
       --font-size-extra-small: 12px;
@@ -379,7 +379,7 @@ const b = {
       text-indent: var(--nmorph-text-input-indentation);
       border: none;
       border-radius: var(--default-border-radius);
-      ${o()}
+      ${t()}
     }
 
     .nmorph-text-input--with-action input {
@@ -512,7 +512,7 @@ const b = {
 
     .nmorph-scroll::-webkit-scrollbar-track {
       border-radius: var(--border-radius-40);
-      ${o()}
+      ${t()}
     }
 
     .nmorph-scroll::-webkit-scrollbar-thumb {
@@ -525,14 +525,18 @@ const b = {
     }
   `;
   for (const [a, h] of Object.entries(b))
-    t += `
+    r += `
 .${a} {
   ${h()}
 }
 `;
-  const r = document.createElement("style");
-  r.innerHTML = t, document.head.appendChild(r);
+  return r;
+}, x = () => {
+  if (typeof document > "u" || document.getElementById("nmorph-common-styles")) return;
+  const o = document.createElement("style");
+  o.id = "nmorph-common-styles", o.innerHTML = v(), document.head.appendChild(o);
 };
 export {
-  g as useCommonStyles
+  v as getCommonStyles,
+  x as useCommonStyles
 };

package/dist/hooks/use-placement.js

@@ -1,57 +1,89 @@
-import { ref as p, inject as R, watch as S, onMounted as W, onUnmounted as k, nextTick as E } from "vue";
-const T = (b) => {
-  const { initialPlacement: y, relativeElement: s, contentDOMElement: c, yOffset: u = 0, xOffset: v = 0 } = b, e = p(y), r = p({ x: "0px", y: "0px" }), C = R("nmorph"), a = p(null);
-  S(
-    () => C.browser,
+import { ref as b, unref as n, inject as T, watch as F, onMounted as U, onUnmounted as X, nextTick as S } from "vue";
+const G = (j) => {
+  const { initialPlacement: g, relativeElement: y, contentDOMElement: u, yOffset: L = 0, xOffset: O = 0, enabled: h } = j, R = b(n(g)), C = b({ x: "0px", y: "0px" }), v = b(!1), k = T("nmorph"), P = { passive: !0, capture: !0 };
+  let w = null;
+  F(
+    () => k?.browser,
     () => {
-      n();
+      o();
     },
     { deep: !0 }
-  ), W(() => {
-    n(), L(), $(), h.observe(document.body, {
-      childList: !0,
-      subtree: !0
-    }), f();
-  }), k(() => {
-    O(), h.disconnect();
-  });
-  const f = () => {
-    E(() => {
-      c.value && n();
+  ), U(() => {
+    o(), V(), window.addEventListener("resize", o, { passive: !0 }), w = new MutationObserver(() => {
+      M();
+    }), w.observe(document.body, { childList: !0, subtree: !0 }), M();
+  }), X(() => {
+    W(), window.removeEventListener("resize", o), w?.disconnect();
+  }), F(
+    () => [n(g), n(y), n(O), n(L), n(h)],
+    () => {
+      o();
+    },
+    { flush: "post" }
+  );
+  const M = () => {
+    S(() => {
+      u.value && o();
     });
-  }, h = new MutationObserver(() => {
-    f();
-  }), L = () => {
-    let t = c.value;
-    for (; t; ) {
-      const o = window.getComputedStyle(t);
-      if (o.overflowY === "auto" || o.overflowY === "scroll") {
-        a.value = t;
-        break;
-      }
-      t = t.parentElement;
-    }
-  }, $ = () => {
-    a.value ? a.value.addEventListener("scroll", n, { passive: !0 }) : window.addEventListener("scroll", n, { passive: !0 });
-  }, O = () => {
-    a.value ? a.value.removeEventListener("scroll", n) : window.removeEventListener("scroll", n);
-  }, n = () => {
-    E(() => {
-      if (!c.value || !s) {
-        console.warn("There is no relative element or content DOM element");
+  }, A = () => h === void 0 || n(h) !== !1, q = (e) => {
+    const [s, t] = e.split("-");
+    return {
+      side: s,
+      align: t || "start",
+      hasAlign: !!t
+    };
+  }, z = (e, s, t) => t ? `${e}-${s}` : e, B = () => n(y), H = (e, s, t, l, d, r, i) => e === "top" && t - i < 0 ? "bottom" : e === "bottom" && t + d + i > window.innerHeight ? "top" : e === "left" && s - r < 0 ? "right" : e === "right" && s + l + r > window.innerWidth ? "left" : e, V = () => {
+    window.addEventListener("scroll", o, P);
+  }, W = () => {
+    window.removeEventListener("scroll", o, P);
+  }, o = () => {
+    S(() => {
+      if (typeof window > "u") return;
+      if (!A()) {
+        v.value = !1;
         return;
       }
-      const t = c.value.getBoundingClientRect(), o = t.width, d = t.height, w = "value" in s ? s.value : s;
-      if (!w) {
-        console.warn("Relative element is not an HTMLElement");
+      const e = B();
+      if (!u.value || !e) {
+        v.value = !1;
         return;
       }
-      const m = w.getBoundingClientRect(), { x: l, y: i } = m, x = m.width, g = m.height, H = window.innerWidth, M = window.innerHeight;
-      e.value === "top" && i - d < 0 && (e.value = "bottom"), e.value === "bottom" && i + g + d > M && (e.value = "top"), e.value === "left" && l - o < 0 && (e.value = "right"), e.value === "right" && l + x + o > H && (e.value = "left"), e.value === "top" && (r.value = { x: `${l + v}px`, y: `${i - d + u}px` }), e.value === "bottom" && (r.value = { x: `${l + v}px`, y: `${i + g + u}px` }), e.value === "right" && (r.value = { x: `${l + x + v}px`, y: `${i + u}px` }), e.value === "left" && (r.value = { x: `${l - o + v}px`, y: `${i + u}px` });
+      const s = u.value.getBoundingClientRect(), t = s.width, l = s.height, d = e.getBoundingClientRect(), { x: r, y: i } = d, m = d.width, p = d.height, D = n(O) || 0, N = n(L) || 0, f = q(n(g)), a = H(
+        f.side,
+        r,
+        i,
+        m,
+        p,
+        t,
+        l
+      );
+      let E = r, x = i;
+      if (a === "top" || a === "bottom") {
+        const c = {
+          start: r,
+          center: r + m / 2 - t / 2,
+          end: r + m - t
+        };
+        E = c[f.align] ?? c.start, x = a === "top" ? i - l : i + p;
+      }
+      if (a === "left" || a === "right") {
+        const c = {
+          start: i,
+          center: i + p / 2 - l / 2,
+          end: i + p - l
+        };
+        E = a === "left" ? r - t : r + m, x = c[f.align] ?? c.start;
+      }
+      R.value = z(a, f.align, f.hasAlign), C.value = { x: `${E + D}px`, y: `${x + N}px` }, v.value = !0, typeof requestAnimationFrame == "function" && requestAnimationFrame(() => {
+        const c = B();
+        if (!u.value || !c || !A()) return;
+        const $ = u.value.getBoundingClientRect();
+        ($.width !== t || $.height !== l) && o();
+      });
     });
   };
-  return { placement: e, placementCoords: r };
+  return { placement: R, placementCoords: C, placementReady: v, adjustPlacement: o };
 };
 export {
-  T as usePlacement
+  G as usePlacement
 };

package/dist/hooks/use-virtual-list.js

@@ -0,0 +1,46 @@
+import { ref as d, computed as t, onMounted as I, nextTick as p, onUnmounted as z, watch as L } from "vue";
+const y = (l, v) => {
+  const c = d(null), s = d(0), h = d(0), n = t(() => v.enabled?.value ?? !0), i = t(() => Math.max(v.overscan?.value ?? 0, 0)), a = t(() => Math.max(v.itemHeight.value, 1)), f = t(() => n.value ? l.value.length * a.value : 0), u = () => {
+    const e = c.value;
+    e && (s.value = e.scrollTop, h.value = e.clientHeight);
+  }, w = () => {
+    u();
+  }, r = t(() => n.value ? Math.max(Math.floor(s.value / a.value) - i.value, 0) : 0), m = t(() => {
+    if (!n.value) return l.value.length;
+    const e = Math.ceil((s.value + h.value) / a.value) + i.value;
+    return Math.min(Math.max(e, r.value + i.value), l.value.length);
+  }), M = t(() => r.value * a.value), g = t(() => n.value ? l.value.slice(r.value, m.value).map((e, o) => ({
+    item: e,
+    index: r.value + o
+  })) : l.value.map((e, o) => ({ item: e, index: o }))), H = (e) => {
+    const o = c.value;
+    if (!o || !n.value) return;
+    const T = Math.min(Math.max(e, 0) * a.value, f.value);
+    o.scrollTop = T, u();
+  }, x = () => {
+    u();
+  };
+  return I(() => {
+    p(u), typeof window < "u" && window.addEventListener("resize", x);
+  }), z(() => {
+    typeof window < "u" && window.removeEventListener("resize", x);
+  }), L(
+    () => [l.value.length, n.value, a.value],
+    () => {
+      p(u);
+    }
+  ), {
+    containerRef: c,
+    endIndex: m,
+    offsetTop: M,
+    refresh: u,
+    scrollHandler: w,
+    scrollToIndex: H,
+    startIndex: r,
+    totalHeight: f,
+    virtualItems: g
+  };
+};
+export {
+  y as useVirtualList
+};

package/dist/index.es.js

@@ -331,15 +331,16 @@ import { default as vh } from "./components/form/nmorph-text-input/NmorphTextInp
 import { default as Gh } from "./components/feedback/nmorph-tooltip/NmorphTooltip.vue.js";
 import { default as Eh } from "./locales/en.js";
 import { formatDateIntl as Hh, getDecadeYears as Vh, getMonthDaysByWeek as qh, getMonthName as zh, hasAnyRangeDateInNextMonth as Zh, hasAnyRangeDateInPrevMonth as Kh, isTodayInMonthRange as Qh, resetTimeToZero as Yh } from "./components/data/nmorph-calendar/utils.js";
-import { getTabContentId as Jh, getTabLabelId as Xh } from "./components/navigation/nmorph-tabs/utils.js";
-import { nmorphLog as $h } from "./outside-utils/index.js";
-import { default as ru } from "./locales/ru.js";
-import { useCalendarTexts as tu } from "./components/data/nmorph-calendar/hooks/use-calendar-texts.js";
-import { useNmorph as pu } from "./outside-hooks/use-nmorph.js";
-import { useNmorphBrowser as fu } from "./outside-hooks/use-nmorph-browser.js";
-import { useNmorphNotification as nu } from "./outside-hooks/use-nmorph-notification.js";
-import { useNmorphTheme as hu } from "./outside-hooks/use-nmorph-theme.js";
-import { default as su } from "./locales/zh.js";
+import { getCommonStyles as Jh } from "./hooks/use-common-styles.js";
+import { getNmorphThemeStyles as _h, useNmorphTheme as $h } from "./outside-hooks/use-nmorph-theme.js";
+import { getTabContentId as ru, getTabLabelId as eu } from "./components/navigation/nmorph-tabs/utils.js";
+import { nmorphLog as au } from "./outside-utils/index.js";
+import { default as mu } from "./locales/ru.js";
+import { useCalendarTexts as lu } from "./components/data/nmorph-calendar/hooks/use-calendar-texts.js";
+import { useNmorph as du } from "./outside-hooks/use-nmorph.js";
+import { useNmorphBrowser as uu } from "./outside-hooks/use-nmorph-browser.js";
+import { useNmorphNotification as cu } from "./outside-hooks/use-nmorph-notification.js";
+import { default as xu } from "./locales/zh.js";
 export {
   a as AvatarShapeType,
   p as Locale,
@@ -693,22 +694,24 @@ export {
   y as NmorphVideoResolution,
   Eh as en,
   Hh as formatDateIntl,
+  Jh as getCommonStyles,
   Vh as getDecadeYears,
   qh as getMonthDaysByWeek,
   zh as getMonthName,
-  Jh as getTabContentId,
-  Xh as getTabLabelId,
+  _h as getNmorphThemeStyles,
+  ru as getTabContentId,
+  eu as getTabLabelId,
   Zh as hasAnyRangeDateInNextMonth,
   Kh as hasAnyRangeDateInPrevMonth,
   Qh as isTodayInMonthRange,
-  $h as nmorphLog,
+  au as nmorphLog,
   Yh as resetTimeToZero,
   k as resolution,
-  ru,
-  tu as useCalendarTexts,
-  pu as useNmorph,
-  fu as useNmorphBrowser,
-  nu as useNmorphNotification,
-  hu as useNmorphTheme,
-  su as zh
+  mu as ru,
+  lu as useCalendarTexts,
+  du as useNmorph,
+  uu as useNmorphBrowser,
+  cu as useNmorphNotification,
+  $h as useNmorphTheme,
+  xu as zh
 };