@mixd-id/web-scaffold 0.1.230406011 → 0.1.230406012
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.
package/package.json
CHANGED
|
@@ -3,11 +3,11 @@
|
|
|
3
3
|
|
|
4
4
|
<slot v-if="$slots['empty'] && (Array.isArray(items) || items.length <= 0)" name="empty" :preset="preset" />
|
|
5
5
|
|
|
6
|
-
<div v-else class="
|
|
6
|
+
<div v-else :class="$style.main">
|
|
7
7
|
|
|
8
|
-
<div class="
|
|
8
|
+
<div :class="$style.mainHead">
|
|
9
9
|
<slot v-if="$slots['lp-start']" name="lp-start" :preset="preset"/>
|
|
10
|
-
<div v-else
|
|
10
|
+
<div v-else>
|
|
11
11
|
<h2>{{ computedTitle }}</h2>
|
|
12
12
|
</div>
|
|
13
13
|
<div class="flex-1"></div>
|
|
@@ -27,7 +27,7 @@
|
|
|
27
27
|
<div class="hidden md:block">
|
|
28
28
|
<slot name="lp-tabspace" :preset="preset"/>
|
|
29
29
|
</div>
|
|
30
|
-
<div class="
|
|
30
|
+
<div :class="$style.optArea">
|
|
31
31
|
<Dropdown class="w-[150px]" :value="preset.name" mode="custom" position="bottom-right">
|
|
32
32
|
<div class="min-w-[240px] divide-y divide-text-50 p-2 flex flex-col gap-2">
|
|
33
33
|
<div v-for="(_preset, idx) in configs.presets" class="cursor-pointer flex flex-row hover:bg-primary-100 rounded-md">
|
|
@@ -61,7 +61,7 @@
|
|
|
61
61
|
</div>
|
|
62
62
|
|
|
63
63
|
<div class="flex-1 relative flex" v-if="!hideDetails">
|
|
64
|
-
<VirtualTable v-if="!hideDetails" ref="table1" class="
|
|
64
|
+
<VirtualTable v-if="!hideDetails" ref="table1" :class="$style.vtable" :columns="presetColumns" :items="items"
|
|
65
65
|
:appearances="presetAppearances" @scroll-end="loadNext" :pinned="pinned">
|
|
66
66
|
<template v-for="column in presetColumns" #[colOf(column.key)]="{}">
|
|
67
67
|
<div :class="getHeader(column)" @click="openColumnOptions(column.key, $event.target.closest('.' + $style.header))">
|
|
@@ -95,6 +95,12 @@
|
|
|
95
95
|
<slot :name="slot" :item="item" :index="index"></slot>
|
|
96
96
|
</template>
|
|
97
97
|
</VirtualTable>
|
|
98
|
+
<VirtualScroll v-if="!hideDetails" ref="scroll1" :class="$style.vscroll" :items="items"
|
|
99
|
+
@scroll-end="loadNext" :pinned="pinned">
|
|
100
|
+
<template #item="{ item }">
|
|
101
|
+
<slot name="mobileItem" :item="item"></slot>
|
|
102
|
+
</template>
|
|
103
|
+
</VirtualScroll>
|
|
98
104
|
<div v-if="isLoading" :class="$style.overlay">
|
|
99
105
|
<svg class="animate-spin aspect-square w-[48px] h-[48px] 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>
|
|
100
106
|
</div>
|
|
@@ -1331,9 +1337,55 @@ export default{
|
|
|
1331
1337
|
background: rgba(0, 0, 0, .3);
|
|
1332
1338
|
}
|
|
1333
1339
|
|
|
1340
|
+
.main{
|
|
1341
|
+
@apply flex-1 flex flex-col gap-6 p-6 relative;
|
|
1342
|
+
}
|
|
1343
|
+
|
|
1344
|
+
.mainHead{
|
|
1345
|
+
@apply flex flex-row gap-3 items-center;
|
|
1346
|
+
}
|
|
1347
|
+
|
|
1334
1348
|
.overlay{
|
|
1335
1349
|
@apply absolute top-0 right-0 bottom-0 left-0 flex items-center justify-center;
|
|
1336
1350
|
background-color: rgba(var(--base-500), .7);
|
|
1337
1351
|
}
|
|
1338
1352
|
|
|
1353
|
+
.vscroll{
|
|
1354
|
+
@apply hidden;
|
|
1355
|
+
}
|
|
1356
|
+
|
|
1357
|
+
.optArea{
|
|
1358
|
+
@apply flex flex-row gap-1 items-center;
|
|
1359
|
+
}
|
|
1360
|
+
|
|
1361
|
+
@media screen and (orientation: portrait){
|
|
1362
|
+
|
|
1363
|
+
.main{
|
|
1364
|
+
@apply gap-3 p-0;
|
|
1365
|
+
}
|
|
1366
|
+
|
|
1367
|
+
.mainHead{
|
|
1368
|
+
@apply px-6 py-4;
|
|
1369
|
+
}
|
|
1370
|
+
|
|
1371
|
+
.vtable{
|
|
1372
|
+
@apply hidden;
|
|
1373
|
+
}
|
|
1374
|
+
|
|
1375
|
+
.vscroll{
|
|
1376
|
+
@apply flex-1 flex border-t-[1px] border-b-[1px] border-text-50;
|
|
1377
|
+
}
|
|
1378
|
+
.vscroll>*{
|
|
1379
|
+
@apply divide-y divide-text-50;
|
|
1380
|
+
}
|
|
1381
|
+
.vscroll>*>*{
|
|
1382
|
+
@apply bg-base-500;
|
|
1383
|
+
}
|
|
1384
|
+
|
|
1385
|
+
.optArea{
|
|
1386
|
+
@apply hidden;
|
|
1387
|
+
}
|
|
1388
|
+
|
|
1389
|
+
}
|
|
1390
|
+
|
|
1339
1391
|
</style>
|