@pooder/vue 0.0.3 → 2.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.es.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { defineComponent as v, ref as k, onMounted as A, onBeforeUnmount as M, createElementBlock as p, openBlock as h, createElementVNode as l, computed as T, toDisplayString as
|
|
1
|
+
import { defineComponent as v, ref as k, onMounted as A, onBeforeUnmount as M, createElementBlock as p, openBlock as h, createElementVNode as l, computed as T, toDisplayString as b, watch as N, isReactive as P, reactive as E, resolveComponent as V, createCommentVNode as O, Fragment as C, renderList as S, createVNode as y, shallowRef as L } from "vue";
|
|
2
2
|
import { BackgroundTool as W, ImageTool as B, WhiteInkTool as F, DielineTool as H, HoleTool as R, FilmTool as U } from "@pooder/kit";
|
|
3
3
|
import { PooderEditor as j } from "@pooder/core";
|
|
4
4
|
const q = v({
|
|
@@ -41,7 +41,7 @@ function J(t, o, d, s, f, _) {
|
|
|
41
41
|
])
|
|
42
42
|
]);
|
|
43
43
|
}
|
|
44
|
-
const K = /* @__PURE__ */ I(q, [["render", J], ["__scopeId", "data-v-
|
|
44
|
+
const K = /* @__PURE__ */ I(q, [["render", J], ["__scopeId", "data-v-c0e5ef40"]]), Q = v({
|
|
45
45
|
name: "ColorPicker",
|
|
46
46
|
props: {
|
|
47
47
|
modelValue: {
|
|
@@ -57,13 +57,14 @@ const K = /* @__PURE__ */ I(q, [["render", J], ["__scopeId", "data-v-9f998bd0"]]
|
|
|
57
57
|
if (n.startsWith("#")) {
|
|
58
58
|
if (n.length === 9) return n.slice(0, 7);
|
|
59
59
|
if (n.length === 7) return n;
|
|
60
|
-
if (n.length === 4)
|
|
60
|
+
if (n.length === 4)
|
|
61
|
+
return "#" + n[1] + n[1] + n[2] + n[2] + n[3] + n[3];
|
|
61
62
|
}
|
|
62
63
|
if (n.startsWith("rgb")) {
|
|
63
64
|
const e = n.match(/\d+(\.\d+)?/g);
|
|
64
65
|
if (e && e.length >= 3) {
|
|
65
|
-
const u = parseInt(e[0]), i = parseInt(e[1]), c = parseInt(e[2]), g = (
|
|
66
|
-
const w =
|
|
66
|
+
const u = parseInt(e[0]), i = parseInt(e[1]), c = parseInt(e[2]), g = ($) => {
|
|
67
|
+
const w = $.toString(16);
|
|
67
68
|
return w.length === 1 ? "0" + w : w;
|
|
68
69
|
};
|
|
69
70
|
return `#${g(u)}${g(i)}${g(c)}`;
|
|
@@ -80,7 +81,9 @@ const K = /* @__PURE__ */ I(q, [["render", J], ["__scopeId", "data-v-9f998bd0"]]
|
|
|
80
81
|
if (e && e.length >= 4) return parseFloat(e[3]);
|
|
81
82
|
}
|
|
82
83
|
return 1;
|
|
83
|
-
}, f = T(() => d(t.modelValue)), _ = T(
|
|
84
|
+
}, f = T(() => d(t.modelValue)), _ = T(
|
|
85
|
+
() => Math.round(s(t.modelValue) * 100)
|
|
86
|
+
);
|
|
84
87
|
return {
|
|
85
88
|
hexValue: f,
|
|
86
89
|
alphaValue: _,
|
|
@@ -89,8 +92,8 @@ const K = /* @__PURE__ */ I(q, [["render", J], ["__scopeId", "data-v-9f998bd0"]]
|
|
|
89
92
|
o("update:modelValue", g), o("change", g);
|
|
90
93
|
},
|
|
91
94
|
updateAlpha: (r) => {
|
|
92
|
-
const n = r.target.value, e = parseInt(n) / 100, u = d(t.modelValue), i = parseInt(u.slice(1, 3), 16), c = parseInt(u.slice(3, 5), 16), g = parseInt(u.slice(5, 7), 16),
|
|
93
|
-
o("update:modelValue",
|
|
95
|
+
const n = r.target.value, e = parseInt(n) / 100, u = d(t.modelValue), i = parseInt(u.slice(1, 3), 16), c = parseInt(u.slice(3, 5), 16), g = parseInt(u.slice(5, 7), 16), $ = `rgba(${i}, ${c}, ${g}, ${e})`;
|
|
96
|
+
o("update:modelValue", $), o("change", $);
|
|
94
97
|
}
|
|
95
98
|
};
|
|
96
99
|
}
|
|
@@ -112,11 +115,11 @@ function te(t, o, d, s, f, _) {
|
|
|
112
115
|
value: t.alphaValue,
|
|
113
116
|
onInput: o[1] || (o[1] = (...m) => t.updateAlpha && t.updateAlpha(...m))
|
|
114
117
|
}, null, 40, x),
|
|
115
|
-
l("span", ee,
|
|
118
|
+
l("span", ee, b(t.alphaValue) + "%", 1)
|
|
116
119
|
])
|
|
117
120
|
]);
|
|
118
121
|
}
|
|
119
|
-
const ne = /* @__PURE__ */ I(Q, [["render", te], ["__scopeId", "data-v-
|
|
122
|
+
const ne = /* @__PURE__ */ I(Q, [["render", te], ["__scopeId", "data-v-21507ccd"]]), oe = v({
|
|
120
123
|
name: "ToolPanel",
|
|
121
124
|
components: { ColorPicker: ne },
|
|
122
125
|
props: {
|
|
@@ -127,11 +130,17 @@ const ne = /* @__PURE__ */ I(Q, [["render", te], ["__scopeId", "data-v-ae754a79"
|
|
|
127
130
|
},
|
|
128
131
|
setup(t) {
|
|
129
132
|
const o = k([]), d = () => {
|
|
130
|
-
t.editor ? o.value = Array.from(
|
|
133
|
+
t.editor ? o.value = Array.from(
|
|
134
|
+
t.editor.getExtensions().map((e) => (e.options && !P(e.options) && (e.options = E(e.options)), e))
|
|
135
|
+
) : o.value = [];
|
|
131
136
|
};
|
|
132
|
-
N(
|
|
133
|
-
|
|
134
|
-
|
|
137
|
+
N(
|
|
138
|
+
() => t.editor,
|
|
139
|
+
(e) => {
|
|
140
|
+
d();
|
|
141
|
+
},
|
|
142
|
+
{ immediate: !0 }
|
|
143
|
+
);
|
|
135
144
|
const s = (e, u) => e.schema?.[u];
|
|
136
145
|
return {
|
|
137
146
|
extensionList: o,
|
|
@@ -171,7 +180,7 @@ const ne = /* @__PURE__ */ I(Q, [["render", te], ["__scopeId", "data-v-ae754a79"
|
|
|
171
180
|
}), se = {
|
|
172
181
|
key: 0,
|
|
173
182
|
class: "tool-panel"
|
|
174
|
-
}, re = { key: 0 }, ae = { key: 0 }, ie = ["value", "onChange"], le = ["value"], ue = { key: 1 }, ce = { key: 2 }, de = ["value", "onInput"], pe = { class: "slider-container" }, he = ["min", "max", "step", "value", "onInput"], ge = { class: "slider-value" }, me = { key: 3 }, fe = { class: "switch-wrapper" }, _e = { class: "switch" },
|
|
183
|
+
}, re = { key: 0 }, ae = { key: 0 }, ie = ["value", "onChange"], le = ["value"], ue = { key: 1 }, ce = { key: 2 }, de = ["value", "onInput"], pe = { class: "slider-container" }, he = ["min", "max", "step", "value", "onInput"], ge = { class: "slider-value" }, me = { key: 3 }, fe = { class: "switch-wrapper" }, _e = { class: "switch" }, be = ["checked", "onChange"], $e = { key: 4 }, ve = { class: "checkbox-wrapper" }, Ie = ["checked", "onChange"], we = { key: 5 }, Ce = ["value", "onInput"];
|
|
175
184
|
function Se(t, o, d, s, f, _) {
|
|
176
185
|
const m = V("ColorPicker");
|
|
177
186
|
return t.editor ? (h(), p("div", se, [
|
|
@@ -179,13 +188,13 @@ function Se(t, o, d, s, f, _) {
|
|
|
179
188
|
class: "plugin-section",
|
|
180
189
|
key: a.name
|
|
181
190
|
}, [
|
|
182
|
-
l("h3", null,
|
|
191
|
+
l("h3", null, b(a.name), 1),
|
|
183
192
|
a.options ? (h(), p("div", re, [
|
|
184
193
|
(h(!0), p(C, null, S(a.options, (r, n) => (h(), p("div", {
|
|
185
194
|
key: n,
|
|
186
195
|
class: "config-item"
|
|
187
196
|
}, [
|
|
188
|
-
l("label", null,
|
|
197
|
+
l("label", null, b(t.getLabel(a, String(n))), 1),
|
|
189
198
|
t.getInputType(a, String(n), r) === "select" ? (h(), p("div", ae, [
|
|
190
199
|
l("select", {
|
|
191
200
|
value: r,
|
|
@@ -194,7 +203,7 @@ function Se(t, o, d, s, f, _) {
|
|
|
194
203
|
(h(!0), p(C, null, S(t.getSelectOptions(a, String(n)), (e) => (h(), p("option", {
|
|
195
204
|
key: e.value,
|
|
196
205
|
value: e.value
|
|
197
|
-
},
|
|
206
|
+
}, b(e.label), 9, le))), 128))
|
|
198
207
|
], 40, ie)
|
|
199
208
|
])) : t.getInputType(a, String(n), r) === "color" ? (h(), p("div", ue, [
|
|
200
209
|
y(m, {
|
|
@@ -205,7 +214,11 @@ function Se(t, o, d, s, f, _) {
|
|
|
205
214
|
l("input", {
|
|
206
215
|
type: "number",
|
|
207
216
|
value: r,
|
|
208
|
-
onInput: (e) => t.updateOption(
|
|
217
|
+
onInput: (e) => t.updateOption(
|
|
218
|
+
a,
|
|
219
|
+
n,
|
|
220
|
+
Number(e.target.value)
|
|
221
|
+
)
|
|
209
222
|
}, null, 40, de),
|
|
210
223
|
l("div", pe, [
|
|
211
224
|
l("input", {
|
|
@@ -214,9 +227,13 @@ function Se(t, o, d, s, f, _) {
|
|
|
214
227
|
max: t.getMinMax(a, String(n), r).max,
|
|
215
228
|
step: t.getMinMax(a, String(n), r).step,
|
|
216
229
|
value: r,
|
|
217
|
-
onInput: (e) => t.updateOption(
|
|
230
|
+
onInput: (e) => t.updateOption(
|
|
231
|
+
a,
|
|
232
|
+
n,
|
|
233
|
+
Number(e.target.value)
|
|
234
|
+
)
|
|
218
235
|
}, null, 40, he),
|
|
219
|
-
l("span", ge,
|
|
236
|
+
l("span", ge, b(t.formatNumber(r)), 1)
|
|
220
237
|
])
|
|
221
238
|
])) : t.getInputType(a, String(n), r) === "boolean" ? (h(), p("div", me, [
|
|
222
239
|
l("div", fe, [
|
|
@@ -224,17 +241,25 @@ function Se(t, o, d, s, f, _) {
|
|
|
224
241
|
l("input", {
|
|
225
242
|
type: "checkbox",
|
|
226
243
|
checked: !!r,
|
|
227
|
-
onChange: (e) => t.updateOption(
|
|
228
|
-
|
|
244
|
+
onChange: (e) => t.updateOption(
|
|
245
|
+
a,
|
|
246
|
+
n,
|
|
247
|
+
e.target.checked
|
|
248
|
+
)
|
|
249
|
+
}, null, 40, be),
|
|
229
250
|
o[0] || (o[0] = l("span", { class: "slider" }, null, -1))
|
|
230
251
|
])
|
|
231
252
|
])
|
|
232
|
-
])) : t.getInputType(a, String(n), r) === "checkbox" ? (h(), p("div",
|
|
253
|
+
])) : t.getInputType(a, String(n), r) === "checkbox" ? (h(), p("div", $e, [
|
|
233
254
|
l("div", ve, [
|
|
234
255
|
l("input", {
|
|
235
256
|
type: "checkbox",
|
|
236
257
|
checked: !!r,
|
|
237
|
-
onChange: (e) => t.updateOption(
|
|
258
|
+
onChange: (e) => t.updateOption(
|
|
259
|
+
a,
|
|
260
|
+
n,
|
|
261
|
+
e.target.checked
|
|
262
|
+
)
|
|
238
263
|
}, null, 40, Ie)
|
|
239
264
|
])
|
|
240
265
|
])) : (h(), p("div", we, [
|
|
@@ -249,7 +274,7 @@ function Se(t, o, d, s, f, _) {
|
|
|
249
274
|
]))), 128))
|
|
250
275
|
])) : O("", !0);
|
|
251
276
|
}
|
|
252
|
-
const Ve = /* @__PURE__ */ I(oe, [["render", Se], ["__scopeId", "data-v-
|
|
277
|
+
const Ve = /* @__PURE__ */ I(oe, [["render", Se], ["__scopeId", "data-v-77c5b72f"]]), ye = v({
|
|
253
278
|
name: "PooderEditor",
|
|
254
279
|
components: {
|
|
255
280
|
CanvasArea: K,
|
|
@@ -290,7 +315,7 @@ function Ae(t, o, d, s, f, _) {
|
|
|
290
315
|
])
|
|
291
316
|
]);
|
|
292
317
|
}
|
|
293
|
-
const Ee = /* @__PURE__ */ I(ye, [["render", Ae], ["__scopeId", "data-v-
|
|
318
|
+
const Ee = /* @__PURE__ */ I(ye, [["render", Ae], ["__scopeId", "data-v-b9b03377"]]);
|
|
294
319
|
export {
|
|
295
320
|
Ee as PooderEditor
|
|
296
321
|
};
|
package/dist/index.umd.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(m,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@pooder/kit"),require("@pooder/core")):typeof define=="function"&&define.amd?define(["exports","vue","@pooder/kit","@pooder/core"],e):(m=typeof globalThis<"u"?globalThis:m||self,e(m.PooderVue={},m.Vue,m.PooderKit,m.PooderCore))})(this,(function(m,e,f
|
|
1
|
+
(function(m,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@pooder/kit"),require("@pooder/core")):typeof define=="function"&&define.amd?define(["exports","vue","@pooder/kit","@pooder/core"],e):(m=typeof globalThis<"u"?globalThis:m||self,e(m.PooderVue={},m.Vue,m.PooderKit,m.PooderCore))})(this,(function(m,e,f,$){"use strict";const k=e.defineComponent({name:"CanvasArea",props:{width:{type:Number,required:!0},height:{type:Number,required:!0}},emits:["init"],setup(n,{emit:r}){const p=e.ref(null);let s=null;return e.onMounted(()=>{p.value&&(p.value.width=n.width,p.value.height=n.height,s=new $.PooderEditor(p.value,{width:n.width,height:n.height}),r("init",s))}),e.onBeforeUnmount(()=>{s&&s.destroy()}),{canvasRef:p}}}),V=(n,r)=>{const p=n.__vccOpts||n;for(const[s,g]of r)p[s]=g;return p},B={class:"canvas-area"},I={class:"canvas-wrapper"},N={ref:"canvasRef"};function C(n,r,p,s,g,_){return e.openBlock(),e.createElementBlock("div",B,[e.createElementVNode("div",I,[e.createElementVNode("canvas",N,null,512)])])}const y=V(k,[["render",C],["__scopeId","data-v-c0e5ef40"]]),S=e.defineComponent({name:"ColorPicker",props:{modelValue:{type:String,default:"#000000"}},emits:["update:modelValue","change"],setup(n,{emit:r}){const p=a=>{if(!a)return"#000000";const o=String(a);if(o.startsWith("#")){if(o.length===9)return o.slice(0,7);if(o.length===7)return o;if(o.length===4)return"#"+o[1]+o[1]+o[2]+o[2]+o[3]+o[3]}if(o.startsWith("rgb")){const t=o.match(/\d+(\.\d+)?/g);if(t&&t.length>=3){const c=parseInt(t[0]),i=parseInt(t[1]),d=parseInt(t[2]),u=E=>{const b=E.toString(16);return b.length===1?"0"+b:b};return`#${u(c)}${u(i)}${u(d)}`}}return"#000000"},s=a=>{if(!a)return 1;const o=String(a);if(o.startsWith("#"))return o.length===9?parseInt(o.slice(7),16)/255:1;if(o.startsWith("rgba")){const t=o.match(/\d+(\.\d+)?/g);if(t&&t.length>=4)return parseFloat(t[3])}return 1},g=e.computed(()=>p(n.modelValue)),_=e.computed(()=>Math.round(s(n.modelValue)*100));return{hexValue:g,alphaValue:_,updateColor:a=>{const o=a.target.value,t=s(n.modelValue),c=parseInt(o.slice(1,3),16),i=parseInt(o.slice(3,5),16),d=parseInt(o.slice(5,7),16),u=`rgba(${c}, ${i}, ${d}, ${t})`;r("update:modelValue",u),r("change",u)},updateAlpha:a=>{const o=a.target.value,t=parseInt(o)/100,c=p(n.modelValue),i=parseInt(c.slice(1,3),16),d=parseInt(c.slice(3,5),16),u=parseInt(c.slice(5,7),16),E=`rgba(${i}, ${d}, ${u}, ${t})`;r("update:modelValue",E),r("change",E)}}}}),w={class:"color-picker"},T=["value"],O={class:"alpha-slider-wrap"},P=["value"],M={class:"alpha-value"};function A(n,r,p,s,g,_){return e.openBlock(),e.createElementBlock("div",w,[e.createElementVNode("input",{type:"color",value:n.hexValue,onInput:r[0]||(r[0]=(...h)=>n.updateColor&&n.updateColor(...h))},null,40,T),e.createElementVNode("div",O,[r[2]||(r[2]=e.createElementVNode("span",{class:"alpha-label"},"A:",-1)),e.createElementVNode("input",{type:"range",min:"0",max:"100",step:"1",value:n.alphaValue,onInput:r[1]||(r[1]=(...h)=>n.updateAlpha&&n.updateAlpha(...h))},null,40,P),e.createElementVNode("span",M,e.toDisplayString(n.alphaValue)+"%",1)])])}const L=V(S,[["render",A],["__scopeId","data-v-21507ccd"]]),W=e.defineComponent({name:"ToolPanel",components:{ColorPicker:L},props:{editor:{type:Object,default:null}},setup(n){const r=e.ref([]),p=()=>{n.editor?r.value=Array.from(n.editor.getExtensions().map(t=>(t.options&&!e.isReactive(t.options)&&(t.options=e.reactive(t.options)),t))):r.value=[]};e.watch(()=>n.editor,t=>{p()},{immediate:!0});const s=(t,c)=>t.schema?.[c];return{extensionList:r,getInputType:(t,c,i)=>{const d=s(t,c);if(d&&d.type)return d.type;if(typeof i=="boolean")return"checkbox";if(typeof i=="number")return"number";if(typeof i=="string"){const u=c.toLowerCase();return u.includes("color")||u.includes("fill")||u.includes("stroke")||i.startsWith("#")||i.startsWith("rgb")?"color":"text"}return"text"},updateOption:(t,c,i)=>{t.options&&(t.options[String(c)]=i,n.editor&&n.editor.updateState(d=>({...d})))},getMinMax:(t,c,i)=>{const d=s(t,c);return d?{min:d.min??0,max:d.max??100,step:d.step??1}:i<=1&&i>=0?{min:0,max:1,step:.01}:{min:0,max:Math.max(1e3,i*2),step:1}},formatNumber:t=>typeof t=="number"?Number.isInteger(t)?t:t.toFixed(2):t,getLabel:(t,c)=>{const i=s(t,c);return i&&i.label?i.label:c.charAt(0).toUpperCase()+c.slice(1)},getSelectOptions:(t,c)=>{const i=s(t,c);return!i||!i.options?[]:i.options.map(d=>typeof d=="string"?{label:d,value:d}:d)}}}}),D={key:0,class:"tool-panel"},F={key:0},q={key:0},j=["value","onChange"],H=["value"],R={key:1},U={key:2},K=["value","onInput"],z={class:"slider-container"},G=["min","max","step","value","onInput"],J={class:"slider-value"},Q={key:3},X={class:"switch-wrapper"},Y={class:"switch"},Z=["checked","onChange"],x={key:4},v={class:"checkbox-wrapper"},ee=["checked","onChange"],te={key:5},ne=["value","onInput"];function oe(n,r,p,s,g,_){const h=e.resolveComponent("ColorPicker");return n.editor?(e.openBlock(),e.createElementBlock("div",D,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.extensionList,l=>(e.openBlock(),e.createElementBlock("div",{class:"plugin-section",key:l.name},[e.createElementVNode("h3",null,e.toDisplayString(l.name),1),l.options?(e.openBlock(),e.createElementBlock("div",F,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.options,(a,o)=>(e.openBlock(),e.createElementBlock("div",{key:o,class:"config-item"},[e.createElementVNode("label",null,e.toDisplayString(n.getLabel(l,String(o))),1),n.getInputType(l,String(o),a)==="select"?(e.openBlock(),e.createElementBlock("div",q,[e.createElementVNode("select",{value:a,onChange:t=>n.updateOption(l,o,t.target.value)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.getSelectOptions(l,String(o)),t=>(e.openBlock(),e.createElementBlock("option",{key:t.value,value:t.value},e.toDisplayString(t.label),9,H))),128))],40,j)])):n.getInputType(l,String(o),a)==="color"?(e.openBlock(),e.createElementBlock("div",R,[e.createVNode(h,{modelValue:String(a),"onUpdate:modelValue":t=>n.updateOption(l,o,t)},null,8,["modelValue","onUpdate:modelValue"])])):n.getInputType(l,String(o),a)==="number"?(e.openBlock(),e.createElementBlock("div",U,[e.createElementVNode("input",{type:"number",value:a,onInput:t=>n.updateOption(l,o,Number(t.target.value))},null,40,K),e.createElementVNode("div",z,[e.createElementVNode("input",{type:"range",min:n.getMinMax(l,String(o),a).min,max:n.getMinMax(l,String(o),a).max,step:n.getMinMax(l,String(o),a).step,value:a,onInput:t=>n.updateOption(l,o,Number(t.target.value))},null,40,G),e.createElementVNode("span",J,e.toDisplayString(n.formatNumber(a)),1)])])):n.getInputType(l,String(o),a)==="boolean"?(e.openBlock(),e.createElementBlock("div",Q,[e.createElementVNode("div",X,[e.createElementVNode("label",Y,[e.createElementVNode("input",{type:"checkbox",checked:!!a,onChange:t=>n.updateOption(l,o,t.target.checked)},null,40,Z),r[0]||(r[0]=e.createElementVNode("span",{class:"slider"},null,-1))])])])):n.getInputType(l,String(o),a)==="checkbox"?(e.openBlock(),e.createElementBlock("div",x,[e.createElementVNode("div",v,[e.createElementVNode("input",{type:"checkbox",checked:!!a,onChange:t=>n.updateOption(l,o,t.target.checked)},null,40,ee)])])):(e.openBlock(),e.createElementBlock("div",te,[e.createElementVNode("input",{type:"text",value:a,onInput:t=>n.updateOption(l,o,t.target.value)},null,40,ne)]))]))),128))])):e.createCommentVNode("",!0)]))),128))])):e.createCommentVNode("",!0)}const re=V(W,[["render",oe],["__scopeId","data-v-77c5b72f"]]),se=e.defineComponent({name:"PooderEditor",components:{CanvasArea:y,ToolPanel:re},props:{width:{type:Number,default:1200},height:{type:Number,default:600}},setup(n){const r=e.shallowRef(null);return{editor:r,onInit:s=>{s.use(new f.BackgroundTool),s.use(new f.ImageTool),s.use(new f.WhiteInkTool),s.use(new f.DielineTool),s.use(new f.HoleTool),s.use(new f.FilmTool),r.value=s,console.log(s.getObjects())}}}}),ae={class:"pooder-editor"},le={class:"center-area"},ie={class:"right-panel"};function ce(n,r,p,s,g,_){const h=e.resolveComponent("CanvasArea"),l=e.resolveComponent("ToolPanel");return e.openBlock(),e.createElementBlock("div",ae,[e.createElementVNode("div",le,[e.createVNode(h,{width:n.width,height:n.height,onInit:n.onInit},null,8,["width","height","onInit"])]),e.createElementVNode("div",ie,[e.createVNode(l,{editor:n.editor},null,8,["editor"])])])}const de=V(se,[["render",ce],["__scopeId","data-v-b9b03377"]]);m.PooderEditor=de,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})}));
|
|
@@ -64,6 +64,8 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
|
|
|
64
64
|
onUpdate?: ((editor: Editor, state: import('../../core/src/index.ts').EditorState) => void) | undefined;
|
|
65
65
|
onUnmount?: ((editor: Editor) => void) | undefined;
|
|
66
66
|
onDestroy?: ((editor: Editor) => void) | undefined;
|
|
67
|
+
toJSON?: (() => any) | undefined;
|
|
68
|
+
loadFromJSON?: ((data: any) => void | Promise<void>) | undefined;
|
|
67
69
|
commands?: Record<string, import('../../core/src/index.ts').Command> | undefined;
|
|
68
70
|
}[], import('../../core/src/index.ts').Extension<import('../../core/src/index.ts').ExtensionOptions>[] | {
|
|
69
71
|
name: string;
|
|
@@ -76,6 +78,8 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
|
|
|
76
78
|
onUpdate?: ((editor: Editor, state: import('../../core/src/index.ts').EditorState) => void) | undefined;
|
|
77
79
|
onUnmount?: ((editor: Editor) => void) | undefined;
|
|
78
80
|
onDestroy?: ((editor: Editor) => void) | undefined;
|
|
81
|
+
toJSON?: (() => any) | undefined;
|
|
82
|
+
loadFromJSON?: ((data: any) => void | Promise<void>) | undefined;
|
|
79
83
|
commands?: Record<string, import('../../core/src/index.ts').Command> | undefined;
|
|
80
84
|
}[]>;
|
|
81
85
|
getInputType: (ext: import('../../core/src/index.ts').Extension, key: string, value: any) => string;
|
|
@@ -17,6 +17,8 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
|
|
|
17
17
|
onUpdate?: ((editor: Editor, state: import('../../../core/src/index.ts').EditorState) => void) | undefined;
|
|
18
18
|
onUnmount?: ((editor: Editor) => void) | undefined;
|
|
19
19
|
onDestroy?: ((editor: Editor) => void) | undefined;
|
|
20
|
+
toJSON?: (() => any) | undefined;
|
|
21
|
+
loadFromJSON?: ((data: any) => void | Promise<void>) | undefined;
|
|
20
22
|
commands?: Record<string, import('../../../core/src/index.ts').Command> | undefined;
|
|
21
23
|
}[], Extension<import('../../../core/src/index.ts').ExtensionOptions>[] | {
|
|
22
24
|
name: string;
|
|
@@ -29,6 +31,8 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
|
|
|
29
31
|
onUpdate?: ((editor: Editor, state: import('../../../core/src/index.ts').EditorState) => void) | undefined;
|
|
30
32
|
onUnmount?: ((editor: Editor) => void) | undefined;
|
|
31
33
|
onDestroy?: ((editor: Editor) => void) | undefined;
|
|
34
|
+
toJSON?: (() => any) | undefined;
|
|
35
|
+
loadFromJSON?: ((data: any) => void | Promise<void>) | undefined;
|
|
32
36
|
commands?: Record<string, import('../../../core/src/index.ts').Command> | undefined;
|
|
33
37
|
}[]>;
|
|
34
38
|
getInputType: (ext: Extension, key: string, value: any) => string;
|
package/dist/vue.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.canvas-area[data-v-
|
|
1
|
+
.canvas-area[data-v-c0e5ef40]{flex:1;background:#e0e0e0;display:flex;align-items:center;justify-content:center;overflow:auto;padding:20px}.canvas-wrapper[data-v-c0e5ef40]{background:#fff;box-shadow:0 0 10px #0000001a}.color-picker[data-v-21507ccd]{display:flex;flex-direction:column}.color-picker input[type=color][data-v-21507ccd]{width:100%;height:30px;padding:0;border:none;cursor:pointer}.alpha-slider-wrap[data-v-21507ccd]{display:flex;align-items:center;margin-top:5px}.alpha-label[data-v-21507ccd]{font-size:12px;color:#666;margin-right:5px;width:15px}.alpha-slider-wrap input[type=range][data-v-21507ccd]{flex:1;margin-right:5px}.alpha-value[data-v-21507ccd]{font-size:12px;color:#666;width:30px;text-align:right}.tool-panel[data-v-77c5b72f]{padding:15px;overflow-x:auto;overflow-y:hidden;height:100%;display:flex;flex-direction:row;background:#f9f9f9}.plugin-section[data-v-77c5b72f]{width:300px;flex-shrink:0;margin-right:20px;border-right:1px solid #eee;padding-right:20px;height:100%;overflow-y:auto}.plugin-section h3[data-v-77c5b72f]{margin-top:0;margin-bottom:15px;font-size:16px;color:#333;border-bottom:2px solid #ddd;padding-bottom:5px}.config-item[data-v-77c5b72f]{margin-bottom:15px}.config-item label[data-v-77c5b72f]{display:block;margin-bottom:5px;font-size:14px;font-weight:500;color:#555}.config-item input[type=text][data-v-77c5b72f],.config-item input[type=number][data-v-77c5b72f],.config-item select[data-v-77c5b72f]{width:100%;padding:8px;border:1px solid #ddd;border-radius:4px;box-sizing:border-box;font-size:14px}.config-item input[type=checkbox][data-v-77c5b72f]{transform:scale(1.2)}.checkbox-wrapper[data-v-77c5b72f]{padding:5px 0}.slider-container[data-v-77c5b72f]{display:flex;align-items:center;margin-top:5px}.slider-container input[type=range][data-v-77c5b72f]{flex:1;margin-right:10px}.slider-value[data-v-77c5b72f]{font-size:12px;color:#666;width:35px;text-align:right}.switch-wrapper[data-v-77c5b72f]{padding:5px 0}.switch[data-v-77c5b72f]{position:relative;display:inline-block;width:40px;height:20px}.switch input[data-v-77c5b72f]{opacity:0;width:0;height:0}.slider[data-v-77c5b72f]{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:20px}.slider[data-v-77c5b72f]:before{position:absolute;content:"";height:16px;width:16px;left:2px;bottom:2px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider[data-v-77c5b72f]{background-color:#2196f3}input:checked+.slider[data-v-77c5b72f]:before{transform:translate(20px)}.pooder-editor[data-v-b9b03377]{display:flex;flex-direction:column;width:100%;height:100%;background:#f0f2f5;box-sizing:border-box}.center-area[data-v-b9b03377]{flex:1;display:flex;flex-direction:column;position:relative;overflow:hidden}.right-panel[data-v-b9b03377]{width:100%;height:320px;background:#fff;border-top:1px solid #ddd;display:flex;flex-direction:column;z-index:10}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pooder/vue",
|
|
3
|
-
"version": "0.0
|
|
3
|
+
"version": "2.0.0",
|
|
4
4
|
"main": "./dist/index.umd.js",
|
|
5
5
|
"module": "./dist/index.es.js",
|
|
6
6
|
"types": "./dist/index.d.ts",
|
|
@@ -19,9 +19,8 @@
|
|
|
19
19
|
"access": "public"
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"
|
|
23
|
-
"@pooder/
|
|
24
|
-
"@pooder/core": "0.0.2"
|
|
22
|
+
"@pooder/kit": "2.0.0",
|
|
23
|
+
"@pooder/core": "0.1.0"
|
|
25
24
|
},
|
|
26
25
|
"peerDependencies": {
|
|
27
26
|
"vue": "^3.0.0"
|