@mixd-id/web-scaffold 0.1.2301231345 → 0.1.2301231347

package/package.json

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

package/src/components/Ahref.vue

@@ -1,54 +1,28 @@
 <template>
-	<a v-if="isExternalLink" :class="computedClass" v-bind="$attrs" :href="to" target="_blank">
+	<a v-if="isExternalLink" :href="href" :target="target">
 		<slot />
 	</a>
-	<router-link v-else :="$props" :class="computedClass">
+	<router-link v-else :to="href" :target="target">
 		<slot />
 	</router-link>
 </template>
 
 <script>
-import { RouterLink } from 'vue-router'
 
 export default {
 
 	props: {
-		...RouterLink.props,
-		to: {
-			type: String,
-			required: true
-		},
-		variant: {
-			type: [ String, Number ],
-			default: "primary" // primary|secondary|outline, default:primary
-		},
-		size: {
-			type: [ String ],
-			default: '' // sm|md|lg, default: md
-		},
-		spacing: {
-			type: [ String, Number ],
-			default: '' // 0|1|2|3, default: 2
-		},
-		state: [ String, Number ],
+
+		href: String,
+
+		target: String
+
 	},
 
 	computed: {
 
 		isExternalLink() {
-			return typeof this.to === 'string' && (this.to.startsWith('http') || this.to.startsWith('tel:'))
-		},
-
-		computedClass(){
-
-			return [
-				this.$style.button,
-				this.$style['variant-' + this.variant],
-				this.$style['size-' + this.size],
-				this.$style['spacing-' + this.spacing],
-				parseInt(this.state) === 2 ? this.$style.loading : '',
-			]
-				.join(' ')
+			return typeof this.href === 'string' && (this.href.startsWith('http') || this.href.startsWith('tel:'))
 		}
 	},
 }
@@ -57,152 +31,4 @@ export default {
 <style module>
 
 
-.button{
-	@apply relative inline-flex items-center justify-center;
-	@apply whitespace-nowrap text-ellipsis overflow-hidden;
-}
-.button>*:first-child{
-	@apply flex items-center justify-center
-}
-.button:disabled{
-	@apply opacity-50;
-}
-
-.variant-,
-.variant-primary{
-	@apply bg-primary-500 text-white rounded-md border-[2px] border-primary-500;
-}
-.variant-:hover,
-.variant-primary:hover{
-	@apply bg-primary-600 border-primary-600;
-}
-.variant-:active,
-.variant-primary:active{
-	@apply top-[1px] left-[1px] relative;
-}
-.variant-:disabled,
-.variant-primary:disabled{
-	@apply top-0 left-0 cursor-not-allowed;
-}
-.variant- *,
-.variant-primary *{
-	@apply text-white fill-white;
-}
-.variant-.loading *,
-.variant-primary.loading *{
-	@apply fill-transparent
-}
-.variant- .svgBg,
-.variant-primary .svgBg{
-	stroke: #fff;
-	stroke-opacity: 25%;
-}
-.variant- .svgHg,
-.variant-primary .svgHg{
-	fill: #fff;
-	fill-opacity: 75%;
-}
-
-.variant-outline{
-	@apply bg-transparent text-primary-500 rounded-md border-[2px] border-primary-500;
-}
-.variant-outline:hover{
-	@apply border-primary-300 text-primary-300;
-}
-.variant-outline:active{
-	@apply top-[1px] left-[1px] active:relative;
-}
-.variant-outline:disabled{
-	@apply opacity-50 top-0 left-0 cursor-not-allowed;
-	@apply text-primary-500 border-primary-500;
-}
-.variant-outline *{
-	@apply text-primary-500 fill-primary-500;
-}
-.variant-outline.loading *{
-	@apply fill-transparent
-}
-.variant-outline .svgBg{
-	stroke: var(--primary);
-	stroke-opacity: 25%;
-}
-.variant-outline .svgHg{
-	fill: var(--primary);
-	fill-opacity: 75%;
-}
-
-.variant-secondary{
-	@apply bg-secondary-500 text-primary rounded-md border-[2px] border-secondary-500;
-}
-.variant-secondary:hover{
-	@apply bg-secondary-400 border-secondary-400;
-}
-.variant-secondary:active{
-	@apply top-[1px] left-[1px] relative;
-}
-.variant-secondary:disabled{
-	@apply bg-secondary-500 border-secondary-500 opacity-50 top-0 left-0 cursor-not-allowed;
-}
-.variant-secondary *{
-	@apply text-white fill-white;
-}
-.variant-secondary.loading *{
-	@apply fill-transparent
-}
-.variant-secondary .svgBg{
-	stroke: var(--text);
-	stroke-opacity: 25%;
-}
-.variant-secondary .svgHg{
-	fill: #fff;
-	fill-opacity: 75%;
-}
-
-.variant-minimal .svgBg{
-	stroke: var(--base-500);
-	stroke-opacity: 25%;
-}
-.variant-minimal .svgHg{
-	fill: var(--text);
-	fill-opacity: 75%;
-}
-
-.loadingPane{
-	@apply absolute left-0 top-0 right-0 bottom-0 flex items-center justify-center
-}
-.loading>*:first-child{
-	@apply opacity-0
-}
-.loading:hover{
-	@apply bg-primary
-}
-.loading:active{
-	@apply top-0 left-0;
-}
-
-.spacing-,
-.spacing-2{
-	@apply p-2
-}
-.spacing-1{
-	@apply p-1
-}
-.spacing-3{
-	@apply p-3
-}
-
-.size-sm{
-	@apply text-sm
-}
-.size-lg{
-	@apply text-lg
-}
-.size-xl{
-	@apply text-xl
-}
-
-.spinner{
-	@apply animate-spin h-5 w-5;
-}
-
 </style>

package/src/components/Alert.vue

@@ -17,7 +17,7 @@
 							<path fill-rule="evenodd" clip-rule="evenodd" d="M12 20.5C16.6944 20.5 20.5 16.6944 20.5 12C20.5 7.30558 16.6944 3.5 12 3.5C7.30558 3.5 3.5 7.30558 3.5 12C3.5 16.6944 7.30558 20.5 12 20.5ZM12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"/>
 						</svg>
 						
-						<div class="my-4 text-center">
+						<div class="my-4 text-center flex-1 overflow-y-auto">
 							<h5 class="my-1 break-all">{{ title }}</h5>
 							<p class="break-all overflow-y-auto whitespace-pre-line text-left">{{ description }}</p>
 						</div>
@@ -35,10 +35,8 @@
 									{{ text }}
 								</strong>
 							</Button>
-							<Button variant="minimal" @click="$emit('dismiss')" class="min-w-[88px]">
-								<label class="px-4">
-									Cancel
-								</label>
+							<Button variant="minimal" @click="$emit('dismiss')" class="min-w-[88px] px-4 hover:text-primary">
+								Cancel
 							</Button>
 						</div>
 					</div>

package/src/components/Button.vue

@@ -1,8 +1,6 @@
 <template>
 	<button :class="computedClass" :disabled="isDisabled">
-		<div>
-			<slot></slot>
-		</div>
+		<slot></slot>
 		<div v-if="isLoading" :class="$style.loadingPane">
 			<svg :class="$style.spinner" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
 				<circle :class="$style.svgBg" cx="12" cy="12" r="10" stroke-width="4"></circle>
@@ -33,10 +31,7 @@ export default{
 			default: '' // 0|1|2|3, default: 2
 		},
 
-		state: {
-			type: [ String, Number ],
-			default: 1 // -1:disabled, 1:normal, 2:loading, default: normal
-		}
+		state:  [ String, Number ], // -1:disabled, 1:normal, 2:loading, default: normal
 
 	},
 
