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

Add a dark-mode theme #86

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion README.md
Original file line number Diff line number Diff line change
@@ -10,7 +10,7 @@

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).

![Inertia.js Table for Laravel Query Builder](https://user-images.githubusercontent.com/8403149/177773377-86c32d69-8f86-47e4-8063-ea227e480d10.mp4)
[![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)

## Support this package!

2 changes: 1 addition & 1 deletion app/resources/js/Layouts/Guest.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template>
<div class="min-h-screen flex flex-col items-center bg-gray-100">
<div class="w-full max-w-7xl mt-6 sm:px-6 py-4 bg-white shadow-md overflow-hidden sm:rounded-lg">
<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">
<slot />
</div>
</div>
4 changes: 2 additions & 2 deletions js/Components/ButtonWithDropdown.vue
Original file line number Diff line number Diff line change
@@ -6,7 +6,7 @@
type="button"
:dusk="dusk"
:disabled="disabled"
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"
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"
:class="{'border-green-300': active, 'border-gray-300': !active, 'cursor-not-allowed': disabled }"
aria-haspopup="true"
@click.prevent="toggle"
@@ -19,7 +19,7 @@
ref="tooltip"
class="absolute z-10"
>
<div class="mt-2 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5">
<div class="mt-2 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 dark:bg-gray-700">
<slot />
</div>
</div>
20 changes: 10 additions & 10 deletions js/Components/Pagination.vue
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<nav
v-if="hasPagination"
class="bg-white px-4 py-3 flex items-center justify-between border-t border-gray-200 sm:px-6"
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"
>
<p v-if="!hasData || pagination.total < 1">
{{ translations.no_results_found }}
@@ -88,7 +88,7 @@
:on-change="onPerPageChange"
/>

<p class="hidden lg:block text-sm text-gray-700 flex-grow">
<p class="hidden lg:block text-sm text-gray-700 flex-grow dark:text-gray-100">
<span class="font-medium">{{ pagination.from }}</span>
{{ translations.to }}
<span class="font-medium">{{ pagination.to }}</span>
@@ -105,12 +105,12 @@
<component
:is="previousPageUrl ? 'a' : 'div'"
:class="{
'cursor-not-allowed text-gray-400': !previousPageUrl,
'text-gray-500 hover:bg-gray-50': previousPageUrl
'cursor-not-allowed text-gray-400 dark:bg-gray-700 dark:text-gray-500': !previousPageUrl,
'text-gray-500 hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-400 dark:hover:bg-gray-600': previousPageUrl
}"
:href="previousPageUrl"
:dusk="previousPageUrl ? 'pagination-previous' : null"
class="relative inline-flex items-center px-2 py-2 rounded-l-md border border-gray-300 bg-white text-sm font-medium"
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"
@click.prevent="onClick(previousPageUrl)"
>
<span class="sr-only">{{ translations.previous }}</span>
@@ -140,11 +140,11 @@
"
:href="link.url"
:dusk="link.url ? `pagination-${link.label}` : null"
class="relative inline-flex items-center px-4 py-2 border border-gray-300 bg-white text-sm font-medium text-gray-700"
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"
:class="{
'cursor-not-allowed': !link.url,
'hover:bg-gray-50': link.url,
'bg-gray-100': link.active,
'bg-gray-100 dark:bg-blue-500 dark:hover:bg-blue-400': link.active,
}"
@click.prevent="onClick(link.url)"
>
@@ -156,12 +156,12 @@
<component
:is="nextPageUrl ? 'a' : 'div'"
:class="{
'cursor-not-allowed text-gray-400': !nextPageUrl,
'text-gray-500 hover:bg-gray-50': nextPageUrl
'cursor-not-allowed text-gray-400 dark:bg-gray-700 dark:text-gray-500': !nextPageUrl,
'text-gray-500 hover:bg-gray-50 dark:bg-gray-700 dark:text-gray-400 dark:hover:bg-gray-600': nextPageUrl
}"
:href="nextPageUrl"
:dusk="nextPageUrl ? 'pagination-next' : null"
class="relative inline-flex items-center px-2 py-2 rounded-r-md border border-gray-300 bg-white text-sm font-medium"
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"
@click.prevent="onClick(nextPageUrl)"
>
<span class="sr-only">{{ translations.next }}</span>
2 changes: 1 addition & 1 deletion js/Components/PerPageSelector.vue
Original file line number Diff line number Diff line change
@@ -3,7 +3,7 @@
name="per_page"
:dusk="dusk"
:value="value"
class="block focus:ring-indigo-500 focus:border-indigo-500 min-w-max shadow-sm text-sm border-gray-300 rounded-md"
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"
@change="onChange($event.target.value)"
>
<option
33 changes: 14 additions & 19 deletions js/Components/Table.vue
Original file line number Diff line number Diff line change
@@ -8,7 +8,7 @@
:class="{'opacity-75': isVisiting}"
>
<div class="flex flex-row flex-wrap sm:flex-nowrap justify-start px-4 sm:px-0">
<div class="order-2 sm:order-1 mr-2 sm:mr-4">
<div v-if="queryBuilderProps.hasFilters" class="order-2 sm:order-1 mr-2 sm:mr-4">
<slot
name="tableFilter"
:has-filters="queryBuilderProps.hasFilters"
@@ -46,19 +46,14 @@
</slot>
</div>


<slot
name="tableReset"
can-be-reset="canBeReset"
:on-click="resetQuery"
<div
v-if="canBeReset"
class="order-5 sm:order-3 sm:mr-4 ml-auto"
>
<div
v-if="canBeReset"
class="order-5 sm:order-3 sm:mr-4 ml-auto"
>
<slot name="tableReset" :on-click="resetQuery">
<TableReset :on-click="resetQuery" />
</div>
</slot>
</slot>
</div>

