Skip to content

Commit 5109e22

Browse files
webdevnerdstuffwebdevnerdstuff
authored
Merge pull request #41 from webdevnerdstuff/dev
Dev
2 parents 6abd564 + 379d47f commit 5109e22

File tree

6 files changed

+159
-12
lines changed

6 files changed

+159
-12
lines changed

‎src/documentation/sections/PlaygroundSection.vue‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,6 @@
1313
Developer Playground
1414
</h2>
1515

16-
1716
<p class="mb-4">
1817
In order to gain a comprehensive understanding of utilizing this component, we highly recommend utilizing the
1918
developer Playground. The Playground serves as a complete exemplification of how to effectively employ this

‎src/playground/configs/templates/ClientTable.vue‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@
4040
:page="tableSettings.page"
4141
:page-text="tableSettings.pageText"
4242
:prev-icon="tableSettings.prevIcon"
43+
:search="tableSettings.search"
4344
:search-debounce="tableSettings.searchDebounce"
4445
:search-max-wait="tableSettings.searchMaxWait"
4546
:select-strategy="tableSettings.selectStrategy"
@@ -69,14 +70,15 @@
6970
[top Slot]
7071
</template> -->
7172

72-
<!-- <template
73-
v-if="isServerSide"
74-
#[`top.left`]
75-
>
76-
<v-col cols="4">
73+
<!-- <template #[`top.left`]="{ props }">
74+
<v-col
75+
v-if="props.level === 1"
76+
cols="4"
77+
>
7778
<v-text-field
7879
v-model="tableSettings.search"
7980
class="mt-0 pt-0"
81+
clearable
8082
density="compact"
8183
hide-details
8284
label="Search"

‎src/playground/configs/templates/ServerTable.vue‎

Lines changed: 136 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@
4141
:page="tableSettings.page"
4242
:page-text="tableSettings.pageText"
4343
:prev-icon="tableSettings.prevIcon"
44+
:search="tableSettings.search"
4445
:search-debounce="tableSettings.searchDebounce"
4546
:search-max-wait="tableSettings.searchMaxWait"
4647
:select-strategy="tableSettings.selectStrategy"
@@ -59,6 +60,141 @@
5960
@update:drilldown="fetchServerData($event)"
6061
@update:options="updateOptions"
6162
>
63+
<!-- <template #loading>
64+
[loading Slot]
65+
</template> -->
66+
67+
<!-- <template #no-data>
68+
[no-data Slot]
69+
</template> -->
70+
71+
<!-- <template #top>
72+
[top Slot]
73+
</template> -->
74+
75+
<!-- <template #[`top.left`]="{ props }">
76+
<v-col
77+
v-if="props.level === 1"
78+
cols="4"
79+
>
80+
<v-text-field
81+
v-model="tableSettings.search"
82+
class="mt-0 pt-0"
83+
clearable
84+
density="compact"
85+
hide-details
86+
label="Search"
87+
single-line
88+
variant="outlined"
89+
></v-text-field>
90+
</v-col>
91+
</template> -->
92+
93+
<!-- <template #[`top.right`]="props">
94+
<v-col
95+
v-if="props.level === 1"
96+
class="d-flex align-center justify-end"
97+
>
98+
{{ props.search }}
99+
<v-btn
100+
class="ms-2"
101+
color="primary"
102+
@click="props.toggleSelectAll()"
103+
>Toggle Select</v-btn>
104+
<v-btn
105+
class="ms-2"
106+
color="primary"
107+
@click="props.selectAll(true)"
108+
>Select All</v-btn>
109+
<v-btn
110+
class="ms-2"
111+
color="primary"
112+
@click="props.selectAll(false)"
113+
>De-Select All</v-btn>
114+
</v-col>
115+
</template> -->
116+
117+
<!-- <template #[`header.data-table-select`]>
118+
<div class="d-flex justify-center">
119+
<v-icon>mdi mdi-vuetify</v-icon>
120+
</div>
121+
</template> -->
122+
123+
<!-- <template #[`header.sortIcon`]>
124+
<fa-icon icon="fa-solid fa-arrow-up"></fa-icon>
125+
</template> -->
126+
127+
<!-- <template #[`header.id`]="{ column }">
128+
[header cell Slot]: slot {{ column.title }}
129+
</template> -->
130+
131+
<!-- <template #thead="props">
132+
<thead>
133+
<tr>
134+
<td
135+
v-for="column in props.columns"
136+
:key="column"
137+
>
138+
{{ column.title }}
139+
</td>
140+
</tr>
141+
</thead>
142+
</template> -->
143+
144+
<!-- <template #body>
145+
[body Slot]
146+
</template> -->
147+
148+
<!-- <template #tbody="{ props }">
149+
<tbody>
150+
<tr>
151+
<td :colspan="Object.keys(tableSettings.headers.users).length">
152+
[tbody Slot] {{ props }}
153+
</td>
154+
</tr>
155+
</tbody>
156+
</template> -->
157+
158+
<!-- <template #[`item.id`]="{ item }">
159+
[item cell Slot]: {{ item.raw.id }}
160+
</template> -->
161+
162+
<!-- <template #[`item.data-table-select`]>
163+
<v-icon>mdi mdi-vuetify</v-icon>
164+
</template> -->
165+
166+
<!-- <template #[`item.data-table-expand`]>
167+
<fa-icon icon="fa-solid fa-chevron-down"></fa-icon>
168+
</template> -->
169+
170+
<!-- <template #tfoot="props">
171+
<tfoot>
172+
<tr>
173+
<td
174+
v-for="column in props.columns"
175+
:key="column"
176+
>
177+
{{ column.title }}
178+
</td>
179+
</tr>
180+
</tfoot>
181+
</template> -->
182+
183+
<!-- <template #[`tfoot.name`]>
184+
<td>
185+
[tfoot Slot]
186+
</td>
187+
</template> -->
188+
189+
<!-- <template #bottom>
190+
[bottom Slot]
191+
</template> -->
192+
193+
<!-- <template #[`footer.prepend`]>
194+
<div class="me-2">
195+
[footer.prepend Slot]
196+
</div>
197+
</template> -->
62198
</VDrilldownTable>
63199
</v-col>
64200
</template>

