@mixd-id/web-scaffold 0.2.240702 → 0.2.240703

package/src/widgets/WebPageBuilder4/MarginSetting.vue

@@ -7,7 +7,8 @@
                          class="items-end"
                          item-class="max-w-[40px]"
                          v-model="margin[index]"
-                         :prefix="viewType" />
+                         :prefix="viewType"
+                         :readonly="readonly" />
     </div>
   </div>
 </template>
@@ -30,6 +31,8 @@ export default{
 
     index: Number,
 
+    readonly: [ Boolean, Number ],
+
     viewType: String,
 
   },

package/src/widgets/WebPageBuilder4/MultiValueSetting.vue

@@ -16,7 +16,8 @@
     <div class="flex flex-row gap-1" :class="`grid-cols-${type}`">
       <select @change="applyValue"
               v-model="value[0]"
-              :class="itemClass">
+              :class="itemClass"
+              :disabled="readonly">
         <option value="">-</option>
         <option v-for="value in values"
                 :value="`${prefix}${keys[type][0]}${Array.isArray(value) ? value[0] : value}`">
@@ -27,7 +28,8 @@
       <select v-if="type > 0"
               @change="applyValue"
               v-model="value[1]"
-              :class="itemClass">
+              :class="itemClass"
+              :disabled="readonly">
         <option value="">-</option>
         <option v-for="value in values"
                 :value="`${prefix}${keys[type][1]}${Array.isArray(value) ? value[0] : value}`">
@@ -38,7 +40,8 @@
       <select v-if="type > 1"
               @change="applyValue"
               v-model="value[2]"
-              :class="itemClass">
+              :class="itemClass"
+              :disabled="readonly">
         <option value="">-</option>
         <option v-for="value in values"
                 :value="`${prefix}${keys[type][2]}${Array.isArray(value) ? value[0] : value}`">
@@ -49,7 +52,8 @@
       <select v-if="type > 1"
               @change="applyValue"
               v-model="value[3]"
-              :class="itemClass">
+              :class="itemClass"
+              :disabled="readonly">
         <option value="">-</option>
         <option v-for="value in values"
                 :value="`${prefix}${keys[type][3]}${Array.isArray(value) ? value[0] : value}`">
@@ -87,6 +91,8 @@ export default{
 
     prefix: String,
 
+    readonly: [ Boolean, Number ],
+
     values: {
       type: Array,
       default: [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 ]
@@ -104,6 +110,8 @@ export default{
     },
 
     setType(type){
+      if(this.readonly) return
+
       this.type = type
       this.value = []
     },

package/src/widgets/WebPageBuilder4/PaddingSetting.vue

@@ -5,6 +5,7 @@
       <MultiValueSetting class="items-end"
                          item-class="max-w-[40px]"
                          v-model="padding[index]"
+                         :readonly="readonly"
                          :prefix="viewType" />
     </div>
   </div>
@@ -27,6 +28,9 @@ export default {
     },
 
     index: Number,
+
+    readonly: [ Boolean, Number ],
+
     viewType: String,
 
   },

package/src/widgets/WebPageBuilder4/TreeView.vue

@@ -4,10 +4,12 @@
                   :parent="items"
                   :config="config"
                   :item="item"
+                  :depth="0"
+                  :readonly="readonly"
                   :value="modelValue"
                   @change="uid => $emit('update:modelValue', uid)">
-      <template #item="{ item, parent }">
-        <slot name="item" :item="item" :parent="parent"></slot>
+      <template #item="{ item, parent, depth }">
+        <slot name="item" :item="item" :parent="parent" :depth="depth"></slot>
       </template>
     </TreeViewItem>
 	</div>
@@ -28,7 +30,8 @@ export default{
     items: Array,
     config: Object,
     modelValue: String,
-  },
+    readonly: Boolean
+  }
 
 }
 

package/src/widgets/WebPageBuilder4/TreeViewItem.vue

@@ -9,11 +9,11 @@
       <button type="button" class="p-1 px-2 w-[18px]"
               v-if="Array.isArray((item ?? {}).items) && item.items.length > 0"
               @click="currentConfig.childCollapsed = !currentConfig.childCollapsed">
-        <svg v-if="!currentConfig.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>
+        <svg v-if="!currentConfig.childCollapsed" width="14" height="14" class="fill-text-300 hover:fill-primary" 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 hover:fill-primary" 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">
-        <slot name="item" :item="item" :parent="parent"></slot>
+        <slot name="item" :item="item" :parent="parent" :depth="depth"></slot>
       </div>
     </div>
 
@@ -22,12 +22,14 @@
          class="ml-6 flex flex-col gap-1">
       <TreeViewItem v-for="subItem in item.items"
                     :parent="item.items"
+                    :depth="depth + 1"
                     :config="config"
+                    :readonly="readonly"
                     @change="(uid) => $emit('change', uid)"
                     :value="value"
                     :item="subItem">
-        <template #item="{ item, parent }">
-          <slot name="item" :item="item" :parent="parent"></slot>
+        <template #item="{ item, parent, depth }">
+          <slot name="item" :item="item" :parent="parent" :depth="depth"></slot>
         </template>
       </TreeViewItem>
     </div>
@@ -36,8 +38,6 @@
 
 <script>
 
