Skip to content
This repository was archived by the owner on Jun 27, 2024. It is now read-only.

Commit 17e9f72

Browse files
heymerridewheymerridew
committed
Add a dark-mode theme
1 parent febd1a9 commit 17e9f72

15 files changed

+503
-474
lines changed

‎README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88

99
This package provides a *DataTables-like* experience for [Inertia.js](https://inertiajs.com/) with support for searching, filtering, sorting, toggling columns, and pagination. It generates URLs that can be consumed by Spatie's excellent [Laravel Query Builder](https://github.com/spatie/laravel-query-builder) package, with no additional logic needed. The components are styled with [Tailwind CSS 3.0](https://tailwindcss.com/), but it's fully customizable with slots. The data refresh logic is based on Inertia's [Ping CRM demo](https://github.com/inertiajs/pingcrm).
1010

11-
![Inertia.js Table for Laravel Query Builder](https://user-images.githubusercontent.com/8403149/177773377-86c32d69-8f86-47e4-8063-ea227e480d10.mp4)
11+
[![Inertia.js Table for Laravel Query Builder](https://protone.media/storage/introducing-inertiajs-tables-a-datatables-like-package-for-laravel-query-builder.jpg)](https://user-images.githubusercontent.com/8403149/177773377-86c32d69-8f86-47e4-8063-ea227e480d10.mp4)
1212

1313
## Support this package!
1414

‎app/package-lock.json

Lines changed: 461 additions & 428 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎app/resources/js/Layouts/Guest.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div class="min-h-screen flex flex-col items-center bg-gray-100">
3-
<div class="w-full max-w-7xl mt-6 sm:px-6 py-4 bg-white shadow-md overflow-hidden sm:rounded-lg">
3+
<div class="w-full max-w-7xl mt-6 sm:px-6 py-4 bg-white shadow-md overflow-hidden sm:rounded-lg dark:bg-gray-800">
44
<slot />
55
</div>
66
</div>

‎js/Components/ButtonWithDropdown.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
type="button"
77
:dusk="dusk"
88
:disabled="disabled"
9-
class="w-full bg-white border rounded-md shadow-sm px-4 py-2 inline-flex justify-center text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
9+
class="w-full bg-white border rounded-md shadow-sm px-4 py-2 inline-flex justify-center text-sm font-medium text-gray-700 hover:bg-gray-50 focus:ring-2 focus:ring-indigo-500 dark:bg-gray-700 dark:hover:bg-gray-600 dark:border-gray-500"
1010
:class="{'border-green-300': active, 'border-gray-300': !active, 'cursor-not-allowed': disabled }"
1111
aria-haspopup="true"
1212
@click.prevent="toggle"
@@ -19,7 +19,7 @@
1919
ref="tooltip"
2020
class="absolute z-10"
2121
>
22-
<div class="mt-2 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5">
22+
<div class="mt-2 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 dark:bg-gray-700">
2323
<slot />
2424
</div>
2525
</div>

‎js/Components/Pagination.vue

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<nav
33
v-if="hasPagination"
4-
class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6"
4+
class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6 dark:bg-gray-500 dark:border-gray-400 dark:text-gray-100"
55
>
66
<p v-if="!hasData || pagination.total < 1">
77
{{ translations.no_results_found }}
@@ -88,7 +88,7 @@
8888
:on-change="onPerPageChange"
8989
/>
9090

91-
<p class="hidden lg:block text-sm text-gray-700 flex-grow">
91+
<p class="hidden lg:block text-sm text-gray-700 flex-grow dark:text-gray-100">
9292
<span class="font-medium">{{ pagination.from }}</span>
9393
{{ translations.to }}
9494
<span class="font-medium">{{ pagination.to }}</span>
@@ -105,12 +105,12 @@
105105
<component
106106
:is="previousPageUrl ? 'a' : 'div'"
107107
:class="{
108-
'cursor-not-allowed text-gray-400': !previousPageUrl,
109-
'text-gray-500 hover:bg-gray-50': previousPageUrl
108+
'cursor-not-allowed text-gray-400 dark:bg-gray-700 dark:text-gray-500': !previousPageUrl,
109+
'text-gray-500 hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-400 dark:hover:bg-gray-600': previousPageUrl
110110
}"
111111
:href="previousPageUrl"
112112
:dusk="previousPageUrl ? 'pagination-previous' : null"
113-
class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium"
113+
class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium dark:border-gray-500"
114114
@click.prevent="onClick(previousPageUrl)"
115115
>
116116
<span class="sr-only">{{ translations.previous }}</span>
@@ -140,11 +140,11 @@
140140
"
141141
:href="link.url"
142142
:dusk="link.url ? `pagination-${link.label}` : null"
143-
class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700"
143+
class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700 dark:bg-gray-700 dark:text-gray-100 dark:border-gray-500 dark:hover:bg-gray-500"
144144
:class="{
145145
'cursor-not-allowed': !link.url,
146146
'hover:bg-gray-50': link.url,
147-
'bg-gray-100': link.active,
147+
'bg-gray-100 dark:bg-blue-500 dark:hover:bg-blue-400': link.active,
148148
}"
149149
@click.prevent="onClick(link.url)"
150150
>
@@ -156,12 +156,12 @@
156156
<component
157157
:is="nextPageUrl ? 'a' : 'div'"
158158
:class="{
159-
'cursor-not-allowed text-gray-400': !nextPageUrl,
160-
'text-gray-500 hover:bg-gray-50': nextPageUrl
159+
'cursor-not-allowed text-gray-400 dark:bg-gray-700 dark:text-gray-500': !nextPageUrl,
160+
'text-gray-500 hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-400 dark:hover:bg-gray-600': nextPageUrl
161161
}"
162162
:href="nextPageUrl"
163163
:dusk="nextPageUrl ? 'pagination-next' : null"
164-
class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium"
164+
class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium dark:border-gray-500"
165165
@click.prevent="onClick(nextPageUrl)"
166166
>
167167
<span class="sr-only">{{ translations.next }}</span>

‎js/Components/PerPageSelector.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
name="per_page"
44
:dusk="dusk"
55
:value="value"
6-
class="block focus:ring-indigo-500 focus:border-indigo-500 min-w-max shadow-sm text-sm border-gray-300 rounded-md"
6+
class="block focus:ring-indigo-500 focus:border-indigo-500 min-w-max shadow-sm text-sm border-gray-300 rounded-md dark:bg-gray-700 dark:text-gray-100 dark:border-gray-500"
77
@change="onChange($event.target.value)"
88
>
99
<option

‎js/Components/Table.vue

Lines changed: 13 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -46,19 +46,14 @@
4646
</slot>
4747
</div>
4848

49-
50-
<slot
51-
name="tableReset"
52-
can-be-reset="canBeReset"
53-
:on-click="resetQuery"
49+
<div
50+
v-if="canBeReset"
51+
class="order-5 sm:order-3 sm:mr-4 ml-auto"
5452
>
55-
<div
56-
v-if="canBeReset"
57-
class="order-5 sm:order-3 sm:mr-4 ml-auto"
58-
>
53+
<slot name="tableReset" :on-click="resetQuery">
5954
<TableReset :on-click="resetQuery" />
60-
</div>
61-
</slot>
55+
</slot>
56+
</div>
6257

6358
<slot
6459
name="tableAddSearchRow"
@@ -115,15 +110,15 @@
115110
>
116111
<TableWrapper :class="{ 'mt-3': !hasOnlyData }">
117112
<slot name="table">
118-
<table class="min-w-full divide-y divide-gray-200 bg-white">
113+
<table class="min-w-full divide-y divide-gray-200 bg-white dark:divide-gray-400">
119114
<thead class="bg-gray-50">
120115
<slot
121116
name="head"
122117
:show="show"
123118
:sort-by="sortBy"
124119
:header="header"
125120
>
126-
<tr class="font-medium text-xs uppercase text-left tracking-wider text-gray-500 py-3 px-6">
121+
<tr class="font-medium text-xs uppercase text-left tracking-wider text-gray-500 py-3 px-6 dark:bg-gray-500 dark:text-gray-100">
127122
<HeaderCell
128123
v-for="column in queryBuilderProps.columns"
129124
:key="`table-${name}-header-${column.key}`"
@@ -133,7 +128,7 @@
133128
</slot>
134129
</thead>
135130

136-
<tbody class="bg-white divide-y divide-gray-200">
131+
<tbody class="bg-white divide-y divide-gray-200 dark:bg-gray-600 dark:divide-gray-400">
137132
<slot
138133
name="body"
139134
:show="show"
@@ -143,16 +138,16 @@
143138
:key="`table-${name}-row-${key}`"
144139
class=""
145140
:class="{
146-
'bg-gray-50': striped && key % 2,
147-
'hover:bg-gray-100': striped,
148-
'hover:bg-gray-50': !striped
141+
'bg-gray-50 dark:bg-gray-500': striped && key % 2,
142+
'hover:bg-gray-100 dark:hover:bg-gray-400': striped,
143+
'hover:bg-gray-50 dark:hover:bg-gray-500': !striped
149144
}"
150145
>
151146
<td
152147
v-for="column in queryBuilderProps.columns"
153148
v-show="show(column.key)"
154149
:key="`table-${name}-row-${key}-column-${column.key}`"
155-
class="text-sm py-4 px-6 text-gray-500 whitespace-nowrap"
150+
class="text-sm py-4 px-6 text-gray-500 whitespace-nowrap dark:text-gray-100"
156151
>
157152
<slot
158153
:name="`cell(${column.key})`"

