@mixd-id/web-scaffold 0.1.230406309 → 0.1.230406311

package/package.json

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

package/src/components/Button.vue

@@ -210,14 +210,14 @@ export default{
 }
 
 .button-secondary{
-	@apply bg-primary-100 border-primary-100 text-primary-700 rounded-lg text-text;
-  border: solid 1px rgb(var(--primary-100));
+	@apply bg-secondary-500 border-secondary-500 text-primary-700 rounded-lg text-white;
+  border: solid 1px rgb(var(--secondary-500));
 }
 .button-secondary:hover{
-	@apply bg-primary-200 border-primary-200;
+	@apply bg-secondary-600 border-secondary-600;
 }
 .button-secondary:disabled{
-	@apply bg-primary-100 top-0 left-0 cursor-not-allowed;
+	@apply bg-secondary-400 border-secondary-400 cursor-not-allowed;
 }
 .button-secondary *{
 	@apply text-text-500 fill-white;

package/src/components/ImagePreview.vue

@@ -1,13 +1,14 @@
 <template>
 	<Modal :state="isOpen" width="400" height="400" :class="$style.previewModal">
-		<div class="flex-1 flex flex-col">
-			<div class="flex flex-row justify-end items-center p-3">
+		<div class="flex-1 flex flex-col gap-3">
+			<div class="flex flex-row gap-4 justify-end items-center p-3 pr-6">
+        <slot name="moreButtons"></slot>
 				<a v-if="download" :href="imageUrl" target="_blank" download>
-					<svg xmlns="http://www.w3.org/2000/svg" width="42" height="42" viewBox="0 0 24 24" class="fill-text"><path class="primary" d="M15 15v-3a3 3 0 0 0-6 0v3H6a4 4 0 0 1-.99-7.88 5.5 5.5 0 0 1 10.86-.82A4.49 4.49 0 0 1 22 10.5a4.5 4.5 0 0 1-4.5 4.5H15z"/><path class="secondary" d="M11 18.59V12a1 1 0 0 1 2 0v6.59l1.3-1.3a1 1 0 0 1 1.4 1.42l-3 3a1 1 0 0 1-1.4 0l-3-3a1 1 0 0 1 1.4-1.42l1.3 1.3z"/></svg>
-				</a>
-				<button class="ml-3" @click="close">
-					<svg xmlns="http://www.w3.org/2000/svg" width="56" height="56" viewBox="0 0 24 24" class="fill-text"><path class="secondary" fill-rule="evenodd" d="M15.78 14.36a1 1 0 0 1-1.42 1.42l-2.82-2.83-2.83 2.83a1 1 0 1 1-1.42-1.42l2.83-2.82L7.3 8.7a1 1 0 0 1 1.42-1.42l2.83 2.83 2.82-2.83a1 1 0 0 1 1.42 1.42l-2.83 2.83 2.83 2.82z"/></svg>
-				</button>
+          <svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" class="fill-text" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M480 352h-133.5l-45.25 45.25C289.2 409.3 273.1 416 256 416s-33.16-6.656-45.25-18.75L165.5 352H32c-17.67 0-32 14.33-32 32v96c0 17.67 14.33 32 32 32h448c17.67 0 32-14.33 32-32v-96C512 366.3 497.7 352 480 352zM432 456c-13.2 0-24-10.8-24-24c0-13.2 10.8-24 24-24s24 10.8 24 24C456 445.2 445.2 456 432 456zM233.4 374.6C239.6 380.9 247.8 384 256 384s16.38-3.125 22.62-9.375l128-128c12.49-12.5 12.49-32.75 0-45.25c-12.5-12.5-32.76-12.5-45.25 0L288 274.8V32c0-17.67-14.33-32-32-32C238.3 0 224 14.33 224 32v242.8L150.6 201.4c-12.49-12.5-32.75-12.5-45.25 0c-12.49 12.5-12.49 32.75 0 45.25L233.4 374.6z"/></svg>
+        </a>
+				<button @click="close">
+          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="fill-text" viewBox="0 0 320 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/></svg>
+        </button>
 			</div>
 			<div class="flex items-center justify-center">
 				<img :src="imageUrl" class="max-h-[75vh]"/>
@@ -27,6 +28,8 @@ export default{
 			default: false
 		},
 
+
+
 	},
 
 	data(){

package/src/components/Textarea.vue

@@ -117,6 +117,10 @@ export default{
 
 	methods:{
 
+    focus(){
+      this.$refs.input.focus()
+    },
+
 		select(){
 			this.$refs.input.select()
 		},

package/src/components/TreeView.vue

@@ -1,16 +1,17 @@
 <template>
 	<div :class="$style.comp">
 
-		<TreeViewItem v-for="(item, index) in items"
+		<TreeViewItem v-for="(item, index) in modelValue"
 									:item="item"
-                  :selectedItem="selectedItem"
-                  :index="index"
-                  :parent="parent"
-                  :config="config"
-                  :depth="0"
-									@change="$emit('change')">
-			<template #default="{ item, parent, index, depth }">
-				<slot :item="item" :parent="parent" :index="index" :depth="depth"></slot>
+									:parent="modelValue"
+									:selected-item="selectedItem"
+									@moveup="moveUp(item)"
+									@movedown="moveDown(item)"
+									@change="$emit('change')"
+									@remove="confirm({ title:$t('Remove this item?'), onConfirm: () => { modelValue.splice(index, 1);$emit('change') }})"
+									@add="(items) => $emit('add', items)">
+			<template #default="{ item, parent }">
+				<slot :item="item" :parent="parent"></slot>
 			</template>
 		</TreeViewItem>
 
@@ -26,29 +27,67 @@ export default{
 
 	components: {TreeViewItem},
 
-	emits: [ 'change' ],
+	emits: [ 'add', 'change', 'paste' ],
 
 	inject: [ 'confirm', 'toast' ],
 
 	props: {
 
-		items: Array,
+		modelValue: Array,
 
-		selectedItem: Object,
+		selectedItem: Object
 
-    config: Object,
+	},
+
+	methods: {
+
+		copy(){
+			if(this.selectedItem){
+				copyToClipboard(JSON.stringify(this.selectedItem))
+					.then(() => this.toast('Copied to clipboard'))
+			}
+		},
+
+		paste(){
+			getClipboardData().then(text => {
+				try{
+					const item = JSON.parse(text)
+					this.$emit('paste', item)
+				}
+				catch(e){}
+			})
+		},
+
+		moveDown(item){
+			const idx = this.modelValue.indexOf(item)
+			if(idx < this.modelValue.length - 1){
+				this.modelValue.splice(idx + 1, 0, this.modelValue.splice(idx, 1)[0])
+				this.$emit('change')
+			}
+		},
+
+		moveUp(item){
+			const idx = this.modelValue.indexOf(item)
+			if(idx - 1 >= 0){
+				this.modelValue.splice(idx - 1, 0, this.modelValue.splice(idx, 1)[0])
+				this.$emit('change')
+			}
+		},
+
+		add(){
+			this.$emit('add', this.modelValue)
+		},
+
+	},
 
+	mounted() {
+		window.addEventListener('keydown', this.onKeyUp)
 	},
 
-  computed: {
+  watch: {
 
-    parent(){
-      return {
-        items: this.items
-      }
-    }
 
-  },
+  }
 
 }
 

package/src/components/TreeViewItem.vue

@@ -1,26 +1,22 @@
 <template>
-	<div>
+	<div @mousemove="hoverMouseOver"
+			 @mouseout="hoverMouseOut">
 		<div ref="item"
          :class="itemClass"
-         @mousemove="hoverMouseOver"
-         @mouseout="hoverMouseOut">
-
-			<div class="flex-1 flex flex-row items-center px-2">
-        <div @mousedown="mouseDown" class="pr-3">
-          <svg width="11" height="11" 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>
-
-        <button type="button" class="pr-2"
-                v-if="Array.isArray((item ?? {}).items) && item.items.length > 0"
-                @click="childCollapsed = !childCollapsed">
-          <svg v-if="!childCollapsed" width="14" height="14" class="fill-text-300 pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"/></svg>
-          <svg v-else width="14" height="14" class="fill-text-300 pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><path d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"/></svg>
-        </button>
+				 @mousedown="mouseDown">
+
+      <button type="button" class="p-1 w-[18px]"
+              v-if="Array.isArray((item ?? {}).items) && item.items.length > 0"
+							@click="childCollapsed = !childCollapsed">
+				<svg v-if="!childCollapsed" width="14" height="14" class="fill-text-300 pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"/></svg>
+				<svg v-else width="14" height="14" class="fill-text-300 pointer-events-none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 192 512"><path d="M0 384.662V127.338c0-17.818 21.543-26.741 34.142-14.142l128.662 128.662c7.81 7.81 7.81 20.474 0 28.284L34.142 398.804C21.543 411.404 0 402.48 0 384.662z"/></svg>
+			</button>
 
-        <slot :item="item" :parent="parent" :index="index" :depth="depth"></slot>
+			<div class="flex-1 flex px-3">
+        <slot :item="item" :parent="parent"></slot>
       </div>
 
-      <div class="hidden flex flex-row items-center">
+      <div class="flex flex-row items-center">
         <button v-if="item && Array.isArray(item.items)"
                 type="button"
                 class="p-1"
@@ -37,17 +33,20 @@
 
 		</div>
     <div ref="container"
-         v-show="item && Array.isArray(item.items) && !childCollapsed" class="ml-6">
+         v-show="item && Array.isArray(item.items) && !childCollapsed" class="ml-6"
+         @mousemove.stop=""
+         @mouseout.stop="">
       <TreeViewItem v-for="(subItem, index) in item.items"
                     :item="subItem"
-                    :config="config"
-                    :parent="item"
-                    :index="index"
-                    :depth="depth + 1"
+                    :parent="item.items"
                     :selected-item="selectedItem"
+                    @moveup="moveUp(subItem)"
+                    @movedown="moveDown(subItem)"
+                    @remove="confirm({ title:$t('Remove this item?'), onConfirm: () => { item.items.splice(index, 1);$emit('change') }})"
+                    @add="(items) => $emit('add', items)"
                     @change="$emit('change')">
-        <template #default="{ item, parent, index, depth }">
-          <slot :item="item" :parent="parent" :index="index" :depth="depth"></slot>
+        <template #default="{ item }">
+          <slot :item="item"></slot>
         </template>
       </TreeViewItem>
     </div>
@@ -63,17 +62,17 @@ export default{
 
   name: 'TreeViewItem',
 
-	emits: [ 'change' ],
+	emits: [ 'add', 'change', 'moveup', 'movedown', 'remove' ],
 
-	inject: [ 'confirm', 'toast' ],
+	inject: [ 'confirm', 'toast', 'store', 'getConfig' ],
 
 	props: {
-    config: Object,
 		item: Object,
-		parent: Object,
-		index: Number,
-    depth: Number,
+
+		parent: Array,
+
 		selectedItem: Object,
+
 		state: {
 			type: [ Number, String ],
 			default: 1
@@ -82,6 +81,27 @@ export default{
 
 	methods: {
 
+		moveDown(item){
+			const idx = this.item.items.indexOf(item)
+			if(idx < this.item.items.length - 1){
+				this.item.items.splice(idx + 1, 0, this.item.items.splice(idx, 1)[0])
+				this.$emit('change')
+			}
+		},
+
+		moveUp(item){
+			const idx = this.item.items.indexOf(item)
+			if(idx - 1 >= 0){
+				this.item.items.splice(idx - 1, 0, this.item.items.splice(idx, 1)[0])
+				this.$emit('change')
+			}
+		},
+
+		add(){
+			this.$emit('add', this.item.items)
+      this.childCollapsed = false
+		},
+
 		mouseDown(e){
       if(!this.$el || this.$el.nodeType !== 1) return
 
@@ -99,8 +119,9 @@ export default{
 
 			const mouseMove = (e) => {
 				const distanceX = e.clientX - startX
+				const distanceY = e.clientY - startY
 
-        if(!dragged.cloned){
+        if(!dragged.cloned && Math.abs(distanceY) > 10){
           const cloned = this.$el.cloneNode(true)
           cloned.style.position = 'absolute'
           cloned.style.left = rect.x + "px"
@@ -129,62 +150,56 @@ export default{
 				window.removeEventListener('mousemove', mouseMove)
 				window.removeEventListener('mouseup', mouseUp)
 
-        if(dragged){
+				if(dragged && dragged.parent && dragged.targetParent){
+
+					const targetIdx = dragged.targetParent.indexOf(dragged.target)
+					const moveDirection = e.clientY < dragged.startY ? -1 : 1
+          const sameParent = dragged.parent === dragged.targetParent
 
-          if(dragged.parent && dragged.targetParent){
+					let destIdx = undefined
 
-            if(dragged.dragArea === 3){
-              dragged.target.items.push(dragged.parent.items.splice(dragged.parent.items.indexOf(dragged.item), 1)[0])
-              this.$emit('change')
+          if(dragged.dragArea === 1){
+            if(sameParent){
+              if(moveDirection === -1){
+                destIdx = targetIdx
+              }
+              else{
+                destIdx = targetIdx - 1
+              }
             }
             else{
-              const targetIdx = dragged.targetParent.items.indexOf(dragged.target)
-              const moveDirection = e.clientY < dragged.startY ? -1 : 1
-              const sameParent = dragged.parent === dragged.targetParent
-
-              let destIdx = undefined
-
-              if(dragged.dragArea === 1){
-                if(sameParent){
-                  if(moveDirection === -1){
-                    destIdx = targetIdx
-                  }
-                  else{
-                    destIdx = targetIdx - 1
-                  }
-                }
-                else{
-                  destIdx = targetIdx
-                }
+              destIdx = targetIdx
+            }
+          }
+          else if(dragged.dragArea === 2){
+            if(sameParent){
+              if(moveDirection === -1){
+                destIdx = targetIdx + 1
               }
-              else if(dragged.dragArea === 2){
-                if(sameParent){
-                  if(moveDirection === -1){
-                    destIdx = targetIdx + 1
-                  }
-                  else{
-                    destIdx = targetIdx
-                  }
-                }
-                else{
-                  if(moveDirection === -1){
-                    destIdx = targetIdx + 1
-                  }
-                  else{
-                    destIdx = targetIdx + 1
-                  }
-                }
+              else{
+                destIdx = targetIdx
               }
-
-              if(destIdx !== undefined){
-                dragged.targetParent.items.splice(destIdx, 0,
-                    dragged.parent.items.splice(dragged.parent.items.indexOf(dragged.item), 1)[0])
-                this.$emit('change')
+            }
+            else{
+              if(moveDirection === -1){
+                destIdx = targetIdx + 1
+              }
+              else{
+                destIdx = targetIdx + 1
               }
             }
+          }
 
+          if(destIdx !== undefined){
+            dragged.targetParent.splice(destIdx, 0,
+                dragged.parent.splice(dragged.parent.indexOf(dragged.item), 1)[0])
+            this.$emit('change')
           }
-        }
+          else if(dragged.dragArea === 3){
+            dragged.targetParent.push(dragged.parent.splice(dragged.parent.indexOf(dragged.item), 1)[0])
+            this.$emit('change')
+          }
+				}
 
 				if(guide1 && guide1.parentNode){
 					guide1.parentNode.removeChild(guide1)
@@ -284,14 +299,11 @@ export default{
 	computed: {
 
     componentStore(){
-      if(this.config){
-        if(!this.config.components)
-          this.config.components = {}
+      if(this.store && this.store.components){
+        if(!this.store.components.treeviewitem)
+          this.store.components.treeviewitem = {}
 
-        if(!this.config.components.treeviewitem)
-          this.config.components.treeviewitem = {}
-
-        return this.config.components.treeviewitem
+        return this.store.components.treeviewitem
       }
     },
 
@@ -313,12 +325,15 @@ export default{
 
 	data(){
 		return {
-			childCollapsed: true
+			childCollapsed: true,
+			hvm: null
 		}
 	},
 
   mounted() {
-    this.childCollapsed = this.componentStore ? this.componentStore[this.item.uid] : this.childCollapsed
+    if(this.componentStore){
+      this.childCollapsed = this.componentStore[this.item.uid] ?? this.childCollapsed
+    }
   },
 
   watch: {
@@ -333,7 +348,6 @@ export default{
     },
 
     childCollapsed(to){
-
       if(this.item.uid && this.componentStore){
         this.componentStore[this.item.uid] = to
       }
@@ -400,7 +414,7 @@ export default{
 }
 
 .guide{
-	@apply h-[2px] bg-primary rounded-lg;
+	@apply h-[1px] bg-primary rounded-lg;
 }
 
 .item.dragInto{

package/src/utils/helpers.js

@@ -140,11 +140,11 @@ const strSlug = (title, separator) => {
   return title.replace(new RegExp('^[' + separator + '\\s]+|[' + separator + '\\s]+$', 'g'),'');
 }
 
-const strVars = (text, vars) => {
+const strVars = (text, vars, opt = { emptyUndefined:true }) => {
 
   (text.match(/\{.*?(?=\})\}/gi) ?? []).forEach((match) => {
     const key = match.substring(1, match.length - 1)
-    const value = vars[key] ?? ''
+    const value = vars[key] ?? (opt?.emptyUndefined ? '' : `{${key}}`)
     text = text.replace(match, value)
   })
 

package/src/utils/helpers.mjs

@@ -84,11 +84,11 @@ const parseBoolean = function(exp){
       exp.toLowerCase() : exp)
 }
 
-const strVars = function(text, vars){
+const strVars = function(text, vars, opt = { emptyUndefined:true }){
 
   (text.match(/\{.*?(?=\})\}/gi) ?? []).forEach((match) => {
     const key = match.substring(1, match.length - 1)
-    const value = vars[key] ?? ''
+    const value = vars[key] ?? (opt?.emptyUndefined ? '' : `{${key}}`)
     text = text.replace(match, value)
   })
 
@@ -381,7 +381,8 @@ export {
   removeStyleFromTag,
   createFormData,
   unslugAndCapitalize,
-  applyDatasourceReplacer
+  applyDatasourceReplacer,
+  strVars
 }
 
 function observeInit(){

package/src/utils/wss.js

@@ -97,12 +97,7 @@ class WSS extends EventEmitter2{
     this._opt = opt
     this._instance = new WebSocket.Server(opt);
 
-    this._client = redis.createClient({
-      socket: {
-        host: process.env.REDIS_HOST ?? '127.0.0.1',
-        port: process.env.REDIS_PORT ?? 6379
-      }
-    })
+    this._client = redis.createClient()
     this._client.connect().then()
 
     this._instance.on('connection', async (socket, req) => {

package/src/widgets/ArticleSetting.vue

@@ -1,7 +1,11 @@
 <template>
-	<div>
+	<div :class="$style.comp">
 
     <div class="flex flex-col gap-4" v-if="viewType === ''">
+      <div>
+        <strong class="flex-1 text-text-400">Article</strong>
+        <div class="h-[1px] bg-text-100 mt-2"></div>
+      </div>
 
       <div class="overflow-x-auto">
         <label class="text-text-400">Action</label>
@@ -236,6 +240,12 @@
 
     </div>
 
+		<ComponentSetting2 :item="item"
+											:view-type="viewType"
+											:view-types="viewTypes"
+											defaultDisplay="block"
+											@change="$emit('change')" />
+
 	</div>
 </template>
 
@@ -247,9 +257,9 @@ import axios from "axios";
 
 export default{
 
-	emits: [ 'change' ],
+	emits: [ 'change', 'postMessageToIframe' ],
 
-	inject: [ 'alert', 'viewTypes', 'postIframe', 'onPostMessageToIframe' ],
+	inject: [ 'alert', 'postIframe' ],
 
 	props: {
 
@@ -258,7 +268,9 @@ export default{
 			required: true
 		},
 
-    config: Object,
+		viewType: String,
+
+		viewTypes: Array,
 
 	},
 
@@ -329,7 +341,7 @@ export default{
 				case 'bold':
 				case 'italic':
 				default:
-					this.onPostMessageToIframe(this.item.uid, { action:'format', type, value })
+					this.$emit('postMessageToIframe', this.item.uid, { action:'format', type, value })
 					break
 
 			}
@@ -370,27 +382,27 @@ export default{
 		},
 
 		insertTable(){
-      this.onPostMessageToIframe(this.item.uid, { action:'insertTable' })
+			this.$emit('postMessageToIframe', this.item.uid, { action:'insertTable' })
 		},
 
 		removeFormat(){
-			this.onPostMessageToIframe(this.item.uid, { action:'removeFormat' })
+			this.$emit('postMessageToIframe', this.item.uid, { action:'removeFormat' })
 		},
 
 		addTableColumn(){
-			this.onPostMessageToIframe(this.item.uid, { action:'addTableColumn' })
+			this.$emit('postMessageToIframe', this.item.uid, { action:'addTableColumn' })
 		},
 
 		addTableRow(){
-			this.onPostMessageToIframe(this.item.uid, { action:'addTableRow' })
+			this.$emit('postMessageToIframe', this.item.uid, { action:'addTableRow' })
 		},
 
 		removeTableColumn(){
-			this.onPostMessageToIframe(this.item.uid, { action:'removeTableColumn' })
+			this.$emit('postMessageToIframe', this.item.uid, { action:'removeTableColumn' })
 		},
 
 		removeTableRow(){
-			this.onPostMessageToIframe(this.item.uid, { action:'removeTableRow' })
+			this.$emit('postMessageToIframe', this.item.uid, { action:'removeTableRow' })
 		},
 
 		setSubAction(subAction){
@@ -436,10 +448,6 @@ export default{
 			return this.item.props.textColor
 		},
 
-    viewType(){
-      return this.config.viewType
-    },
-
 	},
 
 	data(){
@@ -451,3 +459,11 @@ export default{
 }
 
 </script>
+
+<style module>
+
+.comp{
+	@apply flex flex-col gap-6;
+}
+
+</style>