@@ -49,29 +44,44 @@ export default{
 				this.$style['variant-' + this.variant],
 				this.$style['size-' + this.size],
 				this.$style['spacing-' + this.spacing],
-				parseInt(this.state) === 2 ? this.$style.loading : '',
+				parseInt(this.computedState) === 2 ? this.$style.loading : '',
 			]
 				.join(' ')
 		},
 
 		isDisabled(){
-			return parseInt(this.state) === -1
+			return parseInt(this.computedState) === -1
 		},
 
 		isNormal(){
-			return parseInt(this.state) !== 2
+			return parseInt(this.computedState) !== 2
 		},
 
 		isLoading(){
-			return parseInt(this.state) === 2
+			return parseInt(this.computedState) === 2
+		},
+
+		computedState(){
+			return this.state ?? this._state
 		}
 
 	},
 
+	data(){
+		return {
+			_state: null
+		}
+	},
+
 	methods:{
 
 		focus(){
 			this.$el.focus()
+		},
+
+		setState(state){
+			console.log('setState', state)
+			this._state = state
 		}
 
 	}

package/src/components/DynamicTemplate.vue

@@ -0,0 +1,44 @@
+<template>
+	<div :class="$style.comp">
+		<component :is="components"></component>
+	</div>
+</template>
+
+<script>
+
+import * as Vue from "vue/dist/vue.esm-bundler";
+
+export default{
+
+	props: [ 'template' ],
+
+	data(){
+		return {
+			components: null
+		}
+	},
+
+	watch: {
+
+		template: {
+			immediate: true,
+			handler(to){
+				this.components = Vue.compile(to)
+			}
+		}
+
+	}
+
+
+
+}
+
+</script>
+
+<style module>
+
+.comp{
+
+}
+
+</style>

package/src/components/HTMLEditor.vue

@@ -1,7 +1,7 @@
 <template>
 	<div :class="$style.comp">
 
-		<div class="bg-base-300 flex flex-row border-b-[1px] border-text-200">
+		<div class="flex flex-row">
 			<button class="p-3" type="button" @click="format('bold')">
 				<svg width="14" height="14" class="fill-text-400 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M0 64C0 46.3 14.3 32 32 32H80 96 224c70.7 0 128 57.3 128 128c0 31.3-11.3 60.1-30 82.3c37.1 22.4 62 63.1 62 109.7c0 70.7-57.3 128-128 128H96 80 32c-17.7 0-32-14.3-32-32s14.3-32 32-32H48V256 96H32C14.3 96 0 81.7 0 64zM224 224c35.3 0 64-28.7 64-64s-28.7-64-64-64H112V224H224zM112 288V416H256c35.3 0 64-28.7 64-64s-28.7-64-64-64H224 112z"/></svg>
 			</button>