‎js/Components/TableAddSearchRow.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@
3131
v-for="(searchInput, key) in searchInputs"
3232
:key="key"
3333
:dusk="`add-search-row-${searchInput.key}`"
34-
class="text-left w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
34+
class="text-left w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:bg-gray-600 dark:hover:text-gray-100 rounded-md"
3535
role="menuitem"
3636
@click.prevent="enableSearch(searchInput.key)"
3737
>

‎js/Components/TableColumns.vue

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,22 +31,22 @@
3131
class="min-w-max"
3232
>
3333
<div class="px-2">
34-
<ul class="divide-y divide-gray-200">
34+
<ul class="divide-y divide-gray-200 dark:divide-gray-500">
3535
<li
3636
v-for="(column, key) in props.columns"
3737
v-show="column.can_be_hidden"
3838
:key="key"
3939
class="py-2 flex items-center justify-between"
4040
>
4141
<p
42-
class="text-sm text-gray-900"
42+
class="text-sm text-gray-900 dark:text-gray-100"
4343
>
4444
{{ column.label }}
4545
</p>
4646

4747
<button
4848
type="button"
49-
class="ml-4 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-light-blue-500"
49+
class="ml-4 relative inline-flex flex-shrink-0 h-6 w-11 border-2 border-transparent rounded-full cursor-pointer transition-colors ease-in-out duration-200 focus:outline-none focus:ring-2 focus:ring-light-blue-500"
5050
:class="{
5151
'bg-green-500': !column.hidden,
5252
'bg-gray-200': column.hidden,

