Skip to content

Commit 36d87c9

Browse files
author
yaroslav8765
committed
chore: use Checkbox.vue into the ResourceListTables
1 parent 0849d53 commit 36d87c9

File tree

2 files changed

+30
-59
lines changed

2 files changed

+30
-59
lines changed

‎adminforth/spa/src/components/ResourceListTable.vue

Lines changed: 15 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -16,17 +16,13 @@
1616
<!-- table header -->
1717
<tr class="t-header sticky z-10 top-0 text-xs bg-lightListTableHeading dark:bg-darkListTableHeading dark:text-gray-400">
1818
<td scope="col" class="p-4">
19-
<div class="flex items-center justify-center relative">
20-
<input id="checkbox-all-search" type="checkbox" :checked="allFromThisPageChecked" @change="selectAll()"
21-
:disabled="!rows || !rows.length"
22-
class="peer appearance-none w-4 h-4 text-blue-600 bg-light-primary border border-gray-500 rounded-sm checked:bg-blue-500
23-
focus:ring-blue-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800
24-
focus:ring-2 dark:bg-dark-primary dark:border-gray-600 dark:checked:bg-blue-500 cursor-pointer">
25-
<label for="checkbox-all-search" class="sr-only">{{ $t('checkbox') }}</label>
26-
<div class="pointer-events-none absolute text-white text-[13px] leading-none peer-checked:block hidden">
27-
<IconCheckOutline width="18" height="18" />
28-
</div>
29-
</div>
19+
<Checkbox
20+
v-model="allFromThisPageChecked"
21+
:disabled="!rows || !rows.length"
22+
@update:modelValue="selectAll"
23+
>
24+
<span class="sr-only">{{ $t('checkbox') }}</span>
25+
</Checkbox>
3026
</td>
3127

3228
<td v-for="c in columnsListed" ref="headerRefs" scope="col" class="px-2 md:px-3 lg:px-6 py-3">
@@ -95,24 +91,13 @@
9591
:class="{'border-b': rowI !== rows.length - 1, 'cursor-pointer': row._clickUrl !== null}"
9692
>
9793
<td class="w-4 p-4 cursor-default" @click="(e)=>e.stopPropagation()">
98-
<div class="flex items-center justify-center relative">
99-
<input
100-
@click="(e)=>e.stopPropagation()"
101-
id="checkbox-table-search-1"
102-
type="checkbox"
103-
:checked="checkboxesInternal.includes(row._primaryKeyValue)"
104-
@change="(e)=>{addToCheckedValues(row._primaryKeyValue)}"
105-
class="peer appearance-none w-4 h-4 text-blue-600 bg-light-primary border border-gray-500 rounded-sm checked:bg-blue-500
106-
focus:ring-blue-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800
107-
focus:ring-2 dark:bg-dark-primary dark:border-gray-600 dark:checked:bg-blue-500 cursor-pointer"
108-
/>
109-
<label for="checkbox-table-search-1" class="sr-only">
110-
{{ $t('checkbox') }}
111-
</label>
112-
<div class="pointer-events-none absolute text-white text-[13px] leading-none peer-checked:block hidden">
113-
<IconCheckOutline width="18" height="18" />
114-
</div>
115-
</div>
94+
<Checkbox
95+
:model-value="checkboxesInternal.includes(row._primaryKeyValue)"
96+
@change="(e)=>{addToCheckedValues(row._primaryKeyValue)}"
97+
@click="(e)=>e.stopPropagation()"
98+
>
99+
<span class="sr-only">{{ $t('checkbox') }}</span>
100+
</Checkbox>
116101
</td>
117102

118103
<td v-for="c in columnsListed" class="px-2 md:px-3 lg:px-6 py-4">
@@ -320,12 +305,12 @@ import {
320305
IconEyeSolid,
321306
IconPenSolid,
322307
IconTrashBinSolid,
323-
IconCheckOutline
324308
} from '@iconify-prerendered/vue-flowbite';
325309
import router from '@/router';
326310
import { Tooltip } from '@/afcl';
327311
import type { AdminForthResourceCommon } from '@/types/Common';
328312
import adminforth from '@/adminforth';
313+
import Checkbox from '@/afcl/Checkbox.vue';
329314
330315
const coreStore = useCoreStore();
331316
const { t } = useI18n();

