Skip to content

Commit a50d335

Browse files
evans-kimevans-kim
committed
- 에러수정
1 parent e212d98 commit a50d335

19 files changed

+237
-191
lines changed

‎docs/index.html

+1-23
Original file line numberDiff line numberDiff line change
@@ -1,23 +1 @@
1-
<!DOCTYPE html>
2-
<html lang="en">
3-
<head>
4-
<meta charset="utf-8">
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6-
<meta name="viewport" content="width=device-width,initial-scale=1">
7-
<link rel="icon" href="/vueuv/favicon.ico">
8-
<title>@evans-kim/vueuv</title>
9-
<link href="/vueuv/css/app.75a2ac4b.css" rel="preload" as="style">
10-
<link href="/vueuv/css/chunk-vendors.a6f4f613.css" rel="preload" as="style">
11-
<link href="/vueuv/js/app.42e8b860.js" rel="preload" as="script">
12-
<link href="/vueuv/js/chunk-vendors.d84c0c2f.js" rel="preload" as="script">
13-
<link href="/vueuv/css/chunk-vendors.a6f4f613.css" rel="stylesheet">
14-
<link href="/vueuv/css/app.75a2ac4b.css" rel="stylesheet">
15-
</head>
16-
<body>
17-
<noscript><strong>We're sorry but @evans-kim/vueuv doesn't work properly without JavaScript enabled. Please enable it to
18-
continue.</strong></noscript>
19-
<div id="app"></div>
20-
<script src="/vueuv/js/chunk-vendors.d84c0c2f.js"></script>
21-
<script src="/vueuv/js/app.42e8b860.js"></script>
22-
</body>
23-
</html>
1+
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="/vueuv/favicon.ico"><title>@evans-kim/vueuv</title><link href="/vueuv/css/app.75a2ac4b.css" rel="preload" as="style"><link href="/vueuv/css/chunk-vendors.a6f4f613.css" rel="preload" as="style"><link href="/vueuv/js/app.d4d9b133.js" rel="preload" as="script"><link href="/vueuv/js/chunk-vendors.d84c0c2f.js" rel="preload" as="script"><link href="/vueuv/css/chunk-vendors.a6f4f613.css" rel="stylesheet"><link href="/vueuv/css/app.75a2ac4b.css" rel="stylesheet"></head><body><noscript><strong>We're sorry but @evans-kim/vueuv doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id="app"></div><script src="/vueuv/js/chunk-vendors.d84c0c2f.js"></script><script src="/vueuv/js/app.d4d9b133.js"></script></body></html>

‎docs/js/app.42e8b860.js

-2
This file was deleted.

‎docs/js/app.42e8b860.js.map

-1
This file was deleted.

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
"scripts": {
2424
"serve": "vue-cli-service serve",
2525
"build": "vue-cli-service build",
26-
"build:plugin": "vue-cli-service build ./src/plugin.ts --dest=lib --target=lib",
26+
"build:plugin": "vue-cli-service build src/plugin.js --dest=lib --target=lib",
2727
"test:unit": "vue-cli-service test:unit",
2828
"lint": "vue-cli-service lint"
2929
},

‎src/App.vue

