@mixd-id/web-scaffold 0.1.230406300 → 0.1.230406301

package/docs/components/Header2.md

@@ -0,0 +1,16 @@
+# Header 2
+
+### Properties
+| Name                     | Type   | Default | Description                |
+|--------------------------|--------|---------|----------------------------|
+| `logo`                   | Array  | []      | Responsive Array of Object |
+| `logo[].url`             | String |         | Logo url                   |
+| `icons`                  | Array  | {}      | Responsive Array of Object |
+| `icons[].items`          | Array  | {}      | Array of Object            |
+| `icons[].items[].icon`   | String |         | (required) icon value      |
+| `icons[].items[].target` | String |    | (required) target value    |
+| `icons[].items[].text`   | String | route   | route, search              |
+| `menu[].items[].icon`    | String |      | svg, image                 |
+| `menu[].items[].text`    | String |      |                  |
+| `menu[].items[].target`  | String |      |               |
+| `menu[].items[].items`   | Array  |      |            |

package/package.json

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

package/src/components/Checkbox.vue

@@ -61,6 +61,7 @@ export default {
           return this.modelValue.includes(this.value)
 				}
         else if(this.modelValue){
+          console.log(2, this.value, this.modelValue)
           return this.value === this.modelValue
 				}
 				else{

package/src/components/TreeView.vue

@@ -1,17 +1,17 @@
 <template>
 	<div :class="$style.comp">
 
-		<TreeViewItem v-for="(item, index) in modelValue"
+		<TreeViewItem v-for="(item, index) in items"
 									:item="item"
-									:parent="modelValue"
-									:selected-item="selectedItem"
+                  :index="index"
+                  :parent="parent"
+                  :depth="0"
+									:model-value="modelValue"
 									@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>
+									@change="$emit('change')">
+			<template #default="{ item, parent, index, depth }">
+				<slot :item="item" :parent="parent" :index="index" :depth="depth"></slot>
 			</template>
 		</TreeViewItem>
 
@@ -27,23 +27,23 @@ export default{
 
 	components: {TreeViewItem},
 
-	emits: [ 'add', 'change', 'paste' ],
+	emits: [ 'change', 'paste' ],
 
 	inject: [ 'confirm', 'toast' ],
 
 	props: {
 
-		modelValue: Array,
+		items: Array,
 
-		selectedItem: Object
+		modelValue: Object
 
 	},
 
 	methods: {
 
 		copy(){
-			if(this.selectedItem){
-				copyToClipboard(JSON.stringify(this.selectedItem))
+			if(this.modelValue){
+				copyToClipboard(JSON.stringify(this.modelValue))
 					.then(() => this.toast('Copied to clipboard'))
 			}
 		},
@@ -59,23 +59,23 @@ export default{
 		},
 
 		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])
+			const idx = this.items.indexOf(item)
+			if(idx < this.items.length - 1){
+				this.items.splice(idx + 1, 0, this.items.splice(idx, 1)[0])
 				this.$emit('change')
 			}
 		},
 
 		moveUp(item){
-			const idx = this.modelValue.indexOf(item)
+			const idx = this.items.indexOf(item)
 			if(idx - 1 >= 0){
-				this.modelValue.splice(idx - 1, 0, this.modelValue.splice(idx, 1)[0])
+				this.items.splice(idx - 1, 0, this.items.splice(idx, 1)[0])
 				this.$emit('change')
 			}
 		},
 
 		add(){
-			this.$emit('add', this.modelValue)
+			this.$emit('add', this.items)
 		},
 
 	},
@@ -84,6 +84,16 @@ export default{
 		window.addEventListener('keydown', this.onKeyUp)
 	},
 
