@mixd-id/web-scaffold 0.1.230406104 → 0.1.230406107

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.230406104",
+  "version": "0.1.230406107",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",
@@ -11,6 +11,7 @@
   "exports": {
     ".": "./src/index.js",
     "./themes/default": "./src/themes/default/index.js",
+    "./components/Modal.vue": "./src/components/Modal.vue",
     "./components/Modal2.vue": "./src/components/Modal2.vue",
     "./components/Textbox.vue": "./src/components/Textbox.vue",
     "./mixin/component": "./src/mixin/component.js",

package/src/components/Article.vue

@@ -10,7 +10,7 @@
 <script>
 
 import { componentMixin } from '../mixin/component';
-import { getSelection } from "../utils/selection";
+import {getSelection, restoreSelection, saveSelection} from "../utils/selection";
 
 export default{
 
@@ -24,6 +24,27 @@ export default{
 
 	methods: {
 
+		getSelection(){
+			const { text = '', href = '', target = '' } = saveSelection(this.$el)
+			return {
+				text,
+				href,
+				target
+			}
+		},
+
+		addLink(link){
+
+			restoreSelection()
+
+			document.execCommand("insertHTML", false,
+				"<a style='font-size:inherit;font-family:inherit;background-color:inherit' " +
+				"href=\"" + link.href + "\" " +
+				"target=\"" + link.target + "\">" +
+				link.text +
+				"</a>");
+		},
+
 		onInput(){
 			if(this.editable){
 				this.triggerUpdate()
@@ -198,13 +219,72 @@ export default{
 
 	mounted() {
 		if('edit-mode' in this.$route.query){
-			window.addEventListener('message', ({ data }) => {
+			window.addEventListener('message', (e) => {
+
+				const { data, source } = e
+
 				if(data.uid === this.uid){
 
-					const { action, type, value } = data.data
+					const { action, type, value } = data.data ?? {}
+
+					let result
 
 					switch(action){
 
+						case 'saveSelection':
+						case 'getSelection':
+							const sel = saveSelection(this.$el)
+							const { text, target, href } = sel
+							result = {
+								text,
+								target,
+								href
+							}
+							break
+
+						case 'restoreSelection':
+							restoreSelection()
+							break
+
+						case 'insertLink':
+							restoreSelection()
+
+							document.execCommand("insertHTML", false,
+								"<a style='font-size:inherit;font-family:inherit;background-color:inherit' " +
+								"href=\"" + value.href + "\" " +
+								"target=\"" + value.target + "\">" +
+								value.text +
+								"</a>");
+							break
+
+						case 'removeLink':
+							const { element } = getSelection(this.$el)
+
+							let a = element
+							while(a && a.tagName !== 'A'){
+								a = a.parentNode
+							}
+							if(a){
+								a.parentNode.replaceChild(element, a)
+							}
+							break
+
+						case 'insertImage':
+							const props = {}
+							if(value.width)
+								props.width = parseInt(value.width) + 'px'
+							if(value.height)
+								props.height = parseInt(value.height) + 'px'
+
+							let propHtml = []
+							for(let key in props){
+								propHtml.push(`${key}='${props[key]}'`)
+							}
+
+							document.execCommand("insertHTML", false,
+								"<img src=\"" + value.url + "\" " + propHtml.join(' ') + "/>");
+							break
+
 						case 'insertTable':
 							this.insertTable()
 							break
@@ -241,7 +321,9 @@ export default{
 
 					}
 
+					source.postMessage(result, '*')
 				}
+
 			})
 			this.editable = true
 		}

package/src/components/ListView.vue

@@ -359,7 +359,7 @@ export default{
 
           case 'create':
           case 'update':
-						if(Object.keys(items[0]).length <= 1 && Object.keys(items[0])[0] === 'uid'){
+						if(items[0] && Object.keys(items[0]).length <= 1 && Object.keys(items[0])[0] === 'uid'){
 							this.socketEmit2(this.src, {
 								columns:this.config.columns,
 								preset:{

package/src/components/Modal.vue

@@ -42,6 +42,7 @@
 let modals = []
 
 const registerModal = (modal) => {
+	if(modals.includes(modal)) return
 
 	modals.forEach((_) => {
 		_.isDisabled = 1
@@ -51,7 +52,6 @@ const registerModal = (modal) => {
 }
 
 const unRegisterModal = (modal) => {
-
 	modals = modals.filter((_) => _ !== modal)
 
 	if(modals.length > 0)
@@ -134,9 +134,11 @@ export default{
 		document.querySelector('.bW9k').addEventListener('click', this.onDismiss)
 		window.addEventListener('keydown', this.onKeyDown)
 
-		if(this.computedState){
-			this.setState(this.computedState)
-		}
+		this.$nextTick(() => {
+			if(this.computedState){
+				this.setState(this.computedState)
+			}
+		})
 	},
 
 	methods: {
@@ -220,7 +222,6 @@ export default{
 	@apply bg-base-400;
 	@apply border-[1px] border-text-50 z-20 flex max-h-[90vh];
 	@apply rounded-xl overflow-hidden;
-	transition:  all 300ms cubic-bezier(0.25, 1, 0.5, 1);
 }
 
 .modal form{

package/src/components/Modal2.vue

@@ -2,7 +2,7 @@
   <div>
     <Teleport to=".bW9k">
 			<div :class="computedClass" ref="modal" :style="computedStyle"
-					 :data-state="computedState ? 1 : 0">
+					 :data-state="!!computedState ? 1 : 0">
 				<form v-if="useForm" @submit.prevent="$emit('submit')">
 					<div class="modal-head">
 						<slot name="head" :context="context"></slot>
@@ -37,6 +37,7 @@
 let modals = []
 
 const registerModal = (modal) => {
+	if(modals.includes(modal)) return
 
 	modals.forEach((_) => {
 		_.isDisabled = 1
@@ -66,7 +67,10 @@ export default{
 			type: String,
 			default: 'bottom'
 		},
-		state: [ Number, Boolean, String ],
+		state: {
+			type: [ Number, Boolean, String ],
+			default: true
+		},
 		transition: { type: String, default: 'slideup' },
 		width: String,
 		useForm: {

package/src/components/Slider.vue

@@ -259,7 +259,7 @@ export default{
   }
 
   .slider>div:nth-child(1){
-    @apply absolute bg-base-300 rounded-lg;
+    @apply absolute bg-text-50 rounded-lg;
     height: .5rem;
     top: 50%;
     left: .75rem;
@@ -282,4 +282,4 @@ export default{
     touch-action: none;
   }
 
-</style>
+</style>

package/src/widgets/ArticleSetting.vue

@@ -22,6 +22,12 @@
 				<button class="p-3" type="button" ref="listBtn" @click="$refs.listContext.open($refs.listBtn)">
 					<svg width="14" height="14" class="fill-text-400 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M64 144c26.5 0 48-21.5 48-48s-21.5-48-48-48S16 69.5 16 96s21.5 48 48 48zM192 64c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zm0 160c-17.7 0-32 14.3-32 32s14.3 32 32 32H480c17.7 0 32-14.3 32-32s-14.3-32-32-32H192zM64 464c26.5 0 48-21.5 48-48s-21.5-48-48-48s-48 21.5-48 48s21.5 48 48 48zm48-208c0-26.5-21.5-48-48-48s-48 21.5-48 48s21.5 48 48 48s48-21.5 48-48z"/></svg>
 				</button>
+				<button class="p-3" type="button" @click="createImage">
+					<svg width="14" height="14" class="fill-text-400 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M152 120c-26.51 0-48 21.49-48 48s21.49 48 48 48s48-21.49 48-48S178.5 120 152 120zM447.1 32h-384C28.65 32-.0091 60.65-.0091 96v320c0 35.35 28.65 64 63.1 64h384c35.35 0 64-28.65 64-64V96C511.1 60.65 483.3 32 447.1 32zM463.1 409.3l-136.8-185.9C323.8 218.8 318.1 216 312 216c-6.113 0-11.82 2.768-15.21 7.379l-106.6 144.1l-37.09-46.1c-3.441-4.279-8.934-6.809-14.77-6.809c-5.842 0-11.33 2.529-14.78 6.809l-75.52 93.81c0-.0293 0 .0293 0 0L47.99 96c0-8.822 7.178-16 16-16h384c8.822 0 16 7.178 16 16V409.3z"/></svg>
+				</button>
+				<button class="p-3" type="button" @click="insertLink">
+					<svg width="14" height="14" class="fill-text-400 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M314.222 197.78c51.091 51.091 54.377 132.287 9.75 187.16-6.242 7.73-2.784 3.865-84.94 86.02-54.696 54.696-143.266 54.745-197.99 0-54.711-54.69-54.734-143.255 0-197.99 32.773-32.773 51.835-51.899 63.409-63.457 7.463-7.452 20.331-2.354 20.486 8.192a173.31 173.31 0 0 0 4.746 37.828c.966 4.029-.272 8.269-3.202 11.198L80.632 312.57c-32.755 32.775-32.887 85.892 0 118.8 32.775 32.755 85.892 32.887 118.8 0l75.19-75.2c32.718-32.725 32.777-86.013 0-118.79a83.722 83.722 0 0 0-22.814-16.229c-4.623-2.233-7.182-7.25-6.561-12.346 1.356-11.122 6.296-21.885 14.815-30.405l4.375-4.375c3.625-3.626 9.177-4.594 13.76-2.294 12.999 6.524 25.187 15.211 36.025 26.049zM470.958 41.04c-54.724-54.745-143.294-54.696-197.99 0-82.156 82.156-78.698 78.29-84.94 86.02-44.627 54.873-41.341 136.069 9.75 187.16 10.838 10.838 23.026 19.525 36.025 26.049 4.582 2.3 10.134 1.331 13.76-2.294l4.375-4.375c8.52-8.519 13.459-19.283 14.815-30.405.621-5.096-1.938-10.113-6.561-12.346a83.706 83.706 0 0 1-22.814-16.229c-32.777-32.777-32.718-86.065 0-118.79l75.19-75.2c32.908-32.887 86.025-32.755 118.8 0 32.887 32.908 32.755 86.025 0 118.8l-45.848 45.84c-2.93 2.929-4.168 7.169-3.202 11.198a173.31 173.31 0 0 1 4.746 37.828c.155 10.546 13.023 15.644 20.486 8.192 11.574-11.558 30.636-30.684 63.409-63.457 54.733-54.735 54.71-143.3-.001-197.991z"/></svg>
+				</button>
 				<button class="p-3" type="button" @click="insertTable">
 					<svg width="14" height="14" class="fill-text-400 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M464 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V80c0-26.51-21.49-48-48-48zM224 416H64v-96h160v96zm0-160H64v-96h160v96zm224 160H288v-96h160v96zm0-160H288v-96h160v96z"/></svg>
 				</button>
@@ -216,6 +222,94 @@
 			</div>
 		</ContextMenu>
 
+		<Modal ref="linkModal" width="360" height="400" dismissable="true">
+			<template v-slot:head>
+				<div class="relative p-5">
+					<h3>Add Link</h3>
+					<div class="absolute top-0 right-0 p-2">
+						<button type="button" class="p-2" @click="$refs.linkModal.close()">
+							<svg width="24" height="24" viewBox="0 0 24 24" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg">
+								<path d="M6.53034 5.46965C6.23745 5.17676 5.76257 5.17676 5.46968 5.46965C5.17679 5.76255 5.17679 6.23742 5.46968 6.53031L10.9393 12L5.46967 17.4697C5.17678 17.7626 5.17678 18.2374 5.46967 18.5303C5.76256 18.8232 6.23744 18.8232 6.53033 18.5303L12 13.0606L17.4697 18.5303C17.7626 18.8232 18.2375 18.8232 18.5303 18.5303C18.8232 18.2374 18.8232 17.7626 18.5303 17.4697L13.0607 12L18.5303 6.53032C18.8232 6.23743 18.8232 5.76256 18.5303 5.46966C18.2374 5.17677 17.7626 5.17677 17.4697 5.46966L12 10.9393L6.53034 5.46965Z"/>
+							</svg>
+						</button>
+					</div>
+				</div>
+			</template>
+			<template v-slot:foot="{ context }">
+				<div class="p-5 flex flex-row gap-3">
+					<Button variant="secondary" class="w-[100px]" @click="removeLink">Remove</Button>
+					<Button class="flex-1" @click="addLink(context)">Add Link</Button>
+				</div>
+			</template>
+			<template #default="{ context }">
+				<div class="flex-1 flex flex-col gap-5 p-5">
+					<div>
+						<label>Text</label>
+						<Textbox class="w-full mt-1" v-model="context.text" />
+					</div>
+					<div>
+						<label>Href</label>
+						<Textbox class="w-full mt-1" v-model="context.href" />
+					</div>
+					<div>
+						<label>Target</label>
+						<Dropdown class="w-[150px] mt-1" v-model="context.target">
+							<option value="">_self</option>
+							<option value="_blank">_blank</option>
+							<option value="_parent">_parent</option>
+							<option value="_top">_top</option>
+						</Dropdown>
+					</div>
+				</div>
+			</template>
+		</Modal>
+
+		<Modal ref="imageModal" width="360" height="420" dismissable="true">
+			<template v-slot:head>
+				<div class="relative p-5">
+					<h3>Add Image</h3>
+					<div class="absolute top-0 right-0 p-2">
+						<button type="button" class="p-2" @click="$refs.imageModal.close()">
+							<svg width="24" height="24" viewBox="0 0 24 24" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg">
+								<path d="M6.53034 5.46965C6.23745 5.17676 5.76257 5.17676 5.46968 5.46965C5.17679 5.76255 5.17679 6.23742 5.46968 6.53031L10.9393 12L5.46967 17.4697C5.17678 17.7626 5.17678 18.2374 5.46967 18.5303C5.76256 18.8232 6.23744 18.8232 6.53033 18.5303L12 13.0606L17.4697 18.5303C17.7626 18.8232 18.2375 18.8232 18.5303 18.5303C18.8232 18.2374 18.8232 17.7626 18.5303 17.4697L13.0607 12L18.5303 6.53032C18.8232 6.23743 18.8232 5.76256 18.5303 5.46966C18.2374 5.17677 17.7626 5.17677 17.4697 5.46966L12 10.9393L6.53034 5.46965Z"/>
+							</svg>
+						</button>
+					</div>
+				</div>
+			</template>
+			<template #foot="{ context }">
+				<div class="p-5">
+					<Button class="w-full" @click="addImage(context)" :state="!context.src ? -1 : 1">Add Image</Button>
+				</div>
+			</template>
+			<template #default="{ context }">
+				<div class="flex-1 flex flex-col gap-5 p-5">
+					<div>
+						<Image class="min-h-[100px] bg-base-300 rounded-xl" ref="image" :src="context.src" editable="true"
+									 @click="$refs.image.edit()" @change="(_, file) => context.src = file">
+							<template #empty="{ instance }">
+								<div class="absolute right-0 top-0 bottom-0 left-0 flex items-center justify-center">
+									Click to Add Image...
+								</div>
+							</template>
+						</Image>
+					</div>
+					<div class="grid grid-cols-2 gap-5">
+						<div>
+							<label>Width</label>
+							<Textbox class="mt-1" v-model="context.width" maxlength="3" />
+						</div>
+						<div>
+							<label>Height</label>
+							<Textbox class="mt-1" v-model="context.height" maxlength="3" />
+						</div>
+					</div>
+					<br />
+					<br />
+				</div>
+			</template>
+		</Modal>
+
 		<ComponentSetting :item="item"
 											:view-type="viewType"
 											:view-types="viewTypes"
@@ -227,10 +321,16 @@
 
 <script>
 
+import {restoreSelection} from "../utils/selection";
+import {downsizeImage} from "../utils/helpers.mjs";
+import axios from "axios";
+
 export default{
 
 	emits: [ 'change', 'postMessageToIframe' ],
 
+	inject: [ 'alert', 'postIframe' ],
+
 	props: {
 
 		item: {
@@ -246,6 +346,64 @@ export default{
 
 	methods: {
 
+		createImage(){
+			this.postIframe({ uid:this.item.uid, data: { action: 'saveSelection' } })
+				.then(_ => {
+					this.$refs.imageModal.open()
+				})
+		},
+
+		async addImage(image){
+
+			this.postIframe({ uid:this.item.uid, data: { action: 'restoreSelection' }})
+				.then(_ => {
+
+					downsizeImage(image.src, image.width ?? 300)
+						.then(async (blob) => {
+
+							const data = new FormData()
+							data.append('image', blob)
+
+							try{
+								const res = await axios.post(import.meta.env.VITE_API_HOST + '/import/image',
+									data,
+									{
+										headers: {
+											"Content-Type": "multipart/form-data",
+										},
+									}
+								)
+								image.url = res.data.url
+
+								const value = JSON.parse(JSON.stringify(image))
+								await this.postIframe({ uid:this.item.uid, data:{ action: 'insertImage', value }})
+							}
+							catch(e){
+								this.alert(e)
+							}
+						})
+						.finally(_ => {
+							this.$refs.imageModal.close()
+						})
+
+
+					/*const props = {}
+					if(this.newImage.width)
+						props.width = this.newImage.width
+					if(this.newImage.height)
+						props.height = this.newImage.height
+
+					let propHtml = []
+					for(let key in props){
+						propHtml.push(`${key}='${props[key]}'`)
+					}
+
+					document.execCommand("insertHTML", false,
+						"<img src=\"" + this.newImage.base64 + "\" " + propHtml.join(' ') + "/>");*/
+
+				})
+		},
+
 		format(type, value){
 
 			switch(type){
@@ -259,6 +417,40 @@ export default{
 			}
 		},
 
+		insertLink(){
+			this.postIframe({
+				uid:this.item.uid,
+				data: {
+					action: 'getSelection'
+				}
+			})
+				.then(res => {
+					this.$refs.linkModal.open(res)
+				})
+		},
+
+		addLink(link){
+			link = JSON.parse(JSON.stringify(link))
+			this.postIframe({
+				uid:this.item.uid,
+				data: {
+					action: 'insertLink',
+					value: link
+				}
+			})
+			this.$refs.linkModal.close()
+		},
+
+		removeLink(){
+			this.postIframe({
+				uid:this.item.uid,
+				data: {
+					action: 'removeLink'
+				}
+			})
+			this.$refs.linkModal.close()
+		},
+
 		insertTable(){
 			this.$emit('postMessageToIframe', this.item.uid, { action:'insertTable' })
 		},

package/src/widgets/ComponentSetting.vue

@@ -444,19 +444,6 @@
 
 		</div>
 
-		<div class="h-[1px] bg-text-50"></div>
-
-		<div class="flex flex-row items-center gap-4">
-			<label class="flex-1 text-text-400">ID</label>
-			<Textbox v-model="item.props.id" :maxlength="10" @keyup.enter="apply" class="w-[120px]"/>
-		</div>
-
-		<div v-if="item.uid" class="h-[1px] bg-text-50"></div>
-
-		<div v-if="item.uid" class="py-6 text-center">
-			<small class="text-text-400">uid: {{ item.uid }}</small>
-		</div>
-
 		<br />
 		<br />
 

package/src/widgets/WebPageBuilder.vue

@@ -242,6 +242,7 @@
 						<option value="75%">75%</option>
 						<option value="50%">50%</option>
 					</Dropdown>
+
 					<Textbox :readonly="1" :value="iframeSrc" class="w-full">
 						<template #start>
 							<button @click="reloadIframe" class="p-3">
@@ -511,6 +512,7 @@ export default{
 
 					this.page = page
 					this.layouts = layouts
+					this.iframeSrc = import.meta.env.VITE_WEB_HOST + '/' + (this.page.path ?? '')
 					this.$nextTick(() => this.resize())
 				})
 				.catch((err) => {
@@ -532,6 +534,19 @@ export default{
 			}
 		},
 
+		postIframe(data){
+			return new Promise((resolve, reject) => {
+				const handleResponse = (e) => {
+					window.removeEventListener('message', handleResponse)
+					resolve(e.data)
+				}
+
+				window.addEventListener('message', handleResponse)
+
+				this.$refs.iframe.contentWindow.postMessage(data, '*')
+			})
+		},
+
 		resize(){
 
 			const transformOrigin = this.store.viewType === '' ? 'center top' : '0 0'
@@ -640,11 +655,13 @@ export default{
 			if(!component.instance)
 				component.instance = {}
 
+			const compUid = '_' + component.uid.substring(0, 4) + ' '
+
 			Object.assign(component.instance, {
 				type: component.type,
 				uid: component.uid,
 
-				class: this.compClasses.map(key => {
+				class: compUid + this.compClasses.map(key => {
 					return Array.isArray(component.props[key]) ? component.props[key].join(' ') : ''
 				})
 					.filter(_ => _)
@@ -686,6 +703,7 @@ export default{
 			this.socketEmit2('page.save', this.page)
 				.then(() => {
 					if(reload){
+						this.iframeSrc = import.meta.env.VITE_WEB_HOST + '/' + (this.page.path ?? '')
 						this.reloadIframe()
 					}
 				})
@@ -765,6 +783,10 @@ export default{
 					}
 				}
 			}
+		},
+
+		getPage(){
+			return this.page
 		}
 
 	},
@@ -848,10 +870,6 @@ export default{
 
 		},
 
-		iframeSrc(){
-			return import.meta.env.VITE_WEB_HOST + '/' + (this.page.path ?? '')
-		},
-
 		layout(){
 			if(this.page){
 				return this.layouts.find((_) => _.id === parseInt(this.page.layoutId))
@@ -889,6 +907,7 @@ export default{
 	data(){
 		return {
 			iframeStyle: {},
+			iframeSrc: '',
 			page: null,
 			layouts: [],
 			tabItems: [
@@ -1019,7 +1038,7 @@ export default{
 
 		window.addEventListener('message', (event) => {
 
-			const { uid, type, value } = event.data
+			const { uid, type, value } = event.data ?? {}
 
 			let comp
 			let compType
@@ -1074,7 +1093,9 @@ export default{
 		return {
 			imageUrl: this.imageUrl,
 			imageSrc: this.imageSrc,
-			store: this.store
+			store: this.store,
+			postIframe: this.postIframe,
+			getPage: this.getPage
 		}
 	},
 

package/src/widgets/WebPageSelector.vue

@@ -52,6 +52,8 @@ import groupBy from "lodash/groupBy";
 
 export default{
 
+	emits: [ 'save' ],
+
 	inject: [ 'alert', 'socketEmit2' ],
 
 	props: {
@@ -96,7 +98,7 @@ export default{
 		async create(){
 			try{
 				const res = await this.socketEmit2('page.create', this.selectedTemplate.page)
-				this.$router.push({ name: 'WebPageEdit', params: { uid: res.uid } })
+				this.$emit('save', res)
 				this.close()
 			}
 			catch(err){