+1-6
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,12 @@
11
<template>
22
<div id="app" class="relative bg-gray-100 min-h-screen">
3-
<vueuv-editor target="test-promotion-page"></vueuv-editor>
4-
<SmallPage id="test-promotion-page"/>
3+
<vueuv-editor></vueuv-editor>
54
</div>
65
</template>
76
<script>
87
9-
import SmallPage from "@/views/SmallPage";
108
export default {
119
name: 'VuePageBuilder',
12-
components: {
13-
SmallPage
14-
},
1510
data() {
1611
return {
1712
html: null

‎src/Contents/TextContent.vue

+3-2
Original file line numberDiff line numberDiff line change
@@ -78,9 +78,10 @@ export default {
7878
this.loadEditor();
7979
},
8080
disableEdit(){
81-
if(this.editor)
81+
if(this.editor){
8282
this.$emit('update:value', this.editor.getContent() );
83-
this.editor.hide();
83+
this.editor.hide();
84+
}
8485
},
8586
async loadEditor(){
8687
if(this.editor){

‎src/components/CodeEditor.vue

+2-1
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,8 @@ export default {
1313
},
1414
methods: {
1515
handleInput(e){
16-
const text =e.target.innerText
16+
console.log('change CSS', e.target.value);
17+
const text = e.target.value
1718
1819
this.$emit('input', text)
1920
}

‎src/components/ContentRender.vue

+21-25
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export default {
2828
2929
const children = value.contents || [];
3030
31-
const childrenNode = children.map((child) => {
31+
const childrenNode = children.forEach((child) => {
3232
if (typeof child === 'string') {
3333
return child;
3434
}
@@ -57,7 +57,7 @@ export default {
5757
props: props,
5858
on: listeners,
5959
ref: 'content',
60-
key: value.id + 'render'
60+
key: value.id
6161
};
6262
6363
return h(tag, data, childrenNode)
@@ -143,18 +143,18 @@ export default {
143143
},
144144
contentStyleObject: {
145145
get: function () {
146-
if (this.value.cssObject) {
147-
return this.value.cssObject;
148-
} else {
149-
this.$set(this.value, 'cssObject', {});
150-
}
146+
151147
let media = "#" + this.value.id;
152148
if (this.$editor.media.mobile) {
153149
media = this.$editor.mediaQuery.mobile;
154150
}
155151
if (this.$editor.media.tablet) {
156152
media = this.$editor.mediaQuery.tablet;
157153
}
154+
if (this.value.cssObject) {
155+
return this.value.cssObject[media];
156+
}
157+
this.$set(this.value, 'cssObject', {});
158158
159159
const obj = this.getCssTextToObject;
160160
@@ -277,7 +277,7 @@ export default {
277277
newStyle[id] = Object.assign(cloneAll(this.value.cssObject[id] || {}) , style);
278278
}
279279
280-
this.$set(this.value, 'cssObject' , Object.assign(this.value.cssObject, newStyle));
280+
this.$set(this.value, 'cssObject' , Object.assign({}, this.value.cssObject, newStyle));
281281
this.$set(this.value, 'cssText', this.objectToCss());
282282
this.changingUpdate();
283283
},
@@ -303,22 +303,20 @@ export default {
303303
}));
304304
},
305305
changingUpdate() {
306-
307-
this.$emit('update:content', Object.assign({}, this.value));
308-
if (!this.parent) {
309-
return;
306+
this.$emit('update:content', cloneAll(this.value));
307+
if(this.parent){
308+
this.parent.changingUpdate();
310309
}
311-
//this.$set(this.parent.value.contents, this.getIndexFromParent, this.value);
312-
this.parent.changingUpdate();
313310
},
314311
updateContentValue(value) {
315-
if (!this.parent) {
316-
this.$emit('update:content', this.value);
312+
/*if (!this.parent) {
313+
console.log( this.$editor.contentModel === this.value )
314+
this.$emit('update:content', cloneAll(this.value));
317315
return;
318316
}
319-
this.$set(this.parent.value.contents, this.getIndexFromParent, value);
320-
321-
this.changingUpdate();
317+
this.$set(this.parent.value.contents, this.getIndexFromParent, value);*/
318+
this.$emit('update:content', cloneAll(value));
319+
//this.changingUpdate();
322320
},
323321
createChild(h, child) {
324322
return h('content-render', {props: {value: child, parent: this}, key: child.id});
@@ -338,9 +336,7 @@ export default {
338336
if (this.$editor.config.showGrid || this.$editor.states.isSorting) {
339337
classes.push('show-guide');
340338
}
341-
if (this.isGuided) {
342-
classes.push('hide-guide');
343-
}
339+
344340
return classes;
345341
},
346342
setUid() {
@@ -501,7 +497,7 @@ export default {
501497
}
502498
}
503499
</script>
504-
<style lang="scss">
500+
<style lang="scss" scoped>
505501
.sortable-chosen {
506502
transition: all ease-in-out 0.3ms;
507503
}
@@ -539,10 +535,10 @@ export default {
539535
.show-guide {
540536
outline: 1px dashed #606060;
541537
padding: 1rem;
542-
transition: all ease-in-out 300ms;
538+
transition: width,height,padding,margin ease-in-out 300ms;
543539
}
544540
545541
.hide-guide {
546-
transition: all ease-in-out 300ms;
542+
transition: width,height,padding,margin ease-in-out 300ms;
547543
}
548544
</style>

‎src/components/Helper.vue

+22-15
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
<template>
2-
<transition name="fade-in-out" mode="out-in">
32
<div v-if="isLayoutComponent" v-show="!isSorting" :style="getStyle">
43
<div class="m-2">
54
<div class="flex">
@@ -48,7 +47,7 @@
4847
<code-editor v-model="getTargetStyleText"></code-editor>
4948
</div>
5049
<div v-if="activeTab === 'controller'">
51-
<div v-for="(group, idx) in Object.keys(control)" :key="'control'+idx">
50+
<div v-for="(group, idx) in Object.keys(control)" :key="'control'+idx + $editor.renderKey">
5251
<h4 class="text-lg bold py-1">{{ group }}</h4>
5352
<vu-button v-for="(css , x) in control[group]" :key="'btn'+x" :color="hasStyle(group, control[group][x])" @click="setStyle(group, control[group][x])">
5453
{{ css }}
@@ -61,7 +60,7 @@
6160
</div>
6261
</div>
6362
</div>
64-
</transition>
63+
6564
</template>
6665

6766
<script>
@@ -72,6 +71,7 @@ import VuButton from "@/components/VuButton";
7271
import createUid from "@/lib/createUniqueId.ts";
7372
import ContentTree from "@/components/ContentTree";
7473
import {cloneContent} from "@/lib/createUniqueId.ts";
74+
import cssToObject from 'css-to-object'
7575
7676
export default {
7777
name: "Helper",
@@ -121,12 +121,11 @@ export default {
121121
}
122122
},
123123
watch: {
124-
activeTab(val) {
125-
this.$nextTick(() => {
124+
getStyleObject:{
125+
deep:true,
126+
handler(){
126127
//
127-
this.scrollMoveToSelectedContent();
128-
129-
})
128+
}
130129
},
131130
contentFocused(element) {
132131
if (!this.isLayoutComponent) {
@@ -160,14 +159,23 @@ export default {
160159
return this.focusedContent.value.class || []
161160
},
162161
getStyleObject(){
162+
if(!this.focusedContent){
163+
return {};
164+
}
163165
return this.focusedContent.contentStyleObject;
164166
},
165167
getTargetStyleText: {
166168
get() {
167169
return this.focusedContent.value.cssText || ''
168170
},
169171
set(value) {
172+
console.log(value, 'getTargetStyleText - set');
173+
const object = cssToObject(value||'', {
174+
camelCase: false,
175+
numbers: false
176+
});
170177
this.updateFocusedValue(value, 'cssText')
178+
this.updateFocusedValue(object, 'cssObject')
171179
}
172180
},
173181
getContentModel() {
@@ -229,14 +237,15 @@ export default {
229237
return;
230238
}
231239
232-
const editorRect = this.$editor.getFrame.getBoundingClientRect();
233-
240+
const editorRect = this.$editor.$refs.frame.$el.getBoundingClientRect();
234241
const rect = element.getBoundingClientRect();
242+
const winY = window.scrollY;
243+
235244
this.getStyle.display = 'absolute';
236245
this.getStyle.left = rect.x + editorRect.x + 'px';
237246
this.getStyle.right = 'auto';
238247
239-
this.getStyle.top = rect.y + editorRect.y + rect.height + 10 + 'px';
248+
this.getStyle.top = rect.y + editorRect.y + rect.height + winY + 10 + 'px';
240249
this.getStyle.display = 'flex'
241250
this.getStyle.opacity = 1;
242251
await this.$nextTick(() => {
@@ -280,7 +289,7 @@ export default {
280289
}
281290
},
282291
hasStyle(key, value) {
283-
const obj = this.focusedContent.getCssObjectByMedia
292+
const obj = this.focusedContent.contentStyleObject
284293
285294
if (!obj)
286295
return null;
@@ -295,9 +304,7 @@ export default {
295304
return null;
296305
},
297306
setStyle(key, value) {
298-
const obj = {};
299-
obj[key] = value;
300-
this.focusedContent.setCssObject(obj);
307+
this.focusedContent.setCssObject({ [key] : value });
301308
},
302309
toggleDisplay() {
303310
if (this.focusedContent.value.style && this.focusedContent.value.style.display === 'flex') {

0 commit comments

Comments
 (0)