@nmorph/nmorph-ui-kit 2.2.52 → 2.2.53

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

@@ -1,138 +1,73 @@
 import './NmorphSlider.css';
-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)
+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 */
+          )
         ])
       ])
-    ], 6));
-  }
-});
+    ],
+    6
+    /* CLASS, STYLE */
+  );
+}
+const P = /* @__PURE__ */ s(t, [["render", _], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-slider/NmorphSlider.vue"]]);
 export {
-  _e as default
+  P as default
 };

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

@@ -0,0 +1,95 @@
+import './NmorphSlider.css';
+import { defineComponent as A, computed as m, ref as o, watch as E, onMounted as G, onUnmounted as J } from "vue";
+import { useModifiers as K } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as Q } from "../../../utils/common.js";
+import { useFormItemInput as Y, useFormItemModel as Z } from "../nmorph-form/use-form-item-input.js";
+import ee from "../../feedback/nmorph-tooltip/NmorphTooltip.vue.js";
+const de = /* @__PURE__ */ A({
+  __name: "NmorphSlider",
+  props: {
+    modelValue: { type: Number, required: !1, default: 0 },
+    max: { type: Number, required: !1, default: 100 },
+    min: { type: Number, required: !1, default: 0 },
+    step: { type: Number, required: !1, default: 1 },
+    fill: { type: Boolean, required: !1, default: !0 },
+    showTooltip: { type: Boolean, required: !1, default: !0 },
+    thumbWidth: { type: Number, required: !1, default: 50 },
+    sliderHeight: { type: [Number, String], required: !1, default: void 0 },
+    valueFixedContainerHeight: { type: [Number, String], required: !1, default: void 0 },
+    id: { type: String, required: !1 },
+    name: { type: String, required: !1 },
+    autocomplete: { type: String, required: !1 },
+    disabled: { type: Boolean, required: !1, default: !1 },
+    tabindex: { type: Number, required: !1 }
+  },
+  emits: ["update:model-value"],
+  setup(L, { expose: N, emit: T }) {
+    N();
+    const e = L, { id: S, name: H, tabindex: _ } = Y(e), C = m(
+      () => K({
+        nmorph: [],
+        "nmorph-slider": [e.disabled && "disabled"]
+      })
+    ), g = m(() => `${e.thumbWidth}px`), p = o(e.showTooltip), x = T, { modelValue: c, updateModelValue: y } = Z(
+      e,
+      (t) => x("update:model-value", t),
+      0
+    ), n = o(c.value), f = o(null);
+    E(n, () => {
+      y(n.value);
+    }), E(c, (t) => {
+      n.value = t;
+    });
+    const P = o(null), V = m(() => {
+      const t = s.value - s.value, r = e.max - e.min + t, u = (n.value - e.min) / r * 100, a = f.value?.clientWidth || 0, d = e.thumbWidth / a * 100, X = d / 2;
+      let $ = u - X;
+      const q = `${Math.max(0, Math.min(100 - d, $))}%`, I = a / 100, j = e.thumbWidth / 2 / I, M = (P.value?.tooltipBody.clientWidth ?? 24) / 2 / I, U = M === 1 / 0 ? 1.714 : M, k = `${parseFloat(q) + j - U}%`;
+      return {
+        thumb: q,
+        tooltip: k
+      };
+    }), s = o(0), h = o(0), v = () => {
+      s.value = window.innerWidth, h.value = window.innerHeight;
+    };
+    G(() => {
+      typeof window < "u" && (s.value = window.innerWidth, h.value = window.innerHeight, window.addEventListener("resize", v));
+    }), J(() => {
+      typeof window < "u" && (document.removeEventListener("pointermove", l), document.removeEventListener("pointerup", i), document.removeEventListener("pointercancel", i), window.removeEventListener("resize", v));
+    });
+    const b = (t) => {
+      w.value = !1;
+      const r = f.value?.getBoundingClientRect();
+      let u = 0;
+      if (r) {
+        const a = t - r.left, d = r.width;
+        u = Math.max(0, Math.min(1, a / d)), n.value = e.min + u * (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));
+    }, l = (t) => {
+      t.preventDefault(), b(t.clientX);
+    }, i = () => {
+      document.removeEventListener("pointermove", l), document.removeEventListener("pointerup", i), document.removeEventListener("pointercancel", i), w.value = !0;
+    }, z = (t) => {
+      e.disabled || t.pointerType === "mouse" && t.button !== 0 || (t.preventDefault(), b(t.clientX), document.addEventListener("pointermove", l), document.addEventListener("pointerup", i), document.addEventListener("pointercancel", i));
+    }, F = o(null), O = () => {
+      e.showTooltip && (p.value = !0);
+    }, B = () => {
+      e.showTooltip && (p.value = !1);
+    }, R = (t) => {
+      const r = t.target;
+      n.value = Number(r.value);
+    }, w = o(!0), D = m(() => ({
+      "--nmorph-slider-thumb-width": g.value,
+      ...Q({
+        "--slider-height": e.sliderHeight,
+        "--value-fixed-container-height": e.valueFixedContainerHeight
+      })
+    })), W = { props: e, id: S, name: H, tabindex: _, modifiers: C, thumbWidthCss: g, tooltipVisible: p, emit: x, modelValue: c, updateModelValue: y, thumbValue: n, sliderContainer: f, tooltipRootRef: P, thumbXPercentPosition: V, windowWidth: s, windowHeight: h, resizeWindowHandler: v, updateThumbValue: b, pointerMove: l, pointerUp: i, pointerDownHandler: z, sliderFirst: F, handleMouseEnter: O, handleMouseLeave: B, nativeInputHandler: R, transitionEnabled: w, styles: D, get NmorphTooltip() {
+      return ee;
+    } };
+    return Object.defineProperty(W, "__isScriptSetup", { enumerable: !1, value: !0 }), W;
+  }
+});
+export {
+  de as default
+};

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

@@ -1,107 +1,65 @@
 import './NmorphSwitch.css';
-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", {
+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", {
         class: "nmorph-switch__content",
-        onClick: B
+        onClick: o.changeHandler
       }, [
-        l("input", {
-          id: o(v),
-          ref_key: "inputDOMRef",
-          ref: d,
-          name: o(b),
+        n("input", {
+          id: o.id,
+          ref: "inputDOMRef",
+          name: o.name,
           type: "checkbox",
-          value: e.activeValue,
-          checked: a.value,
-          disabled: e.disabled,
-          tabindex: o(g),
+          value: o.props.activeValue,
+          checked: o.initialValue,
+          disabled: o.props.disabled,
+          tabindex: o.tabindex,
           class: "nmorph-native-input",
-          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), {
+          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, {
             key: 0,
             width: "14px",
             height: "14px"
           }, {
-            default: $(() => [
-              I(o(R))
+            default: s(() => [
+              h(o.NmorphIconLoaderDots)
             ]),
             _: 1
-          })) : a.value ? i(t.$slots, "thumb-on", { key: 1 }) : i(t.$slots, "thumb-off", { key: 2 })
+            /* STABLE */
+          })) : o.initialValue ? i(e.$slots, "thumb-on", { key: 1 }) : i(e.$slots, "thumb-off", { key: 2 })
         ])
       ])
