@kikiloaw/simple-table 1.1.2 → 1.1.4
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
package/src/SimpleTable.vue
CHANGED
|
@@ -803,48 +803,52 @@ function getCellStyle(col: any, index: number, totalCols: number) {
|
|
|
803
803
|
<template>
|
|
804
804
|
<div class="space-y-4">
|
|
805
805
|
<!-- Toolbar -->
|
|
806
|
-
<div v-if="searchable" class="flex flex-
|
|
807
|
-
|
|
808
|
-
<!--
|
|
809
|
-
|
|
810
|
-
|
|
811
|
-
|
|
812
|
-
<div class="
|
|
813
|
-
<
|
|
814
|
-
|
|
815
|
-
|
|
816
|
-
|
|
817
|
-
|
|
818
|
-
|
|
819
|
-
v-for="pageSize in normalizedPageSizes"
|
|
820
|
-
:key="pageSize.value"
|
|
821
|
-
:value="pageSize.value"
|
|
806
|
+
<div v-if="searchable" class="flex flex-wrap items-center justify-between gap-4 w-full">
|
|
807
|
+
|
|
808
|
+
<!-- Left Group: Rows + Search -->
|
|
809
|
+
<div class="flex flex-wrap items-center gap-2 w-full sm:w-auto flex-1">
|
|
810
|
+
|
|
811
|
+
<!-- Rows per page -->
|
|
812
|
+
<div class="flex items-center gap-2 shrink-0">
|
|
813
|
+
<span class="text-sm text-gray-500 whitespace-nowrap">Rows</span>
|
|
814
|
+
<div class="relative h-10 w-[70px]">
|
|
815
|
+
<select
|
|
816
|
+
:value="currentPerPage"
|
|
817
|
+
@change="(e: any) => handlePageSizeChange(e.target.value)"
|
|
818
|
+
class="h-full w-full rounded-md border border-gray-300 bg-white px-3 py-2 text-sm ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 cursor-pointer"
|
|
822
819
|
>
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
|
|
829
|
-
|
|
830
|
-
|
|
831
|
-
|
|
832
|
-
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
|
|
820
|
+
<option
|
|
821
|
+
v-for="pageSize in normalizedPageSizes"
|
|
822
|
+
:key="pageSize.value"
|
|
823
|
+
:value="pageSize.value"
|
|
824
|
+
>
|
|
825
|
+
{{ pageSize.label }}
|
|
826
|
+
</option>
|
|
827
|
+
</select>
|
|
828
|
+
</div>
|
|
829
|
+
</div>
|
|
830
|
+
|
|
831
|
+
<!-- Search Input -->
|
|
832
|
+
<div class="relative flex-1 min-w-[200px]">
|
|
833
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="absolute left-2.5 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-500 pointer-events-none"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
|
|
834
|
+
<input
|
|
835
|
+
v-model="searchQuery"
|
|
836
|
+
type="text"
|
|
837
|
+
style="padding-left: 2.5rem !important"
|
|
838
|
+
placeholder="Search..."
|
|
839
|
+
class="flex h-10 w-full rounded-md border border-gray-300 bg-white !pr-3 !pl-10 py-2 text-sm ring-offset-white placeholder:text-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50"
|
|
840
|
+
/>
|
|
841
|
+
</div>
|
|
840
842
|
</div>
|
|
841
|
-
|
|
843
|
+
|
|
844
|
+
<!-- Actions Slot -->
|
|
845
|
+
<div class="flex items-center gap-2 shrink-0 ml-auto sm:ml-0">
|
|
842
846
|
<slot name="actions" :rows="tableData" :columns="columns" />
|
|
843
847
|
</div>
|
|
844
848
|
</div>
|
|
845
849
|
|
|
846
850
|
<!-- Table -->
|
|
847
|
-
<div class="border bg-
|
|
851
|
+
<div class="border bg-white relative">
|
|
848
852
|
<div class="overflow-x-auto">
|
|
849
853
|
<!-- We add min-w-full to Table to ensure it stretches -->
|
|
850
854
|
<Table class="min-w-full table-auto">
|
|
@@ -860,7 +864,7 @@ function getCellStyle(col: any, index: number, totalCols: number) {
|
|
|
860
864
|
>
|
|
861
865
|
<div
|
|
862
866
|
v-if="col.sortable"
|
|
863
|
-
class="flex items-center space-x-2 cursor-pointer select-none hover:text-
|
|
867
|
+
class="flex items-center space-x-2 cursor-pointer select-none hover:text-gray-900 w-full"
|
|
864
868
|
:class="getHeaderJustifyClass(col)"
|
|
865
869
|
@click="handleSort(col)"
|
|
866
870
|
>
|
|
@@ -876,7 +880,7 @@ function getCellStyle(col: any, index: number, totalCols: number) {
|
|
|
876
880
|
<TableRow>
|
|
877
881
|
<TableCell :colspan="columns.length" class="h-24 text-center">
|
|
878
882
|
<div class="flex items-center justify-center">
|
|
879
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-6 w-6 animate-spin text-
|
|
883
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-6 w-6 animate-spin text-gray-500"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>
|
|
880
884
|
</div>
|
|
881
885
|
</TableCell>
|
|
882
886
|
</TableRow>
|
|
@@ -938,20 +942,20 @@ function getCellStyle(col: any, index: number, totalCols: number) {
|
|
|
938
942
|
</div>
|
|
939
943
|
|
|
940
944
|
<!-- Loading Overlay -->
|
|
941
|
-
<div v-if="isLoading && tableData.length > 0" class="absolute inset-0 bg-
|
|
942
|
-
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-8 w-8 animate-spin text-
|
|
945
|
+
<div v-if="isLoading && tableData.length > 0" class="absolute inset-0 bg-white/50 flex items-center justify-center z-[60]">
|
|
946
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="h-8 w-8 animate-spin text-blue-600"><path d="M21 12a9 9 0 1 1-6.219-8.56"/></svg>
|
|
943
947
|
</div>
|
|
944
948
|
</div>
|
|
945
949
|
|
|
946
950
|
<!-- Pagination -->
|
|
947
951
|
<div class="flex items-center justify-between px-2">
|
|
948
|
-
<div class="text-sm text-
|
|
952
|
+
<div class="text-sm text-gray-500">
|
|
949
953
|
Showing {{ paginationMeta.from }} to {{ paginationMeta.to }} of {{ paginationMeta.total }} results
|
|
950
954
|
</div>
|
|
951
955
|
<div class="flex items-center space-x-1">
|
|
952
956
|
<!-- Previous Button -->
|
|
953
957
|
<button
|
|
954
|
-
class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-
|
|
958
|
+
class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-gray-300 bg-white hover:bg-gray-100 hover:text-gray-900 h-9 px-3"
|
|
955
959
|
:disabled="(isServerSide ? serverMeta?.current_page === 1 : currentPage === 1)"
|
|
956
960
|
@click="handlePageChange(isServerSide ? (serverMeta?.current_page || 1) - 1 : currentPage - 1)"
|
|
957
961
|
>
|
|
@@ -964,7 +968,7 @@ function getCellStyle(col: any, index: number, totalCols: number) {
|
|
|
964
968
|
<!-- Ellipsis -->
|
|
965
969
|
<span
|
|
966
970
|
v-if="page === '...'"
|
|
967
|
-
class="inline-flex items-center justify-center h-9 px-3 text-sm text-
|
|
971
|
+
class="inline-flex items-center justify-center h-9 px-3 text-sm text-gray-500"
|
|
968
972
|
>
|
|
969
973
|
...
|
|
970
974
|
</span>
|
|
@@ -972,11 +976,11 @@ function getCellStyle(col: any, index: number, totalCols: number) {
|
|
|
972
976
|
<!-- Page Number Button -->
|
|
973
977
|
<button
|
|
974
978
|
v-else
|
|
975
|
-
class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-
|
|
979
|
+
class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border h-9 min-w-[36px] px-3"
|
|
976
980
|
:class="[
|
|
977
981
|
(isServerSide ? serverMeta?.current_page === page : currentPage === page)
|
|
978
|
-
? 'bg-
|
|
979
|
-
: 'border-
|
|
982
|
+
? 'bg-blue-600 text-white border-blue-600 hover:bg-blue-700'
|
|
983
|
+
: 'border-gray-300 bg-white hover:bg-gray-100 hover:text-gray-900'
|
|
980
984
|
]"
|
|
981
985
|
@click="handlePageChange(page as number)"
|
|
982
986
|
>
|
|
@@ -986,7 +990,7 @@ function getCellStyle(col: any, index: number, totalCols: number) {
|
|
|
986
990
|
|
|
987
991
|
<!-- Next Button -->
|
|
988
992
|
<button
|
|
989
|
-
class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-
|
|
993
|
+
class="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-gray-300 bg-white hover:bg-gray-100 hover:text-gray-900 h-9 px-3"
|
|
990
994
|
:disabled="(isServerSide ? serverMeta?.current_page === serverMeta?.last_page : currentPage === totalPages)"
|
|
991
995
|
@click="handlePageChange(isServerSide ? (serverMeta?.current_page || 1) + 1 : currentPage + 1)"
|
|
992
996
|
>
|
|
@@ -21,7 +21,7 @@ const delegatedProps = computed(() => {
|
|
|
21
21
|
cn(
|
|
22
22
|
props.height || 'h-[38px]',
|
|
23
23
|
props.padding || 'px-2.5',
|
|
24
|
-
'border-b border-stone-300 align-middle font-bold text-
|
|
24
|
+
'border-b border-stone-300 align-middle font-bold text-gray-500 [&:has([role=checkbox])]:pr-0',
|
|
25
25
|
props.class,
|
|
26
26
|
)
|
|
27
27
|
"
|