@mixd-id/web-scaffold 0.1.230406396 → 0.1.230406398

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 (18) hide show
  1. package/package.json +1 -1
  2. package/src/components/Checkbox.vue +2 -2
  3. package/src/components/ContextMenu.vue +2 -2
  4. package/src/components/Datepicker.vue +1 -1
  5. package/src/components/Dropdown.vue +1 -1
  6. package/src/components/List.vue +3 -3
  7. package/src/components/ListItem.vue +0 -1
  8. package/src/components/Modal.vue +1 -1
  9. package/src/components/MultilineText.vue +1 -1
  10. package/src/components/Radio.vue +1 -1
  11. package/src/components/Textarea.vue +1 -1
  12. package/src/components/Textbox.vue +1 -1
  13. package/src/components/TreeViewItem.vue +1 -1
  14. package/src/components/VirtualTable.vue +91 -85
  15. package/src/themes/default/index.js +13 -13
  16. package/src/widgets/PresetBar.vue +2 -2
  17. package/src/widgets/PresetBarPivot.vue +3 -3
  18. package/src/widgets/WebPageBuilder.vue +3 -3
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.230406396",
4
+ "version": "0.1.230406398",
5
5
  "scripts": {
6
6
  "dev": "vite serve",
7
7
  "build": "vite build",
package/src/components/Checkbox.vue CHANGED
@@ -19,7 +19,7 @@
19
19
 
20
20
  <script>
21
21
 
22
- import { parseBoolean } from "../utils/helpers.mjs";
22
+ import {parseBoolean} from "../utils/helpers.mjs";
23
23
 
24
24
  export default {
25
25
 
@@ -151,7 +151,7 @@ export default {
151
151
  }
152
152
 
153
153
  .indicator{
154
- @apply w-[21px] h-[21px] rounded-lg border-[1px] border-text-300 bg-base-500;
154
+ @apply w-[21px] h-[21px] rounded-lg border-[1px] border-text-300 bg-base-300;
155
155
  @apply flex items-center justify-center overflow-hidden;
156
156
  transition: border 300ms cubic-bezier(0.25, 1, 0.5, 1);
157
157
  }
package/src/components/ContextMenu.vue CHANGED
@@ -312,7 +312,7 @@ export default {
312
312
  <style module>
313
313
 
314
314
  .contextMenu{
315
- @apply fixed z-20 panel-500 min-w-[150px] overflow-y-auto rounded-xl;
315
+ @apply fixed z-20 bg-base-400 min-w-[150px] overflow-y-auto rounded-xl;
316
316
  @apply border-[2px] border-text-200 shadow-2xl whitespace-nowrap;
317
317
  transition: all 150ms cubic-bezier(0.25, 1, 0.5, 1);
318
318
  opacity: 0;
@@ -326,7 +326,7 @@ export default {
326
326
  @media screen(md){
327
327
 
328
328
  .contextMenu{
329
- @apply fixed z-20 panel-500 min-w-[150px] overflow-y-auto rounded-lg;
329
+ @apply fixed z-20 bg-base-400 min-w-[150px] overflow-y-auto rounded-lg;
330
330
  @apply border-[1px] border-text-50 shadow-2xl whitespace-nowrap;
331
331
  transition: all 150ms cubic-bezier(0.25, 1, 0.5, 1);
332
332
  opacity: 0;
package/src/components/Datepicker.vue CHANGED
@@ -293,7 +293,7 @@ export default{
293
293
  .datepicker {
294
294
  @apply min-h-[var(--h-cp)];
295
295
  @apply flex items-center rounded-lg overflow-hidden cursor-pointer relative;
296
- @apply border-[1px] border-text-200 bg-base-500 rounded-lg;
296
+ @apply border-[1px] border-text-200 bg-base-300 rounded-lg;
297
297
  @apply cursor-pointer;
298
298
  }
299
299
  .datepicker:not(.readonly){
package/src/components/Dropdown.vue CHANGED
@@ -161,7 +161,7 @@ export default {
161
161
 
162
162
  .dropdown{
163
163
  @apply flex items-center rounded-lg overflow-hidden cursor-pointer relative;
164
- @apply border-[1px] border-text-200 bg-base-500;
164
+ @apply border-[1px] border-text-200 bg-base-300;
165
165
  }
166
166
  .dropdown:not(.readonly){
167
167
  @apply hover:border-text-300;
package/src/components/List.vue CHANGED
@@ -99,7 +99,7 @@
99
99
  </template>
100
100
  </Textbox>
101
101
 
102
- <div v-if="$slots.gridItem"
102
+ <div v-if="false && $slots.gridItem"
103
103
  class="hidden md:grid grid-cols-2 gap-[1px] border-[1px] border-text-50 rounded-lg">
104
104
  <Radio v-model="preset.view"
105
105
  name="view"
@@ -132,7 +132,7 @@
132
132
  <VirtualTable
133
133
  ref="table"
134
134
  :columns="columns"
135
- class="flex-1 rounded-lg panel-400"
135
+ class="flex-1 bg-base-300"
136
136
  :items="data.items"
137
137
  :enumCache="enumCache"
138
138
  @scroll-end="loadNext"
@@ -206,7 +206,7 @@
206
206
  <VirtualTable v-else-if="presetView === 'table'"
207
207
  ref="table"
208
208
  :columns="preset.columns"
209
- class="flex-1 rounded-lg panel-400"
209
+ class="flex-1 panel-400"
210
210
  :items="data.extItems"
211
211
  :enumCache="enumCache"
212
212
  @scroll-end="loadExtNext">
package/src/components/ListItem.vue CHANGED
@@ -144,7 +144,6 @@ export default{
144
144
  <style module>
145
145
 
146
146
  .comp{
147
- @apply bg-base-500;
148
147
  }
149
148
 
150
149
  .comp .dragover{
package/src/components/Modal.vue CHANGED
@@ -354,7 +354,7 @@ export default{
354
354
 
355
355
  .modal{
356
356
  @apply fixed;
357
- @apply panel-400;
357
+ @apply bg-base-300 dark:bg-base-400;
358
358
  @apply border-[1px] border-text-50 z-20 flex max-h-[90vh];
359
359
  @apply rounded-xl overflow-hidden transition-all;
360
360
  }
package/src/components/MultilineText.vue CHANGED
@@ -137,7 +137,7 @@ export default{
137
137
  <style module>
138
138
 
139
139
  .textarea{
140
- @apply flex items-start border-[1px] border-text-200 bg-base-500 rounded-lg overflow-hidden;
140
+ @apply flex items-start border-[1px] border-text-200 bg-base-300 rounded-lg overflow-hidden;
141
141
  }
142
142
  .textarea textarea{
143
143
  @apply flex-1 outline-none p-2 bg-transparent resize-none;
package/src/components/Radio.vue CHANGED
@@ -85,7 +85,7 @@ export default{
85
85
  }
86
86
 
87
87
  .indicator{
88
- @apply w-[21px] h-[21px] border-[1px] rounded-full border-text-200 bg-base-500;
88
+ @apply w-[21px] h-[21px] border-[1px] rounded-full border-text-200 bg-base-300;
89
89
  @apply flex items-center justify-center overflow-hidden;
90
90
  transition: border 300ms cubic-bezier(0.25, 1, 0.5, 1);
91
91
  }
package/src/components/Textarea.vue CHANGED
@@ -144,7 +144,7 @@ export default{
144
144
 
145
145
  .textarea{
146
146
  @apply min-h-[var(--h-cp)];
147
- @apply flex items-start border-[1px] border-text-200 bg-base-500 rounded-lg overflow-hidden;
147
+ @apply flex items-start border-[1px] border-text-200 bg-base-300 rounded-lg overflow-hidden;
148
148
  @apply !max-h-[200px];
149
149
  }
150
150
  .textarea textarea{
package/src/components/Textbox.vue CHANGED
@@ -181,7 +181,7 @@ export default{
181
181
 
182
182
  .textbox{
183
183
  @apply flex items-center;
184
- @apply border-[1px] border-text-200 bg-base-500 rounded-lg;
184
+ @apply border-[1px] border-text-200 bg-base-300 rounded-lg;
185
185
  @apply overflow-hidden;
186
186
  }
187
187
 
package/src/components/TreeViewItem.vue CHANGED
@@ -402,7 +402,7 @@ export default{
402
402
  <style module>
403
403
 
404
404
  .item{
405
- @apply bg-base-300 dark:bg-base-400 flex flex-row py-1 items-center rounded-lg mb-1;
405
+ @apply bg-base-300 flex flex-row py-1 items-center rounded-lg mb-1;
406
406
  @apply border-[1px] border-transparent cursor-pointer;
407
407
  }
408
408
  .item.active{
package/src/components/VirtualTable.vue CHANGED
@@ -36,50 +36,51 @@
36
36
  </div>
37
37
  </div>
38
38
 
39
- <div ref="cont" class="flex-1 overflow-y-auto">
40
- <div class="flex-1 flex flex-row">
39
+ <div ref="cont" class="flex-1 overflow-y-auto" @scroll.passive="handleScroll">
40
+ <div v-if="state === 3" class="flex items-center justify-center p-8">
41
+ <svg class="animate-spin aspect-square w-[32px] h-[32px] text-primary" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
42
+ </div>
43
+
44
+ <div v-else class="flex-1 flex flex-row">
41
45
 
42
- <div :style="freezeLeftScrollerStyle">
46
+ <div v-if="state !== 2" :style="freezeLeftScrollerStyle">
43
47
  <div :class="$style.spacer" :style="spacerStyle">
44
48
  <table :class="$style.table" class="flex-1 overflow-x-auto">
45
49
  <thead>
46
- <tr>
47
- <th v-for="column in freezeLeftColumns" :style="thStyle(column)"></th>
48
- <th :class="$style.spacer"></th>
49
- </tr>
50
+ <tr>
51
+ <th v-for="column in freezeLeftColumns" :style="thStyle(column)"></th>
52
+ <th :class="$style.spacer"></th>
53
+ </tr>
50
54
  </thead>
51
- <tbody ref="tbody">
52
- <tr v-for="(item, index) in visibleItems" :key="item"
53
- @click="select(item, index)"
54
- :class="trClass(item, index)">
55
- <td v-for="(column, columnIndex) in freezeLeftColumns"
56
- :class="tdClass(item, column)"
57
- @click="$emit('item-click', item, column)">
58
-
59
- <div v-if="columnIndex === 0 && item._type === 'totalRow'" :class="$style.total">Total</div>
60
- <div v-else-if="item._type === 'totalRow' && !column.key.startsWith('_')"></div>
61
-
62
- <slot v-else-if="$slots[column.key]" :name="column.key" :column="column" :item="item" :index="visibleStartIndex + index">
63
- <div :class="columnClass(column, item)">&nbsp;</div>
64
- </slot>
65
- <slot v-else-if="$slots.default" name="default" :column="column" :item="item" :index="visibleStartIndex + index">
66
- <div :class="columnClass(column, item)">&nbsp;</div>
67
- </slot>
68
- <div v-else :class="columnClass(column, item)" v-html="formatColumn(item, column)"></div>
69
-
70
- </td>
71
- <td :class="$style.spacer"></td>
72
- </tr>
55
+ <tbody>
56
+ <tr @mouseover="hover(item, index)" @mouseout="hoverIndex = -1" v-for="(item, index) in visibleItems" :key="item"
57
+ @click="select(item, index)"
58
+ :class="trClass(item, index)">
59
+ <td v-for="(column, columnIndex) in freezeLeftColumns"
60
+ :class="tdClass(item, column)"
61
+ @click="$emit('item-click', item, column)">
62
+
63
+ <div v-if="columnIndex === 0 && item._type === 'totalRow'" :class="$style.total">Total</div>
64
+ <div v-else-if="item._type === 'totalRow' && !column.key.startsWith('_')"></div>
65
+
66
+ <slot v-else-if="$slots[column.key]" :name="column.key" :column="column" :item="item" :index="visibleStartIndex + index">
67
+ <div :class="columnClass(column, item)">&nbsp;</div>
68
+ </slot>
69
+ <slot v-else-if="$slots.default" name="default" :column="column" :item="item" :index="visibleStartIndex + index">
70
+ <div :class="columnClass(column, item)">&nbsp;</div>
71
+ </slot>
72
+ <div v-else :class="columnClass(column, item)" v-html="formatColumn(item, column)"></div>
73
+
74
+ </td>
75
+ <td :class="$style.spacer"></td>
76
+ </tr>
73
77
  </tbody>
74
78
  </table>
75
79
  </div>
76
80
  </div>
77
81
 
78
- <div ref="xcont" class="flex-1 overflow-x-auto overflow-y-hidden">
79
- <div v-if="state === 3" ref="spinner" class="flex-1 flex items-center justify-center p-8">
80
- <svg class="animate-spin aspect-square w-[32px] h-[32px] text-primary" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
81
- </div>
82
- <div ref="scroller" v-else-if="visibleColumns.length > 0" :class="$style.scroller" :style="scrollerStyle">
82
+ <div ref="xcont" class="flex-1 overflow-x-auto overflow-y-hidden" @scroll.passive="handleScrollX">
83
+ <div ref="scroller" v-if="visibleColumns.length > 0" :class="$style.scroller" :style="scrollerStyle">
83
84
  <div :class="$style.spacer" ref="spacer" :style="spacerStyle">
84
85
 
85
86
  <table :class="$style.table" class="flex-1 overflow-x-auto">
@@ -90,7 +91,7 @@
90
91
  </tr>
91
92
  </thead>
92
93
  <tbody ref="tbody">
93
- <tr v-for="(item, index) in visibleItems" :key="item"
94
+ <tr @mouseover="hover(item, index)" @mouseout="hoverIndex = -1" v-for="(item, index) in visibleItems" :key="item"
94
95
  @click="select(item, index)"
95
96
  :class="trClass(item, index)">
96
97
  <td v-for="(column, columnIndex) in unfreezedColumns"
@@ -113,7 +114,8 @@
113
114
  </tr>
114
115
  </tbody>
115
116
  </table>
116
- <div v-if="state === 2" ref="spinner" class="h-[44px] relative">
117
+
118
+ <div v-if="state === 2" class="h-[44px] relative">
117
119
  <div class="absolute top-0 left-0 w-screen h-[44px] flex items-center justify-center">
118
120
  <svg class="animate-spin aspect-square w-[16px] h-[16px] text-primary" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path></svg>
119
121
  </div>
@@ -127,24 +129,26 @@
127
129
  <h5 class="text-text-300">No data available</h5>
128
130
  </div>
129
131
  <slot name="end"></slot>
130
- <div :class="$style.calc" v-if="visibleColumns.length > 0 && cItems && cItems.length > 0" ref="calc">
131
- <table :class="$style.table">
132
- <tbody>
133
- <tr>
134
- <td v-for="column in cColumns" :style="thStyle(column)" :class="thClass(column)">
135
- <slot v-if="$slots[column.key]" :name="column.key" :column="column" :item="cItems[0]"></slot>
136
- <slot v-else-if="$slots.default" name="default" :column="column" :item="cItems[0]"></slot>
137
- <div v-else :class="columnClass(column)" v-html="formatColumn(cItems[0] ?? {}, column)"></div>
138
- </td>
139
- <td :class="$style.spacer"></td>
140
- </tr>
141
- </tbody>
142
- </table>
143
- </div>
144
132
  </div>
145
133
 
134
+ </div>
135
+
136
+ <div :class="$style.calc" v-if="visibleColumns.length > 0 && cItems && cItems.length > 0" ref="calc">
137
+ <table :class="$style.table">
138
+ <tbody>
139
+ <tr>
140
+ <td v-for="column in cColumns" :style="thStyle(column)" :class="thClass(column)">
141
+ <slot v-if="$slots[column.key]" :name="column.key" :column="column" :item="cItems[0]"></slot>
142
+ <slot v-else-if="$slots.default" name="default" :column="column" :item="cItems[0]"></slot>
143
+ <div v-else :class="columnClass(column)" v-html="formatColumn(cItems[0] ?? {}, column)"></div>
144
+ </td>
145
+ <td :class="$style.spacer"></td>
146
+ </tr>
147
+ </tbody>
148
+ </table>
146
149
  </div>
147
150
  </div>
151
+
148
152
  </div>
149
153
  </template>
150
154
 
@@ -208,9 +212,12 @@ export default{
208
212
  maxVisibleItems: 0,
209
213
  isOnEndScroll: false,
210
214
  selectedIndex: -1,
215
+ hoverIndex: -1,
211
216
  state: 1,
212
217
  scrolled: false,
213
- scrollerCache: {}
218
+ scrollerCache: {},
219
+ observer1: null,
220
+ observer2: null,
214
221
  }
215
222
  },
216
223
 
@@ -220,11 +227,6 @@ export default{
220
227
  return this.datasourceColumns ?? this.columns
221
228
  },
222
229
 
223
- xContStyle(){
224
- return {
225
- }
226
- },
227
-
228
230
  cItems(){
229
231
  return this.value?.items ?? this.items
230
232
  },
@@ -335,30 +337,23 @@ export default{
335
337
 
336
338
  mounted(){
337
339
 
338
- this.$refs.cont.addEventListener(
339
- "scroll",
340
- this.handleScroll,
341
- this.passiveScrollSupported() ? { passive: true } : false
342
- )
343
-
344
- this.$refs.xcont.addEventListener(
345
- "scroll",
346
- this.handleScrollX,
347
- this.passiveScrollSupported() ? { passive: true } : false
348
- )
349
-
350
- this.$refs.xcont.style.minHeight = `${this.$refs.cont.clientHeight}px`
351
-
352
- this.resize()
353
-
354
- const observer = new MutationObserver((mutationsList) => {
340
+ this.observer1 = new MutationObserver(_ => {
355
341
  this.resize()
356
342
  });
357
- observer.observe(this.$el, { attributes: true });
343
+ this.observer1.observe(this.$el, { attributes: true });
358
344
 
345
+ this.observer2 = new ResizeObserver(_ => {
346
+ this.resize()
347
+ });
348
+ this.observer2.observe(this.$refs.cont)
359
349
  },
360
350
 
361
- methods: {
351
+ unmounted() {
352
+ this.observer1.disconnect()
353
+ this.observer2.disconnect()
354
+ },
355
+
356
+ methods: {
362
357
 
363
358
  resetState(){
364
359
  this.state = 1
@@ -370,6 +365,7 @@ export default{
370
365
 
371
366
  return [
372
367
  this.selectedIndex === ((item && item.id) ? item.id : this.visibleStartIndex + index) ? this.$style.trSelected : '',
368
+ this.hoverIndex === ((item && item.id) ? item.id : this.visibleStartIndex + index) ? this.$style.trHover : '',
373
369
  highlight ? this.$style.highlight : ''
374
370
  ].join(' ')
375
371
  },
@@ -387,6 +383,10 @@ export default{
387
383
  }
388
384
  },
389
385
 
386
+ hover(item, index){
387
+ this.hoverIndex = (item && item.id) ? item.id : this.visibleStartIndex + index
388
+ },
389
+
390
390
  thStyle(column){
391
391
  const width = parseInt(column.width ?? this.defaultColumnWidth)
392
392
  return {
@@ -407,6 +407,10 @@ export default{
407
407
  async resize(){
408
408
 
409
409
  this.$nextTick(() => {
410
+ if(this.$refs.xcont){
411
+ this.$refs.xcont.style.minHeight = `${this.$refs.cont.clientHeight}px`
412
+ }
413
+
410
414
  if(this.$refs.calc){
411
415
  const elHeight = parseInt(window.getComputedStyle(this.$el).height !== '0px' ?
412
416
  window.getComputedStyle(this.$el).height :
@@ -752,6 +756,12 @@ export default{
752
756
  id: (this.items ?? [])[this.visibleStartIndex]?.id,
753
757
  index: this.visibleStartIndex
754
758
  }
759
+ },
760
+
761
+ state(to){
762
+ if(to === 1){
763
+ this.$nextTick(() => this.resize())
764
+ }
755
765
  }
756
766
 
757
767
  }
@@ -763,8 +773,8 @@ export default{
763
773
  <style module>
764
774
 
765
775
  .comp{
766
- @apply flex flex-col overflow-hidden bg-base-500;
767
- @apply border-[1px] border-text-50 rounded-sm;
776
+ @apply flex flex-col overflow-hidden bg-base-300;
777
+ @apply border-[1px] border-text-50 rounded-lg;
768
778
  }
769
779
 
770
780
  .comp>*:last-child{
@@ -807,25 +817,21 @@ export default{
807
817
  .table th{
808
818
  @apply relative text-left;
809
819
  }
810
- .table th:nth-child(odd){
811
- }
812
820
 
813
821
  .table tbody td{
814
822
  @apply border-b-[1px] border-text-50;
815
823
  }
816
- .table tbody td:nth-child(odd){
817
- }
818
824
 
819
- .table tbody tr:hover{
820
- @apply bg-primary-50;
825
+ .table tbody tr.trHover{
826
+ @apply bg-base-500;
821
827
  }
822
828
 
823
829
  .table tbody tr.trSelected{
824
- @apply bg-primary-100;
830
+ @apply bg-primary-50;
825
831
  }
826
832
 
827
833
  .highlight{
828
- @apply bg-primary-50 transition-all;
834
+ @apply bg-text-50 transition-all;
829
835
  }
830
836
 
831
837
  .tdDiv{
package/src/themes/default/index.js CHANGED
@@ -17,14 +17,14 @@ const plugin = Plugin(function({ addBase, addUtilities, config, theme }) {
17
17
  "--h-cp-lg": '3.6rem',
18
18
 
19
19
  '--base-50': '235, 237, 240',
20
- '--base-300': '235, 237, 240',
21
- '--base-400': '245, 247, 250',
22
- '--base-500': '255, 255, 255',
20
+ '--base-300': '255, 255, 255',
21
+ '--base-400': '248, 247, 248',
22
+ '--base-500': '248, 247, 248',
23
23
  '--base': '255, 255, 255',
24
24
 
25
- "--text-50": '224, 224, 224',
26
- "--text-100": '218, 218, 218',
27
- "--text-200": '197, 197, 197',
25
+ "--text-50": '238, 238, 238',
26
+ "--text-100": '223, 223, 223',
27
+ "--text-200": '217, 217, 217',
28
28
  "--text-300": '176, 176, 176',
29
29
  "--text-400": '116, 116, 116',
30
30
  "--text-500": '86, 86, 86',
@@ -69,14 +69,14 @@ const plugin = Plugin(function({ addBase, addUtilities, config, theme }) {
69
69
  'html[data-theme="dark"], .html[data-theme="dark"]': {
70
70
 
71
71
  "--base-50": '22, 26, 33',
72
- "--base-300": '0, 0, 0',
73
- "--base-400": '17, 21, 28',
74
- "--base-500": '22, 26, 33',
72
+ "--base-300": '17, 21, 28',
73
+ "--base-400": '0, 0, 0',
74
+ "--base-500": '0, 0, 0',
75
75
  "--base": '22, 26, 33',
76
76
 
77
77
  "--text-50": '33, 39, 46',
78
78
  "--text-100": '48, 54, 61',
79
- "--text-200": '63, 69, 76',
79
+ "--text-200": '58, 64, 71',
80
80
  "--text-300": '87, 87, 87',
81
81
  "--text-400": '191, 193, 197',
82
82
  "--text-500": '191, 193, 197',
@@ -109,7 +109,7 @@ const plugin = Plugin(function({ addBase, addUtilities, config, theme }) {
109
109
  'text-rendering': 'optimizeLegibility',
110
110
  'fontSize': '15px',
111
111
  'touchAction': "pan-x pan-y",
112
- 'backgroundColor': 'rgb(var(--base-300))'
112
+ 'backgroundColor': 'rgb(var(--base-500))',
113
113
  },
114
114
 
115
115
  '@media screen and (orientation: portrait)': {
@@ -125,8 +125,8 @@ const plugin = Plugin(function({ addBase, addUtilities, config, theme }) {
125
125
  },
126
126
 
127
127
  '::-webkit-scrollbar': {
128
- 'height': '5px',
129
- 'width': '5px',
128
+ 'height': '8px',
129
+ 'width': '8px',
130
130
  'background': 'transparent'
131
131
  },
132
132
 
package/src/widgets/PresetBar.vue CHANGED
@@ -19,7 +19,7 @@
19
19
  </div>
20
20
 
21
21
  <ListItem :items="config.presets"
22
- class="mt-1 rounded-lg overflow-hidden"
22
+ class="mt-1 rounded-lg overflow-hidden bg-base-300 border-text-50 border-[1px]"
23
23
  container-class="divide-y divide-text-50"
24
24
  @reorder="(from, to) => { config.presets.splice(to, 0, config.presets.splice(from, 1)[0]); apply() }">
25
25
  <template v-slot="{ item }">
@@ -267,7 +267,7 @@
267
267
  <ListItem v-if="Array.isArray(preset.sorts) && preset.sorts.length > 0"
268
268
  :items="preset.sorts"
269
269
  @reorder="(from, to) => { preset.sorts.splice(to, 0, preset.sorts.splice(from, 1)[0]); apply() }"
270
- container-class="flex flex-col rounded-lg border-[1px] border-text-50 bg-base-300 divide-y divide-text-50">
270
+ container-class="flex flex-col rounded-lg">
271
271
  <template v-slot="{ item, index }">
272
272
  <div class="flex flex-row items-center gap-3 p-1">
273
273
  <div data-reorder>
package/src/widgets/PresetBarPivot.vue CHANGED
@@ -19,7 +19,7 @@
19
19
  </div>
20
20
  <ListItem :items="pivot.rows"
21
21
  @reorder="(from, to) => { pivot.rows.splice(to, 0, pivot.rows.splice(from, 1)[0]); apply() }"
22
- class="mt-2 h-[25vh] overflow-y-auto border-[1px] border-text-200 bg-base-400 rounded-lg p-0.5"
22
+ class="mt-2 h-[25vh] overflow-y-auto border-[1px] border-text-200 bg-base-300 rounded-lg p-0.5"
23
23
  container-class="divide-y divide-text-50">
24
24
  <template v-slot="{ item, index }">
25
25
  <div class="flex flex-row items-center gap-3 p-2 bg-base-500 hover:bg-primary-100 first:rounded-t-md last:rounded-b-md">
@@ -58,7 +58,7 @@
58
58
  </div>
59
59
  <ListItem :items="pivot.values"
60
60
  @reorder="(from, to) => { pivot.values.splice(to, 0, pivot.values.splice(from, 1)[0]); }"
61
- class="mt-2 h-[25vh] overflow-y-auto border-[1px] border-text-200 bg-base-400 rounded-lg p-0.5"
61
+ class="mt-2 h-[25vh] overflow-y-auto border-[1px] border-text-200 bg-base-300 rounded-lg p-0.5"
62
62
  container-class="divide-y divide-text-50">
63
63
  <template v-slot="{ item, index }">
64
64
  <div class="flex flex-row items-center gap-3 p-2 bg-base-500 hover:bg-primary-100 first:rounded-t-md last:rounded-b-md">
@@ -102,7 +102,7 @@
102
102
  </div>
103
103
  <ListItem :items="pivot.columns"
104
104
  @reorder="(from, to) => { pivot.columns.splice(to, 0, pivot.columns.splice(from, 1)[0]); pivot.manualColumns = true; apply() }"
105
- class="mt-2 h-[25vh] overflow-y-auto border-[1px] border-text-200 bg-base-400 rounded-lg p-0.5"
105
+ class="mt-2 h-[25vh] overflow-y-auto border-[1px] border-text-200 bg-base-300 rounded-lg p-0.5"
106
106
  container-class="divide-y divide-text-50">
107
107
  <template v-slot="{ item, index }">
108
108
  <div class="flex flex-row gap-2 items-center px-2 bg-base-500">
package/src/widgets/WebPageBuilder.vue CHANGED
@@ -6,7 +6,7 @@
6
6
 
7
7
  <div class="flex-1 flex flex-col bg-base-400">
8
8
 
9
- <div class="p-3 pr-5 sticky top-0 flex justify-center gap-4 bg-base-400 dark:bg-base-300 border-b-[1px] border-text-50">
9
+ <div class="p-3 pr-5 sticky top-0 flex justify-center gap-4 bg-base-400 border-b-[1px] border-text-50">
10
10
  <div class="flex-1 flex flex-row gap-4 items-center">
11
11
 
12
12
  <button ref="close" class=" p-1"
@@ -81,7 +81,7 @@
81
81
 
82
82
  <div class="flex-1 flex flex-row">
83
83
 
84
- <div class="flex flex-row bg-base-400 dark:bg-base-300 border-r-[1px] border-text-50"
84
+ <div class="flex flex-row bg-base-400 border-r-[1px] border-text-50"
85
85
  :style="section1Style">
86
86
 
87
87
  <div class="flex-1 flex flex-col overflow-y-auto">
@@ -490,7 +490,7 @@
490
490
  </div>
491
491
  </div>
492
492
 
493
- <div v-if="currentItem" class="flex flex-col bg-base-400 dark:bg-base-300 border-l-[1px] border-text-50"
493
+ <div v-if="currentItem" class="flex flex-col bg-base-400 border-l-[1px] border-text-50"
494
494
  @click="currentArea = 'properties'"
495
495
  :style="section3Style">
496
496