@mixd-id/web-scaffold 0.2.240701 → 0.2.240703

package/src/widgets/UserActionBuilder.vue

@@ -7,24 +7,30 @@
 
       <div class="flex-1 flex flex-col gap-5 p-5">
 
-        <div>
+        <div class="flex flex-row items-center gap-2">
+          <div class="flex-1">
+            <h5>User</h5>
+          </div>
           <button type="button" @click="create">
             <svg width="21" height="21" class="fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M432 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z"/></svg>
           </button>
         </div>
 
-        <VirtualGrid :items="items" class="rounded-xl" container-class="divide-y divide-text-50">
-          <template #item="{ item }">
-            <div class="p-3 hover:bg-base-500 flex flex-row"
-                 :class="item.uid === actionUid ? 'bg-base-500' : 'bg-base-400'"
-                 @click="$emit('select', item.uid)">
-              <label class="flex-1 text-ellipsis overflow-hidden whitespace-nowrap">{{ item.name }}</label>
-              <button type="button" @click="$emit('remove', item )">
-                <svg width="14" height="14" class="fill-text-300 hover:fill-red-600" xmlns="http://www.w3.org/2000/svg" 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>
-          </template>
-        </VirtualGrid>
+        <div class="flex-1 flex flex-col">
+          <label class="text-text-300">Actions</label>
+          <VirtualGrid :items="items" class="flex-1 rounded-xl" container-class="divide-y divide-text-50">
+            <template #item="{ item }">
+              <div class="p-3 hover:bg-base-500 flex flex-row"
+                   :class="item.uid === actionUid ? 'bg-base-500' : 'bg-base-400'"
+                   @click="$emit('select', item.uid)">
+                <label class="flex-1 text-ellipsis overflow-hidden whitespace-nowrap">{{ item.name }}</label>
+                <button type="button" @click="$emit('remove', item )">
+                  <svg width="14" height="14" class="fill-text-300 hover:fill-red-600" xmlns="http://www.w3.org/2000/svg" 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>
+            </template>
+          </VirtualGrid>
+        </div>
       </div>
 
     </div>
@@ -34,6 +40,14 @@
       <div class="flex-1 flex flex-row">
         <div class="flex-1 flex flex-col">
 
+          <div class="p-2 flex flex-row items-center panel-400 border-b-[1px] border-text-50">
+            <h5 class="pl-3">{{ item?.name }}</h5>
+            <div class="flex-1"></div>
+            <div>
+              <Button class="px-6 rounded-full" @click="save">Save</Button>
+            </div>
+          </div>
+
           <div class="flex-1 overflow-auto">
             <div class="p-12" v-if="item">
               <UserActionItem :config="config"
@@ -43,150 +57,22 @@
             </div>
           </div>
 
+          <div class="p-5" v-if="item && item.type === 1 && item.key === 'onNewMessage'">
+            <UserActionConsole ref="console"
+                               @test-message="testMessage"
+                               @test-reset="$emit('test-reset')" />
+          </div>
+
         </div>
 
         <div :class="$style.rightPane" :style="rightStyle">
           <div :class="$style.rightBoundary" @mousedown="(e) => $util.dragResize(e, resize2)"></div>
 