+  computed: {
+
+    parent(){
+      return {
+        items: this.items
+      }
+    }
+
+  },
+
   watch: {
 
 

package/src/components/TreeViewItem.vue

@@ -1,22 +1,26 @@
 <template>
-	<div @mousemove="hoverMouseOver"
-			 @mouseout="hoverMouseOut">
+	<div>
 		<div ref="item"
          :class="itemClass"
-				 @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>
+         @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>
 
-			<div class="flex-1 flex px-3">
-        <slot :item="item" :parent="parent"></slot>
+        <slot :item="item" :parent="parent" :index="index" :depth="depth"></slot>
       </div>
 
-      <div class="flex flex-row items-center">
+      <div class="hidden flex flex-row items-center">
         <button v-if="item && Array.isArray(item.items)"
                 type="button"
                 class="p-1"
@@ -33,20 +37,18 @@
 
 		</div>
     <div ref="container"
-         v-show="item && Array.isArray(item.items) && !childCollapsed" class="ml-6"
-         @mousemove.stop=""
-         @mouseout.stop="">
+         v-show="item && Array.isArray(item.items) && !childCollapsed" class="ml-6">
       <TreeViewItem v-for="(subItem, index) in item.items"
                     :item="subItem"
-                    :parent="item.items"
-                    :selected-item="selectedItem"
+                    :parent="item"
+                    :index="index"
+                    :depth="depth + 1"
+                    :model-value="modelValue"
                     @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 }">
-          <slot :item="item"></slot>
+        <template #default="{ item, parent, index, depth }">
+          <slot :item="item" :parent="parent" :index="index" :depth="depth"></slot>
         </template>
       </TreeViewItem>
     </div>
