@tailor-cms/ce-image-edit 0.0.2 → 1.0.0
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/index.cjs +163 -86
- package/dist/index.js +164 -87
- package/package.json +5 -2
package/dist/index.cjs
CHANGED
|
@@ -5,7 +5,8 @@ const vue = require("vue");
|
|
|
5
5
|
var type = "CE_IMAGE";
|
|
6
6
|
var name = "Image";
|
|
7
7
|
var initState = () => ({
|
|
8
|
-
url: ""
|
|
8
|
+
url: "",
|
|
9
|
+
alt: ""
|
|
9
10
|
});
|
|
10
11
|
var ui = {
|
|
11
12
|
// Display icon, https://pictogrammers.com/library/mdi/
|
|
@@ -30,75 +31,13 @@ var manifest$1 = {
|
|
|
30
31
|
mocks
|
|
31
32
|
};
|
|
32
33
|
var src_default = manifest$1;
|
|
33
|
-
const _hoisted_1$1 = {
|
|
34
|
-
key: 0,
|
|
35
|
-
class: "text-subtitle-1"
|
|
36
|
-
};
|
|
37
|
-
const _hoisted_2$1 = { class: "pr-2" };
|
|
38
|
-
const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
|
|
39
|
-
__name: "EditPlaceholder",
|
|
40
|
-
props: {
|
|
41
|
-
name: { type: String, required: true },
|
|
42
|
-
icon: { type: String, required: true },
|
|
43
|
-
placeholder: { type: String, default: "Select to edit" },
|
|
44
|
-
activePlaceholder: { type: String, default: "Use toolbar to edit" },
|
|
45
|
-
activeIcon: { type: String, default: null },
|
|
46
|
-
activeColor: { type: String, default: "#fff" },
|
|
47
|
-
isDisabled: { type: Boolean, default: false },
|
|
48
|
-
isFocused: { type: Boolean, default: false },
|
|
49
|
-
dense: { type: Boolean, default: false }
|
|
50
|
-
},
|
|
51
|
-
setup(__props) {
|
|
52
|
-
return (_ctx, _cache) => {
|
|
53
|
-
const _component_VAvatar = vue.resolveComponent("VAvatar");
|
|
54
|
-
const _component_VIcon = vue.resolveComponent("VIcon");
|
|
55
|
-
const _component_VSheet = vue.resolveComponent("VSheet");
|
|
56
|
-
return vue.openBlock(), vue.createBlock(_component_VSheet, {
|
|
57
|
-
class: vue.normalizeClass([__props.dense ? "pt-3" : "pa-12", "d-flex flex-column align-center transparent text-grey-darken-4"])
|
|
58
|
-
}, {
|
|
59
|
-
default: vue.withCtx(() => [
|
|
60
|
-
vue.createVNode(_component_VAvatar, {
|
|
61
|
-
color: __props.isDisabled ? "grey-darken-3" : "teal-accent-4",
|
|
62
|
-
icon: __props.icon,
|
|
63
|
-
size: __props.dense ? 40 : 60,
|
|
64
|
-
variant: "tonal"
|
|
65
|
-
}, null, 8, ["color", "icon", "size"]),
|
|
66
|
-
vue.createElementVNode("div", {
|
|
67
|
-
class: vue.normalizeClass([
|
|
68
|
-
__props.isDisabled ? "text-grey-darken-3" : "text-grey-darken-4",
|
|
69
|
-
__props.dense ? "my-2 text-subtitle-2" : "my-4 text-h6"
|
|
70
|
-
])
|
|
71
|
-
}, vue.toDisplayString(__props.name), 3),
|
|
72
|
-
!__props.dense && !__props.isDisabled ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [
|
|
73
|
-
!__props.isFocused ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
|
|
74
|
-
vue.createTextVNode(vue.toDisplayString(__props.placeholder), 1)
|
|
75
|
-
], 64)) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
|
|
76
|
-
vue.createElementVNode("span", _hoisted_2$1, vue.toDisplayString(__props.activePlaceholder), 1),
|
|
77
|
-
__props.activeIcon ? (vue.openBlock(), vue.createBlock(_component_VIcon, {
|
|
78
|
-
key: 0,
|
|
79
|
-
color: "primary-darken-4",
|
|
80
|
-
size: "20"
|
|
81
|
-
}, {
|
|
82
|
-
default: vue.withCtx(() => [
|
|
83
|
-
vue.createTextVNode(vue.toDisplayString(__props.activeIcon), 1)
|
|
84
|
-
]),
|
|
85
|
-
_: 1
|
|
86
|
-
})) : vue.createCommentVNode("", true)
|
|
87
|
-
], 64))
|
|
88
|
-
])) : vue.createCommentVNode("", true)
|
|
89
|
-
]),
|
|
90
|
-
_: 1
|
|
91
|
-
}, 8, ["class"]);
|
|
92
|
-
};
|
|
93
|
-
}
|
|
94
|
-
});
|
|
95
|
-
const _hoisted_1 = { class: "tce-image" };
|
|
34
|
+
const _hoisted_1$1 = { class: "tce-image" };
|
|
96
35
|
const _hoisted_2 = {
|
|
97
36
|
key: 1,
|
|
98
37
|
class: "image-wrapper"
|
|
99
38
|
};
|
|
100
39
|
const _hoisted_3 = { class: "d-flex align-center justify-center fill-height" };
|
|
101
|
-
const _sfc_main$
|
|
40
|
+
const _sfc_main$3 = /* @__PURE__ */ vue.defineComponent({
|
|
102
41
|
__name: "Edit",
|
|
103
42
|
props: {
|
|
104
43
|
element: {},
|
|
@@ -108,20 +47,29 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
|
|
|
108
47
|
emits: ["save"],
|
|
109
48
|
setup(__props) {
|
|
110
49
|
return (_ctx, _cache) => {
|
|
50
|
+
const _component_VIcon = vue.resolveComponent("VIcon");
|
|
51
|
+
const _component_VSheet = vue.resolveComponent("VSheet");
|
|
111
52
|
const _component_VProgressCircular = vue.resolveComponent("VProgressCircular");
|
|
112
53
|
const _component_VImg = vue.resolveComponent("VImg");
|
|
113
|
-
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
|
|
114
|
-
!_ctx.element.data.url ? (vue.openBlock(), vue.createBlock(
|
|
54
|
+
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1$1, [
|
|
55
|
+
!_ctx.element.data.url ? (vue.openBlock(), vue.createBlock(_component_VSheet, {
|
|
115
56
|
key: 0,
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
57
|
+
class: "d-flex justify-center align-center my-2 text-h6",
|
|
58
|
+
height: "15.5rem"
|
|
59
|
+
}, {
|
|
60
|
+
default: vue.withCtx(() => [
|
|
61
|
+
vue.createVNode(_component_VIcon, { class: "mr-2" }, {
|
|
62
|
+
default: vue.withCtx(() => [
|
|
63
|
+
vue.createTextVNode("mdi-image-outline")
|
|
64
|
+
]),
|
|
65
|
+
_: 1
|
|
66
|
+
}),
|
|
67
|
+
vue.createTextVNode(" Image placeholder ")
|
|
68
|
+
]),
|
|
69
|
+
_: 1
|
|
70
|
+
})) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
|
|
124
71
|
vue.createVNode(_component_VImg, {
|
|
72
|
+
alt: _ctx.element.data.alt,
|
|
125
73
|
src: _ctx.element.data.url,
|
|
126
74
|
class: "mx-auto"
|
|
127
75
|
}, {
|
|
@@ -134,43 +82,172 @@ const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
|
|
|
134
82
|
])
|
|
135
83
|
]),
|
|
136
84
|
_: 1
|
|
137
|
-
}, 8, ["src"])
|
|
85
|
+
}, 8, ["alt", "src"])
|
|
138
86
|
]))
|
|
139
87
|
]);
|
|
140
88
|
};
|
|
141
89
|
}
|
|
142
90
|
});
|
|
143
|
-
const _sfc_main$
|
|
91
|
+
const _sfc_main$2 = /* @__PURE__ */ vue.defineComponent({
|
|
144
92
|
__name: "SideToolbar",
|
|
145
93
|
props: {
|
|
146
94
|
element: {}
|
|
147
95
|
},
|
|
148
96
|
emits: ["save"],
|
|
149
|
-
setup(__props) {
|
|
97
|
+
setup(__props, { emit }) {
|
|
98
|
+
const props = __props;
|
|
99
|
+
const altText = vue.ref(props.element.data.alt || "");
|
|
100
|
+
const onFocusChange = (focused) => {
|
|
101
|
+
if (focused)
|
|
102
|
+
return;
|
|
103
|
+
emit("save", {
|
|
104
|
+
...props.element.data,
|
|
105
|
+
alt: altText.value
|
|
106
|
+
});
|
|
107
|
+
};
|
|
150
108
|
return (_ctx, _cache) => {
|
|
151
|
-
|
|
109
|
+
const _component_VTextarea = vue.resolveComponent("VTextarea");
|
|
110
|
+
return vue.openBlock(), vue.createElementBlock("div", null, [
|
|
111
|
+
vue.createVNode(_component_VTextarea, {
|
|
112
|
+
modelValue: altText.value,
|
|
113
|
+
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => altText.value = $event),
|
|
114
|
+
label: "Image alt text",
|
|
115
|
+
placeholder: "Enter image alt text...",
|
|
116
|
+
variant: "outlined",
|
|
117
|
+
clearable: "",
|
|
118
|
+
"onUpdate:focused": onFocusChange
|
|
119
|
+
}, null, 8, ["modelValue"])
|
|
120
|
+
]);
|
|
152
121
|
};
|
|
153
122
|
}
|
|
154
123
|
});
|
|
124
|
+
var createUploadForm = (e) => {
|
|
125
|
+
const form = new FormData();
|
|
126
|
+
const [file] = e.target.files || [];
|
|
127
|
+
if (!file)
|
|
128
|
+
return;
|
|
129
|
+
form.append("file", file, file.name);
|
|
130
|
+
return form;
|
|
131
|
+
};
|
|
132
|
+
const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
|
|
133
|
+
__name: "UploadBtn",
|
|
134
|
+
emits: ["upload"],
|
|
135
|
+
setup(__props, { emit }) {
|
|
136
|
+
const storageService = vue.inject("$storageService");
|
|
137
|
+
const uploadInputRef = vue.ref(null);
|
|
138
|
+
const isFileDialogVisible = vue.ref(false);
|
|
139
|
+
const handleFileImport = () => {
|
|
140
|
+
var _a;
|
|
141
|
+
isFileDialogVisible.value = true;
|
|
142
|
+
window.addEventListener(
|
|
143
|
+
"focus",
|
|
144
|
+
() => {
|
|
145
|
+
isFileDialogVisible.value = false;
|
|
146
|
+
},
|
|
147
|
+
{ once: true }
|
|
148
|
+
);
|
|
149
|
+
(_a = uploadInputRef.value) == null ? void 0 : _a.click();
|
|
150
|
+
};
|
|
151
|
+
const upload = async (e) => {
|
|
152
|
+
const form = createUploadForm(e);
|
|
153
|
+
if (!form)
|
|
154
|
+
return;
|
|
155
|
+
const { key, url } = await storageService.upload(form);
|
|
156
|
+
emit("upload", {
|
|
157
|
+
key,
|
|
158
|
+
url
|
|
159
|
+
});
|
|
160
|
+
};
|
|
161
|
+
return (_ctx, _cache) => {
|
|
162
|
+
const _component_VIcon = vue.resolveComponent("VIcon");
|
|
163
|
+
const _component_VBtn = vue.resolveComponent("VBtn");
|
|
164
|
+
return vue.openBlock(), vue.createElementBlock("span", null, [
|
|
165
|
+
vue.createVNode(_component_VBtn, {
|
|
166
|
+
loading: isFileDialogVisible.value,
|
|
167
|
+
color: "blue-grey-darken-3",
|
|
168
|
+
variant: "tonal",
|
|
169
|
+
onClick: handleFileImport
|
|
170
|
+
}, {
|
|
171
|
+
default: vue.withCtx(() => [
|
|
172
|
+
vue.createVNode(_component_VIcon, { class: "mr-2" }, {
|
|
173
|
+
default: vue.withCtx(() => [
|
|
174
|
+
vue.createTextVNode("mdi-image-plus-outline")
|
|
175
|
+
]),
|
|
176
|
+
_: 1
|
|
177
|
+
}),
|
|
178
|
+
vue.createTextVNode(" Upload image ")
|
|
179
|
+
]),
|
|
180
|
+
_: 1
|
|
181
|
+
}, 8, ["loading"]),
|
|
182
|
+
vue.createElementVNode("input", {
|
|
183
|
+
ref_key: "uploadInputRef",
|
|
184
|
+
ref: uploadInputRef,
|
|
185
|
+
accept: "image/png, image/jpeg",
|
|
186
|
+
class: "d-none",
|
|
187
|
+
type: "file",
|
|
188
|
+
onChange: upload
|
|
189
|
+
}, null, 544)
|
|
190
|
+
]);
|
|
191
|
+
};
|
|
192
|
+
}
|
|
193
|
+
});
|
|
194
|
+
const _hoisted_1 = { class: "background-input-container d-flex align-center justify-center" };
|
|
155
195
|
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
|
|
156
196
|
__name: "TopToolbar",
|
|
157
197
|
props: {
|
|
158
198
|
element: {}
|
|
159
199
|
},
|
|
160
|
-
emits: ["save"],
|
|
161
|
-
setup(__props) {
|
|
200
|
+
emits: ["save", "replace"],
|
|
201
|
+
setup(__props, { emit }) {
|
|
202
|
+
const props = __props;
|
|
203
|
+
const upload = ({ url }) => {
|
|
204
|
+
emit("save", {
|
|
205
|
+
...props.element.data,
|
|
206
|
+
assets: {
|
|
207
|
+
url
|
|
208
|
+
}
|
|
209
|
+
});
|
|
210
|
+
};
|
|
211
|
+
const replace = () => {
|
|
212
|
+
emit("save", {
|
|
213
|
+
assets: {}
|
|
214
|
+
});
|
|
215
|
+
};
|
|
162
216
|
return (_ctx, _cache) => {
|
|
163
|
-
|
|
217
|
+
const _component_VIcon = vue.resolveComponent("VIcon");
|
|
218
|
+
const _component_VBtn = vue.resolveComponent("VBtn");
|
|
219
|
+
return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
|
|
220
|
+
_ctx.element.data.url ? (vue.openBlock(), vue.createBlock(_component_VBtn, {
|
|
221
|
+
key: 0,
|
|
222
|
+
color: "blue-grey-darken-3",
|
|
223
|
+
variant: "tonal",
|
|
224
|
+
onClick: replace
|
|
225
|
+
}, {
|
|
226
|
+
default: vue.withCtx(() => [
|
|
227
|
+
vue.createVNode(_component_VIcon, { class: "mr-2" }, {
|
|
228
|
+
default: vue.withCtx(() => [
|
|
229
|
+
vue.createTextVNode("mdi-image-remove-outline")
|
|
230
|
+
]),
|
|
231
|
+
_: 1
|
|
232
|
+
}),
|
|
233
|
+
vue.createTextVNode(" Replace image ")
|
|
234
|
+
]),
|
|
235
|
+
_: 1
|
|
236
|
+
})) : (vue.openBlock(), vue.createBlock(_sfc_main$1, {
|
|
237
|
+
key: 1,
|
|
238
|
+
onUpload: upload
|
|
239
|
+
}))
|
|
240
|
+
]);
|
|
164
241
|
};
|
|
165
242
|
}
|
|
166
243
|
});
|
|
167
244
|
const manifest = {
|
|
168
245
|
...src_default,
|
|
169
|
-
Edit: _sfc_main$
|
|
170
|
-
SideToolbar: _sfc_main$
|
|
246
|
+
Edit: _sfc_main$3,
|
|
247
|
+
SideToolbar: _sfc_main$2,
|
|
171
248
|
TopToolbar: _sfc_main
|
|
172
249
|
};
|
|
173
|
-
exports.Edit = _sfc_main$
|
|
174
|
-
exports.SideToolbar = _sfc_main$
|
|
250
|
+
exports.Edit = _sfc_main$3;
|
|
251
|
+
exports.SideToolbar = _sfc_main$2;
|
|
175
252
|
exports.TopToolbar = _sfc_main;
|
|
176
253
|
exports.default = manifest;
|
package/dist/index.js
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
import "./style.css";
|
|
2
|
-
import { defineComponent, resolveComponent, openBlock,
|
|
2
|
+
import { defineComponent, resolveComponent, openBlock, createElementBlock, createBlock, withCtx, createVNode, createTextVNode, createElementVNode, ref, inject } from "vue";
|
|
3
3
|
var type = "CE_IMAGE";
|
|
4
4
|
var name = "Image";
|
|
5
5
|
var initState = () => ({
|
|
6
|
-
url: ""
|
|
6
|
+
url: "",
|
|
7
|
+
alt: ""
|
|
7
8
|
});
|
|
8
9
|
var ui = {
|
|
9
10
|
// Display icon, https://pictogrammers.com/library/mdi/
|
|
@@ -28,75 +29,13 @@ var manifest$1 = {
|
|
|
28
29
|
mocks
|
|
29
30
|
};
|
|
30
31
|
var src_default = manifest$1;
|
|
31
|
-
const _hoisted_1$1 = {
|
|
32
|
-
key: 0,
|
|
33
|
-
class: "text-subtitle-1"
|
|
34
|
-
};
|
|
35
|
-
const _hoisted_2$1 = { class: "pr-2" };
|
|
36
|
-
const _sfc_main$3 = /* @__PURE__ */ defineComponent({
|
|
37
|
-
__name: "EditPlaceholder",
|
|
38
|
-
props: {
|
|
39
|
-
name: { type: String, required: true },
|
|
40
|
-
icon: { type: String, required: true },
|
|
41
|
-
placeholder: { type: String, default: "Select to edit" },
|
|
42
|
-
activePlaceholder: { type: String, default: "Use toolbar to edit" },
|
|
43
|
-
activeIcon: { type: String, default: null },
|
|
44
|
-
activeColor: { type: String, default: "#fff" },
|
|
45
|
-
isDisabled: { type: Boolean, default: false },
|
|
46
|
-
isFocused: { type: Boolean, default: false },
|
|
47
|
-
dense: { type: Boolean, default: false }
|
|
48
|
-
},
|
|
49
|
-
setup(__props) {
|
|
50
|
-
return (_ctx, _cache) => {
|
|
51
|
-
const _component_VAvatar = resolveComponent("VAvatar");
|
|
52
|
-
const _component_VIcon = resolveComponent("VIcon");
|
|
53
|
-
const _component_VSheet = resolveComponent("VSheet");
|
|
54
|
-
return openBlock(), createBlock(_component_VSheet, {
|
|
55
|
-
class: normalizeClass([__props.dense ? "pt-3" : "pa-12", "d-flex flex-column align-center transparent text-grey-darken-4"])
|
|
56
|
-
}, {
|
|
57
|
-
default: withCtx(() => [
|
|
58
|
-
createVNode(_component_VAvatar, {
|
|
59
|
-
color: __props.isDisabled ? "grey-darken-3" : "teal-accent-4",
|
|
60
|
-
icon: __props.icon,
|
|
61
|
-
size: __props.dense ? 40 : 60,
|
|
62
|
-
variant: "tonal"
|
|
63
|
-
}, null, 8, ["color", "icon", "size"]),
|
|
64
|
-
createElementVNode("div", {
|
|
65
|
-
class: normalizeClass([
|
|
66
|
-
__props.isDisabled ? "text-grey-darken-3" : "text-grey-darken-4",
|
|
67
|
-
__props.dense ? "my-2 text-subtitle-2" : "my-4 text-h6"
|
|
68
|
-
])
|
|
69
|
-
}, toDisplayString(__props.name), 3),
|
|
70
|
-
!__props.dense && !__props.isDisabled ? (openBlock(), createElementBlock("div", _hoisted_1$1, [
|
|
71
|
-
!__props.isFocused ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
|
|
72
|
-
createTextVNode(toDisplayString(__props.placeholder), 1)
|
|
73
|
-
], 64)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
|
|
74
|
-
createElementVNode("span", _hoisted_2$1, toDisplayString(__props.activePlaceholder), 1),
|
|
75
|
-
__props.activeIcon ? (openBlock(), createBlock(_component_VIcon, {
|
|
76
|
-
key: 0,
|
|
77
|
-
color: "primary-darken-4",
|
|
78
|
-
size: "20"
|
|
79
|
-
}, {
|
|
80
|
-
default: withCtx(() => [
|
|
81
|
-
createTextVNode(toDisplayString(__props.activeIcon), 1)
|
|
82
|
-
]),
|
|
83
|
-
_: 1
|
|
84
|
-
})) : createCommentVNode("", true)
|
|
85
|
-
], 64))
|
|
86
|
-
])) : createCommentVNode("", true)
|
|
87
|
-
]),
|
|
88
|
-
_: 1
|
|
89
|
-
}, 8, ["class"]);
|
|
90
|
-
};
|
|
91
|
-
}
|
|
92
|
-
});
|
|
93
|
-
const _hoisted_1 = { class: "tce-image" };
|
|
32
|
+
const _hoisted_1$1 = { class: "tce-image" };
|
|
94
33
|
const _hoisted_2 = {
|
|
95
34
|
key: 1,
|
|
96
35
|
class: "image-wrapper"
|
|
97
36
|
};
|
|
98
37
|
const _hoisted_3 = { class: "d-flex align-center justify-center fill-height" };
|
|
99
|
-
const _sfc_main$
|
|
38
|
+
const _sfc_main$3 = /* @__PURE__ */ defineComponent({
|
|
100
39
|
__name: "Edit",
|
|
101
40
|
props: {
|
|
102
41
|
element: {},
|
|
@@ -106,20 +45,29 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
|
106
45
|
emits: ["save"],
|
|
107
46
|
setup(__props) {
|
|
108
47
|
return (_ctx, _cache) => {
|
|
48
|
+
const _component_VIcon = resolveComponent("VIcon");
|
|
49
|
+
const _component_VSheet = resolveComponent("VSheet");
|
|
109
50
|
const _component_VProgressCircular = resolveComponent("VProgressCircular");
|
|
110
51
|
const _component_VImg = resolveComponent("VImg");
|
|
111
|
-
return openBlock(), createElementBlock("div", _hoisted_1, [
|
|
112
|
-
!_ctx.element.data.url ? (openBlock(), createBlock(
|
|
52
|
+
return openBlock(), createElementBlock("div", _hoisted_1$1, [
|
|
53
|
+
!_ctx.element.data.url ? (openBlock(), createBlock(_component_VSheet, {
|
|
113
54
|
key: 0,
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
55
|
+
class: "d-flex justify-center align-center my-2 text-h6",
|
|
56
|
+
height: "15.5rem"
|
|
57
|
+
}, {
|
|
58
|
+
default: withCtx(() => [
|
|
59
|
+
createVNode(_component_VIcon, { class: "mr-2" }, {
|
|
60
|
+
default: withCtx(() => [
|
|
61
|
+
createTextVNode("mdi-image-outline")
|
|
62
|
+
]),
|
|
63
|
+
_: 1
|
|
64
|
+
}),
|
|
65
|
+
createTextVNode(" Image placeholder ")
|
|
66
|
+
]),
|
|
67
|
+
_: 1
|
|
68
|
+
})) : (openBlock(), createElementBlock("div", _hoisted_2, [
|
|
122
69
|
createVNode(_component_VImg, {
|
|
70
|
+
alt: _ctx.element.data.alt,
|
|
123
71
|
src: _ctx.element.data.url,
|
|
124
72
|
class: "mx-auto"
|
|
125
73
|
}, {
|
|
@@ -132,45 +80,174 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
|
132
80
|
])
|
|
133
81
|
]),
|
|
134
82
|
_: 1
|
|
135
|
-
}, 8, ["src"])
|
|
83
|
+
}, 8, ["alt", "src"])
|
|
136
84
|
]))
|
|
137
85
|
]);
|
|
138
86
|
};
|
|
139
87
|
}
|
|
140
88
|
});
|
|
141
|
-
const _sfc_main$
|
|
89
|
+
const _sfc_main$2 = /* @__PURE__ */ defineComponent({
|
|
142
90
|
__name: "SideToolbar",
|
|
143
91
|
props: {
|
|
144
92
|
element: {}
|
|
145
93
|
},
|
|
146
94
|
emits: ["save"],
|
|
147
|
-
setup(__props) {
|
|
95
|
+
setup(__props, { emit }) {
|
|
96
|
+
const props = __props;
|
|
97
|
+
const altText = ref(props.element.data.alt || "");
|
|
98
|
+
const onFocusChange = (focused) => {
|
|
99
|
+
if (focused)
|
|
100
|
+
return;
|
|
101
|
+
emit("save", {
|
|
102
|
+
...props.element.data,
|
|
103
|
+
alt: altText.value
|
|
104
|
+
});
|
|
105
|
+
};
|
|
148
106
|
return (_ctx, _cache) => {
|
|
149
|
-
|
|
107
|
+
const _component_VTextarea = resolveComponent("VTextarea");
|
|
108
|
+
return openBlock(), createElementBlock("div", null, [
|
|
109
|
+
createVNode(_component_VTextarea, {
|
|
110
|
+
modelValue: altText.value,
|
|
111
|
+
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => altText.value = $event),
|
|
112
|
+
label: "Image alt text",
|
|
113
|
+
placeholder: "Enter image alt text...",
|
|
114
|
+
variant: "outlined",
|
|
115
|
+
clearable: "",
|
|
116
|
+
"onUpdate:focused": onFocusChange
|
|
117
|
+
}, null, 8, ["modelValue"])
|
|
118
|
+
]);
|
|
150
119
|
};
|
|
151
120
|
}
|
|
152
121
|
});
|
|
122
|
+
var createUploadForm = (e) => {
|
|
123
|
+
const form = new FormData();
|
|
124
|
+
const [file] = e.target.files || [];
|
|
125
|
+
if (!file)
|
|
126
|
+
return;
|
|
127
|
+
form.append("file", file, file.name);
|
|
128
|
+
return form;
|
|
129
|
+
};
|
|
130
|
+
const _sfc_main$1 = /* @__PURE__ */ defineComponent({
|
|
131
|
+
__name: "UploadBtn",
|
|
132
|
+
emits: ["upload"],
|
|
133
|
+
setup(__props, { emit }) {
|
|
134
|
+
const storageService = inject("$storageService");
|
|
135
|
+
const uploadInputRef = ref(null);
|
|
136
|
+
const isFileDialogVisible = ref(false);
|
|
137
|
+
const handleFileImport = () => {
|
|
138
|
+
var _a;
|
|
139
|
+
isFileDialogVisible.value = true;
|
|
140
|
+
window.addEventListener(
|
|
141
|
+
"focus",
|
|
142
|
+
() => {
|
|
143
|
+
isFileDialogVisible.value = false;
|
|
144
|
+
},
|
|
145
|
+
{ once: true }
|
|
146
|
+
);
|
|
147
|
+
(_a = uploadInputRef.value) == null ? void 0 : _a.click();
|
|
148
|
+
};
|
|
149
|
+
const upload = async (e) => {
|
|
150
|
+
const form = createUploadForm(e);
|
|
151
|
+
if (!form)
|
|
152
|
+
return;
|
|
153
|
+
const { key, url } = await storageService.upload(form);
|
|
154
|
+
emit("upload", {
|
|
155
|
+
key,
|
|
156
|
+
url
|
|
157
|
+
});
|
|
158
|
+
};
|
|
159
|
+
return (_ctx, _cache) => {
|
|
160
|
+
const _component_VIcon = resolveComponent("VIcon");
|
|
161
|
+
const _component_VBtn = resolveComponent("VBtn");
|
|
162
|
+
return openBlock(), createElementBlock("span", null, [
|
|
163
|
+
createVNode(_component_VBtn, {
|
|
164
|
+
loading: isFileDialogVisible.value,
|
|
165
|
+
color: "blue-grey-darken-3",
|
|
166
|
+
variant: "tonal",
|
|
167
|
+
onClick: handleFileImport
|
|
168
|
+
}, {
|
|
169
|
+
default: withCtx(() => [
|
|
170
|
+
createVNode(_component_VIcon, { class: "mr-2" }, {
|
|
171
|
+
default: withCtx(() => [
|
|
172
|
+
createTextVNode("mdi-image-plus-outline")
|
|
173
|
+
]),
|
|
174
|
+
_: 1
|
|
175
|
+
}),
|
|
176
|
+
createTextVNode(" Upload image ")
|
|
177
|
+
]),
|
|
178
|
+
_: 1
|
|
179
|
+
}, 8, ["loading"]),
|
|
180
|
+
createElementVNode("input", {
|
|
181
|
+
ref_key: "uploadInputRef",
|
|
182
|
+
ref: uploadInputRef,
|
|
183
|
+
accept: "image/png, image/jpeg",
|
|
184
|
+
class: "d-none",
|
|
185
|
+
type: "file",
|
|
186
|
+
onChange: upload
|
|
187
|
+
}, null, 544)
|
|
188
|
+
]);
|
|
189
|
+
};
|
|
190
|
+
}
|
|
191
|
+
});
|
|
192
|
+
const _hoisted_1 = { class: "background-input-container d-flex align-center justify-center" };
|
|
153
193
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
154
194
|
__name: "TopToolbar",
|
|
155
195
|
props: {
|
|
156
196
|
element: {}
|
|
157
197
|
},
|
|
158
|
-
emits: ["save"],
|
|
159
|
-
setup(__props) {
|
|
198
|
+
emits: ["save", "replace"],
|
|
199
|
+
setup(__props, { emit }) {
|
|
200
|
+
const props = __props;
|
|
201
|
+
const upload = ({ url }) => {
|
|
202
|
+
emit("save", {
|
|
203
|
+
...props.element.data,
|
|
204
|
+
assets: {
|
|
205
|
+
url
|
|
206
|
+
}
|
|
207
|
+
});
|
|
208
|
+
};
|
|
209
|
+
const replace = () => {
|
|
210
|
+
emit("save", {
|
|
211
|
+
assets: {}
|
|
212
|
+
});
|
|
213
|
+
};
|
|
160
214
|
return (_ctx, _cache) => {
|
|
161
|
-
|
|
215
|
+
const _component_VIcon = resolveComponent("VIcon");
|
|
216
|
+
const _component_VBtn = resolveComponent("VBtn");
|
|
217
|
+
return openBlock(), createElementBlock("div", _hoisted_1, [
|
|
218
|
+
_ctx.element.data.url ? (openBlock(), createBlock(_component_VBtn, {
|
|
219
|
+
key: 0,
|
|
220
|
+
color: "blue-grey-darken-3",
|
|
221
|
+
variant: "tonal",
|
|
222
|
+
onClick: replace
|
|
223
|
+
}, {
|
|
224
|
+
default: withCtx(() => [
|
|
225
|
+
createVNode(_component_VIcon, { class: "mr-2" }, {
|
|
226
|
+
default: withCtx(() => [
|
|
227
|
+
createTextVNode("mdi-image-remove-outline")
|
|
228
|
+
]),
|
|
229
|
+
_: 1
|
|
230
|
+
}),
|
|
231
|
+
createTextVNode(" Replace image ")
|
|
232
|
+
]),
|
|
233
|
+
_: 1
|
|
234
|
+
})) : (openBlock(), createBlock(_sfc_main$1, {
|
|
235
|
+
key: 1,
|
|
236
|
+
onUpload: upload
|
|
237
|
+
}))
|
|
238
|
+
]);
|
|
162
239
|
};
|
|
163
240
|
}
|
|
164
241
|
});
|
|
165
242
|
const manifest = {
|
|
166
243
|
...src_default,
|
|
167
|
-
Edit: _sfc_main$
|
|
168
|
-
SideToolbar: _sfc_main$
|
|
244
|
+
Edit: _sfc_main$3,
|
|
245
|
+
SideToolbar: _sfc_main$2,
|
|
169
246
|
TopToolbar: _sfc_main
|
|
170
247
|
};
|
|
171
248
|
export {
|
|
172
|
-
_sfc_main$
|
|
173
|
-
_sfc_main$
|
|
249
|
+
_sfc_main$3 as Edit,
|
|
250
|
+
_sfc_main$2 as SideToolbar,
|
|
174
251
|
_sfc_main as TopToolbar,
|
|
175
252
|
manifest as default
|
|
176
253
|
};
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tailor-cms/ce-image-edit",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "0.0
|
|
4
|
+
"version": "1.0.0",
|
|
5
5
|
"exports": {
|
|
6
6
|
".": {
|
|
7
7
|
"import": "./dist/index.js",
|
|
@@ -21,13 +21,16 @@
|
|
|
21
21
|
"typescript": "^5.1.6",
|
|
22
22
|
"vite": "^4.4.5",
|
|
23
23
|
"vue-tsc": "^1.8.5",
|
|
24
|
-
"
|
|
24
|
+
"@tailor-cms/ce-image-manifest": "1.0.0"
|
|
25
25
|
},
|
|
26
26
|
"description": "Tailor image element",
|
|
27
27
|
"author": "Studion <info@gostudion.com> (https://github.com/tailor-cms)",
|
|
28
28
|
"publishConfig": {
|
|
29
29
|
"access": "public"
|
|
30
30
|
},
|
|
31
|
+
"dependencies": {
|
|
32
|
+
"@tailor-cms/cek-common": "^0.0.3"
|
|
33
|
+
},
|
|
31
34
|
"scripts": {
|
|
32
35
|
"dev": "vite build --watch",
|
|
33
36
|
"build": "vue-tsc --noEmit && vite build",
|