Skip to content

Commit 02b5d0f

Browse files
zzhenryquezzzzhenryquezz
committed
refactor(desk): rename is-table > v-table
1 parent bf9b1d4 commit 02b5d0f

File tree

11 files changed

+217
-180
lines changed

11 files changed

+217
-180
lines changed

‎packages/desktop/components/is-collection-table.vue

Lines changed: 21 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -163,7 +163,7 @@ watch(props, load, { immediate: true, deep: true })
163163
</script>
164164

165165
<template>
166-
<is-card>
166+
<v-card>
167167
<is-collection-table-filters
168168
v-model="drawers.filters"
169169
:columns="columns"
@@ -202,18 +202,17 @@ watch(props, load, { immediate: true, deep: true })
202202
</div>
203203
</v-card-head>
204204

205-
<is-table
205+
<v-table
206206
v-if="!loading"
207207
:items="filteredItems"
208208
:columns="filteredColumns"
209209
class="collection-table"
210210
>
211211
<template #column="data">
212-
<tr :class="data.classes.tr" class="relative">
213-
<th
212+
<v-tr class="relative">
213+
<v-th
214214
v-for="column in data.columns"
215215
:key="column.name"
216-
:class="data.classes.th"
217216
:style="column.width ? `width: ${column.width}px` : ''"
218217
>
219218
<is-collection-column
@@ -227,20 +226,20 @@ watch(props, load, { immediate: true, deep: true })
227226
:min-width="100"
228227
@update:model-value="(value: number) => options[`column:${column.id}:width`] = value"
229228
/>
230-
</th>
229+
</v-th>
231230

232-
<th v-if="!columns.length" :class="data.classes.th">
231+
<v-th v-if="!columns.length">
233232
<div class="flex cursor-pointer" @click="onColumnNew">
234233
Add column
235234
<is-icon class="cursor-pointer ml-2" name="plus" @click="onColumnNew" />
236235
</div>
237-
</th>
238-
</tr>
236+
</v-th>
237+
</v-tr>
239238
</template>
240239

241-
<template #item="{ item, classes }">
242-
<tr :class="classes.tr" class="collection-table-item">
243-
<td v-for="(c, index) in filteredColumns" :key="c.id" :class="classes.td">
240+
<template #item="{ item }">
241+
<v-tr class="collection-table-item">
242+
<v-td v-for="(c, index) in filteredColumns" :key="c.id" no-padding>
244243
<is-menu v-if="index === 0" offset-y>
245244
<template #activator="{ on }">
246245
<v-btn
@@ -276,26 +275,25 @@ watch(props, load, { immediate: true, deep: true })
276275
:column="c"
277276
:item="item"
278277
/>
279-
</td>
280-
</tr>
278+
</v-td>
279+
</v-tr>
281280
</template>
282281

283-
<template #append-body="{ classes }">
284-
<tr :class="classes.tr">
285-
<td
286-
:class="[classes.td]"
282+
<template #append>
283+
<v-tr>
284+
<v-td
287285
:colspan="filteredColumns.length + 2"
288-
class="p-2 cursor-pointer hover:bg-b-secondary text-t-secondary text-sm border-r-0"
286+
class="cursor-pointer hover:bg-b-secondary text-t-secondary text-sm border-r-0"
289287
@click="onItemNew"
290288
>
291289
<fa-icon icon="plus" class="mr-2" />
292290

293291
<span>New</span>
294-
</td>
295-
</tr>
292+
</v-td>
293+
</v-tr>
296294
</template>
297-
</is-table>
298-
</is-card>
295+
</v-table>
296+
</v-card>
299297
</template>
300298

301299
<style lang="scss">

‎packages/desktop/components/is-table.vue

Lines changed: 0 additions & 128 deletions
This file was deleted.

‎packages/desktop/components/v-table.vue

