@nmorph/nmorph-ui-kit 2.2.53 → 2.2.55

package/dist/components/form/nmorph-select-button/NmorphSelectButton.vue.js

@@ -1,44 +1,69 @@
 import './NmorphSelectButton.css';
-import n from "./NmorphSelectButton.vue2.js";
-import { openBlock as r, createElementBlock as l, normalizeStyle as s, normalizeClass as m, Fragment as c, renderList as i, createBlock as d, withCtx as u, createTextVNode as f, toDisplayString as p, renderSlot as _ } from "vue";
-/* empty css                        */
-import b from "../../../_virtual/_plugin-vue_export-helper.js";
-function h(o, v, a, t, y, B) {
-  return r(), l(
-    "div",
-    {
-      class: m(t.modifiers),
-      style: s(t.styles)
-    },
-    [
-      (r(!0), l(
-        c,
-        null,
-        i(a.options, (e) => (r(), d(t.NmorphSelectButtonItem, {
-          key: e.value,
-          value: e.value,
-          disabled: e.disabled
-        }, {
-          default: u(() => [
-            f(
-              p(e.label),
-              1
-              /* TEXT */
-            )
-          ]),
-          _: 2
-          /* DYNAMIC */
-        }, 1032, ["value", "disabled"]))),
-        128
-        /* KEYED_FRAGMENT */
-      )),
-      _(o.$slots, "default")
-    ],
-    6
-    /* CLASS, STYLE */
-  );
-}
-const g = /* @__PURE__ */ b(n, [["render", h], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-select-button/NmorphSelectButton.vue"]]);
+import { defineComponent as b, ref as h, watch as g, computed as s, provide as r, openBlock as i, createElementBlock as n, normalizeStyle as z, normalizeClass as S, Fragment as k, renderList as y, createBlock as V, unref as B, withCtx as _, createTextVNode as C, toDisplayString as x, renderSlot as F } from "vue";
+import { useModifiers as M } from "../../../utils/create-modifiers.js";
+import { createCssVariables as w, createCssSizeVariables as N } from "../../../utils/common.js";
+import { useFormItemModel as P } from "../nmorph-form/use-form-item-input.js";
+import $ from "./components/nmorph-select-button-item/NmorphSelectButtonItem.vue.js";
+/* empty css                                                                 */
+const q = /* @__PURE__ */ b({
+  __name: "NmorphSelectButton",
+  props: {
+    modelValue: { default: "" },
+    options: { default: () => [] },
+    fill: { type: Boolean, default: !1 },
+    trackPadding: { default: void 0 },
+    itemSize: { default: void 0 },
+    itemFontSize: { default: void 0 },
+    id: {},
+    name: {},
+    autocomplete: {},
+    height: { default: "basic" },
+    disabled: { type: Boolean, default: !1 },
+    tabindex: {}
+  },
+  emits: ["update:model-value"],
+  setup(o, { emit: u }) {
+    const e = o, m = u, { modelValue: d, updateModelValue: c } = P(
+      e,
+      (t) => m("update:model-value", t),
+      ""
+    ), a = h(d.value);
+    g(d, (t) => {
+      a.value = t;
+    });
+    const f = s(
+      () => M({
+        "nmorph-select-button": [e.disabled && "disabled", e.fill && "fill", e.height]
+      })
+    ), p = s(() => ({
+      ...N({
+        "--track-padding": e.trackPadding,
+        "--item-size": e.itemSize
+      }),
+      ...w({
+        "--item-font-size": e.itemFontSize
+      })
+    })), v = (t) => {
+      e.disabled || (a.value = t, c(t));
+    };
+    return r("select-button-selected-value", a), r("select-button-change-handler", v), (t, D) => (i(), n("div", {
+      class: S(f.value),
+      style: z(p.value)
+    }, [
+      (i(!0), n(k, null, y(o.options, (l) => (i(), V(B($), {
+        key: l.value,
+        value: l.value,
+        disabled: l.disabled
+      }, {
+        default: _(() => [
+          C(x(l.label), 1)
+        ]),
+        _: 2
+      }, 1032, ["value", "disabled"]))), 128)),
+      F(t.$slots, "default")
+    ], 6));
+  }
+});
 export {
-  g as default
+  q as default
 };

package/dist/components/form/nmorph-select-button/NmorphSelectButton.vue3.js

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

package/dist/components/form/nmorph-select-button/components/nmorph-select-button-item/NmorphSelectButtonItem.vue.js

@@ -1,32 +1,55 @@
 import './NmorphSelectButtonItem.css';
-import r from "./NmorphSelectButtonItem.vue2.js";
-import { openBlock as c, createElementBlock as i, withKeys as t, withModifiers as o, normalizeClass as l, createElementVNode as a, renderSlot as d } from "vue";
-/* empty css                            */
-import s from "../../../../../_virtual/_plugin-vue_export-helper.js";
-const p = ["tabindex", "onKeydown"], m = ["value", "checked", "disabled"];
-function f(n, h, _, e, b, k) {
-  return c(), i("label", {
-    class: l(e.modifiers),
-    tabindex: e.props.tabindex,
-    onClick: o(e.clickHandler, ["prevent"]),
-    onKeydown: [
-      t(o(e.clickHandler, ["prevent"]), ["space"]),
-      t(o(e.clickHandler, ["prevent"]), ["enter"])
-    ]
-  }, [
-    a("input", {
-      ref: "inputDOMRef",
-      type: "radio",
-      value: e.props.value,
-      checked: e.checked,
-      disabled: e.props.disabled,
-      tabindex: "-1",
-      class: "nmorph-native-input"
-    }, null, 8, m),
-    d(n.$slots, "default")
-  ], 42, p);
-}
-const w = /* @__PURE__ */ s(r, [["render", f], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-select-button/components/nmorph-select-button-item/NmorphSelectButtonItem.vue"]]);
+import { defineComponent as m, inject as d, ref as v, computed as s, openBlock as b, createElementBlock as h, withKeys as c, withModifiers as n, normalizeClass as _, createElementVNode as k, renderSlot as x } from "vue";
+import { useModifiers as y } from "../../../../../utils/create-modifiers.js";
+const w = ["tabindex", "onKeydown"], B = ["value", "checked", "disabled"], g = /* @__PURE__ */ m({
+  __name: "NmorphSelectButtonItem",
+  props: {
+    value: {},
+    id: {},
+    name: {},
+    autocomplete: {},
+    disabled: { type: Boolean, default: !1 },
+    tabindex: { default: 0 }
+  },
+  setup(i, { expose: r }) {
+    const u = d(
+      "select-button-selected-value",
+      void 0
+    ), l = d(
+      "select-button-change-handler",
+      void 0
+    ), e = i, o = v(null);
+    r({ inputDOMRef: o });
+    const a = s(() => u?.value === e.value), p = s(
+      () => y({
+        "nmorph-select-button-item": [a.value && "checked", e.disabled && "disabled"]
+      })
+    ), t = () => {
+      e.disabled || l && l(e.value);
+    };
+    return (f, M) => (b(), h("label", {
+      class: _(p.value),
+      tabindex: e.tabindex,
+      onClick: n(t, ["prevent"]),
+      onKeydown: [
+        c(n(t, ["prevent"]), ["space"]),
+        c(n(t, ["prevent"]), ["enter"])
+      ]
+    }, [
+      k("input", {
+        ref_key: "inputDOMRef",
+        ref: o,
+        type: "radio",
+        value: e.value,
+        checked: a.value,
+        disabled: e.disabled,
+        tabindex: "-1",
+        class: "nmorph-native-input"
+      }, null, 8, B),
+      x(f.$slots, "default")
+    ], 42, w));
+  }
+});
 export {
-  w as default
+  g as default
 };

package/dist/components/form/nmorph-select-button/components/nmorph-select-button-item/NmorphSelectButtonItem.vue3.js

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

package/dist/components/form/nmorph-slider/NmorphSlider.vue.js

@@ -1,73 +1,138 @@
 import './NmorphSlider.css';
-import t from "./NmorphSlider.vue2.js";
-import { openBlock as n, createElementBlock as l, normalizeStyle as r, normalizeClass as i, createElementVNode as e, createBlock as a, createCommentVNode as d } from "vue";
-/* empty css                  */
-import s from "../../../_virtual/_plugin-vue_export-helper.js";
-const m = { class: "nmorph-slider__content" }, c = { class: "nmorph-slider__input-wrapper" }, p = ["id", "name", "tabindex", "value", "min", "max", "step", "disabled"];
-function _(h, f, b, o, v, x) {
-  return n(), l(
-    "div",
-    {
-      class: i(o.modifiers),
-      style: r(o.styles)
-    },
-    [
-      e("div", m, [
-        e("div", c, [
-          e(
-            "div",
-            {
-              ref: "sliderContainer",
-              class: "nmorph-slider__input-container",
-              onPointerdown: o.pointerDownHandler
-            },
-            [
-              o.tooltipVisible && !o.props.disabled ? (n(), a(o.NmorphTooltip, {
-                key: 0,
-                ref: "tooltipRootRef",
-                text: String(o.thumbValue),
-                "force-show": "",
-                "force-coordinate": { x: o.thumbXPercentPosition.tooltip, y: "24px" },
-                "block-position": ""
-              }, null, 8, ["text", "force-coordinate"])) : d("v-if", !0),
-              e(
-                "div",
-                {
-                  ref: "sliderFirst",
-                  class: i(["nmorph-slider__thumb", { "nmorph-slider__thumb--smooth": o.transitionEnabled }]),
-                  style: r({ left: o.thumbXPercentPosition.thumb }),
-                  onMouseenter: o.handleMouseEnter,
-                  onMouseleave: o.handleMouseLeave
-                },
-                null,
-                38
-                /* CLASS, STYLE, NEED_HYDRATION */
-              ),
-              e("input", {
-                id: o.id,
-                name: o.name,
-                tabindex: o.tabindex,
-                class: "nmorph-slide__native-input",
-                type: "range",
-                value: o.thumbValue,
-                min: o.props.min,
-                max: o.props.max,
-                step: o.props.step,
-                disabled: o.props.disabled,
-                onInput: o.nativeInputHandler
-              }, null, 40, p)
-            ],
-            544
-            /* NEED_HYDRATION, NEED_PATCH */
-          )
+import { defineComponent as K, computed as m, ref as i, watch as I, onMounted as Q, onUnmounted as Y, openBlock as W, createElementBlock as Z, normalizeStyle as L, normalizeClass as C, createElementVNode as s, createBlock as ee, unref as c, createCommentVNode as te } from "vue";
+import { useModifiers as ne } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as oe } from "../../../utils/common.js";
+import { useFormItemInput as ie, useFormItemModel as le } from "../nmorph-form/use-form-item-input.js";
+import se from "../../feedback/nmorph-tooltip/NmorphTooltip.vue.js";
+/* empty css                                               */
+const ae = { class: "nmorph-slider__content" }, re = { class: "nmorph-slider__input-wrapper" }, de = ["id", "name", "tabindex", "value", "min", "max", "step", "disabled"], _e = /* @__PURE__ */ K({
+  __name: "NmorphSlider",
+  props: {
+    modelValue: { default: 0 },
+    max: { default: 100 },
+    min: { default: 0 },
+    step: { default: 1 },
+    fill: { type: Boolean, default: !0 },
+    showTooltip: { type: Boolean, default: !0 },
+    thumbWidth: { default: 50 },
+    sliderHeight: { default: void 0 },
+    valueFixedContainerHeight: { default: void 0 },
+    id: {},
+    name: {},
+    autocomplete: {},
+    disabled: { type: Boolean, default: !1 },
+    tabindex: {}
+  },
+  emits: ["update:model-value"],
+  setup(H, { emit: T }) {
+    const e = H, { id: V, name: k, tabindex: z } = ie(e), B = m(
+      () => ne({
+        nmorph: [],
+        "nmorph-slider": [e.disabled && "disabled"]
+      })
+    ), F = m(() => `${e.thumbWidth}px`), p = i(e.showTooltip), R = T, { modelValue: b, updateModelValue: S } = le(
+      e,
+      (t) => R("update:model-value", t),
+      0
+    ), n = i(b.value), h = i(null);
+    I(n, () => {
+      S(n.value);
+    }), I(b, (t) => {
+      n.value = t;
+    });
+    const w = i(null), x = m(() => {
+      const t = a.value - a.value, o = e.max - e.min + t, r = (n.value - e.min) / o * 100, d = h.value?.clientWidth || 0, u = e.thumbWidth / d * 100, j = u / 2;
+      let q = r - j;
+      const y = `${Math.max(0, Math.min(100 - u, q))}%`, M = d / 100, A = e.thumbWidth / 2 / M, E = (w.value?.tooltipBody.clientWidth ?? 24) / 2 / M, G = E === 1 / 0 ? 1.714 : E, J = `${parseFloat(y) + A - G}%`;
+      return {
+        thumb: y,
+        tooltip: J
+      };
+    }), a = i(0), _ = i(0), P = () => {
+      a.value = window.innerWidth, _.value = window.innerHeight;
+    };
+    Q(() => {
+      typeof window < "u" && (a.value = window.innerWidth, _.value = window.innerHeight, window.addEventListener("resize", P));
+    }), Y(() => {
+      typeof window < "u" && (document.removeEventListener("pointermove", f), document.removeEventListener("pointerup", l), document.removeEventListener("pointercancel", l), window.removeEventListener("resize", P));
+    });
+    const g = (t) => {
+      v.value = !1;
+      const o = h.value?.getBoundingClientRect();
+      let r = 0;
+      if (o) {
+        const d = t - o.left, u = o.width;
+        r = Math.max(0, Math.min(1, d / u)), n.value = e.min + r * (e.max - e.min);
+      }
+      n.value = Math.round(n.value / e.step) * e.step, n.value = Math.max(e.min, Math.min(e.max, n.value));
+    }, f = (t) => {
+      t.preventDefault(), g(t.clientX);
+    }, l = () => {
+      document.removeEventListener("pointermove", f), document.removeEventListener("pointerup", l), document.removeEventListener("pointercancel", l), v.value = !0;
+    }, O = (t) => {
+      e.disabled || t.pointerType === "mouse" && t.button !== 0 || (t.preventDefault(), g(t.clientX), document.addEventListener("pointermove", f), document.addEventListener("pointerup", l), document.addEventListener("pointercancel", l));
+    }, N = i(null), $ = () => {
+      e.showTooltip && (p.value = !0);
+    }, D = () => {
+      e.showTooltip && (p.value = !1);
+    }, X = (t) => {
+      const o = t.target;
+      n.value = Number(o.value);
+    }, v = i(!0), U = m(() => ({
+      "--nmorph-slider-thumb-width": F.value,
+      ...oe({
+        "--slider-height": e.sliderHeight,
+        "--value-fixed-container-height": e.valueFixedContainerHeight
+      })
+    }));
+    return (t, o) => (W(), Z("div", {
+      class: C(B.value),
+      style: L(U.value)
+    }, [
+      s("div", ae, [
+        s("div", re, [
+          s("div", {
+            ref_key: "sliderContainer",
+            ref: h,
+            class: "nmorph-slider__input-container",
+            onPointerdown: O
+          }, [
+            p.value && !e.disabled ? (W(), ee(c(se), {
+              key: 0,
+              ref_key: "tooltipRootRef",
+              ref: w,
+              text: String(n.value),
+              "force-show": "",
+              "force-coordinate": { x: x.value.tooltip, y: "24px" },
+              "block-position": ""
+            }, null, 8, ["text", "force-coordinate"])) : te("", !0),
+            s("div", {
+              ref_key: "sliderFirst",
+              ref: N,
+              class: C(["nmorph-slider__thumb", { "nmorph-slider__thumb--smooth": v.value }]),
+              style: L({ left: x.value.thumb }),
+              onMouseenter: $,
+              onMouseleave: D
+            }, null, 38),
+            s("input", {
+              id: c(V),
+              name: c(k),
+              tabindex: c(z),
+              class: "nmorph-slide__native-input",
+              type: "range",
+              value: n.value,
+              min: e.min,
+              max: e.max,
+              step: e.step,
+              disabled: e.disabled,
+              onInput: X
+            }, null, 40, de)
+          ], 544)
         ])
       ])
-    ],
-    6
-    /* CLASS, STYLE */
-  );
-}
-const P = /* @__PURE__ */ s(t, [["render", _], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-slider/NmorphSlider.vue"]]);
+    ], 6));
+  }
+});
 export {
-  P as default
+  _e as default
 };

package/dist/components/form/nmorph-slider/NmorphSlider.vue3.js

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

package/dist/components/form/nmorph-switch/NmorphSwitch.vue.js

@@ -1,65 +1,107 @@
 import './NmorphSwitch.css';
-import a from "./NmorphSwitch.vue2.js";
-import { openBlock as l, createElementBlock as t, normalizeStyle as c, normalizeClass as r, createElementVNode as n, renderSlot as i, createBlock as d, withCtx as s, createVNode as h } from "vue";
-/* empty css                  */
-import m from "../../../_virtual/_plugin-vue_export-helper.js";
-const f = ["id", "name", "value", "checked", "disabled", "tabindex"], b = { class: "nmorph-switch-thumb" };
-function p(e, _, k, o, y, v) {
-  return l(), t(
-    "div",
-    {
-      class: r(o.modifiers),
-      style: c(o.styles)
-    },
-    [
-      n("div", {
+import { defineComponent as N, ref as s, computed as c, watch as S, openBlock as r, createElementBlock as C, normalizeStyle as H, normalizeClass as m, createElementVNode as l, unref as o, renderSlot as i, createBlock as M, withCtx as $, createVNode as I } from "vue";
+import { useModifiers as z } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as D } from "../../../utils/common.js";
+import { useFormItemInput as F, useFormItemModel as E } from "../nmorph-form/use-form-item-input.js";
+import O from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+/* empty css                                      */
+import R from "../../../assets/icons/loader.svg.js";
+const L = ["id", "name", "value", "checked", "disabled", "tabindex"], j = { class: "nmorph-switch-thumb" }, U = /* @__PURE__ */ N({
+  __name: "NmorphSwitch",
+  props: {
+    modelValue: { type: [Boolean, String, Number], default: !1 },
+    loading: { type: Boolean, default: !1 },
+    activeValue: { type: [Boolean, String, Number], default: !0 },
+    inactiveValue: { type: [Boolean, String, Number], default: !1 },
+    width: { default: void 0 },
+    height: { default: void 0 },
+    offset: { default: void 0 },
+    thumbHeight: { default: void 0 },
+    id: {},
+    name: {},
+    autocomplete: {},
+    disabled: { type: Boolean, default: !1 },
+    tabindex: {}
+  },
+  emits: ["update:model-value"],
+  setup(f, { expose: h, emit: p }) {
+    const e = f, { id: v, name: b, tabindex: g } = F(e), _ = p, { modelValue: u, updateModelValue: y } = E(
+      e,
+      (t) => _("update:model-value", t),
+      !1
+    ), n = s(!1), V = () => {
+      n.value = !0;
+    }, k = () => {
+      n.value = !1;
+    }, w = c(
+      () => z({
+        "nmorph-switch": [
+          e.disabled && "disabled",
+          a.value ? "on" : "off",
+          e.loading && "loading",
+          n.value && "focus"
+        ]
+      })
+    ), a = s(u.value === e.activeValue), B = () => {
+      if (e.disabled) return;
+      a.value = !a.value;
+      const t = a.value ? e.activeValue : e.inactiveValue;
+      y(t);
+    }, d = s(null);
+    h({ inputDOMRef: d });
+    const x = c(
+      () => D({
+        "--width": e.width,
+        "--height": e.height,
+        "--offset": e.offset,
+        "--thumb-height": e.thumbHeight
+      })
+    );
+    return S(u, (t) => {
+      a.value = t === e.activeValue;
+    }), (t, q) => (r(), C("div", {
+      class: m(w.value),
+      style: H(x.value)
+    }, [
+      l("div", {
         class: "nmorph-switch__content",
-        onClick: o.changeHandler
+        onClick: B
       }, [
-        n("input", {
-          id: o.id,
-          ref: "inputDOMRef",
-          name: o.name,
+        l("input", {
+          id: o(v),
+          ref_key: "inputDOMRef",
+          ref: d,
+          name: o(b),
           type: "checkbox",
-          value: o.props.activeValue,
-          checked: o.initialValue,
-          disabled: o.props.disabled,
-          tabindex: o.tabindex,
+          value: e.activeValue,
+          checked: a.value,
+          disabled: e.disabled,
+          tabindex: o(g),
           class: "nmorph-native-input",
-          onFocus: o.focusHandler,
-          onBlur: o.blurHandler
-        }, null, 40, f),
-        n(
-          "div",
-          {
-            class: r(["nmorph-switch__bg-content", { "nmorph-switch__bg-content--enable": o.initialValue }])
-          },
-          [
-            o.initialValue ? i(e.$slots, "bg-on", { key: 0 }) : i(e.$slots, "bg-off", { key: 1 })
-          ],
-          2
-          /* CLASS */
-        ),
-        n("div", b, [
-          o.props.loading ? (l(), d(o.NmorphIcon, {
+          onFocus: V,
+          onBlur: k
+        }, null, 40, L),
+        l("div", {
+          class: m(["nmorph-switch__bg-content", { "nmorph-switch__bg-content--enable": a.value }])
+        }, [
+          a.value ? i(t.$slots, "bg-on", { key: 0 }) : i(t.$slots, "bg-off", { key: 1 })
+        ], 2),
+        l("div", j, [
+          e.loading ? (r(), M(o(O), {
             key: 0,
             width: "14px",
             height: "14px"
           }, {
-            default: s(() => [
-              h(o.NmorphIconLoaderDots)
+            default: $(() => [
+              I(o(R))
             ]),
             _: 1
-            /* STABLE */
-          })) : o.initialValue ? i(e.$slots, "thumb-on", { key: 1 }) : i(e.$slots, "thumb-off", { key: 2 })
+          })) : a.value ? i(t.$slots, "thumb-on", { key: 1 }) : i(t.$slots, "thumb-off", { key: 2 })
         ])
       ])
-    ],
-    6
-    /* CLASS, STYLE */
-  );
-}
-const x = /* @__PURE__ */ m(a, [["render", p], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-switch/NmorphSwitch.vue"]]);
+    ], 6));
+  }
+});
 export {
-  x as default
+  U as default
 };

package/dist/components/form/nmorph-switch/NmorphSwitch.vue3.js

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