-import {copyToClipboard} from "../../utils/helpers.mjs";
-
 let dragged = null
 let guide1 = null
 
@@ -46,6 +46,28 @@ export default{
     TreeViewItem: () => import('./TreeViewItem.vue')
   },
 
+  emits: [ 'change' ],
+
+  name: 'TreeViewItem',
+
+  props: {
+    item: {
+      type: Object,
+      required: true,
+      validator(v){
+        return 'uid' in v
+      }
+    },
+    depth: Number,
+    readonly: Boolean,
+    parent: Array,
+    config: {
+      type: Object,
+      default: () => ({})
+    },
+    value: String,
+  },
+
   computed: {
 
     currentConfig(){
@@ -56,10 +78,6 @@ export default{
 
   },
 
-  emits: [ 'change' ],
-
-  inject: [ 'toast' ],
-
   methods: {
 
     createGuide(){
@@ -140,28 +158,9 @@ export default{
       delete dragged.targetParent
     },
 
-    onKeyDown(e){
-      if((e.ctrlKey || e.metaKey)){
-
-        if(e.keyCode === 67){
-          e.preventDefault()
-
-          copyToClipboard(JSON.stringify(this.item))
-              .then(() => this.toast('Copied to clipboard'))
-
-          this.log(e)
-        }
-        else if(e.keyCode === 86){
-          e.preventDefault()
-          e.stopPropagation()
-          console.log(this.item)
-        }
-
-      }
-    },
-
     mouseDown(e){
       if(!this.$el || this.$el.nodeType !== 1) return
+      if(this.readonly) return
 
       e.preventDefault()
 
@@ -210,8 +209,6 @@ export default{
 
         if(dragged && dragged.parent && dragged.targetParent){
 
-          console.log(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
@@ -276,30 +273,7 @@ export default{
       window.addEventListener('mouseup', mouseUp)
     },
 
-  },
-
-  mounted() {
-    //window.addEventListener('keydown', this.onKeyDown)
-  },
-
-  name: 'TreeViewItem',
-
-  props: {
-    item: {
-      type: Object,
-      required: true,
-      validator(v){
-        return 'uid' in v
-      }
-    },
-    parent: Array,
-    config: Object,
-    value: String,
-  },
-
-  unmounted() {
-    //window.removeEventListener('keydown', this.onKeyDown)
-  },
+  }
 
 }
 
@@ -317,7 +291,7 @@ export default{
 
 .item{
   @apply flex flex-row items-center;
-  @apply bg-base-500 rounded-lg;
+  @apply bg-base-500 hover:bg-text-50 rounded-lg;
 }
 .item.active{
   @apply bg-text-50;

package/tailwind.config.js

@@ -86,7 +86,7 @@ module.exports = {
 
     'h-1', 'h-2', 'h-3', 'h-4', 'h-5', 'h-6', 'h-7', 'h-8', 'h-9',
     'h-10', 'h-11', 'h-12', 'h-14', 'h-16', 'h-20', 'h-24', 'h-32', 'h-36', 'h-48',
-    'h-10vh', 'h-20vh', 'h-30vh', 'h-40vh', 'h-50vh', 'h-60vh', 'h-70vh', 'h-80vh', 'h-90vh', 'h-100vh',
+    'h-[10vh]', 'h-[20vh]', 'h-[30vh]', 'h-[40vh]', 'h-[50vh]', 'h-[60vh]', 'h-[70vh]', 'h-[80vh]', 'h-[90vh]', 'h-[100vh]',
 
     'min-h-0', 'min-h-full', 'min-h-screen', 'min-h-min', 'min-h-max', 'min-h-fit',
     'min-h-[90vh]', 'min-h-[80vh]', 'min-h-[70vh]', 'min-h-[60vh]', 'min-h-[50vh]', 'min-h-[40vh]',
@@ -316,7 +316,7 @@ module.exports = {
 
     'md:h-1', 'md:h-2', 'md:h-3', 'md:h-4', 'md:h-5', 'md:h-6', 'md:h-7', 'md:h-8', 'md:h-9',
     'md:h-10', 'md:h-11', 'md:h-12', 'md:h-14', 'md:h-16', 'md:h-20', 'md:h-24', 'md:h-32', 'md:h-36', 'md:h-48',
-    'md:h-10vh', 'md:h-20vh', 'md:h-30vh', 'md:h-40vh', 'md:h-50vh', 'md:h-60vh', 'md:h-70vh', 'md:h-80vh', 'md:h-90vh', 'md:h-100vh',
+    'md:h-[10vh]', 'md:h-[20vh]', 'md:h-[30vh]', 'md:h-[40vh]', 'md:h-[50vh]', 'md:h-[60vh]', 'md:h-[70vh]', 'md:h-[80vh]', 'md:h-[90vh]', 'md:h-[100vh]',
 
     'md:min-h-0', 'md:min-h-full', 'md:min-h-screen', 'md:min-h-md:min', 'md:min-h-max', 'md:min-h-fit',
     'md:min-h-[90vh]', 'md:min-h-[80vh]', 'md:min-h-[70vh]', 'md:min-h-[60vh]', 'md:min-h-[50vh]', 'md:min-h-[40vh]',