Lines changed: 132 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,132 @@
1+
<script lang="ts" setup>
2+
import { computed, ref } from 'vue'
3+
4+
interface ColumnPadding {
5+
top?: number
6+
left?: number
7+
right?: number
8+
bottom?: number
9+
}
10+
11+
interface Column {
12+
name: string
13+
label?: string
14+
field?: string
15+
width?: number
16+
padding?: ColumnPadding
17+
}
18+
19+
// Props & Emits
20+
const props = defineProps({
21+
items: {
22+
type: Array as () => Record<string, string>[],
23+
default: () => [],
24+
},
25+
columns: {
26+
type: Array as () => Column[],
27+
default: () => [],
28+
},
29+
limit: {
30+
type: [Number, String],
31+
default: 80,
32+
},
33+
fixed: {
34+
type: Boolean,
35+
default: true,
36+
},
37+
})
38+
39+
// Pagination
40+
const pagination = ref({ limit: +props.limit })
41+
42+
// Parse columns
43+
const parsedColumns = computed(() =>
44+
props.columns.map((column) => {
45+
const style: any = {}
46+
47+
if (column.width) {
48+
style.width = `${column.width}px`
49+
}
50+
51+
if (column.padding?.left) {
52+
style['padding-left'] = `${column.padding?.left}px`
53+
}
54+
55+
if (column.padding?.right) {
56+
style['padding-right'] = `${column.padding?.right}px`
57+
}
58+
59+
return {
60+
...column,
61+
style,
62+
}
63+
})
64+
)
65+
66+
// Parse items
67+
68+
const visibleItems = computed(() => props.items.slice(0, pagination.value.limit))
69+
</script>
70+
<template>
71+
<table class="w-full border-lines" :class="[fixed ? 'table-fixed' : '']">
72+
<thead>
73+
<slot name="column" :columns="parsedColumns">
74+
<v-tr>
75+
<slot
76+
v-for="column in parsedColumns"
77+
:key="column.name"
78+
:name="`column-${column.name}`"
79+
:attrs="{ style: column.style }"
80+
>
81+
<v-th :style="column.style" class="text-t-secondary">
82+
{{ column.label }}
83+
</v-th>
84+
</slot>
85+
</v-tr>
86+
</slot>
87+
</thead>
88+
89+
<slot
90+
v-for="item in visibleItems"
91+
:key="item"
92+
name="item"
93+
:items="visibleItems"
94+
:columns="parsedColumns"
95+
:item="item"
96+
>
97+
<v-tr>
98+
<slot
99+
v-for="column in parsedColumns"
100+
:name="`item-${column.name}`"
101+
:item="item"
102+
:column="column"
103+
:attrs="{ style: column.style }"
104+
>
105+
<v-td :key="`${item.id}-${column.name}`" :style="column.style">
106+
{{ column.field ? item[column.field] : '' }}
107+
</v-td>
108+
</slot>
109+
</v-tr>
110+
</slot>
111+
112+
<v-tr v-if="!visibleItems.length">
113+
<v-td :colspan="columns.length + 2" class="text-t-secondary text-sm text-center">
114+
No items
115+
</v-td>
116+
</v-tr>
117+
118+
<v-tr v-if="items.length > pagination.limit">
119+
<v-td
120+
:colspan="columns.length + 2"
121+
class="cursor-pointer hover:bg-b-secondary text-t-secondary text-sm border-r-0"
122+
@click="pagination.limit = pagination.limit + Number(limit)"
123+
>
124+
<fa-icon icon="arrow-down" class="mr-2" />
125+
126+
<span>{{ `${$t('loadMore')} (${visibleItems.length}/${items.length})` }}</span>
127+
</v-td>
128+
</v-tr>
129+
130+
<slot name="append" />
131+
</table>
132+
</template>

‎packages/desktop/components/v-td.vue

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<script setup lang="ts">
2+
defineProps({
3+
noPadding: {
4+
type: Boolean,
5+
default: false,
6+
},
7+
})
8+
</script>
9+
<template>
10+
<td
11+
class="text-left border-r last:border-r-0 border-lines"
12+
:class="[noPadding ? 'p-0' : 'p-2']"
13+
>
14+
<slot></slot>
15+
</td>
16+
</template>

‎packages/desktop/components/v-th.vue

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<template>
2+
<th class="text-left p-2 border-r last:border-r-0 relative border-lines transition-all">
3+
<slot></slot>
4+
</th>
5+
</template>

‎packages/desktop/components/v-tr.vue

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<template>
2+
<tr class="border-b border-lines">
3+
<slot></slot>
4+
</tr>
5+
</template>

‎packages/desktop/i18n/en-US.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ export default {
4848
execute: 'Execute',
4949
output: 'Output',
5050
content: 'Content',
51+
loadMore: 'Load more',
5152
errors: {
5253
workspaceNotFound: '@:workspace not found: {0}',
5354
collectionNotFound: '@:collection not found: {1}',

0 commit comments

Comments
 (0)