@nmorph/nmorph-ui-kit 2.2.10 → 2.2.13

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

@@ -1,6 +1,6 @@
 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";
+import { openBlock as o, createElementBlock as a, withModifiers as p, normalizeClass as c, createElementVNode as r, createCommentVNode as i, toDisplayString as d, renderSlot as l } from "vue";
 /* empty css                 */
 import _ from "../../../_virtual/_plugin-vue_export-helper.js";
 const m = {
@@ -22,17 +22,17 @@ const m = {
   key: 1,
   class: "nmorph-radio__fake"
 };
-function N(i, l, R, e, C, D) {
-  return o(), r(
+function N(n, s, R, e, C, D) {
+  return o(), a(
     "label",
     {
       class: c(e.modifiers),
       onClick: p(e.changeHandler, ["prevent"])
     },
     [
-      e.props.styleType === "radio-style" ? (o(), r("div", m, [
-        a("div", h, [
-          a("input", {
+      e.props.styleType === "radio-style" ? (o(), a("div", m, [
+        r("div", h, [
+          r("input", {
             ref: "inputDOMRef",
             type: "radio",
             name: e.props.label,
@@ -41,25 +41,25 @@ function N(i, l, R, e, C, D) {
             tabindex: e.props.tabindex,
             class: "nmorph-native-input"
           }, null, 8, f),
-          l[0] || (l[0] = a(
+          s[0] || (s[0] = r(
             "div",
             { class: "nmorph-radio__fake" },
             null,
             -1
             /* HOISTED */
           )),
-          e.checked ? (o(), r("div", k)) : n("v-if", !0)
+          e.checked ? (o(), a("div", k)) : i("v-if", !0)
         ]),
-        e.props.label ? (o(), r(
+        e.props.label ? (o(), a(
           "span",
           b,
-          s(e.props.label),
+          d(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", {
+        )) : l(n.$slots, "label", { key: 1 })
+      ])) : i("v-if", !0),
+      e.props.styleType === "button" ? (o(), a("div", v, [
+        r("input", {
           ref: "inputDOMRef",
           type: "radio",
           disabled: e.props.disabled,
@@ -69,18 +69,20 @@ function N(i, l, R, e, C, D) {
           tabindex: e.props.tabindex,
           class: "nmorph-native-input"
         }, null, 8, y),
-        e.props.label ? (o(), r("div", u, [
-          a(
+        e.props.label ? (o(), a("div", u, [
+          r(
             "span",
             null,
-            s(e.props.label),
+            d(e.props.label),
             1
             /* TEXT */
           )
-        ])) : (o(), r("div", x, [
-          d(i.$slots, "label")
+        ])) : (o(), a("div", x, [
+          l(n.$slots, "label", {}, () => [
+            l(n.$slots, "default")
+          ])
         ]))
-      ])) : n("v-if", !0)
+      ])) : i("v-if", !0)
     ],
     2
     /* CLASS */

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

@@ -1,12 +1,12 @@
 import './NmorphRadio.css';
-import { defineComponent as h, inject as r, computed as a, ref as m } from "vue";
+import { defineComponent as h, inject as r, computed as l, ref as m } from "vue";
 import { useModifiers as g } from "../../../utils/create-modifiers.js";
-import { NmorphComponentHeight as v } from "../../../types/index.js";
+import { NmorphSelectionControlHeight 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" },
+    styleType: { type: null, required: !1, default: "button" },
     checked: { type: Boolean, required: !1, default: !1 },
     disabled: { type: Boolean, required: !1, default: !1 },
     label: { type: String, required: !1, default: "" },
@@ -14,22 +14,22 @@ const q = /* @__PURE__ */ h({
     height: { type: null, required: !1 }
   },
   setup(s, { expose: p }) {
-    const l = r(
+    const o = 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 = () => {
+    ), a = 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(
+    }, d = l(() => o?.value === e.value || e.checked), i = l(() => e.height || a?.value || "thin"), f = l(
       () => 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 };
+    const n = { groupSelectedValue: o, changeValue: t, groupHeight: a, props: e, changeHandler: c, checked: d, height: i, modifiers: f, inputDOMRef: u };
     return Object.defineProperty(n, "__isScriptSetup", { enumerable: !1, value: !0 }), n;
   }
 });

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

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

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

@@ -1 +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}
+.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__virtual-list{overflow-y:auto}.nmorph-select .nmorph-select__virtual-spacer{position:relative}.nmorph-select .nmorph-select__virtual-content{position:absolute;top:0;right:0;left:0}.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

@@ -1,30 +1,30 @@
 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";
+import y from "./NmorphSelect.vue2.js";
+import { openBlock as o, createElementBlock as r, normalizeClass as g, createElementVNode as t, withKeys as a, Fragment as i, renderList as c, withModifiers as u, toDisplayString as _, createBlock as n, mergeProps as d, createVNode as v, withCtx as h, normalizeStyle as s, renderSlot as w, createCommentVNode as k } 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 = {
+import x from "../../../_virtual/_plugin-vue_export-helper.js";
+const N = { class: "nmorph-select__content" }, S = ["id", "name", "autocomplete", "tabindex", "disabled"], b = ["value"], H = {
   key: 0,
   class: "nmorph-select__selected-value"
-}, D = {
+}, O = {
   key: 1,
   class: "nmorph-select__selected-value"
-}, H = {
+}, C = {
   key: 2,
   class: "nmorph-select__selected-value"
-}, u = {
+}, D = {
   ref: "optionsDOMRef",
   class: "nmorph-select__options"
 };
-function C(_, I, f, e, S, M) {
+function I(f, m, p, e, M, z) {
   return o(), r(
     "div",
     {
-      class: v(e.modifiers)
+      class: g(e.modifiers)
     },
     [
-      i("div", N, [
-        i("select", {
+      t("div", N, [
+        t("select", {
           id: e.id,
           name: e.name,
           autocomplete: e.autocomplete,
@@ -33,51 +33,51 @@ function C(_, I, f, e, S, M) {
           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"])
+            a(e.spaceHandler, ["space"]),
+            a(e.arrowDownHandler, ["arrow-down"]),
+            a(e.arrowUpHandler, ["arrow-up"]),
+            a(e.enterHandler, ["enter"])
           ]
         }, [
           (o(!0), r(
-            a,
+            i,
             null,
-            d(e.domOptions, (n) => (o(), r("option", {
-              key: n,
-              value: n
-            }, null, 8, x))),
+            c(e.nativeOptions, (l) => (o(), r("option", {
+              key: l,
+              value: l
+            }, null, 8, b))),
             128
             /* KEYED_FRAGMENT */
           ))
-        ], 40, b),
-        i(
+        ], 40, S),
+        t(
           "div",
           {
             ref: "nmorphSelectDOMRef",
             class: "nmorph-select__selected-values-line",
-            onClick: w(e.clickHandler, ["stop"])
+            onClick: u(e.clickHandler, ["stop"])
           },
           [
             typeof e.initialValue == "string" ? (o(), r(
               "div",
-              O,
-              h(e.selectedValueTitle),
+              H,
+              _(e.selectedValueTitle),
               1
               /* TEXT */
             )) : e.initialValue.length === 0 ? (o(), r(
               "div",
-              D,
-              h(e.computedNoElementPlaceholder),
+              O,
+              _(e.computedNoElementPlaceholder),
               1
               /* TEXT */
-            )) : (o(), r("div", H, [
+            )) : (o(), r("div", C, [
               (o(!0), r(
-                a,
+                i,
                 null,
-                d(e.tags, (n) => (o(), l(e.NmorphTagItem, m({
-                  key: n.value,
+                c(e.tags, (l) => (o(), n(e.NmorphTagItem, d({
+                  key: l.value,
                   ref_for: !0
-                }, n, {
+                }, l, {
                   transparent: "",
                   removable: e.tags.length > 1 || !e.props.valueRequired,
                   height: "thin",
@@ -87,9 +87,9 @@ function C(_, I, f, e, S, M) {
                 /* 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 }))
+            v(e.NmorphIcon, { class: "nmorph-select__chevron" }, {
+              default: h(() => [
+                e.props.loading ? (o(), n(e.NmorphIconLoader, { key: 0 })) : (o(), n(e.NmorphIconChevronDown, { key: 1 }))
               ]),
               _: 1
               /* STABLE */
@@ -99,7 +99,7 @@ function C(_, I, f, e, S, M) {
           /* NEED_PATCH */
         )
       ]),
-      e.nmorphSelectDOMRef && !e.props.disabled ? (o(), l(e.NmorphDropdown, {
+      e.nmorphSelectDOMRef && !e.props.disabled ? (o(), n(e.NmorphDropdown, {
         key: 0,
         open: e.open && !e.props.loading,
         "relative-element": e.nmorphSelectDOMRef,
@@ -110,34 +110,91 @@ function C(_, I, f, e, S, M) {
         "z-index": e.props.zIndex,
         onOnOutsideClick: e.closeHandler
       }, {
-        default: c(() => [
-          i(
+        default: h(() => [
+          t(
             "div",
-            u,
+            D,
             [
-              e.props.loading ? (o(), l(e.NmorphIcon, {
+              e.props.loading ? (o(), n(e.NmorphIcon, {
                 key: 0,
                 class: "nmorph-select__chevron",
                 size: "medium"
               }, {
-                default: c(() => [
-                  s(e.NmorphIconChevronDown)
+                default: h(() => [
+                  v(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")
+              })) : e.virtualEnabled ? (o(), r(
+                "div",
+                {
+                  key: 1,
+                  ref: e.virtualList.containerRef,
+                  class: "nmorph-select__virtual-list",
+                  style: s({ maxHeight: e.virtualMaxHeight }),
+                  onScroll: m[0] || (m[0] = (...l) => e.virtualList.scrollHandler && e.virtualList.scrollHandler(...l))
+                },
+                [
+                  t(
+                    "div",
+                    {
+                      class: "nmorph-select__virtual-spacer",
+                      style: s(e.virtualSpacerStyle)
+                    },
+                    [
+                      t(
+                        "div",
+                        {
+                          class: "nmorph-select__virtual-content",
+                          style: s(e.virtualContentStyle)
+                        },
+                        [
+                          (o(!0), r(
+                            i,
+                            null,
+                            c(e.virtualOptions, (l) => (o(), n(e.NmorphSelectOption, d({
+                              key: l.index,
+                              ref_for: !0
+                            }, l.item, {
+                              focused: l.item.value === e.currentFocusedEl,
+                              height: e.props.height
+                            }), null, 16, ["focused", "height"]))),
+                            128
+                            /* KEYED_FRAGMENT */
+                          ))
+                        ],
+                        4
+                        /* STYLE */
+                      )
+                    ],
+                    4
+                    /* STYLE */
+                  )
+                ],
+                36
+                /* STYLE, NEED_HYDRATION */
+              )) : (o(), r(
+                i,
+                { key: 2 },
+                [
+                  (o(!0), r(
+                    i,
+                    null,
+                    c(p.options, (l) => (o(), n(e.NmorphSelectOption, d({
+                      key: l.value,
+                      ref_for: !0
+                    }, l, {
+                      focused: l.value === e.currentFocusedEl,
+                      height: e.props.height
+                    }), null, 16, ["focused", "height"]))),
+                    128
+                    /* KEYED_FRAGMENT */
+                  )),
+                  w(f.$slots, "default")
+                ],
+                64
+                /* STABLE_FRAGMENT */
+              ))
             ],
             512
             /* NEED_PATCH */
@@ -145,13 +202,13 @@ function C(_, I, f, e, S, M) {
         ]),
         _: 3
         /* FORWARDED */
-      }, 8, ["open", "relative-element", "fill-width", "width", "min-width", "z-index"])) : g("v-if", !0)
+      }, 8, ["open", "relative-element", "fill-width", "width", "min-width", "z-index"])) : k("v-if", !0)
     ],
     2
     /* CLASS */
   );
 }
-const E = /* @__PURE__ */ y(p, [["render", C], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-select/NmorphSelect.vue"]]);
+const B = /* @__PURE__ */ x(y, [["render", I], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-select/NmorphSelect.vue"]]);
 export {
-  E as default
+  B as default
 };