@mixd-id/web-scaffold 0.1.230406108 → 0.1.230406110

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.230406108",
+  "version": "0.1.230406110",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",
@@ -43,7 +43,6 @@
     "glob": "^8.0.3",
     "lodash": "^4.17.21",
     "md5": "^2.3.0",
-    "monaco-editor": "^0.41.0",
     "nprogress": "^0.2.0",
     "pinia": "^2.0.14",
     "prismjs": "^1.28.0",

package/src/components/CopyToClipboard.vue

@@ -6,6 +6,8 @@
 
 <script>
 
+import {copyToClipboard} from "../utils/helpers.mjs";
+
 export default{
 
 	emits: [ 'copied', 'error' ],
@@ -19,41 +21,14 @@ export default{
 
 	methods: {
 
-		fallbackCopyTextToClipboard(text){
-			var textArea = document.createElement("textarea");
-			textArea.value = this.value;
-			textArea.style.top = "0";
-			textArea.style.left = "0";
-			textArea.style.position = "fixed";
-			document.body.appendChild(textArea);
-			textArea.focus();
-			textArea.select();
-
-			try {
-				document.execCommand('copy')
-				this.$emit('copied')
-			} catch (err) {
-				this.$emit('error')
-			}
-
-			document.body.removeChild(textArea);
-		},
-
 		copyToClipboard(){
-
-			if (!navigator.clipboard) {
-				this.fallbackCopyTextToClipboard(this.value);
-				return;
-			}
-			navigator.clipboard.writeText(this.value).then(() => {
-				this.$emit('copied')
-			}, (err) => {
-				this.$emit('error')
-			});
+			copyToClipboard(this.value)
+				.then(() => this.$emit('copied'))
+				.catch(() => this.$emit('error'))
 		}
 
 	}
 
 }
 
-</script>
+</script>

package/src/components/TreeView.vue

@@ -9,7 +9,9 @@
 									@movedown="moveDown(item)"
 									@change="$emit('change')"
 									@remove="confirm($t('Remove this item?'), { onConfirm: () => { modelValue.splice(index, 1);$emit('change') }})"
-									@add="(items) => $emit('add', items)">
+									@add="(items) => $emit('add', items)"
+									@paste.stop.prevent="(e) => paste(e, item)"
+									@item-paste="(p1, p2, p3) => $emit('item-paste', p1, p2, p3)">
 			<template #default="{ item }">
 				<slot :item="item"></slot>
 			</template>
@@ -26,7 +28,7 @@ export default{
 
 	components: {TreeViewItem},
 
-	emits: [ 'add', 'change' ],
+	emits: [ 'add', 'change', 'item-paste' ],
 
 	inject: [ 'confirm' ],
 
@@ -40,6 +42,19 @@ export default{
 
 	methods: {
 
+		paste(event, subItem){
+			const clipboardData = event.clipboardData || window.clipboardData;
+			const pastedText = clipboardData.getData('text');
+
+			try{
+				const newItem = JSON.parse(pastedText)
+				this.$emit('item-paste', this.modelValue, subItem, newItem)
+			}
+			catch(e){
+
+			}
+		},
+
 		moveDown(item){
 			const idx = this.modelValue.indexOf(item)
 			if(idx < this.modelValue.length - 1){

package/src/components/TreeViewItem.vue

@@ -1,27 +1,20 @@
 <template>
-	<div>
+	<div @copy.stop.prevent="copy">
 		<div ref="item" :class="itemClass"
-				 @mouseover="hoverMouseOver" @mouseout="hoverMouseOut">
-			<div class="cursor-move" ref="drag" @mousedown="mouseDown">
-				<svg width="14" height="14" class="fill-text-100" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M496 288H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm0-128H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16z"/></svg>
-			</div>
-			<div class="flex flex-col hidden">
-				<button type="button" @click="$emit('moveup')">
-					<svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M32.032 352h255.93c28.425 0 42.767-34.488 22.627-54.627l-127.962-128c-12.496-12.496-32.758-12.497-45.255 0l-127.968 128C-10.695 317.472 3.55 352 32.032 352zM160 192l128 128H32l128-128z"/></svg>
-				</button>
-				<button type="button" @click="$emit('movedown')">
-					<svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M287.968 160H32.038c-28.425 0-42.767 34.488-22.627 54.627l127.962 128c12.496 12.496 32.758 12.497 45.255 0l127.968-128C330.695 194.528 316.45 160 287.968 160zM160 320L32 192h256L160 320z"/></svg>
-				</button>
-			</div>
-			<slot :item="item"></slot>
-			<button type="button" class="py-2" @click="$emit('remove')">
-				<svg width="16" height="16" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z"/></svg>
-			</button>
+				 @mouseover="hoverMouseOver"
+				 @mouseout="hoverMouseOut"
+				 @mousedown="mouseDown"
+				 @mouseup="hoverMouseUp">
 			<button type="button" class="py-2" v-if="Array.isArray((item ?? {}).items) && item.items.length > 0"
-				@click="childCollapsed = !childCollapsed">
+							@click="childCollapsed = !childCollapsed">
 				<svg v-if="!childCollapsed" width="16" height="16" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"/></svg>
 				<svg v-else width="16" height="16" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><path d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"/></svg>
 			</button>
+			<div v-else class="pl-1"></div>
+			<slot :item="item"></slot>
+			<button type="button" class="py-2" @click="$emit('remove')">
+				<svg width="16" height="16" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M193.94 256L296.5 153.44l21.15-21.15c3.12-3.12 3.12-8.19 0-11.31l-22.63-22.63c-3.12-3.12-8.19-3.12-11.31 0L160 222.06 36.29 98.34c-3.12-3.12-8.19-3.12-11.31 0L2.34 120.97c-3.12 3.12-3.12 8.19 0 11.31L126.06 256 2.34 379.71c-3.12 3.12-3.12 8.19 0 11.31l22.63 22.63c3.12 3.12 8.19 3.12 11.31 0L160 289.94 262.56 392.5l21.15 21.15c3.12 3.12 8.19 3.12 11.31 0l22.63-22.63c3.12-3.12 3.12-8.19 0-11.31L193.94 256z"/></svg>
+			</button>
 		</div>
 		<div ref="container" v-if="item && Array.isArray(item.items) && !childCollapsed" class="ml-4">
 			<TreeViewItem v-for="(subItem, index) in item.items"
@@ -32,7 +25,9 @@
 										@movedown="moveDown(subItem)"
 										@remove="confirm($t('Remove this item?'), { onConfirm: () => { item.items.splice(index, 1);$emit('change') }})"
 										@add="(items) => $emit('add', items)"
-										@change="$emit('change')">
+										@change="$emit('change')"
+										@paste.stop.prevent="(e) => paste(e, subItem)"
+										@item-paste="(p1, p2, p3) => $emit('item-paste', p1, p2, p3)">
 				<template #default="{ item }">
 					<slot :item="item"></slot>
 				</template>
@@ -50,13 +45,15 @@
 
 <script>
 
+import {copyToClipboard} from "../utils/helpers.mjs";
+
 let dragged = null
 
 export default{
 
-	emits: [ 'add', 'change', 'moveup', 'movedown', 'remove' ],
+	emits: [ 'add', 'change', 'moveup', 'movedown', 'remove', 'item-paste' ],
 
-	inject: [ 'confirm' ],
+	inject: [ 'confirm', 'toast' ],
 
 	props: {
 		item: Object,
@@ -73,6 +70,24 @@ export default{
 
 	methods: {
 
+		copy(){
+			copyToClipboard(JSON.stringify(this.item))
+			this.toast(this.item.type + ' copied')
+		},
+
+		paste(event, subItem){
+			const clipboardData = event.clipboardData || window.clipboardData;
+			const pastedText = clipboardData.getData('text');
+
+			try{
+				const newItem = JSON.parse(pastedText)
+				this.$emit('item-paste', this.item.items, subItem, newItem)
+			}
+			catch(e){
+
+			}
+		},
+
 		moveDown(item){
 			const idx = this.item.items.indexOf(item)
 			if(idx < this.item.items.length - 1){
@@ -94,12 +109,14 @@ export default{
 		},
 
 		mouseDown(e){
-
 			e.preventDefault()
 
+			const rect = this.$el.getBoundingClientRect()
+			const startX = e.clientX
+
 			const cloned = this.$el.cloneNode(true)
 			cloned.style.position = 'absolute'
-			cloned.style.left = (e.clientX - 10) + "px"
+			cloned.style.left = rect.x + "px"
 			cloned.style.top = (e.clientY - 10) + "px"
 			cloned.style.width = this.$el.clientWidth + "px"
 			cloned.style.pointerEvents = 'none'
@@ -111,7 +128,8 @@ export default{
 			}
 
 			const mouseMove = (e) => {
-				cloned.style.left = (e.clientX - 10) + "px"
+				const distanceX = e.clientX - startX
+				cloned.style.left = (rect.x + distanceX) + "px"
 				cloned.style.top = (e.clientY - 10) + "px"
 			}
 
@@ -170,7 +188,7 @@ export default{
 				delete dragged.targetParent
 			}
 
-		}
+		},
 
 	},
 
@@ -201,8 +219,8 @@ export default{
 <style module>
 
 .item{
-	@apply bg-base-300 dark:bg-base-400 flex flex-row gap-2 px-3 items-center rounded-lg mb-1;
-	@apply border-[1px] border-transparent;
+	@apply bg-base-300 dark:bg-base-400 flex flex-row gap-2 px-2 items-center rounded-lg mb-1;
+	@apply border-[1px] border-transparent cursor-pointer;
 }
 .item.active{
 	@apply border-primary;

package/src/index.js

@@ -321,7 +321,7 @@ export default{
     app.component('Grid', defineAsyncComponent(() => import("./components/Grid.vue")))
     app.component('Modal', defineAsyncComponent(() => import("./components/Modal.vue")))
     app.component('Modal2', defineAsyncComponent(() => import("./components/Modal2.vue")))
-    app.component('MonacoEditor', defineAsyncComponent(() => import("./components/MonacoEditor.vue")))
+    //app.component('MonacoEditor', defineAsyncComponent(() => import("./components/MonacoEditor.vue")))
     app.component('OTPField', defineAsyncComponent(() => import("./components/OTPField.vue")))
     app.component('PageBuilder', defineAsyncComponent(() => import("./components/PageBuilder.vue")))
     app.component('Radio', defineAsyncComponent(() => import("./components/Radio.vue")))

package/src/utils/helpers.mjs

@@ -177,6 +177,42 @@ const _applyClass = function(props, defaultClass = {}){
   return []
 }
 
+const fallbackCopyTextToClipboard = function(obj){
+  return new Promise((resolve, reject) => {
+    var textArea = document.createElement("textarea");
+    textArea.value = obj;
+    textArea.style.top = "0";
+    textArea.style.left = "0";
+    textArea.style.position = "fixed";
+    document.body.appendChild(textArea);
+    textArea.focus();
+    textArea.select();
+
+    try {
+      document.execCommand('copy')
+      document.body.removeChild(textArea);
+      resolve()
+    } catch (err) {
+      reject(err)
+    }
+  })
+}
+
+const copyToClipboard = function(obj){
+
+  if (!navigator.clipboard) {
+    return fallbackCopyTextToClipboard(obj);
+  }
+
+  return new Promise((resolve, reject) => {
+    navigator.clipboard.writeText(obj).then(() => {
+      resolve()
+    }, (err) => {
+      reject(err)
+    });
+  })
+}
+
 export {
   downsizeImage,
   uid,
@@ -187,7 +223,8 @@ export {
   getQueryString,
   accessNestedObject,
   mediaPrefixes,
-  _applyClass
+  _applyClass,
+  copyToClipboard
 }
 
 function observeInit(){

package/src/widgets/WebPageBuilder.vue

@@ -144,7 +144,8 @@
 											v-model="layout.headers"
 											:selected-item="currentItem"
 											@add="openSelector"
-											@change="saveLayout">
+											@change="saveLayout"
+											@item-paste="onLayoutItemPaste">
 							<template #default="{ item }">
 								<component :is="`${(item ?? {}).type}Item`" :item="item"
 													 @click="store.selectedComponent = [ item.uid ]"/>
@@ -161,7 +162,8 @@
 											v-model="layout.footers"
 											:selected-item="currentItem"
 											@add="openSelector"
-											@change="saveLayout">
+											@change="saveLayout"
+											@item-paste="onLayoutItemPaste">
 							<template #default="{ item }">
 								<component :is="`${(item ?? {}).type}Item`" :item="item"
 													 @click="store.selectedComponent = [ item.uid ]"/>
@@ -178,7 +180,8 @@
 											v-model="page.components"
 											:selected-item="currentItem"
 											@add="openSelector"
-											@change="save">
+											@change="save"
+											@item-paste="onItemPaste">
 
 							<template #default="{ item }">
 								<component :is="`${(item ?? {}).type}Item`" :item="item"
@@ -253,7 +256,7 @@
 						</template>
 						<template #end>
 							<div class="flex flex-row gap-4">
-								<CopyToClipboard :value="iframeSrc" @copied="toast('Nomor hp berhasil disalin')">
+								<CopyToClipboard :value="iframeSrc" @copied="toast($t('Copied'))">
 									<svg width="14" height="14" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M433.941 65.941l-51.882-51.882A48 48 0 0 0 348.118 0H176c-26.51 0-48 21.49-48 48v48H48c-26.51 0-48 21.49-48 48v320c0 26.51 21.49 48 48 48h224c26.51 0 48-21.49 48-48v-48h80c26.51 0 48-21.49 48-48V99.882a48 48 0 0 0-14.059-33.941zM352 32.491a15.88 15.88 0 0 1 7.431 4.195l51.882 51.883A15.885 15.885 0 0 1 415.508 96H352V32.491zM288 464c0 8.822-7.178 16-16 16H48c-8.822 0-16-7.178-16-16V144c0-8.822 7.178-16 16-16h80v240c0 26.51 21.49 48 48 48h112v48zm128-96c0 8.822-7.178 16-16 16H176c-8.822 0-16-7.178-16-16V48c0-8.822 7.178-16 16-16h144v72c0 13.2 10.8 24 24 24h72v240z"/></svg>
 								</CopyToClipboard>
 								<a type="button" class="w-[21px]" :href="iframeSrc" target="_blank">
@@ -403,7 +406,7 @@
 				</template>
 				<template #default="{ context }">
 					<div class="flex-1 p-5">
-						<MonacoEditor ref="monacoEditor" v-model="context.code"/>
+						<Textarea v-model="context.code" rows="10" ></Textarea>
 					</div>
 				</template>
 			</Modal>
@@ -467,7 +470,7 @@ export default{
 				enabled: true
 			})
 
-			obj.uid = md5(obj.type + new Date().getTime())
+			obj.uid = md5(obj.type + Math.random())
 
 			if([ 'headers', 'footers' ].includes(to)){
 				this.layout[to].push(obj)
@@ -724,11 +727,11 @@ export default{
 		}, 300),
 
 		saveLdjson(context){
-			const errors = this.$refs.monacoEditor.getErrors()
+			/*const errors = this.$refs.monacoEditor.getErrors()
 			if(errors){
 				this.alert('JSON is not valid', errors.map(_ => _.message).join("\n"))
 				return
-			}
+			}*/
 
 			'index' in context ?
 				this.page.ldjson[context.index] = context.code :
@@ -777,6 +780,29 @@ export default{
 			this.$refs.iframe.contentWindow.postMessage({ uid, data }, '*')
 		},
 
+		onLayoutItemPaste(items, currentItem, newItem){
+			this.onItemPaste(items, currentItem, newItem, true)
+		},
+
+		onItemPaste(items, currentItem, newItem, isLayout = false){
+
+			const setUid = (item) => {
+				item.uid = md5(newItem.type + Math.random())
+
+				if(Array.isArray(item.items)){
+					for(let subItem of item.items){
+						setUid(subItem)
+					}
+				}
+			}
+
+			setUid(newItem)
+			items.splice(items.indexOf(currentItem) + 1, 0, newItem)
+			this.store.selectedComponent = [ newItem.uid ]
+
+			isLayout ? this.saveLayout() : this.save()
+		},
+
 		findCompByUid(uid, components){
 
 			for(let i in components){