@nmorph/nmorph-ui-kit 3.0.0 → 3.0.1

package/dist/assets/icons/mute-speaker.svg.js

@@ -0,0 +1,28 @@
+import { openBlock as a, createElementBlock as l, createElementVNode as t } from "vue";
+const n = {
+  xmlns: "http://www.w3.org/2000/svg",
+  viewBox: "0 0 1024 1024"
+};
+function o(r, e) {
+  return a(), l("svg", n, [...e[0] || (e[0] = [
+    t(
+      "path",
+      { d: "M128 384a64 64 0 0 1 64-64h168.448l224-179.2A64 64 0 0 1 688 190.784v642.432A64 64 0 0 1 584.448 883.2l-224-179.2H192a64 64 0 0 1-64-64zm64 0v256h192a32 32 0 0 1 19.968 7.008L624 823.04V200.96L403.968 376.992A32 32 0 0 1 384 384zm595.2 2.368a32 32 0 0 1 45.248 0A223.3 223.3 0 0 1 896 544a223.3 223.3 0 0 1-63.552 157.632 32 32 0 1 1-45.248-45.248A159.42 159.42 0 0 0 832 544a159.42 159.42 0 0 0-44.8-112.384 32 32 0 0 1 0-45.248m-90.496 90.496a32 32 0 0 1 45.248 0A95.78 95.78 0 0 1 768 544a95.78 95.78 0 0 1-26.048 67.136 32 32 0 0 1-45.248-45.248A31.9 31.9 0 0 0 704 544c0-8.448-3.328-16.576-7.296-21.888a32 32 0 0 1 0-45.248" },
+      null,
+      -1
+      /* CACHED */
+    ),
+    t(
+      "path",
+      { d: "M150.72 859.072a32 32 0 0 1-45.44-45.056l704-708.544a32 32 0 0 1 45.44 45.056z" },
+      null,
+      -1
+      /* CACHED */
+    )
+  ])]);
+}
+const c = { render: o };
+export {
+  c as default,
+  o as render
+};

package/dist/components/basic/nmorph-button/NmorphButton.css

