@nmorph/nmorph-ui-kit 2.2.7 → 2.2.10

package/dist/components/form/nmorph-radio/NmorphRadio.vue.js

@@ -0,0 +1,92 @@
+import './NmorphRadio.css';
+import t from "./NmorphRadio.vue2.js";
+import { openBlock as o, createElementBlock as r, withModifiers as p, normalizeClass as c, createElementVNode as a, createCommentVNode as n, toDisplayString as s, renderSlot as d } from "vue";
+/* empty css                 */
+import _ from "../../../_virtual/_plugin-vue_export-helper.js";
+const m = {
+  key: 0,
+  class: "nmorph-radio__content"
+}, h = { class: "nmorph-radio__input-wrapper" }, f = ["name", "value", "checked", "tabindex"], k = {
+  key: 0,
+  class: "nmorph-radio__fake-checked"
+}, b = {
+  key: 0,
+  class: "nmorph-radio__label"
+}, v = {
+  key: 1,
+  class: "nmorph-radio__content"
+}, y = ["disabled", "name", "value", "checked", "tabindex"], u = {
+  key: 0,
+  class: "nmorph-radio__fake"
+}, x = {
+  key: 1,
+  class: "nmorph-radio__fake"
+};
+function N(i, l, R, e, C, D) {
+  return o(), r(
+    "label",
+    {
+      class: c(e.modifiers),
+      onClick: p(e.changeHandler, ["prevent"])
+    },
+    [
+      e.props.styleType === "radio-style" ? (o(), r("div", m, [
+        a("div", h, [
+          a("input", {
+            ref: "inputDOMRef",
+            type: "radio",
+            name: e.props.label,
+            value: e.props.value,
+            checked: e.checked,
+            tabindex: e.props.tabindex,
+            class: "nmorph-native-input"
+          }, null, 8, f),
+          l[0] || (l[0] = a(
+            "div",
+            { class: "nmorph-radio__fake" },
+            null,
+            -1
+            /* HOISTED */
+          )),
+          e.checked ? (o(), r("div", k)) : n("v-if", !0)
+        ]),
+        e.props.label ? (o(), r(
+          "span",
+          b,
+          s(e.props.label),
+          1
+          /* TEXT */
+        )) : d(i.$slots, "label", { key: 1 })
+      ])) : n("v-if", !0),
+      e.props.styleType === "button" ? (o(), r("div", v, [
+        a("input", {
+          ref: "inputDOMRef",
+          type: "radio",
+          disabled: e.props.disabled,
+          name: e.props.label,
+          value: e.props.value,
+          checked: e.checked,
+          tabindex: e.props.tabindex,
+          class: "nmorph-native-input"
+        }, null, 8, y),
+        e.props.label ? (o(), r("div", u, [
+          a(
+            "span",
+            null,
+            s(e.props.label),
+            1
+            /* TEXT */
+          )
+        ])) : (o(), r("div", x, [
+          d(i.$slots, "label")
+        ]))
+      ])) : n("v-if", !0)
+    ],
+    2
+    /* CLASS */
+  );
+}
+const E = /* @__PURE__ */ _(t, [["render", N], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-radio/NmorphRadio.vue"]]);
+export {
+  E as default
+};

package/dist/components/form/nmorph-radio/NmorphRadio.vue2.js

@@ -0,0 +1,38 @@
+import './NmorphRadio.css';
+import { defineComponent as h, inject as r, computed as a, ref as m } from "vue";
+import { useModifiers as g } from "../../../utils/create-modifiers.js";
+import { NmorphComponentHeight as v } from "../../../types/index.js";
+const q = /* @__PURE__ */ h({
+  __name: "NmorphRadio",
+  props: {
+    value: { type: String, required: !1, default: "" },
+    styleType: { type: null, required: !1, default: "radio-style" },
+    checked: { type: Boolean, required: !1, default: !1 },
+    disabled: { type: Boolean, required: !1, default: !1 },
+    label: { type: String, required: !1, default: "" },
+    tabindex: { type: Number, required: !1, default: 0 },
+    height: { type: null, required: !1 }
+  },
+  setup(s, { expose: p }) {
+    const l = r(
+      "radio-group-selected-value",
+      void 0
+    ), t = r(
+      "change-radio-button-value-handler",
+      void 0
+    ), o = r("radio-group-height", void 0), e = s, c = () => {
+      t && !e.disabled && t(e.value);
+    }, d = a(() => l?.value === e.value || e.checked), i = a(() => e.height || o?.value || "thin"), f = a(
+      () => g({
+        nmorph: [v[i.value]],
+        "nmorph-radio": [`${e.disabled && "disabled"}`, `${d.value && "checked"}`, e.styleType]
+      })
+    ), u = m(null);
+    p({ inputDOMRef: u });
+    const n = { groupSelectedValue: l, changeValue: t, groupHeight: o, props: e, changeHandler: c, checked: d, height: i, modifiers: f, inputDOMRef: u };
+    return Object.defineProperty(n, "__isScriptSetup", { enumerable: !1, value: !0 }), n;
+  }
+});
+export {
+  q as default
+};

package/dist/components/form/nmorph-radio-group/NmorphRadioGroup.css

@@ -0,0 +1 @@
+.nmorph-radio-group{display:inline-block}.nmorph-radio-group .nmorph-radio-group__wrapper{display:flex;align-items:center}.nmorph-radio-group .nmorph-radio-group__content{display:flex;flex-flow:row wrap;width:100%}.nmorph-radio-group .nmorph-radio:not(:last-child){margin-right:var(--indentation-03)}.nmorph-radio-group.nmorph-radio-group--column .nmorph-radio-group__content{flex-direction:column;align-items:flex-start}.nmorph-radio-group.nmorph-radio-group--column .nmorph-radio:not(:last-child){margin-right:var(--indentation-00);margin-bottom:var(--indentation-03)}

package/dist/components/form/nmorph-radio-group/NmorphRadioGroup.vue.js

@@ -0,0 +1,42 @@
+import './NmorphRadioGroup.css';
+import i from "./NmorphRadioGroup.vue2.js";
+import { openBlock as o, createElementBlock as a, normalizeClass as s, createElementVNode as l, Fragment as n, renderList as p, createBlock as m, renderSlot as c } from "vue";
+/* empty css                      */
+import h from "../../../_virtual/_plugin-vue_export-helper.js";
+const _ = { class: "nmorph-radio-group__wrapper" }, u = { class: "nmorph-radio-group__content" };
+function b(t, f, d, r, g, v) {
+  return o(), a(
+    "div",
+    {
+      class: s(r.modifiers)
+    },
+    [
+      l("div", _, [
+        l("div", u, [
+          (o(!0), a(
+            n,
+            null,
+            p(d.options, (e) => (o(), m(r.NmorphRadio, {
+              key: e.value,
+              label: e.label,
+              value: e.value,
+              disabled: e.disabled || r.props.disabled,
+              "style-type": r.props.styleType,
+              tabindex: e.tabindex,
+              height: e.height || r.props.height
+            }, null, 8, ["label", "value", "disabled", "style-type", "tabindex", "height"]))),
+            128
+            /* KEYED_FRAGMENT */
+          )),
+          c(t.$slots, "default")
+        ])
+      ])
+    ],
+    2
+    /* CLASS */
+  );
+}
+const B = /* @__PURE__ */ h(i, [["render", b], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-radio-group/NmorphRadioGroup.vue"]]);
+export {
+  B as default
+};

package/dist/components/form/nmorph-radio-group/NmorphRadioGroup.vue2.js

@@ -0,0 +1,41 @@
+import './NmorphRadioGroup.css';
+import { defineComponent as m, ref as c, watch as h, computed as d, provide as a } from "vue";
+import { useModifiers as y } from "../../../utils/create-modifiers.js";
+import g from "../nmorph-radio/NmorphRadio.vue.js";
+const b = /* @__PURE__ */ m({
+  __name: "NmorphRadioGroup",
+  props: {
+    modelValue: { type: String, required: !0, default: "" },
+    options: { type: Array, required: !1, default: () => [] },
+    styleType: { type: null, required: !1, default: "radio-style" },
+    direction: { type: null, required: !1, default: "row" },
+    id: { type: String, required: !1 },
+    name: { type: String, required: !1 },
+    autocomplete: { type: String, required: !1 },
+    height: { type: null, required: !1, default: "thin" },
+    disabled: { type: Boolean, required: !1, default: !1 },
+    tabindex: { type: Number, required: !1 }
+  },
+  emits: ["update:model-value"],
+  setup(p, { expose: n, emit: s }) {
+    n();
+    const e = p, r = c(e.modelValue);
+    h(
+      () => e.modelValue,
+      (t) => {
+        r.value = t;
+      }
+    );
+    const o = s, i = (t) => {
+      r.value = t, o("update:model-value", r.value);
+    }, f = d(() => y({ "nmorph-radio-group": [e.styleType, e.direction] })), l = d(() => e.height);
+    a("radio-group-selected-value", r), a("change-radio-button-value-handler", i), a("radio-group-height", l);
+    const u = { props: e, initialValue: r, emit: o, changeHandler: i, modifiers: f, height: l, get NmorphRadio() {
+      return g;
+    } };
+    return Object.defineProperty(u, "__isScriptSetup", { enumerable: !1, value: !0 }), u;
+  }
+});
+export {
+  b as default
+};

package/dist/components/form/nmorph-select/NmorphSelect.css

@@ -0,0 +1 @@
+.nmorph-select{--base-width: 200px;width:var(--base-width);height:var(--height);cursor:pointer}.nmorph-select .nmorph-select__content{position:relative;height:100%;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 .nmorph-select__selected-values-line{display:flex;align-items:center;justify-content:space-between;height:100%;padding:var(--indentation-00) var(--default-indentation-input);border-radius:var(--default-border-radius)}.nmorph-select .nmorph-select__selected-value{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nmorph-select select,.nmorph-select option{opacity:0;width:0;height:0;border:none;padding:0;position:absolute}.nmorph-select.nmorph-select--loading .nmorph-select__options{display:flex;justify-content:center;padding:16px}.nmorph-select.nmorph-select--disabled{cursor:not-allowed;opacity:.6}.nmorph-select.nmorph-select--fill{width:100%}.nmorph-select.nmorph-select--options-auto-width .nmorph-select__options{width:max-content;max-width:calc(100vw - var(--indentation-02) * 2)}.nmorph-select.nmorph-select--open .nmorph-select__chevron{transform:rotate(180deg)}.nmorph-select.nmorph-select--open .nmorph-select__content{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.nmorph-select--selected-line-outset .nmorph-select__content{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.nmorph-select--focus{outline:2px solid var(--nmorph-accent-color)}.nmorph-select.nmorph-select--focus .nmorph-select__content{box-shadow:none}

package/dist/components/form/nmorph-select/NmorphSelect.vue.js

@@ -0,0 +1,157 @@
+import './NmorphSelect.css';
+import p from "./NmorphSelect.vue2.js";
+import { openBlock as o, createElementBlock as r, normalizeClass as v, createElementVNode as i, withKeys as t, Fragment as a, renderList as d, withModifiers as w, toDisplayString as h, createBlock as l, mergeProps as m, createVNode as s, withCtx as c, renderSlot as k, createCommentVNode as g } from "vue";
+/* empty css                  */
+import y from "../../../_virtual/_plugin-vue_export-helper.js";
+const N = { class: "nmorph-select__content" }, b = ["id", "name", "autocomplete", "tabindex", "disabled"], x = ["value"], O = {
+  key: 0,
+  class: "nmorph-select__selected-value"
+}, D = {
+  key: 1,
+  class: "nmorph-select__selected-value"
+}, H = {
+  key: 2,
+  class: "nmorph-select__selected-value"
+}, u = {
+  ref: "optionsDOMRef",
+  class: "nmorph-select__options"
+};
+function C(_, I, f, e, S, M) {
+  return o(), r(
+    "div",
+    {
+      class: v(e.modifiers)
+    },
+    [
+      i("div", N, [
+        i("select", {
+          id: e.id,
+          name: e.name,
+          autocomplete: e.autocomplete,
+          tabindex: e.tabindex,
+          disabled: e.disabledInput,
+          onFocus: e.focusHandler,
+          onBlur: e.blurHandler,
+          onKeydown: [
+            t(e.spaceHandler, ["space"]),
+            t(e.arrowDownHandler, ["arrow-down"]),
+            t(e.arrowUpHandler, ["arrow-up"]),
+            t(e.enterHandler, ["enter"])
+          ]
+        }, [
+          (o(!0), r(
+            a,
+            null,
+            d(e.domOptions, (n) => (o(), r("option", {
+              key: n,
+              value: n
+            }, null, 8, x))),
+            128
+            /* KEYED_FRAGMENT */
+          ))
+        ], 40, b),
+        i(
+          "div",
+          {
+            ref: "nmorphSelectDOMRef",
+            class: "nmorph-select__selected-values-line",
+            onClick: w(e.clickHandler, ["stop"])
+          },
+          [
+            typeof e.initialValue == "string" ? (o(), r(
+              "div",
+              O,
+              h(e.selectedValueTitle),
+              1
+              /* TEXT */
+            )) : e.initialValue.length === 0 ? (o(), r(
+              "div",
+              D,
+              h(e.computedNoElementPlaceholder),
+              1
+              /* TEXT */
+            )) : (o(), r("div", H, [
+              (o(!0), r(
+                a,
+                null,
+                d(e.tags, (n) => (o(), l(e.NmorphTagItem, m({
+                  key: n.value,
+                  ref_for: !0
+                }, n, {
+                  transparent: "",
+                  removable: e.tags.length > 1 || !e.props.valueRequired,
+                  height: "thin",
+                  onClose: e.changeHandler
+                }), null, 16, ["removable"]))),
+                128
+                /* KEYED_FRAGMENT */
+              ))
+            ])),
+            s(e.NmorphIcon, { class: "nmorph-select__chevron" }, {
+              default: c(() => [
+                e.props.loading ? (o(), l(e.NmorphIconLoader, { key: 0 })) : (o(), l(e.NmorphIconChevronDown, { key: 1 }))
+              ]),
+              _: 1
+              /* STABLE */
+            })
+          ],
+          512
+          /* NEED_PATCH */
+        )
+      ]),
+      e.nmorphSelectDOMRef && !e.props.disabled ? (o(), l(e.NmorphDropdown, {
+        key: 0,
+        open: e.open && !e.props.loading,
+        "relative-element": e.nmorphSelectDOMRef,
+        "fill-width": !e.autoOptionsWidth,
+        width: e.autoOptionsWidth ? "max-content" : void 0,
+        "min-width": e.optionsMinWidth,
+        "max-width": "calc(100vw - 16px)",
+        "z-index": e.props.zIndex,
+        onOnOutsideClick: e.closeHandler
+      }, {
+        default: c(() => [
+          i(
+            "div",
+            u,
+            [
+              e.props.loading ? (o(), l(e.NmorphIcon, {
+                key: 0,
+                class: "nmorph-select__chevron",
+                size: "medium"
+              }, {
+                default: c(() => [
+                  s(e.NmorphIconChevronDown)
+                ]),
+                _: 1
+                /* STABLE */
+              })) : (o(!0), r(
+                a,
+                { key: 1 },
+                d(f.options, (n) => (o(), l(e.NmorphSelectOption, m({
+                  key: n.value,
+                  ref_for: !0
+                }, n, {
+                  height: e.props.height
+                }), null, 16, ["height"]))),
+                128
+                /* KEYED_FRAGMENT */
+              )),
+              k(_.$slots, "default")
+            ],
+            512
+            /* NEED_PATCH */
+          )
+        ]),
+        _: 3
+        /* FORWARDED */
+      }, 8, ["open", "relative-element", "fill-width", "width", "min-width", "z-index"])) : g("v-if", !0)
+    ],
+    2
+    /* CLASS */
+  );
+}
+const E = /* @__PURE__ */ y(p, [["render", C], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-select/NmorphSelect.vue"]]);
+export {
+  E as default
+};

package/dist/components/form/nmorph-select/NmorphSelect.vue2.js

@@ -0,0 +1,128 @@
+import './NmorphSelect.css';
+import { defineComponent as U, computed as n, ref as o, watch as N, onMounted as F, nextTick as j, onUnmounted as z, provide as E } from "vue";
+import { NmorphComponentHeight as G } from "../../../types/index.js";
+import { useModifiers as J } from "../../../utils/create-modifiers.js";
+import { useI18n as K } from "vue-i18n";
+import { useFormItemInput as Q } from "../nmorph-form/use-form-item-input.js";
+import X from "../../navigation/nmorph-dropdown/NmorphDropdown.vue.js";
+import Y from "./components/nmorph-select-option/NmorphSelectOption.vue.js";
+import Z from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import ee from "../../data/nmorph-tag-list/components/nmorph-tag-item/NmorphTagItem.vue.js";
+import te from "../../../assets/icons/chevron-down.svg.js";
+import le from "../../../assets/icons/loader.svg.js";
+const ye = /* @__PURE__ */ U({
+  __name: "NmorphSelect",
+  props: {
+    noElementPlaceholder: { type: String, required: !1, default: "" },
+    valueRequired: { type: Boolean, required: !1, default: !1 },
+    options: { type: Array, required: !1, default: () => [] },
+    optionsMap: { type: Array, required: !1, default: () => [] },
+    modelValue: { type: [String, Array], required: !1, default: "" },
+    loading: { type: Boolean, required: !1, default: !1 },
+    open: { type: Boolean, required: !1, default: !1 },
+    fill: { type: Boolean, required: !1, default: !1 },
+    optionsWidth: { type: String, required: !1, default: "truncate" },
+    zIndex: { type: Number, required: !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(M, { expose: _, emit: $ }) {
+    _();
+    const { t: H } = K(), t = M, I = n(
+      () => t.noElementPlaceholder ? t.noElementPlaceholder : H("noElementPlaceholder")
+    ), v = $, e = o(t.modelValue), r = o(t.open), u = n(() => t.disabled || t.loading), m = n(() => t.optionsWidth === "auto"), c = o(null), w = o(null), h = o(!0), { id: V, name: D, autocomplete: O, tabindex: L } = Q(t), g = (l) => {
+      if (!u.value) {
+        if (r.value = !1, typeof e.value == "string" && (!t.valueRequired && e.value === l ? e.value = "" : e.value = l, v("update:model-value", e.value)), Array.isArray(e.value)) {
+          const a = e.value.includes(l), A = e.value.length === 1 && a;
+          if (t.valueRequired && A) return;
+          a ? e.value = e.value.filter((b) => b !== l) : e.value = [...e.value, l];
+        }
+        v("update:model-value", e.value);
+      }
+    }, p = o(!1), P = () => {
+      p.value = !0;
+    }, B = () => {
+      p.value = !1;
+    }, R = n(
+      () => J({
+        nmorph: [G[t.height]],
+        "nmorph-select": [
+          `${t.disabled && "disabled"}`,
+          `${t.modelValue ? "on" : "off"}`,
+          `${t.loading && "loading"}`,
+          `${r.value && !u.value && "open"}`,
+          `${t.fill && "fill"}`,
+          `${m.value && "options-auto-width"}`,
+          `${h.value ? "selected-line-outset" : "selected-line-inset"}`,
+          `${p.value && "focus"}`
+        ]
+      })
+    ), W = () => {
+      u.value || (r.value = !r.value);
+    };
+    N(
+      r,
+      (l) => {
+        l && (h.value = !1);
+      },
+      { immediate: !0 }
+    );
+    const y = () => {
+      r.value = !1;
+    };
+    N(
+      () => t.loading,
+      (l) => {
+        l && (r.value = !1);
+      }
+    );
+    const f = o(), i = o([]), s = o(0), d = o("");
+    N(s, (l) => {
+      d.value = i.value[l], f.value.forEach((a) => {
+        const b = a.getAttribute("value") === d.value ? "add" : "remove";
+        a.classList[b]("nmorph-select-option--focused");
+      });
+    }), F(async () => {
+      await j(), c.value && (f.value = c.value.querySelectorAll(".nmorph-select-option"), f.value.forEach((l) => {
+        const a = l.getAttribute("value");
+        a && i.value.push(a);
+      }), d.value = i.value[s.value], w.value = `${c.value.clientHeight}px`, document.addEventListener("click", y));
+    }), z(() => {
+      document.removeEventListener("click", y);
+    });
+    const k = n(() => typeof e.value == "string" ? e.value === "" ? I.value : t.options.find((l) => l.value === e.value)?.label : t.options.find((l) => l.value === e.value)?.label), q = n(() => t.options.length > 0 ? t.options : t.optionsMap), C = n(() => q.value.length > 0 ? q.value.filter((a) => e.value.includes(a.value)).map((a) => ({ text: a.label, value: a.value })) : Array.isArray(e.value) ? e.value.map((a) => ({ text: a, value: a })) : [{ text: e.value, value: e.value }]);
+    E("select-selected-value", e), E("select-change-selected-value", g);
+    const S = o(null), T = n(
+      () => m.value ? `${S.value?.clientWidth || 0}px` : void 0
+    ), x = { t: H, props: t, computedNoElementPlaceholder: I, emit: v, initialValue: e, open: r, disabledInput: u, autoOptionsWidth: m, optionsDOMRef: c, optionsHeight: w, selectedLineOutset: h, id: V, name: D, autocomplete: O, tabindex: L, changeHandler: g, focus: p, focusHandler: P, blurHandler: B, modifiers: R, clickHandler: W, closeHandler: y, nodeOptions: f, domOptions: i, currentIndex: s, currentFocusedEl: d, selectedValueTitle: k, optionsMap: q, tags: C, nmorphSelectDOMRef: S, optionsMinWidth: T, spaceHandler: () => {
+      u.value || (r.value = !r.value);
+    }, arrowDownHandler: () => {
+      u.value || (s.value = (s.value + 1) % i.value.length);
+    }, arrowUpHandler: () => {
+      u.value || (s.value = (s.value - 1 + i.value.length) % i.value.length);
+    }, enterHandler: () => {
+      r.value && g(d.value);
+    }, get NmorphTagItem() {
+      return ee;
+    }, get NmorphIcon() {
+      return Z;
+    }, get NmorphSelectOption() {
+      return Y;
+    }, get NmorphDropdown() {
+      return X;
+    }, get NmorphIconLoader() {
+      return le;
+    }, get NmorphIconChevronDown() {
+      return te;
+    } };
+    return Object.defineProperty(x, "__isScriptSetup", { enumerable: !1, value: !0 }), x;
+  }
+});
+export {
+  ye as default
+};

package/dist/components/form/nmorph-select/components/nmorph-select-option/NmorphSelectOption.css

@@ -0,0 +1 @@
+.nmorph-select-option{--hover-bg: var(--nmorph-accent-color);--hover-color: var(--nmorph-white-color);display:flex;align-items:center;justify-content:space-between;gap:var(--indentation-01);box-sizing:border-box;min-width:0;padding:var(--indentation-00) var(--default-indentation-input);cursor:pointer}.nmorph-select-option .nmorph-select-option__content{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nmorph-select-option .nmorph-select-option__content span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nmorph-select-option .nmorph-select-option__checked{flex:0 0 auto}.nmorph-select-option:not(.nmorph-select-option--disabled):hover{background:var(--hover-bg)}.nmorph-select-option:not(.nmorph-select-option--disabled):hover span{color:var(--hover-color)}.nmorph-select-option:not(.nmorph-select-option--disabled):hover .nmorph-select-option__checked{--color: var(--hover-color)}.nmorph-select-option.nmorph-select-option--focused:not(.nmorph-select-option--disabled){background:var(--hover-bg)}.nmorph-select-option.nmorph-select-option--focused:not(.nmorph-select-option--disabled) span{color:var(--hover-color)}.nmorph-select-option.nmorph-select-option--focused:not(.nmorph-select-option--disabled) .nmorph-select-option__checked{--color: var(--hover-color)}.nmorph-select-option.nmorph-select-option--disabled{cursor:not-allowed;opacity:.6;pointer-events:none}

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
+};