@mixd-id/web-scaffold 0.1.230406110 → 0.1.230406112

package/package.json

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

package/src/components/Ahref.vue

@@ -1,31 +1,199 @@
 <template>
-	<a v-if="isExternalLink" :href="href" :target="target">
-		<slot />
+	<a v-if="isExternalLink" :href="href" :target="target" :class="compClass">
+		<slot>{{ text }}</slot>
 	</a>
-	<router-link v-else :to="href" :target="target">
-		<slot />
+	<router-link v-else :to="href" :target="target" :class="compClass">
+		<slot>{{ text }}</slot>
 	</router-link>
 </template>
 
 <script>
 
+import {componentMixin} from "../mixin/component";
+
 export default {
 
+	mixins: [ componentMixin ],
+
 	props: {
-		href: String,
-		target: String
+
+		href: {
+			type: String,
+			default: ''
+		},
+
+		target: String,
+
+		text: String,
+
+		variant: {
+			type: [ String, Number ],
+			default: "primary" // primary|secondary|outline, default:primary
+		},
 	},
 
 	computed: {
 
 		isExternalLink() {
 			return typeof this.href === 'string' && this.href.indexOf('://') > 0
-		}
+		},
+
+		compClass(){
+			return [
+				this.$style.button,
+				this.$style['button-' + this.variant]
+			]
+				.filter(_ => _)
+				.join(' ')
+		},
 	},
 }
 </script>
 
 <style module>
 
+.button{
+	@apply p-2 h-[var(--h-cp)];
+	@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
+}
+.button:disabled{
+	@apply opacity-60;
+}
+.button:active{
+	@apply top-[1px] left-[1px] relative;
+}
+
+.button-primary{
+	@apply bg-primary-500 text-white rounded-lg;
+	box-shadow: 0 2px 1px rgba(0, 0, 0, .05);
+	outline: solid 1px rgb(var(--primary-700));
+	border: solid 1px rgb(var(--primary-400));
+}
+.button-primary:focus{
+	outline-color: rgb(var(--primary-800));
+	border-color: rgb(var(--primary-600));
+}
+.button-primary:hover{
+	@apply bg-primary-600;
+	outline-color: rgb(var(--primary-800))
+}
+.button-primary:disabled{
+	@apply bg-primary-500 opacity-50 top-0 left-0 cursor-not-allowed;
+	@apply top-0 left-0;
+	outline: solid 1px rgb(var(--primary-700));
+}
+.button-primary *{
+	@apply text-white fill-white;
+}
+.button-primary.loading *{
+	@apply fill-transparent
+}
+.button-primary .svgBg{
+	stroke: #fff;
+	stroke-opacity: 25%;
+}
+.button-primary .svgHg{
+	fill: #fff;
+	fill-opacity: 75%;
+}
+
+.button-outline{
+	@apply bg-transparent text-primary-500;
+	outline: solid 1px rgb(var(--primary-700));
+}
+.button-outline:hover{
+	outline-color: rgb(var(--primary-800))
+}
+.button-outline:disabled{
+	@apply opacity-50 top-0 left-0 cursor-not-allowed;
+	@apply text-text border-primary-500;
+}
+.button-outline *{
+	@apply text-primary-500 fill-primary-500;
+}
+.button-outline.loading *{
+	@apply fill-transparent
+}
+.button-outline .svgBg{
+	stroke: rgb(var(--primary-600));
+	stroke-opacity: 50%;
+}
+.button-outline .svgHg{
+	fill: rgb(var(--primary));
+	fill-opacity: 100%;
+}
+
+.button-secondary{
+	@apply bg-secondary text-text-500 rounded-lg;
+	box-shadow: 0 2px 1px rgba(0, 0, 0, .05);
+	outline: solid 1px rgb(var(--secondary-700));
+	border: solid 1px rgb(var(--secondary-400));
+}
+.button-secondary:hover{
+	@apply bg-secondary-600;
+	outline-color: rgb(var(--secondary-800))
+}
+.button-secondary:disabled{
+	@apply bg-secondary-500 opacity-50 top-0 left-0 cursor-not-allowed;
+	outline: solid 1px rgb(var(--secondary-700));
+}
+.button-secondary *{
+	@apply text-text-500 fill-white;
+}
+.button-secondary.loading *{
+	@apply fill-transparent
+}
+.button-secondary .svgBg{
+	stroke: rgb(var(--text-400));
+	stroke-opacity: 25%;
+}
+.button-secondary .svgHg{
+	fill: rgb(var(--text-500));
+	fill-opacity: 75%;
+}
+
+.button-red{
+	@apply bg-red-500 text-white rounded-md border-[2px] border-red-500;
+}
+.button-red:hover{
+	@apply bg-red-600 border-red-600;
+}
+.button-red:disabled{
+	@apply bg-red-500 border-red-500 opacity-50 top-0 left-0 cursor-not-allowed;
+}
+.button-red *{
+	@apply text-white fill-white;
+}
+.button-red.loading *{
+	@apply fill-transparent
+}
+.button-red .svgBg{
+	@apply stroke-red-400;
+	stroke-opacity: 50%;
+}
+.button-red .svgHg{
+	@apply fill-text-500;
+	fill-opacity: 100%;
+}
+
+.button-minimal{
+	@apply border-[2px] border-transparent;
+}
+.button-minimal:hover{
+}
+.button-minimal .svgBg{
+	stroke: rgb(var(--text-500));
+	stroke-opacity: 25%;
+}
+.button-minimal .svgHg{
+	fill: rgb(var(--text));
+	fill-opacity: 75%;
+}
 
 </style>

