@mixd-id/web-scaffold 0.1.230406090 → 0.1.230406092

package/package.json

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

package/src/components/Table.vue

@@ -0,0 +1,68 @@
+<template>
+	<div :class="compClass">
+		<table>
+			<thead>
+				<tr>
+					<th v-for="header in headers">{{ header.text }}</th>
+				</tr>
+			</thead>
+			<tbody>
+				<tr v-for="content in contents">
+					<td v-for="header in headers">{{ content[header.key] ?? '' }}</td>
+				</tr>
+			</tbody>
+		</table>
+	</div>
+</template>
+
+<script>
+
+import {componentMixin} from "../mixin/component";
+
+export default{
+
+	mixins: [ componentMixin ],
+
+	props:{
+
+		headers: Array,
+		contents: Array,
+
+	},
+
+	computed: {
+
+		compClass(){
+			return [
+				this.$style.comp,
+				this.extClass
+			]
+				.join(' ')
+		}
+
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+	@apply overflow-auto;
+}
+
+.comp table{
+	@apply border-[1px] border-text-200 border-collapse;
+	table-layout: fixed;
+}
+
+.comp th{
+	@apply whitespace-nowrap bg-text-50 text-left;
+}
+
+.comp th, .comp td{
+	@apply border-[1px] border-text-200 p-3;
+}
+
+</style>

package/src/index.js

@@ -3,8 +3,8 @@ import {observeInit} from './utils/helpers.mjs'
 import throttle from "lodash/throttle"
 
 let _UNIQID = 0
-const uniqid = () => {
-  return _UNIQID++
+const uniqid = (additionalKey = '') => {
+  return '_c' + additionalKey + (new Date().getTime()).toString().substring(8) + _UNIQID++
 }
 
 const mediaBreakpoints = {
@@ -316,6 +316,7 @@ export default{
     app.component('VirtualTable', defineAsyncComponent(() => import("./components/VirtualTable.vue")))
     app.component('Slider', defineAsyncComponent(() => import("./components/Slider.vue")))
     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('TextBlock', defineAsyncComponent(() => import("./components/TextBlock.vue")))
     app.component('TextEditor', defineAsyncComponent(() => import("./components/TextEditor.vue")))
@@ -330,13 +331,15 @@ export default{
     app.component('BoxItem', defineAsyncComponent(() => import("./widgets/BoxItem.vue")))
     app.component('BoxSetting', defineAsyncComponent(() => import("./widgets/BoxSetting.vue")))
     app.component('ButtonItem', defineAsyncComponent(() => import("./widgets/ButtonItem.vue")))
-    app.component('ButtonSetting', defineAsyncComponent(() => import("./wid" +
-    "gets/ButtonSetting.vue")))
+    app.component('ButtonSetting', defineAsyncComponent(() => import("./widgets/ButtonSetting.vue")))
     app.component('CarouselItem', defineAsyncComponent(() => import("./widgets/CarouselItem.vue")))
     app.component('CarouselSetting', defineAsyncComponent(() => import("./widgets/CarouselSetting.vue")))
     app.component('ContactForm', defineAsyncComponent(() => import("./widgets/ContactForm.vue")))
     app.component('ContactFormItem', defineAsyncComponent(() => import("./widgets/ContactFormItem.vue")))
     app.component('ContactFormSetting', defineAsyncComponent(() => import("./widgets/ContactFormSetting.vue")))
+    app.component('EmbeddedVideo', defineAsyncComponent(() => import("./widgets/EmbeddedVideo.vue")))
+    app.component('EmbeddedVideoItem', defineAsyncComponent(() => import("./widgets/EmbeddedVideoItem.vue")))
+    app.component('EmbeddedVideoSetting', defineAsyncComponent(() => import("./widgets/EmbeddedVideoSetting.vue")))
     app.component('FAQ', defineAsyncComponent(() => import("./widgets/FAQ.vue")))
     app.component('FAQItem', defineAsyncComponent(() => import("./widgets/FAQItem.vue")))
     app.component('FAQSetting', defineAsyncComponent(() => import("./widgets/FAQSetting.vue")))
@@ -363,6 +366,8 @@ export default{
     app.component('StyleSetting', defineAsyncComponent(() => import("./widgets/StyleSetting.vue")))
     app.component('ParagraphItem', defineAsyncComponent(() => import("./widgets/ParagraphItem.vue")))
     app.component('ParagraphSetting', defineAsyncComponent(() => import("./widgets/ParagraphSetting.vue")))
+    app.component('TableItem', defineAsyncComponent(() => import("./widgets/TableItem.vue")))
+    app.component('TableSetting', defineAsyncComponent(() => import("./widgets/TableSetting.vue")))
     app.component('TextBlockItem', defineAsyncComponent(() => import("./widgets/TextBlockItem.vue")))
     app.component('TextBlockSetting', defineAsyncComponent(() => import("./widgets/TextBlockSetting.vue")))
   }

package/src/widgets/ContactForm.vue

@@ -74,11 +74,10 @@
 <script>
 
 import {componentMixin} from "../mixin/component";
-import axios from "axios";
 
 export default{
 
-	inject: [ 'alert' ],
+	inject: [ 'alert', 'axios' ],
 
 	mixins: [ componentMixin ],
 
@@ -112,7 +111,7 @@ export default{
 			if(!this.submitUrl) return
 
 			this.$refs.submitBtn.setState(2)
-			axios({
+			this.axios({
 				method: this.submitMethod ?? 'post',
 				url: import.meta.env.VITE_API_HOST + this.submitUrl,
 				data: {

package/src/widgets/EmbeddedVideo.vue

@@ -1,5 +1,5 @@
 <template>
-	<div :class="compClass" :style="computedStyle">
+	<div :class="compClass">
 		<iframe :class="videoClass"
 						:src="computedSrc"
 						frameborder="0"
@@ -10,50 +10,29 @@
 
 <script>
 
-export default{
-
-	props: {
+import { componentMixin } from '../mixin/component'
 
-		bgColors: Array,
-		display: Array,
-		margin: Array,
-		padding: Array,
-		enabled: undefined,
-		name: String,
+export default{
 
-		videoUrl: String,
+	mixins: [ componentMixin ],
 
-		width: Array,
+	props: {
 
-		align: Array
+		videoUrl: String
 
 	},
 
 	computed: {
 
-		computedDisplay(){
-			return [
-				Boolean(this.display[0]) ? '' : 'none',
-				Boolean(this.display[1]) ? '' : 'none'
-			]
-		},
-
 		computedSrc(){
 			return (this.videoUrl ?? '').replace('https://www.youtube.com/watch?v=', 'https://www.youtube.com/embed/')
 				.replace('https://youtu.be/', 'https://www.youtube.com/embed/')
 		},
 
-		computedStyle(){
-			return {
-				backgroundColor: this.bgColors[0]
-			}
-		},
-
 		compClass(){
 			return [
 				this.$style.comp,
-				this.align[0] ? this.align[0] : undefined,
-				this.align[1] ? 'md:' + this.align[1] : undefined,
+				this.extClass
 			]
 				.filter(_ => _)
 				.join(' ')
@@ -62,12 +41,11 @@ export default{
 		videoClass(){
 			return [
 				this.$style.video,
-				this.width[0] ? `w-${this.width[0]}` : undefined,
-				this.width[1] ? `md:w-${this.width[1]}` : undefined,
+				/*this.width[0] ? `w-${this.width[0]}` : undefined,
+				this.width[1] ? `md:w-${this.width[1]}` : undefined,*/
 			]
 				.filter(_ => _)
 				.join(' ')
-
 		}
 
 	}
@@ -80,8 +58,7 @@ export default{
 
 .comp{
 	@apply flex flex-col;
-	background-color: v-bind(bgColors[0]);
-	display: v-bind(computedDisplay[0]);
+	background-image: v-bind(bgImages[0]);
 }
 
 .video{
@@ -92,8 +69,7 @@ export default{
 
 @media screen and (min-width: 768px){
 	.comp{
-		background-color: v-bind(bgColors[1]);
-		display: v-bind(computedDisplay[1]);
+		background-image: v-bind(bgImages[1]);
 	}
 }
 

package/src/widgets/EmbeddedVideoSetting.vue

@@ -7,54 +7,12 @@
 							 @keyup.enter="$emit('change')" />
 		</div>
 
-		<div class="flex flex-row gap-4 items-center">
-			<label class="flex-1 text-text-400">Width</label>
-			<div>
-				<Dropdown v-for="(_viewType, index) in viewTypes"
-									v-show="_viewType.value === viewType"
-									v-model="item.props.width[index]"
-									@change="$emit('change')"
-									class="w-[120px]">
-					<option value="full">Full</option>
-					<option value="[360px]">360px</option>
-					<option value="[480px]">480px</option>
-					<option value="[640px]">640px</option>
-				</Dropdown>
-			</div>
-		</div>
-
-		<div class="flex flex-row gap-4 items-center">
-			<label class="flex-1 text-text-400">Align</label>
-			<div>
-				<Dropdown v-for="(_viewType, index) in viewTypes"
-									v-show="_viewType.value === viewType"
-									v-model="item.props.align[index]"
-									@change="$emit('change')"
-									class="w-[120px]">
-					<option value="justify-start">Left</option>
-					<option value="justify-center">Center</option>
-					<option value="justify-end">Right</option>
-				</Dropdown>
-			</div>
-		</div>
-
-		<div class="flex flex-row gap-4 items-center">
-			<label class="flex-1 text-text-400">Background Color</label>
-			<ColorPicker v-for="(_viewType, index) in viewTypes"
-									 v-show="_viewType.value === viewType"
-									 v-model="item.props.bgColors[index]"
-									 @change="$emit('change')"
-									 :custom-color="true">
-			</ColorPicker>
-		</div>
-
 		<ComponentSetting :item="item"
 											:view-type="viewType"
 											:view-types="viewTypes"
 											defaultDisplay="flex"
 											@change="$emit('change')" />
 
-
 	</div>
 </template>
 

package/src/widgets/FAQ.vue

@@ -27,7 +27,6 @@ export default{
 	mixins: [ componentMixin ],
 
 	props:{
-
 		title: String,
 		items: Array
 	},

package/src/widgets/TableItem.vue

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

package/src/widgets/TableSetting.vue

@@ -0,0 +1,174 @@
+<template>
+	<div :class="$style.comp">
+
+		<div>
+			<div class="flex flex-row items-center">
+				<label class="flex-1 text-text-400">Headers</label>
+				<button type="button" class="text-primary"
+					@click="this.$refs.headerEdit.open({ header:{ key:$util.uniqid(item.uid.substring(0, 3)) } })">Add Header</button>
+			</div>
+			<ListItem :items="headers"
+			          @reorder="(from, to) => { item.props.headers.splice(to, 0, item.props.headers.splice(from, 1)[0]); $emit('change') }">
+			  <template v-slot="{ item:header, index }">
+			    <div class="flex flex-row items-center gap-3 p-2">
+			      <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" @click="this.$refs.headerEdit.open({ header, index })">
+							<pre>{{ header.text }}</pre>
+						</div>
+			      <div>
+			        <button type="button" @click="confirm($t('Remove this item?'), '', () => { item.props.headers.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>
+
+		<div>
+			<div class="flex flex-row items-center">
+				<label class="flex-1 text-text-400">Items</label>
+				<button type="button" class="text-primary"
+								@click="$refs.itemEdit.open({ item:{} })">Add Item</button>
+			</div>
+			<ListItem :items="contents"
+								@reorder="(from, to) => { item.props.contents.splice(to, 0, item.props.contents.splice(from, 1)[0]); $emit('change') }">
+				<template v-slot="{ item:aItem, index }">
+					<div class="flex flex-row items-center gap-3 p-2">
+						<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 text-ellipsis whitespace-nowrap overflow-hidden" @click="this.$refs.itemEdit.open({ item:aItem, index })">
+							{{ Object.values(aItem).join(' ')}}
+						</div>
+						<div>
+							<button type="button" @click="confirm($t('Remove this item?'), '', () => { item.props.contents.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>
+
+		<ComponentSetting :item="item"
+											:view-type="viewType"
+											:view-types="viewTypes"
+											defaultDisplay="flex"
+											@change="$emit('change')" />
+
+		<Modal ref="headerEdit" width="320" height="320">
+		  <template v-slot:head>
+		    <div class="relative p-5">
+		      <h3>Header</h3>
+		      <div class="absolute top-0 right-0 p-2">
+		        <button type="button" class="p-2" @click="$refs.headerEdit.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">
+					<Button type="button" class="w-full"
+						@click="if(!('index' in context)) item.props.headers.push(context.header); $refs.headerEdit.close();$emit('change')">OK</Button>
+		    </div>
+		  </template>
+		  <template #default="{ context }">
+				<div class="flex-1 p-5">
+
+					<div>
+						<label class="text-text-400">Text</label>
+						<Textbox v-model="context.header.text" class="mt-1" />
+					</div>
+
+				</div>
+			</template>
+		</Modal>
+
+		<Modal ref="itemEdit" width="480" height="480">
+		  <template v-slot:head>
+		    <div class="relative p-5">
+		      <h3>Item</h3>
+		      <div class="absolute top-0 right-0 p-2">
+		        <button type="button" class="p-2" @click="$refs.itemEdit.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">
+					<Button type="button" class="w-full"
+									@click="if(!('index' in context)) item.props.contents.push(context.item); $refs.itemEdit.close();$emit('change')">OK</Button>
+				</div>
+		  </template>
+		  <template #default="{ context }">
+				<div class="flex-1 p-5">
+
+					<div v-for="header in item.props.headers">
+						<label class="text-text-400">{{ header.text }}</label>
+						<Textbox v-model="context.item[header.key]" />
+					</div>
+
+					<pre>{{ context.item }}</pre>
+
+				</div>
+			</template>
+		</Modal>
+
+	</div>
+</template>
+
+<script>
+
+export default{
+
+	emits: [ 'change' ],
+
+	inject: [ 'confirm' ],
+
+	methods: {
+
+
+	},
+
+	props: {
+		item: Object,
+		viewType: String,
+		viewTypes: Array,
+	},
+
+	computed: {
+
+		headers(){
+			if(!Array.isArray(this.item.props.headers))
+				this.item.props.headers = []
+			return this.item.props.headers
+		},
+
+		contents(){
+			if(!Array.isArray(this.item.props.contents))
+				this.item.props.contents = []
+			return this.item.props.contents
+		}
+
+	}
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+	@apply flex flex-col gap-4;
+}
+
+</style>

package/src/widgets/WebPageBuilder.vue

@@ -877,10 +877,18 @@ export default{
 					src:[],
 				}},
 
+				{ type:'EmbeddedVideo', name:'Video', group:'Components', props:{
+					src:[],
+				}},
+
 				{ type:'Article', name:'Article', group:'Components', props:{} },
 
 				{ type:'Paragraph', name:'Paragraph', group:'Components', props:{} },
 
+				{ type:'Table', name:'Table', group:'Components', props:{
+					items: []
+				}},
+
 				{ type:'TextBlock', name:'TextBlock', group:'Components', props:{
 					htmlText:'',
 					fontFamily:[], fontSize:[], fontWeight:[], textColor:[]