@@ -1 +1 @@
-.nmorph-button{display:inline-block;width:auto;height:auto;min-height:var(--nmorph-private-control-height)}.nmorph-button.nmorph--basic-component,.nmorph-button.nmorph--thin-component,.nmorph-button.nmorph--thick-component{height:auto}.nmorph-button.nmorph--fill{width:100%}.nmorph-button .nmorph-button__content{display:flex;gap:var(--indentation-02);justify-content:center;align-items:center;box-sizing:border-box;width:100%;height:auto;min-height:var(--nmorph-private-control-height);padding:var(--indentation-00) var(--indentation-04);color:var(--nmorph-private-button-color, var(--nmorph-text-color));line-height:var(--nmorph-private-control-line-height, var(--line-height-regular));background:var(--nmorph-main-color);border:none;border-radius:var(--default-border-radius);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);cursor:pointer}.nmorph-button .nmorph-button__content span{color:var(--nmorph-private-button-color, var(--nmorph-text-color));--nmorph-private-icon-color: var(--nmorph-private-button-color, var(--nmorph-text-color))}.nmorph-button .nmorph-button__label{display:inline-block;min-width:0;white-space:normal;text-align:center;overflow-wrap:anywhere;transform:translateY(var(--nmorph-private-control-text-offset-y))}.nmorph-button .nmorph-button__content>.nmorph-icon{flex-shrink:0;--nmorph-private-icon-color: var(--nmorph-private-button-color, var(--nmorph-text-color))}.nmorph-button .nmorph-button__content:disabled{pointer-events:none}.nmorph-button .nmorph-button__content[loading=true]{cursor:default}.nmorph-button.nmorph-button--ripple .nmorph-button__content{position:relative;overflow:hidden}.nmorph-button.nmorph-button--ripple .nmorph-button__content:after{position:absolute;top:0;left:0;width:100%;height:100%;background-image:radial-gradient(circle,var(--nmorph-main-color) 10%,transparent 10.01%);background-repeat:no-repeat;background-position:50%;transform:scale(10);opacity:0;transition:transform .3s,opacity 1s;content:""}.nmorph-button.nmorph-button--ripple .nmorph-button__content:active:after{transform:scale(0);opacity:.3;transition:0s}.nmorph-button.nmorph-button--accent-bg-on-hover .nmorph-button__content:not(:disabled,[loading=true]):hover{color:var(--nmorph-white-color);background:var(--nmorph-accent-color);box-shadow:none}.nmorph-button.nmorph-button--accent-bg-on-hover .nmorph-button__content:not(:disabled,[loading=true]):hover .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-white-color)}.nmorph-button.nmorph-button--accent-bg-on-hover .nmorph-button__content:not(:disabled,[loading=true]):hover span{color:var(--nmorph-white-color)}.nmorph-button.nmorph-button--active .nmorph-button__content{color:var(--nmorph-focus-text-color);background:var(--nmorph-accent-color);box-shadow:var(--nmorph-shadow-inset)}.nmorph-button.nmorph-button--active .nmorph-button__content span,.nmorph-button.nmorph-button--active .nmorph-button__content .nmorph-icon{color:var(--nmorph-focus-text-color);--nmorph-private-icon-color: var(--nmorph-focus-text-color)}.nmorph-button.nmorph-button--danger .nmorph-button__content{color:var(--nmorph-error-text-color);--nmorph-private-button-color: var(--nmorph-error-text-color)}.nmorph-button.nmorph-button--round .nmorph-button__content{border-radius:var(--border-radius-200)}.nmorph-button.nmorph-button--circle{width:var(--nmorph-private-control-height);height:var(--nmorph-private-control-height);min-height:var(--nmorph-private-control-height)}.nmorph-button.nmorph-button--circle .nmorph-button__content{height:var(--nmorph-private-control-height);min-height:var(--nmorph-private-control-height);border-radius:var(--border-radius-circular)}.nmorph-button.nmorph-button--plain{padding:var(--indentation-00)}.nmorph-button.nmorph-button--plain .nmorph-button__content:not(:disabled,[loading=true]):hover{color:var(--nmorph-accent-color);background:transparent;border-color:var(--nmorph-accent-color);box-shadow:none}.nmorph-button.nmorph-button--plain.nmorph-button--custom-color .nmorph-button__content:not(:disabled,[loading=true]):hover{color:var(--nmorph-private-button-hover-color);border-color:var(--nmorph-private-button-hover-color)}.nmorph-button.nmorph-button--plain .nmorph-button__content:not(:disabled,[loading=true]):hover span{color:var(--nmorph-accent-color)}.nmorph-button.nmorph-button--plain.nmorph-button--custom-color .nmorph-button__content:not(:disabled,[loading=true]):hover span{color:var(--nmorph-private-button-hover-color);--nmorph-private-icon-color: var(--nmorph-private-button-hover-color)}.nmorph-button.nmorph-button--plain .nmorph-button__content:not(:disabled,[loading=true]):hover .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-accent-color)}.nmorph-button.nmorph-button--plain.nmorph-button--custom-color .nmorph-button__content:not(:disabled,[loading=true]):hover .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-private-button-hover-color)}.nmorph-button.nmorph-button--plain .nmorph-button__content{color:var(--nmorph-private-button-color, var(--nmorph-private-button-plain-color, var(--nmorph-text-color)));background:transparent;border:var(--nmorph-plain-border);border-color:var(--nmorph-private-button-color, var(--nmorph-private-button-plain-color, var(--nmorph-text-color)));box-shadow:none}.nmorph-button.nmorph-button--plain .nmorph-button__content span{color:var(--nmorph-private-button-color, var(--nmorph-private-button-plain-color, var(--nmorph-text-color)));--nmorph-private-icon-color: var( --nmorph-private-button-color, var(--nmorph-private-button-plain-color, var(--nmorph-text-color)) )}.nmorph-button.nmorph-button--plain .nmorph-button__content .nmorph-icon{--nmorph-private-icon-color: var( --nmorph-private-button-color, var(--nmorph-private-button-plain-color, var(--nmorph-text-color)) )}.nmorph-button.nmorph-button--square{width:var(--nmorph-private-control-height);height:var(--nmorph-private-control-height);min-height:var(--nmorph-private-control-height)}.nmorph-button.nmorph-button--square .nmorph-button__content{height:var(--nmorph-private-control-height);min-height:var(--nmorph-private-control-height)}.nmorph-button.nmorph-button--icon-only{width:var(--nmorph-private-control-height);height:var(--nmorph-private-control-height);min-height:var(--nmorph-private-control-height)}.nmorph-button.nmorph-button--icon-only .nmorph-button__content{height:var(--nmorph-private-control-height);min-height:var(--nmorph-private-control-height);padding:0;line-height:0}.nmorph-button.nmorph-button--disabled{cursor:not-allowed;opacity:.6}
+.nmorph-button{display:inline-block;width:auto;height:auto;min-height:var(--nmorph-private-control-height)}.nmorph-button.nmorph--basic-component,.nmorph-button.nmorph--thin-component,.nmorph-button.nmorph--thick-component{height:auto}.nmorph-button.nmorph--fill{width:100%}.nmorph-button .nmorph-button__content{display:flex;gap:var(--indentation-02);justify-content:center;align-items:center;box-sizing:border-box;width:100%;height:auto;min-height:var(--nmorph-private-control-height);padding:var(--indentation-00) var(--indentation-04);color:var(--nmorph-private-button-color, var(--nmorph-text-color));line-height:var(--nmorph-private-control-line-height, var(--line-height-regular));background:var(--nmorph-main-color);border:none;border-radius:var(--default-border-radius);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);cursor:pointer}.nmorph-button .nmorph-button__content span{color:var(--nmorph-private-button-color, var(--nmorph-text-color));--nmorph-private-icon-color: var(--nmorph-private-button-color, var(--nmorph-text-color))}.nmorph-button .nmorph-button__label{display:inline-block;min-width:0;white-space:normal;text-align:center;overflow-wrap:anywhere;transform:translateY(var(--nmorph-private-control-text-offset-y))}.nmorph-button .nmorph-button__content>.nmorph-icon{flex-shrink:0;--nmorph-private-icon-color: var(--nmorph-private-button-color, var(--nmorph-text-color))}.nmorph-button .nmorph-button__content:disabled{pointer-events:none}.nmorph-button .nmorph-button__content[loading=true]{cursor:default}.nmorph-button.nmorph-button--ripple .nmorph-button__content{position:relative;overflow:hidden}.nmorph-button.nmorph-button--ripple .nmorph-button__content:after{position:absolute;top:0;left:0;width:100%;height:100%;background-image:radial-gradient(circle,var(--nmorph-main-color) 10%,transparent 10.01%);background-repeat:no-repeat;background-position:50%;transform:scale(10);opacity:0;transition:transform .3s,opacity 1s;content:""}.nmorph-button.nmorph-button--ripple .nmorph-button__content:active:after{transform:scale(0);opacity:.3;transition:0s}.nmorph-button.nmorph-button--accent-bg-on-hover .nmorph-button__content:not(:disabled,[loading=true]):hover{color:var(--nmorph-white-color);background:var(--nmorph-accent-color);box-shadow:none}.nmorph-button.nmorph-button--accent-bg-on-hover .nmorph-button__content:not(:disabled,[loading=true]):hover .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-white-color)}.nmorph-button.nmorph-button--accent-bg-on-hover .nmorph-button__content:not(:disabled,[loading=true]):hover span{color:var(--nmorph-white-color)}.nmorph-button.nmorph-button--active .nmorph-button__content{color:var(--nmorph-focus-text-color);background:var(--nmorph-accent-color);box-shadow:var(--nmorph-shadow-inset)}.nmorph-button.nmorph-button--active .nmorph-button__content span,.nmorph-button.nmorph-button--active .nmorph-button__content .nmorph-icon{color:var(--nmorph-focus-text-color);--nmorph-private-icon-color: var(--nmorph-focus-text-color)}.nmorph-button.nmorph-button--danger .nmorph-button__content{color:var(--nmorph-error-text-color);--nmorph-private-button-color: var(--nmorph-error-text-color)}.nmorph-button.nmorph-button--round .nmorph-button__content{border-radius:var(--border-radius-200)}.nmorph-button.nmorph-button--circle{width:var(--nmorph-private-control-height);height:var(--nmorph-private-control-height);min-height:var(--nmorph-private-control-height)}.nmorph-button.nmorph-button--circle .nmorph-button__content{height:var(--nmorph-private-control-height);min-height:var(--nmorph-private-control-height);border-radius:var(--border-radius-circular)}.nmorph-button.nmorph-button--plain{padding:var(--indentation-00)}.nmorph-button.nmorph-button--plain .nmorph-button__content:not(:disabled,[loading=true]):hover{color:var(--nmorph-accent-color);background:transparent;border-color:var(--nmorph-accent-color);box-shadow:none}.nmorph-button.nmorph-button--plain.nmorph-button--custom-color .nmorph-button__content:not(:disabled,[loading=true]):hover{color:var(--nmorph-private-button-hover-color);border-color:var(--nmorph-private-button-hover-color)}.nmorph-button.nmorph-button--plain .nmorph-button__content:not(:disabled,[loading=true]):hover span{color:var(--nmorph-accent-color)}.nmorph-button.nmorph-button--plain.nmorph-button--custom-color .nmorph-button__content:not(:disabled,[loading=true]):hover span{color:var(--nmorph-private-button-hover-color);--nmorph-private-icon-color: var(--nmorph-private-button-hover-color)}.nmorph-button.nmorph-button--plain .nmorph-button__content:not(:disabled,[loading=true]):hover .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-accent-color)}.nmorph-button.nmorph-button--plain.nmorph-button--custom-color .nmorph-button__content:not(:disabled,[loading=true]):hover .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-private-button-hover-color)}.nmorph-button.nmorph-button--plain .nmorph-button__content{color:var(--nmorph-private-button-color, var(--nmorph-private-button-plain-color, var(--nmorph-text-color)));background:transparent;border:var(--nmorph-plain-border);border-color:var(--nmorph-private-button-color, var(--nmorph-private-button-plain-color, var(--nmorph-text-color)));box-shadow:none}.nmorph-button.nmorph-button--plain .nmorph-button__content span{color:var(--nmorph-private-button-color, var(--nmorph-private-button-plain-color, var(--nmorph-text-color)));--nmorph-private-icon-color: var( --nmorph-private-button-color, var(--nmorph-private-button-plain-color, var(--nmorph-text-color)) )}.nmorph-button.nmorph-button--plain .nmorph-button__content .nmorph-icon{--nmorph-private-icon-color: var( --nmorph-private-button-color, var(--nmorph-private-button-plain-color, var(--nmorph-text-color)) )}.nmorph-button.nmorph-button--plain.nmorph-button--borderless .nmorph-button__content,.nmorph-button.nmorph-button--plain.nmorph-button--borderless .nmorph-button__content:not(:disabled,[loading=true]):hover{border:none}.nmorph-button.nmorph-button--square{width:var(--nmorph-private-control-height);height:var(--nmorph-private-control-height);min-height:var(--nmorph-private-control-height)}.nmorph-button.nmorph-button--square .nmorph-button__content{height:var(--nmorph-private-control-height);min-height:var(--nmorph-private-control-height)}.nmorph-button.nmorph-button--icon-only{width:var(--nmorph-private-control-height);height:var(--nmorph-private-control-height);min-height:var(--nmorph-private-control-height)}.nmorph-button.nmorph-button--icon-only .nmorph-button__content{height:var(--nmorph-private-control-height);min-height:var(--nmorph-private-control-height);padding:0;line-height:0}.nmorph-button.nmorph-button--disabled{cursor:not-allowed;opacity:.6}

