@mixd-id/web-scaffold 0.1.230406238 → 0.1.230406240

package/package.json

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

package/src/components/ListView.vue

@@ -133,7 +133,7 @@
 											ref="table1"
 											:columns="presetColumns"
 											:items="items"
-											class="flex-1 bg-base-400"
+											class="flex-1 bg-base-500 dark:bg-base-400"
 											@scroll-end="loadNext">
 					<template v-for="column in presetColumns" #[colOf(column.key)]="{}">
 						<div :class="getHeader(column)" @click="openColumnOptions(column.key, $event.target.closest('.' + $style.header))">

package/src/components/Textbox.vue

@@ -4,7 +4,7 @@
 		<input :type="computedType" :disabled="isDisabled" @focus="isActive = true" @input="onInput" @blur="onBlur"
 			:placeholder="placeholder" :maxlength="maxlength" ref="input" autocomplete="new-password"
 					 :value="displayedValue" :readonly="Boolean(readonly)" @paste="onPaste"
-           :class="itemClass"
+           :class="itemClass" @click="$emit('input-click')"
 			@keydown="onKeyDown"/>
 		<button class="mr-2" v-if="Boolean(clearable) && !Boolean(readonly) && state >= 1 && modelValue" type="button" @click="$emit('clear')">
 			<svg :class="$style.svg" width="19" height="19" viewBox="0 0 24 24" class="fill-text-200" xmlns="http://www.w3.org/2000/svg">