@@ -62,17 +64,17 @@ export default{
 
   name: 'TreeViewItem',
 
-	emits: [ 'add', 'change', 'moveup', 'movedown', 'remove' ],
+	emits: [ 'change', 'moveup', 'movedown' ],
 
-	inject: [ 'confirm', 'toast', 'store', 'getConfig' ],
+	inject: [ 'confirm', 'toast' ],
 
 	props: {
+    config: Object,
 		item: Object,
-
-		parent: Array,
-
-		selectedItem: Object,
-
+		parent: Object,
+		index: Number,
+    depth: Number,
+		modelValue: Object,
 		state: {
 			type: [ Number, String ],
 			default: 1
@@ -119,9 +121,8 @@ export default{
 
 			const mouseMove = (e) => {
 				const distanceX = e.clientX - startX
-				const distanceY = e.clientY - startY
 
-        if(!dragged.cloned && Math.abs(distanceY) > 10){
+        if(!dragged.cloned){
           const cloned = this.$el.cloneNode(true)
           cloned.style.position = 'absolute'
           cloned.style.left = rect.x + "px"
@@ -150,56 +151,62 @@ export default{
 				window.removeEventListener('mousemove', mouseMove)
 				window.removeEventListener('mouseup', mouseUp)
 
-				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){
 
-					let destIdx = undefined
+          if(dragged.parent && dragged.targetParent){
 
-          if(dragged.dragArea === 1){
-            if(sameParent){
-              if(moveDirection === -1){
-                destIdx = targetIdx
-              }
-              else{
-                destIdx = targetIdx - 1
-              }
+            if(dragged.dragArea === 3){
+              dragged.target.items.push(dragged.parent.items.splice(dragged.parent.items.indexOf(dragged.item), 1)[0])
+              this.$emit('change')
             }
             else{
-              destIdx = targetIdx
-            }
-          }
-          else if(dragged.dragArea === 2){
-            if(sameParent){
-              if(moveDirection === -1){
-                destIdx = targetIdx + 1
+              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
+                }
               }
-              else{
-                destIdx = targetIdx
+              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{
-              if(moveDirection === -1){
-                destIdx = targetIdx + 1
-              }
-              else{
-                destIdx = targetIdx + 1
+
+              if(destIdx !== undefined){
+                dragged.targetParent.items.splice(destIdx, 0,
+                    dragged.parent.items.splice(dragged.parent.items.indexOf(dragged.item), 1)[0])
+                this.$emit('change')
               }
             }
-          }
 
-          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)
@@ -299,16 +306,19 @@ export default{
 	computed: {
 
     componentStore(){
-      if(this.store && this.store.components){
-        if(!this.store.components.treeviewitem)
-          this.store.components.treeviewitem = {}
+      if(this.cConfig){
+        if(!this.cConfig.components)
+          this.cConfig.components = {}
+
+        if(!this.cConfig.components.treeviewitem)
+          this.cConfig.components.treeviewitem = {}
 
-        return this.store.components.treeviewitem
+        return this.cConfig.components.treeviewitem
       }
     },
 
     isSelected(){
-      return this.selectedItem === this.item
+      return this.modelValue === this.item
     },
 
 		itemClass(){
@@ -326,14 +336,13 @@ export default{
 	data(){
 		return {
 			childCollapsed: true,
-			hvm: null
+			hvm: null,
+      cConfig: {}
 		}
 	},
 
   mounted() {
-    if(this.componentStore){
-      this.childCollapsed = this.componentStore[this.item.uid] ?? this.childCollapsed
-    }
+    this.childCollapsed = this.componentStore ? this.componentStore[this.item.uid] : this.childCollapsed
   },
 
   watch: {
@@ -348,6 +357,7 @@ export default{
     },
 
     childCollapsed(to){
+
       if(this.item.uid && this.componentStore){
         this.componentStore[this.item.uid] = to
       }
@@ -414,7 +424,7 @@ export default{
 }
 
 .guide{
-	@apply h-[1px] bg-primary rounded-lg;
+	@apply h-[2px] bg-primary rounded-lg;
 }
 
 .item.dragInto{

package/src/index.js

@@ -1,4 +1,4 @@
-import {defineAsyncComponent, reactive, ref} from "vue"
+import {defineAsyncComponent, reactive} from "vue"
 import {observeInit} from './utils/helpers.mjs'
 import throttle from "lodash/throttle"
 import dayjs from "dayjs";
@@ -162,6 +162,26 @@ const formatDate = (date, format = 'YYYY-MM-DD HH:mm:ss') => {
 
 const util = {
 
+  addHTMLAttribute: (html, attr) => {
+
+    const splits = (html ?? '').split(' ')
+
+    if(splits.length > 0 && splits[0]){
+      const htmlAttr = []
+      for(let key in attr){
+        htmlAttr.push(`${key}="${attr[key]}"`)
+      }
+
+      html = [
+        splits[0],
+        ...htmlAttr,
+        ...splits.slice(1)
+      ].join(' ')
+    }
+
+    return html
+  },
+
   dragResize: (e, callback) => {
 
     e.preventDefault()
@@ -362,7 +382,31 @@ export default{
     app.config.globalProperties.time = consoleTime
     app.config.globalProperties.timeLog = consoleTimeLog
     app.config.globalProperties.timeEnd = consoleTimeEnd
-    app.config.globalProperties.$device = reactive({})
+    app.config.globalProperties.$device = reactive({
+
+      getValue: (arr) => {
+        if(Array.isArray(arr)){
+          let index = 0
+          switch(app.config.globalProperties.$device){
+            case 'md':
+              index = 1
+              break
+            case 'lg':
+              index = 2
+              break
+          }
+
+          for(let i = index ; i >= 0 ; i--){
+            if(arr && arr[i])
+              return arr[i]
+          }
+        }
+      },
+
+      type: 'mobile',
+      media: '',
+
+    })
     app.config.globalProperties.$isDebugMode = () => {
       if(!('isDebugMode' in privateVars)){
         privateVars.isDebugMode = location.search.indexOf('debug-mode') >= 0 ||
@@ -520,6 +564,7 @@ export default{
     app.component('CountdownSetting', defineAsyncComponent(() => import("./widgets/CountdownSetting.vue")))
     app.component('ComponentSetting', defineAsyncComponent(() => import("./widgets/ComponentSetting.vue")))
     app.component('ComponentSetting2', defineAsyncComponent(() => import("./widgets/ComponentSetting2.vue")))
+    app.component('ComponentSetting3', defineAsyncComponent(() => import("./widgets/ComponentSetting3.vue")))
     app.component('ContactForm', defineAsyncComponent(() => import("./widgets/ContactForm.vue")))
     app.component('ContactFormSetting', defineAsyncComponent(() => import("./widgets/ContactFormSetting.vue")))
     app.component('EmbeddedVideo', defineAsyncComponent(() => import("./widgets/EmbeddedVideo.vue")))
@@ -540,6 +585,7 @@ export default{
     app.component('LinkSetting', defineAsyncComponent(() => import("./widgets/LinkSetting.vue")))
     app.component('ImageSetting', defineAsyncComponent(() => import("./widgets/ImageSetting.vue")))
     app.component('MarginSetting', defineAsyncComponent(() => import("./widgets/MarginSetting.vue")))
+    app.component('MarginPaddingSetting', defineAsyncComponent(() => import("./widgets/MarginPaddingSetting.vue")))
     app.component('MultiValueSetting', defineAsyncComponent(() => import("./widgets/MultiValueSetting.vue")))
     app.component('MultiValueSetting2', defineAsyncComponent(() => import("./widgets/MultiValueSetting2.vue")))
     app.component('PaddingSetting', defineAsyncComponent(() => import("./widgets/PaddingSetting.vue")))
@@ -569,6 +615,19 @@ export default{
     app.component('PresetBarPivotColumnEdit', defineAsyncComponent(() => import("./widgets/PresetBarPivotColumnEdit.vue")))
     app.component('LogViewer', defineAsyncComponent(() => import("./widgets/LogViewer.vue")))
     app.component('ColumnSelector', defineAsyncComponent(() => import("./widgets/ColumnSelector.vue")))
+    app.component('ComponentPropertySelector', defineAsyncComponent(() => import("./widgets/ComponentPropertySelector.vue")))
+    app.component('ComponentPropertyLabel', defineAsyncComponent(() => import("./widgets/ComponentPropertyLabel.vue")))
+    app.component('LayoutSetting', defineAsyncComponent(() => import("./widgets/LayoutSetting.vue")))
+    app.component('BackgroundSetting', defineAsyncComponent(() => import("./widgets/BackgroundSetting.vue")))
+    app.component('BorderSetting', defineAsyncComponent(() => import("./widgets/BorderSetting.vue")))
+    app.component('TransitionSetting', defineAsyncComponent(() => import("./widgets/TransitionSetting.vue")))
+    app.component('EffectSetting', defineAsyncComponent(() => import("./widgets/EffectSetting.vue")))
+    app.component('SpacingSetting', defineAsyncComponent(() => import("./widgets/SpacingSetting.vue")))
+    app.component('SizingSetting', defineAsyncComponent(() => import("./widgets/SizingSetting.vue")))
+    app.component('TypographySetting', defineAsyncComponent(() => import("./widgets/TypographySetting.vue")))
+    app.component('FiltersSetting', defineAsyncComponent(() => import("./widgets/FiltersSetting.vue")))
+    app.component('IconSelector', defineAsyncComponent(() => import("./widgets/IconSelector.vue")))
+    app.component('MenuEditor', defineAsyncComponent(() => import("./widgets/MenuEditor.vue")))
   },
 
 }

package/src/stores/components.js

@@ -0,0 +1,36 @@
+import { defineStore } from 'pinia'
+
+export const useComponentState = defineStore('componentState', {
+
+  state: () => ({
+    version: 1,
+    isInit: false,
+  }),
+
+  actions: {
+
+    init(){
+      if(this.isInit) return
+      this.isInit = true
+
+      if(typeof localStorage !== 'undefined' && localStorage.getItem('componentState')){
+        try{
+          const store = JSON.parse(atob(localStorage.getItem('componentState')))
+          this.$patch(Object.assign(store, {}))
+        }
+        catch(e){
+
+        }
+      }
+
+      this.$subscribe(() => {
+        console.log('save')
+        localStorage.setItem('componentState', btoa(JSON.stringify(this.$state)))
+      })
+
+      console.log('componentState init completed')
+    },
+
+  }
+
+})

package/src/widgets/ArticleSetting.vue

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