ablok-components 0.3.89 → 0.3.91
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,14 +1,14 @@
|
|
|
1
|
-
import { defineComponent as
|
|
1
|
+
import { defineComponent as D, computed as L, ref as _, resolveComponent as C, openBlock as i, createElementBlock as r, createElementVNode as o, unref as S, renderSlot as B, withModifiers as g, createVNode as p, createCommentVNode as c, toDisplayString as y, withCtx as w, Fragment as I, withDirectives as U, vModelText as N, nextTick as A } from "vue";
|
|
2
2
|
import E from "../file-upload/file-upload.vue.js";
|
|
3
3
|
/* empty css */
|
|
4
4
|
import { sanitizeHtml as R } from "../../../composables/useSanitize.js";
|
|
5
5
|
const K = { class: "container" }, j = { class: "row" }, q = {
|
|
6
6
|
key: 0,
|
|
7
7
|
class: "col-12"
|
|
8
|
-
}, G = { class: "
|
|
8
|
+
}, G = { class: "py-4 px-3 d-flex align-items-center border border-bottom-0" }, J = ["innerHTML"], O = { class: "col-12" }, P = {
|
|
9
9
|
key: 0,
|
|
10
10
|
class: "grid place-items-center text-center text-muted py-5 border border-bottom-0"
|
|
11
|
-
}, Q = { class: "m-0" }, W = { class: "preview-item border-bottom p-3" }, X = { class: "d-flex gap-3" }, Y = { class: "col-2" }, Z = { class: "col d-flex flex-column" }, ee = { class: "file-meta text-muted small mb-2" }, te = { class: "fw-semibold" }, oe = { key: 0 }, le = { key: 1 }, se = ["onUpdate:modelValue", "id"], ne = ["innerHTML"], ae = { class: "col-auto d-flex flex-column gap-2" }, ie = ["onClick"], re = ["onClick"],
|
|
11
|
+
}, Q = { class: "m-0" }, W = { class: "preview-item border-bottom p-3" }, X = { class: "d-flex gap-3" }, Y = { class: "col-2" }, Z = { class: "col d-flex flex-column" }, ee = { class: "file-meta text-muted small mb-2" }, te = { class: "fw-semibold" }, oe = { key: 0 }, le = { key: 1 }, se = ["onUpdate:modelValue", "id"], ne = ["innerHTML"], ae = { class: "col-auto d-flex flex-column gap-2" }, ie = ["onClick"], re = ["onClick"], de = { class: "d-flex align-items-end p-3" }, ue = { class: "btn btn-primary btn-sm ms-auto d-flex align-items-center gap-2" }, ce = ["innerHTML"], be = /* @__PURE__ */ D({
|
|
12
12
|
__name: "bulk-upload",
|
|
13
13
|
props: {
|
|
14
14
|
storeId: String,
|
|
@@ -53,10 +53,10 @@ const K = { class: "container" }, j = { class: "row" }, q = {
|
|
|
53
53
|
}
|
|
54
54
|
},
|
|
55
55
|
emits: ["update:modelValue"],
|
|
56
|
-
setup(
|
|
57
|
-
const
|
|
56
|
+
setup(u, { emit: V }) {
|
|
57
|
+
const b = u, k = V, M = (e) => `${e.name ?? ""}|${e.size ?? 0}|${e.lastModified ?? 0}|${e.type ?? ""}`, m = L({
|
|
58
58
|
get: () => {
|
|
59
|
-
const e =
|
|
59
|
+
const e = b.modelValue || [];
|
|
60
60
|
return v.value = e.map((t) => t.caption || ""), e.map((t) => ({
|
|
61
61
|
type: t.type,
|
|
62
62
|
src: t.src,
|
|
@@ -66,24 +66,24 @@ const K = { class: "container" }, j = { class: "row" }, q = {
|
|
|
66
66
|
}));
|
|
67
67
|
},
|
|
68
68
|
set: (e) => {
|
|
69
|
-
const t =
|
|
70
|
-
const
|
|
71
|
-
return !t.some((
|
|
69
|
+
const t = m.value || [], l = Array.isArray(e) ? e : [], a = b.allowDuplicateFiles ? l : l.filter((s) => {
|
|
70
|
+
const d = M(s);
|
|
71
|
+
return !t.some((x) => M(x) === d);
|
|
72
72
|
});
|
|
73
|
-
if (!
|
|
73
|
+
if (!b.allowDuplicateFiles && l.length > 0 && a.length === 0)
|
|
74
74
|
return;
|
|
75
|
-
const n = a.length <= t.length && a.every((s) => t.some((
|
|
75
|
+
const n = a.length <= t.length && a.every((s) => t.some((d) => d.src === s.src));
|
|
76
76
|
h(n ? a : [...t, ...a]);
|
|
77
77
|
}
|
|
78
|
-
}), $ =
|
|
79
|
-
function
|
|
80
|
-
const t = [...
|
|
78
|
+
}), $ = _(null), f = _({}), v = _({});
|
|
79
|
+
function H(e) {
|
|
80
|
+
const t = [...b.modelValue || []];
|
|
81
81
|
t.splice(e, 1), k("update:modelValue", t);
|
|
82
82
|
}
|
|
83
|
-
async function
|
|
83
|
+
async function z(e) {
|
|
84
84
|
f.value[e] = !f.value[e], f.value[e] || h(), await A(), $.value?.querySelector(`#caption-${e}`)?.focus();
|
|
85
85
|
}
|
|
86
|
-
function
|
|
86
|
+
function F(e) {
|
|
87
87
|
if (e == null) return "";
|
|
88
88
|
const t = ["B", "KB", "MB", "GB", "TB"];
|
|
89
89
|
let l = e, a = t.shift();
|
|
@@ -91,17 +91,17 @@ const K = { class: "container" }, j = { class: "row" }, q = {
|
|
|
91
91
|
l /= 1024, a = t.shift();
|
|
92
92
|
return `${l.toFixed(1)} ${a}`;
|
|
93
93
|
}
|
|
94
|
-
function
|
|
94
|
+
function T(e) {
|
|
95
95
|
return e ? new Date(e).toLocaleDateString() : "";
|
|
96
96
|
}
|
|
97
97
|
function h(e) {
|
|
98
|
-
k("update:modelValue", (e ||
|
|
98
|
+
k("update:modelValue", (e || m.value).map((t, l) => ({
|
|
99
99
|
...t,
|
|
100
100
|
caption: v.value[l] || ""
|
|
101
101
|
})));
|
|
102
102
|
}
|
|
103
103
|
return (e, t) => {
|
|
104
|
-
const l =
|
|
104
|
+
const l = C("svg-icon"), a = C("base-image");
|
|
105
105
|
return i(), r("div", {
|
|
106
106
|
class: "bulk-upload",
|
|
107
107
|
ref_key: "root",
|
|
@@ -109,28 +109,30 @@ const K = { class: "container" }, j = { class: "row" }, q = {
|
|
|
109
109
|
}, [
|
|
110
110
|
o("div", K, [
|
|
111
111
|
o("div", j, [
|
|
112
|
-
|
|
112
|
+
u.hasHeader ? (i(), r("div", q, [
|
|
113
113
|
o("div", G, [
|
|
114
114
|
o("p", {
|
|
115
115
|
class: "fw-bold m-0",
|
|
116
|
-
innerHTML:
|
|
116
|
+
innerHTML: S(R)(u.title || e.$t("fileInput.bulkUploadHeadline"))
|
|
117
117
|
}, null, 8, J),
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
118
|
+
B(e.$slots, "bulk-remove", {}, () => [
|
|
119
|
+
u.hasBulkRemove ? (i(), r("button", {
|
|
120
|
+
key: 0,
|
|
121
|
+
onClick: t[0] || (t[0] = g((n) => m.value = [], ["prevent"])),
|
|
122
|
+
class: "btn btn--close ms-auto p-0"
|
|
123
|
+
}, [
|
|
124
|
+
p(l, { symbol: "x" })
|
|
125
|
+
])) : c("", !0)
|
|
126
|
+
])
|
|
125
127
|
])
|
|
126
|
-
])) :
|
|
128
|
+
])) : c("", !0),
|
|
127
129
|
o("div", O, [
|
|
128
|
-
|
|
129
|
-
o("p", Q,
|
|
130
|
+
m.value.length ? c("", !0) : (i(), r("div", P, [
|
|
131
|
+
o("p", Q, y(e.$t("fileInput.noFilesSelected")), 1)
|
|
130
132
|
])),
|
|
131
|
-
|
|
132
|
-
modelValue:
|
|
133
|
-
"onUpdate:modelValue": t[2] || (t[2] = (n) =>
|
|
133
|
+
p(E, {
|
|
134
|
+
modelValue: m.value,
|
|
135
|
+
"onUpdate:modelValue": t[2] || (t[2] = (n) => m.value = n),
|
|
134
136
|
multiple: !0,
|
|
135
137
|
accept: "image/*",
|
|
136
138
|
"drop-files": !0,
|
|
@@ -138,11 +140,11 @@ const K = { class: "container" }, j = { class: "row" }, q = {
|
|
|
138
140
|
"local-url-format": "objectUrl",
|
|
139
141
|
class: "d-flex flex-column border"
|
|
140
142
|
}, {
|
|
141
|
-
"preview-item":
|
|
143
|
+
"preview-item": w(({ bind: { item: n, index: s } }) => [
|
|
142
144
|
o("div", W, [
|
|
143
145
|
o("div", X, [
|
|
144
146
|
o("div", Y, [
|
|
145
|
-
|
|
147
|
+
p(a, {
|
|
146
148
|
src: n.src,
|
|
147
149
|
alt: "",
|
|
148
150
|
class: "img-thumbnail"
|
|
@@ -150,19 +152,19 @@ const K = { class: "container" }, j = { class: "row" }, q = {
|
|
|
150
152
|
]),
|
|
151
153
|
o("div", Z, [
|
|
152
154
|
o("div", ee, [
|
|
153
|
-
o("div", te,
|
|
155
|
+
o("div", te, y(n.name || e.$t("fileInput.unknownFile")), 1),
|
|
154
156
|
o("div", null, [
|
|
155
|
-
n.size ? (i(), r("span", oe,
|
|
156
|
-
n.lastModified ? (i(), r("span", le, " · " +
|
|
157
|
+
n.size ? (i(), r("span", oe, y(F(n.size)), 1)) : c("", !0),
|
|
158
|
+
n.lastModified ? (i(), r("span", le, " · " + y(T(n.lastModified)), 1)) : c("", !0)
|
|
157
159
|
])
|
|
158
160
|
]),
|
|
159
|
-
|
|
160
|
-
f.value[s] &&
|
|
161
|
+
u.hasCaptions ? (i(), r(I, { key: 0 }, [
|
|
162
|
+
f.value[s] && u.editCaptions ? U((i(), r("textarea", {
|
|
161
163
|
key: 0,
|
|
162
|
-
"onUpdate:modelValue": (
|
|
164
|
+
"onUpdate:modelValue": (d) => v.value[s] = d,
|
|
163
165
|
id: `caption-${s}`,
|
|
164
166
|
class: "form-control rounded-0 h-100",
|
|
165
|
-
onChangeCapture: t[1] || (t[1] = (
|
|
167
|
+
onChangeCapture: t[1] || (t[1] = (d) => h())
|
|
166
168
|
}, null, 40, se)), [
|
|
167
169
|
[N, v.value[s]]
|
|
168
170
|
]) : (i(), r("p", {
|
|
@@ -170,38 +172,39 @@ const K = { class: "container" }, j = { class: "row" }, q = {
|
|
|
170
172
|
class: "m-0",
|
|
171
173
|
innerHTML: v.value[s] || `<small>${e.$t("fileInput.noCaption")}</small>`
|
|
172
174
|
}, null, 8, ne))
|
|
173
|
-
], 64)) :
|
|
175
|
+
], 64)) : c("", !0)
|
|
174
176
|
]),
|
|
175
177
|
o("div", ae, [
|
|
176
178
|
o("button", {
|
|
177
|
-
onClick: g((
|
|
179
|
+
onClick: g((d) => H(s), ["prevent"]),
|
|
178
180
|
class: "btn btn--close"
|
|
179
181
|
}, [
|
|
180
|
-
|
|
182
|
+
p(l, { symbol: "x" })
|
|
181
183
|
], 8, ie),
|
|
182
|
-
|
|
183
|
-
|
|
184
|
+
u.editCaptions ? (i(), r("button", {
|
|
185
|
+
key: 0,
|
|
186
|
+
onClick: g((d) => z(s), ["prevent"]),
|
|
184
187
|
class: "btn btn--close"
|
|
185
188
|
}, [
|
|
186
|
-
|
|
189
|
+
p(l, {
|
|
187
190
|
symbol: f.value[s] ? "check" : "edit-3"
|
|
188
191
|
}, null, 8, ["symbol"])
|
|
189
|
-
], 8, re)
|
|
192
|
+
], 8, re)) : c("", !0)
|
|
190
193
|
])
|
|
191
194
|
])
|
|
192
195
|
])
|
|
193
196
|
]),
|
|
194
|
-
button:
|
|
195
|
-
|
|
196
|
-
o("span",
|
|
197
|
-
o("span",
|
|
198
|
-
|
|
197
|
+
button: w(() => [
|
|
198
|
+
B(e.$slots, "button", {}, () => [
|
|
199
|
+
o("span", de, [
|
|
200
|
+
o("span", ue, [
|
|
201
|
+
p(l, {
|
|
199
202
|
symbol: "upload",
|
|
200
203
|
size: "small"
|
|
201
204
|
}),
|
|
202
205
|
o("span", {
|
|
203
206
|
innerHTML: e.$t("common.selectFile")
|
|
204
|
-
}, null, 8,
|
|
207
|
+
}, null, 8, ce)
|
|
205
208
|
])
|
|
206
209
|
])
|
|
207
210
|
])
|
|
@@ -216,5 +219,5 @@ const K = { class: "container" }, j = { class: "row" }, q = {
|
|
|
216
219
|
}
|
|
217
220
|
});
|
|
218
221
|
export {
|
|
219
|
-
|
|
222
|
+
be as default
|
|
220
223
|
};
|