-          <div v-if="selectedItem" class="p-5 flex flex-col gap-5">
-
-            <div class="flex flex-row gap-5">
-              <div class="flex-1">
-                <label>Name</label>
-                <Textbox v-model="selectedItem.name" class="mt-1"/>
-              </div>
-              <div>
-                <label>Enabled</label>
-                <Switch v-model="selectedItem.enabled" class="mt-1"/>
-              </div>
-            </div>
-
-            <div>
-              <label>Type</label>
-              <div class="flex flex-row gap-3 mt-1">
-                <Radio v-model="selectedItem.type" :value="1">Event</Radio>
-
-                <Radio v-model="selectedItem.type" :value="2">Time</Radio>
-              </div>
-            </div>
-
-            <div>
-              <label>Event</label>
-              <Dropdown class="mt-1" v-model="selectedItem.event">
-                <option v-for="(obj, key) in eventOpt" :value="key">{{ obj.text }}</option>
-              </Dropdown>
-            </div>
-
-            <div>
-              <div class="flex flex-row items-center gap-2">
-                <label class="flex-1">Condition</label>
-                <button type="button" class="text-primary" @click="addParams(selectedItem)">Add Condition</button>
-              </div>
-              <ListItem :items="selectedItem.params"
-                        @reorder="(from, to) => { selectedItem.params.splice(to, 0, selectedItem.params.splice(from, 1)[0]); }">
-                <template v-slot="{ item, index }">
-                  <div class="flex flex-row items-center gap-2 px-3">
-                    <div data-reorder>
-                      <svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M496 288H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm0-128H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16z"/></svg>
-                    </div>
-                    <div class="flex-1 flex flex-row gap-2">
-                      <Dropdown class="w-[100px]" v-model="item.key">
-                        <option v-for="column in eventOpt['message.create']['conditions']" :value="column.key">
-                          {{ column.text }}
-                        </option>
-                      </Dropdown>
-                      <div class="flex flex-row gap-2">
-                        <Dropdown class="w-[80px]" v-model="item.op">
-                          <option value="contains">Contains</option>
-                        </Dropdown>
-                        <Textbox class="w-[100px]" v-model="item.value"></Textbox>
-                      </div>
-                    </div>
-                    <div>
-                      <button type="button" @click="selectedItem.params.splice(index, 1)">
-                        <svg width="16" height="16" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"/></svg>
-                      </button>
-                    </div>
-                  </div>
-                </template>
-              </ListItem>
-            </div>
-
-            <div>
-              <div class="flex flex-row items-center gap-2">
-                <label class="flex-1">Output</label>
-                <button type="button" class="text-primary" @click="$refs.userActionOutput.create()">Add Output</button>
-              </div>
-              <ListItem :items="selectedItem.output"
-                        class="mt-1 border-[1px] rounded-xl border-text-200"
-                        container-class="divide-y divide-text-200"
-                        @reorder="(from, to) => { selectedItem.output.splice(to, 0, selectedItem.output.splice(from, 1)[0]); }">
-                <template v-slot="{ item, index }">
-                  <div class="flex flex-row items-center gap-3 px-3">
-                    <div data-reorder>
-                      <svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M496 288H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16zm0-128H16c-8.8 0-16 7.2-16 16v32c0 8.8 7.2 16 16 16h480c8.8 0 16-7.2 16-16v-32c0-8.8-7.2-16-16-16z"/></svg>
-                    </div>
-                    <div class="flex-1 p-2">
-                      {{ item.text }}
-                    </div>
-                    <button type="button" @click="selectedItem.output.splice(index, 1)">
-                      <svg width="16" height="16" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"/></svg>
-                    </button>
-                  </div>
-                </template>
-              </ListItem>
-
-              <UserActionOutput ref="userActionOutput" :outputs="outputs" @apply="addOutput">
-
-                <template #reply="{ output }">
-                  <slot name="output-reply">
-                    <div class="p-6 flex flex-col gap-5">
-
-                      <div>
-                        <label class="text-text-400">Image</label>
-                        <Image :src="output.params.imageUrl"
-                               :editable="true"
-                               @change="(base64, file) => output.params.imageUrl = file"
-                               ref="image"
-                               class="w-full min-h-[100px] border-[1px] border-text-200 bg-base-500 rounded-lg flex">
-                          <template #empty>
-                            <div class="flex-1 flex items-center justify-center">
-                              <button type="button" @click="$refs.image.edit()">
-                                <svg width="24" height="24" class="fill-text-300 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><!--! Font Awesome Pro 6.0.0-alpha3 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) --><path d="M630.8 469.1l-55.95-43.85C575.3 422.2 575.1 419.2 575.1 416l.0034-320c0-35.35-28.65-64-64-64H127.1C113.6 32 100.4 36.98 89.78 45.06L38.81 5.113C28.34-3.058 13.31-1.246 5.109 9.192C-3.063 19.63-1.235 34.72 9.187 42.89L601.2 506.9C605.6 510.3 610.8 512 615.1 512c7.125 0 14.17-3.156 18.91-9.188C643.1 492.4 641.2 477.3 630.8 469.1zM223.1 149.6l-64.29-50.39C164.2 97.15 169.9 96 175.1 96c26.51 0 48 21.49 48 48C223.1 145.9 223.4 147.7 223.1 149.6zM331.2 234.3l23.45-35.18C357.7 194.7 362.7 192 368 192s10.35 2.672 13.31 7.125l103.9 155.9L331.2 234.3zM145.1 416c-6.021 0-11.53-3.379-14.26-8.75c-2.73-5.367-2.215-11.81 1.334-16.68l70-96C206.1 290.4 210.9 288 216 288s9.916 2.441 12.93 6.574l32.46 44.51l16.43-24.65L63.99 146.8L63.99 416c0 35.35 28.65 64 64 64h361.1l-81.66-64H145.1z"/></svg>
-                              </button>
-                            </div>
-                          </template>
-                        </Image>
-                      </div>
-
-                      <div>
-                        <label class="text-text-400">Text</label>
-                        <TextWithTag rows="5" v-model="output.params.text" :items="replyTextItems" />
-                      </div>
-
-                    </div>
-                  </slot>
-                </template>
-
-              </UserActionOutput>
-            </div>
-
-          </div>
-
-          <div class="p-5">
-            <pre class="text-xs">{{ selectedItem }}</pre>
-          </div>
+          <UserActionProps ref="userActionProps" :instance="selectedItem" />
 
         </div>
       </div>
 