‎adminforth/spa/src/components/ResourceListTableVirtual.vue

Lines changed: 15 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -20,17 +20,13 @@
2020
<!-- table header -->
2121
<tr class="t-header sticky z-10 top-0 text-xs bg-lightListTableHeading dark:bg-darkListTableHeading dark:text-gray-400">
2222
<td scope="col" class="p-4">
23-
<div class="flex items-center justify-center relative">
24-
<input id="checkbox-all-search" type="checkbox" :checked="allFromThisPageChecked" @change="selectAll()"
25-
:disabled="!rows || !rows.length"
26-
class="peer appearance-none w-4 h-4 text-blue-600 bg-light-primary border border-gray-500 rounded-sm checked:bg-blue-500
27-
focus:ring-blue-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800
28-
focus:ring-2 dark:bg-dark-primary dark:border-gray-600 dark:checked:bg-blue-500 cursor-pointer">
29-
<label for="checkbox-all-search" class="sr-only">{{ $t('checkbox') }}</label>
30-
<div class="pointer-events-none absolute text-white text-[13px] leading-none peer-checked:block hidden">
31-
<IconCheckOutline width="18" height="18" />
32-
</div>
33-
</div>
23+
<Checkbox
24+
v-model="allFromThisPageChecked"
25+
:disabled="!rows || !rows.length"
26+
@update:modelValue="selectAll"
27+
>
28+
<span class="sr-only">{{ $t('checkbox') }}</span>
29+
</Checkbox>
3430
</td>
3531

3632
<td v-for="c in columnsListed" ref="headerRefs" scope="col" class="px-2 md:px-3 lg:px-6 py-3">
@@ -106,24 +102,13 @@
106102
@mounted="(el) => updateRowHeight(`row_${row._primaryKeyValue}`, el.offsetHeight)"
107103
>
108104
<td class="w-4 p-4 cursor-default" @click="(e)=>e.stopPropagation()">
109-
<div class="flex items-center justify-center relative">
110-
<input
111-
@click="(e)=>e.stopPropagation()"
112-
id="checkbox-table-search-1"
113-
type="checkbox"
114-
:checked="checkboxesInternal.includes(row._primaryKeyValue)"
115-
@change="(e)=>{addToCheckedValues(row._primaryKeyValue)}"
116-
class="peer appearance-none w-4 h-4 text-blue-600 bg-gray-50 border border-gray-500 rounded-sm checked:bg-blue-500
117-
focus:ring-blue-600 dark:focus:ring-blue-600 dark:ring-offset-gray-800 dark:focus:ring-offset-gray-800
118-
focus:ring-2 dark:bg-gray-700 dark:border-gray-600 dark:checked:bg-blue-500 cursor-pointer"
119-
/>
120-
<label for="checkbox-table-search-1" class="sr-only">
121-
{{ $t('checkbox') }}
122-
</label>
123-
<div class="pointer-events-none absolute text-white text-[13px] leading-none peer-checked:block hidden">
124-
<IconCheckOutline width="18" height="18" />
125-
</div>
126-
</div>
105+
<Checkbox
106+
:model-value="checkboxesInternal.includes(row._primaryKeyValue)"
107+
@change="(e)=>{addToCheckedValues(row._primaryKeyValue)}"
108+
@click="(e)=>e.stopPropagation()"
109+
>
110+
<span class="sr-only">{{ $t('checkbox') }}</span>
111+
</Checkbox>
127112
</td>
128113
<td v-for="c in columnsListed" class="px-2 md:px-3 lg:px-6 py-4">
129114
<!-- if c.name in listComponentsPerColumn, render it. If not, render ValueRenderer -->
@@ -342,6 +327,7 @@ import router from '@/router';
342327
import { Tooltip } from '@/afcl';
343328
import type { AdminForthResourceCommon } from '@/types/Common';
344329
import adminforth from '@/adminforth';
330+
import Checkbox from '@/afcl/Checkbox.vue';
345331
346332
const coreStore = useCoreStore();
347333
const { t } = useI18n();

0 commit comments

Comments
 (0)