@nmorph/nmorph-ui-kit 3.0.1 → 3.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/dist/assets/icons/hand.svg.js +30 -9
  2. package/dist/components/data/nmorph-avatar/NmorphAvatar.css +1 -1
  3. package/dist/components/data/nmorph-avatar/NmorphAvatar.vue2.js +28 -26
  4. package/dist/components/data/nmorph-badge/NmorphBadge.css +1 -1
  5. package/dist/components/data/nmorph-badge/NmorphBadge.vue.js +60 -59
  6. package/dist/components/data/nmorph-badge/NmorphBadge.vue2.js +28 -26
  7. package/dist/components/data/nmorph-image-preview/NmorphImagePreview.vue.js +17 -10
  8. package/dist/components/data/nmorph-media-gallery/NmorphMediaGallery.vue.js +82 -57
  9. package/dist/components/data/nmorph-preview-portal/NmorphPreviewPortal.css +1 -1
  10. package/dist/components/data/nmorph-preview-portal/NmorphPreviewPortal.vue.js +17 -13
  11. package/dist/index.umd.js +4 -4
  12. package/dist/package.json.js +1 -1
  13. package/dist/src/components/data/nmorph-avatar/NmorphAvatar.vue.d.ts +1 -0
  14. package/dist/src/components/data/nmorph-avatar/types.d.ts +1 -0
  15. package/dist/style.css +1 -1
  16. package/package.json +1 -1
