From f6e364447de28ed6f294135d5a4a0602a40dbc14 Mon Sep 17 00:00:00 2001 From: Joni Danino Date: Wed, 24 Aug 2022 13:17:56 +0200 Subject: [PATCH] Add a active-classes prop so the active element color can be configured Add a prop that enables the customisation of the active state of some elements like the filter & hide columns buttons + the sorting indicator. --- README.md | 14 ++++++++------ js/Components/ButtonWithDropdown.vue | 11 +++++++++-- js/Components/HeaderCell.vue | 9 +++++++-- js/Components/Table.vue | 15 ++++++++++++++- js/Components/TableColumns.vue | 4 +++- js/Components/TableFilter.vue | 7 +++++-- 6 files changed, 46 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index c946dd4..6c5a1ea 100644 --- a/README.md +++ b/README.md @@ -270,16 +270,18 @@ The `Table` has some additional properties to tweak its front-end behaviour. :prevent-overlapping-requests="false" :input-debounce-ms="1000" :prevent-scroll="true" + :active-classes="{text: 'text-red-500', border: 'border-red-300'}" /> ``` -| Property | Description | Default | -| --- | --- | --- | -| striped | Adds a *striped* layout to the table. | `false` | -| preventOverlappingRequests | Cancels a previous visit on new user input to prevent an inconsistent state. | `true` | -| inputDebounceMs | Number of ms to wait before refreshing the table on user input. | 350 | -| preventScroll | Configures the [Scroll preservation](https://inertiajs.com/scroll-management#scroll-preservation) behavior. You may also pass `table-top` to this property to scroll to the top of the table on new data. | false | +| Property | Description | Default | +|----------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------| +| striped | Adds a *striped* layout to the table. | `false` | +| preventOverlappingRequests | Cancels a previous visit on new user input to prevent an inconsistent state. | `true` | +| inputDebounceMs | Number of ms to wait before refreshing the table on user input. | 350 | +| preventScroll | Configures the [Scroll preservation](https://inertiajs.com/scroll-management#scroll-preservation) behavior. You may also pass `table-top` to this property to scroll to the top of the table on new data. | false | +| activeClasses | Configures the CSS classes to apply on active elements like filters & column buttons and sorting indicator | {text: 'text-green-400', border: 'border-green-300' } | #### Custom column cells diff --git a/js/Components/ButtonWithDropdown.vue b/js/Components/ButtonWithDropdown.vue index 46d84dc..5f0b27f 100644 --- a/js/Components/ButtonWithDropdown.vue +++ b/js/Components/ButtonWithDropdown.vue @@ -7,7 +7,11 @@ :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="{'border-green-300': active, 'border-gray-300': !active, 'cursor-not-allowed': disabled }" + :class="{ + [activeClasses.border]: props.active, + 'border-gray-300': !props.active, + 'cursor-not-allowed': props.disabled + }" aria-haspopup="true" @click.prevent="toggle" > @@ -32,7 +36,7 @@ import OnClickOutside from "./OnClickOutside.vue"; import { createPopper } from "@popperjs/core/lib/popper-lite"; import preventOverflow from "@popperjs/core/lib/modifiers/preventOverflow"; import flip from "@popperjs/core/lib/modifiers/flip"; -import { ref, watch, onMounted } from "vue"; +import { ref, watch, onMounted, inject, computed } from "vue"; const props = defineProps({ placement: { @@ -86,4 +90,7 @@ onMounted(() => { }); defineExpose({ hide }); + +const activeClasses = inject("activeClasses"); + diff --git a/js/Components/HeaderCell.vue b/js/Components/HeaderCell.vue index af4fd66..fc30a04 100644 --- a/js/Components/HeaderCell.vue +++ b/js/Components/HeaderCell.vue @@ -18,7 +18,7 @@ class="w-3 h-3 ml-2" :class="{ 'text-gray-400': !cell.sorted, - 'text-green-500': cell.sorted, + [activeClasses.text]: cell.sorted, }" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512" @@ -49,6 +49,9 @@ \ No newline at end of file + diff --git a/js/Components/Table.vue b/js/Components/Table.vue index 456dd65..b3a8d7e 100644 --- a/js/Components/Table.vue +++ b/js/Components/Table.vue @@ -199,7 +199,7 @@ import TableGlobalSearch from "./TableGlobalSearch.vue"; import TableSearchRows from "./TableSearchRows.vue"; import TableReset from "./TableReset.vue"; import TableWrapper from "./TableWrapper.vue"; -import { computed, onMounted, ref, watch, onUnmounted, getCurrentInstance, Transition } from "vue"; +import { computed, onMounted, ref, watch, onUnmounted, getCurrentInstance, Transition, provide } from "vue"; import qs from "qs"; import clone from "lodash-es/clone"; import filter from "lodash-es/filter"; @@ -271,8 +271,21 @@ const props = defineProps({ }, required: false, }, + + activeClasses:{ + type: Object, + required: false, + default() { + return { + text: "text-green-400", + border: "border-green-300" + }; + } + } }); +provide("activeClasses", props.activeClasses); + const app = getCurrentInstance(); const $inertia = app ? app.appContext.config.globalProperties.$inertia : props.inertia; diff --git a/js/Components/TableColumns.vue b/js/Components/TableColumns.vue index f762e1d..b766441 100644 --- a/js/Components/TableColumns.vue +++ b/js/Components/TableColumns.vue @@ -10,7 +10,7 @@ class="h-5 w-5" :class="{ 'text-gray-400': !hasHiddenColumns, - 'text-green-400': hasHiddenColumns, + [activeClasses.text]: hasHiddenColumns, }" viewBox="0 0 20 20" fill="currentColor" @@ -76,6 +76,7 @@ diff --git a/js/Components/TableFilter.vue b/js/Components/TableFilter.vue index 8d5c87c..d25df6f 100644 --- a/js/Components/TableFilter.vue +++ b/js/Components/TableFilter.vue @@ -10,7 +10,7 @@ class="h-5 w-5" :class="{ 'text-gray-400': !hasEnabledFilters, - 'text-green-400': hasEnabledFilters, + [activeClasses.text]: hasEnabledFilters, }" viewBox="0 0 20 20" fill="currentColor" @@ -60,6 +60,7 @@ +const activeClasses = inject("activeClasses"); + +