@mixd-id/web-scaffold 0.1.230406239 → 0.1.230406240

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/package.json +1 -1
  2. package/src/components/ListView.vue +1 -1
  3. package/src/components/Textbox.vue +2 -2
  4. package/src/index.js +2 -0
  5. package/src/themes/default/index.js +3 -3
  6. package/src/utils/wss.js +51 -84
  7. package/src/utils/wss.mjs +43 -35
  8. package/src/widgets/ComponentSetting2.vue +7 -5
  9. package/src/widgets/GridSetting.vue +202 -126
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@mixd-id/web-scaffold",
3
3
  "private": false,
4
- "version": "0.1.230406239",
4
+ "version": "0.1.230406240",
5
5
  "scripts": {
6
6
  "dev": "vite serve",
7
7
  "build": "vite build",
package/src/components/ListView.vue CHANGED
@@ -133,7 +133,7 @@
133
133
  ref="table1"
134
134
  :columns="presetColumns"
135
135
  :items="items"
136
- class="flex-1 bg-base-400"
136
+ class="flex-1 bg-base-500 dark:bg-base-400"
137
137
  @scroll-end="loadNext">
138
138
  <template v-for="column in presetColumns" #[colOf(column.key)]="{}">
139
139
  <div :class="getHeader(column)" @click="openColumnOptions(column.key, $event.target.closest('.' + $style.header))">
package/src/components/Textbox.vue CHANGED
@@ -4,7 +4,7 @@
4
4
  <input :type="computedType" :disabled="isDisabled" @focus="isActive = true" @input="onInput" @blur="onBlur"
5
5
  :placeholder="placeholder" :maxlength="maxlength" ref="input" autocomplete="new-password"
6
6
  :value="displayedValue" :readonly="Boolean(readonly)" @paste="onPaste"
7
- :class="itemClass"
7
+ :class="itemClass" @click="$emit('input-click')"
8
8
  @keydown="onKeyDown"/>
9
9
  <button class="mr-2" v-if="Boolean(clearable) && !Boolean(readonly) && state >= 1 && modelValue" type="button" @click="$emit('clear')">
10
10
  <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 @@
19
19
 
20
20
  export default{
21
21
 
22
- emits: [ 'update:modelValue', 'change', 'clear', 'submit', 'blur' ],
22
+ emits: [ 'update:modelValue', 'change', 'clear', 'submit', 'blur', 'input-click' ],
23
23
 
24
24
  props: {
25
25
 
package/src/index.js CHANGED
@@ -18,6 +18,8 @@ const mediaBreakpoints = {
18
18
  }
19
19
 
20
20
  const download = (url, as) => {
21
+ url = url + (url.indexOf('?') >= 0 ? '&' : '?') + 'nocache=' + new Date().getTime()
22
+
21
23
  const downloader = document.createElement('a')
22
24
  downloader.setAttribute('href', url)
23
25
  downloader.target = '_blank'
package/src/themes/default/index.js CHANGED
@@ -18,12 +18,12 @@ const plugin = Plugin(function({ addBase, config, theme }) {
18
18
 
19
19
  '--base-50': '250, 250, 250',
20
20
  '--base-200': '222, 224, 227',
21
- '--base-300': '237, 243, 255',
22
- '--base-400': '255, 255, 255',
21
+ '--base-300': '240, 240, 240',
22
+ '--base-400': '247, 247, 247',
23
23
  '--base-500': '255, 255, 255',
24
24
  '--base': '236, 236, 236',
25
25
 
26
- "--text-50": '240, 240, 240',
26
+ "--text-50": '232, 232, 232',
27
27
  "--text-100": '223, 223, 223',
28
28
  "--text-200": '218, 218, 218',
29
29
  "--text-300": '191, 191, 191',
package/src/utils/wss.js CHANGED
@@ -5,101 +5,63 @@ const EventEmitter2 = require("eventemitter2");
5
5
 
6
6
  const convertDataUrlObj = async(obj) => {
7
7
 
8
- const processObjectProperties = async (inputObj) => {
8
+ let output
9
9
 
10
- let outputObj
11
-
12
- if(Array.isArray(inputObj)){
13
- outputObj = []
14
-
15
- for(let i = 0; i < inputObj.length; i++){
16
- const value = inputObj[i];
17
-
18
- if (Buffer.isBuffer(value)) {
19
- outputObj[i] = value.toString('base64')
20
- } else if (typeof value === 'object' && value !== null) {
21
- outputObj[i] = await processObjectProperties(value);
22
- } else {
23
- outputObj[i] = value;
24
- }
25
- }
10
+ if(Array.isArray(obj)){
11
+ output = []
12
+ for(let i = 0; i < obj.length; i++){
13
+ output.push(await convertDataUrlObj(obj[i]));
26
14
  }
27
- else if(typeof inputObj === 'object' && inputObj !== null){
28
- outputObj = {};
29
- for (const key in inputObj) {
30
- if (inputObj.hasOwnProperty(key)) {
31
- const value = inputObj[key];
32
-
33
- if (Buffer.isBuffer(value)) {
34
- outputObj[key] = value.toString('base64')
35
- } else if (typeof value === 'object' && value !== null) {
36
- outputObj[key] = await processObjectProperties(value);
37
- } else {
38
- outputObj[key] = value;
39
- }
40
- }
15
+ }
16
+ else if(Buffer.isBuffer(obj)) {
17
+ output = obj.toString('base64')
18
+ }
19
+ else if(typeof obj === 'object' && obj !== null){
20
+ output = {}
21
+ for (const key in obj) {
22
+ if (obj.hasOwnProperty(key)) {
23
+ output[key] = await convertDataUrlObj(obj[key])
41
24
  }
42
25
  }
26
+ }
27
+ else{
28
+ output = obj;
29
+ }
43
30
 
44
- return outputObj;
45
- };
46
-
47
- return processObjectProperties(obj);
31
+ return output
48
32
  }
49
33
 
50
34
  const revertDataUrlObj = (obj) => {
51
35
 
52
- // Recursive function to process each property of the object
53
- const processObjectProperties = async (inputObj) => {
54
- let outputObj;
36
+ let output
55
37
 
56
- if(Array.isArray(inputObj)){
57
- outputObj = []
58
- for (let i = 0; i < inputObj.length; i++) {
59
- let value = inputObj[i];
60
-
61
- if (typeof value === 'string' && value.startsWith('data:')) {
62
- if(value.indexOf(',') >= 0){
63
- value = value.substring(value.indexOf(',') + 1)
64
- }
65
- outputObj[i] = Buffer.from(value, 'base64');
66
- } else if (typeof value === 'object' && value !== null) {
67
- outputObj[i] = await processObjectProperties(value);
68
- } else {
69
- outputObj[i] = value;
70
- }
71
- }
38
+ if(Array.isArray(obj)){
39
+ output = []
40
+ for(let i = 0; i < obj.length; i++){
41
+ output.push(revertDataUrlObj(obj[i]));
72
42
  }
73
- else{
74
- outputObj = {}
75
-
76
- for (const key in inputObj) {
77
- if (inputObj.hasOwnProperty(key)) {
78
- let value = inputObj[key];
79
-
80
- if (typeof value === 'string' && value.startsWith('data:')) {
81
- if(value.indexOf(',') >= 0){
82
- value = value.substring(value.indexOf(',') + 1)
83
- }
84
- outputObj[key] = Buffer.from(value, 'base64');
85
- } else if (typeof value === 'object' && value !== null) {
86
- outputObj[key] = await processObjectProperties(value);
87
- } else {
88
- outputObj[key] = value;
89
- }
90
- }
43
+ }
44
+ else if (typeof obj === 'string' && obj.startsWith('data:')) {
45
+ if(obj.indexOf(',') >= 0){
46
+ obj = obj.substring(obj.indexOf(',') + 1)
47
+ }
48
+ output = Buffer.from(obj, 'base64');
49
+ }
50
+ else if(typeof obj === 'object' && obj !== null){
51
+ output = {}
52
+ for (const key in obj) {
53
+ if (obj.hasOwnProperty(key)) {
54
+ output[key] = revertDataUrlObj(obj[key])
91
55
  }
92
56
  }
57
+ }
58
+ else{
59
+ output = obj;
60
+ }
93
61
 
94
-
95
- return outputObj;
96
- };
97
-
98
- // Start processing the top-level object
99
- return processObjectProperties(obj);
62
+ return output
100
63
  }
101
64
 
102
-
103
65
  class WSS extends EventEmitter2{
104
66
 
105
67
  _instance
@@ -111,17 +73,19 @@ class WSS extends EventEmitter2{
111
73
  _reqFn = []
112
74
 
113
75
  async fromBinaryData(binaryData){
114
- const secretKey = this._opt.key;
115
76
  const encryptedString = Buffer.from(binaryData).toString('utf-8');
116
- const decryptedData = CryptoJS.AES.decrypt(encryptedString, secretKey).toString(CryptoJS.enc.Utf8);
77
+ const decryptedData = this._opt.key ?
78
+ CryptoJS.AES.decrypt(encryptedString, this._opt.key).toString(CryptoJS.enc.Utf8) :
79
+ encryptedString;
117
80
  const receivedObject = JSON.parse(decryptedData);
118
81
  return await revertDataUrlObj(receivedObject);
119
82
  }
120
83
 
121
84
  async toBinaryData(obj){
122
- const secretKey = this._opt.key;
123
85
  const dataUrlObj = await convertDataUrlObj(obj)
124
- const encryptedData = crypto.AES.encrypt(JSON.stringify(dataUrlObj), secretKey).toString();
86
+ const encryptedData = this._opt.key ?
87
+ crypto.AES.encrypt(JSON.stringify(dataUrlObj), this._opt.key).toString() :
88
+ JSON.stringify(dataUrlObj);
125
89
  return new TextEncoder().encode(encryptedData);
126
90
  }
127
91
 
@@ -242,6 +206,9 @@ class WSS extends EventEmitter2{
242
206
 
243
207
  }
244
208
 
209
+
245
210
  module.exports = {
246
- WSS
211
+ WSS,
212
+ convertDataUrlObj,
213
+ revertDataUrlObj
247
214
  }
package/src/utils/wss.mjs CHANGED
@@ -10,6 +10,34 @@ const fileToDataURL = (file) => {
10
10
  });
11
11
  };
12
12
 
13
+ const convertDataUrlObj = async(obj) => {
14
+
15
+ let output
16
+
17
+ if(Array.isArray(obj)){
18
+ output = []
19
+ for(let i = 0; i < obj.length; i++){
20
+ output.push(await convertDataUrlObj(obj[i]));
21
+ }
22
+ }
23
+ else if(obj instanceof File || obj instanceof Blob) {
24
+ output = await fileToDataURL(obj);
25
+ }
26
+ else if(typeof obj === 'object' && obj !== null){
27
+ output = {}
28
+ for (const key in obj) {
29
+ if (obj.hasOwnProperty(key)) {
30
+ output[key] = await convertDataUrlObj(obj[key])
31
+ }
32
+ }
33
+ }
34
+ else{
35
+ output = obj;
36
+ }
37
+
38
+ return output
39
+ }
40
+
13
41
  class WSS extends EventEmitter2{
14
42
 
15
43
  _instance
@@ -18,34 +46,7 @@ class WSS extends EventEmitter2{
18
46
  _callbacks = {}
19
47
  _pendingSend = []
20
48
  _lastBlurAt
21
-
22
- static async convertDataUrlObj(obj){
23
-
24
- let output
25
-
26
- if(Array.isArray(obj)){
27
- output = []
28
- for(let i = 0; i < obj.length; i++){
29
- output.push(await WSS.convertDataUrlObj(obj[i]));
30
- }
31
- }
32
- else if(obj instanceof File || obj instanceof Blob) {
33
- output = await fileToDataURL(obj);
34
- }
35
- else if(typeof obj === 'object' && obj !== null){
36
- output = {}
37
- for (const key in obj) {
38
- if (obj.hasOwnProperty(key)) {
39
- output[key] = await WSS.convertDataUrlObj(obj[key])
40
- }
41
- }
42
- }
43
- else{
44
- output = obj;
45
- }
46
-
47
- return output
48
- }
49
+ _readyState = 0
49
50
 
50
51
  constructor(opt) {
51
52
  super();
@@ -96,15 +97,17 @@ class WSS extends EventEmitter2{
96
97
  }
97
98
 
98
99
  async fromBinaryData(binaryData){
99
- const secretKey = this._opt.key;
100
100
  const encryptedString = new TextDecoder().decode(binaryData)
101
- const decryptedData = CryptoJS.AES.decrypt(encryptedString, secretKey).toString(CryptoJS.enc.Utf8);
101
+ const decryptedData = this._opt.key ?
102
+ CryptoJS.AES.decrypt(encryptedString, this._opt.key).toString(CryptoJS.enc.Utf8) :
103
+ encryptedString;
102
104
  return JSON.parse(decryptedData)
103
105
  }
104
106
 
105
107
  async toBinaryData(obj){
106
- const secretKey = this._opt.key;
107
- const encryptedData = CryptoJS.AES.encrypt(JSON.stringify(obj), secretKey).toString();
108
+ const encryptedData = this._opt.key ?
109
+ CryptoJS.AES.encrypt(JSON.stringify(obj), this._opt.key).toString() :
110
+ JSON.stringify(obj);
108
111
  return new TextEncoder().encode(encryptedData)
109
112
  }
110
113
 
@@ -115,6 +118,7 @@ class WSS extends EventEmitter2{
115
118
  this._instance.binaryType = 'arraybuffer';
116
119
 
117
120
  this._instance.onopen = () => {
121
+ this._readyState = 2
118
122
  this.send('_auth', this._opt.auth)
119
123
  .then(() => {
120
124
  reconnect ? this.emit('reconnect', null, []) : this.emit('connect', null, [])
@@ -123,6 +127,8 @@ class WSS extends EventEmitter2{
123
127
  this.sendSync(sendParams.path, sendParams.params, sendParams.cb, sendParams.err)
124
128
  }
125
129
  this._pendingSend = []
130
+
131
+ this._readyState = 1
126
132
  })
127
133
  };
128
134
 
@@ -181,7 +187,7 @@ class WSS extends EventEmitter2{
181
187
  }
182
188
 
183
189
  sendSync(path, params, cb, err, override){
184
- if(this._instance.readyState !== 1){
190
+ if(this._instance.readyState !== 1 && this._readyState !== 1){
185
191
  this._pendingSend.push({ path, params, cb, err })
186
192
  return
187
193
  }
@@ -193,7 +199,7 @@ class WSS extends EventEmitter2{
193
199
 
194
200
  const _requestId = ++this._counter
195
201
 
196
- WSS.convertDataUrlObj({
202
+ convertDataUrlObj({
197
203
  _requestId,
198
204
  path,
199
205
  params
@@ -230,5 +236,7 @@ class WSS extends EventEmitter2{
230
236
  }
231
237
 
232
238
  export {
233
- WSS
239
+ WSS,
240
+ fileToDataURL,
241
+ convertDataUrlObj
234
242
  }
package/src/widgets/ComponentSetting2.vue CHANGED
@@ -25,9 +25,14 @@
25
25
  <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>
26
26
  </button>
27
27
  </div>
28
- <div class="flex flex-col gap-2">
28
+ <div class="mt-1 flex flex-row gap-2">
29
29
  <div v-for="(_, index) in values" class="items-start">
30
- <small class="w-[60px] text-text-300">{{ viewTypes[index].text }}</small>
30
+ <div class="flex flex-row items-center" v-if="values.length > 1">
31
+ <small class="flex-1 text-text-300">{{ viewTypes[index].text }}</small>
32
+ <button type="button" v-if="index > 0" @click="values.splice(index, 1)">
33
+ <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>
34
+ </button>
35
+ </div>
31
36
  <div class="flex flex-row items-start gap-2">
32
37
  <Dropdown v-if="Array.isArray(keys[key].values)" v-model="values[index]" class="flex-1 max-w-[300px]">
33
38
  <option value="">Default</option>
@@ -39,9 +44,6 @@
39
44
  :keys="componentKeysForIndex(keys[key].values, index)"
40
45
  v-model="values[index]"
41
46
  class="flex-1 max-w-[300px]" />
42
- <button type="button" v-if="index > 0" class="py-2" @click="values.splice(index, 1)">
43
- <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>
44
- </button>
45
47
  </div>
46
48
  </div>
47
49
  </div>
package/src/widgets/GridSetting.vue CHANGED
@@ -1,135 +1,193 @@
1
1
  <template>
2
2
  <div :class="$style.comp">
3
3
 
4
- <div v-for="(_, idx) in viewTypes"
5
- v-show="viewType === _.value">
6
- <div class="flex flex-col gap-4">
4
+ <div>
5
+ <div class="flex flex-row gap-1 items-center cursor-pointer">
6
+ <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>
7
+ <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>
8
+ <strong class="flex-1 text-text-400 line-clamp-1" @click="expanded['grid'] = !expanded['grid']">Grid</strong>
9
+ </div>
10
+
11
+ <div class="h-[1px] bg-text-100 mt-2 mb-4"></div>
12
+
13
+ <div v-if="expanded['grid']" class="mt-4 grid grid-cols-2 gap-4">
14
+
7
15
  <div>
8
- <strong class="flex-1 text-text-400">Grid</strong>
9
- <div class="h-[1px] bg-text-100 mt-2"></div>
16
+ <div class="flex flex-row items-center gap-2">
17
+ <label class="flex-1 text-text-400">Columns</label>
18
+ <button type="button" v-if="columns.length < 2" @click="columns.push('')">
19
+ <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>
20
+ </button>
21
+ </div>
22
+ <div class="mt-1 grid gap-2" :class="`grid-cols-${columns.length}`">
23
+ <div v-for="(_, index) in columns" class="items-start">
24
+ <div class="flex flex-row items-center" v-if="columns.length > 1">
25
+ <small class="flex-1 text-text-300">{{ viewTypes[index].text }}</small>
26
+ <button type="button" v-if="index > 0" @click="columns.splice(index, 1)">
27
+ <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>
28
+ </button>
29
+ </div>
30
+ <div>
31
+ <Dropdown v-model="columns[index]" class="w-full max-w-[300px]">
32
+ <option value="">Default</option>
33
+ <option v-for="i in 12" :value="`${viewTypes[index].value}grid-cols-${i}`">{{ i }}</option>
34
+ <option :value="`${viewTypes[index].value}grid-cols-none`">None</option>
35
+ </Dropdown>
36
+ </div>
37
+ </div>
38
+ </div>
10
39
  </div>
11
40
 
12
- <div class="flex-1 grid grid-cols-2 gap-4">
13
-
14
- <div>
15
- <label class="text-text-400">Columns</label>
16
- <Dropdown v-model="columns[idx]" class="mt-1" @change="apply">
17
- <option value="">Not Set</option>
18
- <option :value="`${viewType}grid-cols-1`">1</option>
19
- <option :value="`${viewType}grid-cols-2`">2</option>
20
- <option :value="`${viewType}grid-cols-3`">3</option>
21
- <option :value="`${viewType}grid-cols-4`">4</option>
22
- <option :value="`${viewType}grid-cols-5`">5</option>
23
- <option :value="`${viewType}grid-cols-6`">6</option>
24
- <option :value="`${viewType}grid-cols-7`">7</option>
25
- <option :value="`${viewType}grid-cols-8`">8</option>
26
- <option :value="`${viewType}grid-cols-9`">9</option>
27
- <option :value="`${viewType}grid-cols-10`">10</option>
28
- <option :value="`${viewType}grid-cols-11`">11</option>
29
- <option :value="`${viewType}grid-cols-12`">12</option>
30
- <option :value="`${viewType}grid-cols-none`">None</option>
31
- </Dropdown>
41
+ <div>
42
+ <div class="flex flex-row items-center gap-2">
43
+ <label class="flex-1 text-text-400">Rows</label>
44
+ <button type="button" v-if="rows.length < 2" @click="rows.push('')">
45
+ <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>
46
+ </button>
32
47
  </div>
33
-
34
- <div>
35
- <label class="text-text-400">Rows</label>
36
- <Dropdown v-model="rows[idx]"
37
- class="mt-1"
38
- @change="$emit('change')">
39
- <option value="">Not Set</option>
40
- <option :value="`${viewType}grid-rows-1`">1</option>
41
- <option :value="`${viewType}grid-rows-2`">2</option>
42
- <option :value="`${viewType}grid-rows-3`">3</option>
43
- <option :value="`${viewType}grid-rows-4`">4</option>
44
- <option :value="`${viewType}grid-rows-5`">5</option>
45
- <option :value="`${viewType}grid-rows-6`">6</option>
46
- <option :value="`${viewType}grid-rows-7`">7</option>
47
- <option :value="`${viewType}grid-rows-8`">8</option>
48
- <option :value="`${viewType}grid-rows-9`">9</option>
49
- <option :value="`${viewType}grid-rows-10`">10</option>
50
- <option :value="`${viewType}grid-rows-11`">11</option>
51
- <option :value="`${viewType}grid-rows-12`">12</option>
52
- <option :value="`${viewType}grid-rows-none`">None</option>
53
- </Dropdown>
48
+ <div class="mt-1 grid gap-2" :class="`grid-cols-${rows.length}`">
49
+ <div v-for="(_, index) in rows" class="items-start">
50
+ <div class="flex flex-row items-center" v-if="rows.length > 1">
51
+ <small class="flex-1 text-text-300">{{ viewTypes[index].text }}</small>
52
+ <button type="button" v-if="index > 0" @click="rows.splice(index, 1)">
53
+ <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>
54
+ </button>
55
+ </div>
56
+ <div>
57
+ <Dropdown v-model="rows[index]" class="w-full max-w-[300px]">
58
+ <option value="">Default</option>
59
+ <option v-for="i in 12" :value="`${viewTypes[index].value}grid-rows-${i}`">{{ i }}</option>
60
+ <option :value="`${viewTypes[index].value}grid-rows-none`">None</option>
61
+ </Dropdown>
62
+ </div>
63
+ </div>
54
64
  </div>
65
+ </div>
55
66
 
56
- <div>
57
- <label class="text-text-400">Gap</label>
58
- <Dropdown v-model="gap[idx]" class="mt-1" @change="apply">
59
- <option value="">Not Set</option>
60
- <option :value="`${viewType}gap-0`">0</option>
61
- <option :value="`${viewType}gap-1`">1</option>
62
- <option :value="`${viewType}gap-2`">2</option>
63
- <option :value="`${viewType}gap-3`">3</option>
64
- <option :value="`${viewType}gap-4`">4</option>
65
- <option :value="`${viewType}gap-5`">5</option>
66
- <option :value="`${viewType}gap-6`">6</option>
67
- <option :value="`${viewType}gap-7`">7</option>
68
- <option :value="`${viewType}gap-8`">8</option>
69
- <option :value="`${viewType}gap-9`">9</option>
70
- <option :value="`${viewType}gap-10`">10</option>
71
- <option :value="`${viewType}gap-11`">11</option>
72
- <option :value="`${viewType}gap-12`">12</option>
73
- </Dropdown>
67
+ <div>
68
+ <div class="flex flex-row items-center gap-2">
69
+ <label class="flex-1 text-text-400">Gap</label>
70
+ <button type="button" v-if="gap.length < 2" @click="gap.push('')">
71
+ <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>
72
+ </button>
74
73
  </div>
75
-
76
- <div>
77
- <label class="text-text-400">Auto Flow</label>
78
- <Dropdown v-model="autoFlow[idx]" class="mt-1" @change="apply">
79
- <option value="">Not Set</option>
80
- <option :value="`${viewType}grid-flow-row`">Row</option>
81
- <option :value="`${viewType}grid-flow-col`">Col</option>
82
- <option :value="`${viewType}grid-flow-dense`">Dense</option>
83
- <option :value="`${viewType}grid-flow-row-dense`">Row Dense</option>
84
- <option :value="`${viewType}grid-flow-col-dense`">Col Dense</option>
85
- </Dropdown>
74
+ <div class="mt-1 grid gap-2" :class="`grid-cols-${gap.length}`">
75
+ <div v-for="(_, index) in gap" class="items-start">
76
+ <div class="flex flex-row items-center" v-if="gap.length > 1">
77
+ <small class="flex-1 text-text-300">{{ viewTypes[index].text }}</small>
78
+ <button type="button" v-if="index > 0" @click="gap.splice(index, 1)">
79
+ <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>
80
+ </button>
81
+ </div>
82
+ <div>
83
+ <Dropdown v-model="gap[index]" class="w-full max-w-[300px]">
84
+ <option value="">Default</option>
85
+ <option v-for="i in 13" :value="`${viewTypes[index].value}gap-${i - 1}`">{{ i - 1 }}</option>
86
+ </Dropdown>
87
+ </div>
88
+ </div>
86
89
  </div>
90
+ </div>
87
91
 
88
- <div>
89
- <label class="text-text-400">Align Items</label>
90
- <Dropdown v-for="(_, idx) in viewTypes"
91
- v-show="viewType === _.value"
92
- v-model="alignItems[idx]"
93
- class="w-full"
94
- @change="$emit('change')">
95
- <option value="">Not Set</option>
96
- <option :value="`${viewType}items-start`">Start</option>
97
- <option :value="`${viewType}items-end`">End</option>
98
- <option :value="`${viewType}items-center`">Center</option>
99
- <option :value="`${viewType}items-baseline`">Baseline</option>
100
- <option :value="`${viewType}items-stretch`">Stretch</option>
101
- </Dropdown>
92
+ <div>
93
+ <div class="flex flex-row items-center gap-2">
94
+ <label class="flex-1 text-text-400">Auto Flow</label>
95
+ <button type="button" v-if="autoFlow.length < 2" @click="autoFlow.push('')">
96
+ <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>
97
+ </button>
98
+ </div>
99
+ <div class="mt-1 grid gap-2" :class="`grid-cols-${autoFlow.length}`">
100
+ <div v-for="(_, index) in autoFlow" class="items-start">
101
+ <div class="flex flex-row items-center" v-if="autoFlow.length > 1">
102
+ <small class="flex-1 text-text-300">{{ viewTypes[index].text }}</small>
103
+ <button type="button" v-if="index > 0" @click="autoFlow.splice(index, 1)">
104
+ <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>
105
+ </button>
106
+ </div>
107
+ <div>
108
+ <Dropdown v-model="autoFlow[index]" class="w-full max-w-[300px]">
109
+ <option value="">Default</option>
110
+ <option :value="`${viewTypes[index].value}grid-flow-row`">Row</option>
111
+ <option :value="`${viewTypes[index].value}grid-flow-col`">Col</option>
112
+ <option :value="`${viewTypes[index].value}grid-flow-dense`">Dense</option>
113
+ <option :value="`${viewTypes[index].value}grid-flow-row-dense`">Row Dense</option>
114
+ <option :value="`${viewTypes[index].value}grid-flow-col-dense`">Col Dense</option>
115
+ </Dropdown>
116
+ </div>
117
+ </div>
102
118
  </div>
119
+ </div>
103
120
 
104
- <div>
105
- <label class="text-text-400">Justify Content</label>
106
- <Dropdown v-for="(_, idx) in viewTypes"
107
- v-show="viewType === _.value"
108
- v-model="justifyContent[idx]"
109
- class="w-full"
110
- @change="$emit('change')">
111
- <option value="">Not Set</option>
112
- <option :value="`${viewType}justify-normal`">Normal</option>
113
- <option :value="`${viewType}justify-start`">Start</option>
114
- <option :value="`${viewType}justify-end`">End</option>
115
- <option :value="`${viewType}justify-center`">Center</option>
116
- <option :value="`${viewType}justify-between`">Between</option>
117
- <option :value="`${viewType}justify-around`">Around</option>
118
- <option :value="`${viewType}justify-evenly`">Evenly</option>
119
- <option :value="`${viewType}justify-stretch`">Stretch</option>
120
- </Dropdown>
121
+ <div class="col-span-2">
122
+ <div class="flex flex-row items-center gap-2">
123
+ <label class="flex-1 text-text-400">Align Items</label>
124
+ <button type="button" v-if="alignItems.length < 2" @click="alignItems.push('')">
125
+ <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>
126
+ </button>
127
+ </div>
128
+ <div class="mt-1 grid gap-2" :class="`grid-cols-${alignItems.length}`">
129
+ <div v-for="(_, index) in alignItems" class="items-start">
130
+ <div class="flex flex-row items-center" v-if="alignItems.length > 1">
131
+ <small class="flex-1 text-text-300">{{ viewTypes[index].text }}</small>
132
+ <button type="button" v-if="index > 0" @click="alignItems.splice(index, 1)">
133
+ <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>
134
+ </button>
135
+ </div>
136
+ <div>
137
+ <Dropdown v-model="alignItems[index]" class="w-full max-w-[300px]">
138
+ <option value="">Default</option>
139
+ <option :value="`${viewTypes[index].value}items-start`">Start</option>
140
+ <option :value="`${viewTypes[index].value}items-end`">End</option>
141
+ <option :value="`${viewTypes[index].value}items-center`">Center</option>
142
+ <option :value="`${viewTypes[index].value}items-baseline`">Baseline</option>
143
+ <option :value="`${viewTypes[index].value}items-stretch`">Stretch</option>
144
+ </Dropdown>
145
+ </div>
146
+ </div>
121
147
  </div>
148
+ </div>
122
149
 
150
+ <div class="col-span-2">
151
+ <div class="flex flex-row items-center gap-2">
152
+ <label class="flex-1 text-text-400">Justify Content</label>
153
+ <button type="button" v-if="justifyContent.length < 2" @click="justifyContent.push('')">
154
+ <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>
155
+ </button>
156
+ </div>
157
+ <div class="mt-1 grid gap-2" :class="`grid-cols-${justifyContent.length}`">
158
+ <div v-for="(_, index) in justifyContent" class="items-start">
159
+ <div class="flex flex-row items-center" v-if="justifyContent.length > 1">
160
+ <small class="flex-1 text-text-300">{{ viewTypes[index].text }}</small>
161
+ <button type="button" v-if="index > 0" @click="justifyContent.splice(index, 1)">
162
+ <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>
163
+ </button>
164
+ </div>
165
+ <div>
166
+ <Dropdown v-model="justifyContent[index]" class="w-full max-w-[300px]">
167
+ <option value="">Default</option>
168
+ <option :value="`${viewTypes[index].value}justify-normal`">Normal</option>
169
+ <option :value="`${viewTypes[index].value}justify-start`">Start</option>
170
+ <option :value="`${viewTypes[index].value}justify-end`">End</option>
171
+ <option :value="`${viewTypes[index].value}justify-center`">Center</option>
172
+ <option :value="`${viewTypes[index].value}justify-between`">Between</option>
173
+ <option :value="`${viewTypes[index].value}justify-around`">Around</option>
174
+ <option :value="`${viewTypes[index].value}justify-evenly`">Evenly</option>
175
+ <option :value="`${viewTypes[index].value}justify-stretch`">Stretch</option>
176
+ </Dropdown>
177
+ </div>
178
+ </div>
179
+ </div>
123
180
  </div>
181
+
124
182
  </div>
125
- </div>
183
+ </div>
126
184
 
127
- <ComponentSetting ref="componentSetting"
128
- :item="item"
129
- :view-type="viewType"
130
- :view-types="viewTypes"
131
- defaultDisplay="grid"
132
- @change="apply" />
185
+ <ComponentSetting2 :item="item"
186
+ :view-type="viewType"
187
+ :view-types="viewTypes"
188
+ :excludes="['columns', 'direction', 'gap', 'wrap', 'flexAlign', 'flexJustify']"
189
+ defaultDisplay="flex"
190
+ @change="$emit('change')" />
133
191
 
134
192
  </div>
135
193
  </template>
@@ -140,6 +198,8 @@ export default{
140
198
 
141
199
  emits: [ 'change' ],
142
200
 
201
+ inject: [ 'store' ],
202
+
143
203
  props: {
144
204
 
145
205
  item: {
@@ -163,43 +223,59 @@ export default{
163
223
 
164
224
  computed: {
165
225
 
226
+ componentStore(){
227
+ if(this.store && this.store.components){
228
+ if(!this.store.components.compsetting)
229
+ this.store.components.compsetting = {}
230
+
231
+ return this.store.components.compsetting
232
+ }
233
+ return {}
234
+ },
235
+
236
+ expanded(){
237
+ if(!this.componentStore['expanded'])
238
+ this.componentStore['expanded'] = {}
239
+ return this.componentStore['expanded']
240
+ },
241
+
166
242
  autoFlow(){
167
- if(!Array.isArray(this.item.props.autoFlow))
168
- this.item.props.autoFlow = []
243
+ if(!Array.isArray(this.item.props.autoFlow) || this.item.props.autoFlow.length < 1)
244
+ this.item.props.autoFlow = [ '' ]
169
245
  return this.item.props.autoFlow
170
246
  },
171
247
 
172
248
  columns(){
173
- if(!Array.isArray(this.item.props.columns))
174
- this.item.props.columns = []
249
+ if(!Array.isArray(this.item.props.columns) || this.item.props.columns.length < 1)
250
+ this.item.props.columns = [ '' ]
175
251
  return this.item.props.columns
176
252
  },
177
253
 
178
254
  gap(){
179
- if(!Array.isArray(this.item.props.gap))
180
- this.item.props.gap = []
255
+ if(!Array.isArray(this.item.props.gap) || this.item.props.gap.length < 1)
256
+ this.item.props.gap = [ '' ]
181
257
  return this.item.props.gap
182
258
  },
183
259
 
184
260
  rows(){
185
- if(!Array.isArray(this.item.props.rows))
186
- this.item.props.rows = []
261
+ if(!Array.isArray(this.item.props.rows) || this.item.props.rows.length < 1)
262
+ this.item.props.rows = [ '' ]
187
263
  return this.item.props.rows
188
264
  },
189
265
 
190
266
  alignItems(){
191
- if(!Array.isArray(this.item.props.alignItems))
192
- this.item.props.alignItems = []
267
+ if(!Array.isArray(this.item.props.alignItems) || this.item.props.alignItems.length < 1)
268
+ this.item.props.alignItems = [ '' ]
193
269
  return this.item.props.alignItems
194
270
  },
195
271
 
196
272
  justifyContent(){
197
- if(!Array.isArray(this.item.props.justifyContent))
198
- this.item.props.justifyContent = []
273
+ if(!Array.isArray(this.item.props.justifyContent) || this.item.props.justifyContent.length < 1)
274
+ this.item.props.justifyContent = [ '' ]
199
275
  return this.item.props.justifyContent
200
276
  },
201
277
 
202
- }
278
+ },
203
279
 
204
280
  }
205
281