package/dist/components/basic/nmorph-button/NmorphButton.vue2.js

@@ -1,6 +1,6 @@
 import './NmorphButton.css';
-import { defineComponent as y, useSlots as b, computed as o, ref as v } from "vue";
-import { useModifiers as q } from "../../../utils/create-modifiers.js";
+import { defineComponent as y, useSlots as b, computed as o, ref as q } from "vue";
+import { useModifiers as v } from "../../../utils/create-modifiers.js";
 import { NmorphComponentThickness as B } from "../../../types/common.types.js";
 import S from "../../../assets/icons/loading.svg.js";
 import _ from "../nmorph-icon/NmorphIcon.vue.js";
@@ -8,6 +8,7 @@ const C = /* @__PURE__ */ y({
   __name: "NmorphButton",
   props: {
     design: { type: null, required: !1, default: "nmorph" },
+    borderless: { type: Boolean, required: !1, default: !1 },
     color: { type: String, required: !1, default: void 0 },
     loading: { type: Boolean, required: !1, default: !1 },
     ripple: { type: Boolean, required: !1, default: !0 },
@@ -28,9 +29,9 @@ const C = /* @__PURE__ */ y({
     disabled: { type: Boolean, required: !1, default: !1 }
   },
   emits: ["update:model-value"],
-  setup(s, { expose: d, emit: p }) {
-    const e = s, l = p, t = b(), f = o(() => !!t.icon), r = o(() => !!t["icon-only"]), a = o(() => e.active || !!e.modelValue), c = o(
-      () => q({
+  setup(u, { expose: d, emit: p }) {
+    const e = u, t = p, l = b(), f = o(() => !!l.icon), r = o(() => !!l["icon-only"]), a = o(() => e.active || !!e.modelValue), c = o(
+      () => v({
         nmorph: [B[e.thickness], e.fill && "fill"],
         "nmorph-button": [
           e.design,
@@ -40,11 +41,12 @@ const C = /* @__PURE__ */ y({
           e.ripple && "ripple",
           r.value && "icon-only",
           e.color && "custom-color",
+          e.design === "plain" && e.borderless && "borderless",
           a.value && "active",
           e.danger && "danger"
         ]
       })
-    ), n = v(null), i = {
+    ), n = q(null), i = {
       thin: "small",
       basic: "medium",
       thick: "large"
@@ -53,15 +55,15 @@ const C = /* @__PURE__ */ y({
       "--nmorph-private-button-plain-color": e.color,
       "--nmorph-private-button-hover-color": `color-mix(in srgb, ${e.color} 75%, var(--nmorph-white-color))`
     } : {}), h = () => {
-      !e.toggle || e.disabled || e.loading || l("update:model-value", !e.modelValue);
+      !e.toggle || e.disabled || e.loading || t("update:model-value", !e.modelValue);
     };
     d({ buttonDOMElement: n });
-    const u = { props: e, emit: l, slots: t, hasIconSlot: f, hasIconOnlySlot: r, active: a, modifiers: c, buttonDOMElement: n, iconSizeMap: i, loadingButtonSize: m, buttonColorStyles: g, toggleClickHandler: h, get NmorphIcon() {
+    const s = { props: e, emit: t, slots: l, hasIconSlot: f, hasIconOnlySlot: r, active: a, modifiers: c, buttonDOMElement: n, iconSizeMap: i, loadingButtonSize: m, buttonColorStyles: g, toggleClickHandler: h, get NmorphIcon() {
       return _;
     }, get NmorphIconLoader() {
       return S;
     } };
-    return Object.defineProperty(u, "__isScriptSetup", { enumerable: !1, value: !0 }), u;
+    return Object.defineProperty(s, "__isScriptSetup", { enumerable: !1, value: !0 }), s;
   }
 });
 export {