@@ -11,26 +11,24 @@
 			<button class="p-3" type="button" @click="format('underline')">
 				<svg width="14" height="14" class="fill-text-400 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M16 64c0-17.7 14.3-32 32-32h96c17.7 0 32 14.3 32 32s-14.3 32-32 32H128V224c0 53 43 96 96 96s96-43 96-96V96H304c-17.7 0-32-14.3-32-32s14.3-32 32-32h96c17.7 0 32 14.3 32 32s-14.3 32-32 32H384V224c0 88.4-71.6 160-160 160s-160-71.6-160-160V96H48C30.3 96 16 81.7 16 64zM0 448c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32z"/></svg>
 			</button>
-			<button class="p-3" type="button" ref="alignBtn" @click="contextMenu = { type:'aligns', caller:$refs.alignBtn }">
+			<button class="p-3" type="button" ref="alignBtn" @click="$refs.alignContext.open($refs.alignBtn)">
 				<svg width="14" height="14" class="fill-text-400 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M288 64c0 17.7-14.3 32-32 32H32C14.3 96 0 81.7 0 64S14.3 32 32 32H256c17.7 0 32 14.3 32 32zm0 256c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H256c17.7 0 32 14.3 32 32zM0 192c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 448c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"/></svg>
 			</button>
-			<button class="p-3" type="button" ref="headingsBtn" @click="contextMenu = { type:'headings', caller:$refs.headingsBtn }">
+			<button class="p-3" type="button" ref="headingsBtn" @click="$refs.headingContext.open($refs.headingsBtn)">
 				<svg width="14" height="14" class="fill-text-400 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M0 64C0 46.3 14.3 32 32 32H80h48c17.7 0 32 14.3 32 32s-14.3 32-32 32H112V208H336V96H320c-17.7 0-32-14.3-32-32s14.3-32 32-32h48 48c17.7 0 32 14.3 32 32s-14.3 32-32 32H400V240 416h16c17.7 0 32 14.3 32 32s-14.3 32-32 32H368 320c-17.7 0-32-14.3-32-32s14.3-32 32-32h16V272H112V416h16c17.7 0 32 14.3 32 32s-14.3 32-32 32H80 32c-17.7 0-32-14.3-32-32s14.3-32 32-32H48V240 96H32C14.3 96 0 81.7 0 64z"/></svg>
 			</button>
-			<button class="p-3" type="button" ref="listBtn" @click="contextMenu = { type:'list', caller:$refs.listBtn }">
+			<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">
+			<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">
+			<button class="p-3" type="button" @click="createLink">
 				<svg width="14" height="14" class="fill-text-400 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M579.8 267.7c56.5-56.5 56.5-148 0-204.5c-50-50-128.8-56.5-186.3-15.4l-1.6 1.1c-14.4 10.3-17.7 30.3-7.4 44.6s30.3 17.7 44.6 7.4l1.6-1.1c32.1-22.9 76-19.3 103.8 8.6c31.5 31.5 31.5 82.5 0 114L422.3 334.8c-31.5 31.5-82.5 31.5-114 0c-27.9-27.9-31.5-71.8-8.6-103.8l1.1-1.6c10.3-14.4 6.9-34.4-7.4-44.6s-34.4-6.9-44.6 7.4l-1.1 1.6C206.5 251.2 213 330 263 380c56.5 56.5 148 56.5 204.5 0L579.8 267.7zM60.2 244.3c-56.5 56.5-56.5 148 0 204.5c50 50 128.8 56.5 186.3 15.4l1.6-1.1c14.4-10.3 17.7-30.3 7.4-44.6s-30.3-17.7-44.6-7.4l-1.6 1.1c-32.1 22.9-76 19.3-103.8-8.6C74 372 74 321 105.5 289.5L217.7 177.2c31.5-31.5 82.5-31.5 114 0c27.9 27.9 31.5 71.8 8.6 103.9l-1.1 1.6c-10.3 14.4-6.9 34.4 7.4 44.6s34.4 6.9 44.6-7.4l1.1-1.6C433.5 260.8 427 182 377 132c-56.5-56.5-148-56.5-204.5 0L60.2 244.3z"/></svg>
 			</button>
 		</div>
 
-		<ContextMenu :state="contextMenu && contextMenu.type === 'headings'"
-			 :caller="contextMenu ? contextMenu.caller : null"
-		    @dismiss="contextMenu = null">
+		<ContextMenu ref="headingContext">
 		  <div class="flex flex-col">
 				<button class="p-3 text-4xl text-left hover:bg-primary-200" type="button" @click="format('formatblock', 'h1')">
 					Heading 1
@@ -53,9 +51,7 @@
 		  </div>
 		</ContextMenu>
 
