@mixd-id/web-scaffold 0.1.230406155 → 0.1.230406156

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@mixd-id/web-scaffold",
   "private": false,
-  "version": "0.1.230406155",
+  "version": "0.1.230406156",
   "scripts": {
     "dev": "vite serve",
     "build": "vite build",

package/src/components/Image.vue

@@ -2,14 +2,17 @@
   <div :class="compClass" @click="onClick" @mousemove="onMouseMove" @mousedown="onMouseDown">
 
 		<slot v-if="$slots['empty'] && status === 0" name="empty" :instance="this"></slot>
-		<slot v-else-if="$slots['loading'] && status === 1" name="loading" :instance="this"></slot>
+
+    <slot v-else-if="$slots['loading'] && status === 1" name="loading" :instance="this"></slot>
 		<div v-else-if="!$slots['loading'] && status === 1 && spinnerType === 'spinner'" :class="$style.loading">
 			<svg class="animate-spin aspect-square w-[15%] min-w-[14px] text-primary" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
 		</div>
+
 		<slot v-else-if="$slots['error'] && status === 3" name="error" :instance="this"></slot>
+
 		<img v-else :class="computedItemClass" :src="actualSrc" ref="img" />
 
-		<slot :instance="this"></slot>
+		<slot></slot>
 
 		<input v-if="Boolean(editable)" class="hidden" type="file" accept="image/*" ref="file" @change="onChange"/>
 
@@ -67,7 +70,7 @@ export default{
 
 		actualSrc(){
 			if(typeof window !== 'undefined'){
-				return this.mediaSrc[this.$screenPrefix]
+				return this.mediaSrc[this.$screenPrefix.value]
 			}
 		},
 
@@ -117,6 +120,12 @@ export default{
 
 	methods:{
 
+    reset(){
+      this.$refs.file.value = null
+      this.status = 0
+      this.$emit('change', null, null)
+    },
+
 		onResize(){
 			this.loadSrc()
 		},
@@ -140,19 +149,18 @@ export default{
 		async loadSrc(){
 
 			// src: String | Array | File
-
 			if(!this.visibled){
 				return
 			}
 
-			if(this.$screenPrefix in this.mediaSrc){
+			if(this.$screenPrefix.value in this.mediaSrc){
 				return
 			}
 
 			if(typeof this.src === 'string') {
 
 				if (this.src.startsWith('data:image')) {
-					this.mediaSrc[this.$screenPrefix] = this.src
+					this.mediaSrc[this.$screenPrefix.value] = this.src
 					this.status = 2
 				}
 				else{
@@ -183,12 +191,12 @@ export default{
 						img.addEventListener('load', () => {
 							if(img.getAttribute('data-src') !== this.src) return
 							this.status = 2
-							this.mediaSrc[this.$screenPrefix] = img.src
+							this.mediaSrc[this.$screenPrefix.value] = img.src
 						})
 						img.addEventListener('error', (err) => {
 							if(img.getAttribute('data-src') !== this.src) return
 							this.status = 3
-							this.mediaSrc[this.$screenPrefix] = this.defaultSrc
+							this.mediaSrc[this.$screenPrefix.value] = this.defaultSrc
 						})
 						img.src = imgSrc
 						img.setAttribute('data-src', this.src)
@@ -215,11 +223,11 @@ export default{
 					var img = new Image()
 					img.addEventListener('load', () => {
 						this.status = 2
-						this.mediaSrc[this.$screenPrefix] = img.src
+						this.mediaSrc[this.$screenPrefix.value] = img.src
 					})
 					img.addEventListener('error', (err) => {
 						this.status = 3
-						this.mediaSrc[this.$screenPrefix] = this.defaultSrc
+						this.mediaSrc[this.$screenPrefix.value] = this.defaultSrc
 					})
 					img.src = imgSrc
 					this.status = 1
@@ -230,12 +238,12 @@ export default{
 
 				reader.addEventListener('load', () => {
 					this.status = 2
-					this.mediaSrc[this.$screenPrefix] = reader.result
+					this.mediaSrc[this.$screenPrefix.value] = reader.result
 				}, false)
 
 				reader.addEventListener('error', () => {
 					this.status = 3
-					this.mediaSrc[this.$screenPrefix] = this.defaultSrc
+					this.mediaSrc[this.$screenPrefix.value] = this.defaultSrc
 				})
 
 				reader.readAsDataURL(this.src)

package/src/widgets/ImageSetting.vue

@@ -3,15 +3,24 @@
 
 		<div class="flex flex-col gap-1">
 			<label class="flex-1 text-text-400">Src</label>
-			<Image ref="image"
+			<Image :ref="`image${index}`"
 						 v-for="(_viewType, index) in viewTypes"
 						 v-show="_viewType.value === viewType"
 					:src="imageSrc(item.props.src[index])"
-				 	class="w-[120px] bg-text-50 rounded-lg"
+				 	class="w-[120px] min-h-[60px] bg-text-50 rounded-lg"
 					:editable="true"
-					 @click="$refs.image[index].edit()"
-					 @change="(base64, file) => { item.props.src[index] = file; apply() }"
-				/>
+					 @click="$refs[`image${index}`][0].edit()"
+					 @change="(base64, file) => { item.props.src[index] = file; apply() }">
+        <button type="button" class="absolute top-1 right-1 rounded-full bg-white" v-if="item.props.src[index]"
+                @click.stop="$refs[`image${index}`][0].reset()">
+          <svg width="19" height="19" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"/></svg>
+        </button>
+        <template #empty>
+          <div class="flex items-center justify-center absolute left-0 top-0 right-0 bottom-0">
+            <label class="text-text-300">Upload</label>
+          </div>
+        </template>
+      </Image>
 		</div>
 
 		<div>

package/src/widgets/TableSetting.vue

@@ -117,8 +117,6 @@
 						<Textbox v-model="context.item[header.key]" />
 					</div>
 
-					<pre>{{ context.item }}</pre>
-
 				</div>
 			</template>
 		</Modal>

package/src/widgets/WebComponentSelector.vue

@@ -18,7 +18,7 @@
 		<template #default="{ context }">
 			<div class="flex-1">
 
-				<div v-if="tabIndex === 1" class="p-6 grid grid-cols-3 gap-6">
+				<div v-if="tabIndex === 1" class="p-6 grid grid-cols-3 gap-4">
 					<button v-for="component in groupedComponents['Components']"
 									type="button"
 									@click="apply(component.type)"
@@ -27,7 +27,7 @@
 					</button>
 				</div>
 
-				<div v-if="tabIndex === 2" class="p-6 grid grid-cols-2 gap-6">
+				<div v-if="tabIndex === 2" class="p-6 grid grid-cols-3 gap-4">
 					<button v-for="component in groupedComponents['Containers']"
 									type="button"
 									@click="apply(component.type)"
@@ -36,7 +36,7 @@
 					</button>
 				</div>
 
-				<div v-if="tabIndex === 3" class="p-6 grid gap-6">
+				<div v-if="tabIndex === 3" class="p-6 grid grid-cols-3 gap-4">
 					<button v-for="component in groupedComponents['Widgets']"
 									type="button"
 									@click="apply(component.type)"
@@ -117,7 +117,7 @@ export default{
 }
 
 .compSelectorBtn{
-	@apply block w-full rounded-lg p-3 text-left;
+	@apply block w-full rounded-lg p-3 text-left border-[1px] border-text-50;
 	@apply bg-base-400 hover:bg-base-300 dark:bg-base-400 dark:hover:bg-base-500;
 }
 

package/src/widgets/WebPageBuilder.vue

@@ -323,12 +323,14 @@
 			<div class="px-4 bg-base-300 pt-2 relative">
 				<Tabs v-model="store.viewType" :items="viewTypes" variant="minimal">
 					<template #tab="{ item }">
-						<div v-if="item.value === ''" class="px-6 p-2 border-[1px] border-b-0 relative top-[1px] rounded-t-md"
+						<div v-if="item.value === ''" class="px-6 p-2 border-[1px] border-b-0 relative top-[1px] rounded-t-md overflow-hidden"
 							:class="store.viewType === item.value ? 'bg-base-400 border-text-50' : 'border-transparent'">
+              <div v-if="store.viewType === item.value" class="absolute top-0 left-0 right-0 h-[2px] bg-primary"></div>
 							Mobile
 						</div>
-						<div v-else-if="item.value === 'md:'" class="px-6 p-2 border-[1px] border-b-0 relative top-[1px] rounded-t-md"
+						<div v-else-if="item.value === 'md:'" class="px-6 p-2 border-[1px] border-b-0 relative top-[1px] rounded-t-md overflow-hidden"
 								 :class="store.viewType === item.value ? 'bg-base-400 border-text-50' : 'border-transparent'">
+              <div v-if="store.viewType === item.value" class="absolute top-0 left-0 right-0 h-[2px] bg-primary"></div>
 							Tablet
 						</div>
 					</template>