package/src/components/Testimonial.vue

@@ -0,0 +1,86 @@
+<template>
+	<div :class="$style.comp">
+		<div :class="$style.head">
+			<h2 v-if="title">{{ title }}</h2>
+			<p v-if="description" v-html="description"></p>
+		</div>
+		<div :class="$style.container">
+			<div v-for="item in items" :class="$style.item">
+				<div class="flex flex-col gap-2 flex-1">
+					<div class="flex justify-center">
+						<svg width="19" height="19" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M464 256h-80v-64c0-35.3 28.7-64 64-64h8c13.3 0 24-10.7 24-24V56c0-13.3-10.7-24-24-24h-8c-88.4 0-160 71.6-160 160v240c0 26.5 21.5 48 48 48h128c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48zm-288 0H96v-64c0-35.3 28.7-64 64-64h8c13.3 0 24-10.7 24-24V56c0-13.3-10.7-24-24-24h-8C71.6 32 0 103.6 0 192v240c0 26.5 21.5 48 48 48h128c26.5 0 48-21.5 48-48V304c0-26.5-21.5-48-48-48z"/></svg>
+					</div>
+					<p>{{ item.text }}</p>
+				</div>
+				<div class="h-[1px] bg-gray-200"></div>
+				<div class="flex flex-row items-center gap-2">
+					<Image class="w-[36px] aspect-square"
+								 :src="imageSrc(item.imageUrl)" />
+					<div class="flex-1 flex flex-col leading-tight">
+						<div class="text-sm text-ellipsis overflow-hidden whitespace-nowrap">
+							{{ item.name }}
+						</div>
+						<small class="text-gray-500">
+							{{ dayjs(item.createdAt).format('D MMM YY') }}
+						</small>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+
+import { componentMixin } from '../mixin/component';
+import dayjs from "dayjs";
+
+export default{
+
+	mixins: [ componentMixin ],
+
+	props: {
+
+		title: String,
+
+		description: String,
+
+		items: Array
+
+	},
+
+	methods: {
+
+		dayjs
+
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+	@apply flex-1 flex flex-col gap-4 bg-gray-100 overflow-hidden;
+}
+
+.head{
+	@apply text-center md:text-left;
+}
+
+.container{
+	@apply overflow-x-auto flex flex-row gap-8 md:gap-10 p-1;
+}
+.container::-webkit-scrollbar {
+	display: none;
+}
+
+.item{
+	@apply min-w-[200px] max-w-[200px] bg-white p-6 pb-3 shadow-md flex flex-col gap-2;
+}
+.item p{
+	@apply text-lg font-serif max-h-[225px] overflow-hidden;
+}
+
+</style>

package/src/components/TreeViewItem.vue

@@ -113,11 +113,12 @@ export default{
 
 			const rect = this.$el.getBoundingClientRect()
 			const startX = e.clientX
+			const startY = e.clientY
 
 			const cloned = this.$el.cloneNode(true)
 			cloned.style.position = 'absolute'
 			cloned.style.left = rect.x + "px"
-			cloned.style.top = (e.clientY - 10) + "px"
+			cloned.style.top = rect.y + "px"
 			cloned.style.width = this.$el.clientWidth + "px"
 			cloned.style.pointerEvents = 'none'
 			document.body.appendChild(cloned)
@@ -129,8 +130,9 @@ export default{
 
 			const mouseMove = (e) => {
 				const distanceX = e.clientX - startX
+				const distanceY = e.clientY - startY
 				cloned.style.left = (rect.x + distanceX) + "px"
-				cloned.style.top = (e.clientY - 10) + "px"
+				cloned.style.top = (rect.y + distanceY) + "px"
 			}
 
 			const mouseUp = (e) => {

package/src/index.js

@@ -340,6 +340,7 @@ export default{
     app.component('SplitPane', defineAsyncComponent(() => import("./components/SplitPane.vue")))
     app.component('Table', defineAsyncComponent(() => import("./components/Table.vue")))
     app.component('TabView', defineAsyncComponent(() => import("./components/TabView.vue")))
+    app.component('Testimonial', defineAsyncComponent(() => import("./components/Testimonial.vue")))
     app.component('TextBlock', defineAsyncComponent(() => import("./components/TextBlock.vue")))
     app.component('TextEditor', defineAsyncComponent(() => import("./components/TextEditor.vue")))
     app.component('PaddingBox', defineAsyncComponent(() => import("./components/PaddingBox.vue")))
@@ -354,6 +355,8 @@ export default{
     app.component('BlockSetting', defineAsyncComponent(() => import("./widgets/BlockSetting.vue")))
     app.component('BoxItem', defineAsyncComponent(() => import("./widgets/BoxItem.vue")))
     app.component('BoxSetting', defineAsyncComponent(() => import("./widgets/BoxSetting.vue")))
+    app.component('AhrefItem', defineAsyncComponent(() => import("./widgets/AhrefItem.vue")))
+    app.component('AhrefSetting', defineAsyncComponent(() => import("./widgets/AhrefSetting.vue")))
     app.component('ButtonItem', defineAsyncComponent(() => import("./widgets/ButtonItem.vue")))
     app.component('ButtonSetting', defineAsyncComponent(() => import("./widgets/ButtonSetting.vue")))
     app.component('CarouselItem', defineAsyncComponent(() => import("./widgets/CarouselItem.vue")))
@@ -390,6 +393,8 @@ export default{
     app.component('StyleSetting', defineAsyncComponent(() => import("./widgets/StyleSetting.vue")))
     app.component('TableItem', defineAsyncComponent(() => import("./widgets/TableItem.vue")))
     app.component('TableSetting', defineAsyncComponent(() => import("./widgets/TableSetting.vue")))
+    app.component('TestimonialItem', defineAsyncComponent(() => import("./widgets/TestimonialItem.vue")))
+    app.component('TestimonialSetting', defineAsyncComponent(() => import("./widgets/TestimonialSetting.vue")))
     app.component('TextBlockItem', defineAsyncComponent(() => import("./widgets/TextBlockItem.vue")))
     app.component('TextBlockSetting', defineAsyncComponent(() => import("./widgets/TextBlockSetting.vue")))
   }

package/src/mixin/component.js

@@ -65,5 +65,14 @@ export const componentMixin = {
       ]
     }
 
+  },
+
+  methods: {
+
+    imageSrc(src){
+      return typeof src === 'string' ?
+          import.meta.env.VITE_IMAGE_HOST + '/' + src : src
+    }
+
   }
 };

package/src/widgets/AhrefItem.vue

@@ -0,0 +1,25 @@
+<template>
+	<div class="flex-1 flex flex-row items-center gap-2">
+		{{ item.props.name ?? item.type }}
+	</div>
+</template>
+
+<script>
+
+export default{
+
+	props: {
+		item: Object
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+
+}
+
+</style>

package/src/widgets/AhrefSetting.vue

@@ -0,0 +1,91 @@
+<template>
+	<div :class="$style.comp">
+
+		<div>
+			<label class="flex-1 text-text-400">Text</label>
+			<Textbox v-model="item.props.text" @keyup.enter="$emit('change')"/>
+		</div>
+
+		<div>
+			<label class="flex-1 text-text-400">Href</label>
+			<Textbox v-model="item.props.href" @keyup.enter="$emit('change')"/>
+		</div>
+
+		<div>
+			<label class="flex-1 text-text-400">Target</label>
+			<Dropdown v-model="item.props.target" @change="$emit('change')">
+				<option value="_self">Self</option>
+				<option value="_blank">Blank</option>
+				<option value="_parent">Parent</option>
+				<option value="_top">Top</option>
+			</Dropdown>
+		</div>
+
+		<div>
+			<label class="flex-1 text-text-400">Variant</label>
+			<Dropdown v-model="item.props.variant"
+								@change="$emit('change')">
+				<option value="primary">Primary</option>
+				<option value="secondary">Secondary</option>
+				<option value="red">Red</option>
+				<option value="minimal">Minimal</option>
+				<option value="outline">Outline</option>
+				<option value="">Not Set</option>
+			</Dropdown>
+		</div>
+
+		<ComponentSetting :item="item"
+											:view-type="viewType"
+											:view-types="viewTypes"
+											defaultDisplay="flex"
+											@change="$emit('change')" />
+
+	</div>
+</template>
+
+<script>
+
+export default{
+
+	emits: [ 'change' ],
+
+	props: {
+
+		item: {
+			type: Object,
+			required: true
+		},
+
+		viewType: String,
+
+		viewTypes: Array,
+
+	},
+
+	data(){
+		return {
+		}
+	},
+
+	inject: [ 'confirm', 'imageSrc' ],
+
+	methods: {
+
+
+	},
+
+	computed: {
+
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+	@apply flex flex-col gap-4;
+}
+
+</style>

package/src/widgets/ComponentSetting.vue

@@ -421,7 +421,7 @@
 
 		<div class="flex flex-col gap-4">
 
-			<label class="flex-1 text-text-400">Shadow</label>
+			<strong class="flex-1 text-text-400">Shadow</strong>
 
 			<div class="flex flex-row items-center gap-4">
 				<label class="flex-1 text-text-400">Box Shadow</label>

package/src/widgets/TestimonialItem.vue

@@ -0,0 +1,25 @@
+<template>
+	<div class="flex-1 flex flex-row items-center gap-2">
+		{{ item.props.name ?? item.type }}
+	</div>
+</template>
+
+<script>
+
+export default{
+
+	props: {
+		item: Object
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+
+}
+
+</style>

package/src/widgets/TestimonialSetting.vue

@@ -0,0 +1,152 @@
+<template>
+	<div :class="$style.comp">
+		<div>
+			<label class="text-text-400">Title</label>
+			<Textbox v-model="item.props.title" class="mt-1" />
+		</div>
+
+		<div>
+			<label class="text-text-400">Description</label>
+			<Textarea v-model="item.props.description" rows="3" class="mt-1" />
+		</div>
+
+		<div>
+			<div class="flex flex-row items-center">
+				<label class="text-text-400 flex-1">Testimonials</label>
+				<button type="button" class="text-primary" @click="$refs.modal.open({ createdAt:'2023-01-01' })">Add</button>
+			</div>
+			<ListItem :items="items"
+			          @reorder="(from, to) => { items.splice(to, 0, items.splice(from, 1)[0]); $emit('change') }">
+			  <template v-slot="{ item, index }">
+			    <div class="flex flex-row items-center gap-3 cursor-pointer">
+			      <div data-reorder>
+			        <svg width="14" height="14" class="fill-text-300" 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-1 p-2" @click="$refs.modal.open(item)">
+							<p class="line-clamp-2">
+								{{ item.text }}
+							</p>
+						</div>
+			      <div>
+			        <button type="button" @click="confirm($t('Remove this item?'), '', () => { items.splice(index, 1); $emit('change') })">
+			          <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="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"/></svg>
+			        </button>
+			      </div>
+			    </div>
+			  </template>
+			</ListItem>
+		</div>
+
+		<Modal ref="modal" width="360" height="420">
+		  <template v-slot:head>
+		    <div class="relative p-5">
+		      <h3>Add Testimonial</h3>
+		      <div class="absolute top-0 right-0 p-2">
+		        <button type="button" class="p-2" @click="$refs.modal.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-6">
+					<Button @click="apply(context)"
+									:state="!context.text || !context.name || !context.createdAt ? -1 : 1"
+									class="w-full">Add Testimonial</Button>
+		    </div>
+		  </template>
+		  <template #default="{ context }">
+				<div class="flex-1 p-6 flex flex-col gap-6">
+					<Textarea v-model="context.text" rows="5" placeholder="Text"></Textarea>
+					<div class="flex flex-row gap-4 items-center">
+						<Image ref="image" class="w-[64px] aspect-square rounded-full bg-text-50"
+									 :src="imageSrc(context.imageUrl)"
+									 :editable="true"
+									 @click="$refs.image.edit()"
+									 @change="(base64, file) => context.imageUrl = file"/>
+						<div class="flex-1 flex flex-col gap-1">
+							<Textbox v-model="context.name" placeholder="Name" />
+							<Datepicker v-model="context.createdAt" placeholder="Time" mode="popup" />
+						</div>
+					</div>
+				</div>
+			</template>
+		</Modal>
+
+
+		<ComponentSetting :item="item"
+											:view-type="viewType"
+											:view-types="viewTypes"
+											default-display="block"
+											@change="$emit('change')" />
+	</div>
+</template>
+
+<script>
+
+export default{
+
+	emits: [ 'change' ],
+
+	inject: [ 'confirm', 'imageSrc', 'socketEmit2' ],
+
+	methods: {
+
+		apply(item){
+
+			const index = this.item.props.items.indexOf(item)
+			if(index === -1){
+				this.item.props.items.push(item)
+			}
+			else{
+				Object.assign(this.item.props.items[index], item)
+			}
+
+			this.$refs.modal.close()
+			this.$emit('change')
+		},
+
+		save(){
+			this.$emit('save')
+			this.close()
+		}
+
+	},
+
+	props: {
+
+		item: {
+			type: Object,
+			required: true
+		},
+
+		viewType: String,
+
+		viewTypes: Array,
+
+	},
+
+	computed: {
+
+		items(){
+			if(!Array.isArray(this.item.props.items)){
+				this.item.props.items = []
+			}
+			return this.item.props.items
+		}
+
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+	@apply flex flex-col gap-4;
+}
+
+</style>

package/src/widgets/WebPageBuilder.vue

@@ -993,10 +993,17 @@ export default{
 						channels:[],
 					}},
 
+				{ type:'Testimonial', name:'Testimonial', group:'Widgets', props:{
+					}},
+
 				{ type:'Header', name:'Header', group:'Headers', props:{
 						htmlText:'', images:{},
 					}},
 
+				{ type:'Ahref', name:'Ahref', group:'Components', props:{
+						name:'Ahref', text:'Ahref'
+					}},
+
 				{ type:'Button', name:'Button', group:'Components', props:{
 						name:'Button', text:'Button'
 					}},