@nmorph/nmorph-ui-kit 2.2.35 → 2.2.36

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{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/navigation/nmorph-backtop/NmorphBacktop.vue2.js

@@ -1,10 +1,10 @@
 import './NmorphBacktop.css';
-import { defineComponent as y, computed as m, ref as o, onMounted as N, onUnmounted as _ } from "vue";
-import { useModifiers as k } from "../../../utils/create-modifiers.js";
-import q from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import x from "../../basic/nmorph-button/NmorphButton.vue.js";
-import E from "../../../assets/icons/chevron-down.svg.js";
-const M = /* @__PURE__ */ y({
+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,42 +16,52 @@ const M = /* @__PURE__ */ y({
     teleportDisabled: { type: Boolean, required: !1, default: !1 }
   },
   emits: ["click"],
-  setup(c, { expose: d, emit: f }) {
-    d();
-    const t = c, n = f, h = m(
-      () => k({
-        "nmorph-backtop": [`${r.value && "show"}`, t.design]
+  setup(b, { expose: w, emit: y }) {
+    w();
+    const t = b, s = y, g = v(
+      () => q({
+        "nmorph-backtop": [`${n.value && "show"}`, t.design]
       })
-    ), v = m(() => ({
+    ), N = v(() => ({
       "--nmorph-backtop-right": `${t.right}px`,
       "--nmorph-backtop-bottom": `${t.bottom}px`,
       "--nmorph-backtop-z-index": t.zIndex
-    })), e = o(null), i = o(null), s = o(null), r = o(!1), u = o(!1), l = (p) => {
-      if (!p) return;
-      const g = p.target;
-      r.value = g.scrollTop > t.visibilityHeight;
-    }, b = () => {
-      n("click"), e.value && e.value.scrollTo({
+    })), 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"
       });
     };
-    N(() => {
-      e.value = i.value?.parentElement ?? s.value?.parentElement?.parentElement ?? null, e.value?.addEventListener("scroll", l), r.value = (e.value?.scrollTop ?? 0) > t.visibilityHeight, u.value = !0;
-    }), _(() => {
-      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: t, emit: n, modifiers: h, styles: v, container: e, placeholderDOMEl: i, selfDOMEl: s, showButton: r, isMounted: u, scrollHandler: l, scrollToTopHandler: b, get NmorphButton() {
-      return x;
+    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 E;
+      return B;
     } };
-    return Object.defineProperty(a, "__isScriptSetup", { enumerable: !1, value: !0 }), a;
+    return Object.defineProperty(f, "__isScriptSetup", { enumerable: !1, value: !0 }), f;
   }
 });
 export {
-  M as default
+  Y as default
 };