-		<ContextMenu :state="contextMenu && contextMenu.type === 'aligns'"
-								 :caller="contextMenu ? contextMenu.caller : null"
-								 @dismiss="contextMenu = null">
+		<ContextMenu ref="alignContext">
 			<div class="flex flex-col">
 				<button class="p-3 text-left hover:bg-primary-200 flex flex-row items-center gap-2" type="button" @click="format('justifyleft')">
 					<svg width="14" height="14" class="fill-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M288 64c0 17.7-14.3 32-32 32H32C14.3 96 0 81.7 0 64S14.3 32 32 32H256c17.7 0 32 14.3 32 32zm0 256c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H256c17.7 0 32 14.3 32 32zM0 192c0-17.7 14.3-32 32-32H416c17.7 0 32 14.3 32 32s-14.3 32-32 32H32c-17.7 0-32-14.3-32-32zM448 448c0 17.7-14.3 32-32 32H32c-17.7 0-32-14.3-32-32s14.3-32 32-32H416c17.7 0 32 14.3 32 32z"/></svg>
@@ -76,9 +72,7 @@
 			</div>
 		</ContextMenu>
 
-		<ContextMenu :state="contextMenu && contextMenu.type === 'list'"
-								 :caller="contextMenu ? contextMenu.caller : null"
-								 @dismiss="contextMenu = null">
+		<ContextMenu ref="listContext">
 			<div class="flex flex-col">
 				<button class="p-3 text-left hover:bg-primary-200 flex flex-row items-center gap-2" type="button" @click="format('insertorderedlist')">
 					<svg width="14" height="14" class="fill-text" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M24 56c0-13.3 10.7-24 24-24H80c13.3 0 24 10.7 24 24V176h16c13.3 0 24 10.7 24 24s-10.7 24-24 24H40c-13.3 0-24-10.7-24-24s10.7-24 24-24H56V80H48C34.7 80 24 69.3 24 56zM86.7 341.2c-6.5-7.4-18.3-6.9-24 1.2L51.5 357.9c-7.7 10.8-22.7 13.3-33.5 5.6s-13.3-22.7-5.6-33.5l11.1-15.6c23.7-33.2 72.3-35.6 99.2-4.9c21.3 24.4 20.8 60.9-1.1 84.7L86.8 432H120c13.3 0 24 10.7 24 24s-10.7 24-24 24H32c-9.5 0-18.2-5.6-22-14.4s-2.1-18.9 4.3-25.9l72-78c5.3-5.8 5.4-14.6 .3-20.5zM224 64H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H224c-17.7 0-32-14.3-32-32s14.3-32 32-32zm0 160H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H224c-17.7 0-32-14.3-32-32s14.3-32 32-32zm0 160H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H224c-17.7 0-32-14.3-32-32s14.3-32 32-32z"/></svg>
@@ -90,26 +84,137 @@
 				</button>
 			</div>
 		</ContextMenu>
+		
+		<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 v-slot:foot>
+		    <div class="p-5">
+					<Button class="w-full" :disabled="!imageCanSave" @click="onImageAdd">Add Image</Button>
+		    </div>
+		  </template>
+		  <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="newImage.file" editable="true"
+						 @click="$refs.image.edit()" @change="onImageChanged">
+					  <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="newImage.width" />
+					</div>
+					<div>
+						<label>Height</label>
+						<Textbox class="mt-1" v-model="newImage.height" />
+					</div>
+					<div>
+						<label>Max Width</label>
+						<Textbox class="mt-1" v-model="newImage.maxWidth" />
+					</div>
+					<div>
+						<label>Max Height</label>
+						<Textbox class="mt-1" v-model="newImage.maxHeight" />
+					</div>
+				</div>
+		  </div>
+		</Modal>
+
+		<Modal ref="linkModal" width="360" height="360" 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>
+				<div class="p-5">
+					<Button class="w-full" :disabled="!linkCanSave" @click="addLink">Add Link</Button>
+				</div>
+			</template>
+			<div class="flex-1 flex flex-col gap-5 p-5">
+				<div>
+					<label>Href</label>
+					<Textarea class="w-full mt-1" v-model="newLink.href" rows="2"/>
+				</div>
+				<div>
+					<label>Text</label>
+					<Textbox class="w-full mt-1" v-model="newLink.text" />
+				</div>
+				<div>
+					<label>Target</label>
+					<Dropdown class="w-full mt-1" v-model="newLink.target">
+						<option value="">_self</option>
+						<option value="_blank">_blank</option>
+						<option value="_parent">_parent</option>
+						<option value="_top">_top</option>
+					</Dropdown>
+				</div>
+			</div>
+		</Modal>
 
-		<article ref="article" contenteditable="true" v-html="html"
+		<article ref="article" contenteditable="true" v-html="html" @paste="onPaste"
 				@input="onInput"
-				@blur="onBlur" />
+				@blur="onBlur">
+		</article>
 
 	</div>
 </template>
 
 <script>
 
