@mixd-id/web-scaffold 0.1.230406011 → 0.1.230406013
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">
|
|
@@ -60,8 +60,8 @@
|
|
|
60
60
|
</div>
|
|
61
61
|
</div>
|
|
62
62
|
|
|
63
|
-
<div class="
|
|
64
|
-
<VirtualTable v-if="!hideDetails" ref="table1"
|
|
63
|
+
<div :class="$style.contentArea" v-if="!hideDetails">
|
|
64
|
+
<VirtualTable v-if="!hideDetails" ref="table1" :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,9 +95,16 @@
|
|
|
95
95
|
<slot :name="slot" :item="item" :index="index"></slot>
|
|
96
96
|
</template>
|
|
97
97
|
</VirtualTable>
|
|
98
|
-
<
|
|
99
|
-
|
|
100
|
-
|
|
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>
|
|
104
|
+
</div>
|
|
105
|
+
|
|
106
|
+
<div v-if="isLoading" :class="$style.overlay">
|
|
107
|
+
<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>
|
|
101
108
|
</div>
|
|
102
109
|
|
|
103
110
|
<ContextMenu ref="columnMenu" :dismiss="false">
|
|
@@ -1331,9 +1338,62 @@ export default{
|
|
|
1331
1338
|
background: rgba(0, 0, 0, .3);
|
|
1332
1339
|
}
|
|
1333
1340
|
|
|
1341
|
+
.main{
|
|
1342
|
+
@apply flex-1 flex flex-col gap-6 p-6 relative;
|
|
1343
|
+
}
|
|
1344
|
+
|
|
1345
|
+
.mainHead{
|
|
1346
|
+
@apply flex flex-row gap-3 items-center;
|
|
1347
|
+
}
|
|
1348
|
+
|
|
1349
|
+
.contentArea{
|
|
1350
|
+
@apply flex-1 relative flex;
|
|
1351
|
+
}
|
|
1352
|
+
.contentArea>*:last-child{
|
|
1353
|
+
@apply hidden
|
|
1354
|
+
}
|
|
1355
|
+
|
|
1334
1356
|
.overlay{
|
|
1335
1357
|
@apply absolute top-0 right-0 bottom-0 left-0 flex items-center justify-center;
|
|
1336
1358
|
background-color: rgba(var(--base-500), .7);
|
|
1337
1359
|
}
|
|
1338
1360
|
|
|
1361
|
+
.vscroll{
|
|
1362
|
+
@apply hidden;
|
|
1363
|
+
}
|
|
1364
|
+
|
|
1365
|
+
.optArea{
|
|
1366
|
+
@apply flex flex-row gap-1 items-center;
|
|
1367
|
+
}
|
|
1368
|
+
|
|
1369
|
+
@media screen and (orientation: portrait){
|
|
1370
|
+
|
|
1371
|
+
.main{
|
|
1372
|
+
@apply gap-3 p-0;
|
|
1373
|
+
}
|
|
1374
|
+
|
|
1375
|
+
.mainHead{
|
|
1376
|
+
@apply px-6 py-4;
|
|
1377
|
+
}
|
|
1378
|
+
|
|
1379
|
+
.contentArea>*:first-child{
|
|
1380
|
+
@apply hidden
|
|
1381
|
+
}
|
|
1382
|
+
.contentArea>*:last-child{
|
|
1383
|
+
@apply flex
|
|
1384
|
+
}
|
|
1385
|
+
|
|
1386
|
+
.vscroll{
|
|
1387
|
+
@apply flex-1 flex border-t-[1px] border-b-[1px] border-text-50;
|
|
1388
|
+
}
|
|
1389
|
+
.vscroll>*>*{
|
|
1390
|
+
@apply bg-base-500 divide-y divide-text-50;
|
|
1391
|
+
}
|
|
1392
|
+
|
|
1393
|
+
.optArea{
|
|
1394
|
+
@apply hidden;
|
|
1395
|
+
}
|
|
1396
|
+
|
|
1397
|
+
}
|
|
1398
|
+
|
|
1339
1399
|
</style>
|