package/dist/assets/icons/hand.svg.js CHANGED
@@ -1,21 +1,42 @@
1
- import { openBlock as e, createElementBlock as t, createElementVNode as n } from "vue";
2
- const o = {
1
+ import { openBlock as n, createElementBlock as r, createElementVNode as o } from "vue";
2
+ const t = {
3
3
  xmlns: "http://www.w3.org/2000/svg",
4
4
  viewBox: "0 0 1024 1024"
5
5
  };
6
- function r(l, a) {
7
- return e(), t("svg", o, [...a[0] || (a[0] = [
8
- n(
6
+ function l(s, e) {
7
+ return n(), r("svg", t, [...e[0] || (e[0] = [
8
+ o(
9
9
  "path",
10
- { d: "M416 96a96 96 0 0 1 96 96v224h16V288a96 96 0 1 1 192 0v144.64A96 96 0 0 1 880 504v160c0 159.04-128.96 288-288 288H448c-89.152 0-173.248-41.408-227.584-112.064L82.624 660.8a96 96 0 0 1 152.192-116.992L320 654.72V192a96 96 0 0 1 96-96m0 64a32 32 0 0 0-32 32v512a32 32 0 0 1-57.376 19.456l-142.56-144.704a32 32 0 0 0-50.752 38.976l137.792 179.136A224 224 0 0 0 448 888h144a224 224 0 0 0 224-224V504a32 32 0 1 0-64 0v80a32 32 0 0 1-64 0V288a32 32 0 1 0-64 0v232a32 32 0 0 1-64 0V224a32 32 0 1 0-64 0v296a32 32 0 0 1-64 0V192a32 32 0 0 0-32-32" },
10
+ {
11
+ fill: "none",
12
+ stroke: "currentColor",
13
+ "stroke-linecap": "round",
14
+ "stroke-linejoin": "round",
15
+ "stroke-width": "56",
16
+ d: "M320 704V320a64 64 0 0 1 128 0v200M448 520V192a64 64 0 0 1 128 0v288M576 480V288a64 64 0 0 1 128 0v224"
17
+ },
18
+ null,
19
+ -1
20
+ /* CACHED */
21
+ ),
22
+ o(
23
+ "path",
24
+ {
25
+ fill: "none",
26
+ stroke: "currentColor",
27
+ "stroke-linecap": "round",
28
+ "stroke-linejoin": "round",
29
+ "stroke-width": "56",
30
+ d: "M704 512V384a64 64 0 0 1 128 0v280c0 159.04-128.96 288-288 288h-88c-84.544 0-164.8-37.12-219.52-101.504L106.24 697.344a64 64 0 0 1 97.52-82.88L320 751.104M448 520v88M576 480v128M704 512v112"
31
+ },
11
32
  null,
12
33
  -1
13
34
  /* CACHED */
14
35
  )
15
36
  ])]);
16
37
  }
17
- const c = { render: r };
38
+ const i = { render: l };
18
39
  export {
19
- c as default,
20
- r as render
40
+ i as default,
41
+ l as render
21
42
  };
package/dist/components/data/nmorph-avatar/NmorphAvatar.css CHANGED
@@ -1 +1 @@
1
- .nmorph-avatar{position:relative;display:flex;justify-content:center;align-items:center;box-sizing:border-box;overflow:hidden;font-weight:var(--font-weight-semibold);background:var(--nmorph-main-color)}.nmorph-avatar--circle{border-radius:var(--border-radius-circular)}.nmorph-avatar--square{border-radius:var(--default-border-radius)}.nmorph-avatar>.nmorph-image{position:absolute;padding:var(--nmorph-private-avatar-image-padding);border-radius:var(--nmorph-private-avatar-radius)}.nmorph-avatar:not(.nmorph-avatar--plain){background:var(--nmorph-main-color);box-shadow:var(--nmorph-shadow-combined-dark)}.nmorph-avatar:not(.nmorph-avatar--plain).nmorph-avatar--framed{border:var(--nmorph-private-avatar-frame-border) solid var(--nmorph-main-color)}.nmorph-avatar--plain{background:var(--nmorph-main-color);box-shadow:none}.nmorph-avatar--plain.nmorph-avatar--framed{border:var(--nmorph-plain-border)}.nmorph-avatar>.nmorph-image>img{border-radius:var(--nmorph-private-avatar-image-radius)}.nmorph-avatar__initials{color:var(--nmorph-text-color);font-weight:var(--font-weight-semibold);line-height:1}.nmorph-avatar--preview{cursor:pointer}.nmorph-avatar--preview:hover>.nmorph-image{filter:brightness(.8)}
1
+ .nmorph-avatar{position:relative;display:flex;justify-content:center;align-items:center;box-sizing:border-box;overflow:hidden;font-weight:var(--font-weight-semibold);background:var(--nmorph-main-color)}.nmorph-avatar--circle{border-radius:var(--border-radius-circular)}.nmorph-avatar--square{border-radius:var(--default-border-radius)}.nmorph-avatar>.nmorph-image{position:absolute;padding:var(--nmorph-private-avatar-image-padding);border-radius:var(--nmorph-private-avatar-radius)}.nmorph-avatar:not(.nmorph-avatar--plain){background:var(--nmorph-main-color);box-shadow:var(--nmorph-shadow-combined-dark)}.nmorph-avatar:not(.nmorph-avatar--plain).nmorph-avatar--framed{border:var(--nmorph-private-avatar-frame-border) solid var(--nmorph-main-color)}.nmorph-avatar--plain{background:var(--nmorph-main-color);box-shadow:none}.nmorph-avatar--plain.nmorph-avatar--framed{border:var(--nmorph-plain-border)}.nmorph-avatar--plain.nmorph-avatar--borderless{border:0}.nmorph-avatar>.nmorph-image>img{border-radius:var(--nmorph-private-avatar-image-radius)}.nmorph-avatar__initials{color:var(--nmorph-text-color);font-weight:var(--font-weight-semibold);line-height:1}.nmorph-avatar--preview{cursor:pointer}.nmorph-avatar--preview:hover>.nmorph-image{filter:brightness(.8)}
package/dist/components/data/nmorph-avatar/NmorphAvatar.vue2.js CHANGED
@@ -10,6 +10,7 @@ const K = /* @__PURE__ */ $({
10
10
  __name: "NmorphAvatar",
11
11
  props: {
12
12
  design: { type: null, required: !1, default: "nmorph" },
13
+ borderless: { type: Boolean, required: !1, default: !1 },
13
14
  src: { type: [String, Array], required: !1, default: void 0 },
14
15
  size: { type: Number, required: !1, default: 48 },
15
16
  shape: { type: null, required: !1, default: "circle" },
@@ -30,40 +31,41 @@ const K = /* @__PURE__ */ $({
30
31
  emits: ["error", "load"],
31
32
  setup(h, { expose: y, emit: S }) {
32
33
  y();
33
- const r = h, i = S, w = (e) => {
34
- i("error", e);
35
- }, q = (e) => {
36
- i("load", e);
37
- }, p = B(!1), u = (e, t = 0) => Array.isArray(e) ? e[t] : e, m = a(() => `${r.imagePadding}px`), o = a(() => `${r.size}px`), b = a(() => u(r.src)), n = a(() => r.previewSrc || r.src), d = a(() => {
38
- const e = n.value;
39
- return Array.isArray(e) ? e.length > 0 : !!e;
34
+ const e = h, o = S, b = (r) => {
35
+ o("error", r);
36
+ }, w = (r) => {
37
+ o("load", r);
38
+ }, p = B(!1), u = (r, t = 0) => Array.isArray(r) ? r[t] : r, d = a(() => `${e.imagePadding}px`), s = a(() => `${e.size}px`), q = a(() => u(e.src)), n = a(() => e.previewSrc || e.src), m = a(() => {
39
+ const r = n.value;
40
+ return Array.isArray(r) ? r.length > 0 : !!r;
40
41
  }), N = a(() => {
41
- const e = n.value;
42
- return Array.isArray(e) ? e : e || "";
43
- }), s = a(() => r.preview && d.value), l = a(() => r.design || "nmorph"), I = a(
42
+ const r = n.value;
43
+ return Array.isArray(r) ? r : r || "";
44
+ }), l = a(() => e.preview && m.value), i = a(() => e.design || "nmorph"), I = a(
44
45
  () => L({
45
- nmorph: [l.value === "nmorph" ? "shadow-combined" : ""],
46
+ nmorph: [i.value === "nmorph" ? "shadow-combined" : ""],
46
47
  "nmorph-avatar": [
47
- l.value,
48
- r.shape,
49
- r.frameBorder > 0 && "framed",
50
- s.value && "preview"
48
+ i.value,
49
+ e.shape,
50
+ e.frameBorder > 0 && "framed",
51
+ i.value === "plain" && e.borderless && "borderless",
52
+ l.value && "preview"
51
53
  ]
52
54
  })
53
- ), x = a(() => `${r.size / 100 * 60}px`), A = a(() => `${Math.max(12, r.size * 0.38)}px`), c = a(() => r.shape === "circle" ? "50%" : "4px"), f = a(() => r.shape === "circle" ? "50%" : "2px"), _ = a(() => ({
54
- width: o.value,
55
- height: o.value,
56
- "--nmorph-private-avatar-image-padding": m.value,
55
+ ), x = a(() => `${e.size / 100 * 60}px`), A = a(() => `${Math.max(12, e.size * 0.38)}px`), c = a(() => e.shape === "circle" ? "50%" : "4px"), f = a(() => e.shape === "circle" ? "50%" : "2px"), _ = a(() => ({
56
+ width: s.value,
57
+ height: s.value,
58
+ "--nmorph-private-avatar-image-padding": d.value,
57
59
  "--nmorph-private-avatar-radius": c.value,
58
60
  "--nmorph-private-avatar-image-radius": f.value,
59
- "--nmorph-private-avatar-frame-border": `${r.frameBorder}px`
60
- })), P = a(() => r.fallback || g), z = a(() => {
61
- const e = r.name.trim();
62
- if (!e) return "";
63
- const t = e.split(/\s+/);
61
+ "--nmorph-private-avatar-frame-border": `${e.frameBorder}px`
62
+ })), P = a(() => e.fallback || g), z = a(() => {
63
+ const r = e.name.trim();
64
+ if (!r) return "";
65
+ const t = r.split(/\s+/);
64
66
  return (t.length > 1 ? `${t[0][0]}${t[t.length - 1][0]}` : t[0].slice(0, 2)).toUpperCase();
65
- }), v = { props: r, emit: i, onImageError: w, onImageLoad: q, previewOpen: p, getSourceByIndex: u, imagePadding: m, size: o, imageSrc: b, previewSource: n, hasPreviewSource: d, imagePreviewSrc: N, previewAvailable: s, resolvedDesign: l, modifiers: I, stubIconSize: x, initialsFontSize: A, radius: c, imageRadius: f, styles: _, fallback: P, initials: z, openPreview: () => {
66
- s.value && (p.value = !0);
67
+ }), v = { props: e, emit: o, onImageError: b, onImageLoad: w, previewOpen: p, getSourceByIndex: u, imagePadding: d, size: s, imageSrc: q, previewSource: n, hasPreviewSource: m, imagePreviewSrc: N, previewAvailable: l, resolvedDesign: i, modifiers: I, stubIconSize: x, initialsFontSize: A, radius: c, imageRadius: f, styles: _, fallback: P, initials: z, openPreview: () => {
68
+ l.value && (p.value = !0);
67
69
  }, get NmorphImage() {
68
70
  return C;
69
71
  }, get NmorphIcon() {
package/dist/components/data/nmorph-badge/NmorphBadge.css CHANGED
@@ -1 +1 @@
1
- .nmorph-badge{position:relative;display:inline-block;height:fit-content;--nmorph-private-badge-dot-size: 4px;--nmorph-private-badge-ribbon-height: 24px;--nmorph-private-badge-ribbon-corner-size: 62px;--nmorph-private-badge-ribbon-width: 116px;--nmorph-private-badge-ribbon-radius: var(--border-radius-40);--nmorph-private-badge-ribbon-offset-x: 0px;--nmorph-private-badge-ribbon-offset-y: 0px}.nmorph-badge .nmorph-badge__container{position:absolute;display:inline-flex;justify-content:center;align-items:center;background:var(--nmorph-private-badge-color);border-radius:var(--default-border-radius);opacity:1}.nmorph-badge.nmorph-badge--tag{position:static;display:inline-flex}.nmorph-badge .nmorph-badge__container--tag{position:static}.nmorph-badge .nmorph-badge__content{display:inline-flex;justify-content:center;align-items:center;box-sizing:border-box;min-width:calc(1em * var(--line-height-regular) + 4px);padding:2px 4px;color:var(--nmorph-light-shade-color);font-size:var(--nmorph-typography-body-large-font-size);line-height:var(--nmorph-typography-body-large-line-height);text-align:center}.nmorph-badge.nmorph-badge--tiny .nmorph-badge__content{font-size:var(--nmorph-typography-caption-font-size)}.nmorph-badge.nmorph-badge--extra-small .nmorph-badge__content{font-size:var(--nmorph-typography-body-small-font-size)}.nmorph-badge.nmorph-badge--medium .nmorph-badge__content{font-size:var(--nmorph-typography-title-small-font-size)}.nmorph-badge.nmorph-badge--large .nmorph-badge__content{font-size:var(--nmorph-typography-title-font-size)}.nmorph-badge.nmorph-badge--extra-large .nmorph-badge__content{font-size:var(--nmorph-typography-title-large-font-size)}.nmorph-badge .nmorph-badge__container--hidden{opacity:0}.nmorph-badge .nmorph-badge__ribbon-frame{position:absolute;inset:0;overflow:hidden;border-radius:var(--default-border-radius);pointer-events:none}.nmorph-badge .nmorph-badge__ribbon-corner{position:absolute;width:var(--nmorph-private-badge-ribbon-corner-size);height:var(--nmorph-private-badge-ribbon-corner-size)}.nmorph-badge .nmorph-badge__container--ribbon{top:50%;left:50%;width:var(--nmorph-private-badge-ribbon-width);height:var(--nmorph-private-badge-ribbon-height);border-radius:0;box-shadow:var(--nmorph-shadow-outset)}.nmorph-badge .nmorph-badge__container--ribbon .nmorph-badge__content{width:100%;min-width:0;height:100%;padding:0 var(--indentation-03);overflow:hidden;font-weight:var(--font-weight-semibold);font-size:var(--nmorph-typography-label-font-size);line-height:1;white-space:nowrap;text-overflow:ellipsis}.nmorph-badge .nmorph-badge__ribbon-corner--top-left{top:var(--nmorph-private-badge-ribbon-offset-y);left:var(--nmorph-private-badge-ribbon-offset-x)}.nmorph-badge .nmorph-badge__ribbon-corner--top-left .nmorph-badge__container--ribbon{border-bottom-right-radius:var(--nmorph-private-badge-ribbon-radius);border-bottom-left-radius:var(--nmorph-private-badge-ribbon-radius);transform:translate(-50%,-50%) rotate(-45deg)}.nmorph-badge .nmorph-badge__ribbon-corner--top-right{top:var(--nmorph-private-badge-ribbon-offset-y);right:var(--nmorph-private-badge-ribbon-offset-x)}.nmorph-badge .nmorph-badge__ribbon-corner--top-right .nmorph-badge__container--ribbon{border-bottom-right-radius:var(--nmorph-private-badge-ribbon-radius);border-bottom-left-radius:var(--nmorph-private-badge-ribbon-radius);transform:translate(-50%,-50%) rotate(45deg)}.nmorph-badge .nmorph-badge__ribbon-corner--bottom-left{bottom:var(--nmorph-private-badge-ribbon-offset-y);left:var(--nmorph-private-badge-ribbon-offset-x)}.nmorph-badge .nmorph-badge__ribbon-corner--bottom-left .nmorph-badge__container--ribbon{border-top-left-radius:var(--nmorph-private-badge-ribbon-radius);border-top-right-radius:var(--nmorph-private-badge-ribbon-radius);transform:translate(-50%,-50%) rotate(45deg)}.nmorph-badge .nmorph-badge__ribbon-corner--bottom-right{right:var(--nmorph-private-badge-ribbon-offset-x);bottom:var(--nmorph-private-badge-ribbon-offset-y)}.nmorph-badge .nmorph-badge__ribbon-corner--bottom-right .nmorph-badge__container--ribbon{border-top-left-radius:var(--nmorph-private-badge-ribbon-radius);border-top-right-radius:var(--nmorph-private-badge-ribbon-radius);transform:translate(-50%,-50%) rotate(-45deg)}.nmorph-badge .nmorph-badge__ribbon-corner--flat{width:var(--nmorph-private-badge-ribbon-width);height:var(--nmorph-private-badge-ribbon-height)}.nmorph-badge .nmorph-badge__ribbon-corner--flat .nmorph-badge__container--ribbon{position:relative;top:auto;left:auto;border-radius:0;transform:none}.nmorph-badge.nmorph-badge--tiny .nmorph-badge__container--ribbon .nmorph-badge__content{font-weight:var(--font-weight-regular);font-size:var(--nmorph-typography-caption-font-size)}.nmorph-badge.nmorph-badge--medium .nmorph-badge__container--ribbon .nmorph-badge__content{font-size:var(--nmorph-typography-title-small-font-size)}.nmorph-badge.nmorph-badge--large .nmorph-badge__container--ribbon .nmorph-badge__content{font-size:var(--nmorph-typography-title-font-size)}.nmorph-badge.nmorph-badge--extra-large .nmorph-badge__container--ribbon .nmorph-badge__content{font-size:var(--nmorph-typography-title-large-font-size)}.nmorph-badge .nmorph-badge__dot{width:var(--nmorph-private-badge-dot-size);height:var(--nmorph-private-badge-dot-size);border-radius:var(--border-radius-circular)}.nmorph-badge.nmorph-badge--tiny{--nmorph-private-badge-dot-size: 3px;--nmorph-private-badge-ribbon-height: 18px;--nmorph-private-badge-ribbon-corner-size: 50px;--nmorph-private-badge-ribbon-width: 92px}.nmorph-badge.nmorph-badge--extra-small{--nmorph-private-badge-dot-size: 4px;--nmorph-private-badge-ribbon-height: 20px;--nmorph-private-badge-ribbon-corner-size: 56px;--nmorph-private-badge-ribbon-width: 104px}.nmorph-badge.nmorph-badge--medium{--nmorph-private-badge-dot-size: 5px;--nmorph-private-badge-ribbon-height: 28px;--nmorph-private-badge-ribbon-corner-size: 68px;--nmorph-private-badge-ribbon-width: 128px}.nmorph-badge.nmorph-badge--large{--nmorph-private-badge-dot-size: 6px;--nmorph-private-badge-ribbon-height: 32px;--nmorph-private-badge-ribbon-corner-size: 76px;--nmorph-private-badge-ribbon-width: 144px}.nmorph-badge.nmorph-badge--extra-large{--nmorph-private-badge-dot-size: 8px;--nmorph-private-badge-ribbon-height: 36px;--nmorph-private-badge-ribbon-corner-size: 84px;--nmorph-private-badge-ribbon-width: 160px}
1
+ .nmorph-badge{position:relative;display:inline-block;height:fit-content;--nmorph-private-badge-dot-size: 4px;--nmorph-private-badge-ribbon-height: 24px;--nmorph-private-badge-ribbon-corner-size: 62px;--nmorph-private-badge-ribbon-width: 116px;--nmorph-private-badge-ribbon-radius: var(--border-radius-40);--nmorph-private-badge-ribbon-offset-x: 0px;--nmorph-private-badge-ribbon-offset-y: 0px}.nmorph-badge .nmorph-badge__container{position:absolute;display:inline-flex;justify-content:center;align-items:center;background:var(--nmorph-private-badge-color);border-radius:var(--default-border-radius);opacity:1}.nmorph-badge.nmorph-badge--tag{position:static;display:inline-flex}.nmorph-badge .nmorph-badge__container--tag{position:static}.nmorph-badge .nmorph-badge__container--tag .nmorph-badge__content--custom{min-height:calc(1em * var(--line-height-regular) + 4px);padding:2px}.nmorph-badge .nmorph-badge__container--tag .nmorph-badge__content--custom>.nmorph-icon{flex:0 0 auto}.nmorph-badge .nmorph-badge__content{display:inline-flex;justify-content:center;align-items:center;box-sizing:border-box;min-width:calc(1em * var(--line-height-regular) + 4px);padding:2px 4px;color:var(--nmorph-light-shade-color);font-size:var(--nmorph-typography-body-large-font-size);line-height:var(--nmorph-typography-body-large-line-height);text-align:center}.nmorph-badge .nmorph-badge__content .nmorph-icon{--nmorph-private-icon-color: currentColor}.nmorph-badge.nmorph-badge--tiny .nmorph-badge__content{font-size:var(--nmorph-typography-caption-font-size)}.nmorph-badge.nmorph-badge--extra-small .nmorph-badge__content{font-size:var(--nmorph-typography-body-small-font-size)}.nmorph-badge.nmorph-badge--medium .nmorph-badge__content{font-size:var(--nmorph-typography-title-small-font-size)}.nmorph-badge.nmorph-badge--large .nmorph-badge__content{font-size:var(--nmorph-typography-title-font-size)}.nmorph-badge.nmorph-badge--extra-large .nmorph-badge__content{font-size:var(--nmorph-typography-title-large-font-size)}.nmorph-badge .nmorph-badge__container--hidden{opacity:0}.nmorph-badge .nmorph-badge__ribbon-frame{position:absolute;inset:0;overflow:hidden;border-radius:var(--default-border-radius);pointer-events:none}.nmorph-badge .nmorph-badge__ribbon-corner{position:absolute;width:var(--nmorph-private-badge-ribbon-corner-size);height:var(--nmorph-private-badge-ribbon-corner-size)}.nmorph-badge .nmorph-badge__container--ribbon{top:50%;left:50%;width:var(--nmorph-private-badge-ribbon-width);height:var(--nmorph-private-badge-ribbon-height);border-radius:0;box-shadow:var(--nmorph-shadow-outset)}.nmorph-badge .nmorph-badge__container--ribbon .nmorph-badge__content{width:100%;min-width:0;height:100%;padding:0 var(--indentation-03);overflow:hidden;font-weight:var(--font-weight-semibold);font-size:var(--nmorph-typography-label-font-size);line-height:1;white-space:nowrap;text-overflow:ellipsis}.nmorph-badge .nmorph-badge__ribbon-corner--top-left{top:var(--nmorph-private-badge-ribbon-offset-y);left:var(--nmorph-private-badge-ribbon-offset-x)}.nmorph-badge .nmorph-badge__ribbon-corner--top-left .nmorph-badge__container--ribbon{border-bottom-right-radius:var(--nmorph-private-badge-ribbon-radius);border-bottom-left-radius:var(--nmorph-private-badge-ribbon-radius);transform:translate(-50%,-50%) rotate(-45deg)}.nmorph-badge .nmorph-badge__ribbon-corner--top-right{top:var(--nmorph-private-badge-ribbon-offset-y);right:var(--nmorph-private-badge-ribbon-offset-x)}.nmorph-badge .nmorph-badge__ribbon-corner--top-right .nmorph-badge__container--ribbon{border-bottom-right-radius:var(--nmorph-private-badge-ribbon-radius);border-bottom-left-radius:var(--nmorph-private-badge-ribbon-radius);transform:translate(-50%,-50%) rotate(45deg)}.nmorph-badge .nmorph-badge__ribbon-corner--bottom-left{bottom:var(--nmorph-private-badge-ribbon-offset-y);left:var(--nmorph-private-badge-ribbon-offset-x)}.nmorph-badge .nmorph-badge__ribbon-corner--bottom-left .nmorph-badge__container--ribbon{border-top-left-radius:var(--nmorph-private-badge-ribbon-radius);border-top-right-radius:var(--nmorph-private-badge-ribbon-radius);transform:translate(-50%,-50%) rotate(45deg)}.nmorph-badge .nmorph-badge__ribbon-corner--bottom-right{right:var(--nmorph-private-badge-ribbon-offset-x);bottom:var(--nmorph-private-badge-ribbon-offset-y)}.nmorph-badge .nmorph-badge__ribbon-corner--bottom-right .nmorph-badge__container--ribbon{border-top-left-radius:var(--nmorph-private-badge-ribbon-radius);border-top-right-radius:var(--nmorph-private-badge-ribbon-radius);transform:translate(-50%,-50%) rotate(-45deg)}.nmorph-badge .nmorph-badge__ribbon-corner--flat{width:var(--nmorph-private-badge-ribbon-width);height:var(--nmorph-private-badge-ribbon-height)}.nmorph-badge .nmorph-badge__ribbon-corner--flat .nmorph-badge__container--ribbon{position:relative;top:auto;left:auto;border-radius:0;transform:none}.nmorph-badge.nmorph-badge--tiny .nmorph-badge__container--ribbon .nmorph-badge__content{font-weight:var(--font-weight-regular);font-size:var(--nmorph-typography-caption-font-size)}.nmorph-badge.nmorph-badge--medium .nmorph-badge__container--ribbon .nmorph-badge__content{font-size:var(--nmorph-typography-title-small-font-size)}.nmorph-badge.nmorph-badge--large .nmorph-badge__container--ribbon .nmorph-badge__content{font-size:var(--nmorph-typography-title-font-size)}.nmorph-badge.nmorph-badge--extra-large .nmorph-badge__container--ribbon .nmorph-badge__content{font-size:var(--nmorph-typography-title-large-font-size)}.nmorph-badge .nmorph-badge__dot{width:var(--nmorph-private-badge-dot-size);height:var(--nmorph-private-badge-dot-size);border-radius:var(--border-radius-circular)}.nmorph-badge.nmorph-badge--tiny{--nmorph-private-badge-dot-size: 3px;--nmorph-private-badge-ribbon-height: 18px;--nmorph-private-badge-ribbon-corner-size: 50px;--nmorph-private-badge-ribbon-width: 92px}.nmorph-badge.nmorph-badge--extra-small{--nmorph-private-badge-dot-size: 4px;--nmorph-private-badge-ribbon-height: 20px;--nmorph-private-badge-ribbon-corner-size: 56px;--nmorph-private-badge-ribbon-width: 104px}.nmorph-badge.nmorph-badge--medium{--nmorph-private-badge-dot-size: 5px;--nmorph-private-badge-ribbon-height: 28px;--nmorph-private-badge-ribbon-corner-size: 68px;--nmorph-private-badge-ribbon-width: 128px}.nmorph-badge.nmorph-badge--large{--nmorph-private-badge-dot-size: 6px;--nmorph-private-badge-ribbon-height: 32px;--nmorph-private-badge-ribbon-corner-size: 76px;--nmorph-private-badge-ribbon-width: 144px}.nmorph-badge.nmorph-badge--extra-large{--nmorph-private-badge-dot-size: 8px;--nmorph-private-badge-ribbon-height: 36px;--nmorph-private-badge-ribbon-corner-size: 84px;--nmorph-private-badge-ribbon-width: 160px}
package/dist/components/data/nmorph-badge/NmorphBadge.vue.js CHANGED
@@ -1,59 +1,64 @@
1
1
  import './NmorphBadge.css';
2
- import c from "./NmorphBadge.vue2.js";
3
- import { openBlock as o, createElementBlock as a, normalizeStyle as r, normalizeClass as i, renderSlot as d, createCommentVNode as s, createElementVNode as n, createTextVNode as t, toDisplayString as y, Fragment as m } from "vue";
2
+ import m from "./NmorphBadge.vue2.js";
3
+ import { openBlock as a, createElementBlock as l, normalizeStyle as i, normalizeClass as o, renderSlot as d, createCommentVNode as n, createElementVNode as s, createTextVNode as t, toDisplayString as c } from "vue";
4
4
  /* empty css */
5
- import f from "../../../_virtual/_plugin-vue_export-helper.js";
6
- const _ = { class: "nmorph-badge__content" }, b = {
5
+ import y from "../../../_virtual/_plugin-vue_export-helper.js";
6
+ const f = {
7
7
  key: 0,
8
8
  class: "nmorph-badge__dot"
9
- }, g = {
10
- key: 1,
11
- class: "nmorph-badge__content"
12
9
  };
13
- function h(l, v, p, e, k, T) {
14
- return !e.props.disabled && (!e.isTagType || e.shouldShowBadge) ? (o(), a(
10
+ function b(r, h, _, e, g, v) {
11
+ return !e.props.disabled && (!e.isTagType || e.shouldShowBadge) ? (a(), l(
15
12
  "div",
16
13
  {
17
14
  key: 0,
18
- class: i(e.modifiers),
19
- style: r(e.styles)
15
+ class: o(e.modifiers),
16
+ style: i(e.styles)
20
17
  },
21
18
  [
22
- e.isTagType ? s("v-if", !0) : d(l.$slots, "default", { key: 0 }),
23
- e.shouldShowBadge && e.isRibbon ? (o(), a(
19
+ e.isTagType ? n("v-if", !0) : d(r.$slots, "default", { key: 0 }),
20
+ e.shouldShowBadge && e.isRibbon ? (a(), l(
24
21
  "div",
25
22
  {
26
23
  key: 1,
27
24
  class: "nmorph-badge__ribbon-frame",
28
- style: r(e.ribbonFrameStyle)
25
+ style: i(e.ribbonFrameStyle)
29
26
  },
30
27
  [
31
- n(
28
+ s(
32
29
  "div",
33
30
  {
34
- class: i(e.ribbonCornerModifiers)
31
+ class: o(e.ribbonCornerModifiers)
35
32
  },
36
33
  [
37
- n(
34
+ s(
38
35
  "div",
39
36
  {
40
37
  ref: "badge",
41
- class: i(e.containerModifiers),
42
- style: r(e.containerStyle)
38
+ class: o(e.containerModifiers),
39
+ style: i(e.containerStyle)
43
40
  },
44
41
  [
45
- n("div", _, [
46
- d(l.$slots, "value", {
47
- value: e.props.value,
48
- displayValue: e.displayValue
49
- }, () => [
50
- t(
51
- y(e.displayValue),
52
- 1
53
- /* TEXT */
54
- )
55
- ])
56
- ])
42
+ s(
43
+ "div",
44
+ {
45
+ class: o(["nmorph-badge__content", e.hasValueSlot && "nmorph-badge__content--custom"])
46
+ },
47
+ [
48
+ d(r.$slots, "value", {
49
+ value: e.props.value,
50
+ displayValue: e.displayValue
51
+ }, () => [
52
+ t(
53
+ c(e.displayValue),
54
+ 1
55
+ /* TEXT */
56
+ )
57
+ ])
58
+ ],
59
+ 2
60
+ /* CLASS */
61
+ )
57
62
  ],
58
63
  6
59
64
  /* CLASS, STYLE */
@@ -65,50 +70,46 @@ function h(l, v, p, e, k, T) {
65
70
  ],
66
71
  4
67
72
  /* STYLE */
68
- )) : e.shouldShowBadge ? (o(), a(
73
+ )) : e.shouldShowBadge ? (a(), l(
69
74
  "div",
70
75
  {
71
76
  key: 2,
72
77
  ref: "badge",
73
- class: i(e.containerModifiers),
74
- style: r(e.containerStyle)
78
+ class: o(e.containerModifiers),
79
+ style: i(e.containerStyle)
75
80
  },
76
81
  [
77
- e.isDotType ? (o(), a("div", b)) : (o(), a("div", g, [
78
- e.isTagType ? (o(), a(
79
- m,
80
- { key: 0 },
81
- [
82
+ e.isDotType ? (a(), l("div", f)) : (a(), l(
83
+ "div",
84
+ {
85
+ key: 1,
86
+ class: o(["nmorph-badge__content", e.hasValueSlot && "nmorph-badge__content--custom"])
87
+ },
88
+ [
89
+ d(r.$slots, "value", {
90
+ value: e.props.value,
91
+ displayValue: e.displayValue
92
+ }, () => [
82
93
  t(
83
- y(e.displayValue),
94
+ c(e.displayValue),
84
95
  1
85
96
  /* TEXT */
86
97
  )
87
- ],
88
- 64
89
- /* STABLE_FRAGMENT */
90
- )) : d(l.$slots, "value", {
91
- key: 1,
92
- value: e.props.value,
93
- displayValue: e.displayValue
94
- }, () => [
95
- t(
96
- y(e.displayValue),
97
- 1
98
- /* TEXT */
99
- )
100
- ])
101
- ]))
98
+ ])
99
+ ],
100
+ 2
101
+ /* CLASS */
102
+ ))
102
103
  ],
103
104
  6
104
105
  /* CLASS, STYLE */
105
- )) : s("v-if", !0)
106
+ )) : n("v-if", !0)
106
107
  ],
107
108
  6
108
109
  /* CLASS, STYLE */
109
- )) : e.isTagType ? s("v-if", !0) : d(l.$slots, "default", { key: 1 });
110
+ )) : e.isTagType ? n("v-if", !0) : d(r.$slots, "default", { key: 1 });
110
111
  }
111
- const w = /* @__PURE__ */ f(c, [["render", h], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-badge/NmorphBadge.vue"]]);
112
+ const T = /* @__PURE__ */ y(m, [["render", b], ["__file", "/builds/ketjo/nmorph/library/src/components/data/nmorph-badge/NmorphBadge.vue"]]);
112
113
  export {
113
- w as default
114
+ T as default
114
115
  };
package/dist/components/data/nmorph-badge/NmorphBadge.vue2.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import './NmorphBadge.css';
2
- import { defineComponent as C, computed as r, ref as u, onMounted as V, watch as B, nextTick as I } from "vue";
2
+ import { defineComponent as B, useSlots as I, computed as r, ref as d, onMounted as T, watch as M, nextTick as O } from "vue";
3
3
  import { useModifiers as s } from "../../../utils/create-modifiers.js";
4
- import { createCssSizeVariables as T, createCssVariables as M } from "../../../utils/common.js";
5
- const $ = /* @__PURE__ */ C({
4
+ import { createCssSizeVariables as F, createCssVariables as H } from "../../../utils/common.js";
5
+ const X = /* @__PURE__ */ B({
6
6
  __name: "NmorphBadge",
7
7
  props: {
8
8
  value: { type: [Number, String], required: !1, default: void 0 },
@@ -24,9 +24,9 @@ const $ = /* @__PURE__ */ C({
24
24
  zIndex: { type: Number, required: !1, default: 1 },
25
25
  disabled: { type: Boolean, required: !1, default: !1 }
26
26
  },
27
- setup(c, { expose: m }) {
28
- m();
29
- const e = c, b = r(() => e.type === "dot"), a = r(() => e.type === "tag"), t = r(() => e.type === "ribbon"), y = r(
27
+ setup(y, { expose: h }) {
28
+ h();
29
+ const e = y, b = I(), f = r(() => e.type === "dot"), a = r(() => e.type === "tag"), t = r(() => e.type === "ribbon"), g = r(
30
30
  () => s({
31
31
  "nmorph-badge": [
32
32
  e.hidden && "hidden",
@@ -36,7 +36,7 @@ const $ = /* @__PURE__ */ C({
36
36
  e.size
37
37
  ]
38
38
  })
39
- ), g = r(
39
+ ), S = r(
40
40
  () => s({
41
41
  "nmorph-badge__container": [
42
42
  e.hidden && "hidden",
@@ -45,27 +45,29 @@ const $ = /* @__PURE__ */ C({
45
45
  t.value && `ribbon-${e.ribbonCorner}`
46
46
  ]
47
47
  })
48
- ), h = r(
48
+ ), x = r(
49
49
  () => s({
50
50
  "nmorph-badge__ribbon-corner": [e.ribbonCorner, !e.ribbonTilt && "flat"]
51
51
  })
52
- ), S = r(() => typeof Number(e.value) == "number" && Number(e.value) > e.max ? `${e.max}+` : e.value), f = r(() => e.hideOnFalsyValue && !e.value), x = r(() => (b.value || e.value !== void 0) && !f.value), o = r(() => {
53
- const v = `${(n?.value / 2 + e.offsetX) * -1}px`, N = `${(d?.value / 2 + e.offsetY) * -1}px`;
52
+ ), z = r(() => typeof Number(e.value) == "number" && Number(e.value) > e.max ? `${e.max}+` : e.value), p = r(() => !!b.value), v = r(() => e.hideOnFalsyValue && !e.value), q = r(
53
+ () => (f.value || e.value !== void 0 || p.value) && !v.value
54
+ ), i = r(() => {
55
+ const m = `${(n?.value / 2 + e.offsetX) * -1}px`, V = `${(l?.value / 2 + e.offsetY) * -1}px`;
54
56
  return {
55
- x: v,
56
- y: N
57
+ x: m,
58
+ y: V
57
59
  };
58
- }), z = r(() => a.value || t.value ? {
60
+ }), _ = r(() => a.value || t.value ? {
59
61
  zIndex: e.zIndex
60
62
  } : {
61
- right: o.value.x,
62
- top: o.value.y,
63
+ right: i.value.x,
64
+ top: i.value.y,
63
65
  zIndex: e.zIndex
64
- }), i = u(null), n = u(0), d = u(0), q = r(() => ({
65
- ...M({
66
+ }), o = d(null), n = d(0), l = d(0), N = r(() => ({
67
+ ...H({
66
68
  "--nmorph-private-badge-color": e.color
67
69
  }),
68
- ...T({
70
+ ...F({
69
71
  "--nmorph-private-badge-dot-size": e.dotSize,
70
72
  "--nmorph-private-badge-ribbon-offset-x": e.offsetX !== 0 && e.offsetX,
71
73
  "--nmorph-private-badge-ribbon-offset-y": e.offsetY !== 0 && e.offsetY,
@@ -74,19 +76,19 @@ const $ = /* @__PURE__ */ C({
74
76
  "--nmorph-private-badge-ribbon-corner-size": e.ribbonCornerSize,
75
77
  "--nmorph-private-badge-ribbon-radius": e.ribbonRadius
76
78
  })
77
- })), l = async () => {
78
- await I(), !(!i.value || a.value || t.value) && (n.value = i.value.clientWidth, d.value = i.value.clientHeight);
79
- }, _ = r(() => ({
79
+ })), u = async () => {
80
+ await O(), !(!o.value || a.value || t.value) && (n.value = o.value.clientWidth, l.value = o.value.clientHeight);
81
+ }, C = r(() => ({
80
82
  zIndex: e.zIndex
81
83
  }));
82
- V(l), B(
84
+ T(u), M(
83
85
  () => [e.value, e.max, e.type, e.ribbonCorner, e.ribbonTilt, e.size, e.hideOnFalsyValue],
84
- l
86
+ u
85
87
  );
86
- const p = { props: e, isDotType: b, isTagType: a, isRibbon: t, modifiers: y, containerModifiers: g, ribbonCornerModifiers: h, displayValue: S, shouldHideOnFalsyValue: f, shouldShowBadge: x, appliedOffset: o, containerStyle: z, badge: i, badgeWidth: n, badgeHeight: d, styles: q, updateBadgeSize: l, ribbonFrameStyle: _ };
87
- return Object.defineProperty(p, "__isScriptSetup", { enumerable: !1, value: !0 }), p;
88
+ const c = { props: e, slots: b, isDotType: f, isTagType: a, isRibbon: t, modifiers: g, containerModifiers: S, ribbonCornerModifiers: x, displayValue: z, hasValueSlot: p, shouldHideOnFalsyValue: v, shouldShowBadge: q, appliedOffset: i, containerStyle: _, badge: o, badgeWidth: n, badgeHeight: l, styles: N, updateBadgeSize: u, ribbonFrameStyle: C };
89
+ return Object.defineProperty(c, "__isScriptSetup", { enumerable: !1, value: !0 }), c;
88
90
  }
89
91
  });
90
92
  export {
91
- $ as default
93
+ X as default
92
94
  };
package/dist/components/data/nmorph-image-preview/NmorphImagePreview.vue.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import './NmorphImagePreview.css';
2
2
  import _ from "./NmorphImagePreview.vue2.js";
3
- import { openBlock as n, createElementBlock as a, Fragment as g, normalizeStyle as v, normalizeClass as w, createElementVNode as m, renderList as f, withModifiers as k, createVNode as l, createSlots as d, withCtx as o, renderSlot as t, toDisplayString as y, createCommentVNode as c, createBlock as s, resolveDynamicComponent as p } from "vue";
3
+ import { openBlock as n, createElementBlock as a, Fragment as g, normalizeStyle as v, normalizeClass as w, createElementVNode as d, renderList as p, withModifiers as k, createVNode as l, createSlots as m, withCtx as o, renderSlot as t, toDisplayString as y, createCommentVNode as c, createBlock as s, resolveDynamicComponent as f } from "vue";
4
4
  /* empty css */
5
5
  import b from "../../../_virtual/_plugin-vue_export-helper.js";
6
6
  const N = ["aria-label", "onClick"], C = {
@@ -20,14 +20,14 @@ function I(r, B, T, e, L, P) {
20
20
  style: v(e.triggerStyle)
21
21
  },
22
22
  [
23
- m("div", {
23
+ d("div", {
24
24
  class: "nmorph-image-preview__trigger",
25
25
  onClick: e.clickHandler
26
26
  }, [
27
27
  e.showGalleryTrigger ? (n(!0), a(
28
28
  g,
29
29
  { key: 0 },
30
- f(e.triggerSources, (i) => (n(), a("button", {
30
+ p(e.triggerSources, (i) => (n(), a("button", {
31
31
  key: `${i.src}-${i.index}`,
32
32
  type: "button",
33
33
  class: "nmorph-image-preview__trigger-item",
@@ -38,8 +38,9 @@ function I(r, B, T, e, L, P) {
38
38
  src: i.src,
39
39
  alt: e.getTriggerLabel(i.index),
40
40
  fit: e.props.fit,
41
+ design: "plain",
41
42
  "frame-border": 0
42
- }, d({
43
+ }, m({
43
44
  _: 2
44
45
  /* DYNAMIC */
45
46
  }, [
@@ -73,8 +74,9 @@ function I(r, B, T, e, L, P) {
73
74
  src: e.triggerSource,
74
75
  alt: e.props.alt,
75
76
  fit: e.props.fit,
77
+ design: "plain",
76
78
  "frame-border": 0
77
- }, d({
79
+ }, m({
78
80
  _: 2
79
81
  /* DYNAMIC */
80
82
  }, [
@@ -121,12 +123,14 @@ function I(r, B, T, e, L, P) {
121
123
  (n(), a(
122
124
  g,
123
125
  null,
124
- f(e.actions, (i, h) => m("div", {
126
+ p(e.actions, (i, h) => d("div", {
125
127
  key: h,
126
128
  class: "nmorph-image-preview__action-element"
127
129
  }, [
128
130
  l(e.NmorphButton, {
131
+ class: "nmorph-preview-portal__control-button",
129
132
  design: "plain",
133
+ borderless: "",
130
134
  onClick: i.handler
131
135
  }, {
132
136
  default: o(() => [
@@ -135,7 +139,7 @@ function I(r, B, T, e, L, P) {
135
139
  null,
136
140
  {
137
141
  default: o(() => [
138
- (n(), s(p(i.icon)))
142
+ (n(), s(f(i.icon)))
139
143
  ]),
140
144
  _: 2
141
145
  /* DYNAMIC */
@@ -151,16 +155,18 @@ function I(r, B, T, e, L, P) {
151
155
  64
152
156
  /* STABLE_FRAGMENT */
153
157
  )),
154
- m("div", S, [
158
+ d("div", S, [
155
159
  l(e.NmorphButton, {
160
+ class: "nmorph-preview-portal__control-button",
156
161
  design: "plain",
162
+ borderless: "",
157
163
  disabled: e.scaleLevel === 1,
158
164
  onClick: e.enlargeShrinkActionData.handler
159
165
  }, {
160
166
  default: o(() => [
161
167
  l(e.NmorphIcon, null, {
162
168
  default: o(() => [
163
- (n(), s(p(e.enlargeShrinkActionData.icon)))
169
+ (n(), s(f(e.enlargeShrinkActionData.icon)))
164
170
  ]),
165
171
  _: 1
166
172
  /* STABLE */
@@ -176,9 +182,10 @@ function I(r, B, T, e, L, P) {
176
182
  src: e.triggerSource,
177
183
  alt: e.props.alt,
178
184
  fit: "contain",
185
+ design: "plain",
179
186
  "frame-border": 0,
180
187
  style: v({ transform: `rotate(${e.rotateLevel}deg) scale(${e.scaleLevel})` })
181
- }, d({
188
+ }, m({
182
189
  _: 2
183
190
  /* DYNAMIC */
184
191
  }, [