+import * as Vue from "vue/dist/vue.esm-bundler";
+import {restoreSelection, saveSelection} from "../utils/selection";
+import {downsizeImage} from "../utils/helpers.mjs";
+import axios from "axios";
+
 export default{
 
 	props:{
-		modelValue: String
+		modelValue: String,
+		uploadImage: String
+	},
+
+	computed: {
+
+		linkCanSave(){
+			return this.newLink.href && this.newLink.text
+		},
+
+		imageCanSave(){
+			return true
+		}
+
 	},
 
 	data(){
 		return {
 			html: '',
-			contextMenu: null
+			newLink: null,
+			newImage: null,
+			components: null,
+			selection: null
 		}
 	},
 
@@ -120,7 +225,7 @@ export default{
 	methods: {
 
 		onInput(e){
-			this.$emit('update:modelValue', this.$refs.article.innerHTML)
+			this.updateModelValue()
 		},
 
 		onBlur(){
@@ -140,14 +245,137 @@ export default{
 
 			}
 
-		}
+		},
 
-	},
+		createLink(){
+
+			const { text = '' } = saveSelection(this.$refs.article)
+
+			this.newLink = {
+				href: 'https://',
+				text,
+				target: ''
+			}
+			this.$refs.linkModal.open()
+		},
+
+		addLink(){
+
+			restoreSelection()
+
+			document.execCommand("insertHTML", false,
+				"<a style='font-size:inherit;font-family:inherit;background-color:inherit' " +
+				"href=\"" + this.newLink.href + "\" " +
+				"target=\"" + this.newLink.target + "\">" +
+				this.newLink.text +
+				"</a>");
+
+			this.newLink = null
+			this.$refs.linkModal.close()
+		},
+
+		createImage(){
+
+			saveSelection(this.$refs.article)
+
+			this.newImage = {
+				width: "",
+				height: ""
+			}
+			this.$refs.imageModal.open()
+		},
+
+		onImageChanged(base64, file){
+			this.newImage.base64 = base64
+			this.newImage.file = file
+		},
+
+		onImageAdd(){
+			if(this.uploadImage){
+				this.saveImage()
+			}
+			else{
+				this.addImage()
+			}
+		},
+
+		async addImage(){
+
+			restoreSelection()
+
+			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(' ') + "/>");
+
+			this.$refs.imageModal.close()
+		},
+
+		async saveImage(){
+
+			const blob = await downsizeImage(this.newImage.file, this.newImage.width ?? 600)
+
+			const data = new FormData()
+			data.append('image', blob)
+
+			const res = await axios.post(this.uploadImage,
+				data,
+				{
+					headers: {
+						"Content-Type": "multipart/form-data",
+					},
+				}
+			)
+
+			const { url } = res.data
+
+			restoreSelection()
+
+			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=\"" + url + "\" " + propHtml.join(' ') + "/>");
+
+			this.$refs.imageModal.close()
+		},
+
+		onPaste(e){
+			e.preventDefault()
+
+			let text = (e.clipboardData || window.clipboardData).getData("text");
+			const el = document.createElement('div')
+			el.innerHTML = text
+			text = el.innerText
+
+			document.execCommand("insertText", false, text);
+
+			this.updateModelValue()
+		},
+
+		updateModelValue(){
 
-	watch: {
+			let html = this.$refs.article.innerHTML
+			html = html.replaceAll("<a ", "<Ahref ").replaceAll("</a>", "</Ahref>")
 
-		modelValue(to, from){
-			//console.log('watch modelValue', from)
+			this.$emit('update:modelValue', html)
 		}
 
 	}
@@ -159,7 +387,6 @@ export default{
 <style module>
 
 .comp{
-	@apply flex flex-col border-[1px] border-text-200 bg-base-50 rounded-lg overflow-hidden;
 }
 
 .comp article {

package/src/components/ListPage1.vue

@@ -198,6 +198,8 @@ export default{
 
 	props:{
 
+		datasource: String,
+
 		model: String,
 
 		title: String,
@@ -237,6 +239,10 @@ export default{
 
 		sortableColumns(){
 			return Object.values(this.columns).filter((_) => _.sortable)
+		},
+
+		computedDataSource(){
+			return this.datasource ?? this.model
 		}
 
 	},
@@ -272,7 +278,8 @@ export default{
 	methods:{
 
 		patch(){
-			this.socketEmit(`${this.model}.patch`, {}, (res) => {
+
+			this.socketEmit(`${this.computedDataSource}.patch`, {}, (res) => {
 				this.columns = res.columns
 				this.presets = res.presets
 				this.presetIdx = res.presetIdx
@@ -324,7 +331,7 @@ export default{
 		},
 
 		load(){
-			this.socketEmit(`${this.model}.load`, {
+			this.socketEmit(`${this.computedDataSource}.load`, {
 				preset: this.preset
 			}, (res) => {
 				this.items = res.items
@@ -333,7 +340,7 @@ export default{
 		},
 
 		loadNext(){
-			this.socketEmit(`${this.model}.load`, {
+			this.socketEmit(`${this.computedDataSource}.load`, {
 				preset: this.preset,
 				afterItem: this.items[this.items.length - 1]
 			}, (res) => {
@@ -394,8 +401,6 @@ export default{
 
 		onHooks(module, event, items){
 
-			//console.log('onHooks', module, event, items)
-
 			if(!Array.isArray(items)) return
 			items = items.filter((_) => _).map((_) => {
 				_['_highlight'] = 1
@@ -426,7 +431,6 @@ export default{
 					case 'destroy':
 						items.forEach((item) => {
 							const idx = this.items.findIndex((_) => _.id === item.id)
-							console.log(idx, item)
 							if(idx >= 0){
 								this.items.splice(idx, 1)
 							}

package/src/components/Modal.vue

@@ -2,7 +2,7 @@
   <div>
     <Teleport to=".bW9k">
       <Transition :name="transition" @after-leave="onAfterLeave" @after-enter="$emit('show')">
-        <div v-if="Boolean(state)" :class="computedClass" ref="modal" :style="computedStyle">
+        <div v-if="computedState" :class="computedClass" ref="modal" :style="computedStyle">
           <form @submit.prevent="$emit('submit')">
             <div class="modal-head">
               <slot name="head"></slot>
@@ -83,19 +83,24 @@ export default{
         width: parseInt(this.width) + 'px',
         height: parseInt(this.height) + 'px',
       }
-    }
+    },
+
+		computedState(){
+			return this.state ? Boolean(this.state) : this._state
+		}
 
   },
 
 	data(){
 		return {
-			isDisabled: 0
+			isDisabled: 0,
+			_state: false
 		}
 	},
 
   watch:{
 
-    state(to, from){
+    computedState(to, from){
 
       if(to){
         let overlay = document.querySelector('.bW9k')
@@ -119,6 +124,14 @@ export default{
 
 	methods: {
 
+		open(){
+			this._state = true
+		},
+
+		close(){
+			this._state = false
+		},
+
     onAfterLeave(){
       let overlay = document.querySelector('.bW9k')
       if(overlay){
@@ -142,6 +155,7 @@ export default{
 		onDismiss(e){
 			if(this.dismissable && this.$refs.modal && e.target.classList.contains('bW9k')){
 				this.$emit('dismiss')
+				this.close()
 			}
 		},
 

package/src/components/Textbox.vue

@@ -3,7 +3,7 @@
 		<slot name="start"></slot>
 		<input :type="type" :disabled="isDisabled" @focus="isActive = true" @blur="onBlur"
 			:placeholder="placeholder" :maxlength="maxlength" ref="input" autocomplete="new-password"
-					 :value="modelValue ?? value" @input="onInput"
+					 :value="modelValue ?? value" @input="onInput" :readonly="Boolean(readonly)"
 			@keydown="onKeyDown"/>
 		<div v-if="!!(errors)">
 			<svg :class="$style.svg" width="24" height="24" class="fill-red-500" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
@@ -62,6 +62,7 @@ export default{
 		value: String,
 
 		placeholder: [ String, Number ],
+		readonly: undefined,
 		maxlength: String,
 		type: String,
 
@@ -91,7 +92,7 @@ export default{
 			return this.customClass ?? [
 				this.$style.textbox,
 				this.$style['state-' + this.computedState],
-				this.isActive ? this.$style.active : '',
+				this.isActive && !this.readonly ? this.$style.active : '',
 				this.align ? this.$style['align-' + this.align] : '',
 				this.size ? this.$style['size-' + this.size] : ''
 			].join(' ')
@@ -162,6 +163,10 @@ export default{
 	@apply flex items-center border-[1px] border-text-200 bg-base-50 rounded-lg overflow-hidden;
 }
 
+.textbox input:read-only{
+	@apply bg-text-50;
+}
+
 .size-sm{ @apply min-h-[var(--h-cp-sm)]; }
 .size-sm input{ @apply text-sm; }
 

package/src/components/Toast.vue

@@ -85,7 +85,7 @@ export default{
 <style module>
 
 .toast{
-	@apply max-w-[90vw] md:max-w-[640px] bg-base-400 mt-4 mx-auto rounded-lg border-[1px] border-text-50;
+	@apply max-w-[90vw] md:max-w-[640px] bg-base-400 mt-4 mx-auto rounded-xl border-[1px] border-text-50;
 	@apply min-h-[var(--h-cp)];
 	z-index: 61;
 }

package/src/index.js

@@ -157,8 +157,9 @@ export default{
     app.component('Checkbox', defineAsyncComponent(() => import("./components/Checkbox.vue")))
     app.component('CopyToClipboard', defineAsyncComponent(() => import("./components/CopyToClipboard.vue")))
     app.component('Countdown', defineAsyncComponent(() => import("./components/Countdown.vue")))
-    app.component('Dropdown', defineAsyncComponent(() => import("./components/Dropdown.vue")))
     app.component('Datepicker', defineAsyncComponent(() => import("./components/Datepicker.vue")))
+    app.component('Dropdown', defineAsyncComponent(() => import("./components/Dropdown.vue")))
+    app.component('DynamicTemplate', defineAsyncComponent(() => import("./components/DynamicTemplate.vue")))
     app.component('ErrorText', defineAsyncComponent(() => import("./components/ErrorText.vue")))
     app.component('Feed', defineAsyncComponent(() => import("./components/Feed.vue")))
     app.component('HTMLEditor', defineAsyncComponent(() => import("./components/HTMLEditor.vue")))

package/src/utils/helpers.js

@@ -1,6 +1,95 @@
 const md5 = require("md5");
 const fs = require("fs");
 
+
+
+const ceil = (num, precision = 0) => {
+  var p = Math.pow(10, precision)
+  var n = (num * p) * (1 + Number.EPSILON)
+  return Math.ceil(n) / p
+}
+
+const floor = (num, precision = 0) => {
+  var p = Math.pow(10, precision)
+  var n = (num * p) * (1 + Number.EPSILON)
+  return Math.floor(n) / p
+}
+
+const ftWildcard = (key) => {
+  const term = key.replace(/[\-\+\<\>\@\(\)\~]/, ' ', 'gi')
+
+  const searchTerms = []
+  term.split(' ').forEach((txt) => {
+    if(txt.length >= 3){
+      searchTerms.push(`+${txt}*`)
+    }
+  })
+  return searchTerms.join(' ')
+}
+
+const moveFile = function(oldPath, newPath, callback) {
+
+  fs.rename(oldPath, newPath, function (err) {
+    if (err) {
+      if (err.code === 'EXDEV') {
+        copy();
+      } else {
+        callback(err);
+      }
+      return;
+    }
+    callback();
+  });
+
+  function copy() {
+    var readStream = fs.createReadStream(oldPath);
+    var writeStream = fs.createWriteStream(newPath);
+
+    readStream.on('error', callback);
+    writeStream.on('error', callback);
+
+    readStream.on('close', function () {
+      fs.unlink(oldPath, callback);
+    });
+
+    readStream.pipe(writeStream);
+  }
+}
+
+const round = (num, precision = 0) => {
+  var p = Math.pow(10, precision)
+  var n = (num * p) * (1 + Number.EPSILON)
+  return Math.round(n) / p
+}
+
+const sanitizeMobileNumber = (mobileNumber) => {
+  if(typeof mobileNumber !== 'string') return mobileNumber
+
+  if(mobileNumber.length > 0){
+    mobileNumber = mobileNumber.replace(/[\- ]/g, '')
+    if(mobileNumber.substring(0, 1) === '0') mobileNumber = '+62' + mobileNumber.substring(1)
+    if(mobileNumber.substring(0, 1) !== '+'){
+      if(mobileNumber.substring(0, 2) === '62')
+        mobileNumber = '+' + mobileNumber
+      else
+        mobileNumber = '+62' + mobileNumber
+    }
+    if(mobileNumber.length > 0){
+      mobileNumber = mobileNumber[0] + mobileNumber.slice(1).replace(/\D/g, '')
+    }
+  }
+
+  return mobileNumber
+}
+
+const saveBase64 = async(data, dir = '/storage/files/images') => {
+  if(data.indexOf(',') >= 0){
+    data = data.substring(data.indexOf(',') + 1)
+  }
+  const buffer = Buffer.from(data, 'base64');
+  return await saveBuffer(buffer, dir)
+}
+
 const saveBuffer = async(buffer, dir = '/storage/files/images') => {
 
   const { fileTypeFromBuffer } = await import('file-type')
@@ -17,19 +106,72 @@ const saveBuffer = async(buffer, dir = '/storage/files/images') => {
   return filename
 }
 
-const ftWildcard = (key) => {
-  const term = key.replace(/[\-\+\<\>\@\(\)\~]/, ' ', 'gi')
+const saveFromUrl = async(url, dir = '/storage/files/images') => {
 
-  const searchTerms = []
-  term.split(' ').forEach((txt) => {
-    if(txt.length >= 3){
-      searchTerms.push(`+${txt}*`)
-    }
+  const res = await axios({
+    method: 'GET',
+    url,
+    responseType: 'arraybuffer',
   })
-  return searchTerms.join(' ')
+  const buffer = Buffer.from(res.data)
+  return await saveBuffer(buffer, dir)
+}
+
+const sleep = ms => new Promise(r => setTimeout(r, ms))
+
+const strSlug = (title, separator) => {
+  if (typeof separator == 'undefined') separator = '-';
+
+  // Convert all dashes/underscores into separator
+  var flip = separator === '-' ? '_' : '-';
+  title = title.replace(flip, separator);
+
+  // Remove all characters that are not the separator, letters, numbers, or whitespace.
+  title = title.toLowerCase()
+      .replace(new RegExp('[^a-z0-9' + separator + '\\s]', 'g'), '');
+
+  // Replace all separator characters and whitespace by a single separator
+  title = title.replace(new RegExp('[' + separator + '\\s]+', 'g'), separator);
+
+  return title.replace(new RegExp('^[' + separator + '\\s]+|[' + separator + '\\s]+$', 'g'),'');
 }
 
+const strVars = (text, vars) => {
+
+  (text.match(/\{.*?(?=\})\}/gi) ?? []).forEach((match) => {
+    const key = match.substring(1, match.length - 1)
+    const value = vars[key] ?? ''
+    text = text.replace(match, value)
+  })
+
+  return text
+}
+
+const writeStorage = (path, content, append = false) => {
+
+  if(path.startsWith('/')) path = path.substring(1)
+
+  if(append){
+    fs.appendFileSync(process.env.ROOT_PATH + `/storage/${path}`, content)
+  }
+  else{
+    fs.writeFileSync(process.env.ROOT_PATH + `/storage/${path}`, content)
+  }
+}
+
+
 module.exports = {
+  ceil,
+  floor,
   ftWildcard,
-  saveBuffer
+  moveFile,
+  round,
+  sanitizeMobileNumber,
+  saveBase64,
+  saveBuffer,
+  saveFromUrl,
+  sleep,
+  strSlug,
+  strVars,
+  writeStorage
 }

package/src/utils/helpers.mjs

@@ -1,10 +1,4 @@
 
-let __uid = new Date().getTime()
-
-const uid = function(prefix){
-  return (prefix ?? '') + __uid++;
-}
-
 const csvToArray = (str, delimiter = null) => {
 
   if(!delimiter){
@@ -33,16 +27,85 @@ const csvToArray = (str, delimiter = null) => {
   return arr;
 }
 
+const downsizeImage = async (url, targetWidth, imageType, quality, opt = {}) => {
+
+  let defaultImageType = 'image/jpeg'
+
+  if(url instanceof File){
+
+    defaultImageType = url.type
+
+    await (new Promise((resolve, reject) => {
+      var reader = new FileReader();
+      reader.addEventListener('load', () => {
+        url = reader.result
+        resolve()
+      }, false)
+      reader.addEventListener('error', (e) => {
+        reject(e)
+      })
+      reader.readAsDataURL(url);
+    }))
+  }
+
+  return new Promise((resolve, reject) => {
+
+    const image = new Image()
+    image.addEventListener('load', () => {
+
+      const canvasWidth = image.width > targetWidth ? targetWidth : image.width
+      const canvasHeight = Math.round((image.height / image.width) * canvasWidth)
+
+      const canvas = document.createElement('canvas');
+      canvas.width = canvasWidth;
+      canvas.height = canvasHeight;
+
+      if(opt.constraint){
+        if(canvasWidth / canvasHeight !== opt.constraint)
+          reject(new Error('Image constraint error'))
+      }
+
+      const ctx = canvas.getContext("2d");
+      ctx.drawImage(image, 0, 0, canvasWidth, canvasHeight);
+
+      canvas.toBlob((blob) => {
+        resolve(blob)
+      }, imageType ?? defaultImageType, quality ?? .8)
+    })
+    image.addEventListener('error', (e) => {
+      reject(e)
+    })
+    image.src = url
+  })
+}
+
 const parseBoolean = function(exp){
   return [ 'true', 1, true ].includes(typeof exp === 'string' ?
       exp.toLowerCase() : exp)
 }
 
+const strVars = function(text, vars){
+
+  (text.match(/\{.*?(?=\})\}/gi) ?? []).forEach((match) => {
+    const key = match.substring(1, match.length - 1)
+    const value = vars[key] ?? ''
+    text = text.replace(match, value)
+  })
+
+  return text
+}
+
+let __uid = new Date().getTime()
+const uid = function(prefix){
+  return (prefix ?? '') + __uid++;
+}
+
 export {
+  downsizeImage,
   uid,
   observeInit,
   csvToArray,
-  parseBoolean
+  parseBoolean,
 }
 
 function observeInit(){

package/src/utils/selection.js

@@ -0,0 +1,64 @@
+
+let selection
+
+const saveSelection = (container) =>{
+
+  const sel = window.getSelection()
+  if(sel.rangeCount < 1) return
+  const range = window.getSelection().getRangeAt(0)
+
+  const preSelectionRange = range.cloneRange()
+  preSelectionRange.selectNodeContents(container)
+  preSelectionRange.setEnd(range.startContainer, range.startOffset)
+  const start = preSelectionRange.toString().length
+
+  selection = {
+    start: start,
+    end: start + range.toString().length,
+    container,
+    text: range.toString()
+  }
+
+  return selection
+}
+
+const restoreSelection = () => {
+  if(!selection) return
+
+  const range = document.createRange();
+  range.setStart(selection.container, 0);
+  range.collapse(true);
+
+  const savedSel = selection
+
+  let charIndex = 0
+  let nodeStack = [selection.container], node, foundStart = false, stop = false;
+  while (!stop && (node = nodeStack.pop())) {
+    if (node.nodeType === 3) {
+      var nextCharIndex = charIndex + node.length;
+      if (!foundStart && savedSel.start >= charIndex && savedSel.start <= nextCharIndex) {
+        range.setStart(node, savedSel.start - charIndex);
+        foundStart = true;
+      }
+      if (foundStart && savedSel.end >= charIndex && savedSel.end <= nextCharIndex) {
+        range.setEnd(node, savedSel.end - charIndex);
+        stop = true;
+      }
+      charIndex = nextCharIndex;
+    } else {
+      var i = node.childNodes.length;
+      while (i--) {
+        nodeStack.push(node.childNodes[i]);
+      }
+    }
+  }
+
+  const sel = window.getSelection();
+  sel.removeAllRanges();
+  sel.addRange(range);
+}
+
+export {
+  saveSelection,
+  restoreSelection
+}