@mixd-id/web-scaffold 0.1.230406045 → 0.1.230406047

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 (4) hide show
  1. package/package.json +1 -1
  2. package/src/components/ListView.vue +45 -31
  3. package/src/components/ListViewSettings.vue +14 -11
  4. package/src/components/VirtualScroll.vue +2 -2
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.230406045",
4
+ "version": "0.1.230406047",
5
5
  "scripts": {
6
6
  "dev": "vite serve",
7
7
  "build": "vite build",
package/src/components/ListView.vue CHANGED
@@ -2,12 +2,12 @@
2
2
  <div :class="$style.comp" v-if="configLoaded">
3
3
 
4
4
  <slot v-if="$slots.head" name="head"></slot>
5
- <div v-else class="flex flex-row items-center gap-4">
5
+ <div v-else class="flex flex-row items-center gap-4 px-6 md:px-0 p-4">
6
6
  <div class="flex-1 flex flex-row gap-4">
7
7
  <button type="button" ref="presetSelectorBtn"
8
- class="flex flex-row gap-1 items-center"
8
+ class="flex-1 md:flex-none flex flex-row gap-1 items-center text-left md:ml-2"
9
9
  @click="$refs.presetSelector.open($refs.presetSelectorBtn)">
10
- <h3 class="flex-1 overflow-hidden whitespace-nowrap text-ellipsis">{{ preset.name }}</h3>
10
+ <h3 class="overflow-hidden whitespace-nowrap text-ellipsis">{{ preset.name }}</h3>
11
11
  <svg width="16" height="16" class="fill-text-300 hover:fill-primary" 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>
12
12
  </button>
13
13
  <button type="button" @click="openPreset()">
@@ -18,36 +18,49 @@
18
18
  <div class="flex-1 flex flex-col w-[270px] cursor-pointer">
19
19
  <button type="button" v-for="(preset, idx) in config.presets"
20
20
  class="p-3 text-left hover:bg-primary hover:text-white"
21
- @click="config.presetIdx = idx">
21
+ @click="selectPreset(idx)">
22
22
  {{ preset.name }}
23
23
  </button>
24
24
  </div>
25
25
  </ContextMenu>
26
26
 
27
- <Modal ref="setting" width="680" height="560">
28
- <template #head>
29
- <div class="relative">
30
- <div class="absolute top-0 right-0 p-2">
31
- <button type="button" class="p-2" @click="$refs.setting.close()">
32
- <svg width="24" height="24" viewBox="0 0 24 24" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg">
33
- <path d="M6.53034 5.46965C6.23745 5.17676 5.76257 5.17676 5.46968 5.46965C5.17679 5.76255 5.17679 6.23742 5.46968 6.53031L10.9393 12L5.46967 17.4697C5.17678 17.7626 5.17678 18.2374 5.46967 18.5303C5.76256 18.8232 6.23744 18.8232 6.53033 18.5303L12 13.0606L17.4697 18.5303C17.7626 18.8232 18.2375 18.8232 18.5303 18.5303C18.8232 18.2374 18.8232 17.7626 18.5303 17.4697L13.0607 12L18.5303 6.53032C18.8232 6.23743 18.8232 5.76256 18.5303 5.46966C18.2374 5.17677 17.7626 5.17677 17.4697 5.46966L12 10.9393L6.53034 5.46965Z"/>
34
- </svg>
35
- </button>
27
+ <div class="absolute">
28
+ <Modal ref="setting" width="680" height="560" position="bottom">
29
+ <template #head>
30
+ <div class="relative">
31
+ <div class="absolute top-0 right-0 p-2 py-3">
32
+ <button type="button" class="p-2" @click="$refs.setting.close()">
33
+ <svg width="24" height="24" viewBox="0 0 24 24" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg">
34
+ <path d="M6.53034 5.46965C6.23745 5.17676 5.76257 5.17676 5.46968 5.46965C5.17679 5.76255 5.17679 6.23742 5.46968 6.53031L10.9393 12L5.46967 17.4697C5.17678 17.7626 5.17678 18.2374 5.46967 18.5303C5.76256 18.8232 6.23744 18.8232 6.53033 18.5303L12 13.0606L17.4697 18.5303C17.7626 18.8232 18.2375 18.8232 18.5303 18.5303C18.8232 18.2374 18.8232 17.7626 18.5303 17.4697L13.0607 12L18.5303 6.53032C18.8232 6.23743 18.8232 5.76256 18.5303 5.46966C18.2374 5.17677 17.7626 5.17677 17.4697 5.46966L12 10.9393L6.53034 5.46965Z"/>
35
+ </svg>
36
+ </button>
37
+ </div>
36
38
  </div>
37
- </div>
38
- </template>
39
- <template #foot>
40
- <div class="p-6 py-4 border-t-[1px] border-text-50">
41
- <Button class="w-[90px]" @click="applyPreset">Apply</Button>
42
- </div>
43
- </template>
44
- <ListViewSettings ref="listviewSettings" class="flex-1"
45
- :config="copiedConfig" />
46
- </Modal>
39
+ </template>
40
+ <template #foot>
41
+ <div class="p-6 py-4 border-t-[1px] border-text-50">
42
+ <Button class="w-full md:w-[90px]" @click="applyPreset">Apply</Button>
43
+ </div>
44
+ </template>
45
+ <ListViewSettings ref="listviewSettings" class="flex-1"
46
+ :config="copiedConfig" />
47
+ </Modal>
48
+ </div>
47
49
  </div>
48
50
 
49
51
  <slot name="headerOpt"></slot>
50
52
 
53
+ <Textbox :placeholder="$t('Search...')" :clearable="true" @clear="clearSearch" v-model="preset.search"
54
+ @keyup.enter="load" :class="$style.searchBox" v-if="mediaPrefix !== 'sm'">
55
+ <template #start>
56
+ <div class="pl-2">
57
+ <svg width="14" height="14" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M508.5 481.6l-129-129c-2.3-2.3-5.3-3.5-8.5-3.5h-10.3C395 312 416 262.5 416 208 416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c54.5 0 104-21 141.1-55.2V371c0 3.2 1.3 6.2 3.5 8.5l129 129c4.7 4.7 12.3 4.7 17 0l9.9-9.9c4.7-4.7 4.7-12.3 0-17zM208 384c-97.3 0-176-78.7-176-176S110.7 32 208 32s176 78.7 176 176-78.7 176-176 176z"/></svg>
58
+ </div>
59
+ </template>
60
+ </Textbox>
61
+ </div>
62
+
63
+ <div v-if="mediaPrefix === 'sm'" class="px-6 py-4">
51
64
  <Textbox :placeholder="$t('Search...')" :clearable="true" @clear="clearSearch" v-model="preset.search"
52
65
  @keyup.enter="load" :class="$style.searchBox">
53
66
  <template #start>
@@ -139,10 +152,8 @@
139
152
  <script>
140
153
 
141
154
  import throttle from "lodash/throttle";
142
- import VirtualTable from "./VirtualTable.vue";
143
155
 
144
156
  export default{
145
- components: {VirtualTable},
146
157
 
147
158
  emits: [ ],
148
159
 
@@ -223,7 +234,7 @@ export default{
223
234
  }
224
235
 
225
236
  this.mediaPrefix = prefix
226
- }, 1000, { leading:true }),
237
+ }, 100, { leading:true }),
227
238
 
