@nmorph/nmorph-ui-kit 3.0.17 → 3.0.18
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.
- package/dist/components/basic/nmorph-button/NmorphButton.vue2.js +6 -6
- package/dist/components/basic/nmorph-link/NmorphLink.css +1 -1
- package/dist/components/basic/nmorph-link/NmorphLink.vue2.js +7 -7
- package/dist/components/basic/nmorph-text/NmorphText.vue2.js +1 -1
- package/dist/components/data/nmorph-audio-meter/NmorphAudioMeter.css +1 -1
- package/dist/components/data/nmorph-audio-meter/NmorphAudioMeter.vue2.js +15 -15
- package/dist/components/data/nmorph-audio-preview/NmorphAudioPreview.css +1 -1
- package/dist/components/data/nmorph-audio-preview/NmorphAudioPreview.vue2.js +8 -8
- package/dist/components/data/nmorph-badge/NmorphBadge.vue2.js +1 -1
- package/dist/components/data/nmorph-empty/NmorphEmpty.css +1 -1
- package/dist/components/data/nmorph-file-card/NmorphFileCard.css +1 -1
- package/dist/components/data/nmorph-file-card/NmorphFileCard.vue2.js +12 -12
- package/dist/components/data/nmorph-media-gallery/NmorphMediaGallery.css +1 -1
- package/dist/components/data/nmorph-media-gallery/NmorphMediaGallery.vue.js +11 -11
- package/dist/components/data/nmorph-media-tile/NmorphMediaTile.css +1 -1
- package/dist/components/data/nmorph-preview-portal/NmorphPreviewPortal.css +1 -1
- package/dist/components/data/nmorph-video-preview/NmorphVideoPreview.css +1 -1
- package/dist/components/data/nmorph-video-preview/NmorphVideoPreview.vue2.js +19 -19
- package/dist/components/feedback/nmorph-alert/NmorphAlert.css +1 -1
- package/dist/components/feedback/nmorph-callout/NmorphCallout.css +1 -1
- package/dist/components/feedback/nmorph-callout/NmorphCallout.vue2.js +10 -9
- package/dist/components/feedback/nmorph-guide/NmorphGuide.vue2.js +3 -3
- package/dist/components/feedback/nmorph-guide/NmorphGuideStep.css +1 -1
- package/dist/components/form/nmorph-form/components/nmorph-form-item/NmorphFormItem.css +1 -1
- package/dist/components/form/nmorph-form/components/nmorph-form-item/inner-components/nmorph-validation-icon/NmorphValidationIcon.css +1 -1
- package/dist/components/providers/nmorph-notification-provider/NmorphNotificationProvider.css +1 -1
- package/dist/components/providers/nmorph-notification-provider/NmorphNotificationProvider.vue2.js +22 -22
- package/dist/hooks/use-common-styles.js +1 -1
- package/dist/index.umd.js +3 -3
- package/dist/outside-hooks/use-nmorph-theme.js +12 -12
- package/dist/package.json.js +1 -1
- package/dist/src/components/basic/nmorph-button/NmorphButton.vue.d.ts +0 -1
- package/dist/src/components/basic/nmorph-link/NmorphLink.vue.d.ts +0 -1
- package/dist/src/components/data/nmorph-audio-meter/NmorphAudioMeter.vue.d.ts +0 -6
- package/dist/src/components/data/nmorph-badge/NmorphBadge.vue.d.ts +0 -1
- package/dist/src/components/feedback/nmorph-callout/NmorphCallout.vue.d.ts +0 -1
- package/dist/src/main.d.ts +2 -0
- package/dist/style.css +1 -1
- package/package.json +1 -1
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import './NmorphVideoPreview.css';
|
|
2
|
-
import { defineComponent as $, useSlots as j, ref as
|
|
2
|
+
import { defineComponent as $, useSlots as j, ref as p, computed as t, watch as z } from "vue";
|
|
3
3
|
import { useModifiers as U } from "../../../utils/create-modifiers.js";
|
|
4
4
|
import { createCssSizeVariables as G } from "../../../utils/common.js";
|
|
5
5
|
import { useMergedAttrs as J } from "../../../utils/attrs.js";
|
|
@@ -13,7 +13,7 @@ import re from "../../../assets/icons/full-screen.svg.js";
|
|
|
13
13
|
import te from "../../../assets/icons/external-link.svg.js";
|
|
14
14
|
import oe from "../../../assets/icons/eye.svg.js";
|
|
15
15
|
import ae from "../../../assets/icons/download.svg.js";
|
|
16
|
-
const ne = "var(--nmorph-
|
|
16
|
+
const ne = "var(--nmorph-white-color)", m = 0.25, Ne = /* @__PURE__ */ $({
|
|
17
17
|
inheritAttrs: !1,
|
|
18
18
|
__name: "NmorphVideoPreview",
|
|
19
19
|
props: {
|
|
@@ -46,11 +46,11 @@ const ne = "var(--nmorph-contrast-text-color)", m = 0.25, Ne = /* @__PURE__ */ $
|
|
|
46
46
|
},
|
|
47
47
|
emits: ["play", "pause", "open", "preview", "fullscreen", "download", "error"],
|
|
48
48
|
setup(B, { expose: P, emit: _ }) {
|
|
49
|
-
const e = B, n = _, v = j(), l =
|
|
49
|
+
const e = B, n = _, v = j(), l = p(null), c = p(!1), o = p(!1), i = p(!1), h = (r) => {
|
|
50
50
|
if (!r || r < 0) return "";
|
|
51
|
-
const a = Math.round(r / 1e3),
|
|
52
|
-
return `${
|
|
53
|
-
}, A = t(() => h(e.durationMs)), u = t(() => !!e.src && !e.loading && !e.error), H = t(() => e.showPlaybackButton && u.value &&
|
|
51
|
+
const a = Math.round(r / 1e3), s = Math.floor(a / 60), f = a % 60;
|
|
52
|
+
return `${s}:${f.toString().padStart(2, "0")}`;
|
|
53
|
+
}, A = t(() => h(e.durationMs)), u = t(() => !!e.src && !e.loading && !e.error), H = t(() => e.showPlaybackButton && u.value && i.value), F = t(
|
|
54
54
|
() => e.showPlaybackButton && e.preload === "metadata" ? "auto" : e.preload
|
|
55
55
|
), y = t(() => e.showFullscreenAction && u.value && !e.controls), w = t(() => u.value && (e.showPreviewAction || y.value)), g = t(() => e.showDefaultActions && (e.src || e.downloadHref)), N = t(() => !!v.actions || w.value || g.value), q = t(
|
|
56
56
|
() => U({
|
|
@@ -77,14 +77,14 @@ const ne = "var(--nmorph-contrast-text-color)", m = 0.25, Ne = /* @__PURE__ */ $
|
|
|
77
77
|
z(
|
|
78
78
|
() => [e.src, e.loading, e.error],
|
|
79
79
|
() => {
|
|
80
|
-
o.value = !1,
|
|
80
|
+
o.value = !1, i.value = !1;
|
|
81
81
|
}
|
|
82
82
|
);
|
|
83
83
|
const O = () => n("open"), k = () => n("download"), M = () => {
|
|
84
|
-
e.previewMode === "internal" && (
|
|
85
|
-
},
|
|
86
|
-
|
|
87
|
-
},
|
|
84
|
+
e.previewMode === "internal" && (c.value = !0), n("preview");
|
|
85
|
+
}, D = () => {
|
|
86
|
+
c.value = !1;
|
|
87
|
+
}, L = async () => {
|
|
88
88
|
const r = l.value;
|
|
89
89
|
if (r) {
|
|
90
90
|
n("fullscreen");
|
|
@@ -98,8 +98,8 @@ const ne = "var(--nmorph-contrast-text-color)", m = 0.25, Ne = /* @__PURE__ */ $
|
|
|
98
98
|
} catch {
|
|
99
99
|
}
|
|
100
100
|
}
|
|
101
|
-
},
|
|
102
|
-
if (!(!l.value || e.loading || e.error || !
|
|
101
|
+
}, x = async () => {
|
|
102
|
+
if (!(!l.value || e.loading || e.error || !i.value)) {
|
|
103
103
|
if (o.value) {
|
|
104
104
|
l.value.pause();
|
|
105
105
|
return;
|
|
@@ -113,16 +113,16 @@ const ne = "var(--nmorph-contrast-text-color)", m = 0.25, Ne = /* @__PURE__ */ $
|
|
|
113
113
|
}, b = (r) => {
|
|
114
114
|
const a = r.duration;
|
|
115
115
|
if (!Number.isFinite(a) || a <= 0) return !1;
|
|
116
|
-
const
|
|
117
|
-
for (let d = 0; d <
|
|
116
|
+
const s = r.buffered, f = Math.max(0, a - m);
|
|
117
|
+
for (let d = 0; d < s.length; d += 1)
|
|
118
118
|
try {
|
|
119
|
-
if (
|
|
119
|
+
if (s.start(d) <= m && s.end(d) >= f) return !0;
|
|
120
120
|
} catch {
|
|
121
121
|
return !1;
|
|
122
122
|
}
|
|
123
123
|
return !1;
|
|
124
124
|
}, C = () => {
|
|
125
|
-
|
|
125
|
+
i.value = l.value ? b(l.value) : !1;
|
|
126
126
|
}, V = (r) => {
|
|
127
127
|
o.value = !0, n("play", r);
|
|
128
128
|
}, R = (r) => {
|
|
@@ -130,10 +130,10 @@ const ne = "var(--nmorph-contrast-text-color)", m = 0.25, Ne = /* @__PURE__ */ $
|
|
|
130
130
|
}, T = () => {
|
|
131
131
|
o.value = !1;
|
|
132
132
|
}, W = (r) => {
|
|
133
|
-
o.value = !1,
|
|
133
|
+
o.value = !1, i.value = !1, n("error", r);
|
|
134
134
|
};
|
|
135
135
|
P({ videoRef: l });
|
|
136
|
-
const I = { CONTRAST_ICON_COLOR: ne, VIDEO_BUFFER_EPSILON_SECONDS: m, props: e, emit: n, slots: v, videoRef: l, previewOpen:
|
|
136
|
+
const I = { CONTRAST_ICON_COLOR: ne, VIDEO_BUFFER_EPSILON_SECONDS: m, props: e, emit: n, slots: v, videoRef: l, previewOpen: c, playing: o, videoLoaded: i, formatDuration: h, duration: A, mediaReady: u, showPlaybackControl: H, resolvedPreload: F, showFullscreenAction: y, hasPreviewActions: w, hasDefaultActions: g, hasActions: N, modifiers: q, styles: S, rootAttrs: E, openHandler: O, downloadHandler: k, previewHandler: M, closePreviewHandler: D, fullscreenHandler: L, togglePlayback: x, isVideoFullyBuffered: b, updateVideoLoaded: C, playHandler: V, pauseHandler: R, endedHandler: T, errorHandler: W, get NmorphIcon() {
|
|
137
137
|
return X;
|
|
138
138
|
}, get NmorphIconDownload() {
|
|
139
139
|
return ae;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.nmorph-alert{--nmorph-private-alert-background-color: var(--nmorph-
|
|
1
|
+
.nmorph-alert{--nmorph-private-alert-background-color: var(--nmorph-info-color);display:inline-block;padding:var(--indentation-03) var(--indentation-04);background:var(--nmorph-private-alert-background-color);border-radius:var(--default-border-radius)}.nmorph-alert .nmorph-alert__content,.nmorph-alert .nmorph-alert__content-title{color:var(--nmorph-contrast-text-color);white-space:pre-line}.nmorph-alert .nmorph-alert__content-title{font-weight:var(--nmorph-typography-title-small-font-weight);font-size:var(--nmorph-typography-title-small-font-size);line-height:1;line-height:var(--line-height-loose)}.nmorph-alert .nmorph-alert__html-wrapper{display:block}.nmorph-alert .nmorph-alert__wrapper{justify-content:space-between}.nmorph-alert .nmorph-alert__wrapper,.nmorph-alert .nmorph-alert__left-side{display:flex;align-items:center}.nmorph-alert .nmorph-alert__icon{margin-right:var(--indentation-03)}.nmorph-alert .nmorph-alert__close{display:inline-flex;flex:0 0 auto;justify-content:center;align-items:center;align-self:var(--nmorph-private-alert-close-align);width:28px;height:28px;margin-right:-7px;margin-left:var(--indentation-03);cursor:pointer}.nmorph-alert .nmorph-alert__close .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-contrast-text-color)}.nmorph-alert.nmorph-alert--success{--nmorph-private-alert-background-color: var(--nmorph-success-color)}.nmorph-alert.nmorph-alert--success .nmorph-alert__icon .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-success-text-color)}.nmorph-alert.nmorph-alert--error{--nmorph-private-alert-background-color: var(--nmorph-error-color)}.nmorph-alert.nmorph-alert--error .nmorph-alert__icon .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-error-text-color)}.nmorph-alert.nmorph-alert--warning{--nmorph-private-alert-background-color: var(--nmorph-warn-color)}.nmorph-alert.nmorph-alert--warning .nmorph-alert__icon .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-warn-text-color)}.nmorph-alert.nmorph-alert--info{--nmorph-private-alert-background-color: var(--nmorph-info-color)}.nmorph-alert.nmorph-alert--info .nmorph-alert__icon .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-info-text-color)}.nmorph-alert.nmorph-alert--bordered{border:1px solid var(--nmorph-gray-color)}.nmorph-alert.nmorph-alert--fill{width:100%}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.nmorph-callout{--nmorph-private-callout-color: var(--nmorph-
|
|
1
|
+
.nmorph-callout{--nmorph-private-callout-accent-color: var(--nmorph-info-text-color);--nmorph-private-callout-background-color: var(--nmorph-info-color);--nmorph-private-callout-padding: var(--indentation-03) var(--indentation-04);--nmorph-private-callout-border-radius: var(--default-border-radius);--nmorph-private-callout-accent-width: var(--indentation-02);--nmorph-private-callout-title-gap: var(--indentation-03);--nmorph-private-callout-title-font-size: var(--nmorph-typography-title-small-font-size);--nmorph-private-callout-content-font-size: var(--nmorph-typography-body-small-font-size);position:relative;display:block;padding:var(--nmorph-private-callout-padding);overflow:hidden;color:var(--nmorph-contrast-text-color);text-decoration:none;background:var(--nmorph-private-callout-background-color);border-radius:var(--nmorph-private-callout-border-radius)}.nmorph-callout:before{position:absolute;top:0;left:0;width:var(--nmorph-private-callout-accent-width);height:100%;background:var(--nmorph-private-callout-accent-color);content:""}.nmorph-callout.nmorph-callout--warning{--nmorph-private-callout-accent-color: var(--nmorph-warn-text-color);--nmorph-private-callout-background-color: var(--nmorph-warn-color)}.nmorph-callout.nmorph-callout--success{--nmorph-private-callout-accent-color: var(--nmorph-success-text-color);--nmorph-private-callout-background-color: var(--nmorph-success-color)}.nmorph-callout.nmorph-callout--error{--nmorph-private-callout-accent-color: var(--nmorph-error-text-color);--nmorph-private-callout-background-color: var(--nmorph-error-color)}.nmorph-callout .nmorph-callout__title{margin-bottom:var(--nmorph-private-callout-title-gap);font-weight:var(--nmorph-typography-title-small-font-weight);font-size:var(--nmorph-private-callout-title-font-size);line-height:var(--nmorph-typography-title-small-line-height)}.nmorph-callout .nmorph-callout__title,.nmorph-callout .nmorph-callout__content{position:relative;z-index:1}.nmorph-callout .nmorph-callout__content{font-weight:var(--nmorph-typography-body-small-font-weight);font-size:var(--nmorph-private-callout-content-font-size);line-height:var(--nmorph-typography-body-small-line-height);white-space:pre-wrap}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import './NmorphCallout.css';
|
|
2
2
|
import { defineComponent as g, useSlots as m, computed as t } from "vue";
|
|
3
3
|
import { createCssVariables as y, createCssSizeVariables as v } from "../../../utils/common.js";
|
|
4
|
-
import { useMergedAttrs as
|
|
4
|
+
import { useMergedAttrs as h } from "../../../utils/attrs.js";
|
|
5
5
|
const _ = /* @__PURE__ */ g({
|
|
6
6
|
inheritAttrs: !1,
|
|
7
7
|
__name: "NmorphCallout",
|
|
@@ -17,7 +17,7 @@ const _ = /* @__PURE__ */ g({
|
|
|
17
17
|
referrerPolicy: { type: String, required: !1, default: void 0 },
|
|
18
18
|
download: { type: [String, Boolean], required: !1, default: void 0 },
|
|
19
19
|
ariaLabel: { type: String, required: !1, default: void 0 },
|
|
20
|
-
color: { type: String, required: !1
|
|
20
|
+
color: { type: String, required: !1 },
|
|
21
21
|
padding: { type: [Number, String], required: !1, default: "var(--indentation-03) var(--indentation-04)" },
|
|
22
22
|
borderRadius: { type: [Number, String], required: !1, default: "var(--default-border-radius)" },
|
|
23
23
|
accentWidth: { type: [Number, String], required: !1, default: "var(--indentation-02)" },
|
|
@@ -32,7 +32,7 @@ const _ = /* @__PURE__ */ g({
|
|
|
32
32
|
blank: "_blank",
|
|
33
33
|
parent: "_parent",
|
|
34
34
|
top: "_top"
|
|
35
|
-
}, e = u, r = m(),
|
|
35
|
+
}, e = u, r = m(), o = t(() => ({
|
|
36
36
|
...v({
|
|
37
37
|
"--nmorph-private-callout-padding": e.padding,
|
|
38
38
|
"--nmorph-private-callout-border-radius": e.borderRadius,
|
|
@@ -42,25 +42,26 @@ const _ = /* @__PURE__ */ g({
|
|
|
42
42
|
"--nmorph-private-callout-content-font-size": e.contentFontSize
|
|
43
43
|
}),
|
|
44
44
|
...y({
|
|
45
|
-
"--nmorph-private-callout-color": e.color
|
|
45
|
+
"--nmorph-private-callout-accent-color": e.color,
|
|
46
|
+
"--nmorph-private-callout-background-color": e.color
|
|
46
47
|
})
|
|
47
|
-
})),
|
|
48
|
+
})), l = t(() => {
|
|
48
49
|
if (e.target)
|
|
49
50
|
return e.target in a ? a[e.target] : e.target;
|
|
50
51
|
}), i = t(() => e.as !== "a" ? {} : {
|
|
51
52
|
href: e.href,
|
|
52
|
-
target:
|
|
53
|
+
target: l.value,
|
|
53
54
|
rel: e.rel,
|
|
54
55
|
referrerpolicy: e.referrerpolicy ?? e.referrerPolicy,
|
|
55
56
|
download: e.download === !0 ? "" : e.download === !1 ? void 0 : e.download,
|
|
56
57
|
"aria-label": e.ariaLabel
|
|
57
|
-
}), n =
|
|
58
|
+
}), n = h(
|
|
58
59
|
t(() => ["nmorph-callout", `nmorph-callout--${e.type}`]),
|
|
59
|
-
|
|
60
|
+
o
|
|
60
61
|
), p = t(() => ({
|
|
61
62
|
...n.value,
|
|
62
63
|
...i.value
|
|
63
|
-
})), f = t(() => !!(r.header || r.title || e.title)), c = t(() => !!r.default), d = { targetMap: a, props: e, slots: r, styles:
|
|
64
|
+
})), f = t(() => !!(r.header || r.title || e.title)), c = t(() => !!r.default), d = { targetMap: a, props: e, slots: r, styles: o, resolvedTarget: l, linkAttrs: i, mergedAttrs: n, rootAttrs: p, hasHeader: f, hasDefaultContent: c };
|
|
64
65
|
return Object.defineProperty(d, "__isScriptSetup", { enumerable: !1, value: !0 }), d;
|
|
65
66
|
}
|
|
66
67
|
});
|
|
@@ -29,9 +29,9 @@ const L = /* @__PURE__ */ A({
|
|
|
29
29
|
setup(F, { expose: P, emit: j }) {
|
|
30
30
|
const O = {
|
|
31
31
|
accent: "var(--nmorph-accent-color)",
|
|
32
|
-
success: "var(--nmorph-success-color)",
|
|
33
|
-
error: "var(--nmorph-error-color)",
|
|
34
|
-
warning: "var(--nmorph-warn-color)"
|
|
32
|
+
success: "var(--nmorph-success-text-color)",
|
|
33
|
+
error: "var(--nmorph-error-text-color)",
|
|
34
|
+
warning: "var(--nmorph-warn-text-color)"
|
|
35
35
|
}, t = F, i = j, u = N({}), m = N(void 0);
|
|
36
36
|
let f = 0;
|
|
37
37
|
const d = (e) => String(e), b = r(() => {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.nmorph-guide-step .nmorph-tooltip__trigger{position:relative;border-radius:var(--nmorph-private-guide-target-outline-radius, var(--border-radius-120))}.nmorph-guide-step .nmorph-tooltip__trigger:after{position:absolute;z-index:1;border:2px solid var(--nmorph-private-guide-target-outline-color, var(--nmorph-success-color));border-radius:inherit;box-shadow:0 0 0 1px color-mix(in srgb,var(--nmorph-private-guide-target-outline-color, var(--nmorph-success-color)) 18%,transparent),0 0 8px color-mix(in srgb,var(--nmorph-private-guide-target-outline-color, var(--nmorph-success-color)) 28%,transparent),inset 0 0 4px color-mix(in srgb,var(--nmorph-private-guide-target-outline-color, var(--nmorph-success-color)) 18%,transparent);transform:scale(.98);opacity:0;transition:opacity var(--transition-02) ease,transform var(--transition-02) ease;pointer-events:none;inset:calc(-1 * var(--nmorph-private-guide-target-outline-offset, var(--indentation-02)));content:""}.nmorph-guide-step.nmorph-guide-step--active .nmorph-tooltip__trigger:after{transform:scale(1);opacity:1}.nmorph-guide-step__card{display:grid;gap:var(--indentation-03);box-sizing:border-box;min-width:min(240px,100vw - 48px);padding:var(--indentation-02);border-radius:var(--default-border-radius)}.nmorph-guide-step__tooltip--bordered{box-sizing:border-box;border:var(--nmorph-plain-border)}.nmorph-guide-step__image{display:block;width:100%;max-height:140px;border-radius:var(--default-border-radius);object-fit:cover}.nmorph-guide-step__body{display:grid;gap:var(--indentation-02)}.nmorph-guide-step__progress{color:var(--nmorph-placeholder-text-color);font-size:var(--nmorph-typography-body-small-font-size);line-height:var(--nmorph-typography-body-small-line-height)}.nmorph-guide-step__title{margin:0;color:var(--nmorph-text-color);font-size:var(--nmorph-typography-title-small-font-size);line-height:var(--nmorph-typography-title-small-line-height)}.nmorph-guide-step__text{margin:0;color:var(--nmorph-text-color);font-size:var(--nmorph-typography-body-font-size);line-height:var(--nmorph-typography-body-line-height)}.nmorph-guide-step__actions{display:flex;gap:var(--indentation-02);align-items:center}.nmorph-guide-step__spacer{flex:1 1 auto}
|
|
1
|
+
.nmorph-guide-step .nmorph-tooltip__trigger{position:relative;border-radius:var(--nmorph-private-guide-target-outline-radius, var(--border-radius-120))}.nmorph-guide-step .nmorph-tooltip__trigger:after{position:absolute;z-index:1;border:2px solid var(--nmorph-private-guide-target-outline-color, var(--nmorph-success-text-color));border-radius:inherit;box-shadow:0 0 0 1px color-mix(in srgb,var(--nmorph-private-guide-target-outline-color, var(--nmorph-success-text-color)) 18%,transparent),0 0 8px color-mix(in srgb,var(--nmorph-private-guide-target-outline-color, var(--nmorph-success-text-color)) 28%,transparent),inset 0 0 4px color-mix(in srgb,var(--nmorph-private-guide-target-outline-color, var(--nmorph-success-text-color)) 18%,transparent);transform:scale(.98);opacity:0;transition:opacity var(--transition-02) ease,transform var(--transition-02) ease;pointer-events:none;inset:calc(-1 * var(--nmorph-private-guide-target-outline-offset, var(--indentation-02)));content:""}.nmorph-guide-step.nmorph-guide-step--active .nmorph-tooltip__trigger:after{transform:scale(1);opacity:1}.nmorph-guide-step__card{display:grid;gap:var(--indentation-03);box-sizing:border-box;min-width:min(240px,100vw - 48px);padding:var(--indentation-02);border-radius:var(--default-border-radius)}.nmorph-guide-step__tooltip--bordered{box-sizing:border-box;border:var(--nmorph-plain-border)}.nmorph-guide-step__image{display:block;width:100%;max-height:140px;border-radius:var(--default-border-radius);object-fit:cover}.nmorph-guide-step__body{display:grid;gap:var(--indentation-02)}.nmorph-guide-step__progress{color:var(--nmorph-placeholder-text-color);font-size:var(--nmorph-typography-body-small-font-size);line-height:var(--nmorph-typography-body-small-line-height)}.nmorph-guide-step__title{margin:0;color:var(--nmorph-text-color);font-size:var(--nmorph-typography-title-small-font-size);line-height:var(--nmorph-typography-title-small-line-height)}.nmorph-guide-step__text{margin:0;color:var(--nmorph-text-color);font-size:var(--nmorph-typography-body-font-size);line-height:var(--nmorph-typography-body-line-height)}.nmorph-guide-step__actions{display:flex;gap:var(--indentation-02);align-items:center}.nmorph-guide-step__spacer{flex:1 1 auto}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.nmorph-form-item{min-width:0;max-width:100%;margin:var(--indentation-04) var(--indentation-00)}.nmorph-form-item label{font-weight:var(--nmorph-typography-label-font-weight);font-size:var(--nmorph-typography-label-font-size);line-height:var(--nmorph-typography-label-line-height)}.nmorph-form-item .nmorph-form-item__content{position:relative;display:flex;align-items:center;width:100%;min-width:0;max-width:100%}.nmorph-form-item.nmorph-form-item--labeled .nmorph-form-item__content{margin-top:var(--indentation-02)}.nmorph-form-item.nmorph-form-item--valid .nmorph-native-input:focus{background:var(--nmorph-success-color)}.nmorph-form-item.nmorph-form-item--invalid .nmorph-native-input:focus{background:var(--nmorph-error-
|
|
1
|
+
.nmorph-form-item{min-width:0;max-width:100%;margin:var(--indentation-04) var(--indentation-00)}.nmorph-form-item label{font-weight:var(--nmorph-typography-label-font-weight);font-size:var(--nmorph-typography-label-font-size);line-height:var(--nmorph-typography-label-line-height)}.nmorph-form-item .nmorph-form-item__content{position:relative;display:flex;align-items:center;width:100%;min-width:0;max-width:100%}.nmorph-form-item.nmorph-form-item--labeled .nmorph-form-item__content{margin-top:var(--indentation-02)}.nmorph-form-item.nmorph-form-item--valid .nmorph-native-input:focus{background:var(--nmorph-success-color)}.nmorph-form-item.nmorph-form-item--invalid .nmorph-native-input:focus{background:var(--nmorph-error-color)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.nmorph-validation-icon{width:18px;margin-left:var(--indentation-03)}.nmorph-validation-icon.nmorph-validation-icon--valid .nmorph-validation-icon__content{--nmorph-private-icon-color: var(--nmorph-success-color)}.nmorph-validation-icon.nmorph-validation-icon--invalid .nmorph-validation-icon__content{--nmorph-private-icon-color: var(--nmorph-error-text-color)}
|
|
1
|
+
.nmorph-validation-icon{width:18px;margin-left:var(--indentation-03)}.nmorph-validation-icon.nmorph-validation-icon--valid .nmorph-validation-icon__content{--nmorph-private-icon-color: var(--nmorph-success-text-color)}.nmorph-validation-icon.nmorph-validation-icon--invalid .nmorph-validation-icon__content{--nmorph-private-icon-color: var(--nmorph-error-text-color)}
|
package/dist/components/providers/nmorph-notification-provider/NmorphNotificationProvider.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.nmorph-notification-provider{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none}.nmorph-notification-provider .nmorph-notification-provider__notification{position:relative;width:fit-content;height:fit-content;margin:1rem;overflow:hidden;border-radius:var(--default-border-radius);transition:transform .5s ease,opacity .5s ease-in-out;pointer-events:all}.nmorph-notification-provider .nmorph-notification-provider__notification--with-duration .nmorph-alert{padding-bottom:calc(var(--indentation-03) + 12px)}.nmorph-notification-provider .nmorph-notification-provider__duration{position:absolute;right:var(--indentation-04);bottom:var(--indentation-02);left:var(--indentation-04);display:flex;gap:var(--indentation-02);align-items:
|
|
1
|
+
.nmorph-notification-provider{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none}.nmorph-notification-provider .nmorph-notification-provider__notification{position:relative;width:fit-content;height:fit-content;margin:1rem;overflow:hidden;border-radius:var(--default-border-radius);transition:transform .5s ease,opacity .5s ease-in-out;pointer-events:all}.nmorph-notification-provider .nmorph-notification-provider__notification--with-duration .nmorph-alert{padding-bottom:calc(var(--indentation-03) + 12px)}.nmorph-notification-provider .nmorph-notification-provider__notification .nmorph-alert{background:color-mix(in srgb,var(--nmorph-private-alert-background-color) 82%,var(--nmorph-main-color));border-color:color-mix(in srgb,var(--nmorph-contrast-text-color) 12%,transparent);box-shadow:var(--nmorph-shadow-outset);backdrop-filter:blur(8px)}.nmorph-notification-provider .nmorph-notification-provider__duration{position:absolute;right:var(--indentation-04);bottom:calc(var(--indentation-02) + 2px);left:var(--indentation-04);display:flex;gap:var(--indentation-02);align-items:baseline;color:var(--nmorph-contrast-text-color);pointer-events:none}.nmorph-notification-provider .nmorph-notification-provider__duration-track{flex:1 1 auto;min-width:20px;height:3px;overflow:hidden;background:color-mix(in srgb,currentColor 20%,transparent);border-radius:999px;transform:translateY(-1px)}.nmorph-notification-provider .nmorph-notification-provider__duration-bar{display:block;width:100%;height:100%;background:currentColor;border-radius:inherit;transform-origin:left center;opacity:.72;animation:nmorph-notification-provider-duration var(--nmorph-private-notification-provider-duration) linear forwards}.nmorph-notification-provider .nmorph-notification-provider__duration-value{flex:0 0 auto;color:currentColor;font-weight:var(--font-weight-semibold);font-size:var(--nmorph-typography-body-small-font-size);line-height:1;opacity:.82}.nmorph-notification-provider .nmorph-notification-provider__list{position:fixed;display:flex;flex-direction:column;width:fit-content;max-width:100vw;pointer-events:none}.nmorph-notification-provider .nmorph-notification-move{transition:transform .5s ease}.nmorph-notification-provider .nmorph-notification-provider__list--top-left{top:0;left:0;align-items:flex-start}.nmorph-notification-provider .nmorph-notification-provider__list--top-right{top:0;right:0;align-items:flex-end}.nmorph-notification-provider .nmorph-notification-provider__list--bottom-left{bottom:0;left:0;align-items:flex-start}.nmorph-notification-provider .nmorph-notification-provider__list--bottom-right{right:0;bottom:0;align-items:flex-end}.nmorph-notification-provider .nmorph-notification-provider__list--top-center{top:0;left:50%;align-items:center;transform:translate(-50%)}.nmorph-notification-provider .nmorph-notification-provider__list--bottom-center{bottom:0;left:50%;align-items:center;transform:translate(-50%)}.nmorph-notification-provider .nmorph-notification-provider__list--top-left .nmorph-notification-enter-active,.nmorph-notification-provider .nmorph-notification-provider__list--bottom-left .nmorph-notification-enter-active,.nmorph-notification-provider .nmorph-notification-provider__list--top-right .nmorph-notification-enter-active,.nmorph-notification-provider .nmorph-notification-provider__list--bottom-right .nmorph-notification-enter-active,.nmorph-notification-provider .nmorph-notification-provider__list--top-center .nmorph-notification-enter-active,.nmorph-notification-provider .nmorph-notification-provider__list--bottom-center .nmorph-notification-enter-active,.nmorph-notification-provider .nmorph-notification-provider__list--top-left .nmorph-notification-leave-active,.nmorph-notification-provider .nmorph-notification-provider__list--bottom-left .nmorph-notification-leave-active,.nmorph-notification-provider .nmorph-notification-provider__list--top-right .nmorph-notification-leave-active,.nmorph-notification-provider .nmorph-notification-provider__list--bottom-right .nmorph-notification-leave-active,.nmorph-notification-provider .nmorph-notification-provider__list--top-center .nmorph-notification-leave-active,.nmorph-notification-provider .nmorph-notification-provider__list--bottom-center .nmorph-notification-leave-active{transition:transform .5s ease,opacity .5s ease-in-out}.nmorph-notification-provider .nmorph-notification-provider__list--top-left .nmorph-notification-enter-from,.nmorph-notification-provider .nmorph-notification-provider__list--bottom-left .nmorph-notification-enter-from{transform:translate(-100%)}.nmorph-notification-provider .nmorph-notification-provider__list--top-right .nmorph-notification-enter-from,.nmorph-notification-provider .nmorph-notification-provider__list--bottom-right .nmorph-notification-enter-from{transform:translate(100%)}.nmorph-notification-provider .nmorph-notification-provider__list--top-center .nmorph-notification-enter-from{transform:translateY(-100%)}.nmorph-notification-provider .nmorph-notification-provider__list--bottom-center .nmorph-notification-enter-from{transform:translateY(100%)}.nmorph-notification-provider .nmorph-notification-provider__list--top-left .nmorph-notification-leave-to,.nmorph-notification-provider .nmorph-notification-provider__list--bottom-left .nmorph-notification-leave-to{transform:translate(-100%)}.nmorph-notification-provider .nmorph-notification-provider__list--top-right .nmorph-notification-leave-to,.nmorph-notification-provider .nmorph-notification-provider__list--bottom-right .nmorph-notification-leave-to{transform:translate(100%)}.nmorph-notification-provider .nmorph-notification-provider__list--top-center .nmorph-notification-leave-to{transform:translateY(-100%)}.nmorph-notification-provider .nmorph-notification-provider__list--bottom-center .nmorph-notification-leave-to{transform:translateY(100%)}.nmorph-notification-provider .nmorph-notification-enter-from{opacity:0}.nmorph-notification-provider .nmorph-notification-enter-to{transform:translate(0);opacity:1}.nmorph-notification-provider .nmorph-notification-leave-active{overflow:hidden}.nmorph-notification-provider .nmorph-notification-leave-active .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-text-color);display:flex;align-items:center;width:var(--nmorph-private-icon-width);min-width:var(--nmorph-private-icon-width);height:var(--nmorph-private-icon-height);min-height:var(--nmorph-private-icon-height)}.nmorph-notification-provider .nmorph-notification-leave-active .nmorph-icon--small{--nmorph-private-icon-width: 14px;--nmorph-private-icon-height: 14px}.nmorph-notification-provider .nmorph-notification-leave-active .nmorph-icon--medium{--nmorph-private-icon-width: 20px;--nmorph-private-icon-height: 20px}.nmorph-notification-provider .nmorph-notification-leave-active .nmorph-icon--large{--nmorph-private-icon-width: 32px;--nmorph-private-icon-height: 32px}.nmorph-notification-provider .nmorph-notification-leave-active .nmorph-icon__content{display:flex;justify-content:center;align-items:center;width:var(--nmorph-private-icon-width);min-width:var(--nmorph-private-icon-width);height:var(--nmorph-private-icon-height);min-height:var(--nmorph-private-icon-height);overflow:hidden}.nmorph-notification-provider .nmorph-notification-leave-active .nmorph-alert__close .nmorph-icon,.nmorph-notification-provider .nmorph-notification-leave-active .nmorph-alert__content,.nmorph-notification-provider .nmorph-notification-leave-active .nmorph-alert__content-title{--nmorph-private-icon-color: var(--nmorph-contrast-text-color);color:var(--nmorph-contrast-text-color)}.nmorph-notification-provider .nmorph-notification-leave-active .nmorph-alert--success .nmorph-alert__icon .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-success-text-color)}.nmorph-notification-provider .nmorph-notification-leave-active .nmorph-alert--error .nmorph-alert__icon .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-error-text-color)}.nmorph-notification-provider .nmorph-notification-leave-active .nmorph-alert--warning .nmorph-alert__icon .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-warn-text-color)}.nmorph-notification-provider .nmorph-notification-leave-active .nmorph-alert--info .nmorph-alert__icon .nmorph-icon{--nmorph-private-icon-color: var(--nmorph-info-text-color)}.nmorph-notification-provider .nmorph-notification-leave-active svg{width:100%;height:100%;fill:var(--nmorph-private-icon-color);stroke-width:0}.nmorph-notification-provider .nmorph-notification-leave-active path{stroke:var(--nmorph-private-icon-color)}.nmorph-notification-provider .nmorph-notification-leave-to{opacity:0;pointer-events:none}.nmorph-notification-provider .nmorph-notification-provider__list--top-left .nmorph-notification-provider__notification--closing,.nmorph-notification-provider .nmorph-notification-provider__list--bottom-left .nmorph-notification-provider__notification--closing{position:absolute;transform:translate(-100%);opacity:0;pointer-events:none}.nmorph-notification-provider .nmorph-notification-provider__list--top-right .nmorph-notification-provider__notification--closing,.nmorph-notification-provider .nmorph-notification-provider__list--bottom-right .nmorph-notification-provider__notification--closing{position:absolute;transform:translate(100%);opacity:0;pointer-events:none}.nmorph-notification-provider .nmorph-notification-provider__list--top-center .nmorph-notification-provider__notification--closing{position:absolute;transform:translateY(-100%);opacity:0;pointer-events:none}.nmorph-notification-provider .nmorph-notification-provider__list--bottom-center .nmorph-notification-provider__notification--closing{position:absolute;transform:translateY(100%);opacity:0;pointer-events:none}@keyframes nmorph-notification-provider-duration{0%{transform:scaleX(1)}to{transform:scaleX(0)}}
|
package/dist/components/providers/nmorph-notification-provider/NmorphNotificationProvider.vue2.js
CHANGED
|
@@ -16,33 +16,33 @@ const P = 500, U = 250, ie = /* @__PURE__ */ J({
|
|
|
16
16
|
},
|
|
17
17
|
setup(V, { expose: Z }) {
|
|
18
18
|
Z();
|
|
19
|
-
const T = (e) => typeof e.id == "string" && e.id.length > 0,
|
|
19
|
+
const T = (e) => typeof e.id == "string" && e.id.length > 0, d = s([]), a = s([]), n = s([]), c = s(Date.now()), f = /* @__PURE__ */ new Map(), m = /* @__PURE__ */ new Map(), v = /* @__PURE__ */ new Map();
|
|
20
20
|
let i;
|
|
21
|
-
const w = Object.values(ee), p = (e) => typeof e.duration != "number" || !Number.isFinite(e.duration) ? 0 : Math.max(e.duration, 0), R = (e) => p(e) > 0,
|
|
21
|
+
const w = Object.values(ee), p = (e) => typeof e.duration != "number" || !Number.isFinite(e.duration) ? 0 : Math.max(e.duration, 0), R = (e) => p(e) > 0, C = (e) => e.showDurationValue !== !1, q = (e) => {
|
|
22
22
|
const t = p(e), r = v.get(e.id);
|
|
23
|
-
return !t || !r ? t : Math.max(t - (
|
|
24
|
-
}, z = (e) =>
|
|
23
|
+
return !t || !r ? t : Math.max(t - (c.value - r), 0);
|
|
24
|
+
}, z = (e) => `${Math.ceil(e / 1e3)}s`, $ = (e) => z(q(e)), F = (e) => ({
|
|
25
25
|
"--nmorph-private-notification-provider-duration": `${p(e)}ms`
|
|
26
26
|
}), h = (e, t = !1) => {
|
|
27
27
|
const r = f.get(e);
|
|
28
28
|
r && clearTimeout(r), f.delete(e), m.delete(e), t || v.delete(e);
|
|
29
29
|
}, k = (e) => {
|
|
30
|
-
n.value = n.value.filter((t) => t.id !== e),
|
|
30
|
+
n.value = n.value.filter((t) => t.id !== e), a.value = a.value.filter((t) => t !== e), h(e);
|
|
31
31
|
}, g = (e, t = !0) => {
|
|
32
|
-
|
|
32
|
+
a.value.includes(e) || (h(e, !0), t && !d.value.includes(e) && (d.value = [...d.value, e]), a.value = [...a.value, e], setTimeout(() => k(e), P));
|
|
33
33
|
}, E = (e) => {
|
|
34
34
|
const t = p(e);
|
|
35
|
-
m.get(e.id) !== t && (h(e.id), t && (
|
|
35
|
+
m.get(e.id) !== t && (h(e.id), t && (c.value = Date.now(), v.set(e.id, c.value), f.set(
|
|
36
36
|
e.id,
|
|
37
37
|
setTimeout(() => g(e.id), t)
|
|
38
38
|
), m.set(e.id, t)));
|
|
39
|
-
},
|
|
40
|
-
|
|
39
|
+
}, o = V, D = s(!1), x = Q("nmorph"), I = s(x?.zIndex.current.value ?? 1e3), N = s(!1), A = () => {
|
|
40
|
+
o.zIndex !== void 0 || N.value || (I.value = x?.zIndex.next() ?? I.value + 1, N.value = !0);
|
|
41
41
|
}, G = l(
|
|
42
42
|
() => w.map((e) => {
|
|
43
43
|
const t = n.value.filter(
|
|
44
|
-
(u) => (u.placement ??
|
|
45
|
-
), r = Math.max(t.length -
|
|
44
|
+
(u) => (u.placement ?? o.placement) === e
|
|
45
|
+
), r = Math.max(t.length - o.quantity, 0);
|
|
46
46
|
return {
|
|
47
47
|
placement: e,
|
|
48
48
|
notifications: t.slice(r)
|
|
@@ -50,17 +50,17 @@ const P = 500, U = 250, ie = /* @__PURE__ */ J({
|
|
|
50
50
|
})
|
|
51
51
|
), O = l(
|
|
52
52
|
() => n.value.some(
|
|
53
|
-
(e) => R(e) && !
|
|
53
|
+
(e) => R(e) && !a.value.includes(e.id)
|
|
54
54
|
)
|
|
55
55
|
), _ = l(() => n.value.length > 0), S = l(
|
|
56
|
-
() => _.value ||
|
|
57
|
-
(e) => T(e) && !
|
|
56
|
+
() => _.value || o.notifications.some(
|
|
57
|
+
(e) => T(e) && !d.value.includes(e.id)
|
|
58
58
|
)
|
|
59
|
-
), B = l(() =>
|
|
59
|
+
), B = l(() => o.zIndex ?? I.value), H = l(() => !D.value || o.disabledTeleport), j = l(() => ({ zIndex: B.value })), K = Y("nmorph-notification-provider", j), b = () => {
|
|
60
60
|
i && (clearInterval(i), i = void 0);
|
|
61
61
|
};
|
|
62
62
|
y(
|
|
63
|
-
() =>
|
|
63
|
+
() => o.notifications,
|
|
64
64
|
() => {
|
|
65
65
|
S.value && A();
|
|
66
66
|
},
|
|
@@ -82,15 +82,15 @@ const P = 500, U = 250, ie = /* @__PURE__ */ J({
|
|
|
82
82
|
b();
|
|
83
83
|
return;
|
|
84
84
|
}
|
|
85
|
-
i || (
|
|
86
|
-
|
|
85
|
+
i || (c.value = Date.now(), i = setInterval(() => {
|
|
86
|
+
c.value = Date.now();
|
|
87
87
|
}, U));
|
|
88
88
|
},
|
|
89
89
|
{ immediate: !0 }
|
|
90
90
|
), y(
|
|
91
|
-
() =>
|
|
91
|
+
() => o.notifications,
|
|
92
92
|
(e) => {
|
|
93
|
-
const t = e.filter(T).filter((r) => !
|
|
93
|
+
const t = e.filter(T).filter((r) => !d.value.includes(r.id));
|
|
94
94
|
n.value = n.value.map((r) => {
|
|
95
95
|
const u = t.find((M) => M.id === r.id);
|
|
96
96
|
return u ? { ...r, ...u } : r;
|
|
@@ -108,11 +108,11 @@ const P = 500, U = 250, ie = /* @__PURE__ */ J({
|
|
|
108
108
|
}), X(() => {
|
|
109
109
|
f.forEach((e) => clearTimeout(e)), f.clear(), m.clear(), v.clear(), b();
|
|
110
110
|
});
|
|
111
|
-
const L = { ANIMATION_DURATION: P, DURATION_TICK_INTERVAL: U, hasNotificationId: T, removedIds:
|
|
111
|
+
const L = { ANIMATION_DURATION: P, DURATION_TICK_INTERVAL: U, hasNotificationId: T, removedIds: d, closingIds: a, renderedNotifications: n, durationTick: c, durationTimers: f, durationById: m, durationStartedAtById: v, get durationTicker() {
|
|
112
112
|
return i;
|
|
113
113
|
}, set durationTicker(e) {
|
|
114
114
|
i = e;
|
|
115
|
-
}, placementList: w, getNotificationDuration: p, hasDurationIndicator: R, hasDurationValue:
|
|
115
|
+
}, placementList: w, getNotificationDuration: p, hasDurationIndicator: R, hasDurationValue: C, getNotificationRemainingDuration: q, formatNotificationDuration: z, getNotificationDurationLabel: $, getNotificationStyle: F, clearDurationTimer: h, removeRenderedNotification: k, closeHandler: g, scheduleDurationTimer: E, props: o, isMounted: D, nmorph: x, dynamicZIndex: I, activeZIndexAllocated: N, allocateZIndex: A, notificationGroups: G, hasRunningDurationIndicator: O, hasRenderedNotifications: _, hasActiveNotifications: S, zIndex: B, teleportDisabled: H, rootStyle: j, rootAttrs: K, stopDurationTicker: b, get NmorphAlert() {
|
|
116
116
|
return te;
|
|
117
117
|
} };
|
|
118
118
|
return Object.defineProperty(L, "__isScriptSetup", { enumerable: !1, value: !0 }), L;
|
|
@@ -134,7 +134,7 @@ const v = {
|
|
|
134
134
|
var(--nmorph-dark-shade-color);
|
|
135
135
|
--nmorph-wrapper-padding: calc(var(--base-shadow-width) * 1.5);
|
|
136
136
|
--nmorph-plain-border-color: color-mix(in srgb, var(--nmorph-text-color) 18%, transparent);
|
|
137
|
-
--nmorph-plain-border:
|
|
137
|
+
--nmorph-plain-border: 1px solid var(--nmorph-plain-border-color);
|
|
138
138
|
|
|
139
139
|
--transition-04: 0.4s;
|
|
140
140
|
--transition-03: 0.3s;
|