‎src/plugin/VDrilldownTable.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -595,9 +595,9 @@ function updatePage(val: Props['page']) {
595595
596596
// ------------ Search //
597597
watchDebounced(
598-
levelSearch,
598+
() => props.search,
599599
() => {
600-
loadedDrilldown.search = levelSearch.value;
600+
levelSearch.value = props.search || '';
601601
602602
const options = updatedOptions(loadedDrilldown);
603603
const drilldown = { ...props, ...options, ...{ search: levelSearch.value } };

‎src/plugin/slots/TopSlot.vue‎

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@
66
/>
77

88
<v-col
9-
v-else-if="showSearch || slots[`top.left`] || slots[`top.right`]"
9+
v-else-if="(showSearch || slots[`top.left`] || slots[`top.right`]) && showTopContent"
1010
lg="12"
1111
>
12-
<v-row>
12+
<v-row :data-id="`vdt-top-id-${props.level}`">
1313
<slot
1414
v-if="slots[`top.left`]"
1515
name="top.left"
@@ -59,7 +59,6 @@ const emit = defineEmits([
5959
'update:search',
6060
]);
6161
62-
6362
const props = withDefaults(defineProps<TopSlotProps>(), {
6463
searchProps: () => ({
6564
cols: {
@@ -76,6 +75,7 @@ const props = withDefaults(defineProps<TopSlotProps>(), {
7675
});
7776
7877
const levelSearch = ref<string>('');
78+
const showTopContent = ref<boolean>(true);
7979
8080
const tableItems = computed(() => {
8181
return props.items;
@@ -99,6 +99,16 @@ const boundProps = computed(() => {
9999
};
100100
});
101101
102+
// -------------------------------------------------- Slot content check //
103+
onMounted(() => {
104+
const slotContentCheck = document.querySelector(`[data-id="vdt-top-id-${props.level}"]`) as HTMLElement;
105+
106+
// ? If slot does not have content, hide the column to avoid unnecessary space //
107+
if (slotContentCheck?.children.length === 0) {
108+
showTopContent.value = false;
109+
}
110+
});
111+
102112
103113
// -------------------------------------------------- Callbacks //
104114
function selectAllCallback(val: boolean) {

‎src/stores/props.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -186,7 +186,7 @@ export const usePropsStore = defineStore('props', () => {
186186
},
187187
{
188188
default: false,
189-
desc: 'Determines if the table should show the <code class="inline-code">VTextField</code> in the <code class="inline-code">top</code> slot',
189+
desc: 'Determines if the table should show the <code class="inline-code">VDrilldownTable</code> built in <code class="inline-code">VTextField</code> in the <code class="inline-code">top</code> slot. Limited <code class="inline-code">VTextField</code> props are supported. If you would like more customization of the search field, we suggest using the available <code class="inline-code"><a href="#slots-supported-top">top</a></code> or <code class="inline-code"><a href="#slots-top-left">top.left</a></code> slots.',
190190
name: 'show-search',
191191
type: 'boolean',
192192
},

0 commit comments

Comments
 (0)