@mixd-id/web-scaffold 0.2.240706 → 0.2.250801010

package/src/widgets/FlexSetting.vue

@@ -1,109 +1,90 @@
 <template>
 	<div :class="$style.comp">
 
-		<div>
-      <div class="flex flex-row gap-1 items-center cursor-pointer">
-        <svg v-if="!expanded['flex']" width="12" height="12" class="fill-text" 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-else width="12" height="12" class="fill-text" 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>
-        <strong class="flex-1 text-text-400 line-clamp-1" @click="expanded['flex'] = !expanded['flex']">Flex</strong>
+    <div class="grid grid-cols-2 gap-4 p-6">
+
+      <div>
+        <small class="text-text-400">Direction</small>
+        <Dropdown v-model="direction[viewIndex]"
+                  @change="$emit('change')">
+          <option value="">Default</option>
+          <option :value="`${viewType}flex-row`">Row</option>
+          <option :value="`${viewType}flex-col`">Column</option>
+          <option :value="`${viewType}flex-row-reverse`">Row Reverse</option>
+          <option :value="`${viewType}flex-col-reverse`">Column Reverse</option>
+        </Dropdown>
       </div>
 
-      <div class="h-[1px] bg-text-100 mt-2 mb-4"></div>
-
-			<div v-if="expanded['flex']" class="grid grid-cols-2 gap-4 mt-4">
-
-				<div>
-					<label class="text-text-400">Direction</label>
-					<Dropdown v-for="(_, idx) in viewTypes"
-										v-show="viewType === _.value"
-										v-model="direction[idx]"
-										@change="$emit('change')">
-						<option value="">Default</option>
-						<option :value="`${viewType}flex-row`">Row</option>
-						<option :value="`${viewType}flex-col`">Column</option>
-						<option :value="`${viewType}flex-row-reverse`">Row Reverse</option>
-						<option :value="`${viewType}flex-col-reverse`">Column Reverse</option>
-					</Dropdown>
-				</div>
-
-				<div>
-					<label class="text-text-400">Gap</label>
-					<Dropdown v-for="(_, idx) in viewTypes"
-										v-show="viewType === _.value"
-										v-model="gap[idx]"
-										class="w-full"
-										@change="$emit('change')">
-						<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>
-          <label class="text-text-400">Align</label>
-          <Dropdown v-for="(_, idx) in viewTypes"
-                    v-show="viewType === _.value"
-                    v-model="flexAlign[idx]"
-                    class="w-full"
-                    @change="$emit('change')">
-            <option value="">Not Set</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="text-text-400">Justify</label>
-          <Dropdown v-for="(_, idx) in viewTypes"
-                    v-show="viewType === _.value"
-                    v-model="flexJustify[idx]"
-                    class="w-full"
-                    @change="$emit('change')">
-            <option value="">Not Set</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>
-					<label class="text-text-400">Wrap</label>
-					<Dropdown v-for="(_, idx) in viewTypes"
-										v-show="viewType === _.value"
-										v-model="wrap[idx]"
-										class="w-full"
-										@change="$emit('change')">
-						<option value="">Not Set</option>
-						<option :value="`${viewType}flex-wrap`">Wrap</option>
-						<option :value="`${viewType}flex-wrap-reverse`">Wrap reverse</option>
-						<option :value="`${viewType}flex-nowrap`">No wrap</option>
-					</Dropdown>
-				</div>
-
-			</div>
-		</div>
+      <div>
+        <small class="text-text-400">Gap</small>
+        <Dropdown v-model="gap[viewIndex]"
+                  class="w-full"
+                  @change="$emit('change')">
+          <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>
+        <small class="text-text-400">Align</small>
+        <Dropdown v-model="flexAlign[viewIndex]"
+                  class="w-full"
+                  @change="$emit('change')">
+          <option value="">Not Set</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>
+        <small class="text-text-400">Justify</small>
+        <Dropdown v-model="flexJustify[viewIndex]"
+                  class="w-full"
+                  @change="$emit('change')">
+          <option value="">Not Set</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>
+        <small class="text-text-400">Wrap</small>
+        <Dropdown v-model="wrap[viewIndex]"
+                  class="w-full"
+                  @change="$emit('change')">
+          <option value="">Not Set</option>
+          <option :value="`${viewType}flex-wrap`">Wrap</option>
+          <option :value="`${viewType}flex-wrap-reverse`">Wrap reverse</option>
+          <option :value="`${viewType}flex-nowrap`">No wrap</option>
+        </Dropdown>
+      </div>
+
+    </div>
 
     <ComponentSetting2 :item="item"
