@nmorph/nmorph-ui-kit 2.2.53 → 2.2.55

package/dist/components/form/nmorph-text-input/NmorphTextInput.vue.js

@@ -1,72 +1,119 @@
 import './NmorphTextInput.css';
-import m from "./NmorphTextInput.vue2.js";
-import { openBlock as t, createElementBlock as r, normalizeStyle as s, normalizeClass as c, createElementVNode as i, renderSlot as h, createCommentVNode as l, mergeProps as f, withKeys as y, createBlock as d, withModifiers as u, withCtx as a, createVNode as b, resolveDynamicComponent as x } from "vue";
-/* empty css                     */
-import _ from "../../../_virtual/_plugin-vue_export-helper.js";
-const v = { class: "nmorph-text-input__input-side" }, k = {
+import { defineComponent as z, useSlots as A, computed as a, ref as H, openBlock as i, createElementBlock as f, normalizeStyle as O, normalizeClass as T, createElementVNode as h, unref as o, renderSlot as j, createCommentVNode as y, mergeProps as q, withKeys as G, createBlock as b, withModifiers as J, withCtx as v, createVNode as L, resolveDynamicComponent as Q } from "vue";
+import { useModifiers as U } from "../../../utils/create-modifiers.js";
+import { useFocusableInput as W } from "../../../hooks/use-focusable-input.js";
+import { useFormItemInput as X, useFormItemModel as Y } from "../nmorph-form/use-form-item-input.js";
+import { NmorphComponentHeight as Z } from "../../../types/common.types.js";
+import ee from "../../../assets/icons/eye-blocked.svg.js";
+import te from "../../basic/nmorph-button/NmorphButton.vue.js";
+/* empty css                                          */
+import oe from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+/* empty css                                      */
+import ne from "../../../assets/icons/error.svg.js";
+import le from "../../../assets/icons/eye.svg.js";
+const re = { class: "nmorph-text-input__input-side" }, ae = {
   key: 0,
   class: "nmorph-text-input__prepend-icon"
-}, w = ["id", "name", "autocomplete", "tabindex", "type", "placeholder", "disabled", "value"];
-function B(p, o, N, e, C, I) {
-  return t(), r(
-    "div",
-    {
-      class: c(e.modifiers),
-      style: s(e.styles)
-    },
-    [
-      i("div", v, [
-        e.slots["prepend-icon"] ? (t(), r("div", k, [
-          h(p.$slots, "prepend-icon")
-        ])) : l("v-if", !0),
-        i("input", f({
-          id: e.id,
-          ref: "inputDOMRef",
-          name: e.name,
-          autocomplete: e.autocomplete,
-          tabindex: e.tabindex,
+}, se = ["id", "name", "autocomplete", "tabindex", "type", "placeholder", "disabled", "value"], xe = /* @__PURE__ */ z({
+  __name: "NmorphTextInput",
+  props: {
+    placeholder: { default: "" },
+    typePassword: { type: Boolean, default: !1 },
+    modelValue: { default: "" },
+    clearable: { type: Boolean, default: !1 },
+    indentation: { default: "" },
+    inputAttrs: { default: () => ({}) },
+    id: {},
+    name: {},
+    autocomplete: {},
+    height: { default: "basic" },
+    disabled: { type: Boolean, default: !1 },
+    tabindex: {}
+  },
+  emits: ["update:model-value", "focus", "blur", "on-enter", "keydown"],
+  setup(w, { expose: x, emit: _ }) {
+    const p = A(), e = w, l = _, { id: k, name: B, autocomplete: I, tabindex: g } = X(e), { modelValue: C, updateModelValue: d } = Y(
+      e,
+      (r) => l("update:model-value", r),
+      ""
+    ), N = a(
+      () => U({
+        nmorph: [Z[e.height], V.value && "focused"],
+        "nmorph-text-input": [e.typePassword && "password", (e.typePassword || e.clearable) && "with-action"]
+      })
+    ), M = (r) => {
+      const t = r.target;
+      d(t.value);
+    }, s = H(!1), P = () => {
+      e.clearable ? d("") : s.value = !s.value;
+    }, F = a(() => e.typePassword && !s.value && !e.clearable ? "password" : "text"), {
+      elementRef: u,
+      focused: V,
+      handleFocus: m,
+      handleBlur: c,
+      focus: E,
+      blur: $,
+      select: D
+    } = W({
+      onFocus: () => l("focus"),
+      onBlur: () => l("blur")
+    });
+    x({ inputDOMRef: u, focus: E, blur: $, select: D });
+    const K = a(() => e.clearable ? ne : s.value ? ee : le), R = a(() => e.indentation || (p["prepend-icon"] ? "28px" : "8px")), S = a(() => ({ "--nmorph-text-input-indentation": R.value }));
+    return (r, t) => (i(), f("div", {
+      class: T(N.value),
+      style: O(S.value)
+    }, [
+      h("div", re, [
+        o(p)["prepend-icon"] ? (i(), f("div", ae, [
+          j(r.$slots, "prepend-icon")
+        ])) : y("", !0),
+        h("input", q({
+          id: o(k),
+          ref_key: "inputDOMRef",
+          ref: u,
+          name: o(B),
+          autocomplete: o(I),
+          tabindex: o(g),
           class: "nmorph-native-input",
-          type: e.type,
-          placeholder: e.props.placeholder,
-          disabled: e.props.disabled,
-          value: e.modelValue
-        }, e.props.inputAttrs, {
-          onInput: e.handleInput,
-          onFocus: o[0] || (o[0] = (...n) => e.handleFocus && e.handleFocus(...n)),
-          onBlur: o[1] || (o[1] = (...n) => e.handleBlur && e.handleBlur(...n)),
-          onKeydown: o[2] || (o[2] = (n) => e.emit("keydown", n)),
-          onKeyup: o[3] || (o[3] = y((n) => e.emit("on-enter"), ["enter"]))
-        }), null, 16, w),
-        e.props.typePassword || e.props.clearable ? (t(), d(e.NmorphButton, {
+          type: F.value,
+          placeholder: e.placeholder,
+          disabled: e.disabled,
+          value: o(C)
+        }, e.inputAttrs, {
+          onInput: M,
+          onFocus: t[0] || (t[0] = //@ts-ignore
+          (...n) => o(m) && o(m)(...n)),
+          onBlur: t[1] || (t[1] = //@ts-ignore
+          (...n) => o(c) && o(c)(...n)),
+          onKeydown: t[2] || (t[2] = (n) => l("keydown", n)),
+          onKeyup: t[3] || (t[3] = G((n) => l("on-enter"), ["enter"]))
+        }), null, 16, se),
+        e.typePassword || e.clearable ? (i(), b(o(te), {
           key: 1,
-          disabled: e.props.disabled,
+          disabled: e.disabled,
           class: "nmorph-text-input__password-btn",
           "style-type": "transparent",
           width: "32px",
-          height: e.props.height,
-          onMousedown: o[4] || (o[4] = u(() => {
+          height: e.height,
+          onMousedown: t[4] || (t[4] = J(() => {
           }, ["prevent"])),
-          onClick: e.actionButtonClickHandler
+          onClick: P
         }, {
-          default: a(() => [
-            b(e.NmorphIcon, null, {
-              default: a(() => [
-                (t(), d(x(e.actionIcon)))
+          default: v(() => [
+            L(o(oe), null, {
+              default: v(() => [
+                (i(), b(Q(K.value)))
               ]),
               _: 1
-              /* STABLE */
             })
           ]),
           _: 1
-          /* STABLE */
-        }, 8, ["disabled", "height"])) : l("v-if", !0)
+        }, 8, ["disabled", "height"])) : y("", !0)
       ])
-    ],
-    6
-    /* CLASS, STYLE */
-  );
-}
-const M = /* @__PURE__ */ _(m, [["render", B], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-text-input/NmorphTextInput.vue"]]);
+    ], 6));
+  }
+});
 export {
-  M as default
+  xe as default
 };

package/dist/components/form/nmorph-text-input/NmorphTextInput.vue3.js

@@ -0,0 +1,6 @@
+import './NmorphTextInput.css';
+import o from "./NmorphTextInput.vue.js";
+/* empty css                     */
+export {
+  o as default
+};

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

@@ -1,41 +1,98 @@
 import './NmorphTextarea.css';
-import n from "./NmorphTextarea.vue2.js";
-import { openBlock as a, createElementBlock as l, normalizeStyle as t, 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 f = ["id", "name", "autocomplete", "tabindex", "placeholder", "disabled", "value", "rows"];
-function x(c, o, b, e, h, y) {
-  return a(), l(
-    "div",
-    {
-      class: d(e.modifiers),
-      style: t(e.styles)
-    },
-    [
-      i("textarea", m({
-        id: e.id,
-        ref: "textareaDOMRef",
-        name: e.name,
-        autocomplete: e.autocomplete,
-        tabindex: e.tabindex,
+import { defineComponent as V, computed as r, watch as T, onMounted as K, openBlock as N, createElementBlock as A, normalizeStyle as D, normalizeClass as E, createElementVNode as O, mergeProps as P, unref as a, withKeys as $, nextTick as Y } from "vue";
+import { useModifiers as _ } from "../../../utils/create-modifiers.js";
+import { useFocusableInput as j } from "../../../hooks/use-focusable-input.js";
+import { useFormItemInput as q, useFormItemModel as G } from "../nmorph-form/use-form-item-input.js";
+import { NmorphComponentHeight as J } from "../../../types/common.types.js";
+const L = ["id", "name", "autocomplete", "tabindex", "placeholder", "disabled", "value", "rows"], ee = /* @__PURE__ */ V({
+  __name: "NmorphTextarea",
+  props: {
+    placeholder: { default: "" },
+    modelValue: { default: "" },
+    rows: { default: 3 },
+    minRows: { default: 2 },
+    maxRows: { default: void 0 },
+    resize: { default: "vertical" },
+    autoSize: { type: Boolean, default: !1 },
+    indentation: { default: "12px" },
+    textareaAttrs: { default: () => ({}) },
+    id: {},
+    name: {},
+    autocomplete: {},
+    height: { default: "basic" },
+    disabled: { type: Boolean, default: !1 },
+    tabindex: {}
+  },
+  emits: ["update:model-value", "focus", "blur", "on-enter", "keydown"],
+  setup(c, { expose: f, emit: h }) {
+    const e = c, l = h, { id: x, name: w, autocomplete: g, tabindex: y } = q(e), { modelValue: d, updateModelValue: v } = G(
+      e,
+      (t) => l("update:model-value", t),
+      ""
+    ), {
+      elementRef: i,
+      focused: b,
+      handleFocus: u,
+      handleBlur: m,
+      focus: z,
+      blur: F,
+      select: M
+    } = j({
+      onFocus: () => l("focus"),
+      onBlur: () => l("blur")
+    }), R = r(
+      () => _({
+        nmorph: [J[e.height], b.value && "focused"],
+        "nmorph-textarea": [e.disabled && "disabled", e.autoSize && "auto-size"]
+      })
+    ), B = (t) => {
+      const o = window.getComputedStyle(t);
+      return parseFloat(o.paddingTop) + parseFloat(o.paddingBottom);
+    }, s = async () => {
+      if (!e.autoSize) return;
+      await Y();
+      const t = i.value;
+      if (!t) return;
+      t.style.height = "auto";
+      const o = window.getComputedStyle(t), n = parseFloat(o.lineHeight) || 20, p = e.maxRows ? e.maxRows * n + B(t) : 1 / 0, C = Math.min(t.scrollHeight, p);
+      t.style.height = `${C}px`, t.style.overflowY = t.scrollHeight > p ? "auto" : "hidden";
+    }, H = (t) => {
+      const o = t.target;
+      v(o.value), s();
+    };
+    T(d, s), K(s), f({ textareaDOMRef: i, focus: z, blur: F, select: M, resizeToContent: s });
+    const I = r(() => Math.max(e.minRows, 1)), S = r(() => Math.max(e.rows, I.value)), k = r(() => ({
+      "--nmorph-textarea-resize": e.autoSize ? "none" : e.resize,
+      "--nmorph-textarea-indentation": e.indentation
+    }));
+    return (t, o) => (N(), A("div", {
+      class: E(R.value),
+      style: D(k.value)
+    }, [
+      O("textarea", P({
+        id: a(x),
+        ref_key: "textareaDOMRef",
+        ref: i,
+        name: a(w),
+        autocomplete: a(g),
+        tabindex: a(y),
         class: "nmorph-native-input",
-        placeholder: e.props.placeholder,
-        disabled: e.props.disabled,
-        value: e.modelValue,
-        rows: e.rows
-      }, e.props.textareaAttrs, {
-        onInput: e.handleInput,
-        onFocus: o[0] || (o[0] = (...r) => e.handleFocus && e.handleFocus(...r)),
-        onBlur: o[1] || (o[1] = (...r) => e.handleBlur && e.handleBlur(...r)),
-        onKeydown: o[2] || (o[2] = (r) => e.emit("keydown", r)),
-        onKeyup: o[3] || (o[3] = s((r) => e.emit("on-enter"), ["enter"]))
-      }), null, 16, f)
-    ],
-    6
-    /* CLASS, STYLE */
-  );
-}
-const k = /* @__PURE__ */ p(n, [["render", x], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-textarea/NmorphTextarea.vue"]]);
+        placeholder: e.placeholder,
+        disabled: e.disabled,
+        value: a(d),
+        rows: S.value
+      }, e.textareaAttrs, {
+        onInput: H,
+        onFocus: o[0] || (o[0] = //@ts-ignore
+        (...n) => a(u) && a(u)(...n)),
+        onBlur: o[1] || (o[1] = //@ts-ignore
+        (...n) => a(m) && a(m)(...n)),
+        onKeydown: o[2] || (o[2] = (n) => l("keydown", n)),
+        onKeyup: o[3] || (o[3] = $((n) => l("on-enter"), ["enter"]))
+      }), null, 16, L)
+    ], 6));
+  }
+});
 export {
-  k as default
+  ee as default
 };

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

@@ -0,0 +1,6 @@
+import './NmorphTextarea.css';
+import o from "./NmorphTextarea.vue.js";
+/* empty css                    */
+export {
+  o as default
+};