‎js/Components/TableFilter.vue

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,16 +32,17 @@
3232
<div
3333
v-for="(filter, key) in filters"
3434
:key="key"
35+
class="rounded-md dark:bg-gray-700"
3536
>
36-
<h3 class="text-xs uppercase tracking-wide bg-gray-100 p-3">
37+
<h3 class="text-xs uppercase tracking-wide bg-gray-100 p-3 dark:text-gray-100 dark:bg-gray-700 dark:rounded-md">
3738
{{ filter.label }}
3839
</h3>
3940
<div class="p-2">
4041
<select
4142
v-if="filter.type === 'select'"
4243
:name="filter.key"
4344
:value="filter.value"
44-
class="block focus:ring-indigo-500 focus:border-indigo-500 w-full shadow-sm text-sm border-gray-300 rounded-md"
45+
class="block focus:ring-indigo-500 focus:border-indigo-500 w-full shadow-sm text-sm border-gray-300 rounded-md dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500"
4546
@change="onFilterChange(filter.key, $event.target.value)"
4647
>
4748
<option

‎js/Components/TableGlobalSearch.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div class="relative">
33
<input
4-
class="block w-full pl-9 text-sm rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300"
4+
class="block w-full pl-9 text-sm rounded-md shadow-sm focus:ring-indigo-500 focus:border-gray-500 border-gray-300 focus:ring-2 dark:bg-gray-700 dark:text-gray-100 dark:border-gray-500"
55
:placeholder="label"
66
:value="value"
77
type="text"

‎js/Components/TableReset.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
ref="button"
44
type="button"
55
dusk="reset-table"
6-
class="w-full bg-white border rounded-md shadow-sm px-4 py-2 inline-flex justify-center text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 border-gray-300"
6+
class="w-full bg-white border rounded-md shadow-sm px-4 py-2 inline-flex justify-center text-sm font-medium text-gray-700 hover:bg-gray-50 focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 border-gray-300 dark:bg-gray-700 dark:text-gray-100 dark:border-gray-500 dark:hover:bg-gray-600"
77
aria-haspopup="true"
88
@click.prevent="onClick"
99
>

‎js/Components/TableSearchRows.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<div class="flex rounded-md shadow-sm relative mt-3">
99
<label
1010
:for="searchInput.key"
11-
class="inline-flex items-center px-4 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 text-sm"
11+
class="inline-flex items-center px-4 rounded-l-md border border-r-0 border-gray-300 bg-gray-50 text-gray-500 text-sm dark:text-gray-100 dark:bg-gray-600 dark:border-gray-500"
1212
>
1313
<svg
1414
xmlns="http://www.w3.org/2000/svg"
@@ -31,7 +31,7 @@
3131
:name="searchInput.key"
3232
:value="searchInput.value"
3333
type="text"
34-
class="flex-1 min-w-0 block w-full px-3 py-2 rounded-none rounded-r-md focus:ring-indigo-500 focus:border-indigo-500 text-sm border-gray-300"
34+
class="flex-1 min-w-0 block w-full px-3 py-2 rounded-none rounded-r-md focus:ring-indigo-500 focus:border-gray-500 text-sm border-gray-300 focus:ring-2 dark:bg-gray-700 dark:border-gray-500 dark:text-gray-100"
3535
@input="onChange(searchInput.key, $event.target.value)"
3636
>
3737
<div

‎js/Components/TableWrapper.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<div class="flex flex-col">
33
<div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
44
<div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
5-
<div class="shadow border-b border-gray-200 relative">
5+
<div class="shadow border-b border-gray-200 relative dark:border-0 dark:shadow-none">
66
<slot />
77
</div>
88
</div>

‎package-lock.json

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)