228
239
  clearSearch(){
229
240
  this.preset.search = ''
@@ -347,6 +358,13 @@ export default{
347
358
  this.$refs.setting.open()
348
359
  },
349
360
 
361
+ selectPreset(idx){
362
+ if(this.config.presetIdx !== idx){
363
+ this.config.presetIdx = idx
364
+ this.load()
365
+ }
366
+ },
367
+
350
368
  applyPreset(){
351
369
  if(JSON.stringify(this.copiedConfig) !== JSON.stringify(this.config)){
352
370
  Object.assign(this.config, this.copiedConfig)
@@ -544,7 +562,7 @@ export default{
544
562
  <style module>
545
563
 
546
564
  .comp{
547
- @apply flex-1 flex flex-col gap-4;
565
+ @apply flex-1 flex flex-col divide-y md:divide-none divide-text-50;
548
566
  }
549
567
 
550
568
  .header{
@@ -558,10 +576,6 @@ export default{
558
576
  @apply border-primary;
559
577
  }
560
578
 
561
- .searchBox{
562
- @apply w-[300px] max-w-[30%];
563
- }
564
-
565
579
  .hoverable{
566
580
  @apply hover:bg-primary hover:text-white;
567
581
  }
package/src/components/ListViewSettings.vue CHANGED
@@ -3,19 +3,22 @@
3
3
  <div class="border-r-[1px] border-text-50 bg-base-400">
4
4
 
5
5
  <div class="p-6 flex flex-row">
6
- <h3 class="flex-1">Presets</h3>
7
- <button type="button" @click="addPreset">
6
+ <h3 class="md:flex-1">Presets</h3>
7
+ <button type="button" @click="addPreset" class="ml-4">
8
8
  <svg width="21" height="21" class="fill-text-300 hover:fill-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path d="M376 232H216V72c0-4.42-3.58-8-8-8h-32c-4.42 0-8 3.58-8 8v160H8c-4.42 0-8 3.58-8 8v32c0 4.42 3.58 8 8 8h160v160c0 4.42 3.58 8 8 8h32c4.42 0 8-3.58 8-8V280h160c4.42 0 8-3.58 8-8v-32c0-4.42-3.58-8-8-8z"/></svg>
9
9
  </button>
10
10
  </div>
11
11
 
12
12
  <div class="flex-1 overflow-y-auto">
13
13
  <div v-for="(preset, idx) in config.presets"
14
- class="p-2 flex flex-row gap-2 items-center hover:bg-primary-50 cursor-pointer"
14
+ class="p-2 py-4 md:py-2 flex flex-row gap-2 items-center hover:bg-primary-50 cursor-pointer"
15
15
  :class="config.presetIdx === idx ? 'bg-primary-100' : ''">
16
16
  <div @click="config.presetIdx = idx" class="flex-1 p-1 pl-4 overflow-x-hidden whitespace-nowrap text-ellipsis">
17
17
  <label>{{ preset.name }}</label>
18
18
  </div>
19
+ <button type="button" @click="detailMode = true" class="md:hidden">
20
+ <svg width="16" height="16" class="fill-text-300" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path d="M402.6 83.2l90.2 90.2c3.8 3.8 3.8 10 0 13.8L274.4 405.6l-92.8 10.3c-12.4 1.4-22.9-9.1-21.5-21.5l10.3-92.8L388.8 83.2c3.8-3.8 10-3.8 13.8 0zm162-22.9l-48.8-48.8c-15.2-15.2-39.9-15.2-55.2 0l-35.4 35.4c-3.8 3.8-3.8 10 0 13.8l90.2 90.2c3.8 3.8 10 3.8 13.8 0l35.4-35.4c15.2-15.3 15.2-40 0-55.2zM384 346.2V448H64V128h229.8c3.2 0 6.2-1.3 8.5-3.5l40-40c7.6-7.6 2.2-20.5-8.5-20.5H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V306.2c0-10.7-12.9-16-20.5-8.5l-40 40c-2.2 2.3-3.5 5.3-3.5 8.5z"/></svg>
21
+ </button>
19
22
  <button type="button" class="px-2" v-if="config.presets.length > 1" @click="removePreset(idx)">
20
23
  <svg width="16" height="16" viewBox="0 0 24 24" class="fill-text-300 hover:fill-red-500" xmlns="http://www.w3.org/2000/svg">
21
24
  <path fill-rule="evenodd" clip-rule="evenodd" d="M10 10.25C10.4142 10.25 10.75 10.5858 10.75 11V16C10.75 16.4142 10.4142 16.75 10 16.75C9.58579 16.75 9.25 16.4142 9.25 16V11C9.25 10.5858 9.58579 10.25 10 10.25Z"/>
@@ -31,7 +34,7 @@
31
34
  <div>
32
35
  <div class="p-6 pb-0">
33
36
  <div class="flex flex-row items-center gap-4 mb-3">
34
- <button type="button" class="hidden" @click="presetOpenIdx = -1">
37
+ <button type="button" class="md:hidden" @click="detailMode = false">
35
38
  <svg width="19" height="19" viewBox="0 0 24 24" class="fill-text-300 hover:fill-text-400" xmlns="http://www.w3.org/2000/svg">
36
39
  <path d="M10.5303 17.9697C10.8232 18.2626 10.8232 18.7374 10.5303 19.0303C10.2374 19.3232 9.76253 19.3232 9.46964 19.0303L3.67675 13.2374C2.99333 12.554 2.99333 11.446 3.67675 10.7626L9.46964 4.96967C9.76253 4.67678 10.2374 4.67678 10.5303 4.96967C10.8232 5.26256 10.8232 5.73744 10.5303 6.03033L5.31063 11.25H20C20.4142 11.25 20.75 11.5858 20.75 12C20.75 12.4142 20.4142 12.75 20 12.75H5.31063L10.5303 17.9697Z"/>
37
40
  </svg>
@@ -506,8 +509,8 @@ export default{
506
509
  styleComp(){
507
510
  return [
508
511
  this.$style.comp,
509
- this.$style['comp-' + this.viewMode],
510
- this.presetOpenIdx >= 0 ? this.$style['isOpen'] : ''
512
+ this.$style['comp-' + this.mediaPrefix],
513
+ this.detailMode ? this.$style['detailMode'] : ''
511
514
  ]
512
515
  .join(' ')
513
516
  },
@@ -592,13 +595,13 @@ export default{
592
595
  ],
593
596
  presetFilterSelector: null,
594
597
  presetSortSelector: null,
595
- viewMode: null,
596
- presetOpenIdx: -1,
598
+ mediaPrefix: null,
599
+ detailMode: false,
597
600
  }
598
601
  },
599
602
 
600
603
  mounted() {
601
- this.viewMode = this.$el.clientWidth <= 480 ? 'sm' : 'md'
604
+ this.mediaPrefix = this.$el.clientWidth <= 480 ? 'sm' : 'md'
602
605
  },
603
606
 
604
607
  watch: {
@@ -631,10 +634,10 @@ export default{
631
634
  .comp-sm>*:last-child{
632
635
  @apply hidden;
633
636
  }
634
- .comp-sm.isOpen>*:first-child{
637
+ .comp-sm.detailMode>*:first-child{
635
638
  @apply hidden;
636
639
  }
637
- .comp-sm.isOpen>*:last-child{
640
+ .comp-sm.detailMode>*:last-child{
638
641
  @apply block;
639
642
  }
640
643
 
package/src/components/VirtualScroll.vue CHANGED
@@ -2,7 +2,7 @@
2
2
  <div :class="$style.comp">
3
3
  <div ref="scroller" :class="$style.scroller" :style="scrollerStyle">
4
4
  <div v-if="visibleItems && visibleItems.length > 0" :class="$style.spacer" ref="spacer" :style="spacerStyle">
5
- <div v-for="(item, index) in visibleItems" :key="item" :data-id="item.id" class="bg-base-500"
5
+ <div v-for="(item, index) in visibleItems" :key="item" :data-id="item.id"
6
6
  @click="select(item, index)"
7
7
  :class="[ $style.item, selectedIndex === ((item && item.id) ? item.id : visibleStartIndex + index) ? $style.trSelected : '', item._highlight ? $style.highlight : '' ].join(' ')">
8
8
  <slot name="item" :item="item" :index="index"></slot>
@@ -61,7 +61,7 @@ export default{
61
61
  },
62
62
 
63
63
  visibleStartIndex(){
64
- return Math.round(this.scrollTop / this.itemHeight)
64
+ return Math.round((this.scrollTop < 0 ? 0 : this.scrollTop) / this.itemHeight)
65
65
  },
66
66
 
67
67
  visibleItems(){