@nmorph/nmorph-ui-kit 3.0.0 → 3.0.1

package/dist/components/data/nmorph-media-tile/NmorphMediaTile.vue.js

@@ -1,6 +1,6 @@
 import './NmorphMediaTile.css';
-import c from "./NmorphMediaTile.vue2.js";
-import { openBlock as e, createElementBlock as r, normalizeClass as d, withDirectives as p, createElementVNode as n, vShow as _, createBlock as m, withCtx as l, createVNode as a, toDisplayString as s, createCommentVNode as i, renderSlot as h } from "vue";
+import m from "./NmorphMediaTile.vue2.js";
+import { openBlock as e, createElementBlock as r, normalizeClass as d, withDirectives as c, createElementVNode as p, vShow as _, createBlock as n, withCtx as s, createVNode as a, toDisplayString as l, createCommentVNode as i, renderSlot as h } from "vue";
 /* empty css                     */
 import f from "../../../_virtual/_plugin-vue_export-helper.js";
 const v = ["src", "muted", "autoplay", "playsinline"], y = {
@@ -15,7 +15,10 @@ const v = ["src", "muted", "autoplay", "playsinline"], y = {
 }, b = {
   key: 4,
   class: "nmorph-media-tile__error-text"
-}, I = { class: "nmorph-media-tile__status" }, S = {
+}, I = {
+  key: 1,
+  class: "nmorph-media-tile__status"
+}, S = {
   key: 0,
   class: "nmorph-media-tile__status-item",
   "aria-label": "Microphone muted"
@@ -32,14 +35,14 @@ const v = ["src", "muted", "autoplay", "playsinline"], y = {
   class: "nmorph-media-tile__status-item",
   "aria-label": "Pinned"
 };
-function x(t, M, w, o, T, B) {
+function x(t, w, M, o, T, B) {
   return e(), r(
     "div",
     {
       class: d(o.modifiers)
     },
     [
-      p(n("video", {
+      c(p("video", {
         ref: "videoRef",
         class: "nmorph-media-tile__video",
         src: o.props.src || void 0,
@@ -50,47 +53,48 @@ function x(t, M, w, o, T, B) {
         [_, o.hasVideo && !o.props.loading]
       ]),
       o.props.showFallback && (!o.hasVideo || o.props.loading) ? (e(), r("div", y, [
-        o.props.loading ? (e(), m(o.NmorphIcon, {
+        o.props.loading ? (e(), n(o.NmorphIcon, {
           key: 0,
           class: "nmorph-media-tile__loader",
           size: "large"
         }, {
-          default: l(() => [
+          default: s(() => [
             a(o.NmorphIconLoaderDots)
           ]),
           _: 1
           /* STABLE */
-        })) : o.props.avatarSrc ? (e(), m(o.NmorphAvatar, {
+        })) : o.props.avatarSrc ? (e(), n(o.NmorphAvatar, {
           key: 1,
           src: o.props.avatarSrc,
           name: o.props.name,
-          size: 72
+          size: 72,
+          design: "plain"
         }, null, 8, ["src", "name"])) : (e(), r(
           "div",
           k,
-          s(o.fallbackLabel),
+          l(o.fallbackLabel),
           1
           /* TEXT */
         )),
         o.props.name ? (e(), r(
           "span",
           N,
-          s(o.props.name),
+          l(o.props.name),
           1
           /* TEXT */
         )) : i("v-if", !0),
         o.props.error && o.props.errorText ? (e(), r(
           "span",
           b,
-          s(o.props.errorText),
+          l(o.props.errorText),
           1
           /* TEXT */
         )) : i("v-if", !0)
       ])) : i("v-if", !0),
-      n("div", I, [
+      o.props.showStatus ? (e(), r("div", I, [
         o.props.micMuted ? (e(), r("span", S, [
           a(o.NmorphIcon, { size: "small" }, {
-            default: l(() => [
+            default: s(() => [
               a(o.NmorphIconMic)
             ]),
             _: 1
@@ -99,7 +103,7 @@ function x(t, M, w, o, T, B) {
         ])) : i("v-if", !0),
         o.props.videoOff ? (e(), r("span", g, [
           a(o.NmorphIcon, { size: "small" }, {
-            default: l(() => [
+            default: s(() => [
               a(o.NmorphIconVideo)
             ]),
             _: 1
@@ -108,7 +112,7 @@ function x(t, M, w, o, T, B) {
         ])) : i("v-if", !0),
         o.props.screenSharing ? (e(), r("span", z, [
           a(o.NmorphIcon, { size: "small" }, {
-            default: l(() => [
+            default: s(() => [
               a(o.NmorphIconShare)
             ]),
             _: 1
@@ -117,21 +121,21 @@ function x(t, M, w, o, T, B) {
         ])) : i("v-if", !0),
         o.props.pinned ? (e(), r("span", V, [
           a(o.NmorphIcon, { size: "small" }, {
-            default: l(() => [
+            default: s(() => [
               a(o.NmorphIconPin)
             ]),
             _: 1
             /* STABLE */
           })
         ])) : i("v-if", !0)
-      ]),
+      ])) : i("v-if", !0),
       h(t.$slots, "overlay")
     ],
     2
     /* CLASS */
   );
 }
-const P = /* @__PURE__ */ f(c, [["render", x], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-media-tile/NmorphMediaTile.vue"]]);
+const P = /* @__PURE__ */ f(m, [["render", x], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-media-tile/NmorphMediaTile.vue"]]);
 export {
   P as default
 };

package/dist/components/data/nmorph-media-tile/NmorphMediaTile.vue2.js

@@ -1,14 +1,14 @@
 import './NmorphMediaTile.css';
-import { defineComponent as u, ref as p, computed as o, watch as c } from "vue";
+import { defineComponent as d, ref as p, computed as o, watch as c } from "vue";
 import { useModifiers as m } from "../../../utils/create-modifiers.js";
 import h from "../../../assets/icons/share.svg.js";
 import y from "../../../assets/icons/pin.svg.js";
 import g from "../../../assets/icons/mic.svg.js";
 import q from "../../basic/nmorph-icon/NmorphIcon.vue.js";
-import v from "../nmorph-avatar/NmorphAvatar.vue.js";
-import B from "../../../assets/icons/video.svg.js";
+import B from "../nmorph-avatar/NmorphAvatar.vue.js";
+import v from "../../../assets/icons/video.svg.js";
 import N from "../../../assets/icons/loader.svg.js";
-const L = /* @__PURE__ */ u({
+const x = /* @__PURE__ */ d({
   __name: "NmorphMediaTile",
   props: {
     src: { type: String, required: !1, default: "" },
@@ -22,6 +22,7 @@ const L = /* @__PURE__ */ u({
     avatarSrc: { type: String, required: !1, default: "" },
     loading: { type: Boolean, required: !1, default: !1 },
     showFallback: { type: Boolean, required: !1, default: !0 },
+    showStatus: { type: Boolean, required: !1, default: !0 },
     micMuted: { type: Boolean, required: !1, default: !1 },
     videoOff: { type: Boolean, required: !1, default: !1 },
     screenSharing: { type: Boolean, required: !1, default: !1 },
@@ -33,7 +34,7 @@ const L = /* @__PURE__ */ u({
   },
   setup(l, { expose: i }) {
     const e = l, r = p(null), n = o(() => !!((e.src || e.srcObject) && !e.videoOff && !e.error)), t = o(
-      () => e.name.split(/\s+/).filter(Boolean).slice(0, 2).map((d) => d[0]?.toUpperCase()).join("")
+      () => e.name.split(/\s+/).filter(Boolean).slice(0, 2).map((u) => u[0]?.toUpperCase()).join("")
     ), f = o(() => t.value || e.name || "?"), s = o(
       () => m({
         "nmorph-media-tile": [
@@ -57,7 +58,7 @@ const L = /* @__PURE__ */ u({
       { immediate: !0, flush: "post" }
     ), i({ videoRef: r });
     const a = { props: e, videoRef: r, hasVideo: n, initials: t, fallbackLabel: f, modifiers: s, get NmorphAvatar() {
-      return v;
+      return B;
     }, get NmorphIcon() {
       return q;
     }, get NmorphIconLoaderDots() {
@@ -69,11 +70,11 @@ const L = /* @__PURE__ */ u({
     }, get NmorphIconShare() {
       return h;
     }, get NmorphIconVideo() {
-      return B;
+      return v;
     } };
     return Object.defineProperty(a, "__isScriptSetup", { enumerable: !1, value: !0 }), a;
   }
 });
 export {
-  L as default
+  x as default
 };

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

@@ -1 +1 @@
-.nmorph-select-button{--nmorph-private-select-button-track-padding: 4px;--nmorph-private-select-button-item-size: calc( var(--nmorph-private-control-height) - var(--nmorph-private-select-button-track-padding) * 2 );--nmorph-private-select-button-item-font-size: var(--nmorph-private-control-font-size);--nmorph-private-select-button-item-line-height: var(--nmorph-private-control-line-height);display:inline-flex;align-items:center;width:fit-content;padding:var(--nmorph-private-select-button-track-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);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}

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}