-                      :view-type="viewType"
-                      :view-types="viewTypes"
-                      :excludes="['direction', 'gap', 'wrap', 'flexAlign', 'flexJustify']"
-                      defaultDisplay="flex"
-                      @change="$emit('change')" />
+                       :excludes="[ 'direction', 'flexAlign', 'flexJustify', 'gap', 'wrap' ]"
+                       :view-type="viewType"
+                       :view-types="viewTypes"
+                       :view-index="viewIndex"
+                       defaultDisplay="block"
+                       @change="$emit('change')" />
 
 	</div>
 </template>
@@ -125,6 +106,8 @@ export default{
 
 		viewType: String,
 
+    viewIndex: Number,
+
 		viewTypes: Array,
 
 	},
@@ -141,12 +124,6 @@ export default{
       return {}
     },
 
-    expanded(){
-      if(!this.componentStore['expanded'])
-        this.componentStore['expanded'] = {}
-      return this.componentStore['expanded']
-    },
-
 		direction(){
 			if(!Array.isArray(this.item.props.direction))
 				this.item.props.direction = [ 'flex-column' ]
@@ -191,7 +168,7 @@ export default{
 <style module>
 
 .comp{
-	@apply flex flex-col gap-8;
+  @apply flex flex-col divide-y divide-border-50;
 }
 
 </style>

package/src/widgets/GridSetting.vue

@@ -1,192 +1,80 @@
 <template>
 	<div :class="$style.comp">
 
-    <div>
-      <div class="flex flex-row gap-1 items-center cursor-pointer">
-        <svg v-if="!expanded['grid']" width="12" height="12" class="fill-text" 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-else width="12" height="12" class="fill-text" 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>
-        <strong class="flex-1 text-text-400 line-clamp-1" @click="expanded['grid'] = !expanded['grid']">Grid</strong>
+    <div class="grid grid-cols-2 gap-4 p-6">
+
+      <div>
+        <small class="text-text-400">Columns</small>
+        <Dropdown v-model="columns[viewIndex]">
+          <option value="">Default</option>
+          <option v-for="i in 12" :value="`${viewTypes[viewIndex].value}grid-cols-${i}`">{{ i }}</option>
+          <option :value="`${viewTypes[viewIndex].value}grid-cols-none`">None</option>
+        </Dropdown>
       </div>
 
-      <div class="h-[1px] bg-text-100 mt-2 mb-4"></div>
-
-      <div v-if="expanded['grid']" class="mt-4 grid grid-cols-2 gap-4">
-
-        <div>
-          <div class="flex flex-row items-center gap-2">
-            <label class="flex-1 text-text-400">Columns</label>
-            <button type="button" v-if="columns.length < 2" @click="columns.push('')">
-              <svg width="16" height="16" class="fill-text-300 hover:fill-primary-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M352 240v32c0 6.6-5.4 12-12 12h-88v88c0 6.6-5.4 12-12 12h-32c-6.6 0-12-5.4-12-12v-88h-88c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h88v-88c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v88h88c6.6 0 12 5.4 12 12zm96-160v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h352c26.5 0 48 21.5 48 48zm-48 346V86c0-3.3-2.7-6-6-6H54c-3.3 0-6 2.7-6 6v340c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"/></svg>
-            </button>
-          </div>
-          <div class="mt-1 grid gap-2" :class="`grid-cols-${columns.length}`">
-            <div v-for="(_, index) in columns" class="items-start">
-              <div class="flex flex-row items-center" v-if="columns.length > 1">
-                <small class="flex-1 text-text-300">{{ viewTypes[index].text }}</small>
-                <button type="button" v-if="index > 0" @click="columns.splice(index, 1)">
-                  <svg width="11" height="11" 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>
-                <Dropdown v-model="columns[index]" class="w-full max-w-[300px]">
-                  <option value="">Default</option>
-                  <option v-for="i in 12" :value="`${viewTypes[index].value}grid-cols-${i}`">{{ i }}</option>
-                  <option :value="`${viewTypes[index].value}grid-cols-none`">None</option>
-                </Dropdown>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div>
-          <div class="flex flex-row items-center gap-2">
-            <label class="flex-1 text-text-400">Rows</label>
-            <button type="button" v-if="rows.length < 2" @click="rows.push('')">
-              <svg width="16" height="16" class="fill-text-300 hover:fill-primary-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M352 240v32c0 6.6-5.4 12-12 12h-88v88c0 6.6-5.4 12-12 12h-32c-6.6 0-12-5.4-12-12v-88h-88c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h88v-88c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v88h88c6.6 0 12 5.4 12 12zm96-160v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h352c26.5 0 48 21.5 48 48zm-48 346V86c0-3.3-2.7-6-6-6H54c-3.3 0-6 2.7-6 6v340c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"/></svg>
-            </button>
-          </div>
-          <div class="mt-1 grid gap-2" :class="`grid-cols-${rows.length}`">
-            <div v-for="(_, index) in rows" class="items-start">
-              <div class="flex flex-row items-center" v-if="rows.length > 1">
-                <small class="flex-1 text-text-300">{{ viewTypes[index].text }}</small>
-                <button type="button" v-if="index > 0" @click="rows.splice(index, 1)">
-                  <svg width="11" height="11" 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>
-                <Dropdown v-model="rows[index]" class="w-full max-w-[300px]">
-                  <option value="">Default</option>
-                  <option v-for="i in 12" :value="`${viewTypes[index].value}grid-rows-${i}`">{{ i }}</option>
-                  <option :value="`${viewTypes[index].value}grid-rows-none`">None</option>
-                </Dropdown>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div>
-          <div class="flex flex-row items-center gap-2">
-            <label class="flex-1 text-text-400">Gap</label>
-            <button type="button" v-if="gap.length < 2" @click="gap.push('')">
-              <svg width="16" height="16" class="fill-text-300 hover:fill-primary-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M352 240v32c0 6.6-5.4 12-12 12h-88v88c0 6.6-5.4 12-12 12h-32c-6.6 0-12-5.4-12-12v-88h-88c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h88v-88c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v88h88c6.6 0 12 5.4 12 12zm96-160v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h352c26.5 0 48 21.5 48 48zm-48 346V86c0-3.3-2.7-6-6-6H54c-3.3 0-6 2.7-6 6v340c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"/></svg>
-            </button>
-          </div>
-          <div class="mt-1 grid gap-2" :class="`grid-cols-${gap.length}`">
-            <div v-for="(_, index) in gap" class="items-start">
-              <div class="flex flex-row items-center" v-if="gap.length > 1">
-                <small class="flex-1 text-text-300">{{ viewTypes[index].text }}</small>
-                <button type="button" v-if="index > 0" @click="gap.splice(index, 1)">
-                  <svg width="11" height="11" 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>
-                <Dropdown v-model="gap[index]" class="w-full max-w-[300px]">
-                  <option value="">Default</option>
-                  <option v-for="i in 13" :value="`${viewTypes[index].value}gap-${i - 1}`">{{ i - 1 }}</option>
-                </Dropdown>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div>
-          <div class="flex flex-row items-center gap-2">
-            <label class="flex-1 text-text-400">Auto Flow</label>
-            <button type="button" v-if="autoFlow.length < 2" @click="autoFlow.push('')">
-              <svg width="16" height="16" class="fill-text-300 hover:fill-primary-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M352 240v32c0 6.6-5.4 12-12 12h-88v88c0 6.6-5.4 12-12 12h-32c-6.6 0-12-5.4-12-12v-88h-88c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h88v-88c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v88h88c6.6 0 12 5.4 12 12zm96-160v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h352c26.5 0 48 21.5 48 48zm-48 346V86c0-3.3-2.7-6-6-6H54c-3.3 0-6 2.7-6 6v340c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"/></svg>
-            </button>
-          </div>
-          <div class="mt-1 grid gap-2" :class="`grid-cols-${autoFlow.length}`">
-            <div v-for="(_, index) in autoFlow" class="items-start">
-              <div class="flex flex-row items-center" v-if="autoFlow.length > 1">
-                <small class="flex-1 text-text-300">{{ viewTypes[index].text }}</small>
-                <button type="button" v-if="index > 0" @click="autoFlow.splice(index, 1)">
-                  <svg width="11" height="11" 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>
-                <Dropdown v-model="autoFlow[index]" class="w-full max-w-[300px]">
-                  <option value="">Default</option>
-                  <option :value="`${viewTypes[index].value}grid-flow-row`">Row</option>
-                  <option :value="`${viewTypes[index].value}grid-flow-col`">Col</option>
-                  <option :value="`${viewTypes[index].value}grid-flow-dense`">Dense</option>
-                  <option :value="`${viewTypes[index].value}grid-flow-row-dense`">Row Dense</option>
-                  <option :value="`${viewTypes[index].value}grid-flow-col-dense`">Col Dense</option>
-                </Dropdown>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div class="col-span-2">
-          <div class="flex flex-row items-center gap-2">
-            <label class="flex-1 text-text-400">Align Items</label>
-            <button type="button" v-if="alignItems.length < 2" @click="alignItems.push('')">
-              <svg width="16" height="16" class="fill-text-300 hover:fill-primary-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M352 240v32c0 6.6-5.4 12-12 12h-88v88c0 6.6-5.4 12-12 12h-32c-6.6 0-12-5.4-12-12v-88h-88c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h88v-88c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v88h88c6.6 0 12 5.4 12 12zm96-160v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h352c26.5 0 48 21.5 48 48zm-48 346V86c0-3.3-2.7-6-6-6H54c-3.3 0-6 2.7-6 6v340c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"/></svg>
-            </button>
-          </div>
-          <div class="mt-1 grid gap-2" :class="`grid-cols-${alignItems.length}`">
-            <div v-for="(_, index) in alignItems" class="items-start">
-              <div class="flex flex-row items-center" v-if="alignItems.length > 1">
-                <small class="flex-1 text-text-300">{{ viewTypes[index].text }}</small>
-                <button type="button" v-if="index > 0" @click="alignItems.splice(index, 1)">
-                  <svg width="11" height="11" 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>
-                <Dropdown v-model="alignItems[index]" class="w-full max-w-[300px]">
-                  <option value="">Default</option>
-                  <option :value="`${viewTypes[index].value}items-start`">Start</option>
-                  <option :value="`${viewTypes[index].value}items-end`">End</option>
-                  <option :value="`${viewTypes[index].value}items-center`">Center</option>
-                  <option :value="`${viewTypes[index].value}items-baseline`">Baseline</option>
-                  <option :value="`${viewTypes[index].value}items-stretch`">Stretch</option>
-                </Dropdown>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <div class="col-span-2">
-          <div class="flex flex-row items-center gap-2">
-            <label class="flex-1 text-text-400">Justify Content</label>
-            <button type="button" v-if="justifyContent.length < 2" @click="justifyContent.push('')">
-              <svg width="16" height="16" class="fill-text-300 hover:fill-primary-500" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M352 240v32c0 6.6-5.4 12-12 12h-88v88c0 6.6-5.4 12-12 12h-32c-6.6 0-12-5.4-12-12v-88h-88c-6.6 0-12-5.4-12-12v-32c0-6.6 5.4-12 12-12h88v-88c0-6.6 5.4-12 12-12h32c6.6 0 12 5.4 12 12v88h88c6.6 0 12 5.4 12 12zm96-160v352c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V80c0-26.5 21.5-48 48-48h352c26.5 0 48 21.5 48 48zm-48 346V86c0-3.3-2.7-6-6-6H54c-3.3 0-6 2.7-6 6v340c0 3.3 2.7 6 6 6h340c3.3 0 6-2.7 6-6z"/></svg>
-            </button>
-          </div>
-          <div class="mt-1 grid gap-2" :class="`grid-cols-${justifyContent.length}`">
-            <div v-for="(_, index) in justifyContent" class="items-start">
-              <div class="flex flex-row items-center" v-if="justifyContent.length > 1">
-                <small class="flex-1 text-text-300">{{ viewTypes[index].text }}</small>
-                <button type="button" v-if="index > 0" @click="justifyContent.splice(index, 1)">
-                  <svg width="11" height="11" 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>
-                <Dropdown v-model="justifyContent[index]" class="w-full max-w-[300px]">
-                  <option value="">Default</option>
-                  <option :value="`${viewTypes[index].value}justify-normal`">Normal</option>
-                  <option :value="`${viewTypes[index].value}justify-start`">Start</option>
-                  <option :value="`${viewTypes[index].value}justify-end`">End</option>
-                  <option :value="`${viewTypes[index].value}justify-center`">Center</option>
-                  <option :value="`${viewTypes[index].value}justify-between`">Between</option>
-                  <option :value="`${viewTypes[index].value}justify-around`">Around</option>
-                  <option :value="`${viewTypes[index].value}justify-evenly`">Evenly</option>
-                  <option :value="`${viewTypes[index].value}justify-stretch`">Stretch</option>
-                </Dropdown>
-              </div>
-            </div>
-          </div>
-        </div>
+      <div>
+        <small class="text-text-400">Rows</small>
+        <Dropdown v-model="rows[viewIndex]">
+          <option value="">Default</option>
+          <option v-for="i in 12" :value="`${viewTypes[viewIndex].value}grid-rows-${i}`">{{ i }}</option>
+          <option :value="`${viewTypes[viewIndex].value}grid-rows-none`">None</option>
+        </Dropdown>
+      </div>
+
+      <div>
+        <small class="text-text-400">Gap</small>
+        <Dropdown v-model="gap[viewIndex]">
+          <option value="">Default</option>
+          <option v-for="i in 13" :value="`${viewTypes[viewIndex].value}gap-${i - 1}`">{{ i - 1 }}</option>
+        </Dropdown>
+      </div>
+
+      <div>
+        <small class="text-text-400">Auto Flow</small>
+        <Dropdown v-model="autoFlow[viewIndex]" class="w-full max-w-[300px]">
+          <option value="">Default</option>
+          <option :value="`${viewTypes[viewIndex].value}grid-flow-row`">Row</option>
+          <option :value="`${viewTypes[viewIndex].value}grid-flow-col`">Col</option>
+          <option :value="`${viewTypes[viewIndex].value}grid-flow-dense`">Dense</option>
+          <option :value="`${viewTypes[viewIndex].value}grid-flow-row-dense`">Row Dense</option>
+          <option :value="`${viewTypes[viewIndex].value}grid-flow-col-dense`">Col Dense</option>
+        </Dropdown>
+      </div>
+
+      <div class="col-span-2">
+        <small class="text-text-400">Align Items</small>
+        <Dropdown v-model="alignItems[viewIndex]">
+          <option value="">Default</option>
+          <option :value="`${viewTypes[viewIndex].value}items-start`">Start</option>
+          <option :value="`${viewTypes[viewIndex].value}items-end`">End</option>
+          <option :value="`${viewTypes[viewIndex].value}items-center`">Center</option>
+          <option :value="`${viewTypes[viewIndex].value}items-baseline`">Baseline</option>
+          <option :value="`${viewTypes[viewIndex].value}items-stretch`">Stretch</option>
+        </Dropdown>
+      </div>
 
+      <div class="col-span-2">
+        <small class="text-text-400">Justify Content</small>
+        <Dropdown v-model="justifyContent[viewIndex]">
+          <option value="">Default</option>
+          <option :value="`${viewTypes[viewIndex].value}justify-normal`">Normal</option>
+          <option :value="`${viewTypes[viewIndex].value}justify-start`">Start</option>
+          <option :value="`${viewTypes[viewIndex].value}justify-end`">End</option>
+          <option :value="`${viewTypes[viewIndex].value}justify-center`">Center</option>
+          <option :value="`${viewTypes[viewIndex].value}justify-between`">Between</option>
+          <option :value="`${viewTypes[viewIndex].value}justify-around`">Around</option>
+          <option :value="`${viewTypes[viewIndex].value}justify-evenly`">Evenly</option>
+          <option :value="`${viewTypes[viewIndex].value}justify-stretch`">Stretch</option>
+        </Dropdown>
       </div>
+
     </div>
 
     <ComponentSetting2 :item="item"
                        :view-type="viewType"
                        :view-types="viewTypes"
-                       :excludes="['columns', 'direction', 'gap', 'wrap', 'flexAlign', 'flexJustify']"
-                       defaultDisplay="flex"
+                       :view-index="viewIndex"
+                       defaultDisplay="block"
                        @change="$emit('change')" />
 
 	</div>
@@ -194,12 +82,13 @@
 
 <script>
 
+import ComponentSetting2 from "./ComponentSetting2.vue";
+
 export default{
+  components: {ComponentSetting2},
 
 	emits: [ 'change' ],
 
-  inject: [ 'store' ],
-
 	props: {
 
 		item: {
@@ -209,6 +98,8 @@ export default{
 
 		viewType: String,
 
+    viewIndex: Number,
+
 		viewTypes: Array,
 
 	},
@@ -223,22 +114,6 @@ export default{
 
 	computed: {
 
-    componentStore(){
-      if(this.store && this.store.components){
-        if(!this.store.components.compsetting)
-          this.store.components.compsetting = {}
-
-        return this.store.components.compsetting
-      }
-      return {}
-    },
-
-    expanded(){
-      if(!this.componentStore['expanded'])
-        this.componentStore['expanded'] = {}
-      return this.componentStore['expanded']
-    },
-
     autoFlow(){
 			if(!Array.isArray(this.item.props.autoFlow) || this.item.props.autoFlow.length < 1)
 				this.item.props.autoFlow = [ '' ]
@@ -284,7 +159,7 @@ export default{
 <style module>
 
 .comp{
-  @apply flex flex-col gap-6;
+  @apply flex flex-col divide-y divide-border-50;
 }
 
 </style>