@nmorph/nmorph-ui-kit 3.0.0 → 3.0.2

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

@@ -1,20 +1,17 @@
 import './NmorphSelectButton.css';
-import { defineComponent as h, ref as b, watch as S, computed as s, provide as d } from "vue";
-import { useModifiers as g } from "../../../utils/create-modifiers.js";
-import { createCssVariables as y, createCssSizeVariables as v } from "../../../utils/common.js";
-import { useFormItemModel as q } from "../nmorph-form/use-form-item-input.js";
-import { NmorphComponentThickness as _ } from "../../../types/common.types.js";
-import k from "./components/nmorph-select-button-item/NmorphSelectButtonItem.vue.js";
-const F = /* @__PURE__ */ h({
+import { defineComponent as h, ref as b, watch as y, computed as n, provide as u } from "vue";
+import { useModifiers as S } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as q } from "../../../utils/common.js";
+import { useFormItemModel as _ } from "../nmorph-form/use-form-item-input.js";
+import { NmorphComponentThickness as g } from "../../../types/common.types.js";
+import v from "./components/nmorph-select-button-item/NmorphSelectButtonItem.vue.js";
+const I = /* @__PURE__ */ h({
   __name: "NmorphSelectButton",
   props: {
     modelValue: { type: String, required: !1, default: "" },
     options: { type: Array, required: !1, default: () => [] },
     fill: { type: Boolean, required: !1, default: !1 },
-    trackPadding: { type: [Number, String], required: !1, default: void 0 },
-    itemSize: { type: [Number, String], required: !1, default: void 0 },
-    itemFontSize: { type: String, required: !1, default: void 0 },
-    itemLineHeight: { type: String, required: !1, default: void 0 },
+    customThickness: { type: [Number, String], required: !1, default: void 0 },
     id: { type: String, required: !1 },
     name: { type: String, required: !1 },
     autocomplete: { type: String, required: !1 },
@@ -23,40 +20,35 @@ const F = /* @__PURE__ */ h({
     tabindex: { type: Number, required: !1 }
   },
   emits: ["update:model-value"],
-  setup(u, { expose: m, emit: p }) {
+  setup(d, { expose: m, emit: p }) {
     m();
-    const e = u, a = p, { modelValue: i, updateModelValue: l } = q(
+    const e = d, l = p, { modelValue: o, updateModelValue: s } = _(
       e,
-      (t) => a("update:model-value", t),
+      (t) => l("update:model-value", t),
       ""
-    ), r = b(i.value);
-    S(i, (t) => {
+    ), r = b(o.value);
+    y(o, (t) => {
       r.value = t;
     });
-    const f = s(
-      () => g({
-        nmorph: [_[e.thickness]],
+    const f = n(
+      () => S({
+        nmorph: [g[e.thickness]],
         "nmorph-select-button": [e.disabled && "disabled", e.fill && "fill", e.thickness]
       })
-    ), c = s(() => ({
-      ...v({
-        "--nmorph-private-select-button-track-padding": e.trackPadding,
-        "--nmorph-private-select-button-item-size": e.itemSize
-      }),
-      ...y({
-        "--nmorph-private-select-button-item-font-size": e.itemFontSize,
-        "--nmorph-private-select-button-item-line-height": e.itemLineHeight
+    ), c = n(() => ({
+      ...q({
+        "--nmorph-private-control-height": e.customThickness
       })
-    })), o = (t) => {
-      e.disabled || (r.value = t, l(t));
+    })), i = (t) => {
+      e.disabled || (r.value = t, s(t));
     };
-    d("select-button-selected-value", r), d("select-button-change-handler", o);
-    const n = { props: e, emit: a, modelValue: i, updateModelValue: l, initialValue: r, modifiers: f, styles: c, changeHandler: o, get NmorphSelectButtonItem() {
-      return k;
+    u("select-button-selected-value", r), u("select-button-change-handler", i);
+    const a = { props: e, emit: l, modelValue: o, updateModelValue: s, initialValue: r, modifiers: f, styles: c, changeHandler: i, get NmorphSelectButtonItem() {
+      return v;
     } };
-    return Object.defineProperty(n, "__isScriptSetup", { enumerable: !1, value: !0 }), n;
+    return Object.defineProperty(a, "__isScriptSetup", { enumerable: !1, value: !0 }), a;
   }
 });
 export {
-  F as default
+  I as default
 };

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

@@ -1 +1 @@
-.nmorph-select-button-item{display:inline-flex;justify-content:center;align-items:center;height:var(--nmorph-private-select-button-item-size);padding:0 var(--indentation-04);font-size:var(--nmorph-private-select-button-item-font-size);line-height:var(--nmorph-private-select-button-item-line-height);border-radius:var(--default-border-radius);transform:translateY(0);cursor:pointer;opacity:.45;transition:color ease-in-out var(--transition-02),background-color ease-in-out var(--transition-02),box-shadow ease-in-out var(--transition-02),opacity ease-in-out var(--transition-02),transform ease-in-out var(--transition-01)}.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:not(.nmorph-select-button-item--disabled):hover{opacity:.72}.nmorph-select-button-item:not(.nmorph-select-button-item--disabled):active{transform:translateY(1px)}.nmorph-select-button-item .nmorph-select-button-item__content{min-width:0;transform:translateY(var(--nmorph-private-control-text-offset-y))}.nmorph-select-button-item.nmorph-select-button-item--checked{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);opacity:1}.nmorph-select-button-item.nmorph-select-button-item--checked:hover{opacity:1}.nmorph-select-button-item.nmorph-select-button-item--disabled{cursor:not-allowed;opacity:.6}
+.nmorph-select-button-item{display:inline-flex;justify-content:center;align-items:center;height:var(--nmorph-private-select-button-item-height);padding:0 var(--indentation-04);font-size:var(--nmorph-private-control-font-size);line-height:var(--nmorph-private-control-line-height);border-radius:var(--default-border-radius);transform:translateY(0);cursor:pointer;opacity:.45;transition:color ease-in-out var(--transition-02),background-color ease-in-out var(--transition-02),box-shadow ease-in-out var(--transition-02),opacity ease-in-out var(--transition-02),transform ease-in-out var(--transition-01)}.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:not(.nmorph-select-button-item--disabled):hover{opacity:.72}.nmorph-select-button-item:not(.nmorph-select-button-item--disabled):active{transform:translateY(1px)}.nmorph-select-button-item .nmorph-select-button-item__content{min-width:0;transform:translateY(var(--nmorph-private-control-text-offset-y))}.nmorph-select-button-item.nmorph-select-button-item--checked{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);opacity:1}.nmorph-select-button-item.nmorph-select-button-item--checked:hover{opacity:1}.nmorph-select-button-item.nmorph-select-button-item--disabled{cursor:not-allowed;opacity:.6}