@mixd-id/web-scaffold 0.1.230406091 → 0.1.230406093

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.230406091",
+  "version": "0.1.230406093",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",
@@ -12,6 +12,7 @@
     ".": "./src/index.js",
     "./themes/default": "./src/themes/default/index.js",
     "./mixin/component": "./src/mixin/component.js",
+    "./mixin/edit-mode": "./src/mixin/edit-mode.js",
     "./helpers": {
       "require": "./src/utils/helpers.js",
       "import": "./src/utils/helpers.mjs"

package/src/components/Ahref.vue

@@ -19,7 +19,7 @@ export default {
 	computed: {
 
 		isExternalLink() {
-			return typeof this.href === 'string' && (this.href.startsWith('http') || this.href.startsWith('tel:'))
+			return typeof this.href === 'string' && this.href.indexOf('://') > 0
 		}
 	},
 }

package/src/components/Article.vue

@@ -1,10 +1,16 @@
 <template>
-	<article :class="compClass" v-html="htmlText"></article>
+	<article :class="$style.comp"
+					 v-html="htmlText"
+					 :contenteditable="editable"
+					 @input="onInput"
+					 @click="onClick"
+					 @paste="onPaste"></article>
 </template>
 
 <script>
 
 import { componentMixin } from '../mixin/component';
+import { getSelection } from "../utils/selection";
 
 export default{
 
@@ -16,18 +22,230 @@ export default{
 
 	},
 
-	computed: {
+	methods: {
 
-		compClass(){
-			return [
-				this.$style.comp,
-				this.extClass
-			]
-				.join(' ')
+		onInput(){
+			if(this.editable){
+				this.triggerUpdate()
+			}
 		},
 
-	}
+		onClick(){
+			if(this.editable){
+				let { element } = getSelection(this.$el)
+
+				const table = this.closest(element, 'table')
+
+				window.parent.postMessage({
+					uid: this.uid,
+					type: 'setSubAction',
+					value: table ? 'table' : ''
+				}, '*')
+			}
+		},
+
+		onPaste(e) {
+			e.preventDefault()
+			let text = (e.clipboardData || window.clipboardData).getData("text");
+			const el = document.createElement('div')
+			el.innerHTML = text
+			text = el.innerText
+			document.execCommand("insertText", false, text);
+		},
+
+		triggerUpdate(){
+			window.parent.postMessage({
+				uid: this.uid,
+				type: 'setProp',
+				value: {
+					htmlText: this.$el.innerHTML
+				}
+			}, '*')
+		},
+
+		closest(el, selector){
+			let parent = el.parentNode
+			while(parent){
+				if(parent === document) break
+
+				if(parent.matches(selector)){
+					return parent
+				}
+				parent = parent.parentNode
+			}
+		},
+
+		addTableColumn(){
+
+			let { element } = getSelection(this.$el)
+			if(element.nodeType !== 1)
+				element = element.parentNode
+			const table = this.closest(element, 'table')
+
+			if(table){
+				const thead = table.querySelector('thead')
+				const tbody = table.querySelector('tbody')
+				const tr = this.closest(element, 'tr')
+				const index = Array.from(tr.children).indexOf(element)
+
+				thead.querySelectorAll('tr').forEach(tr => {
+					const th = document.createElement('th')
+					th.innerHTML = "<i>insert header...</i>"
+					tr.insertBefore(th, tr.children[index + 1])
+				})
+
+				tbody.querySelectorAll('tr').forEach(tr => {
+					const td = document.createElement('td')
+					td.innerHTML = 'Content'
+					tr.insertBefore(td, tr.children[index + 1])
+				})
+
+				this.triggerUpdate()
+			}
+		},
+
+		addTableRow(){
+
+			let { element } = getSelection(this.$el)
+			if(element.nodeType !== 1)
+				element = element.parentNode
+			const table = this.closest(element, 'table')
+
+			if(table){
+				const tbody = table.querySelector('tbody')
+				const tr = this.closest(element, 'tr')
+				const index = Array.from(tbody.children).indexOf(tr)
+				if(index >= 0){
+					const nTr = document.createElement('tr')
+					for(let i = 0 ; i < tr.children.length ; i++){
+						const nTd = document.createElement('td')
+						nTd.innerHTML = 'Content'
+						nTr.appendChild(nTd)
+					}
+					tbody.insertBefore(nTr, tbody.children[index + 1])
+					this.triggerUpdate()
+				}
+			}
+		},
+
+		removeTableRow(){
+
+			let { element } = getSelection(this.$el)
+			if(element.nodeType !== 1)
+				element = element.parentNode
+			const table = this.closest(element, 'table')
+
+			if(table){
+				const tbody = table.querySelector('tbody')
+				const tr = this.closest(element, 'tr')
+				if(tr){
+					tbody.removeChild(tr)
+					this.triggerUpdate()
+				}
+			}
+		},
+
+		removeTableColumn(){
 
+			let { element } = getSelection(this.$el)
+			if(element.nodeType !== 1)
+				element = element.parentNode
+			const table = this.closest(element, 'table')
+
+			if(table) {
+				const thead = table.querySelector('thead')
+				const tbody = table.querySelector('tbody')
+				const tr = this.closest(element, 'tr')
+				const index = Array.from(tr.children).indexOf(element)
+
+				thead.querySelectorAll('tr').forEach(tr => {
+					tr.removeChild(tr.children[index])
+				})
+
+				tbody.querySelectorAll('tr').forEach(tr => {
+					tr.removeChild(tr.children[index])
+				})
+
+				this.triggerUpdate()
+			}
+		},
+
+		insertTable(){
+			document.execCommand('insertHTML', false,
+			`<table>
+<thead>
+	<tr>
+		<th>Header</th>
+		<th>Header</th>
+	</tr>
+</thead>
+<tbody>
+	<tr>
+		<td>Content</td>
+		<td>Content</td>
+	</tr>
+</tbody>
+</table>`)
+		}
+
+	},
+
+	data(){
+		return {
+			editable: false
+		}
+	},
+
+	mounted() {
+		if('edit-mode' in this.$route.query){
+			window.addEventListener('message', ({ data }) => {
+				if(data.uid === this.uid){
+
+					const { action, type, value } = data.data
+
+					switch(action){
+
+						case 'insertTable':
+							this.insertTable()
+							break
+
+						case 'removeFormat':
+							document.execCommand('removeFormat', false);
+							break
+
+						case 'addTableColumn':
+							this.addTableColumn()
+							break
+
+						case 'addTableRow':
+							this.addTableRow()
+							break
+
+						case 'removeTableColumn':
+							this.removeTableColumn()
+							break
+
+						case 'removeTableRow':
+							this.removeTableRow()
+							break
+
+						case 'format':
+							switch(type){
+								case 'bold':
+								case 'italic':
+								default:
+									document.execCommand(type, false, value);
+									break
+							}
+							break
+
+					}
+
+				}
+			})
+			this.editable = true
+		}
+	}
 
 }
 
@@ -40,6 +258,9 @@ export default{
 }
 .comp *{
 }
+.comp[contenteditable]{
+	@apply outline-none;
+}
 
 .comp a{
 	@apply text-primary underline;
@@ -60,6 +281,15 @@ font[size='5']{ @apply text-2xl; }
 font[size='6']{ @apply text-3xl; }
 font[size='7']{ @apply text-4xl; }
 
+.comp table{
+	@apply border-[1px] border-text-200 border-collapse w-full;
+	table-layout: fixed;
+}
+.comp table th, .comp table td{
+	@apply border-[1px] border-text-200 p-3 text-left;
+	@apply break-words;
+}
+
 @media screen(md){
 	.comp{
 		background-image: v-bind(bgImages[1]);

package/src/components/Block.vue

@@ -1,12 +1,8 @@
 <template>
-	<div :class="compClass">
-
-		<component v-for="item in computedItems"
+	<div :class="$style.comp">
+		<component v-for="item in items"
 							 :is="item.type"
-							 :uid="item.uid"
-							 :items="item.items"
-							 :="item.props" />
-
+							 :="item" />
 	</div>
 </template>
 
@@ -22,24 +18,6 @@ export default{
 		class: String,
 		items: Array,
 		type: String,
-	},
-
-	computed: {
-
-		computedItems() {
-			return this.items.filter((_) => _.props.enabled)
-		},
-
-		compClass(){
-			return [
-				this.$style.comp,
-				this.extClass,
-				this.class ?? ''
-			]
-				.filter(_ => _)
-				.join(' ')
-		}
-
 	}
 
 }

package/src/components/Box.vue

@@ -1,6 +1,5 @@
 <template>
-	<div :class="compClass">
-		<br />
+	<div :class="$style.comp">
 		<br />
 	</div>
 </template>
@@ -20,18 +19,6 @@ export default{
 			default: 'Box'
 		}
 
-	},
-
-	computed: {
-
-		compClass(){
-			return [
-				this.$style.comp,
-				this.extClass
-			]
-				.join(' ')
-		},
-
 	}
 
 }

package/src/components/Button.vue

@@ -22,8 +22,6 @@ export default{
 
 	props: {
 
-		class: String,
-
 		variant: {
 			type: [ String, Number ],
 			default: "primary" // primary|secondary|outline, default:primary
@@ -49,9 +47,7 @@ export default{
 			return [
 				this.$style.button,
 				this.$style['button-' + this.variant],
-				parseInt(this.computedState) === 2 ? this.$style.loading : '',
-				this.extClass,
-				this.class ?? '',
+				parseInt(this.computedState) === 2 ? this.$style.loading : ''
 			]
 				.filter(_ => _)
 				.join(' ')
@@ -119,6 +115,7 @@ export default{
 	@apply relative flex items-center justify-center;
 	@apply whitespace-nowrap text-ellipsis overflow-hidden;
 	@apply rounded-lg;
+	background-image: v-bind(bgImages[0]);
 }
 .button>*:first-child{
 	@apply flex items-center justify-center
@@ -286,4 +283,10 @@ export default{
 	@apply animate-spin h-5 w-5;
 }
 
+@media screen(md){
+	.button{
+		background-image: v-bind(bgImages[1]);
+	}
+}
+
 </style>

package/src/components/Carousel.vue

@@ -1,13 +1,11 @@
 <template>
-  <div :class="compClass" @mousedown.prevent="mouseDown" @touchstart.passive="mouseDown">
+  <div :class="$style.comp" @mousedown.prevent="mouseDown" @touchstart.passive="mouseDown">
 
     <div ref="inner" :class="innerClass">
 			<div v-for="item in items" :class="itemClass">
 				<component  :is="item.type"
-										:uid="item.uid"
-										:="item.props"
-										:ratio="ratio"
-										:ext-class="item.extClass" />
+										:="item"
+										@click.stop="editModeClick(item.uid)" />
 			</div>
     </div>
 
@@ -41,6 +39,8 @@ import {componentMixin} from "../mixin/component";
 
 export default{
 
+	inject: [ 'editModeClick' ],
+
 	mixins: [ componentMixin ],
 
   props:{
@@ -69,20 +69,9 @@ export default{
 
 	computed: {
 
-		compClass(){
-			return [
-				this.$style.comp,
-				this.extClass
-			]
-				.filter(_ => _)
-				.join(' ')
-		},
-
 		innerClass(){
 			return [
 				this.$style.inner,
-				'aspect-[' + this.ratio[0] + ']',
-				this.ratio[1] ? 'md:aspect-[' + this.ratio[1] + ']' : ''
 			]
 				.filter(_ => _)
 				.join(' ')
@@ -315,11 +304,12 @@ export default{
 	white-space: nowrap;
 	will-change: transform;
 	touch-action: none;
-	padding: v-bind(gaps[0]);
+	@apply flex flex-row items-stretch;
 }
 .inner>*{
 	display: inline-block;
 	width: 100%;
+	min-width: 100%;
 	touch-action: none;
 	vertical-align: top;
 }

package/src/components/Flex.vue

@@ -1,13 +1,10 @@
 <template>
-	<div :class="compClass" :style="computedStyle">
+	<div :class="$style.comp">
 
-		<component v-for="(item, idx) in computedItems"
+		<component v-for="(item, idx) in items"
 							 :is="item.type"
-							 :uid="item.uid"
-							 :items="item.items"
-							 :="item.props"
-							 :ext-class="item.extClass"
-							 :class="itemClass(idx)" />
+							 :="item"
+							 @click.stop="editModeClick(item.uid)" />
 
 	</div>
 </template>
@@ -18,6 +15,8 @@ import {componentMixin} from "../mixin/component";
 
 export default{
 
+	inject: [ 'editModeClick' ],
+
 	mixins: [ componentMixin ],
 
 	props:{
@@ -28,25 +27,6 @@ export default{
 
 	methods: {
 
-		itemClass(idx){
-			return ((this.flexColumns ?? [])[idx] ?? []).join(' ')
-		},
-	},
-
-	computed: {
-
-		computedItems(){
-			return this.items.filter((_) => _.props.enabled)
-		},
-
-		compClass(){
-			return [
-				this.$style.comp,
-				this.extClass
-			]
-				.join(' ')
-		}
-
 	}
 
 }

package/src/components/Grid.vue

@@ -1,12 +1,10 @@
 <template>
-  <div :class="compClass">
+  <div :class="$style.comp">
 
-    <component v-for="item in computedItems"
+    <component v-for="item in items"
 							 :is="item.type"
-							 :uid="item.uid"
-							 :items="item.items"
-							 :="item.props"
-							 :ext-class="item.extClass" />
+							 :="item"
+							 @click.stop="editModeClick(item.uid)" />
 
   </div>
 </template>
@@ -17,32 +15,12 @@ import {componentMixin} from "../mixin/component";
 
 export default{
 
+	inject: [ 'editModeClick' ],
+
 	mixins: [ componentMixin ],
 
 	props:{
 		items: Array
-	},
-
-  computed:{
-
-		computedItems(){
-			return this.items.filter((_) => _.props.enabled)
-		},
-
-    compClass(){
-			return [
-				this.$style.comp,
-				this.extClass
-			]
-				.filter(_=>_)
-				.join(' ')
-    }
-
-  },
-
-	methods: {
-
-
 	}
 
 }