-      <div class="p-2 px-5 flex flex-row">
-        <div>
-          <Button class="w-[100px]" @click="save">Save</Button>
-        </div>
-        <div class="flex-1"></div>
-      </div>
-
     </div>
 
     <div v-else class="flex-1 flex flex-col items-center justify-center">
@@ -202,10 +88,14 @@
 import UserActionItem from './UserActionBuilder/UserActionItem.vue'
 import UserActionOutput from './UserActionBuilder/UserActionOutput.vue'
 import VirtualGrid from '../components/VirtualGrid.vue'
+import UserActionConsole from "./UserActionBuilder/UserActionConsole.vue";
+import UserActionProps from "./UserActionBuilder/UserActionProps.vue";
 
 export default{
 
   components: {
+    UserActionProps,
+    UserActionConsole,
     UserActionOutput,
     UserActionItem,
     VirtualGrid
@@ -213,6 +103,10 @@ export default{
 
   computed: {
 
+    canIsFallback(){
+      return true
+    },
+
     cConfig(){
       return this.config ?? this._config
     },
@@ -233,18 +127,6 @@ export default{
       }
     },
 
-    outputs(){
-      return this.eventOpt[this.selectedItem.event]?.outputs ?? []
-    },
-
-    replyTextItems(){
-      return [
-        { text:"Mobile Number", value:"{mobileNumber}" },
-        { text:"Name", value:"{name}" },
-        { text:"Created At", value:"{createdAt}" },
-      ]
-    },
-
     rightBar() {
       if (!this.cConfig.rightBar) {
         this.cConfig.rightBar = {
@@ -293,30 +175,12 @@ export default{
     }
   },
 
-  emits: [ 'remove', 'select' ],
+  emits: [ 'remove', 'select', 'test-message', 'test-reset' ],
 
   inject: [ 'alert', 'confirm', 'socket', 'toast' ],
 
   methods: {
 
-    addParams(item){
-      if(!Array.isArray(item.params))
-        item.params = []
-
-      item.params.push({})
-    },
-
-    addOutput(output, idx){
-      if(!this.selectedItem) return
-
-      if(!Array.isArray(this.selectedItem.output))
-        this.selectedItem.output = []
-
-      idx ?
-        Object.assign(this.selectedItem.output[idx], output) :
-        this.selectedItem.output.push(output)
-    },
-
     create(){
       this.socket.send(`${this.src}.create`, {})
           .then(_ => {
@@ -341,9 +205,24 @@ export default{
           .catch(err => this.toast(err))
     },
 
+    addTestMessage(message){
+      this.$refs.console.addMessage(message)
+    },
+
+    getWhatsappTemplateSrc(){
+      return this.whatsappTemplateSrc
+    },
+
+    testMessage(message){
+      this.$emit('test-message', {
+        message,
+        action: this.item
+      })
+    },
+
     resize1(w) {
       const nextWidth = this.leftBar.width + w
-      if (nextWidth >= 240 && nextWidth <= 480) {
+      if (nextWidth >= 200 && nextWidth <= 480) {
         this.leftBar.width += w
       }
     },
@@ -356,7 +235,7 @@ export default{
     },
 
     save(){
-      this.socket.send(`${this.src}.save`, this.item)
+      this.socket.send(`${this.src}.save`, { userId:this.uid, item:this.item })
           .then(_ => this.toast('Saved'))
           .catch(err => this.alert(err))
     },
@@ -377,34 +256,24 @@ export default{
 
     config: Object,
 
-    eventOpt: {
-      type: Object,
-      default: () => ({
-
-        'message.create': {
-          text: 'On message create',
-          conditions: [
-            { key:"body", text:"Text", type:"string", operators:[ [ 'contains', 'Contains' ], [ 'startsWith', 'Starts With' ] ] },
-            { key:"direction", text:"Direction", type:"enum", enum:[ [ 1, 'In' ], [ 2, 'Out' ] ] },
-          ],
-          outputs: [
-            { type: "reply", text:"Reply" }
-          ]
-        }
-
-      })
-    },
-
     timeOpt: {
       type: Object
     },
 
     src: [ String ],
 
+    whatsappTemplateSrc: String,
+
     uid: String,
 
   },
 
+  provide(){
+    return {
+      getWhatsappTemplateSrc: this.getWhatsappTemplateSrc
+    }
+  },
+
   watch: {
 
     actionUid: {

package/src/widgets/WebPageBuilder4/GridSetting.vue

@@ -1,89 +1,125 @@
 <template>
 	<div :class="$style.comp">
-		<strong>Grid Setting</strong>
 
     <div class="flex flex-row items-center">
-      <label class="flex-1">Enabled</label>
-      <Switch v-model="value.props.enabled" />
+      <label class="flex-1">Active</label>
+      <Switch v-model="value.props.enabled" :readonly="readonly" />
     </div>
 
-    <div class="flex flex-row items-center">
-      <label class="flex-1">Columns</label>
-      <Dropdown v-for="(_, idx) in viewTypes"
-                v-show="viewType === _.value"
-                v-model="columns[idx]"
-                class="w-[100px]">
-        <option value="">Default</option>
-        <option v-for="i in 12" :value="`${viewType}grid-cols-${i}`">{{ i }}</option>
-        <option :value="`${viewType}grid-cols-none`">None</option>
-      </Dropdown>
+    <div class="flex flex-col gap-1">
+      <label class="flex-1">Label</label>
+      <Textbox v-model="value.props.label"
+               maxlength="30"
+               placeholder="Label"
+               :readonly="readonly"
+               @keyup.enter="$emit('change')"
+               @blur="$emit('change')" />
     </div>
 
-    <div class="flex flex-row items-center">
-      <label class="flex-1">Rows</label>
-      <Dropdown v-for="(_, idx) in viewTypes"
-                v-show="viewType === _.value"
-                v-model="rows[idx]"
-                class="w-[100px]">
-        <option value="">Default</option>
-        <option v-for="i in 12" :value="`${viewType}grid-rows-${i}`">{{ i }}</option>
-        <option :value="`${viewType}grid-rows-none`">None</option>
-      </Dropdown>
+    <div class="grid grid-cols-3 gap-3">
+      <div>
+        <label class="flex-1">Columns</label>
+        <Dropdown v-for="(_, idx) in viewTypes"
+                  v-show="viewType === _.value"
+                  v-model="columns[idx]"
+                  :readonly="readonly">
+          <option value="">Default</option>
+          <option v-for="i in 12" :value="`${viewType}grid-cols-${i}`">{{ i }}</option>
+          <option :value="`${viewType}grid-cols-none`">None</option>
+        </Dropdown>
+      </div>
+
+      <div>
+        <label class="flex-1">Rows</label>
+        <Dropdown v-for="(_, idx) in viewTypes"
+                  v-show="viewType === _.value"
+                  v-model="rows[idx]"
+                  :readonly="readonly">
+          <option value="">Default</option>
+          <option v-for="i in 12" :value="`${viewType}grid-rows-${i}`">{{ i }}</option>
+          <option :value="`${viewType}grid-rows-none`">None</option>
+        </Dropdown>
+      </div>
+
+      <div>
+        <label class="flex-1">Gap</label>
+        <Dropdown v-for="(_, idx) in viewTypes"
+                  v-show="viewType === _.value"
+                  v-model="gap[idx]"
+                  :readonly="readonly">
+          <option value="">Not Set</option>
+          <option :value="`${viewType}gap-0`">0</option>
+          <option :value="`${viewType}gap-1`">1</option>
+          <option :value="`${viewType}gap-2`">2</option>
+          <option :value="`${viewType}gap-3`">3</option>
+          <option :value="`${viewType}gap-4`">4</option>
+          <option :value="`${viewType}gap-5`">5</option>
+          <option :value="`${viewType}gap-6`">6</option>
+          <option :value="`${viewType}gap-7`">7</option>
+          <option :value="`${viewType}gap-8`">8</option>
+        </Dropdown>
+      </div>
     </div>
 
-    <div class="flex flex-row items-center">
-      <label class="flex-1">Gap</label>
-      <Dropdown v-for="(_, idx) in viewTypes"
-                v-show="viewType === _.value"
-                v-model="gap[idx]">
-        <option value="">Not Set</option>
-        <option :value="`${viewType}gap-0`">0</option>
-        <option :value="`${viewType}gap-1`">1</option>
-        <option :value="`${viewType}gap-2`">2</option>
-        <option :value="`${viewType}gap-3`">3</option>
-        <option :value="`${viewType}gap-4`">4</option>
-        <option :value="`${viewType}gap-5`">5</option>
-        <option :value="`${viewType}gap-6`">6</option>
-        <option :value="`${viewType}gap-7`">7</option>
-        <option :value="`${viewType}gap-8`">8</option>
-      </Dropdown>
+    <div class="grid grid-cols-2 gap-3">
+      <div>
+        <label class="flex-1">Align Items</label>
+        <Dropdown v-for="(_, idx) in viewTypes"
+                  v-show="viewType === _.value"
+                  v-model="alignItems[idx]"
+                  :readonly="readonly">
+          <option value="">Default</option>
+          <option :value="`${viewType}items-start`">Start</option>
+          <option :value="`${viewType}items-end`">End</option>
+          <option :value="`${viewType}items-center`">Center</option>
+          <option :value="`${viewType}items-baseline`">Baseline</option>
+          <option :value="`${viewType}items-stretch`">Stretch</option>
+        </Dropdown>
+      </div>
+
+      <div>
+        <label class="flex-1">Justify Content</label>
+        <Dropdown v-for="(_, idx) in viewTypes"
+                  v-show="viewType === _.value"
+                  v-model="justifyContent[idx]"
+                  :readonly="readonly">
+          <option value="">Default</option>
+          <option :value="`${viewType}justify-normal`">Normal</option>
+          <option :value="`${viewType}justify-start`">Start</option>
+          <option :value="`${viewType}justify-end`">End</option>
+          <option :value="`${viewType}justify-center`">Center</option>
+          <option :value="`${viewType}justify-between`">Between</option>
+          <option :value="`${viewType}justify-around`">Around</option>
+          <option :value="`${viewType}justify-evenly`">Evenly</option>
+          <option :value="`${viewType}justify-stretch`">Stretch</option>
+        </Dropdown>
+      </div>
     </div>
 
-    <div class="flex flex-row items-center">
-      <label class="flex-1">Align Items</label>
-      <Dropdown v-for="(_, idx) in viewTypes"
-                v-show="viewType === _.value"
-                v-model="alignItems[idx]">
-        <option value="">Default</option>
-        <option :value="`${viewType}items-start`">Start</option>
-        <option :value="`${viewType}items-end`">End</option>
-        <option :value="`${viewType}items-center`">Center</option>
-        <option :value="`${viewType}items-baseline`">Baseline</option>
-        <option :value="`${viewType}items-stretch`">Stretch</option>
-      </Dropdown>
-    </div>
-
-    <div class="flex flex-row items-center">
-      <label class="flex-1">Justify Content</label>
-      <Dropdown v-for="(_, idx) in viewTypes"
-                v-show="viewType === _.value"
-                v-model="justifyContent[idx]">
-        <option value="">Default</option>
-        <option :value="`${viewType}justify-normal`">Normal</option>
-        <option :value="`${viewType}justify-start`">Start</option>
-        <option :value="`${viewType}justify-end`">End</option>
-        <option :value="`${viewType}justify-center`">Center</option>
-        <option :value="`${viewType}justify-between`">Between</option>
-        <option :value="`${viewType}justify-around`">Around</option>
-        <option :value="`${viewType}justify-evenly`">Evenly</option>
-        <option :value="`${viewType}justify-stretch`">Stretch</option>
-      </Dropdown>
+    <div class="grid grid-cols-2 gap-3">
+      <div>
+        <label class="flex-1">Col Span</label>
+        <Dropdown v-for="(_, idx) in viewTypes"
+                  v-show="viewType === _.value"
+                  v-model="colSpan[idx]"
+                  :readonly="readonly">
+          <option value="">Default</option>
+          <option v-for="i in 12" :value="`${viewType}col-span-${i}`">{{ i }}</option>
+        </Dropdown>
+      </div>
+
+      <div>
+        <label class="flex-1">Row Span</label>
+        <Dropdown v-for="(_, idx) in viewTypes"
+                  v-show="viewType === _.value"
+                  v-model="rowSpan[idx]"
+                  :readonly="readonly">
+          <option value="">Default</option>
+          <option v-for="i in 12" :value="`${viewType}row-span-${i}`">{{ i }}</option>
+        </Dropdown>
+      </div>
     </div>
 
-    <PaddingSetting :value="value" :index="index" />
-
-    <MarginSetting :value="value" :index="index" />
-
 	</div>
 </template>
 
@@ -108,6 +144,8 @@ export default{
 
     index: Number,
 
+    readonly: [ Boolean, Number ],
+
     viewType: String,
 
   },
@@ -145,6 +183,18 @@ export default{
       return this.value.props.justifyContent
     },
 
+    colSpan(){
+      if(!Array.isArray(this.value.props.colSpan) || this.value.props.colSpan.length < 1)
+        this.value.props.colSpan = [ '' ]
+      return this.value.props.colSpan
+    },
+
+    rowSpan(){
+      if(!Array.isArray(this.value.props.rowSpan) || this.value.props.rowSpan.length < 1)
+        this.value.props.rowSpan = [ '' ]
+      return this.value.props.rowSpan
+    },
+
   },
 
   data(){
@@ -160,7 +210,7 @@ export default{
 <style module>
 
 .comp{
-  @apply flex flex-col gap-5;
+  @apply flex flex-col gap-6 p-6;
 }
 
 </style>

package/src/widgets/WebPageBuilder4/HeightSetting.vue

@@ -2,7 +2,8 @@
 	<div :class="$style.comp">
     <div class="flex flex-row items-center">
       <label class="flex-1">Height</label>
-      <Dropdown v-model="height[index]">
+      <Dropdown v-model="height[index]"
+                :readonly="readonly">
         <option value="">Unset</option>
         <option v-for="value in values" :value="`${viewType}${value[0]}`">
           {{ value[1] }}
@@ -25,6 +26,8 @@ export default{
       required: true
     },
 
+    readonly: [ Boolean, Number ],
+
     value: {
       type: Object,
       required: true
@@ -69,16 +72,16 @@ export default{
         [ 'h-32', '32' ],
         [ 'h-36', '36' ],
         [ 'h-48', '48' ],
-        [ 'h-10vh', '10vh' ],
-        [ 'h-20vh', '20vh' ],
-        [ 'h-30vh', '30vh' ],
-        [ 'h-40vh', '40vh' ],
-        [ 'h-50vh', '50vh' ],
-        [ 'h-60vh', '60vh' ],
-        [ 'h-70vh', '70vh' ],
-        [ 'h-80vh', '80vh' ],
-        [ 'h-90vh', '90vh' ],
-        [ 'h-100vh', '100vh' ]
+        [ 'h-[10vh]', '10vh' ],
+        [ 'h-[20vh]', '20vh' ],
+        [ 'h-[30vh]', '30vh' ],
+        [ 'h-[40vh]', '40vh' ],
+        [ 'h-[50vh]', '50vh' ],
+        [ 'h-[60vh]', '60vh' ],
+        [ 'h-[70vh]', '70vh' ],
+        [ 'h-[80vh]', '80vh' ],
+        [ 'h-[90vh]', '90vh' ],
+        [ 'h-[100vh]', '100vh' ]
       ]
     }
   }