@nmorph/nmorph-ui-kit 2.2.9 → 2.2.12

package/dist/components/form/nmorph-select/components/nmorph-select-option/NmorphSelectOption.vue.js

@@ -0,0 +1,38 @@
+import './NmorphSelectOption.css';
+import c from "./NmorphSelectOption.vue2.js";
+import { openBlock as o, createElementBlock as n, normalizeClass as l, createElementVNode as r, toDisplayString as s, renderSlot as i, createBlock as a, withCtx as m, createVNode as p, createCommentVNode as d } from "vue";
+/* empty css                        */
+import _ from "../../../../../_virtual/_plugin-vue_export-helper.js";
+const h = ["value"], f = { class: "nmorph-select-option__content" };
+function k(t, u, v, e, N, S) {
+  return o(), n("div", {
+    class: l(e.modifiers),
+    onClick: e.clickHandler,
+    value: e.props.value
+  }, [
+    r("div", f, [
+      r(
+        "span",
+        null,
+        s(e.props.label),
+        1
+        /* TEXT */
+      ),
+      i(t.$slots, "default")
+    ]),
+    e.checked ? (o(), a(e.NmorphIcon, {
+      key: 0,
+      class: "nmorph-select-option__checked"
+    }, {
+      default: m(() => [
+        p(e.NmorphIconSuccess)
+      ]),
+      _: 1
+      /* STABLE */
+    })) : d("v-if", !0)
+  ], 10, h);
+}
+const B = /* @__PURE__ */ _(c, [["render", k], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-select/components/nmorph-select-option/NmorphSelectOption.vue"]]);
+export {
+  B as default
+};

package/dist/components/form/nmorph-select/components/nmorph-select-option/NmorphSelectOption.vue2.js

@@ -0,0 +1,43 @@
+import './NmorphSelectOption.css';
+import { defineComponent as f, inject as i, computed as n } from "vue";
+import { NmorphComponentHeight as h } from "../../../../../types/index.js";
+import { useModifiers as g } from "../../../../../utils/create-modifiers.js";
+import v from "../../../../basic/nmorph-icon/NmorphIcon.vue.js";
+import b from "../../../../../assets/icons/success.svg.js";
+const I = /* @__PURE__ */ f({
+  __name: "NmorphSelectOption",
+  props: {
+    value: { type: String, required: !0 },
+    label: { type: String, required: !0, 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: ["change-value"],
+  setup(u, { expose: s, emit: c }) {
+    s();
+    const t = i("select-selected-value"), r = i("select-change-selected-value"), e = u, l = c, p = () => {
+      e.disabled || (l("change-value", e.value), r && r(e.value));
+    }, a = n(() => typeof t?.value == "string" ? t.value === e.value : Array.isArray(t?.value) ? t.value.some((m) => m === e.value) : !1), d = n(
+      () => g({
+        nmorph: [h[e.height]],
+        "nmorph-select-option": [
+          `${e.disabled && "disabled"}`,
+          `${e.label && "with-label"}`,
+          `${a.value && "checked"}`
+        ]
+      })
+    ), o = { selectSelectedValue: t, selectChangeSelectedValue: r, props: e, emit: l, clickHandler: p, checked: a, modifiers: d, get NmorphIcon() {
+      return v;
+    }, get NmorphIconSuccess() {
+      return b;
+    } };
+    return Object.defineProperty(o, "__isScriptSetup", { enumerable: !1, value: !0 }), o;
+  }
+});
+export {
+  I as default
+};

package/dist/components/form/nmorph-select-button/NmorphSelectButton.css

@@ -0,0 +1 @@
+.nmorph-select-button{--track-padding: 4px;--item-size: calc(var(--default-thickness-component) - var(--track-padding) * 2);--item-font-size: var(--font-size-small);display:inline-flex;align-items:center;width:fit-content;padding:var(--track-padding);border-radius:var(--default-border-radius);background:var(--nmorph-main-color);box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-select-button.nmorph-select-button--thin{--item-size: calc(var(--thin-component) - var(--track-padding) * 2);--item-font-size: var(--font-size-extra-small)}.nmorph-select-button.nmorph-select-button--thick{--item-size: calc(var(--thick-component) - var(--track-padding) * 2);--item-font-size: var(--font-size-base)}.nmorph-select-button.nmorph-select-button--disabled{cursor:not-allowed;opacity:.6}.nmorph-select-button.nmorph-select-button--fill{width:100%}.nmorph-select-button.nmorph-select-button--fill>.nmorph-select-button-item{flex:1 1 0;min-width:0}

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

@@ -0,0 +1,43 @@
+import './NmorphSelectButton.css';
+import n from "./NmorphSelectButton.vue2.js";
+import { openBlock as t, createElementBlock as o, normalizeClass as s, Fragment as c, renderList as m, createBlock as i, withCtx as d, createTextVNode as u, toDisplayString as f, renderSlot as p } from "vue";
+/* empty css                        */
+import _ from "../../../_virtual/_plugin-vue_export-helper.js";
+function b(l, h, a, r, v, B) {
+  return t(), o(
+    "div",
+    {
+      class: s(r.modifiers)
+    },
+    [
+      (t(!0), o(
+        c,
+        null,
+        m(a.options, (e) => (t(), i(r.NmorphSelectButtonItem, {
+          key: e.value,
+          value: e.value,
+          disabled: e.disabled
+        }, {
+          default: d(() => [
+            u(
+              f(e.label),
+              1
+              /* TEXT */
+            )
+          ]),
+          _: 2
+          /* DYNAMIC */
+        }, 1032, ["value", "disabled"]))),
+        128
+        /* KEYED_FRAGMENT */
+      )),
+      p(l.$slots, "default")
+    ],
+    2
+    /* CLASS */
+  );
+}
+const y = /* @__PURE__ */ _(n, [["render", b], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-select-button/NmorphSelectButton.vue"]]);
+export {
+  y as default
+};

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

@@ -0,0 +1,44 @@
+import './NmorphSelectButton.css';
+import { defineComponent as p, ref as f, watch as m, computed as c, provide as i } from "vue";
+import { useModifiers as b } from "../../../utils/create-modifiers.js";
+import h from "./components/nmorph-select-button-item/NmorphSelectButtonItem.vue.js";
+const q = /* @__PURE__ */ p({
+  __name: "NmorphSelectButton",
+  props: {
+    modelValue: { type: String, required: !1, default: "" },
+    options: { type: Array, required: !1, default: () => [] },
+    fill: { type: Boolean, required: !1, default: !1 },
+    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"],
+  setup(u, { expose: d, emit: n }) {
+    d();
+    const e = u, r = n, t = f(e.modelValue);
+    m(
+      () => e.modelValue,
+      (l) => {
+        t.value = l;
+      }
+    );
+    const s = c(
+      () => b({
+        "nmorph-select-button": [`${e.disabled && "disabled"}`, `${e.fill && "fill"}`, e.height]
+      })
+    ), a = (l) => {
+      e.disabled || (t.value = l, r("update:model-value", l));
+    };
+    i("select-button-selected-value", t), i("select-button-change-handler", a);
+    const o = { props: e, emit: r, initialValue: t, modifiers: s, changeHandler: a, get NmorphSelectButtonItem() {
+      return h;
+    } };
+    return Object.defineProperty(o, "__isScriptSetup", { enumerable: !1, value: !0 }), o;
+  }
+});
+export {
+  q as default
+};

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

@@ -0,0 +1 @@
+.nmorph-select-button-item{display:inline-flex;align-items:center;justify-content:center;height:var(--item-size);padding:0 var(--indentation-04);border-radius:var(--default-border-radius);cursor:pointer;opacity:.45;font-size:var(--item-font-size)}.nmorph-select-button-item input{position:absolute;width:0;height:0;opacity:0;pointer-events:none}.nmorph-select-button-item:focus-visible{outline:2px solid var(--nmorph-accent-color);outline-offset:2px}.nmorph-select-button-item.nmorph-select-button-item--checked{opacity:1;background:var(--nmorph-main-color);box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-select-button-item.nmorph-select-button-item--disabled{cursor:not-allowed;opacity:.6}

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

@@ -0,0 +1,32 @@
+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"]]);
+export {
+  w as default
+};

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

@@ -0,0 +1,35 @@
+import './NmorphSelectButtonItem.css';
+import { defineComponent as c, inject as i, ref as p, computed as d } from "vue";
+import { useModifiers as f } from "../../../../../utils/create-modifiers.js";
+const v = /* @__PURE__ */ c({
+  __name: "NmorphSelectButtonItem",
+  props: {
+    value: { type: String, required: !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, default: 0 }
+  },
+  setup(o, { expose: s }) {
+    const r = i(
+      "select-button-selected-value",
+      void 0
+    ), t = i(
+      "select-button-change-handler",
+      void 0
+    ), e = o, n = p(null);
+    s({ inputDOMRef: n });
+    const l = d(() => r?.value === e.value), u = d(
+      () => f({
+        "nmorph-select-button-item": [`${l.value && "checked"}`, `${e.disabled && "disabled"}`]
+      })
+    ), a = { selectedValue: r, changeHandler: t, props: e, inputDOMRef: n, checked: l, modifiers: u, clickHandler: () => {
+      e.disabled || t && t(e.value);
+    } };
+    return Object.defineProperty(a, "__isScriptSetup", { enumerable: !1, value: !0 }), a;
+  }
+});
+export {
+  v as default
+};

package/dist/components/form/nmorph-slider/NmorphSlider.css

@@ -0,0 +1 @@
+.nmorph-slider{position:relative;width:100%;height:20px;--slider-height: 24px;--value-fixed-container-height: 18px;cursor:pointer}.nmorph-slider .nmorph-slider__content{display:flex;align-items:center}.nmorph-slider .nmorph-slider__input-wrapper{display:flex;align-items:center;width:100%;height:var(--value-fixed-container-height);border-radius:var(--default-border-radius);background:var(--nmorph-main-color);box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-slider .nmorph-slider__input-container{position:relative;display:flex;align-items:center;width:100%;height:var(--slider-height);touch-action:none}.nmorph-slider .nmorph-slider__thumb{position:absolute;z-index:1;border:0;border-radius:var(--default-border-radius);height:20px;background:var(--nmorph-main-color);box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-slider .nmorph-slider__thumb--smooth{transition:left ease-in-out .2s}.nmorph-slider .nmorph-slider__value{display:flex;justify-content:center;width:var(--value-fixed-container-width);margin-left:var(--indentation-04)}.nmorph-slider .nmorph-slide__native-input{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100%;background:transparent;appearance:none}.nmorph-slider .nmorph-slide__native-input::-webkit-slider-runnable-track{height:var(--slider-height);background:transparent}.nmorph-slider .nmorph-slide__native-input::-moz-range-track{height:var(--slider-height);background:transparent}.nmorph-slider .nmorph-slide__native-input::-webkit-slider-thumb{visibility:hidden}.nmorph-slider .nmorph-slide__native-input::-moz-range-thumb{visibility:hidden}.nmorph-slider.nmorph-slider--fill,.nmorph-slider.nmorph-slider--fill .nmorph-slider__content{width:100%}.nmorph-slider.nmorph-slider--disabled{cursor:not-allowed;opacity:.6}.nmorph-slider.nmorph-slider--disabled .nmorph-slider__input-content{pointer-events:none}.nmorph-slider .nmorph-slider__thumb{width:var(--nmorph-slider-thumb-width)}

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

@@ -0,0 +1,73 @@
+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(_, b, f, o, v, x) {
+  return n(), l(
+    "div",
+    {
+      class: i(o.modifiers),
+      style: r({ "--nmorph-slider-thumb-width": o.thumbWidthCss })
+    },
+    [
+      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
+    /* CLASS, STYLE */
+  );
+}
+const N = /* @__PURE__ */ s(t, [["render", h], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-slider/NmorphSlider.vue"]]);
+export {
+  N as default
+};

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

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

package/dist/components/form/nmorph-switch/NmorphSwitch.css

@@ -0,0 +1 @@
+.nmorph-switch{--height: 20px;--offset: 3px;--thumb-height: 14px;width:40px;height:var(--height);overflow:hidden;border-radius:var(--border-radius-999);cursor:pointer}.nmorph-switch .nmorph-switch__content{position:relative;height:100%;border-radius:var(--border-radius-999);font-weight:400;font-size:var(--font-size-small);line-height:var(--line-height-regular);background:var(--nmorph-main-color);box-shadow:inset var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),inset calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-switch .nmorph-switch__bg-content{position:absolute;top:0;left:0;display:flex;align-items:center;justify-content:flex-end;width:100%;height:100%;padding:8px}.nmorph-switch .nmorph-switch__bg-content.nmorph-switch__bg-content--enable{justify-content:flex-start;color:var(--nmorph-focus-text-color)}.nmorph-switch input{width:100%;height:var(--height);opacity:0}.nmorph-switch .nmorph-switch-thumb{position:absolute;top:var(--offset);left:var(--offset);width:var(--thumb-height);height:var(--thumb-height);border-radius:var(--border-radius-999);transition:left ease-in-out var(--transition-02);display:flex;justify-content:center;align-items:center;background:var(--nmorph-main-color);box-shadow:var(--base-shadow-width) var(--base-shadow-width) var(--base-shadow-blur) var(--nmorph-dark-shade-color),calc(-1 * var(--base-shadow-width)) calc(-1 * var(--base-shadow-width)) var(--base-shadow-blur) var(--nmorph-light-shade-color)}.nmorph-switch.nmorph-switch--disabled{cursor:not-allowed;opacity:.6}.nmorph-switch.nmorph-switch--disabled .nmorph-switch__input-content{pointer-events:none}.nmorph-switch.nmorph-switch--on .nmorph-switch__content{background:var(--nmorph-accent-color);box-shadow:none}.nmorph-switch.nmorph-switch--on .nmorph-switch-thumb{left:calc(100% - 16px);box-shadow:none}.nmorph-switch.nmorph-switch--loading{cursor:not-allowed;opacity:.6}.nmorph-switch.nmorph-switch--loading .nmorph-switch__input-content{pointer-events:none}.nmorph-switch.nmorph-switch--focus{outline:2px solid var(--nmorph-accent-color)}.nmorph-switch.nmorph-switch--focus .nmorph-switch__content{scale:.95}

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

@@ -0,0 +1,63 @@
+import './NmorphSwitch.css';
+import l from "./NmorphSwitch.vue2.js";
+import { openBlock as r, createElementBlock as t, normalizeClass as a, createElementVNode as e, renderSlot as i, createBlock as c, withCtx as d, createVNode as s } from "vue";
+/* empty css                  */
+import m from "../../../_virtual/_plugin-vue_export-helper.js";
+const h = ["id", "name", "value", "disabled", "tabindex"], f = { class: "nmorph-switch-thumb" };
+function b(n, p, _, o, k, u) {
+  return r(), t(
+    "div",
+    {
+      class: a(o.modifiers)
+    },
+    [
+      e("div", {
+        class: "nmorph-switch__content",
+        onClick: o.changeHandler
+      }, [
+        e("input", {
+          id: o.id,
+          ref: "inputDOMRef",
+          name: o.name,
+          type: "checkbox",
+          value: o.initialValue,
+          disabled: o.props.disabled,
+          tabindex: o.tabindex,
+          class: "nmorph-native-input",
+          onFocus: o.focusHandler,
+          onBlur: o.blurHandler
+        }, null, 40, h),
+        e(
+          "div",
+          {
+            class: a(["nmorph-switch__bg-content", { "nmorph-switch__bg-content--enable": o.initialValue }])
+          },
+          [
+            o.initialValue ? i(n.$slots, "bg-on", { key: 0 }) : i(n.$slots, "bg-off", { key: 1 })
+          ],
+          2
+          /* CLASS */
+        ),
+        e("div", f, [
+          o.props.loading ? (r(), c(o.NmorphIcon, {
+            key: 0,
+            width: "14px",
+            height: "14px"
+          }, {
+            default: d(() => [
+              s(o.NmorphIconLoader)
+            ]),
+            _: 1
+            /* STABLE */
+          })) : o.initialValue ? i(n.$slots, "thumb-on", { key: 1 }) : i(n.$slots, "thumb-off", { key: 2 })
+        ])
+      ])
+    ],
+    2
+    /* CLASS */
+  );
+}
+const x = /* @__PURE__ */ m(l, [["render", b], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-switch/NmorphSwitch.vue"]]);
+export {
+  x as default
+};

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

@@ -0,0 +1,57 @@
+import './NmorphSwitch.css';
+import { defineComponent as h, ref as o, computed as y, watch as V } from "vue";
+import { useModifiers as _ } from "../../../utils/create-modifiers.js";
+import { useFormItemInput as q } from "../nmorph-form/use-form-item-input.js";
+import N from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import S from "../../../assets/icons/loader.svg.js";
+const H = /* @__PURE__ */ h({
+  __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 },
+    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(i, { expose: s, emit: d }) {
+    const e = i, { id: f, name: m, tabindex: p } = q(e), l = d, t = o(!1), c = () => {
+      t.value = !0;
+    }, v = () => {
+      t.value = !1;
+    }, b = y(
+      () => _({
+        "nmorph-switch": [
+          `${e.disabled && "disabled"}`,
+          `${a.value ? "on" : "off"}`,
+          `${e.loading && "loading"}`,
+          `${t.value && "focus"}`
+        ]
+      })
+    ), a = o(e.modelValue === e.activeValue), g = () => {
+      if (e.disabled) return;
+      a.value = !a.value;
+      const r = a.value ? e.activeValue : e.inactiveValue;
+      l("update:model-value", r);
+    }, u = o(null);
+    s({ inputDOMRef: u }), V(
+      () => e.modelValue,
+      (r) => {
+        a.value = r === e.activeValue;
+      }
+    );
+    const n = { props: e, id: f, name: m, tabindex: p, emit: l, focus: t, focusHandler: c, blurHandler: v, modifiers: b, initialValue: a, changeHandler: g, inputDOMRef: u, get NmorphIcon() {
+      return N;
+    }, get NmorphIconLoader() {
+      return S;
+    } };
+    return Object.defineProperty(n, "__isScriptSetup", { enumerable: !1, value: !0 }), n;
+  }
+});
+export {
+  H as default
+};

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

@@ -0,0 +1,67 @@
+import p from "./NmorphTextInput.vue2.js";
+import { openBlock as o, createElementBlock as t, normalizeStyle as c, normalizeClass as s, createElementVNode as r, renderSlot as m, createCommentVNode as l, mergeProps as h, withKeys as _, createBlock as i, withCtx as a, createVNode as f, resolveDynamicComponent as y } from "vue";
+import u from "../../../_virtual/_plugin-vue_export-helper.js";
+const b = { class: "nmorph-text-input__input-side" }, x = {
+  key: 0,
+  class: "nmorph-text-input__prepend-icon"
+}, v = ["id", "name", "autocomplete", "tabindex", "type", "placeholder", "disabled", "value"];
+function k(d, n, B, e, N, C) {
+  return o(), t(
+    "div",
+    {
+      class: s(e.modifiers),
+      style: c(e.styles)
+    },
+    [
+      r("div", b, [
+        e.slots["prepend-icon"] ? (o(), t("div", x, [
+          m(d.$slots, "prepend-icon")
+        ])) : l("v-if", !0),
+        r("input", h({
+          id: e.id,
+          ref: "inputDOMRef",
+          name: e.name,
+          autocomplete: e.autocomplete,
+          tabindex: e.tabindex,
+          class: "nmorph-native-input",
+          type: e.type,
+          placeholder: e.props.placeholder,
+          disabled: e.props.disabled,
+          value: e.props.modelValue
+        }, e.props.inputAttrs, {
+          onInput: e.handleInput,
+          onFocus: e.handleFocus,
+          onBlur: e.handleBlur,
+          onKeyup: n[0] || (n[0] = _((I) => e.emit("on-enter"), ["enter"]))
+        }), null, 16, v),
+        e.props.typePassword || e.props.clearable ? (o(), i(e.NmorphButton, {
+          key: 1,
+          disabled: e.props.disabled,
+          class: "nmorph-text-input__password-btn",
+          "style-type": "transparent",
+          width: "32px",
+          height: e.props.height,
+          onClick: e.actionButtonClickHandler
+        }, {
+          default: a(() => [
+            f(e.NmorphIcon, null, {
+              default: a(() => [
+                (o(), i(y(e.actionIcon)))
+              ]),
+              _: 1
+              /* STABLE */
+            })
+          ]),
+          _: 1
+          /* STABLE */
+        }, 8, ["disabled", "height"])) : l("v-if", !0)
+      ])
+    ],
+    6
+    /* CLASS, STYLE */
+  );
+}
+const z = /* @__PURE__ */ u(p, [["render", k], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-text-input/NmorphTextInput.vue"]]);
+export {
+  z as default
+};