-    ], 6));
-  }
-});
+    ],
+    6
+    /* CLASS, STYLE */
+  );
+}
+const x = /* @__PURE__ */ m(a, [["render", p], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-switch/NmorphSwitch.vue"]]);
 export {
-  U as default
+  x as default
 };

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

@@ -0,0 +1,72 @@
+import './NmorphSwitch.css';
+import { defineComponent as N, ref as l, computed as n, watch as V } from "vue";
+import { useModifiers as _ } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as I } from "../../../utils/common.js";
+import { useFormItemInput as w, useFormItemModel as B } from "../nmorph-form/use-form-item-input.js";
+import H from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import x from "../../../assets/icons/loader.svg.js";
+const j = /* @__PURE__ */ N({
+  __name: "NmorphSwitch",
+  props: {
+    modelValue: { type: [Boolean, String, Number], required: !1, default: !1 },
+    loading: { type: Boolean, required: !1, default: !1 },
+    activeValue: { type: [Boolean, String, Number], required: !1, default: !0 },
+    inactiveValue: { type: [Boolean, String, Number], required: !1, default: !1 },
+    width: { type: [Number, String], required: !1, default: void 0 },
+    height: { type: [Number, String], required: !1, default: void 0 },
+    offset: { type: [Number, String], required: !1, default: void 0 },
+    thumbHeight: { type: [Number, String], required: !1, default: void 0 },
+    id: { type: String, required: !1 },
+    name: { type: String, required: !1 },
+    autocomplete: { type: String, required: !1 },
+    disabled: { type: Boolean, required: !1, default: !1 },
+    tabindex: { type: Number, required: !1 }
+  },
+  emits: ["update:model-value"],
+  setup(f, { expose: m, emit: p }) {
+    const e = f, { id: c, name: h, tabindex: v } = w(e), u = p, { modelValue: o, updateModelValue: i } = B(
+      e,
+      (a) => u("update:model-value", a),
+      !1
+    ), r = l(!1), g = () => {
+      r.value = !0;
+    }, b = () => {
+      r.value = !1;
+    }, y = n(
+      () => _({
+        "nmorph-switch": [
+          e.disabled && "disabled",
+          t.value ? "on" : "off",
+          e.loading && "loading",
+          r.value && "focus"
+        ]
+      })
+    ), t = l(o.value === e.activeValue), S = () => {
+      if (e.disabled) return;
+      t.value = !t.value;
+      const a = t.value ? e.activeValue : e.inactiveValue;
+      i(a);
+    }, s = l(null);
+    m({ inputDOMRef: s });
+    const q = n(
+      () => I({
+        "--width": e.width,
+        "--height": e.height,
+        "--offset": e.offset,
+        "--thumb-height": e.thumbHeight
+      })
+    );
+    V(o, (a) => {
+      t.value = a === e.activeValue;
+    });
+    const d = { props: e, id: c, name: h, tabindex: v, emit: u, modelValue: o, updateModelValue: i, focus: r, focusHandler: g, blurHandler: b, modifiers: y, initialValue: t, changeHandler: S, inputDOMRef: s, styles: q, get NmorphIcon() {
+      return H;
+    }, get NmorphIconLoaderDots() {
+      return x;
+    } };
+    return Object.defineProperty(d, "__isScriptSetup", { enumerable: !1, value: !0 }), d;
+  }
+});
+export {
+  j as default
+};