<slot
name="tableAddSearchRow"
@@ -115,15 +110,15 @@
>
<TableWrapper :class="{ 'mt-3': !hasOnlyData }">
<slot name="table">
<table class="min-w-full divide-y divide-gray-200 bg-white">
<table class="min-w-full divide-y divide-gray-200 bg-white dark:divide-gray-400">
<thead class="bg-gray-50">
<slot
name="head"
:show="show"
:sort-by="sortBy"
:header="header"
>
<tr class="font-medium text-xs uppercase text-left tracking-wider text-gray-500 py-3 px-6">
<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">
<HeaderCell
v-for="column in queryBuilderProps.columns"
:key="`table-${name}-header-${column.key}`"
@@ -133,7 +128,7 @@
</slot>
</thead>

<tbody class="bg-white divide-y divide-gray-200">
<tbody class="bg-white divide-y divide-gray-200 dark:bg-gray-600 dark:divide-gray-400">
<slot
name="body"
:show="show"
@@ -143,16 +138,16 @@
:key="`table-${name}-row-${key}`"
class=""
:class="{
'bg-gray-50': striped && key % 2,
'hover:bg-gray-100': striped,
'hover:bg-gray-50': !striped
'bg-gray-50 dark:bg-gray-500': striped && key % 2,
'hover:bg-gray-100 dark:hover:bg-gray-400': striped,
'hover:bg-gray-50 dark:hover:bg-gray-500': !striped
}"
>
<td
v-for="column in queryBuilderProps.columns"
v-show="show(column.key)"
:key="`table-${name}-row-${key}-column-${column.key}`"
class="text-sm py-4 px-6 text-gray-500 whitespace-nowrap"
class="text-sm py-4 px-6 text-gray-500 whitespace-nowrap dark:text-gray-100"
>
<slot
:name="`cell(${column.key})`"
2 changes: 1 addition & 1 deletion js/Components/TableAddSearchRow.vue
Original file line number Diff line number Diff line change
@@ -31,7 +31,7 @@
v-for="(searchInput, key) in searchInputs"
:key="key"
:dusk="`add-search-row-${searchInput.key}`"
class="text-left w-full px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
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"
role="menuitem"
@click.prevent="enableSearch(searchInput.key)"
>
6 changes: 3 additions & 3 deletions js/Components/TableColumns.vue
Original file line number Diff line number Diff line change
@@ -31,22 +31,22 @@
class="min-w-max"
>
<div class="px-2">
<ul class="divide-y divide-gray-200">
<ul class="divide-y divide-gray-200 dark:divide-gray-500">
<li
v-for="(column, key) in props.columns"
v-show="column.can_be_hidden"
:key="key"
class="py-2 flex items-center justify-between"
>
<p
class="text-sm text-gray-900"
class="text-sm text-gray-900 dark:text-gray-100"
>
{{ column.label }}
</p>

<button
type="button"
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"
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"
:class="{
'bg-green-500': !column.hidden,
'bg-gray-200': column.hidden,
5 changes: 3 additions & 2 deletions js/Components/TableFilter.vue
Original file line number Diff line number Diff line change
@@ -32,16 +32,17 @@
<div
v-for="(filter, key) in filters"
:key="key"
class="rounded-md dark:bg-gray-700"
>
<h3 class="text-xs uppercase tracking-wide bg-gray-100 p-3">
<h3 class="text-xs uppercase tracking-wide bg-gray-100 p-3 dark:text-gray-100 dark:bg-gray-700 dark:rounded-md">
{{ filter.label }}
</h3>
<div class="p-2">
<select
v-if="filter.type === 'select'"
:name="filter.key"
:value="filter.value"
class="block focus:ring-indigo-500 focus:border-indigo-500 w-full shadow-sm text-sm border-gray-300 rounded-md"
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"
@change="onFilterChange(filter.key, $event.target.value)"
>
<option
2 changes: 1 addition & 1 deletion js/Components/TableGlobalSearch.vue
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<template>
<div class="relative">
<input
class="block w-full pl-9 text-sm rounded-md shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300"
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"
:placeholder="label"
:value="value"
type="text"
2 changes: 1 addition & 1 deletion js/Components/TableReset.vue
Original file line number Diff line number Diff line change
@@ -3,7 +3,7 @@
ref="button"
type="button"
dusk="reset-table"
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"
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"
aria-haspopup="true"
@click.prevent="onClick"
>
4 changes: 2 additions & 2 deletions js/Components/TableSearchRows.vue
Original file line number Diff line number Diff line change
@@ -8,7 +8,7 @@
<div class="flex rounded-md shadow-sm relative mt-3">
<label
:for="searchInput.key"
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"
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"
>
<svg
xmlns="http://www.w3.org/2000/svg"
@@ -31,7 +31,7 @@
:name="searchInput.key"
:value="searchInput.value"
type="text"
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"
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"
@input="onChange(searchInput.key, $event.target.value)"
>
<div
2 changes: 1 addition & 1 deletion js/Components/TableWrapper.vue
Original file line number Diff line number Diff line change
@@ -2,7 +2,7 @@
<div class="flex flex-col">
<div class="-my-2 overflow-x-auto sm:-mx-6 lg:-mx-8">
<div class="py-2 align-middle inline-block min-w-full sm:px-6 lg:px-8">
<div class="shadow border-b border-gray-200 relative">
<div class="shadow border-b border-gray-200 relative dark:border-0 dark:shadow-none">
<slot />
</div>
</div>