@nmorph/nmorph-ui-kit 3.0.5 → 3.0.7

package/dist/components/feedback/nmorph-drawer/NmorphDrawer.vue2.js

@@ -1,11 +1,11 @@
 import './NmorphDrawer.css';
-import { defineComponent as m, useSlots as c, computed as t } from "vue";
-import { useModifiers as y } from "../../../utils/create-modifiers.js";
-import { createCssSizeVariables as h } from "../../../utils/common.js";
-import q from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
-import v from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import _ from "../../../assets/icons/cross.svg.js";
-const w = /* @__PURE__ */ m({
+import { defineComponent as C, useSlots as N, ref as y, computed as i, watch as S, onBeforeUnmount as b, nextTick as B } from "vue";
+import { useModifiers as A } from "../../../utils/create-modifiers.js";
+import { createCssSizeVariables as F } from "../../../utils/common.js";
+import V from "../../others/nmorph-overlay/NmorphOverlay.vue.js";
+import x from "../../basic/nmorph-icon/NmorphIcon.vue.js";
+import z from "../../../assets/icons/cross.svg.js";
+const v = 220, M = /* @__PURE__ */ C({
   __name: "NmorphDrawer",
   props: {
     modelValue: { type: Boolean, required: !1, default: !1 },
@@ -21,30 +21,70 @@ const w = /* @__PURE__ */ m({
     contentClass: { type: String, required: !1, default: "" }
   },
   emits: ["on-close", "update:model-value"],
-  setup(s, { expose: n, emit: u }) {
-    n();
-    const e = s, r = u, o = c(), p = t(
-      () => y({
-        "nmorph-drawer": [e.placement, e.modelValue && "open"]
+  setup(h, { expose: w, emit: q }) {
+    w();
+    const e = h, u = q, m = N(), n = y(e.modelValue), o = y(e.modelValue);
+    let r = null, t = null;
+    const g = i(
+      () => A({
+        "nmorph-drawer": [e.placement, o.value && "open"]
       })
-    ), d = t(
-      () => h({
+    ), O = i(
+      () => F({
         "--nmorph-private-drawer-size": e.size
       })
-    ), l = () => {
-      r("on-close"), r("update:model-value", !1);
-    }, i = () => {
-      e.closeOnOverlay && l();
-    }, f = t(() => !!(o.header || e.title || e.showClose)), a = { props: e, emit: r, slots: o, modifiers: p, drawerStyle: d, closeHandler: l, overlayClickHandler: i, hasHeader: f, get NmorphIcon() {
-      return v;
+    ), d = () => {
+      u("on-close"), u("update:model-value", !1);
+    }, T = () => {
+      e.closeOnOverlay && d();
+    }, _ = i(() => !!(m.header || e.title || e.showClose)), a = () => {
+      r === null || typeof window > "u" || (cancelAnimationFrame(r), r = null);
+    }, s = () => {
+      t !== null && (clearTimeout(t), t = null);
+    }, p = async () => {
+      if (s(), n.value = !0, typeof window > "u") {
+        o.value = !0;
+        return;
+      }
+      await B(), a(), r = requestAnimationFrame(() => {
+        o.value = !0, r = null;
+      });
+    }, f = () => {
+      a(), o.value = !1, n.value && (s(), t = setTimeout(() => {
+        n.value = !1, t = null;
+      }, v));
+    };
+    S(
+      () => e.modelValue,
+      (l) => {
+        if (l) {
+          p();
+          return;
+        }
+        f();
+      },
+      { immediate: !0 }
+    ), b(() => {
+      a(), s();
+    });
+    const c = { props: e, emit: u, slots: m, drawerTransitionDuration: v, isVisible: n, isOpen: o, get openAnimationFrame() {
+      return r;
+    }, set openAnimationFrame(l) {
+      r = l;
+    }, get closeTimeout() {
+      return t;
+    }, set closeTimeout(l) {
+      t = l;
+    }, modifiers: g, drawerStyle: O, closeHandler: d, overlayClickHandler: T, hasHeader: _, clearOpenAnimationFrame: a, clearCloseTimeout: s, openDrawer: p, closeDrawer: f, get NmorphIcon() {
+      return x;
     }, get NmorphIconCross() {
-      return _;
+      return z;
     }, get NmorphOverlay() {
-      return q;
+      return V;
     } };
-    return Object.defineProperty(a, "__isScriptSetup", { enumerable: !1, value: !0 }), a;
+    return Object.defineProperty(c, "__isScriptSetup", { enumerable: !1, value: !0 }), c;
   }
 });
 export {
-  w as default
+  M as default
 };

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

@@ -1 +1 @@
-.nmorph-select-button{--nmorph-private-select-button-padding: max(3px, calc(var(--nmorph-private-control-height) * .1333));--nmorph-private-select-button-item-height: calc( var(--nmorph-private-control-height) - var(--nmorph-private-select-button-padding) * 2 );display:inline-flex;align-items:center;width:fit-content;padding:var(--nmorph-private-select-button-padding);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);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);transition:background-color ease-in-out var(--transition-02),border-color ease-in-out var(--transition-02),box-shadow ease-in-out var(--transition-02)}.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}
+.nmorph-select-button{--nmorph-private-select-button-padding: max(3px, calc(var(--nmorph-private-control-height) * .1333));--nmorph-private-select-button-item-height: calc( var(--nmorph-private-control-height) - var(--nmorph-private-select-button-padding) * 2 );display:inline-flex;align-items:center;width:fit-content;padding:var(--nmorph-private-select-button-padding);background:var(--nmorph-main-color);border-radius:var(--default-border-radius);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--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/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-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}
+.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: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}