@nmorph/nmorph-ui-kit 2.2.31 → 2.2.33
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
.nmorph-badge{position:relative;display:inline-block;height:fit-content;--nmorph-badge-dot-size: 4px;--nmorph-badge-ribbon-height: 24px;--nmorph-badge-ribbon-corner-size: 62px;--nmorph-badge-ribbon-width: 116px;--nmorph-badge-ribbon-offset-x: 0px;--nmorph-badge-ribbon-offset-y: 0px}.nmorph-badge .nmorph-badge__container{position:absolute;display:inline-flex;justify-content:center;align-items:center;background:var(--nmorph-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(--font-size-base);line-height:var(--line-height-regular);text-align:center}.nmorph-badge.nmorph-badge--tiny .nmorph-badge__content{font-size:var(--font-size-tiny)}.nmorph-badge.nmorph-badge--extra-small .nmorph-badge__content{font-size:var(--font-size-extra-small)}.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-badge-ribbon-corner-size);height:var(--nmorph-badge-ribbon-corner-size)}.nmorph-badge .nmorph-badge__container--ribbon{top:50%;left:50%;width:var(--nmorph-badge-ribbon-width);height:var(--nmorph-badge-ribbon-height);border-radius:
|
|
1
|
+
.nmorph-badge{position:relative;display:inline-block;height:fit-content;--nmorph-badge-dot-size: 4px;--nmorph-badge-ribbon-height: 24px;--nmorph-badge-ribbon-corner-size: 62px;--nmorph-badge-ribbon-width: 116px;--nmorph-badge-ribbon-offset-x: 0px;--nmorph-badge-ribbon-offset-y: 0px}.nmorph-badge .nmorph-badge__container{position:absolute;display:inline-flex;justify-content:center;align-items:center;background:var(--nmorph-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(--font-size-base);line-height:var(--line-height-regular);text-align:center}.nmorph-badge.nmorph-badge--tiny .nmorph-badge__content{font-size:var(--font-size-tiny)}.nmorph-badge.nmorph-badge--extra-small .nmorph-badge__content{font-size:var(--font-size-extra-small)}.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-badge-ribbon-corner-size);height:var(--nmorph-badge-ribbon-corner-size)}.nmorph-badge .nmorph-badge__container--ribbon{top:50%;left:50%;width:var(--nmorph-badge-ribbon-width);height:var(--nmorph-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:600;font-size:var(--font-size-extra-small);line-height:1;white-space:nowrap;text-overflow:ellipsis}.nmorph-badge .nmorph-badge__ribbon-corner--top-left{top:var(--nmorph-badge-ribbon-offset-y);left:var(--nmorph-badge-ribbon-offset-x)}.nmorph-badge .nmorph-badge__ribbon-corner--top-left .nmorph-badge__container--ribbon{border-bottom-right-radius:var(--border-radius-40);border-bottom-left-radius:var(--border-radius-40);transform:translate(-50%,-50%) rotate(-45deg)}.nmorph-badge .nmorph-badge__ribbon-corner--top-right{top:var(--nmorph-badge-ribbon-offset-y);right:var(--nmorph-badge-ribbon-offset-x)}.nmorph-badge .nmorph-badge__ribbon-corner--top-right .nmorph-badge__container--ribbon{border-bottom-right-radius:var(--border-radius-40);border-bottom-left-radius:var(--border-radius-40);transform:translate(-50%,-50%) rotate(45deg)}.nmorph-badge .nmorph-badge__ribbon-corner--bottom-left{bottom:var(--nmorph-badge-ribbon-offset-y);left:var(--nmorph-badge-ribbon-offset-x)}.nmorph-badge .nmorph-badge__ribbon-corner--bottom-left .nmorph-badge__container--ribbon{border-top-left-radius:var(--border-radius-40);border-top-right-radius:var(--border-radius-40);transform:translate(-50%,-50%) rotate(45deg)}.nmorph-badge .nmorph-badge__ribbon-corner--bottom-right{right:var(--nmorph-badge-ribbon-offset-x);bottom:var(--nmorph-badge-ribbon-offset-y)}.nmorph-badge .nmorph-badge__ribbon-corner--bottom-right .nmorph-badge__container--ribbon{border-top-left-radius:var(--border-radius-40);border-top-right-radius:var(--border-radius-40);transform:translate(-50%,-50%) rotate(-45deg)}.nmorph-badge .nmorph-badge__ribbon-corner--flat{width:var(--nmorph-badge-ribbon-width);height:var(--nmorph-badge-ribbon-height)}.nmorph-badge .nmorph-badge__ribbon-corner--flat .nmorph-badge__container--ribbon{position:relative;top:auto;left:auto;transform:none}.nmorph-badge.nmorph-badge--tiny .nmorph-badge__container--ribbon .nmorph-badge__content{font-weight:400;font-size:var(--font-size-tiny)}.nmorph-badge .nmorph-badge__dot{width:var(--nmorph-badge-dot-size);height:var(--nmorph-badge-dot-size);border-radius:var(--border-radius-circular)}.nmorph-badge.nmorph-badge--tiny{--nmorph-badge-dot-size: 3px;--nmorph-badge-ribbon-height: 18px;--nmorph-badge-ribbon-corner-size: 50px;--nmorph-badge-ribbon-width: 92px}.nmorph-badge.nmorph-badge--extra-small{--nmorph-badge-dot-size: 4px;--nmorph-badge-ribbon-height: 20px;--nmorph-badge-ribbon-corner-size: 56px;--nmorph-badge-ribbon-width: 104px}
|
|
@@ -1,18 +1,18 @@
|
|
|
1
1
|
import './NmorphFileUpload.css';
|
|
2
|
-
import { defineComponent as
|
|
3
|
-
import { useModifiers as
|
|
4
|
-
import { useI18n as
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import
|
|
9
|
-
import { NmorphImageResolution as
|
|
10
|
-
import
|
|
11
|
-
import
|
|
12
|
-
import
|
|
13
|
-
import
|
|
14
|
-
import
|
|
15
|
-
const
|
|
2
|
+
import { defineComponent as V, computed as N, ref as g, watch as B, onBeforeUnmount as T } from "vue";
|
|
3
|
+
import { useModifiers as q } from "../../../utils/create-modifiers.js";
|
|
4
|
+
import { useI18n as S } from "vue-i18n";
|
|
5
|
+
import j from "../../../assets/icons/doc.svg.js";
|
|
6
|
+
import k from "../../data/nmorph-image-preview/NmorphImagePreview.vue.js";
|
|
7
|
+
import C from "../../basic/nmorph-icon/NmorphIcon.vue.js";
|
|
8
|
+
import L from "../../basic/nmorph-button/NmorphButton.vue.js";
|
|
9
|
+
import { NmorphImageResolution as O, NmorphAudioResolution as E, NmorphVideoResolution as M, NmorphArchiveResolution as D } from "./types.js";
|
|
10
|
+
import W from "../../../assets/icons/audio.svg.js";
|
|
11
|
+
import $ from "../../../assets/icons/video.svg.js";
|
|
12
|
+
import z from "../../../assets/icons/archive.svg.js";
|
|
13
|
+
import G from "../../../assets/icons/cross.svg.js";
|
|
14
|
+
import H from "../../../assets/icons/image.svg.js";
|
|
15
|
+
const se = /* @__PURE__ */ V({
|
|
16
16
|
__name: "NmorphFileUpload",
|
|
17
17
|
props: {
|
|
18
18
|
modelValue: { type: Array, required: !1, default: () => [] },
|
|
@@ -23,56 +23,72 @@ const oe = /* @__PURE__ */ x({
|
|
|
23
23
|
buttonText: { type: String, required: !1, default: "" }
|
|
24
24
|
},
|
|
25
25
|
emits: ["update:model-value", "on-unsupported-file-type-error"],
|
|
26
|
-
setup(
|
|
27
|
-
const { t:
|
|
28
|
-
const o =
|
|
29
|
-
let
|
|
30
|
-
return o in
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
const o =
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
26
|
+
setup(I, { expose: b, emit: w }) {
|
|
27
|
+
const { t: f } = S(), r = I, m = w, x = N(() => r.buttonText ? r.buttonText : f("selectFile")), d = (e) => e.split("/")[1], R = (e) => {
|
|
28
|
+
const o = d(e);
|
|
29
|
+
let t = j;
|
|
30
|
+
return o in O && (t = H), o in E && (t = W), o in M && (t = $), o in D && (t = z), t;
|
|
31
|
+
}, s = g(null), n = g([...r.modelValue]), i = /* @__PURE__ */ new Set(), a = () => {
|
|
32
|
+
const e = s.value;
|
|
33
|
+
e && (e.value = "");
|
|
34
|
+
}, u = (e) => {
|
|
35
|
+
i.has(e) && (URL.revokeObjectURL(e), i.delete(e));
|
|
36
|
+
}, h = (e) => {
|
|
37
|
+
const o = new Set(e.map((t) => t.previewUrl));
|
|
38
|
+
Array.from(i).forEach((t) => {
|
|
39
|
+
o.has(t) || u(t);
|
|
40
|
+
});
|
|
41
|
+
}, c = (e) => {
|
|
42
|
+
const o = [...e];
|
|
43
|
+
n.value = o, m("update:model-value", o);
|
|
44
|
+
}, U = () => {
|
|
45
|
+
r.disabled || !s.value || s.value.click();
|
|
46
|
+
}, _ = (e) => {
|
|
47
|
+
if (r.disabled) return;
|
|
48
|
+
const o = e.target, t = Array.from(o.files || []), p = [];
|
|
49
|
+
t.forEach((l) => {
|
|
50
|
+
const P = d(l.type);
|
|
51
|
+
if (!r.allowedTypes.includes(P)) {
|
|
52
|
+
m("on-unsupported-file-type-error", l.type);
|
|
53
|
+
return;
|
|
54
|
+
}
|
|
55
|
+
const y = URL.createObjectURL(l);
|
|
56
|
+
i.add(y), p.push({ data: l, previewUrl: y });
|
|
57
|
+
}), a(), p.length > 0 && c([...n.value, ...p]);
|
|
58
|
+
}, A = (e) => {
|
|
59
|
+
if (r.disabled) return;
|
|
60
|
+
const o = n.value.findIndex((t) => t.data.name === e);
|
|
61
|
+
if (o !== -1) {
|
|
62
|
+
const t = n.value[o];
|
|
63
|
+
u(t.previewUrl), a(), c(n.value.filter((p, l) => l !== o));
|
|
47
64
|
}
|
|
48
|
-
}, p = () => {
|
|
49
|
-
s("update:model-value", i);
|
|
50
|
-
}, I = (r) => {
|
|
51
|
-
if (t.disabled) return;
|
|
52
|
-
const o = i.findIndex((e) => e.data.name === r);
|
|
53
|
-
o !== -1 && (URL.revokeObjectURL(i[o].previewUrl), i.splice(o, 1), p());
|
|
54
65
|
};
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
() =>
|
|
58
|
-
|
|
66
|
+
B(
|
|
67
|
+
() => r.modelValue,
|
|
68
|
+
(e) => {
|
|
69
|
+
const o = [...e];
|
|
70
|
+
h(o), n.value = o, o.length === 0 && a();
|
|
71
|
+
},
|
|
72
|
+
{ deep: !0 }
|
|
73
|
+
), T(() => {
|
|
74
|
+
Array.from(i).forEach((e) => u(e));
|
|
75
|
+
}), b({ inputDOMRef: s });
|
|
76
|
+
const F = N(
|
|
77
|
+
() => q({
|
|
78
|
+
"nmorph-file-upload": [`${r.disabled && "disabled"}`]
|
|
59
79
|
})
|
|
60
|
-
),
|
|
61
|
-
return
|
|
62
|
-
}, set files(r) {
|
|
63
|
-
i = r;
|
|
64
|
-
}, inputDOMRef: n, openFileSelector: g, handleFileUpload: y, filesChanged: p, removeFile: I, emit: s, modifiers: v, get NmorphButton() {
|
|
65
|
-
return j;
|
|
80
|
+
), v = { t: f, props: r, emit: m, computedButtonText: x, getPlainType: d, typeFileIconMap: R, inputDOMRef: s, files: n, createdPreviewUrls: i, resetInputValue: a, revokePreviewUrl: u, revokeRemovedPreviewUrls: h, filesChanged: c, openFileSelector: U, handleFileUpload: _, removeFile: A, modifiers: F, get NmorphButton() {
|
|
81
|
+
return L;
|
|
66
82
|
}, get NmorphIcon() {
|
|
67
|
-
return
|
|
83
|
+
return C;
|
|
68
84
|
}, get NmorphImagePreview() {
|
|
69
|
-
return B;
|
|
70
|
-
}, get NmorphIconCross() {
|
|
71
85
|
return k;
|
|
86
|
+
}, get NmorphIconCross() {
|
|
87
|
+
return G;
|
|
72
88
|
} };
|
|
73
|
-
return Object.defineProperty(
|
|
89
|
+
return Object.defineProperty(v, "__isScriptSetup", { enumerable: !1, value: !0 }), v;
|
|
74
90
|
}
|
|
75
91
|
});
|
|
76
92
|
export {
|
|
77
|
-
|
|
93
|
+
se as default
|
|
78
94
|
};
|