@nmorph/nmorph-ui-kit 2.2.59 → 3.0.0

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

@@ -1,38 +1,38 @@
 import './NmorphRadio.css';
-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 { NmorphSelectionControlHeight as v } from "../../../types/common.types.js";
-const q = /* @__PURE__ */ h({
+import { defineComponent as v, inject as n, computed as r, ref as g } from "vue";
+import { useModifiers as b } from "../../../utils/create-modifiers.js";
+import { NmorphSelectionControlThickness as k } from "../../../types/common.types.js";
+const S = /* @__PURE__ */ v({
   __name: "NmorphRadio",
   props: {
-    value: { type: String, required: !1, default: "" },
-    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: "" },
+    value: { type: String, required: !1, default: "" },
     tabindex: { type: Number, required: !1, default: 0 },
-    height: { type: null, required: !1 }
+    checked: { type: Boolean, required: !1, default: !1 },
+    design: { type: String, required: !1, default: "nmorph" },
+    thickness: { type: null, required: !1 }
   },
-  setup(s, { expose: p }) {
-    const o = r(
+  setup(p, { expose: f }) {
+    const o = n(
       "radio-group-selected-value",
       void 0
-    ), t = r(
+    ), t = n(
       "change-radio-button-value-handler",
       void 0
-    ), a = r("radio-group-height", void 0), e = s, c = () => {
+    ), i = n("radio-group-thickness", void 0), e = p, h = () => {
       t && !e.disabled && t(e.value);
-    }, 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]
+    }, l = r(() => o?.value === e.value || e.checked), a = r(() => e.design || "nmorph"), s = r(() => e.thickness || i?.value || "basic"), u = r(() => a.value !== "plain" && s.value === "extra-thin" ? "basic" : s.value), m = r(
+      () => b({
+        nmorph: [k[u.value]],
+        "nmorph-radio": [e.disabled && "disabled", l.value && "checked", a.value]
       })
-    ), u = m(null);
-    p({ 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;
+    ), d = g(null);
+    f({ inputDOMRef: d });
+    const c = { groupSelectedValue: o, changeValue: t, groupThickness: i, props: e, changeHandler: h, checked: l, resolvedDesign: a, requestedThickness: s, thickness: u, modifiers: m, inputDOMRef: d };
+    return Object.defineProperty(c, "__isScriptSetup", { enumerable: !1, value: !0 }), c;
   }
 });
 export {
-  q as default
+  S as default
 };

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

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

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

@@ -1,43 +1,43 @@
 import './NmorphRadioGroup.css';
-import { defineComponent as h, ref as y, watch as g, computed as n, provide as a } from "vue";
+import { defineComponent as g, ref as h, watch as y, computed as n, provide as a } from "vue";
 import { useModifiers as q } from "../../../utils/create-modifiers.js";
 import { useFormItemModel as v } from "../nmorph-form/use-form-item-input.js";
 import _ from "../nmorph-radio/NmorphRadio.vue.js";
-const x = /* @__PURE__ */ h({
+const V = /* @__PURE__ */ g({
   __name: "NmorphRadioGroup",
   props: {
-    modelValue: { type: String, required: !1, default: "" },
-    options: { type: Array, required: !1, default: () => [] },
-    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 },
     disabled: { type: Boolean, required: !1, default: !1 },
-    tabindex: { type: Number, required: !1 }
+    tabindex: { type: Number, required: !1 },
+    modelValue: { type: String, required: !1, default: "" },
+    options: { type: Array, required: !1, default: () => [] },
+    direction: { type: null, required: !1, default: "row" },
+    design: { type: String, required: !1, default: "nmorph" },
+    thickness: { type: null, required: !1, default: "basic" }
   },
   emits: ["update:model-value"],
-  setup(s, { expose: m, emit: f }) {
+  setup(p, { expose: m, emit: f }) {
     m();
-    const e = s, i = f, { modelValue: o, updateModelValue: l } = v(
+    const e = p, i = f, { modelValue: o, updateModelValue: u } = v(
       e,
-      (r) => i("update:model-value", r),
+      (t) => i("update:model-value", t),
       ""
-    ), t = y(o.value);
-    g(o, (r) => {
-      t.value = r;
+    ), r = h(o.value);
+    y(o, (t) => {
+      r.value = t;
     });
-    const u = (r) => {
-      t.value = r, l(t.value);
-    }, c = n(() => q({ "nmorph-radio-group": [e.styleType, e.direction] })), d = n(() => e.height);
-    a("radio-group-selected-value", t), a("change-radio-button-value-handler", u), a("radio-group-height", d);
-    const p = { props: e, emit: i, modelValue: o, updateModelValue: l, initialValue: t, changeHandler: u, modifiers: c, height: d, get NmorphRadio() {
+    const d = (t) => {
+      r.value = t, u(r.value);
+    }, c = n(() => q({ "nmorph-radio-group": [e.design, e.direction] })), l = n(() => e.thickness);
+    a("radio-group-selected-value", r), a("change-radio-button-value-handler", d), a("radio-group-thickness", l);
+    const s = { props: e, emit: i, modelValue: o, updateModelValue: u, initialValue: r, changeHandler: d, modifiers: c, thickness: l, get NmorphRadio() {
       return _;
     } };
-    return Object.defineProperty(p, "__isScriptSetup", { enumerable: !1, value: !0 }), p;
+    return Object.defineProperty(s, "__isScriptSetup", { enumerable: !1, value: !0 }), s;
   }
 });
 export {
-  x as default
+  V as default
 };

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

@@ -1 +1 @@
-.nmorph-select{--base-width: 200px;width:var(--base-width);height:var(--height);border-radius:var(--default-border-radius);cursor:pointer}.nmorph-select .nmorph-select__content{position:relative;height:100%;background:var(--nmorph-main-color);border-radius:inherit;box-shadow:var(--nmorph-shadow-outset)}.nmorph-select .nmorph-select__selected-values-line{display:flex;justify-content:space-between;align-items:center;height:100%;padding:var(--indentation-00) var(--default-indentation-input);border-radius:inherit}.nmorph-select .nmorph-select__selected-value{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.nmorph-select select,.nmorph-select option{position:absolute;width:0;height:0;padding:0;border:none;opacity:0}.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:var(--nmorph-shadow-inset)}.nmorph-select.nmorph-select--selected-line-outset .nmorph-select__content{background:var(--nmorph-main-color);box-shadow:var(--nmorph-shadow-outset)}.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{--nmorph-private-select-width: 200px;width:var(--nmorph-private-select-width);height:var(--nmorph-private-control-height);border-radius:var(--default-border-radius);cursor:pointer}.nmorph-select .nmorph-select__content{position:relative;height:100%;background:var(--nmorph-main-color);border-radius:inherit;box-shadow:var(--nmorph-shadow-outset)}.nmorph-select .nmorph-select__selected-values-line{display:flex;justify-content:space-between;align-items:center;height:100%;padding:var(--indentation-00) var(--default-indentation-input);border-radius:inherit}.nmorph-select .nmorph-select__selected-value{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transform:translateY(var(--nmorph-private-control-text-offset-y))}.nmorph-select select,.nmorph-select option{position:absolute;width:0;height:0;padding:0;border:none;opacity:0}.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:var(--nmorph-shadow-inset)}.nmorph-select.nmorph-select--selected-line-outset .nmorph-select__content{background:var(--nmorph-main-color);box-shadow:var(--nmorph-shadow-outset)}.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,28 +1,28 @@
 import './NmorphSelect.css';
-import w from "./NmorphSelect.vue2.js";
-import { openBlock as o, createElementBlock as l, normalizeStyle as c, normalizeClass as x, createElementVNode as t, withKeys as a, withModifiers as n, Fragment as d, renderList as h, toDisplayString as _, createBlock as i, mergeProps as m, createVNode as f, withCtx as s, renderSlot as b, createCommentVNode as k } from "vue";
+import y from "./NmorphSelect.vue2.js";
+import { openBlock as r, createElementBlock as o, normalizeStyle as t, normalizeClass as x, createElementVNode as i, withKeys as a, withModifiers as n, Fragment as c, renderList as s, toDisplayString as v, createBlock as d, createVNode as _, withCtx as h, renderSlot as w, createCommentVNode as u } from "vue";
 /* empty css                  */
-import H from "../../../_virtual/_plugin-vue_export-helper.js";
-const N = { class: "nmorph-select__content" }, S = ["id", "name", "autocomplete", "tabindex", "disabled", "aria-expanded", "aria-controls", "aria-activedescendant", "onKeydown"], I = ["value"], O = {
+import g from "../../../_virtual/_plugin-vue_export-helper.js";
+const H = { class: "nmorph-select__content" }, I = ["id", "name", "autocomplete", "tabindex", "disabled", "aria-expanded", "aria-controls", "aria-activedescendant", "onKeydown"], N = ["value"], S = {
   key: 0,
   class: "nmorph-select__selected-value"
-}, u = {
+}, p = {
   key: 1,
   class: "nmorph-select__selected-value"
-}, D = {
+}, C = {
   key: 2,
   class: "nmorph-select__selected-value"
-}, C = ["id"];
-function E(y, v, p, e, M, R) {
-  return o(), l(
+}, D = ["id"];
+function E(b, m, f, e, O, M) {
+  return r(), o(
     "div",
     {
       class: x(e.modifiers),
-      style: c(e.styles)
+      style: t(e.styles)
     },
     [
-      t("div", N, [
-        t("select", {
+      i("div", H, [
+        i("select", {
           id: e.id,
           name: e.name,
           autocomplete: e.autocomplete,
@@ -44,18 +44,18 @@ function E(y, v, p, e, M, R) {
             a(n(e.endHandler, ["prevent"]), ["end"])
           ]
         }, [
-          (o(!0), l(
-            d,
+          (r(!0), o(
+            c,
             null,
-            h(e.nativeOptions, (r) => (o(), l("option", {
-              key: r,
-              value: r
-            }, null, 8, I))),
+            s(e.nativeOptions, (l) => (r(), o("option", {
+              key: l,
+              value: l
+            }, null, 8, N))),
             128
             /* KEYED_FRAGMENT */
           ))
-        ], 40, S),
-        t(
+        ], 40, I),
+        i(
           "div",
           {
             ref: "nmorphSelectDOMRef",
@@ -64,37 +64,38 @@ function E(y, v, p, e, M, R) {
             onClick: n(e.clickHandler, ["stop"])
           },
           [
-            Array.isArray(e.initialValue) ? e.initialValue.length === 0 ? (o(), l(
+            Array.isArray(e.initialValue) ? e.initialValue.length === 0 ? (r(), o(
               "div",
-              u,
-              _(e.computedNoElementPlaceholder),
+              p,
+              v(e.computedNoElementPlaceholder),
               1
               /* TEXT */
-            )) : (o(), l("div", D, [
-              (o(!0), l(
-                d,
+            )) : (r(), o("div", C, [
+              (r(!0), o(
+                c,
                 null,
-                h(e.tags, (r) => (o(), i(e.NmorphTagItem, m({
-                  key: r.value
-                }, { ref_for: !0 }, r, {
+                s(e.tags, (l) => (r(), d(e.NmorphTagItem, {
+                  key: l.value,
+                  value: l.value,
+                  text: l.text,
                   transparent: "",
                   removable: e.tags.length > 1 || !e.props.valueRequired,
-                  height: "thin",
+                  thickness: "thin",
                   onClose: e.changeHandler
-                }), null, 16, ["removable"]))),
+                }, null, 8, ["value", "text", "removable"]))),
                 128
                 /* KEYED_FRAGMENT */
               ))
-            ])) : (o(), l(
+            ])) : (r(), o(
               "div",
-              O,
-              _(e.selectedValueTitle),
+              S,
+              v(e.selectedValueTitle),
               1
               /* TEXT */
             )),
-            f(e.NmorphIcon, { class: "nmorph-select__chevron" }, {
-              default: s(() => [
-                e.props.loading ? (o(), i(e.NmorphIconLoaderDots, { key: 0 })) : (o(), i(e.NmorphIconChevronDown, { key: 1 }))
+            _(e.NmorphIcon, { class: "nmorph-select__chevron" }, {
+              default: h(() => [
+                e.props.loading ? (r(), d(e.NmorphIconLoaderDots, { key: 0 })) : (r(), d(e.NmorphIconChevronDown, { key: 1 }))
               ]),
               _: 1
               /* STABLE */
@@ -104,9 +105,9 @@ function E(y, v, p, e, M, R) {
           /* NEED_PATCH */
         )
       ]),
-      e.nmorphSelectDOMRef && !e.props.disabled ? (o(), i(e.NmorphDropdown, {
+      e.nmorphSelectDOMRef && !e.disabledInput ? (r(), d(e.NmorphDropdown, {
         key: 0,
-        open: e.open && !e.props.loading,
+        open: e.open && !e.disabledInput,
         "relative-element": e.nmorphSelectDOMRef,
         "fill-width": !e.autoOptionsWidth,
         width: e.autoOptionsWidth ? "max-content" : void 0,
@@ -117,59 +118,63 @@ function E(y, v, p, e, M, R) {
         onOnOutsideClick: e.closeHandler,
         onOnEscapeKeydown: e.escapeHandler
       }, {
-        default: s(() => [
-          t("div", {
+        default: h(() => [
+          i("div", {
             id: e.listboxId,
             ref: "optionsDOMRef",
             class: "nmorph-select__options",
             role: "listbox"
           }, [
-            e.props.loading ? (o(), i(e.NmorphIcon, {
+            e.props.loading ? (r(), d(e.NmorphIcon, {
               key: 0,
               class: "nmorph-select__chevron",
               size: "medium"
             }, {
-              default: s(() => [
-                f(e.NmorphIconChevronDown)
+              default: h(() => [
+                _(e.NmorphIconChevronDown)
               ]),
               _: 1
               /* STABLE */
-            })) : e.virtualEnabled ? (o(), l(
+            })) : e.virtualEnabled ? (r(), o(
               "div",
               {
                 key: 1,
                 ref: e.virtualList.containerRef,
                 class: "nmorph-select__virtual-list",
-                style: c({ maxHeight: e.virtualMaxHeight }),
-                onScroll: v[0] || (v[0] = (...r) => e.virtualList.scrollHandler && e.virtualList.scrollHandler(...r))
+                style: t({ maxHeight: e.virtualMaxHeight }),
+                onScroll: m[0] || (m[0] = (...l) => e.virtualList.scrollHandler && e.virtualList.scrollHandler(...l))
               },
               [
-                t(
+                i(
                   "div",
                   {
                     class: "nmorph-select__virtual-spacer",
-                    style: c(e.virtualSpacerStyle)
+                    style: t(e.virtualSpacerStyle)
                   },
                   [
-                    t(
+                    i(
                       "div",
                       {
                         class: "nmorph-select__virtual-content",
-                        style: c(e.virtualContentStyle)
+                        style: t(e.virtualContentStyle)
                       },
                       [
-                        (o(!0), l(
-                          d,
+                        (r(!0), o(
+                          c,
                           null,
-                          h(e.virtualOptions, (r) => (o(), i(e.NmorphSelectOption, m({
-                            id: e.getOptionId(r.item.value),
+                          s(e.virtualOptions, (l) => (r(), d(e.NmorphSelectOption, {
+                            id: e.getOptionId(l.item.value),
                             ref_for: !0,
-                            ref: (g) => e.setVirtualOptionRef(g, r.index),
-                            key: r.index
-                          }, { ref_for: !0 }, r.item, {
-                            focused: r.item.value === e.currentFocusedEl,
-                            height: e.props.height
-                          }), null, 16, ["id", "focused", "height"]))),
+                            ref: (k) => e.setVirtualOptionRef(k, l.index),
+                            key: l.index,
+                            value: l.item.value,
+                            label: l.item.label,
+                            disabled: l.item.disabled,
+                            "hover-background": l.item.hoverBackground,
+                            "hover-color": l.item.hoverColor,
+                            focused: l.item.value === e.currentFocusedEl,
+                            thickness: l.item.thickness || e.props.thickness
+                          }, null, 8, ["id", "value", "label", "disabled", "hover-background", "hover-color", "focused", "thickness"]))),
                           128
                           /* KEYED_FRAGMENT */
                         ))
@@ -184,39 +189,43 @@ function E(y, v, p, e, M, R) {
               ],
               36
               /* STYLE, NEED_HYDRATION */
-            )) : (o(), l(
-              d,
+            )) : (r(), o(
+              c,
               { key: 2 },
               [
-                (o(!0), l(
-                  d,
+                (r(!0), o(
+                  c,
                   null,
-                  h(p.options, (r) => (o(), i(e.NmorphSelectOption, m({
-                    id: e.getOptionId(r.value),
-                    key: r.value
-                  }, { ref_for: !0 }, r, {
-                    focused: r.value === e.currentFocusedEl,
-                    height: e.props.height
-                  }), null, 16, ["id", "focused", "height"]))),
+                  s(f.options, (l) => (r(), d(e.NmorphSelectOption, {
+                    id: e.getOptionId(l.value),
+                    key: l.value,
+                    value: l.value,
+                    label: l.label,
+                    disabled: l.disabled,
+                    "hover-background": l.hoverBackground,
+                    "hover-color": l.hoverColor,
+                    focused: l.value === e.currentFocusedEl,
+                    thickness: l.thickness || e.props.thickness
+                  }, null, 8, ["id", "value", "label", "disabled", "hover-background", "hover-color", "focused", "thickness"]))),
                   128
                   /* KEYED_FRAGMENT */
                 )),
-                b(y.$slots, "default")
+                w(b.$slots, "default")
               ],
               64
               /* STABLE_FRAGMENT */
             ))
-          ], 8, C)
+          ], 8, D)
         ]),
         _: 3
         /* FORWARDED */
-      }, 8, ["open", "relative-element", "fill-width", "width", "min-width", "z-index", "aria-label"])) : k("v-if", !0)
+      }, 8, ["open", "relative-element", "fill-width", "width", "min-width", "z-index", "aria-label"])) : u("v-if", !0)
     ],
     6
     /* CLASS, STYLE */
   );
 }
-const B = /* @__PURE__ */ H(w, [["render", E], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-select/NmorphSelect.vue"]]);
+const F = /* @__PURE__ */ g(y, [["render", E], ["__file", "/builds/ketjo/nmorph/library/src/components/form/nmorph-select/NmorphSelect.vue"]]);
 export {
-  B as default
+  F as default
 };