@nmorph/nmorph-ui-kit 2.2.34 → 2.2.36

package/dist/components/form/nmorph-textarea/NmorphTextarea.vue.js

@@ -0,0 +1,41 @@
+import './NmorphTextarea.css';
+import a from "./NmorphTextarea.vue2.js";
+import { openBlock as n, createElementBlock as t, normalizeStyle as l, normalizeClass as d, createElementVNode as i, mergeProps as m, withKeys as s } from "vue";
+/* empty css                    */
+import p from "../../../_virtual/_plugin-vue_export-helper.js";
+const c = ["id", "name", "autocomplete", "tabindex", "placeholder", "disabled", "value", "rows"];
+function f(x, o, h, e, b, y) {
+  return n(), t(
+    "div",
+    {
+      class: d(e.modifiers),
+      style: l(e.styles)
+    },
+    [
+      i("textarea", m({
+        id: e.id,
+        ref: "textareaDOMRef",
+        name: e.name,
+        autocomplete: e.autocomplete,
+        tabindex: e.tabindex,
+        class: "nmorph-native-input",
+        placeholder: e.props.placeholder,
+        disabled: e.props.disabled,
+        value: e.props.modelValue,
+        rows: e.rows
+      }, e.props.textareaAttrs, {
+        onInput: e.handleInput,
+        onFocus: e.handleFocus,
+        onBlur: e.handleBlur,
+        onKeydown: o[0] || (o[0] = (r) => e.emit("keydown", r)),
+        onKeyup: o[1] || (o[1] = s((r) => e.emit("on-enter"), ["enter"]))
+      }), null, 16, c)
+    ],
+    6
+    /* CLASS, STYLE */
+  );
+}
+const k = /* @__PURE__ */ p(a, [["render", f], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-textarea/NmorphTextarea.vue"]]);
+export {
+  k as default
+};

package/dist/components/form/nmorph-textarea/NmorphTextarea.vue2.js

@@ -0,0 +1,67 @@
+import './NmorphTextarea.css';
+import { defineComponent as F, ref as h, computed as l, watch as B, onMounted as I, nextTick as T } from "vue";
+import { NmorphComponentHeight as $ } from "../../../types/index.js";
+import { useModifiers as O } from "../../../utils/create-modifiers.js";
+import { useFormItemInput as V } from "../nmorph-form/use-form-item-input.js";
+const D = /* @__PURE__ */ F({
+  __name: "NmorphTextarea",
+  props: {
+    placeholder: { type: String, required: !1, default: "" },
+    modelValue: { type: String, required: !1, default: "" },
+    rows: { type: Number, required: !1, default: 3 },
+    minRows: { type: Number, required: !1, default: 2 },
+    maxRows: { type: Number, required: !1, default: void 0 },
+    resize: { type: String, required: !1, default: "vertical" },
+    autoSize: { type: Boolean, required: !1, default: !1 },
+    indentation: { type: String, required: !1, default: "12px" },
+    textareaAttrs: { type: Object, required: !1, default: () => ({}) },
+    id: { type: String, required: !1 },
+    name: { type: String, required: !1 },
+    autocomplete: { type: String, required: !1 },
+    height: { type: null, required: !1, default: "basic" },
+    disabled: { type: Boolean, required: !1, default: !1 },
+    tabindex: { type: Number, required: !1 }
+  },
+  emits: ["update:model-value", "focus", "blur", "on-enter", "keydown"],
+  setup(y, { expose: g, emit: x }) {
+    const e = y, n = x, { id: b, name: w, autocomplete: q, tabindex: v } = V(e), a = h(null), s = h(!1), S = l(
+      () => O({
+        nmorph: [$[e.height], `${s.value && "focused"}`],
+        "nmorph-textarea": [`${e.disabled && "disabled"}`, `${e.autoSize && "auto-size"}`]
+      })
+    ), i = (t) => {
+      const o = window.getComputedStyle(t);
+      return parseFloat(o.paddingTop) + parseFloat(o.paddingBottom);
+    }, r = async () => {
+      if (!e.autoSize) return;
+      await T();
+      const t = a.value;
+      if (!t) return;
+      t.style.height = "auto";
+      const o = window.getComputedStyle(t), N = parseFloat(o.lineHeight) || 20, c = e.maxRows ? e.maxRows * N + i(t) : 1 / 0, C = Math.min(t.scrollHeight, c);
+      t.style.height = `${C}px`, t.style.overflowY = t.scrollHeight > c ? "auto" : "hidden";
+    }, _ = (t) => {
+      const o = t.target;
+      n("update:model-value", o.value), r();
+    }, z = () => {
+      n("focus"), s.value = !0;
+    }, H = () => {
+      n("blur"), s.value = !1;
+    }, u = () => {
+      a.value?.focus();
+    }, d = () => {
+      a.value?.blur();
+    }, p = () => {
+      a.value?.select();
+    };
+    B(() => e.modelValue, r), I(r), g({ textareaDOMRef: a, focus: u, blur: d, select: p, resizeToContent: r });
+    const f = l(() => Math.max(e.minRows, 1)), R = l(() => Math.max(e.rows, f.value)), M = l(() => ({
+      "--nmorph-textarea-resize": e.autoSize ? "none" : e.resize,
+      "--nmorph-textarea-indentation": e.indentation
+    })), m = { props: e, emit: n, id: b, name: w, autocomplete: q, tabindex: v, textareaDOMRef: a, focused: s, modifiers: S, getVerticalPadding: i, resizeToContent: r, handleInput: _, handleFocus: z, handleBlur: H, focus: u, blur: d, select: p, minRows: f, rows: R, styles: M };
+    return Object.defineProperty(m, "__isScriptSetup", { enumerable: !1, value: !0 }), m;
+  }
+});
+export {
+  D as default
+};

package/dist/components/form/nmorph-time-picker/NmorphTimePicker.css

@@ -1 +1 @@
-.nmorph-time-picker{--width: 160px;position:relative;width:var(--width);height:var(--height)}.nmorph-time-picker .nmorph-time-picker__input{display:flex;align-items:center;height:100%;padding:0 var(--default-indentation-input);overflow:hidden;background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-outset);cursor:pointer}.nmorph-time-picker .nmorph-time-picker__native{position:absolute;width:0;height:0;padding:0;border:0;opacity:0;pointer-events:none}.nmorph-time-picker .nmorph-time-picker__clock-icon{flex:0 0 auto;margin-right:6px}.nmorph-time-picker .nmorph-time-picker__selected-value{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nmorph-time-picker .nmorph-time-picker__clear{display:inline-flex;flex:0 0 auto;justify-content:center;align-items:center;width:18px;height:18px;padding:0;color:var(--nmorph-text-color);background:transparent;border:0;cursor:pointer}.nmorph-time-picker .nmorph-time-picker__panel{display:grid;grid-template-columns:minmax(48px,1fr) auto minmax(48px,1fr);gap:4px;padding:8px}.nmorph-time-picker .nmorph-time-picker__panel--with-seconds{grid-template-columns:minmax(48px,1fr) auto minmax(48px,1fr) auto minmax(48px,1fr)}.nmorph-time-picker .nmorph-time-picker__column{display:grid;max-height:220px;overflow-y:auto}.nmorph-time-picker .nmorph-time-picker__separator{display:flex;justify-content:center;align-items:center;color:var(--nmorph-semi-contrast-text-color);font-weight:700}.nmorph-time-picker .nmorph-time-picker__option{min-height:28px;padding:0 8px;color:var(--nmorph-text-color);background:transparent;border:0;border-radius:4px;cursor:pointer}.nmorph-time-picker .nmorph-time-picker__option:hover,.nmorph-time-picker .nmorph-time-picker__option--active{color:var(--nmorph-focus-text-color);background:var(--nmorph-accent-color)}.nmorph-time-picker .nmorph-time-picker__option:disabled{cursor:not-allowed;opacity:.35}.nmorph-time-picker.nmorph-time-picker--open .nmorph-time-picker__input{box-shadow:var(--nmorph-shadow-inset)}.nmorph-time-picker.nmorph-time-picker--focus{outline:2px solid var(--nmorph-accent-color)}.nmorph-time-picker.nmorph-time-picker--placeholder .nmorph-time-picker__selected-value{color:var(--nmorph-placeholder-text-color)}.nmorph-time-picker.nmorph-time-picker--disabled{cursor:not-allowed;opacity:.6}.nmorph-time-picker.nmorph-time-picker--disabled .nmorph-time-picker__input{pointer-events:none}
+.nmorph-time-picker{--width: 160px;position:relative;width:var(--width);height:var(--height)}.nmorph-time-picker .nmorph-time-picker__input{display:flex;align-items:center;height:100%;padding:0 var(--default-indentation-input);overflow:hidden;background:var(--nmorph-main-color);border-radius:var(--default-border-radius);box-shadow:var(--nmorph-shadow-outset);cursor:pointer}.nmorph-time-picker .nmorph-time-picker__native{position:absolute;width:0;height:0;padding:0;border:0;opacity:0;pointer-events:none}.nmorph-time-picker .nmorph-time-picker__clock-icon{flex:0 0 auto;margin-right:6px}.nmorph-time-picker .nmorph-time-picker__selected-value{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nmorph-time-picker .nmorph-time-picker__clear{display:inline-flex;flex:0 0 auto;justify-content:center;align-items:center;width:18px;height:18px;padding:0;color:var(--nmorph-text-color);background:transparent;border:0;cursor:pointer}.nmorph-time-picker .nmorph-time-picker__panel{display:grid;grid-template-columns:minmax(0,1fr) 8px minmax(0,1fr);gap:6px;align-items:start;padding:8px;color:var(--nmorph-text-color)}.nmorph-time-picker .nmorph-time-picker__panel--with-seconds{grid-template-columns:minmax(0,1fr) 8px minmax(0,1fr) 8px minmax(0,1fr)}.nmorph-time-picker .nmorph-time-picker__column{display:grid;grid-auto-flow:row;grid-auto-rows:var(--height);grid-template-columns:minmax(0,1fr);gap:4px;align-content:start;max-height:220px;padding:2px;overflow:hidden auto;scrollbar-gutter:stable}.nmorph-time-picker .nmorph-time-picker__separator{display:flex;justify-content:center;align-items:flex-start;min-width:8px;padding-top:calc((var(--height) - 1em) / 2 + 2px);color:var(--nmorph-semi-contrast-text-color);font-weight:700;line-height:1}.nmorph-time-picker .nmorph-time-picker__option{display:flex;justify-content:center;align-items:center;width:100%;min-width:0;min-height:var(--height);margin:0;padding:0 8px;color:var(--nmorph-text-color);font:inherit;line-height:1;background:transparent;border:0;border-radius:4px;box-shadow:none;cursor:pointer;appearance:none}.nmorph-time-picker .nmorph-time-picker__option:hover:not(:disabled),.nmorph-time-picker .nmorph-time-picker__option--active{color:var(--nmorph-focus-text-color);background:var(--nmorph-accent-color)}.nmorph-time-picker .nmorph-time-picker__option:focus-visible{outline:2px solid var(--nmorph-accent-color);outline-offset:1px}.nmorph-time-picker .nmorph-time-picker__option:disabled{cursor:not-allowed;opacity:.35}.nmorph-time-picker.nmorph-time-picker--open .nmorph-time-picker__input{box-shadow:var(--nmorph-shadow-inset)}.nmorph-time-picker.nmorph-time-picker--focus{outline:2px solid var(--nmorph-accent-color)}.nmorph-time-picker.nmorph-time-picker--placeholder .nmorph-time-picker__selected-value{color:var(--nmorph-placeholder-text-color)}.nmorph-time-picker.nmorph-time-picker--disabled{cursor:not-allowed;opacity:.6}.nmorph-time-picker.nmorph-time-picker--disabled .nmorph-time-picker__input{pointer-events:none}

package/dist/components/form/nmorph-time-picker/NmorphTimePicker.vue.js

@@ -1,30 +1,30 @@
 import './NmorphTimePicker.css';
 import b from "./NmorphTimePicker.vue2.js";
-import { openBlock as i, createElementBlock as n, normalizeStyle as v, normalizeClass as r, createElementVNode as l, withKeys as m, withModifiers as t, createVNode as c, withCtx as p, toDisplayString as d, createCommentVNode as _, createBlock as u, Fragment as s, renderList as h } from "vue";
+import { openBlock as i, createElementBlock as n, normalizeStyle as v, normalizeClass as l, createElementVNode as r, withKeys as m, withModifiers as t, createVNode as d, withCtx as p, toDisplayString as c, createCommentVNode as _, createBlock as f, Fragment as s, renderList as h } from "vue";
 /* empty css                      */
-import f from "../../../_virtual/_plugin-vue_export-helper.js";
-const y = ["aria-expanded", "aria-controls", "tabindex", "onKeydown"], w = ["id", "name", "autocomplete", "step", "value", "disabled"], x = { class: "nmorph-time-picker__selected-value" }, C = ["id"], O = {
+import u from "../../../_virtual/_plugin-vue_export-helper.js";
+const y = ["aria-expanded", "aria-controls", "tabindex", "onKeydown"], w = ["id", "name", "autocomplete", "step", "value", "disabled"], x = { class: "nmorph-time-picker__selected-value" }, C = ["id"], g = {
   class: "nmorph-time-picker__column",
   role: "listbox",
   "aria-label": "Hours"
-}, N = ["disabled", "onClick"], g = {
+}, O = ["disabled", "onClick"], H = {
   class: "nmorph-time-picker__column",
   role: "listbox",
   "aria-label": "Minutes"
-}, H = ["disabled", "onClick"], V = {
+}, N = ["disabled", "onClick"], M = {
   class: "nmorph-time-picker__column",
   role: "listbox",
   "aria-label": "Seconds"
-}, I = ["disabled", "onClick"];
-function S(z, a, B, e, D, M) {
+}, V = ["disabled", "onClick"];
+function I(S, a, z, e, B, D) {
   return i(), n(
     "div",
     {
-      class: r(e.modifiers),
+      class: l(e.modifiers),
       style: v(e.styles)
     },
     [
-      l("div", {
+      r("div", {
         ref: "inputDOMRef",
         class: "nmorph-time-picker__input",
         role: "combobox",
@@ -40,7 +40,7 @@ function S(z, a, B, e, D, M) {
           m(t(e.closeHandler, ["prevent"]), ["escape"])
         ]
       }, [
-        l("input", {
+        r("input", {
           id: e.id,
           class: "nmorph-time-picker__native",
           name: e.name,
@@ -51,17 +51,17 @@ function S(z, a, B, e, D, M) {
           disabled: e.props.disabled,
           onInput: e.nativeInputHandler
         }, null, 40, w),
-        c(e.NmorphIcon, { class: "nmorph-time-picker__clock-icon" }, {
+        d(e.NmorphIcon, { class: "nmorph-time-picker__clock-icon" }, {
           default: p(() => [
-            c(e.NmorphIconClock)
+            d(e.NmorphIconClock)
           ]),
           _: 1
           /* STABLE */
         }),
-        l(
+        r(
           "div",
           x,
-          d(e.displayValue),
+          c(e.displayValue),
           1
           /* TEXT */
         ),
@@ -72,19 +72,19 @@ function S(z, a, B, e, D, M) {
           "aria-label": "Clear time",
           onClick: t(e.clearHandler, ["stop"])
         }, [
-          c(e.NmorphIcon, {
+          d(e.NmorphIcon, {
             width: "14px",
             height: "14px"
           }, {
             default: p(() => [
-              c(e.NmorphIconCircleClose)
+              d(e.NmorphIconCircleClose)
             ]),
             _: 1
             /* STABLE */
           })
         ])) : _("v-if", !0)
       ], 40, y),
-      e.inputDOMRef && !e.props.disabled ? (i(), u(e.NmorphDropdown, {
+      e.inputDOMRef && !e.props.disabled ? (i(), f(e.NmorphDropdown, {
         key: 0,
         open: e.open,
         "relative-element": e.inputDOMRef,
@@ -96,43 +96,49 @@ function S(z, a, B, e, D, M) {
         onOnEscapeKeydown: e.closeHandler
       }, {
         default: p(() => [
-          l("div", {
+          r("div", {
             id: `${e.id}-dropdown`,
-            class: r(["nmorph-time-picker__panel", { "nmorph-time-picker__panel--with-seconds": e.props.showSeconds }])
+            class: l(["nmorph-time-picker__panel", { "nmorph-time-picker__panel--with-seconds": e.props.showSeconds }])
           }, [
-            l("div", O, [
+            r("div", g, [
               (i(!0), n(
                 s,
                 null,
                 h(e.hourOptions, (o) => (i(), n("button", {
                   key: o.value,
                   type: "button",
-                  class: r(["nmorph-time-picker__option", { "nmorph-time-picker__option--active": o.value === e.pickerValue.hour }]),
+                  class: l(["nmorph-time-picker__option", [
+                    e.optionHeightModifiers,
+                    { "nmorph-time-picker__option--active": o.value === e.pickerValue.hour }
+                  ]]),
                   disabled: o.disabled,
                   onClick: (k) => e.selectUnit("hour", o.value)
-                }, d(o.label), 11, N))),
+                }, c(o.label), 11, O))),
                 128
                 /* KEYED_FRAGMENT */
               ))
             ]),
-            a[1] || (a[1] = l(
+            a[1] || (a[1] = r(
               "div",
               { class: "nmorph-time-picker__separator" },
               ":",
               -1
               /* CACHED */
             )),
-            l("div", g, [
+            r("div", H, [
               (i(!0), n(
                 s,
                 null,
                 h(e.minuteOptions, (o) => (i(), n("button", {
                   key: o.value,
                   type: "button",
-                  class: r(["nmorph-time-picker__option", { "nmorph-time-picker__option--active": o.value === e.pickerValue.minute }]),
+                  class: l(["nmorph-time-picker__option", [
+                    e.optionHeightModifiers,
+                    { "nmorph-time-picker__option--active": o.value === e.pickerValue.minute }
+                  ]]),
                   disabled: o.disabled,
                   onClick: (k) => e.selectUnit("minute", o.value)
-                }, d(o.label), 11, H))),
+                }, c(o.label), 11, N))),
                 128
                 /* KEYED_FRAGMENT */
               ))
@@ -141,24 +147,27 @@ function S(z, a, B, e, D, M) {
               s,
               { key: 0 },
               [
-                a[0] || (a[0] = l(
+                a[0] || (a[0] = r(
                   "div",
                   { class: "nmorph-time-picker__separator" },
                   ":",
                   -1
                   /* CACHED */
                 )),
-                l("div", V, [
+                r("div", M, [
                   (i(!0), n(
                     s,
                     null,
                     h(e.secondOptions, (o) => (i(), n("button", {
                       key: o.value,
                       type: "button",
-                      class: r(["nmorph-time-picker__option", { "nmorph-time-picker__option--active": o.value === e.pickerValue.second }]),
+                      class: l(["nmorph-time-picker__option", [
+                        e.optionHeightModifiers,
+                        { "nmorph-time-picker__option--active": o.value === e.pickerValue.second }
+                      ]]),
                       disabled: o.disabled,
                       onClick: (k) => e.selectUnit("second", o.value)
-                    }, d(o.label), 11, I))),
+                    }, c(o.label), 11, V))),
                     128
                     /* KEYED_FRAGMENT */
                   ))
@@ -177,7 +186,7 @@ function S(z, a, B, e, D, M) {
     /* CLASS, STYLE */
   );
 }
-const F = /* @__PURE__ */ f(b, [["render", S], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-time-picker/NmorphTimePicker.vue"]]);
+const F = /* @__PURE__ */ u(b, [["render", I], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-time-picker/NmorphTimePicker.vue"]]);
 export {
   F as default
 };

package/dist/components/form/nmorph-time-picker/NmorphTimePicker.vue2.js

@@ -1,14 +1,14 @@
 import './NmorphTimePicker.css';
-import { defineComponent as X, ref as v, computed as l, watch as Y } from "vue";
-import { NmorphComponentHeight as Z } from "../../../types/index.js";
-import { useI18n as ee } from "vue-i18n";
-import { useModifiers as te } from "../../../utils/create-modifiers.js";
-import { useFormItemInput as oe } from "../nmorph-form/use-form-item-input.js";
-import re from "../../../assets/icons/clock.svg.js";
-import ne from "../../../assets/icons/circle-close.svg.js";
-import le from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import ue from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
-const be = /* @__PURE__ */ X({
+import { defineComponent as ee, ref as g, computed as n, watch as te } from "vue";
+import { NmorphComponentHeight as _ } from "../../../types/index.js";
+import { useI18n as oe } from "vue-i18n";
+import { useModifiers as $ } from "../../../utils/create-modifiers.js";
+import { useFormItemInput as re } from "../nmorph-form/use-form-item-input.js";
+import ne from "../../../assets/icons/clock.svg.js";
+import le from "../../../assets/icons/circle-close.svg.js";
+import ue from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import se from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
+const Se = /* @__PURE__ */ ee({
   __name: "NmorphTimePicker",
   props: {
     modelValue: { type: [String, null], required: !1, default: null },
@@ -30,18 +30,18 @@ const be = /* @__PURE__ */ X({
     tabindex: { type: Number, required: !1 }
   },
   emits: ["update:model-value", "focus", "blur"],
-  setup(_, { expose: $, emit: O }) {
-    const t = _, s = O, { t: T } = ee(), { id: k, name: H, autocomplete: B, tabindex: P } = oe(t), a = v(!1), c = v(!1), w = v(null), m = (e) => String(e).padStart(2, "0"), p = (e) => Math.max(1, Math.floor(Number.isFinite(e) ? e : 1)), i = (e) => {
+  setup(O, { expose: H, emit: k }) {
+    const t = O, s = k, { t: T } = oe(), { id: B, name: M, autocomplete: P, tabindex: z } = re(t), a = g(!1), c = g(!1), w = g(null), m = (e) => String(e).padStart(2, "0"), p = (e) => Math.max(1, Math.floor(Number.isFinite(e) ? e : 1)), i = (e) => {
       if (!e) return null;
       const o = e.match(/^(\d{1,2}):(\d{2})(?::(\d{2}))?$/);
       if (!o) return null;
       const r = Number(o[1]), S = Number(o[2]), d = Number(o[3] || 0);
       return r > 23 || S > 59 || d > 59 ? null : { hour: r, minute: S, second: d };
-    }, g = (e) => {
+    }, v = (e) => {
       const o = `${m(e.hour)}:${m(e.minute)}`;
       return t.showSeconds ? `${o}:${m(e.second)}` : o;
-    }, f = (e) => e.hour * 3600 + e.minute * 60 + e.second, y = l(() => i(t.minTime)), N = l(() => i(t.maxTime)), x = l(() => i(t.modelValue)), u = v(x.value || { hour: 0, minute: 0, second: 0 }), V = l(() => t.placeholder || T("pickATime"));
-    Y(
+    }, f = (e) => e.hour * 3600 + e.minute * 60 + e.second, y = n(() => i(t.minTime)), N = n(() => i(t.maxTime)), x = n(() => i(t.modelValue)), u = g(x.value || { hour: 0, minute: 0, second: 0 }), V = n(() => t.placeholder || T("pickATime"));
+    te(
       () => t.modelValue,
       (e) => {
         const o = i(e);
@@ -53,36 +53,36 @@ const be = /* @__PURE__ */ X({
       return !!(y.value && o < f(y.value) || N.value && o > f(N.value));
     }, b = (e, o, r) => {
       const S = p(r), d = /* @__PURE__ */ new Set();
-      for (let n = 0; n <= o; n += S) d.add(n);
-      return d.add(u.value[e]), Array.from(d).filter((n) => n >= 0 && n <= o).sort((n, q) => n - q).map((n) => {
-        const q = { ...u.value, [e]: n };
+      for (let l = 0; l <= o; l += S) d.add(l);
+      return d.add(u.value[e]), Array.from(d).filter((l) => l >= 0 && l <= o).sort((l, q) => l - q).map((l) => {
+        const q = { ...u.value, [e]: l };
         return {
-          label: m(n),
-          value: n,
+          label: m(l),
+          value: l,
           disabled: h(q)
         };
       });
-    }, z = l(() => b("hour", 23, t.hourStep)), M = l(() => b("minute", 59, t.minuteStep)), D = l(() => b("second", 59, t.secondStep)), A = (e, o) => {
+    }, D = n(() => b("hour", 23, t.hourStep)), A = n(() => b("minute", 59, t.minuteStep)), F = n(() => b("second", 59, t.secondStep)), R = (e, o) => {
       const r = { ...u.value, [e]: o };
-      h(r) || (u.value = r, s("update:model-value", g(r)));
-    }, F = () => {
+      h(r) || (u.value = r, s("update:model-value", v(r)));
+    }, U = () => {
       s("update:model-value", null), a.value = !1;
-    }, R = () => {
+    }, j = () => {
       a.value = !1;
-    }, U = () => {
+    }, E = () => {
       t.disabled || (a.value = !a.value);
-    }, j = () => {
+    }, G = () => {
       c.value = !0, s("focus");
-    }, E = () => {
+    }, J = () => {
       c.value = !1, s("blur");
-    }, G = (e) => {
+    }, K = (e) => {
       const o = e.target, r = i(o.value);
-      !r || h(r) || (u.value = r, s("update:model-value", g(r)));
-    }, J = l(() => t.modelValue || V.value), K = l(
+      !r || h(r) || (u.value = r, s("update:model-value", v(r)));
+    }, L = n(() => t.modelValue || V.value), Q = n(
       () => t.showSeconds ? p(t.secondStep) : p(t.minuteStep) * 60
-    ), L = l(() => t.clearable && !!t.modelValue && !t.disabled), Q = l(
-      () => te({
-        nmorph: [Z[t.height]],
+    ), W = n(() => t.clearable && !!t.modelValue && !t.disabled), X = n(
+      () => $({
+        nmorph: [_[t.height]],
         "nmorph-time-picker": [
           `${t.disabled && "disabled"}`,
           `${a.value && "open"}`,
@@ -90,22 +90,26 @@ const be = /* @__PURE__ */ X({
           `${!t.modelValue && "placeholder"}`
         ]
       })
-    ), I = (e) => typeof e == "number" ? `${e}px` : e, W = l(() => ({
+    ), Y = n(
+      () => $({
+        nmorph: [_[t.height]]
+      })
+    ), I = (e) => typeof e == "number" ? `${e}px` : e, Z = n(() => ({
       ...t.width !== void 0 && { "--width": I(t.width) }
     }));
-    $({ inputDOMRef: w });
-    const C = { props: t, emit: s, t: T, id: k, name: H, autocomplete: B, tabindex: P, open: a, focused: c, inputDOMRef: w, pad: m, normalizeStep: p, parseTime: i, formatTime: g, timeToSeconds: f, minTimeParts: y, maxTimeParts: N, modelTimeParts: x, pickerValue: u, placeholderText: V, isOutsideRange: h, getUnitOptions: b, hourOptions: z, minuteOptions: M, secondOptions: D, selectUnit: A, clearHandler: F, closeHandler: R, toggleOpen: U, focusHandler: j, blurHandler: E, nativeInputHandler: G, displayValue: J, inputStep: K, showClearButton: L, modifiers: Q, getCssSize: I, styles: W, get NmorphDropdown() {
-      return ue;
+    H({ inputDOMRef: w });
+    const C = { props: t, emit: s, t: T, id: B, name: M, autocomplete: P, tabindex: z, open: a, focused: c, inputDOMRef: w, pad: m, normalizeStep: p, parseTime: i, formatTime: v, timeToSeconds: f, minTimeParts: y, maxTimeParts: N, modelTimeParts: x, pickerValue: u, placeholderText: V, isOutsideRange: h, getUnitOptions: b, hourOptions: D, minuteOptions: A, secondOptions: F, selectUnit: R, clearHandler: U, closeHandler: j, toggleOpen: E, focusHandler: G, blurHandler: J, nativeInputHandler: K, displayValue: L, inputStep: Q, showClearButton: W, modifiers: X, optionHeightModifiers: Y, getCssSize: I, styles: Z, get NmorphDropdown() {
+      return se;
     }, get NmorphIcon() {
-      return le;
+      return ue;
     }, get NmorphIconCircleClose() {
-      return ne;
+      return le;
     }, get NmorphIconClock() {
-      return re;
+      return ne;
     } };
     return Object.defineProperty(C, "__isScriptSetup", { enumerable: !1, value: !0 }), C;
   }
 });
 export {
-  be as default
+  Se as default
 };

package/dist/components/navigation/nmorph-backtop/NmorphBacktop.vue.js

@@ -1,21 +1,15 @@
 import './NmorphBacktop.css';
-import l from "./NmorphBacktop.vue2.js";
-import { openBlock as e, createElementBlock as a, normalizeStyle as c, createBlock as i, Teleport as d, createElementVNode as t, normalizeClass as m, withModifiers as s, renderSlot as h, createVNode as r, withCtx as p } from "vue";
+import a from "./NmorphBacktop.vue2.js";
+import { openBlock as e, createElementBlock as p, createBlock as c, Teleport as i, createElementVNode as t, normalizeStyle as s, normalizeClass as d, withModifiers as m, renderSlot as f, createVNode as r, withCtx as l } from "vue";
 /* empty css                   */
-import f from "../../../_virtual/_plugin-vue_export-helper.js";
-function _(n, b, k, o, v, x) {
-  return e(), a(
+import h from "../../../_virtual/_plugin-vue_export-helper.js";
+const _ = { ref: "placeholderDOMEl" };
+function k(n, v, y, o, b, N) {
+  return e(), p(
     "div",
-    {
-      ref: "placeholderDOMEl",
-      style: c({
-        "--nmorph-backtop-right": `${o.props.right}px`,
-        "--nmorph-backtop-bottom": `${o.props.bottom}px`,
-        "--nmorph-backtop-z-index": o.props.zIndex
-      })
-    },
+    _,
     [
-      (e(), i(d, {
+      (e(), c(i, {
         to: o.props.teleportTo,
         disabled: !o.isMounted || o.props.teleportDisabled
       }, [
@@ -23,22 +17,23 @@ function _(n, b, k, o, v, x) {
           "div",
           {
             ref: "selfDOMEl",
-            class: m(o.modifiers)
+            class: d(o.modifiers),
+            style: s(o.styles)
           },
           [
             t("div", {
-              onClick: s(o.scrollToTopHandler, ["stop"])
+              onClick: m(o.scrollToTopHandler, ["stop"])
             }, [
-              h(n.$slots, "default", {}, () => [
+              f(n.$slots, "default", {}, () => [
                 r(o.NmorphButton, {
                   "style-type": o.props.design === "nmorph" ? "default" : "transparent"
                 }, {
-                  default: p(() => [
+                  default: l(() => [
                     r(o.NmorphIcon, {
                       class: "nmorph-backtop__up-icon",
                       color: o.props.design === "nmorph" ? void 0 : "var(--nmorph-contrast-text-color)"
                     }, {
-                      default: p(() => [
+                      default: l(() => [
                         r(o.NmorphIconChevronDown)
                       ]),
                       _: 1
@@ -51,16 +46,16 @@ function _(n, b, k, o, v, x) {
               ])
             ])
           ],
-          2
-          /* CLASS */
+          6
+          /* CLASS, STYLE */
         )
       ], 8, ["to", "disabled"]))
     ],
-    4
-    /* STYLE */
+    512
+    /* NEED_PATCH */
   );
 }
-const z = /* @__PURE__ */ f(l, [["render", _], ["__file", "/builds/ketjo/nmorph/library/src/components/navigation/nmorph-backtop/NmorphBacktop.vue"]]);
+const E = /* @__PURE__ */ h(a, [["render", k], ["__file", "/builds/ketjo/nmorph/library/src/components/navigation/nmorph-backtop/NmorphBacktop.vue"]]);
 export {
-  z as default
+  E as default
 };

package/dist/components/navigation/nmorph-backtop/NmorphBacktop.vue2.js

@@ -1,10 +1,10 @@
 import './NmorphBacktop.css';
-import { defineComponent as b, computed as g, ref as t, onMounted as y, onUnmounted as N } from "vue";
-import { useModifiers as _ } from "../../../utils/create-modifiers.js";
-import q from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import E from "../../basic/nmorph-button/NmorphButton.vue.js";
-import T from "../../../assets/icons/chevron-down.svg.js";
-const k = /* @__PURE__ */ b({
+import { defineComponent as E, computed as v, ref as l, onMounted as T, onUnmounted as k } from "vue";
+import { useModifiers as q } from "../../../utils/create-modifiers.js";
+import x from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import I from "../../basic/nmorph-button/NmorphButton.vue.js";
+import B from "../../../assets/icons/chevron-down.svg.js";
+const Y = /* @__PURE__ */ E({
   __name: "NmorphBacktop",
   props: {
     right: { type: Number, required: !1, default: 40 },
@@ -16,38 +16,52 @@ const k = /* @__PURE__ */ b({
     teleportDisabled: { type: Boolean, required: !1, default: !1 }
   },
   emits: ["click"],
-  setup(m, { expose: c, emit: f }) {
-    c();
-    const r = m, n = f, d = g(
-      () => _({
-        "nmorph-backtop": [`${o.value && "show"}`, r.design]
+  setup(b, { expose: w, emit: y }) {
+    w();
+    const t = b, s = y, g = v(
+      () => q({
+        "nmorph-backtop": [`${n.value && "show"}`, t.design]
       })
-    ), e = t(null), u = t(null), i = t(null), o = t(!1), s = t(!1), l = (p) => {
-      if (!p) return;
-      const h = p.target;
-      o.value = h.scrollTop > r.visibilityHeight;
-    }, v = () => {
-      n("click"), e.value && e.value.scrollTo({
+    ), N = v(() => ({
+      "--nmorph-backtop-right": `${t.right}px`,
+      "--nmorph-backtop-bottom": `${t.bottom}px`,
+      "--nmorph-backtop-z-index": t.zIndex
+    })), u = (r) => r === window, c = (r) => u(r) ? window.scrollY || document.documentElement.scrollTop || document.body.scrollTop || 0 : r.scrollTop, a = (r) => {
+      let o = r?.parentElement ?? null;
+      for (; o; ) {
+        const h = window.getComputedStyle(o), _ = h.overflowY || h.overflow;
+        if (["auto", "scroll", "overlay"].includes(_) && o.scrollHeight > o.clientHeight) return o;
+        o = o.parentElement;
+      }
+      return window;
+    }, e = l(null), p = l(null), m = l(null), n = l(!1), d = l(!1), i = () => {
+      if (!e.value) {
+        n.value = !1;
+        return;
+      }
+      n.value = c(e.value) > t.visibilityHeight;
+    }, S = () => {
+      s("click"), e.value && e.value.scrollTo({
         top: 0,
         left: 0,
         behavior: "smooth"
       });
     };
-    y(() => {
-      e.value = u.value?.parentElement ?? i.value?.parentElement?.parentElement ?? null, e.value?.addEventListener("scroll", l), o.value = (e.value?.scrollTop ?? 0) > r.visibilityHeight, s.value = !0;
-    }), N(() => {
-      e.value && e.value?.removeEventListener("scroll", l);
+    T(() => {
+      e.value = a(p.value ?? m.value), e.value.addEventListener("scroll", i), i(), d.value = !0;
+    }), k(() => {
+      e.value && e.value.removeEventListener("scroll", i);
     });
-    const a = { props: r, emit: n, modifiers: d, container: e, placeholderDOMEl: u, selfDOMEl: i, showButton: o, isMounted: s, scrollHandler: l, scrollToTopHandler: v, get NmorphButton() {
-      return E;
+    const f = { props: t, emit: s, modifiers: g, styles: N, isWindow: u, getScrollTop: c, findScrollableAncestor: a, container: e, placeholderDOMEl: p, selfDOMEl: m, showButton: n, isMounted: d, updateVisibility: i, scrollToTopHandler: S, get NmorphButton() {
+      return I;
     }, get NmorphIcon() {
-      return q;
+      return x;
     }, get NmorphIconChevronDown() {
-      return T;
+      return B;
     } };
-    return Object.defineProperty(a, "__isScriptSetup", { enumerable: !1, value: !0 }), a;
+    return Object.defineProperty(f, "__isScriptSetup", { enumerable: !1, value: !0 }), f;
   }
 });
 export {
-  k as default
+  Y as default
 };