@@ -19,7 +19,7 @@
 
 export default{
 
-	emits: [ 'update:modelValue', 'change', 'clear', 'submit', 'blur' ],
+	emits: [ 'update:modelValue', 'change', 'clear', 'submit', 'blur', 'input-click' ],
 
 	props: {
 

package/src/index.js

@@ -18,6 +18,8 @@ const mediaBreakpoints = {
 }
 
 const download = (url, as) => {
+  url = url + (url.indexOf('?') >= 0 ? '&' : '?') + 'nocache=' + new Date().getTime()
+
   const downloader = document.createElement('a')
   downloader.setAttribute('href', url)
   downloader.target = '_blank'

package/src/themes/default/index.js

@@ -18,12 +18,12 @@ const plugin = Plugin(function({ addBase, config, theme }) {
 
       '--base-50': '250, 250, 250',
       '--base-200': '222, 224, 227',
-      '--base-300': '237, 243, 255',
-      '--base-400': '255, 255, 255',
+      '--base-300': '240, 240, 240',
+      '--base-400': '247, 247, 247',
       '--base-500': '255, 255, 255',
       '--base': '236, 236, 236',
 
-      "--text-50": '240, 240, 240',
+      "--text-50": '232, 232, 232',
       "--text-100": '223, 223, 223',
       "--text-200": '218, 218, 218',
       "--text-300": '191, 191, 191',

package/src/utils/wss.js

@@ -5,101 +5,63 @@ const EventEmitter2 = require("eventemitter2");
 
 const convertDataUrlObj = async(obj) => {
 
-  const processObjectProperties = async (inputObj) => {
+  let output
 
-    let outputObj
-
-    if(Array.isArray(inputObj)){
-      outputObj = []
-
-      for(let i = 0; i < inputObj.length; i++){
-        const value = inputObj[i];
-
-        if (Buffer.isBuffer(value)) {
-          outputObj[i] = value.toString('base64')
-        } else if (typeof value === 'object' && value !== null) {
-          outputObj[i] = await processObjectProperties(value);
-        } else {
-          outputObj[i] = value;
-        }
-      }
+  if(Array.isArray(obj)){
+    output = []
+    for(let i = 0; i < obj.length; i++){
+      output.push(await convertDataUrlObj(obj[i]));
     }
-    else if(typeof inputObj === 'object' && inputObj !== null){
-      outputObj = {};
-      for (const key in inputObj) {
-        if (inputObj.hasOwnProperty(key)) {
-          const value = inputObj[key];
-
-          if (Buffer.isBuffer(value)) {
-            outputObj[key] = value.toString('base64')
-          } else if (typeof value === 'object' && value !== null) {
-            outputObj[key] = await processObjectProperties(value);
-          } else {
-            outputObj[key] = value;
-          }
-        }
+  }
+  else if(Buffer.isBuffer(obj)) {
+    output = obj.toString('base64')
+  }
+  else if(typeof obj === 'object' && obj !== null){
+    output = {}
+    for (const key in obj) {
+      if (obj.hasOwnProperty(key)) {
+        output[key] = await convertDataUrlObj(obj[key])
       }
     }
+  }
+  else{
+    output = obj;
+  }
 
-    return outputObj;
-  };
-
-  return processObjectProperties(obj);
+  return output
 }
 
 const revertDataUrlObj = (obj) => {
 
-  // Recursive function to process each property of the object
-  const processObjectProperties = async (inputObj) => {
-    let outputObj;
+  let output
 
-    if(Array.isArray(inputObj)){
-      outputObj = []
-      for (let i = 0; i < inputObj.length; i++) {
-        let value = inputObj[i];
-
-        if (typeof value === 'string' && value.startsWith('data:')) {
-          if(value.indexOf(',') >= 0){
-            value = value.substring(value.indexOf(',') + 1)
-          }
-          outputObj[i] = Buffer.from(value, 'base64');
-        } else if (typeof value === 'object' && value !== null) {
-          outputObj[i] = await processObjectProperties(value);
-        } else {
-          outputObj[i] = value;
-        }
-      }
+  if(Array.isArray(obj)){
+    output = []
+    for(let i = 0; i < obj.length; i++){
+      output.push(revertDataUrlObj(obj[i]));
     }
-    else{
-      outputObj = {}
-
-      for (const key in inputObj) {
-        if (inputObj.hasOwnProperty(key)) {
-          let value = inputObj[key];
-
-          if (typeof value === 'string' && value.startsWith('data:')) {
-            if(value.indexOf(',') >= 0){
-              value = value.substring(value.indexOf(',') + 1)
-            }
-            outputObj[key] = Buffer.from(value, 'base64');
-          } else if (typeof value === 'object' && value !== null) {
-            outputObj[key] = await processObjectProperties(value);
-          } else {
-            outputObj[key] = value;
-          }
-        }
+  }
+  else if (typeof obj === 'string' && obj.startsWith('data:')) {
+    if(obj.indexOf(',') >= 0){
+      obj = obj.substring(obj.indexOf(',') + 1)
+    }
+    output = Buffer.from(obj, 'base64');
+  }
+  else if(typeof obj === 'object' && obj !== null){
+    output = {}
+    for (const key in obj) {
+      if (obj.hasOwnProperty(key)) {
+        output[key] = revertDataUrlObj(obj[key])
       }
     }
+  }
+  else{
+    output = obj;
+  }
 
-
-    return outputObj;
-  };
-
-  // Start processing the top-level object
-  return processObjectProperties(obj);
+  return output
 }
 
-
 class WSS extends EventEmitter2{
 
   _instance
@@ -111,17 +73,19 @@ class WSS extends EventEmitter2{
   _reqFn = []
 
   async fromBinaryData(binaryData){
-    const secretKey = this._opt.key;
     const encryptedString = Buffer.from(binaryData).toString('utf-8');
-    const decryptedData = CryptoJS.AES.decrypt(encryptedString, secretKey).toString(CryptoJS.enc.Utf8);
+    const decryptedData = this._opt.key ?
+      CryptoJS.AES.decrypt(encryptedString, this._opt.key).toString(CryptoJS.enc.Utf8) :
+      encryptedString;
     const receivedObject = JSON.parse(decryptedData);
     return await revertDataUrlObj(receivedObject);
   }
 
   async toBinaryData(obj){
-    const secretKey = this._opt.key;
     const dataUrlObj = await convertDataUrlObj(obj)
-    const encryptedData = crypto.AES.encrypt(JSON.stringify(dataUrlObj), secretKey).toString();
+    const encryptedData = this._opt.key ?
+      crypto.AES.encrypt(JSON.stringify(dataUrlObj), this._opt.key).toString() :
+      JSON.stringify(dataUrlObj);
     return new TextEncoder().encode(encryptedData);
   }
 
@@ -136,7 +100,10 @@ class WSS extends EventEmitter2{
       socket.leave = (channel) => {
         if((socket.channels ?? {})[channel]){
           delete socket.channels[channel]
-          //console.log('leave', channel)
+
+          if(this._opt.debug){
+            console.log('leave', channel)
+          }
         }
       }
 
@@ -146,7 +113,10 @@ class WSS extends EventEmitter2{
         }
 
         socket.channels[channel] = 1
-        //console.log('join', channel)
+
+        if(this._opt.debug){
+          console.log('join', channel)
+        }
       }
 
       socket.to = (channel) => {
@@ -222,7 +192,10 @@ class WSS extends EventEmitter2{
   }
 
   async broadcast(channel, { model, event, items }){
-    //console.log('broadcast', channel, JSON.stringify({ model, event, items }).substring(0, 70))
+
+    if(this._opt.debug){
+      console.log('broadcast', channel, JSON.stringify({ model, event, items }).substring(0, 70))
+    }
 
     for(let socket of this._instance.clients){
       if(socket.readyState === WebSocket.OPEN && (socket.channels ?? {})[channel]){
@@ -233,6 +206,9 @@ class WSS extends EventEmitter2{
 
 }
 
+
 module.exports = {
-  WSS
+  WSS,
+  convertDataUrlObj,
+  revertDataUrlObj
 }

package/src/utils/wss.mjs

@@ -1,6 +1,43 @@
 import CryptoJS from "crypto-js";
 import EventEmitter2 from "eventemitter2";
 
+const fileToDataURL = (file) => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = (event) => resolve(event.target.result);
+    reader.onerror = (error) => reject(error);
+    reader.readAsDataURL(file);
+  });
+};
+
+const convertDataUrlObj = async(obj) => {
+
+  let output
+
+  if(Array.isArray(obj)){
+    output = []
+    for(let i = 0; i < obj.length; i++){
+      output.push(await convertDataUrlObj(obj[i]));
+    }
+  }
+  else if(obj instanceof File || obj instanceof Blob) {
+    output = await fileToDataURL(obj);
+  }
+  else if(typeof obj === 'object' && obj !== null){
+    output = {}
+    for (const key in obj) {
+      if (obj.hasOwnProperty(key)) {
+        output[key] = await convertDataUrlObj(obj[key])
+      }
+    }
+  }
+  else{
+    output = obj;
+  }
+
+  return output
+}
+
 class WSS extends EventEmitter2{
 
   _instance
@@ -9,97 +46,7 @@ class WSS extends EventEmitter2{
   _callbacks = {}
   _pendingSend = []
   _lastBlurAt
-
-  static async convertDataUrlObj(obj){
-
-    const fileToDataURL = (file) => {
-      return new Promise((resolve, reject) => {
-        const reader = new FileReader();
-        reader.onload = (event) => resolve(event.target.result);
-        reader.onerror = (error) => reject(error);
-        reader.readAsDataURL(file);
-      });
-    };
-
-    const processObjectProperties = async (inputObj) => {
-      let outputObj;
-
-      if(Array.isArray(inputObj)){
-        outputObj = []
-        for(let i = 0; i < inputObj.length; i++){
-          const value = inputObj[i];
-
-          if (value instanceof File) {
-            outputObj[i] = await fileToDataURL(value);
-          } else if (typeof value === 'object' && value !== null) {
-            outputObj[i] = await processObjectProperties(value);
-          } else {
-            outputObj[i] = value;
-          }
-        }
-      }
-      else{
-        outputObj = {}
-
-        for (const key in inputObj) {
-          if (inputObj.hasOwnProperty(key)) {
-            const value = inputObj[key];
-
-            if (value instanceof File) {
-              outputObj[key] = await fileToDataURL(value);
-            } else if (typeof value === 'object' && value !== null) {
-              outputObj[key] = await processObjectProperties(value);
-            } else {
-              outputObj[key] = value;
-            }
-          }
-        }
-      }
-
-
-      return outputObj;
-    };
-
-    return processObjectProperties(obj);
-  }
-
-  static async revertDataUrlObj(obj){
-
-    const processObjectProperties = async (inputObj) => {
-      let outputObj;
-
-      if(Array.isArray(inputObj)){
-        outputObj = []
-        for (let i = 0; i < inputObj.length; i++) {
-          let value = inputObj[i];
-
-          if (typeof value === 'object' && value !== null) {
-            outputObj[i] = await processObjectProperties(value);
-          } else {
-            outputObj[i] = value;
-          }
-        }
-      }
-      else if(typeof inputObj === 'object' && inputObj !== null){
-        outputObj = {}
-        for (const key in inputObj) {
-          if (inputObj.hasOwnProperty(key)) {
-            let value = inputObj[key];
-
-            if (typeof value === 'object' && value !== null) {
-              outputObj[key] = await processObjectProperties(value);
-            } else {
-              outputObj[key] = value;
-            }
-          }
-        }
-      }
-
-      return outputObj;
-    };
-
-    return processObjectProperties(obj);
-  }
+  _readyState = 0
 
   constructor(opt) {
     super();
@@ -130,7 +77,7 @@ class WSS extends EventEmitter2{
   }
 
   _onFocus = () => {
-    this.emit('focus')
+    this.emit('window', 'focus', [])
 
     if(this._lastBlurAt){
       this.send('ping', {}, { timeout:1000 })
@@ -142,24 +89,25 @@ class WSS extends EventEmitter2{
 
   _onOnlineChanged = (e) => {
     if(!navigator.onLine){
-      this.emit('disconnect', e)
+      this.emit('disconnect', e, [])
     }
     else{
-      this.emit('connect')
+      this.emit('connect', null, [])
     }
   }
 
   async fromBinaryData(binaryData){
-    const secretKey = this._opt.key;
     const encryptedString = new TextDecoder().decode(binaryData)
-    const decryptedData = CryptoJS.AES.decrypt(encryptedString, secretKey).toString(CryptoJS.enc.Utf8);
-    const receivedObject = JSON.parse(decryptedData);
-    return await WSS.revertDataUrlObj(receivedObject);
+    const decryptedData = this._opt.key ?
+      CryptoJS.AES.decrypt(encryptedString, this._opt.key).toString(CryptoJS.enc.Utf8) :
+      encryptedString;
+    return JSON.parse(decryptedData)
   }
 
   async toBinaryData(obj){
-    const secretKey = this._opt.key;
-    const encryptedData = CryptoJS.AES.encrypt(JSON.stringify(obj), secretKey).toString();
+    const encryptedData = this._opt.key ?
+      CryptoJS.AES.encrypt(JSON.stringify(obj), this._opt.key).toString() :
+      JSON.stringify(obj);
     return new TextEncoder().encode(encryptedData)
   }
 
@@ -170,14 +118,17 @@ class WSS extends EventEmitter2{
     this._instance.binaryType = 'arraybuffer';
 
     this._instance.onopen = () => {
+      this._readyState = 2
       this.send('_auth', this._opt.auth)
         .then(() => {
-          reconnect ? this.emit('reconnect') : this.emit('connect')
+          reconnect ? this.emit('reconnect', null, []) : this.emit('connect', null, [])
 
           for(let sendParams of this._pendingSend){
             this.sendSync(sendParams.path, sendParams.params, sendParams.cb, sendParams.err)
           }
           this._pendingSend = []
+
+          this._readyState = 1
         })
     };
 
@@ -209,7 +160,7 @@ class WSS extends EventEmitter2{
     };
 
     this._instance.onerror = (e) => {
-      this.emit('error', e)
+      this.emit('error', e, [])
     }
 
     this._instance.onclose = (e) => {
@@ -217,11 +168,11 @@ class WSS extends EventEmitter2{
       switch(e.code){
 
         case 1002:
-          this.emit('connect_error', e)
+          this.emit('connect_error', e, [])
           break
 
         default:
-          this.emit('disconnect')
+          this.emit('disconnect', null, [])
           break
       }
     };
@@ -236,7 +187,7 @@ class WSS extends EventEmitter2{
   }
 
   sendSync(path, params, cb, err, override){
-    if(this._instance.readyState !== 1){
+    if(this._instance.readyState !== 1 && this._readyState !== 1){
       this._pendingSend.push({ path, params, cb, err })
       return
     }
@@ -248,7 +199,7 @@ class WSS extends EventEmitter2{
 
     const _requestId = ++this._counter
 
-    WSS.convertDataUrlObj({
+    convertDataUrlObj({
       _requestId,
       path,
       params
@@ -285,5 +236,7 @@ class WSS extends EventEmitter2{
 }
 
 export {
-  WSS
+  WSS,
+  fileToDataURL,
+  convertDataUrlObj
 }

package/src/widgets/ComponentSetting2.vue

@@ -25,9 +25,14 @@
               <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 class="flex flex-col gap-2">
+          <div class="mt-1 flex flex-row gap-2">
             <div v-for="(_, index) in values" class="items-start">
-              <small class="w-[60px] text-text-300">{{ viewTypes[index].text }}</small>
+              <div class="flex flex-row items-center" v-if="values.length > 1">
+                <small class="flex-1 text-text-300">{{ viewTypes[index].text }}</small>
+                <button type="button" v-if="index > 0" @click="values.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 class="flex flex-row items-start gap-2">
                 <Dropdown v-if="Array.isArray(keys[key].values)" v-model="values[index]" class="flex-1 max-w-[300px]">
                   <option value="">Default</option>
@@ -39,9 +44,6 @@
                            :keys="componentKeysForIndex(keys[key].values, index)"
                            v-model="values[index]"
                            class="flex-1 max-w-[300px]" />
-                <button type="button" v-if="index > 0" class="py-2" @click="values.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>
           </div>

package/src/widgets/GridSetting.vue

@@ -1,135 +1,193 @@
 <template>
 	<div :class="$style.comp">
 
-		<div v-for="(_, idx) in viewTypes"
-				 v-show="viewType === _.value">
-      <div class="flex flex-col gap-4">
+    <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>
+
+      <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>
-          <strong class="flex-1 text-text-400">Grid</strong>
-          <div class="h-[1px] bg-text-100 mt-2"></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 class="flex-1 grid grid-cols-2 gap-4">
-
-          <div>
-            <label class="text-text-400">Columns</label>
-            <Dropdown v-model="columns[idx]" class="mt-1" @change="apply">
-              <option value="">Not Set</option>
-              <option :value="`${viewType}grid-cols-1`">1</option>
-              <option :value="`${viewType}grid-cols-2`">2</option>
-              <option :value="`${viewType}grid-cols-3`">3</option>
-              <option :value="`${viewType}grid-cols-4`">4</option>
-              <option :value="`${viewType}grid-cols-5`">5</option>
-              <option :value="`${viewType}grid-cols-6`">6</option>
-              <option :value="`${viewType}grid-cols-7`">7</option>
-              <option :value="`${viewType}grid-cols-8`">8</option>
-              <option :value="`${viewType}grid-cols-9`">9</option>
-              <option :value="`${viewType}grid-cols-10`">10</option>
-              <option :value="`${viewType}grid-cols-11`">11</option>
-              <option :value="`${viewType}grid-cols-12`">12</option>
-              <option :value="`${viewType}grid-cols-none`">None</option>
-            </Dropdown>
+        <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>
-            <label class="text-text-400">Rows</label>
-            <Dropdown v-model="rows[idx]"
-                      class="mt-1"
-                      @change="$emit('change')">
-              <option value="">Not Set</option>
-              <option :value="`${viewType}grid-rows-1`">1</option>
-              <option :value="`${viewType}grid-rows-2`">2</option>
-              <option :value="`${viewType}grid-rows-3`">3</option>
-              <option :value="`${viewType}grid-rows-4`">4</option>
-              <option :value="`${viewType}grid-rows-5`">5</option>
-              <option :value="`${viewType}grid-rows-6`">6</option>
-              <option :value="`${viewType}grid-rows-7`">7</option>
-              <option :value="`${viewType}grid-rows-8`">8</option>
-              <option :value="`${viewType}grid-rows-9`">9</option>
-              <option :value="`${viewType}grid-rows-10`">10</option>
-              <option :value="`${viewType}grid-rows-11`">11</option>
-              <option :value="`${viewType}grid-rows-12`">12</option>
-              <option :value="`${viewType}grid-rows-none`">None</option>
-            </Dropdown>
+          <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>
-            <label class="text-text-400">Gap</label>
-            <Dropdown v-model="gap[idx]" class="mt-1" @change="apply">
-              <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>
-              <option :value="`${viewType}gap-9`">9</option>
-              <option :value="`${viewType}gap-10`">10</option>
-              <option :value="`${viewType}gap-11`">11</option>
-              <option :value="`${viewType}gap-12`">12</option>
-            </Dropdown>
+        <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>
-            <label class="text-text-400">Auto Flow</label>
-            <Dropdown v-model="autoFlow[idx]" class="mt-1" @change="apply">
-              <option value="">Not Set</option>
-              <option :value="`${viewType}grid-flow-row`">Row</option>
-              <option :value="`${viewType}grid-flow-col`">Col</option>
-              <option :value="`${viewType}grid-flow-dense`">Dense</option>
-              <option :value="`${viewType}grid-flow-row-dense`">Row Dense</option>
-              <option :value="`${viewType}grid-flow-col-dense`">Col Dense</option>
-            </Dropdown>
+          <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>
-            <label class="text-text-400">Align Items</label>
-            <Dropdown v-for="(_, idx) in viewTypes"
-                      v-show="viewType === _.value"
-                      v-model="alignItems[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 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>
-            <label class="text-text-400">Justify Content</label>
-            <Dropdown v-for="(_, idx) in viewTypes"
-                      v-show="viewType === _.value"
-                      v-model="justifyContent[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 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>
-		</div>
+    </div>
 
-		<ComponentSetting ref="componentSetting"
-											:item="item"
-											:view-type="viewType"
-											:view-types="viewTypes"
-											defaultDisplay="grid"
-											@change="apply" />
+    <ComponentSetting2 :item="item"
+                       :view-type="viewType"
+                       :view-types="viewTypes"
+                       :excludes="['columns', 'direction', 'gap', 'wrap', 'flexAlign', 'flexJustify']"
+                       defaultDisplay="flex"
+                       @change="$emit('change')" />
 
 	</div>
 </template>
@@ -140,6 +198,8 @@ export default{
 
 	emits: [ 'change' ],
 
+  inject: [ 'store' ],
+
 	props: {
 
 		item: {
@@ -163,43 +223,59 @@ 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 = []
+			if(!Array.isArray(this.item.props.autoFlow) || this.item.props.autoFlow.length < 1)
+				this.item.props.autoFlow = [ '' ]
 			return this.item.props.autoFlow
 		},
 
 		columns(){
-			if(!Array.isArray(this.item.props.columns))
-				this.item.props.columns = []
+			if(!Array.isArray(this.item.props.columns) || this.item.props.columns.length < 1)
+				this.item.props.columns = [ '' ]
 			return this.item.props.columns
 		},
 
 		gap(){
-			if(!Array.isArray(this.item.props.gap))
-				this.item.props.gap = []
+			if(!Array.isArray(this.item.props.gap) || this.item.props.gap.length < 1)
+				this.item.props.gap = [ '' ]
 			return this.item.props.gap
 		},
 
     rows(){
-      if(!Array.isArray(this.item.props.rows))
-        this.item.props.rows = []
+      if(!Array.isArray(this.item.props.rows) || this.item.props.rows.length < 1)
+        this.item.props.rows = [ '' ]
       return this.item.props.rows
     },
 
     alignItems(){
-      if(!Array.isArray(this.item.props.alignItems))
-        this.item.props.alignItems = []
+      if(!Array.isArray(this.item.props.alignItems) || this.item.props.alignItems.length < 1)
+        this.item.props.alignItems = [ '' ]
       return this.item.props.alignItems
     },
 
     justifyContent(){
-      if(!Array.isArray(this.item.props.justifyContent))
-        this.item.props.justifyContent = []
+      if(!Array.isArray(this.item.props.justifyContent) || this.item.props.justifyContent.length < 1)
+        this.item.props.justifyContent = [ '' ]
       return this.item.props.justifyContent
     },
 
-	}
+	},
 
 }