diff --git a/.gitignore b/.gitignore index 848cfaa9b..6043634f5 100644 --- a/.gitignore +++ b/.gitignore @@ -21,3 +21,7 @@ phpunit.xml.bak phpstan.txt coverage.xml ./tmp/** +./*.php.bk +src/Views/Filters/Traits/IsExternalArrayFilter.php.bk +.gitignore +src/Views/Filters/Traits/IsExternalFilter.php.bk diff --git a/CHANGELOG.md b/CHANGELOG.md index b30c7d9f6..dd31a5e55 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -204,7 +204,7 @@ All notable changes to `laravel-livewire-tables` will be documented in this file - In LaravelLivewireTablesEvent, change the type to Illuminate\Contracts\Auth\Authenticatable by @khwadj in https://github.com/rappasoft/laravel-livewire-tables/pull/1963 - Fix for Search Field Attribute Defaults by @lrljoe in https://github.com/rappasoft/laravel-livewire-tables/pull/1962 - Fix Filter Pills Icon - Tailwind by @lrljoe in https://github.com/rappasoft/laravel-livewire-tables/pull/1961 -- Add filterComponents into queryString to ensure they're maintained by @lrljoe in https://github.com/rappasoft/laravel-livewire-tables/pull/1957 +- Add appliedFilters into queryString to ensure they're maintained by @lrljoe in https://github.com/rappasoft/laravel-livewire-tables/pull/1957 - Reset Current Page on "Per Page" changing by @lrljoe in https://github.com/rappasoft/laravel-livewire-tables/pull/1953 ### New Features @@ -302,7 +302,7 @@ All notable changes to `laravel-livewire-tables` will be documented in this file ## [v3.4.8] - 2024-08-18 ### New Features -- Add an event dispatch for Filter Was Set when filterComponents is updated by @lrljoe in https://github.com/rappasoft/laravel-livewire-tables/pull/1861 +- Add an event dispatch for Filter Was Set when appliedFilters is updated by @lrljoe in https://github.com/rappasoft/laravel-livewire-tables/pull/1861 ## [v3.4.7] - 2024-08-18 ### Bug Fixes @@ -483,7 +483,7 @@ All notable changes to `laravel-livewire-tables` will be documented in this file - Fix collapsing columns not respecting view point collapse points by @lrljoe in https://github.com/rappasoft/laravel-livewire-tables/pull/1665 ### Tweaks -- Migrate "updated" Search and FilterComponents calls to WithSearch and WithFilters by @lrljoe in https://github.com/rappasoft/laravel-livewire-tables/pull/1666 +- Migrate "updated" Search and appliedFilters calls to WithSearch and WithFilters by @lrljoe in https://github.com/rappasoft/laravel-livewire-tables/pull/1666 - Allow nullable search/filter values by @lrljoe in https://github.com/rappasoft/laravel-livewire-tables/pull/1666 ## [v3.2.0] - 2024-01-04 @@ -697,7 +697,7 @@ All notable changes to `laravel-livewire-tables` will be documented in this file - DateFilter & DateTimeFilter fully support setFilterDefaultValue - MultiSelectFilter & MultiSelectDropdownFilter both support setFirstOption() - There are now two arrays relating to Filters: - - A wireable one ($filterComponents) + - A wireable one ($appliedFilters) - An unwired one - only keeps track of those filters that have a value ($appliedFilters). This is what is bound to the query string, and populates the filters on mount if they are present in the query string. - Livewire 3 Specific diff --git a/composer.json b/composer.json index bd58755ef..91f10cbda 100644 --- a/composer.json +++ b/composer.json @@ -27,7 +27,7 @@ "blade-ui-kit/blade-heroicons": "^2.1", "illuminate/contracts": "^10.0|^11.0|^12.0", "illuminate/support": "^10.0|^11.0|^12.0", - "livewire/livewire": "^3.0|dev-main" + "livewire/livewire": "*" }, "require-dev": { "ext-sqlite3": "*", diff --git a/docs/columns/available-methods.md b/docs/columns/available-methods.md index 18f840b5d..2efb8ec6a 100644 --- a/docs/columns/available-methods.md +++ b/docs/columns/available-methods.md @@ -303,6 +303,21 @@ Column::make('Name') ->setColumnLabelStatusEnabled() ``` +### Hiding On Reorder + +You may set a Column to be hidden when reordering, this is often effective when you have complex columns that are not relevant to reordering. + +As pagination is disabled during reordering, returning a minimal set of columns dramatically improves efficiency. + +By default, all Selected Columns are displayed when reordering. + +```php +Column::make('Name') + ->hideOnReorder() +``` + + + ## See Also [Column Styling](./styling) diff --git a/phpstan-baseline.neon b/phpstan-baseline.neon index d1ed59250..e69de29bb 100644 --- a/phpstan-baseline.neon +++ b/phpstan-baseline.neon @@ -1,97 +0,0 @@ -parameters: - ignoreErrors: - - - message: '#^Offset ''1'' on array\ in empty\(\) does not exist\.$#' - identifier: empty.offset - count: 1 - path: src/DataTableComponent.php - - - - message: '#^Offset ''99'' on array\ in isset\(\) does not exist\.$#' - identifier: isset.offset - count: 1 - path: src/DataTableComponent.php - - - - message: '#^Offset ''99'' on non\-empty\-array\<1\|string, list\> in isset\(\) does not exist\.$#' - identifier: isset.offset - count: 1 - path: src/DataTableComponent.php - - - - message: '#^Parameter \#1 \$view of function view expects view\-string\|null, string given\.$#' - identifier: argument.type - count: 1 - path: src/DataTableComponent.php - - - - message: '#^Property Rappasoft\\LaravelLivewireTables\\DataTableComponent\:\:\$model has no type specified\.$#' - identifier: missingType.property - count: 1 - path: src/DataTableComponent.php - - - - message: '#^Parameter \#1 \$view of function view expects view\-string\|null, string given\.$#' - identifier: argument.type - count: 1 - path: src/View/Components/FilterPill.php - - - - message: '#^Unsafe usage of new static\(\)\.$#' - identifier: new.static - count: 1 - path: src/Views/Action.php - - - - message: '#^Unsafe usage of new static\(\)\.$#' - identifier: new.static - count: 1 - path: src/Views/Column.php - - - - message: '#^Unsafe usage of new static\(\)\.$#' - identifier: new.static - count: 1 - path: src/Views/Filter.php - - - - message: '#^Parameter \#1 \$callback of method Illuminate\\Support\\Collection\\:\:filter\(\) expects \(callable\(string, int\)\: bool\)\|null, Closure\(mixed\)\: int\<0, max\> given\.$#' - identifier: argument.type - count: 1 - path: src/Views/Filters/MultiSelectDropdownFilter.php - - - - message: '#^Unable to resolve the template type TMapWithKeysKey in call to method Illuminate\\Support\\Collection\<\(int\|string\),mixed\>\:\:mapWithKeys\(\)$#' - identifier: argument.templateType - count: 1 - path: src/Views/Filters/MultiSelectDropdownFilter.php - - - - message: '#^Unable to resolve the template type TMapWithKeysValue in call to method Illuminate\\Support\\Collection\<\(int\|string\),mixed\>\:\:mapWithKeys\(\)$#' - identifier: argument.templateType - count: 1 - path: src/Views/Filters/MultiSelectDropdownFilter.php - - - - message: '#^Parameter \#1 \$callback of method Illuminate\\Support\\Collection\\:\:filter\(\) expects \(callable\(string, int\)\: bool\)\|null, Closure\(mixed\)\: int\<0, max\> given\.$#' - identifier: argument.type - count: 1 - path: src/Views/Filters/MultiSelectFilter.php - - - - message: '#^Parameter \#1 \$callback of method Illuminate\\Support\\Collection\\:\:filter\(\) expects \(callable\(string, int\)\: bool\)\|null, Closure\(mixed\)\: int\<0, max\> given\.$#' - identifier: argument.type - count: 1 - path: src/Views/Filters/NumberRangeFilter.php - - - - message: '#^Unable to resolve the template type TMapWithKeysKey in call to method Illuminate\\Support\\Collection\<\(int\|string\),mixed\>\:\:mapWithKeys\(\)$#' - identifier: argument.templateType - count: 1 - path: src/Views/Filters/SelectFilter.php - - - - message: '#^Unable to resolve the template type TMapWithKeysValue in call to method Illuminate\\Support\\Collection\<\(int\|string\),mixed\>\:\:mapWithKeys\(\)$#' - identifier: argument.templateType - count: 1 - path: src/Views/Filters/SelectFilter.php diff --git a/phpstan.neon b/phpstan.neon index 30182f587..96542d30b 100644 --- a/phpstan.neon +++ b/phpstan.neon @@ -13,31 +13,21 @@ parameters: treatPhpDocTypesAsCertain: false reportUnmatchedIgnoredErrors: false ignoreErrors: - - identifier: missingType.generics - - identifier: missingType.iterableValue - - identifier: trait.unused - - identifier: deadCode.unreachable - - identifier: booleanNot.alwaysTrue - paths: - - src/Views/Columns/Traits/HasDataTableComponent.php - - identifier: notIdentical.alwaysTrue - paths: - - src/Traits/Filters/Helpers/FilterPillsHelpers.php - - src/Traits/Helpers/CustomisationsHelpers.php - - src/Traits/Helpers/QueryHelpers.php - - src/Views/Columns/Traits/HasSlot.php - - src/Views/Columns/Traits/Helpers/ArrayColumnHelpers.php - - identifier: instanceof.alwaysTrue - paths: - - src/Views/Columns/Traits/HasFooter.php - - src/Views/Columns/Traits/HasSecondaryHeader.php + - identifier: argument.type + - identifier: argument.templateType + - identifier: new.static - identifier: function.alreadyNarrowedType paths: - - src/Views/Columns/Traits/Helpers/ArrayColumnHelpers.php - - src/Features/AutoInjectRappasoftAssets.php - - src/Traits/WithBulkActions.php - - src/Views/Actions/Traits/HasActionAttributes.php - src/Views/Filters/MultiSelectDropdownFilter.php - src/Views/Filters/Traits/HasOptions.php - - src/Views/Traits/Core/HasTheme.php - src/Views/Traits/Core/HasView.php + - identifier: missingType.generics + paths: + - src/Traits/WithData.php + - identifier: empty.offset + paths: + - src/Traits/Filters/Helpers/FilterMenuHelpers.php + - identifier: isset.offset + paths: + - src/Traits/Filters/Helpers/FilterMenuHelpers.php + - message: '# \$view of function view expects view-string\|null, string given.#' diff --git a/resources/css/laravel-livewire-tables.min.css b/resources/css/laravel-livewire-tables.min.css index 778bf1e21..545d86ff6 100644 --- a/resources/css/laravel-livewire-tables.min.css +++ b/resources/css/laravel-livewire-tables.min.css @@ -1 +1,428 @@ -.laravel-livewire-tables-highlight{border-style:solid!important;border-top-width:2px!important;border-bottom-width:2px!important;border-color:var(--rappasoft-table-highlight-color,rgb(255 255 255))!important}.laravel-livewire-tables-cursor{cursor:pointer}.laravel-livewire-tables-btn-tiny{width:.5em;height:.5em}.laravel-livewire-tables-btn-smaller{width:1em;height:1em}.laravel-livewire-tables-btn-small{width:1.2em;height:1.2em}.laravel-livewire-tables-btn-md{width:1.3em;height:1.3em}.laravel-livewire-tables-btn-lg{width:1.4em;height:1.4em}.laravel-livewire-tables-highlight-top{border-style:solid!important;border-top-width:2px!important;border-bottom-width:0!important;border-color:var(--rappasoft-table-top-highlight-color,var(--rappasoft-table-highlight-color,rgb(255 255 255)))!important}.laravel-livewire-tables-highlight-bottom{border-style:solid!important;border-top-width:0!important;border-bottom-width:2px!important;border-color:var(--rappasoft-table-bottom-highlight-color,var(--rappasoft-table-highlight-color,rgb(255 255 255)))!important}.laravel-livewire-tables-reorderingMinimised{width:0}.laravel-livewire-table-dragging{opacity:.5!important}.range-slider.grad{--progress-shadow:2px 2px 4px rgba(0, 0, 0, 0.2) inset;--progress-flll-shadow:var(--progress-shadow);--fill-color:linear-gradient(to right, LightCyan, var(--primary-color, #0366d6));--thumb-shadow:0 0 4px rgba(0, 0, 0, 0.3),-3px 9px 9px rgba(255, 241, 241, 0.33) inset,-1px 3px 2px rgba(255, 255, 255, 0.33) inset,0 0 0 99px var(--primary-color, #0366d6) inset}.range-slider.grad input:hover{--thumb-transform:scale(1.2)}.range-slider.grad input:active{--thumb-shadow:inherit;--thumb-transform:scale(1)}.range-slider.flat{--thumb-size:25px;--track-height:calc(var(--thumb-size) / 3);--progress-shadow:none;--progress-flll-shadow:none;--thumb-shadow:0 0 0 7px var(--primary-color, #0366d6) inset,0 0 0 99px white inset;--thumb-shadow-hover:0 0 0 9px var(--primary-color, #0366d6) inset,0 0 0 99px white inset;--thumb-shadow-active:0 0 0 13px var(--primary-color, #0366d6) inset}.range-slider{--value-offset-y:var(--ticks-gap);--value-background:transparent;--value-font:700 12px/1 Arial;--progress-radius:20px;--track-height:calc(var(--thumb-size) / 2);--min-max-opacity:1;--min-max-x-offset:10%;--thumb-size:22px;--thumb-shadow:0 0 3px rgba(0, 0, 0, 0.4),0 0 1px rgba(0, 0, 0, 0.5) inset,0 0 0 99px var(--thumb-color, white) inset;--thumb-shadow-active:0 0 0 calc(var(--thumb-size) / 4) inset var(--thumb-color, white),0 0 0 99px var(--primary-color, #0366d6) inset,0 0 3px rgba(0, 0, 0, 0.4);--thumb-shadow-hover:var(--thumb-shadow);--ticks-thickness:1px;--ticks-height:5px;--ticks-gap:var(--ticks-height, 0);--step:1;--ticks-count:Calc(var(--max) - var(--min))/var(--step);--maxTicksAllowed:30;--too-many-ticks:Min(1, Max(var(--ticks-count) - var(--maxTicksAllowed), 0));--x-step:Max(var(--step), var(--too-many-ticks) * (var(--max) - var(--min)));--tickInterval:100/((var(--max) - var(--min)) / var(--step)) * var(--tickEvery, 1);--tickIntervalPerc:calc((100% - var(--thumb-size)) / ((var(--max) - var(--min)) / var(--x-step)) * var(--tickEvery, 1));--value-a:Clamp(var(--min), var(--value, 0), var(--max));--value-b:var(--value, 0);--text-value-a:var(--text-value, "");--completed-a:calc((var(--value-a) - var(--min)) / (var(--max) - var(--min)) * 100);--completed-b:calc((var(--value-b) - var(--min)) / (var(--max) - var(--min)) * 100);--ca:Min(var(--completed-a), var(--completed-b));--cb:Max(var(--completed-a), var(--completed-b));--thumbs-too-close:Clamp(-1, 1000 * (Min(1, Max(var(--cb) - var(--ca) - 5, -1)) + 0.001), 1);--thumb-close-to-min:Min(1, Max(var(--ca) - 2, 0));--thumb-close-to-max:Min(1, Max(98 - var(--cb), 0));display:inline-block;height:max(var(--track-height),var(--thumb-size));background:linear-gradient(to right,var(--ticks-color,silver) var(--ticks-thickness),transparent 1px) repeat-x;background-size:var(--tickIntervalPerc) var(--ticks-height);background-position-x:calc(var(--thumb-size)/ 2 - var(--ticks-thickness)/ 2);background-position-y:var(--flip-y,bottom);padding-bottom:var(--flip-y,var(--ticks-gap));padding-top:calc(var(--flip-y) * var(--ticks-gap));position:relative;z-index:1}.range-slider::after,.range-slider::before{--offset:calc(var(--thumb-size) / 2);content:counter(x);display:var(--show-min-max,block);font:var(--min-max-font, 12px Arial);position:absolute;bottom:var(--flip-y,-2.5ch);top:calc(-2.5ch * var(--flip-y));opacity:clamp(0, var(--at-edge), var(--min-max-opacity));transform:translateX(calc(var(--min-max-x-offset) * var(--before,-1) * -1)) scale(var(--at-edge));pointer-events:none}.dark .range-slider::after,.dark .range-slider::before,.dark .range-slider>input+output::after,.dark .range-slider>input:first-of-type+output::after{color:#fff}.range-slider::before{--before:1;counter-reset:x var(--min);left:var(--offset)}.range-slider::after{counter-reset:x var(--max);right:var(--offset)}.range-slider__progress::after,.range-slider__progress::before{content:"";top:0;right:0;bottom:0;border-radius:inherit;left:0}.range-slider__values{position:relative;top:50%;line-height:0;text-align:justify;width:100%;pointer-events:none;margin:0 auto;z-index:5}.range-slider__values::after{content:"";width:100%;display:inline-block;height:0;background:red}.range-slider__progress{--start-end:calc(var(--thumb-size) / 2);--clip-end:calc(100% - (var(--cb)) * 1%);--clip-start:calc(var(--ca) * 1%);--clip:inset(-20px var(--clip-end) -20px var(--clip-start));position:absolute;left:var(--start-end);right:var(--start-end);top:calc(var(--ticks-gap) * var(--flip-y,0) + var(--thumb-size)/ 2 - var(--track-height)/ 2);height:calc(var(--track-height));background:var(--progress-background,#eee);pointer-events:none;z-index:-1;border-radius:var(--progress-radius)}.range-slider__progress::before{position:absolute;-webkit-clip-path:var(--clip);clip-path:var(--clip);background:var(--fill-color,#0366d6);box-shadow:var(--progress-flll-shadow);z-index:1}.range-slider__progress::after{position:absolute;box-shadow:var(--progress-shadow);pointer-events:none}.range-slider>input{-webkit-appearance:none;width:100%;height:var(--thumb-size);margin:0;position:absolute;left:0;top:calc(50% - Max(var(--track-height),var(--thumb-size))/ 2 + calc(var(--ticks-gap)/ 2 * var(--flip-y,-1)));cursor:-webkit-grab;cursor:grab;outline:0;background:0 0}.range-slider>input:not(:only-of-type){pointer-events:none}.range-slider>input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;height:var(--thumb-size);width:var(--thumb-size);transform:var(--thumb-transform);border-radius:var(--thumb-radius,50%);background:var(--thumb-color,#fff);box-shadow:var(--thumb-shadow);border:none;pointer-events:auto;-webkit-transition:.1s;transition:.1s}.range-slider>input::-moz-range-thumb{-moz-appearance:none;appearance:none;height:var(--thumb-size);width:var(--thumb-size);transform:var(--thumb-transform);border-radius:var(--thumb-radius,50%);background:var(--thumb-color,#fff);box-shadow:var(--thumb-shadow);border:none;pointer-events:auto;-moz-transition:.1s;transition:.1s}.range-slider>input::-ms-thumb{appearance:none;height:var(--thumb-size);width:var(--thumb-size);transform:var(--thumb-transform);border-radius:var(--thumb-radius,50%);background:var(--thumb-color,#fff);box-shadow:var(--thumb-shadow);border:none;pointer-events:auto;-ms-transition:.1s;transition:.1s}.range-slider>input:hover{--thumb-shadow:var(--thumb-shadow-hover)}.range-slider>input:hover+output{--value-background:var(--value-background-hover, #0366d6);--y-offset:-5px;color:var(--value-active-color,#fff);box-shadow:0 0 0 3px var(--value-background)}.range-slider>input:active{--thumb-shadow:var(--thumb-shadow-active);cursor:-webkit-grabbing;cursor:grabbing;z-index:2}.range-slider>input:active+output{transition:none}.range-slider>input:first-of-type{--is-left-most:Clamp(0, (var(--value-a) - var(--value-b)) * 99999, 1)}.range-slider>input:first-of-type+output{--value:var(--value-a);--x-offset:calc(var(--completed-a) * -1%)}.range-slider>input:first-of-type+output:not(:only-of-type){--flip:calc(var(--thumbs-too-close) * -1)}.range-slider>input:first-of-type+output::after{content:var(--prefix, "") var(--text-value-a) var(--suffix, "")}.range-slider>input:nth-of-type(2){--is-left-most:Clamp(0, (var(--value-b) - var(--value-a)) * 99999, 1)}.range-slider>input:nth-of-type(2)+output{--value:var(--value-b)}.range-slider>input:only-of-type~.range-slider__progress{--clip-start:0}.range-slider>input+output{--flip:-1;--x-offset:calc(var(--completed-b) * -1%);--pos:calc(((var(--value) - var(--min)) / (var(--max) - var(--min))) * 100%);pointer-events:none;position:absolute;z-index:5;background:var(--value-background);border-radius:10px;padding:2px 4px;left:var(--pos);transform:translate(var(--x-offset),calc(150% * var(--flip) - (var(--y-offset,0px) + var(--value-offset-y)) * var(--flip)));transition:.12s ease-out,left}.range-slider>input+output::after{content:var(--prefix, "") var(--text-value-b) var(--suffix, "");font:var(--value-font)}body>.range-slider,label[dir=rtl] .range-slider{width:clamp(300px,50vw,800px);min-width:200px}.superhide{display:none}.lds-hourglass{display:inline-block;position:relative;width:80px;height:80px}.lds-hourglass:after{content:" ";display:block;border-radius:50%;width:0;height:0;margin:8px;box-sizing:border-box;border:32px solid #000;border-color:#fff transparent;animation:1.2s infinite lds-hourglass}.dark .lds-hourglass:after{border:32px solid #fff;border-color:#000 transparent}@keyframes lds-hourglass{0%{transform:rotate(0);animation-timing-function:cubic-bezier(0.55,0.055,0.675,0.19)}50%{transform:rotate(900deg);animation-timing-function:cubic-bezier(0.215,0.61,0.355,1)}100%{transform:rotate(1800deg)}} \ No newline at end of file +.laravel-livewire-tables-highlight { + border-style: solid !important; + border-top-width: 2px !important; + border-bottom-width: 2px !important; + border-color: var(--rappasoft-table-highlight-color, rgb(255 255 255)) !important; +} + +.laravel-livewire-tables-cursor { + cursor:pointer; +} + +.laravel-livewire-tables-btn-tiny { + width:0.5em; + height:0.5em; +} + +.laravel-livewire-tables-btn-smaller { + width:1em; + height:1em; +} + +.laravel-livewire-tables-btn-small +{ + width:1.2em; + height:1.2em; +} + +.laravel-livewire-tables-btn-md +{ + width:1.3em; + height:1.3em; +} + +.laravel-livewire-tables-btn-lg +{ + width:1.4em; + height:1.4em; +} + +.laravel-livewire-tables-highlight-top { + border-style: solid !important; + border-top-width: 2px !important; + border-bottom-width: 0px !important; + border-color: var(--rappasoft-table-top-highlight-color, var(--rappasoft-table-highlight-color, rgb(255 255 255))) !important; +} + +.laravel-livewire-tables-highlight-bottom { + border-style: solid !important; + border-top-width: 0px !important; + border-bottom-width: 2px !important; + border-color: var(--rappasoft-table-bottom-highlight-color, var(--rappasoft-table-highlight-color, rgb(255 255 255))) !important; +} + +.laravel-livewire-tables-reorderingMinimised { + width: 0px; +} + + +.laravel-livewire-table-dragging { + opacity: 0.5 !important; +} + +.range-slider.grad { + --progress-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2) inset; + --progress-flll-shadow: var(--progress-shadow); + --fill-color: linear-gradient(to right, LightCyan, var(--primary-color, #0366d6)); + --thumb-shadow: 0 0 4px rgba(0, 0, 0, 0.3), + -3px 9px 9px rgba(255, 241, 241, 0.33) inset, + -1px 3px 2px rgba(255, 255, 255, 0.33) inset, + 0 0 0 99px var(--primary-color, #0366d6) inset; +} + +.range-slider.grad input:hover { + --thumb-transform: scale(1.2); +} + +.range-slider.grad input:active { + --thumb-shadow: inherit; + --thumb-transform: scale(1); +} + +.range-slider.flat { + --thumb-size: 25px; + --track-height: calc(var(--thumb-size) / 3); + --progress-shadow: none; + --progress-flll-shadow: none; + --thumb-shadow: 0 0 0 7px var(--primary-color, #0366d6) inset, 0 0 0 99px white inset; + --thumb-shadow-hover: 0 0 0 9px var(--primary-color, #0366d6) inset, + 0 0 0 99px white inset; + --thumb-shadow-active: 0 0 0 13px var(--primary-color, #0366d6) inset; +} + +.range-slider { + --value-offset-y: var(--ticks-gap); + --value-background: transparent; + --value-font: 700 12px/1 Arial; + --progress-radius: 20px; + --track-height: calc(var(--thumb-size) / 2); + --min-max-opacity: 1; + --min-max-x-offset: 10%; + --thumb-size: 22px; + --thumb-shadow: 0 0 3px rgba(0, 0, 0, 0.4), + 0 0 1px rgba(0, 0, 0, 0.5) inset, + 0 0 0 99px var(--thumb-color, white) inset; + --thumb-shadow-active: 0 0 0 calc(var(--thumb-size) / 4) inset var(--thumb-color, white), + 0 0 0 99px var(--primary-color, #0366d6) inset, + 0 0 3px rgba(0, 0, 0, 0.4); + --thumb-shadow-hover: var(--thumb-shadow); + --ticks-thickness: 1px; + --ticks-height: 5px; + --ticks-gap: var(--ticks-height, + 0); + --step: 1; + --ticks-count: Calc(var(--max) - var(--min)) / var(--step); + --maxTicksAllowed: 30; + --too-many-ticks: Min(1, Max(var(--ticks-count) - var(--maxTicksAllowed), 0)); + --x-step: Max(var(--step), + var(--too-many-ticks) * (var(--max) - var(--min))); + --tickInterval: 100/ ((var(--max) - var(--min)) / var(--step)) * var(--tickEvery, 1); + --tickIntervalPerc: calc((100% - var(--thumb-size)) / ((var(--max) - var(--min)) / var(--x-step)) * var(--tickEvery, 1)); + --value-a: Clamp(var(--min), + var(--value, 0), + var(--max)); + --value-b: var(--value, 0); + --text-value-a: var(--text-value, ""); + --completed-a: calc((var(--value-a) - var(--min)) / (var(--max) - var(--min)) * 100); + --completed-b: calc((var(--value-b) - var(--min)) / (var(--max) - var(--min)) * 100); + --ca: Min(var(--completed-a), + var(--completed-b)); + --cb: Max(var(--completed-a), var(--completed-b)); + --thumbs-too-close: Clamp(-1, 1000 * (Min(1, Max(var(--cb) - var(--ca) - 5, -1)) + 0.001), 1); + --thumb-close-to-min: Min(1, Max(var(--ca) - 2, + 0)); + --thumb-close-to-max: Min(1, Max(98 - var(--cb), 0)); + display: inline-block; + height: max(var(--track-height), var(--thumb-size)); + background: linear-gradient(to right, var(--ticks-color, silver) var(--ticks-thickness), transparent 1px) repeat-x; + background-size: var(--tickIntervalPerc) var(--ticks-height); + background-position-x: calc(var(--thumb-size) / 2 - var(--ticks-thickness) / 2); + background-position-y: var(--flip-y, bottom); + padding-bottom: var(--flip-y, var(--ticks-gap)); + padding-top: calc(var(--flip-y) * var(--ticks-gap)); + position: relative; + z-index: 1; +} + +.range-slider::before, +.range-slider::after { + --offset: calc(var(--thumb-size) / 2); + content: counter(x); + display: var(--show-min-max, block); + font: var(--min-max-font, 12px Arial); + position: absolute; + bottom: var(--flip-y, -2.5ch); + top: calc(-2.5ch * var(--flip-y)); + opacity: clamp(0, var(--at-edge), var(--min-max-opacity)); + transform: translateX(calc(var(--min-max-x-offset) * var(--before, -1) * -1)) scale(var(--at-edge)); + pointer-events: none; +} + +.dark .range-slider::before, +.dark .range-slider::after { + color: #FFF; +} + +.range-slider::before { + --before: 1; + counter-reset: x var(--min); + left: var(--offset); +} + +.range-slider::after { + counter-reset: x var(--max); + right: var(--offset); +} + +.range-slider__values { + position: relative; + top: 50%; + line-height: 0; + text-align: justify; + width: 100%; + pointer-events: none; + margin: 0 auto; + z-index: 5; +} + +.range-slider__values::after { + content: ""; + width: 100%; + display: inline-block; + height: 0; + background: red; +} + +.range-slider__progress { + --start-end: calc(var(--thumb-size) / 2); + --clip-end: calc(100% - (var(--cb)) * 1%); + --clip-start: calc(var(--ca) * 1%); + --clip: inset(-20px var(--clip-end) -20px var(--clip-start)); + position: absolute; + left: var(--start-end); + right: var(--start-end); + top: calc(var(--ticks-gap) * var(--flip-y, 0) + var(--thumb-size) / 2 - var(--track-height) / 2); + height: calc(var(--track-height)); + background: var(--progress-background, #eee); + pointer-events: none; + z-index: -1; + border-radius: var(--progress-radius); +} + +.range-slider__progress::before { + content: ""; + position: absolute; + left: 0; + right: 0; + -webkit-clip-path: var(--clip); + clip-path: var(--clip); + top: 0; + bottom: 0; + background: var(--fill-color, #0366d6); + box-shadow: var(--progress-flll-shadow); + z-index: 1; + border-radius: inherit; +} + +.range-slider__progress::after { + content: ""; + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + box-shadow: var(--progress-shadow); + pointer-events: none; + border-radius: inherit; +} + +.range-slider>input { + -webkit-appearance: none; + width: 100%; + height: var(--thumb-size); + margin: 0; + position: absolute; + left: 0; + top: calc(50% - Max(var(--track-height), var(--thumb-size)) / 2 + calc(var(--ticks-gap) / 2 * var(--flip-y, + -1))); + cursor: -webkit-grab; + cursor: grab; + outline: none; + background: none; +} + +.range-slider>input:not(:only-of-type) { + pointer-events: none; +} + +.range-slider>input::-webkit-slider-thumb { + -webkit-appearance: none; + appearance: none; + height: var(--thumb-size); + width: var(--thumb-size); + transform: var(--thumb-transform); + border-radius: var(--thumb-radius, 50%); + background: var(--thumb-color, white); + box-shadow: var(--thumb-shadow); + border: none; + pointer-events: auto; + -webkit-transition: 0.1s; + transition: 0.1s; +} + +.range-slider>input::-moz-range-thumb { + -moz-appearance: none; + appearance: none; + height: var(--thumb-size); + width: var(--thumb-size); + transform: var(--thumb-transform); + border-radius: var(--thumb-radius, 50%); + background: var(--thumb-color, white); + box-shadow: var(--thumb-shadow); + border: none; + pointer-events: auto; + -moz-transition: 0.1s; + transition: 0.1s; +} + +.range-slider>input::-ms-thumb { + appearance: none; + height: var(--thumb-size); + width: var(--thumb-size); + transform: var(--thumb-transform); + border-radius: var(--thumb-radius, 50%); + background: var(--thumb-color, white); + box-shadow: var(--thumb-shadow); + border: none; + pointer-events: auto; + -ms-transition: 0.1s; + transition: 0.1s; +} + +.range-slider>input:hover { + --thumb-shadow: var(--thumb-shadow-hover); +} + +.range-slider>input:hover+output { + --value-background: var(--value-background-hover, #0366d6); + --y-offset: -5px; + color: var(--value-active-color, #FFFFFF); + box-shadow: 0 0 0 3px var(--value-background); +} + +.range-slider>input:active { + --thumb-shadow: var(--thumb-shadow-active); + cursor: -webkit-grabbing; + cursor: grabbing; + z-index: 2; +} + +.range-slider>input:active+output { + transition: 0s; +} + +.range-slider>input:nth-of-type(1) { + --is-left-most: Clamp(0, (var(--value-a) - var(--value-b)) * 99999, 1); +} + +.range-slider>input:nth-of-type(1)+output { + --value: var(--value-a); + --x-offset: calc(var(--completed-a) * -1%); +} + +.range-slider>input:nth-of-type(1)+output:not(:only-of-type) { + --flip: calc(var(--thumbs-too-close) * -1); +} + +.range-slider>input:nth-of-type(1)+output::after { + content: var(--prefix, "") var(--text-value-a) var(--suffix, ""); +} + +.dark .range-slider>input:nth-of-type(1)+output::after { + color: #FFF; +} + +.range-slider>input:nth-of-type(2) { + --is-left-most: Clamp(0, (var(--value-b) - var(--value-a)) * 99999, 1); +} + +.range-slider>input:nth-of-type(2)+output { + --value: var(--value-b); +} + +.range-slider>input:only-of-type~.range-slider__progress { + --clip-start: 0; +} + +.range-slider>input+output { + --flip: -1; + --x-offset: calc(var(--completed-b) * -1%); + --pos: calc(((var(--value) - var(--min)) / (var(--max) - var(--min))) * 100%); + pointer-events: none; + position: absolute; + z-index: 5; + background: var(--value-background); + border-radius: 10px; + padding: 2px 4px; + left: var(--pos); + transform: translate(var(--x-offset), calc(150% * var(--flip) - (var(--y-offset, 0px) + var(--value-offset-y)) * var(--flip))); + transition: all 0.12s ease-out, left 0s; +} + +.range-slider>input+output::after { + content: var(--prefix, "") var(--text-value-b) var(--suffix, ""); + font: var(--value-font); +} + +.dark .range-slider>input+output::after { + color: #FFF; +} + + +body>.range-slider, +label[dir=rtl] .range-slider { + width: clamp(300px, 50vw, 800px); + min-width: 200px; +} + +.superhide { + display: none; +} + +.lds-hourglass { + display: inline-block; + position: relative; + width: 80px; + height: 80px; + } + .lds-hourglass:after { + content: " "; + display: block; + border-radius: 50%; + width: 0; + height: 0; + margin: 8px; + box-sizing: border-box; + border: 32px solid #000; + border-color: #fff transparent #fff transparent; + animation: lds-hourglass 1.2s infinite; + } + .dark .lds-hourglass:after { + border: 32px solid #FFF; + border-color: #000 transparent #000 transparent; + } + + + @keyframes lds-hourglass { + 0% { + transform: rotate(0); + animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19); + } + 50% { + transform: rotate(900deg); + animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); + } + 100% { + transform: rotate(1800deg); + } + } diff --git a/resources/js/laravel-livewire-tables.js b/resources/js/laravel-livewire-tables.js index 9641f02ee..4b909dee1 100644 --- a/resources/js/laravel-livewire-tables.js +++ b/resources/js/laravel-livewire-tables.js @@ -1,975 +1,24 @@ /*jshint esversion: 6 */ +import table from "./partials/core/table.min.js"; +import tableWrap from "./partials/core/tableWrap.min.js"; +import filterPills from "./partials/core/filterPills.min.js"; +import externalFilter from "./partials/core/externalFilter.min.js"; +import tools from "./partials/core/tools.min.js"; +import boolean from "./partials/filters/boolean.js"; +import fpf from "./partials/filters/fpf.js"; +import nrF from "./partials/filters/numberRange.js"; +import bulkactionsHelper from "./partials/core/bulkactionsHelper.min.js"; document.addEventListener('alpine:init', () => { - Alpine.data('laravellivewiretable', (wire) => ({ - tableId: '', - showBulkActionsAlpine: false, - primaryKeyName: '', - shouldBeDisplayed: wire.entangle('shouldBeDisplayed'), - tableName: wire.entangle('tableName'), - dataTableFingerprint: wire.entangle('dataTableFingerprint'), - listeners: [], - childElementOpen: false, - filtersOpen: wire.entangle('filterSlideDownDefaultVisible'), - paginationCurrentCount: wire.entangle('paginationCurrentCount'), - paginationTotalItemCount: wire.entangle('paginationTotalItemCount'), - paginationCurrentItems: wire.entangle('paginationCurrentItems'), - selectedItems: wire.entangle('selected'), - selectAllStatus: wire.entangle('selectAll'), - delaySelectAll: wire.entangle('delaySelectAll'), - hideBulkActionsWhenEmpty: wire.entangle('hideBulkActionsWhenEmpty'), - dragging: false, - reorderEnabled: false, - sourceID: '', - targetID: '', - evenRowClasses: '', - oddRowClasses: '', - currentlyHighlightedElement: '', - evenRowClassArray: {}, - oddRowClassArray: {}, - evenNotInOdd: {}, - oddNotInEven: {}, - orderedRows: [], - defaultReorderColumn: wire.entangle('defaultReorderColumn'), - reorderStatus: wire.entangle('reorderStatus'), - currentlyReorderingStatus: wire.entangle('currentlyReorderingStatus'), - hideReorderColumnUnlessReorderingStatus: wire.entangle('hideReorderColumnUnlessReorderingStatus'), - reorderDisplayColumn: wire.entangle('reorderDisplayColumn'), - externalFilterPillsVals: wire.entangle('externalFilterPillsValues'), - internalFilterPillsVals: wire.entangle('internalFilterPillsVals'), - showFilterPillLabel: [], - filterPillsSeparator: ', ', - showFilterPillsSection: true, - removeHTMLTags(htmlString) { - // Create a new DOMParser instance - const parser = new DOMParser(); - // Parse the HTML string - let doc = parser.parseFromString(htmlString, 'text/html'); - // Extract text content - let textContent = doc.body.innerText || ""; - // Trim whitespace - let trimmedContent = textContent.trim(); - - return trimmedContent; - }, - resetSpecificFilter(filterKey) - { - this.externalFilterPillsVals[filterKey] = []; - wire.call('resetFilter',filterKey); - }, - resetAllFilters() - { - this.externalFilterPillsVals = []; - wire.call('setFilterDefaults'); - }, - setInternalFilterPillVal(filterKey, filterValues) - { - - if(typeof(filterValues) !== 'undefined') - { - this.internalFilterPillsVals[filterKey] = filterValues; - } - }, - syncExternalFilterPillsValues(filterKey,filterValues) { - this.externalFilterPillsVals[filterKey] = filterValues; - this.showFilterPillLabel[filterKey] = this.getFilterPillsLength(filterKey); - }, - getFilterPillsLength(filterKey) - { - return Object.keys(this.externalFilterPillsVals[filterKey]).length ?? 0; - }, - showFilterPillsValue(filterKey, filterPillValue) - { - if(typeof(filterPillValue) !== "undefined") - { - this.externalFilterPillsVals[filterKey] = filterPillValue; - } - else - { - this.externalFilterPillsVals[filterKey] = null; - } - - }, - setFilterPillsLength(externalFilterPillsValues) - { - let filterValueLength = 0; - if (typeof(externalFilterPillsValues) !== 'undefined') - { - filterValueLength = Object.keys(externalFilterPillsValues).length ?? 0; - } - else - { - filterValueLength = 0; - } - return filterValueLength; - }, - showFilterPillsLabel(filterKey) - { - let pillsLength = this.getFilterPillsLength(filterKey); - return (this.getFilterPillsLength(filterKey) > 0); - }, - getFilterPillImplodedValues(filterKey, separator) - { - let filterPillValues = this.externalFilterPillsVals[filterKey]; - if(filterPillValues !== 'undefined') - { - let joinedValues = filterPillValues.join(separator); - - return joinedValues; - } - - return ''; - }, - showFilterPillsSeparator(filterKey,index) - { - return ((index+1) < (this.getFilterPillsLength(filterKey))); - }, - dragStart(event) { - this.$nextTick(() => { this.setupEvenOddClasses() }); - this.sourceID = event.target.id; - event.dataTransfer.effectAllowed = 'move'; - event.dataTransfer.setData('text/plain', event.target.id); - event.target.classList.add("laravel-livewire-tables-dragging"); - }, - dragOverEvent(event) { - if (typeof this.currentlyHighlightedElement == 'object') { - this.currentlyHighlightedElement.classList.remove('laravel-livewire-tables-highlight-bottom', 'laravel-livewire-tables-highlight-top'); - } - let target = event.target.closest('tr'); - this.currentlyHighlightedElement = target; - - if (event.offsetY < (target.getBoundingClientRect().height / 2)) { - target.classList.add('laravel-livewire-tables-highlight-top'); - target.classList.remove('laravel-livewire-tables-highlight-bottom'); - } - else { - target.classList.remove('laravel-livewire-tables-highlight-top'); - target.classList.add('laravel-livewire-tables-highlight-bottom'); - } - }, - dragLeaveEvent(event) { - event.target.closest('tr').classList.remove('laravel-livewire-tables-highlight-bottom', 'laravel-livewire-tables-highlight-top'); - }, - dropEvent(event) { - if (typeof this.currentlyHighlightedElement == 'object') { - this.currentlyHighlightedElement.classList.remove('laravel-livewire-tables-highlight-bottom', 'laravel-livewire-tables-highlight-top'); - } - - let target = event.target.closest('tr'); - let parent = event.target.closest('tr').parentNode; - let element = document.getElementById(this.sourceID).closest('tr'); - element.classList.remove("laravel-livewire-table-dragging"); - let originalPosition = element.rowIndex; - let newPosition = target.rowIndex; - let table = document.getElementById(this.tableId); - let loopStart = originalPosition; - if (event.offsetY > (target.getBoundingClientRect().height / 2)) { - parent.insertBefore(element, target.nextSibling); - } - else { - parent.insertBefore(element, target); - } - if (newPosition < originalPosition) { - loopStart = newPosition; - } - - /* - let evenList = parentNode.querySelectorAll("table[tableType='rappasoft-laravel-livewire-tables']>tbody>tr:nth-child(even of tr.rappasoft-striped-row) ").forEach(function (elem) { - elem.classList.remove(...this.oddNotInEven); - row.classList.add(...this.evenNotInOdd); - }); - */ - let nextLoop = 'even'; - for (let i = 1, row; row = table.rows[i]; i++) { - if (!row.classList.contains('hidden') && !row.classList.contains('md:hidden') ) { - if (nextLoop === 'even') { - row.classList.remove(...this.oddNotInEven); - row.classList.add(...this.evenNotInOdd); - nextLoop = 'odd'; - } - else { - row.classList.remove(...this.evenNotInOdd); - row.classList.add(...this.oddNotInEven); - nextLoop = 'even'; - } - } - } - }, - reorderToggle() { - if (this.currentlyReorderingStatus) { - wire.disableReordering(); - } - else { - if (this.hideReorderColumnUnlessReorderingStatus) { - this.reorderDisplayColumn = true; - } - this.setupEvenOddClasses(); - wire.enableReordering(); - } - this.$nextTick(() => { this.setupEvenOddClasses() }); - }, - cancelReorder() { - if (this.hideReorderColumnUnlessReorderingStatus) { - this.reorderDisplayColumn = false; - } - - wire.disableReordering(); - - }, - updateOrderedItems() { - let table = document.getElementById(this.tableId); - let orderedRows = []; - for (let i = 1, row; row = table.rows[i]; i++) { - orderedRows.push({ [this.primaryKeyName]: row.getAttribute('rowpk'), [this.defaultReorderColumn]: i }); - } - wire.storeReorder(orderedRows); - }, - setupEvenOddClasses() { - if (this.evenNotInOdd.length === undefined || this.evenNotInOdd.length == 0 || this.oddNotInEven.length === undefined || this.oddNotInEven.length == 0) - { - let tbody = document.getElementById(this.tableId).getElementsByTagName('tbody')[0]; - let evenRowClassArray = []; - let oddRowClassArray = []; - - if (tbody.rows[0] !== undefined && tbody.rows[1] !== undefined) { - evenRowClassArray = Array.from(tbody.rows[0].classList); - oddRowClassArray = Array.from(tbody.rows[1].classList); - this.evenNotInOdd = evenRowClassArray.filter(element => !oddRowClassArray.includes(element)); - this.oddNotInEven = oddRowClassArray.filter(element => !evenRowClassArray.includes(element)); - - evenRowClassArray = [] - oddRowClassArray = [] - } - } - }, - toggleSelectAll() { - if (!this.showBulkActionsAlpine) { - return; - } - - if (this.paginationTotalItemCount === this.selectedItems.length) { - this.clearSelected(); - this.selectAllStatus = false; - } else { - if (this.delaySelectAll) - { - this.setAllItemsSelected(); - } - else - { - this.setAllSelected(); - } - } - }, - setAllItemsSelected() { - if (!this.showBulkActionsAlpine) { - return; - } - this.selectAllStatus = true; - this.selectAllOnPage(); - }, - setAllSelected() { - if (!this.showBulkActionsAlpine) { - return; - } - if (this.delaySelectAll) - { - this.selectAllStatus = true; - this.selectAllOnPage(); - } - else - { - wire.setAllSelected(); - } - }, - clearSelected() { - if (!this.showBulkActionsAlpine) { - return; - } - this.selectAllStatus = false; - wire.clearSelected(); - }, - selectAllOnPage() { - if (!this.showBulkActionsAlpine) { - return; - } - - let tempSelectedItems = this.selectedItems; - const iterator = this.paginationCurrentItems.values(); - for (const value of iterator) { - tempSelectedItems.push(value.toString()); - } - this.selectedItems = [...new Set(tempSelectedItems)]; - }, - setTableId(tableId) - { - this.tableId = tableId; - }, - setAlpineBulkActions(showBulkActionsAlpine) - { - this.showBulkActionsAlpine = showBulkActionsAlpine; - }, - setPrimaryKeyName(primaryKeyName) - { - this.primaryKeyName = primaryKeyName; - }, - showTable(event) - { - let eventTableName = event.detail.tableName ?? ''; - let eventTableFingerprint = event.detail.tableFingerpint ?? ''; - - if (((eventTableName ?? '') != '' && eventTableName === this.tableName) || (eventTableFingerprint != '' && eventTableFingerpint === this.dataTableFingerprint)) { - this.shouldBeDisplayed = true; - } - }, - hideTable(event) - { - let eventTableName = event.detail.tableName ?? ''; - let eventTableFingerprint = event.detail.tableFingerpint ?? ''; - - if ((eventTableName != '' && eventTableName === this.tableName) || (eventTableFingerprint != '' && eventTableFingerpint === this.dataTableFingerprint)) { - this.shouldBeDisplayed = false; - } - }, - destroy() { - this.listeners.forEach((listener) => { - listener(); - }); - }, - })); - - Alpine.data('booleanFilter', (wire,filterKey,tableName,defaultValue) => ({ - localListeners: [], - switchOn: false, - value: wire.entangle('filterComponents.'+filterKey).live, - init() { - this.switchOn = false; - if (typeof this.value !== 'undefined') { - this.switchOn = Boolean(Number(this.value)); - } - this.localListeners.push( - Livewire.on('filter-was-set', (detail) => { - if(detail.tableName == this.tableName && detail.filterKey == filterKey) { - this.switchOn = detail.value ?? defaultValue; - } - }) - ); - }, - destroy() { - this.localListeners.forEach((listener) => { - listener(); - }); - }, - })); - - Alpine.data('newBooleanFilter', (filterKey,tableName,defaultValue) => ({ - booleanFilterKey: filterKey, - switchOn: false, - value: false, - toggleStatus() - { - let tempValue = Boolean(Number(this.$wire.get('filterComponents.'+this.booleanFilterKey) ?? this.value)); - let newBoolean = !tempValue; - this.switchOn = this.value = newBoolean; - return Number(newBoolean); - }, - toggleStatusWithUpdate() - { - let newValue = this.toggleStatus(); - this.$wire.set('filterComponents.'+this.booleanFilterKey, newValue); - }, - toggleStatusWithReset() - { - let newValue = this.toggleStatus(); - this.$wire.call('resetFilter',this.booleanFilterKey); - }, - setSwitchOn(val) - { - let number = Number(val ?? 0); - this.switchOn = Boolean(number); - }, - init() { - - this.$nextTick(() => { - this.value = this.$wire.get('filterComponents.'+this.booleanFilterKey) ?? defaultValue; - this.setSwitchOn(this.value ?? 0); - }); - - this.listeners.push( - Livewire.on('filter-was-set', (detail) => { - if(detail.tableName == this.tableName && detail.filterKey == this.booleanFilterKey) { - this.switchOn = detail.value ?? defaultValue; - } - }) - ); - } - })); - - Alpine.data('booleanFilterLatest', (data) => ({ - booleanFilterKey: data.filterKey, - booleanFilterDefaultValue: data.defaultValue, - switchOn: false, - value: false, - toggleStatus() - { - let tempValue = Boolean(Number(this.$wire.get('filterComponents.'+this.booleanFilterKey) ?? this.value)); - let newBoolean = !tempValue; - this.switchOn = this.value = newBoolean; - return Number(newBoolean); - }, - toggleStatusWithUpdate() - { - let newValue = this.toggleStatus(); - this.$wire.set('filterComponents.'+this.booleanFilterKey, newValue); - }, - toggleStatusWithReset() - { - let newValue = this.toggleStatus(); - this.$wire.call('resetFilter',this.booleanFilterKey); - }, - setSwitchOn(val) - { - let number = Number(val ?? 0); - this.switchOn = Boolean(number); - }, - init() { - - this.$nextTick(() => { - this.value = this.$wire.get('filterComponents.'+this.booleanFilterKey) ?? this.booleanFilterDefaultValue; - this.setSwitchOn(this.value ?? 0); - }); - - this.listeners.push( - Livewire.on('filter-was-set', (detail) => { - if(detail.tableName == this.tableName && detail.filterKey == this.booleanFilterKey) { - this.switchOn = detail.value ?? this.booleanFilterDefaultValue; - } - }) - ); - } - })); - - - - Alpine.data('numberRangeFilter', (wire, filterKey, parentElementPath, filterConfig, childElementRoot) => ({ - allFilters: wire.entangle('filterComponents', false), - originalMin: 0, - originalMax: 100, - filterMin: 0, - filterMax: 100, - currentMin: 0, - currentMax: 100, - hasUpdate: false, - wireValues: wire.entangle('filterComponents.' + filterKey, false), - defaultMin: filterConfig['minRange'], - defaultMax: filterConfig['maxRange'], - restrictUpdates: false, - initialiseStyles() - { - let numRangeFilterContainer = document.getElementById(parentElementPath); - numRangeFilterContainer.style.setProperty('--value-a', this.wireValues['min'] ?? this.filterMin); - numRangeFilterContainer.style.setProperty('--text-value-a', JSON.stringify(this.wireValues['min'] ?? this.filterMin)); - numRangeFilterContainer.style.setProperty('--value-b', this.wireValues['max'] ?? this.filterMax); - numRangeFilterContainer.style.setProperty('--text-value-b', JSON.stringify(this.wireValues['max'] ?? this.filterMax)); - }, - updateStyles(filterMin, filterMax) { - let numRangeFilterContainer = document.getElementById(parentElementPath); - numRangeFilterContainer.style.setProperty('--value-a', filterMin); - numRangeFilterContainer.style.setProperty('--text-value-a', JSON.stringify(filterMin)); - numRangeFilterContainer.style.setProperty('--value-b', filterMax); - numRangeFilterContainer.style.setProperty('--text-value-b', JSON.stringify(filterMax)); - }, - setupWire() { - if (this.wireValues !== undefined) { - this.filterMin = this.originalMin = (this.wireValues['min'] !== undefined) ? this.wireValues['min'] : this.defaultMin; - this.filterMax = this.originalMax = (this.wireValues['max'] !== undefined) ? this.wireValues['max'] : this.defaultMax; - } else { - this.filterMin = this.originalMin = this.defaultMin; - this.filterMax = this.originalMax = this.defaultMax; - } - this.updateStyles(this.filterMin, this.filterMax); - }, - allowUpdates() { - this.updateWire(); - }, - updateWire() { - let tmpFilterMin = parseInt(this.filterMin); - let tmpFilterMax = parseInt(this.filterMax); - - if (tmpFilterMin != this.originalMin || tmpFilterMax != this.originalMax) { - if (tmpFilterMax < tmpFilterMin) { - this.filterMin = tmpFilterMax; - this.filterMax = tmpFilterMin; - } - this.hasUpdate = true; - this.originalMin = tmpFilterMin; - this.originalMax = tmpFilterMax; - } - this.updateStyles(this.filterMin,this.filterMax); - }, - updateWireable() { - if (this.hasUpdate) { - this.hasUpdate = false; - this.wireValues = { 'min': this.filterMin, 'max': this.filterMax }; - wire.set('filterComponents.' + filterKey, this.wireValues); - } - }, - init() { - this.initialiseStyles(); - this.setupWire(); - this.$watch('allFilters', value => this.setupWire()); - }, - })); - - Alpine.data('flatpickrFilter', (wire, filterKey, filterConfig, refLocation, locale) => ({ - wireValues: wire.entangle('filterComponents.' + filterKey), - flatpickrInstance: flatpickr(refLocation, { - mode: 'range', - altFormat: filterConfig['altFormat'] ?? "F j, Y", - altInput: filterConfig['altInput'] ?? false, - allowInput: filterConfig['allowInput'] ?? false, - allowInvalidPreload: filterConfig['allowInvalidPreload'] ?? true, - ariaDateFormat: filterConfig['ariaDateFormat'] ?? "F j, Y", - clickOpens: true, - dateFormat: filterConfig['dateFormat'] ?? "Y-m-d", - defaultDate: filterConfig['defaultDate'] ?? null, - defaultHour: filterConfig['defaultHour'] ?? 12, - defaultMinute: filterConfig['defaultMinute'] ?? 0, - enableTime: filterConfig['enableTime'] ?? false, - enableSeconds: filterConfig['enableSeconds'] ?? false, - hourIncrement: filterConfig['hourIncrement'] ?? 1, - locale: filterConfig['locale'] ?? 'en', - minDate: filterConfig['earliestDate'] ?? null, - maxDate: filterConfig['latestDate'] ?? null, - minuteIncrement: filterConfig['minuteIncrement'] ?? 5, - shorthandCurrentMonth: filterConfig['shorthandCurrentMonth'] ?? false, - time_24hr: filterConfig['time_24hr'] ?? false, - weekNumbers: filterConfig['weekNumbers'] ?? false, - onOpen: function () { - window.childElementOpen = true; - }, - onChange: function (selectedDates, dateStr, instance) { - if (selectedDates.length > 1) { - var dates = dateStr.split(' '); - var wireDateArray = {}; - window.childElementOpen = false; - window.filterPopoverOpen = false; - wireDateArray = { 'minDate': dates[0], 'maxDate': (typeof dates[2] === "undefined") ? dates[0] : dates[2] }; - wire.set('filterComponents.' + filterKey, wireDateArray); - } - }, - }), - changedValue: function(value) { - if (value.length < 5) - { - this.flatpickrInstance.setDate([]); - wire.set('filterComponents.' + filterKey, {}); - } - }, - setupWire() { - if (this.wireValues !== undefined) { - if (this.wireValues.minDate !== undefined && this.wireValues.maxDate !== undefined) { - let initialDateArray = [this.wireValues.minDate, this.wireValues.maxDate]; - this.flatpickrInstance.setDate(initialDateArray); - } - else { - this.flatpickrInstance.setDate([]); - } - } - else { - this.flatpickrInstance.setDate([]); - } - }, - init() { - this.setupWire(); - this.$watch('wireValues', value => this.setupWire()); - } - + table(); + tableWrap(); + filterPills(); + externalFilter(); + tools(); + boolean(); + fpf(); + nrF(); + bulkactionsHelper(); - })); - - Alpine.data('tableWrapper', (wire, showBulkActionsAlpine) => ({ - shouldBeDisplayed: wire.entangle('shouldBeDisplayed'), - listeners: [], - childElementOpen: false, - filtersOpen: wire.entangle('filterSlideDownDefaultVisible'), - paginationCurrentCount: wire.entangle('paginationCurrentCount'), - paginationTotalItemCount: wire.entangle('paginationTotalItemCount'), - paginationCurrentItems: wire.entangle('paginationCurrentItems'), - selectedItems: wire.entangle('selected'), - selectAllStatus: wire.entangle('selectAll'), - delaySelectAll: wire.entangle('delaySelectAll'), - hideBulkActionsWhenEmpty: wire.entangle('hideBulkActionsWhenEmpty'), - toggleSelectAll() { - if (!showBulkActionsAlpine) { - return; - } - - if (this.paginationTotalItemCount === this.selectedItems.length) { - this.clearSelected(); - this.selectAllStatus = false; - } else { - if (this.delaySelectAll) - { - this.setAllItemsSelected(); - } - else - { - this.setAllSelected(); - } - } - }, - setAllItemsSelected() { - if (!showBulkActionsAlpine) { - return; - } - this.selectAllStatus = true; - this.selectAllOnPage(); - }, - setAllSelected() { - if (!showBulkActionsAlpine) { - return; - } - if (this.delaySelectAll) - { - this.selectAllStatus = true; - this.selectAllOnPage(); - } - else - { - wire.setAllSelected(); - } - }, - clearSelected() { - if (!showBulkActionsAlpine) { - return; - } - this.selectAllStatus = false; - wire.clearSelected(); - }, - selectAllOnPage() { - if (!showBulkActionsAlpine) { - return; - } - - let tempSelectedItems = this.selectedItems; - const iterator = this.paginationCurrentItems.values(); - for (const value of iterator) { - tempSelectedItems.push(value.toString()); - } - this.selectedItems = [...new Set(tempSelectedItems)]; - }, - destroy() { - this.listeners.forEach((listener) => { - listener(); - }); - } - })); - - Alpine.data('reorderFunction', (wire, tableID, primaryKeyName) => ({ - dragging: false, - reorderEnabled: false, - sourceID: '', - targetID: '', - evenRowClasses: '', - oddRowClasses: '', - currentlyHighlightedElement: '', - evenRowClassArray: {}, - oddRowClassArray: {}, - evenNotInOdd: {}, - oddNotInEven: {}, - orderedRows: [], - defaultReorderColumn: wire.get('defaultReorderColumn'), - reorderStatus: wire.get('reorderStatus'), - currentlyReorderingStatus: wire.entangle('currentlyReorderingStatus'), - hideReorderColumnUnlessReorderingStatus: wire.entangle('hideReorderColumnUnlessReorderingStatus'), - reorderDisplayColumn: wire.entangle('reorderDisplayColumn'), - dragStart(event) { - this.$nextTick(() => { this.setupEvenOddClasses() }); - this.sourceID = event.target.id; - event.dataTransfer.effectAllowed = 'move'; - event.dataTransfer.setData('text/plain', event.target.id); - event.target.classList.add("laravel-livewire-tables-dragging"); - }, - dragOverEvent(event) { - if (typeof this.currentlyHighlightedElement == 'object') { - this.currentlyHighlightedElement.classList.remove('laravel-livewire-tables-highlight-bottom', 'laravel-livewire-tables-highlight-top'); - } - let target = event.target.closest('tr'); - this.currentlyHighlightedElement = target; - - if (event.offsetY < (target.getBoundingClientRect().height / 2)) { - target.classList.add('laravel-livewire-tables-highlight-top'); - target.classList.remove('laravel-livewire-tables-highlight-bottom'); - } - else { - target.classList.remove('laravel-livewire-tables-highlight-top'); - target.classList.add('laravel-livewire-tables-highlight-bottom'); - } - }, - dragLeaveEvent(event) { - event.target.closest('tr').classList.remove('laravel-livewire-tables-highlight-bottom', 'laravel-livewire-tables-highlight-top'); - }, - dropEvent(event) { - if (typeof this.currentlyHighlightedElement == 'object') { - this.currentlyHighlightedElement.classList.remove('laravel-livewire-tables-highlight-bottom', 'laravel-livewire-tables-highlight-top'); - } - - let target = event.target.closest('tr'); - let parent = event.target.closest('tr').parentNode; - let element = document.getElementById(this.sourceID).closest('tr'); - element.classList.remove("laravel-livewire-table-dragging"); - let originalPosition = element.rowIndex; - let newPosition = target.rowIndex; - let table = document.getElementById(tableID); - let loopStart = originalPosition; - if (event.offsetY > (target.getBoundingClientRect().height / 2)) { - parent.insertBefore(element, target.nextSibling); - } - else { - parent.insertBefore(element, target); - } - if (newPosition < originalPosition) { - loopStart = newPosition; - } - let nextLoop = 'even'; - for (let i = 1, row; row = table.rows[i]; i++) { - if (!row.classList.contains('hidden') && !row.classList.contains('md:hidden') ) { - if (nextLoop === 'even') { - row.classList.remove(...this.oddNotInEven); - row.classList.add(...this.evenNotInOdd); - nextLoop = 'odd'; - } - else { - row.classList.remove(...this.evenNotInOdd); - row.classList.add(...this.oddNotInEven); - nextLoop = 'even'; - } - } - } - }, - reorderToggle() { - this.$nextTick(() => { this.setupEvenOddClasses() }); - if (this.currentlyReorderingStatus) { - wire.disableReordering(); - - } - else { - this.setupEvenOddClasses(); - if (this.hideReorderColumnUnlessReorderingStatus) { - this.reorderDisplayColumn = true; - } - wire.enableReordering(); - - } - }, - cancelReorder() { - if (this.hideReorderColumnUnlessReorderingStatus) { - this.reorderDisplayColumn = false; - } - wire.disableReordering(); - - }, - updateOrderedItems() { - let table = document.getElementById(tableID); - let orderedRows = []; - for (let i = 1, row; row = table.rows[i]; i++) { - orderedRows.push({ [primaryKeyName]: row.getAttribute('rowpk'), [this.defaultReorderColumn]: i }); - } - wire.storeReorder(orderedRows); - }, - setupEvenOddClasses() { - if (this.evenNotInOdd.length === undefined || this.evenNotInOdd.length == 0 || this.oddNotInEven.length === undefined || this.oddNotInEven.length == 0) - { - let tbody = document.getElementById(tableID).getElementsByTagName('tbody')[0]; - let evenRowClassArray = []; - let oddRowClassArray = []; - - if (tbody.rows[0] !== undefined && tbody.rows[1] !== undefined) { - evenRowClassArray = Array.from(tbody.rows[0].classList); - oddRowClassArray = Array.from(tbody.rows[1].classList); - this.evenNotInOdd = evenRowClassArray.filter(element => !oddRowClassArray.includes(element)); - this.oddNotInEven = oddRowClassArray.filter(element => !evenRowClassArray.includes(element)); - - evenRowClassArray = [] - oddRowClassArray = [] - } - } - }, - init() { - } - })); - - Alpine.data('filterPillsHandler', (data) => ({ - localData: data, - localFilterKey: '', - localFilterTitle: '', - isExternalFilter: false, - shouldRenderAsHTML: false, - shouldWatchPillValues: false, - pillsSeparator: ',', - pillValues: null, - pillHasValues: false, - displayString: '', - generateLocalFilterPillImplodedValues(filterPillValues) - { - if(typeof(filterPillValues) !== 'undefined') - { - var temporarySeparatorString = '---tablepillsseparator---'; - var regex = new RegExp(temporarySeparatorString, 'g'); - var joinedValues; - - if(Array.isArray(filterPillValues)) - { - joinedValues = filterPillValues.join(temporarySeparatorString); - } - else - { - joinedValues = filterPillValues; - } - - if(!this.shouldRenderAsHTML) - { - joinedValues = this.removeHTMLTags(joinedValues); - } - - if (joinedValues !== null) - { - let replacedJoinedValues = joinedValues.replace(regex, this.pillsSeparator); - return replacedJoinedValues; - - } - return ""; - } - return ""; - }, - clearExternalFilterPill() - { - if(this.isExternalFilter) - { - this.externalFilterPillsVals[this.localFilterKey] = []; - this.displayString = this.generateLocalFilterPillImplodedValues(this.externalFilterPillsVals[this.localFilterKey]); - this.updatePillHasValues(); - this.resetSpecificFilter(this.localFilterKey); - } - }, - trigger: { - ['@filterpillupdate.window'](event) { - this.watchForUpdateEvent(event); - }, - }, - checkEventIsValid(eventTableName, eventFilterKey) - { - return ((this.tableName === eventTableName) && (this.localFilterKey === eventFilterKey)); - }, - watchForUpdateEvent(event) - { - if(this.checkEventIsValid(event.detail.tableName ?? '', event.detail.filterKey ?? '')) - { - let eventPillItem = event.detail.pillItem ?? ''; - if(!this.shouldRenderAsHTML) - { - eventPillItem = this.removeHTMLTags(eventPillItem); - } - - if(eventPillItem != "") - { - if(this.isExternalFilter) - { - let filterPillValues = this.externalFilterPillsVals[this.localFilterKey]; - - filterPillValues.push(eventPillItem); - this.updatePillValues(filterPillValues); - } - else - { - this.updatePillValues(eventPillItem); - } - } - } - }, - updatePillValues(filterPillValues) - { - this.pillValues = filterPillValues; - this.displayString = this.generateLocalFilterPillImplodedValues(filterPillValues); - this.updatePillHasValues(); - - return this.displayString; - }, - updatePillHasValues() - { - this.pillHasValues = (this.displayString.length > 0); - }, - init() - { - this.localFilterKey = this.localData['filterKey'] ?? 'unknown'; - this.localFilterTitle = this.localData['filterPillTitle'] ?? 'Unknown'; - this.pillsSeparator = this.localData['separator'] ?? ','; - this.shouldWatchPillValues = Boolean(this.localData['watchForEvents'] ?? 0); - this.isExternalFilter = Boolean(this.localData['isAnExternalLivewireFilter'] ?? 0); - this.shouldRenderAsHTML = Boolean(this.localData['renderPillsAsHtml'] ?? 0); - this.pillValues = this.localData['pillValues'] ?? null; - - this.$nextTick(() => { - if(this.isExternalFilter) - { - this.updatePillValues(this.externalFilterPillsVals[this.localFilterKey]); - } - else - { - this.updatePillValues(this.pillValues); - } - }); - if(this.isExternalFilter && this.shouldWatchPillValues) - { - this.$watch('externalFilterPillsVals.'+this.localFilterKey, filterPillValues => { - this.updatePillValues(filterPillValues); - }); - } - } - })); - - - Alpine.data('tablesExternalFilter', (wire, filterKey) => ({ - externalFilterKey: filterKey, - pillValues: [], - optionsAvailable: wire.entangle('optionsAvailable'), - optionsSelected: wire.entangle('optionsSelected').live, - selectedItems: wire.entangle('selectedItems'), - sendValueToPill(value) - { - let sentValue = this.removeHTMLTags(value); - this.$dispatch('filterpillupdate', { tableName: this.tableName, filterKey: this.externalFilterKey, pillItem: sentValue }); - }, - overridePill(values) - { - let sentValue = this.removeHTMLTags(values); - this.$dispatch('filterpillupdate', { tableName: this.tableName, filterKey: this.externalFilterKey, pillItem: sentValue }); - }, - syncItems(items) { - this.pillValues = []; - items.forEach((item) => { - this.pillValues.push(this.optionsAvailable[item]); - }); - if(this.pillValues.length > 0) - { - this.pillValues.sort(); - this.syncExternalFilterPillsValues(this.externalFilterKey,this.pillValues); - } - this.optionsSelected = this.selectedItems; - wire.set('value', this.selectedItems); - - }, - init() { - this.selectedItems = this.optionsSelected; - this.syncItems(this.selectedItems); - this.$watch('selectedItems', value => this.syncItems(value)); - } - - - })); - - - }); \ No newline at end of file diff --git a/resources/js/laravel-livewire-tables.min.js b/resources/js/laravel-livewire-tables.min.js index 5e0980c39..c16a6f01e 100644 --- a/resources/js/laravel-livewire-tables.min.js +++ b/resources/js/laravel-livewire-tables.min.js @@ -1 +1,23 @@ -document.addEventListener("alpine:init",()=>{Alpine.data("laravellivewiretable",e=>({tableId:"",showBulkActionsAlpine:!1,primaryKeyName:"",shouldBeDisplayed:e.entangle("shouldBeDisplayed"),tableName:e.entangle("tableName"),dataTableFingerprint:e.entangle("dataTableFingerprint"),listeners:[],childElementOpen:!1,filtersOpen:e.entangle("filterSlideDownDefaultVisible"),paginationCurrentCount:e.entangle("paginationCurrentCount"),paginationTotalItemCount:e.entangle("paginationTotalItemCount"),paginationCurrentItems:e.entangle("paginationCurrentItems"),selectedItems:e.entangle("selected"),selectAllStatus:e.entangle("selectAll"),delaySelectAll:e.entangle("delaySelectAll"),hideBulkActionsWhenEmpty:e.entangle("hideBulkActionsWhenEmpty"),dragging:!1,reorderEnabled:!1,sourceID:"",targetID:"",evenRowClasses:"",oddRowClasses:"",currentlyHighlightedElement:"",evenRowClassArray:{},oddRowClassArray:{},evenNotInOdd:{},oddNotInEven:{},orderedRows:[],defaultReorderColumn:e.entangle("defaultReorderColumn"),reorderStatus:e.entangle("reorderStatus"),currentlyReorderingStatus:e.entangle("currentlyReorderingStatus"),hideReorderColumnUnlessReorderingStatus:e.entangle("hideReorderColumnUnlessReorderingStatus"),reorderDisplayColumn:e.entangle("reorderDisplayColumn"),externalFilterPillsVals:e.entangle("externalFilterPillsValues"),internalFilterPillsVals:e.entangle("internalFilterPillsVals"),showFilterPillLabel:[],filterPillsSeparator:", ",showFilterPillsSection:!0,removeHTMLTags(e){let t=new DOMParser;return(t.parseFromString(e,"text/html").body.innerText||"").trim()},resetSpecificFilter(t){this.externalFilterPillsVals[t]=[],e.call("resetFilter",t)},resetAllFilters(){this.externalFilterPillsVals=[],e.call("setFilterDefaults")},setInternalFilterPillVal(e,t){void 0!==t&&(this.internalFilterPillsVals[e]=t)},syncExternalFilterPillsValues(e,t){this.externalFilterPillsVals[e]=t,this.showFilterPillLabel[e]=this.getFilterPillsLength(e)},getFilterPillsLength(e){return Object.keys(this.externalFilterPillsVals[e]).length??0},showFilterPillsValue(e,t){void 0!==t?this.externalFilterPillsVals[e]=t:this.externalFilterPillsVals[e]=null},setFilterPillsLength(e){let t=0;return void 0!==e?Object.keys(e).length??0:0},showFilterPillsLabel(e){return this.getFilterPillsLength(e),this.getFilterPillsLength(e)>0},getFilterPillImplodedValues(e,t){let l=this.externalFilterPillsVals[e];return"undefined"!==l?l.join(t):""},showFilterPillsSeparator(e,t){return t+1{this.setupEvenOddClasses()}),this.sourceID=e.target.id,e.dataTransfer.effectAllowed="move",e.dataTransfer.setData("text/plain",e.target.id),e.target.classList.add("laravel-livewire-tables-dragging")},dragOverEvent(e){"object"==typeof this.currentlyHighlightedElement&&this.currentlyHighlightedElement.classList.remove("laravel-livewire-tables-highlight-bottom","laravel-livewire-tables-highlight-top");let t=e.target.closest("tr");this.currentlyHighlightedElement=t,e.offsetYt.getBoundingClientRect().height/2?l.insertBefore(i,t.nextSibling):l.insertBefore(i,t),a{this.setupEvenOddClasses()})},cancelReorder(){this.hideReorderColumnUnlessReorderingStatus&&(this.reorderDisplayColumn=!1),e.disableReordering()},updateOrderedItems(){let t=document.getElementById(this.tableId),l=[];for(let i=1,s;s=t.rows[i];i++)l.push({[this.primaryKeyName]:s.getAttribute("rowpk"),[this.defaultReorderColumn]:i});e.storeReorder(l)},setupEvenOddClasses(){if(void 0===this.evenNotInOdd.length||0==this.evenNotInOdd.length||void 0===this.oddNotInEven.length||0==this.oddNotInEven.length){let e=document.getElementById(this.tableId).getElementsByTagName("tbody")[0],t=[],l=[];void 0!==e.rows[0]&&void 0!==e.rows[1]&&(t=Array.from(e.rows[0].classList),l=Array.from(e.rows[1].classList),this.evenNotInOdd=t.filter(e=>!l.includes(e)),this.oddNotInEven=l.filter(e=>!t.includes(e)),t=[],l=[])}},toggleSelectAll(){this.showBulkActionsAlpine&&(this.paginationTotalItemCount===this.selectedItems.length?(this.clearSelected(),this.selectAllStatus=!1):this.delaySelectAll?this.setAllItemsSelected():this.setAllSelected())},setAllItemsSelected(){this.showBulkActionsAlpine&&(this.selectAllStatus=!0,this.selectAllOnPage())},setAllSelected(){this.showBulkActionsAlpine&&(this.delaySelectAll?(this.selectAllStatus=!0,this.selectAllOnPage()):e.setAllSelected())},clearSelected(){this.showBulkActionsAlpine&&(this.selectAllStatus=!1,e.clearSelected())},selectAllOnPage(){if(!this.showBulkActionsAlpine)return;let e=this.selectedItems,t=this.paginationCurrentItems.values();for(let l of t)e.push(l.toString());this.selectedItems=[...new Set(e)]},setTableId(e){this.tableId=e},setAlpineBulkActions(e){this.showBulkActionsAlpine=e},setPrimaryKeyName(e){this.primaryKeyName=e},showTable(e){let t=e.detail.tableName??"",l=e.detail.tableFingerpint??"";((t??"")!=""&&t===this.tableName||""!=l&&eventTableFingerpint===this.dataTableFingerprint)&&(this.shouldBeDisplayed=!0)},hideTable(e){let t=e.detail.tableName??"",l=e.detail.tableFingerpint??"";(""!=t&&t===this.tableName||""!=l&&eventTableFingerpint===this.dataTableFingerprint)&&(this.shouldBeDisplayed=!1)},destroy(){this.listeners.forEach(e=>{e()})}})),Alpine.data("booleanFilter",(e,t,l,i)=>({localListeners:[],switchOn:!1,value:e.entangle("filterComponents."+t).live,init(){this.switchOn=!1,void 0!==this.value&&(this.switchOn=Boolean(Number(this.value))),this.localListeners.push(Livewire.on("filter-was-set",e=>{e.tableName==this.tableName&&e.filterKey==t&&(this.switchOn=e.value??i)}))},destroy(){this.localListeners.forEach(e=>{e()})}})),Alpine.data("newBooleanFilter",(e,t,l)=>({booleanFilterKey:e,switchOn:!1,value:!1,toggleStatus(){let e=!Boolean(Number(this.$wire.get("filterComponents."+this.booleanFilterKey)??this.value));return this.switchOn=this.value=e,Number(e)},toggleStatusWithUpdate(){let e=this.toggleStatus();this.$wire.set("filterComponents."+this.booleanFilterKey,e)},toggleStatusWithReset(){this.toggleStatus(),this.$wire.call("resetFilter",this.booleanFilterKey)},setSwitchOn(e){let t=Number(e??0);this.switchOn=Boolean(t)},init(){this.$nextTick(()=>{this.value=this.$wire.get("filterComponents."+this.booleanFilterKey)??l,this.setSwitchOn(this.value??0)}),this.listeners.push(Livewire.on("filter-was-set",e=>{e.tableName==this.tableName&&e.filterKey==this.booleanFilterKey&&(this.switchOn=e.value??l)}))}})),Alpine.data("booleanFilterLatest",e=>({booleanFilterKey:e.filterKey,booleanFilterDefaultValue:e.defaultValue,switchOn:!1,value:!1,toggleStatus(){let e=!Boolean(Number(this.$wire.get("filterComponents."+this.booleanFilterKey)??this.value));return this.switchOn=this.value=e,Number(e)},toggleStatusWithUpdate(){let e=this.toggleStatus();this.$wire.set("filterComponents."+this.booleanFilterKey,e)},toggleStatusWithReset(){this.toggleStatus(),this.$wire.call("resetFilter",this.booleanFilterKey)},setSwitchOn(e){let t=Number(e??0);this.switchOn=Boolean(t)},init(){this.$nextTick(()=>{this.value=this.$wire.get("filterComponents."+this.booleanFilterKey)??this.booleanFilterDefaultValue,this.setSwitchOn(this.value??0)}),this.listeners.push(Livewire.on("filter-was-set",e=>{e.tableName==this.tableName&&e.filterKey==this.booleanFilterKey&&(this.switchOn=e.value??this.booleanFilterDefaultValue)}))}})),Alpine.data("numberRangeFilter",(e,t,l,i,s)=>({allFilters:e.entangle("filterComponents",!1),originalMin:0,originalMax:100,filterMin:0,filterMax:100,currentMin:0,currentMax:100,hasUpdate:!1,wireValues:e.entangle("filterComponents."+t,!1),defaultMin:i.minRange,defaultMax:i.maxRange,restrictUpdates:!1,initialiseStyles(){let e=document.getElementById(l);e.style.setProperty("--value-a",this.wireValues.min??this.filterMin),e.style.setProperty("--text-value-a",JSON.stringify(this.wireValues.min??this.filterMin)),e.style.setProperty("--value-b",this.wireValues.max??this.filterMax),e.style.setProperty("--text-value-b",JSON.stringify(this.wireValues.max??this.filterMax))},updateStyles(e,t){let i=document.getElementById(l);i.style.setProperty("--value-a",e),i.style.setProperty("--text-value-a",JSON.stringify(e)),i.style.setProperty("--value-b",t),i.style.setProperty("--text-value-b",JSON.stringify(t))},setupWire(){void 0!==this.wireValues?(this.filterMin=this.originalMin=void 0!==this.wireValues.min?this.wireValues.min:this.defaultMin,this.filterMax=this.originalMax=void 0!==this.wireValues.max?this.wireValues.max:this.defaultMax):(this.filterMin=this.originalMin=this.defaultMin,this.filterMax=this.originalMax=this.defaultMax),this.updateStyles(this.filterMin,this.filterMax)},allowUpdates(){this.updateWire()},updateWire(){let e=parseInt(this.filterMin),t=parseInt(this.filterMax);(e!=this.originalMin||t!=this.originalMax)&&(tthis.setupWire())}})),Alpine.data("flatpickrFilter",(e,t,l,i,s)=>({wireValues:e.entangle("filterComponents."+t),flatpickrInstance:flatpickr(i,{mode:"range",altFormat:l.altFormat??"F j, Y",altInput:l.altInput??!1,allowInput:l.allowInput??!1,allowInvalidPreload:l.allowInvalidPreload??!0,ariaDateFormat:l.ariaDateFormat??"F j, Y",clickOpens:!0,dateFormat:l.dateFormat??"Y-m-d",defaultDate:l.defaultDate??null,defaultHour:l.defaultHour??12,defaultMinute:l.defaultMinute??0,enableTime:l.enableTime??!1,enableSeconds:l.enableSeconds??!1,hourIncrement:l.hourIncrement??1,locale:l.locale??"en",minDate:l.earliestDate??null,maxDate:l.latestDate??null,minuteIncrement:l.minuteIncrement??5,shorthandCurrentMonth:l.shorthandCurrentMonth??!1,time_24hr:l.time_24hr??!1,weekNumbers:l.weekNumbers??!1,onOpen:function(){window.childElementOpen=!0},onChange:function(l,i,s){if(l.length>1){var a=i.split(" "),r={};window.childElementOpen=!1,window.filterPopoverOpen=!1,r={minDate:a[0],maxDate:void 0===a[2]?a[0]:a[2]},e.set("filterComponents."+t,r)}}}),changedValue:function(l){l.length<5&&(this.flatpickrInstance.setDate([]),e.set("filterComponents."+t,{}))},setupWire(){if(void 0!==this.wireValues){if(void 0!==this.wireValues.minDate&&void 0!==this.wireValues.maxDate){let e=[this.wireValues.minDate,this.wireValues.maxDate];this.flatpickrInstance.setDate(e)}else this.flatpickrInstance.setDate([])}else this.flatpickrInstance.setDate([])},init(){this.setupWire(),this.$watch("wireValues",e=>this.setupWire())}})),Alpine.data("tableWrapper",(e,t)=>({shouldBeDisplayed:e.entangle("shouldBeDisplayed"),listeners:[],childElementOpen:!1,filtersOpen:e.entangle("filterSlideDownDefaultVisible"),paginationCurrentCount:e.entangle("paginationCurrentCount"),paginationTotalItemCount:e.entangle("paginationTotalItemCount"),paginationCurrentItems:e.entangle("paginationCurrentItems"),selectedItems:e.entangle("selected"),selectAllStatus:e.entangle("selectAll"),delaySelectAll:e.entangle("delaySelectAll"),hideBulkActionsWhenEmpty:e.entangle("hideBulkActionsWhenEmpty"),toggleSelectAll(){t&&(this.paginationTotalItemCount===this.selectedItems.length?(this.clearSelected(),this.selectAllStatus=!1):this.delaySelectAll?this.setAllItemsSelected():this.setAllSelected())},setAllItemsSelected(){t&&(this.selectAllStatus=!0,this.selectAllOnPage())},setAllSelected(){t&&(this.delaySelectAll?(this.selectAllStatus=!0,this.selectAllOnPage()):e.setAllSelected())},clearSelected(){t&&(this.selectAllStatus=!1,e.clearSelected())},selectAllOnPage(){if(!t)return;let e=this.selectedItems,l=this.paginationCurrentItems.values();for(let i of l)e.push(i.toString());this.selectedItems=[...new Set(e)]},destroy(){this.listeners.forEach(e=>{e()})}})),Alpine.data("reorderFunction",(e,t,l)=>({dragging:!1,reorderEnabled:!1,sourceID:"",targetID:"",evenRowClasses:"",oddRowClasses:"",currentlyHighlightedElement:"",evenRowClassArray:{},oddRowClassArray:{},evenNotInOdd:{},oddNotInEven:{},orderedRows:[],defaultReorderColumn:e.get("defaultReorderColumn"),reorderStatus:e.get("reorderStatus"),currentlyReorderingStatus:e.entangle("currentlyReorderingStatus"),hideReorderColumnUnlessReorderingStatus:e.entangle("hideReorderColumnUnlessReorderingStatus"),reorderDisplayColumn:e.entangle("reorderDisplayColumn"),dragStart(e){this.$nextTick(()=>{this.setupEvenOddClasses()}),this.sourceID=e.target.id,e.dataTransfer.effectAllowed="move",e.dataTransfer.setData("text/plain",e.target.id),e.target.classList.add("laravel-livewire-tables-dragging")},dragOverEvent(e){"object"==typeof this.currentlyHighlightedElement&&this.currentlyHighlightedElement.classList.remove("laravel-livewire-tables-highlight-bottom","laravel-livewire-tables-highlight-top");let t=e.target.closest("tr");this.currentlyHighlightedElement=t,e.offsetYl.getBoundingClientRect().height/2?i.insertBefore(s,l.nextSibling):i.insertBefore(s,l),r{this.setupEvenOddClasses()}),this.currentlyReorderingStatus?e.disableReordering():(this.setupEvenOddClasses(),this.hideReorderColumnUnlessReorderingStatus&&(this.reorderDisplayColumn=!0),e.enableReordering())},cancelReorder(){this.hideReorderColumnUnlessReorderingStatus&&(this.reorderDisplayColumn=!1),e.disableReordering()},updateOrderedItems(){let i=document.getElementById(t),s=[];for(let a=1,r;r=i.rows[a];a++)s.push({[l]:r.getAttribute("rowpk"),[this.defaultReorderColumn]:a});e.storeReorder(s)},setupEvenOddClasses(){if(void 0===this.evenNotInOdd.length||0==this.evenNotInOdd.length||void 0===this.oddNotInEven.length||0==this.oddNotInEven.length){let e=document.getElementById(t).getElementsByTagName("tbody")[0],l=[],i=[];void 0!==e.rows[0]&&void 0!==e.rows[1]&&(l=Array.from(e.rows[0].classList),i=Array.from(e.rows[1].classList),this.evenNotInOdd=l.filter(e=>!i.includes(e)),this.oddNotInEven=i.filter(e=>!l.includes(e)),l=[],i=[])}},init(){}})),Alpine.data("filterPillsHandler",e=>({localData:e,localFilterKey:"",localFilterTitle:"",isExternalFilter:!1,shouldRenderAsHTML:!1,shouldWatchPillValues:!1,pillsSeparator:",",pillValues:null,pillHasValues:!1,displayString:"",generateLocalFilterPillImplodedValues(e){if(void 0!==e){var t,l="---tablepillsseparator---",i=RegExp(l,"g");if(t=Array.isArray(e)?e.join(l):e,this.shouldRenderAsHTML||(t=this.removeHTMLTags(t)),null!==t)return t.replace(i,this.pillsSeparator)}return""},clearExternalFilterPill(){this.isExternalFilter&&(this.externalFilterPillsVals[this.localFilterKey]=[],this.displayString=this.generateLocalFilterPillImplodedValues(this.externalFilterPillsVals[this.localFilterKey]),this.updatePillHasValues(),this.resetSpecificFilter(this.localFilterKey))},trigger:{"@filterpillupdate.window"(e){this.watchForUpdateEvent(e)}},checkEventIsValid(e,t){return this.tableName===e&&this.localFilterKey===t},watchForUpdateEvent(e){if(this.checkEventIsValid(e.detail.tableName??"",e.detail.filterKey??"")){let t=e.detail.pillItem??"";if(this.shouldRenderAsHTML||(t=this.removeHTMLTags(t)),""!=t){if(this.isExternalFilter){let l=this.externalFilterPillsVals[this.localFilterKey];l.push(t),this.updatePillValues(l)}else this.updatePillValues(t)}}},updatePillValues(e){return this.pillValues=e,this.displayString=this.generateLocalFilterPillImplodedValues(e),this.updatePillHasValues(),this.displayString},updatePillHasValues(){this.pillHasValues=this.displayString.length>0},init(){this.localFilterKey=this.localData.filterKey??"unknown",this.localFilterTitle=this.localData.filterPillTitle??"Unknown",this.pillsSeparator=this.localData.separator??",",this.shouldWatchPillValues=Boolean(this.localData.watchForEvents??0),this.isExternalFilter=Boolean(this.localData.isAnExternalLivewireFilter??0),this.shouldRenderAsHTML=Boolean(this.localData.renderPillsAsHtml??0),this.pillValues=this.localData.pillValues??null,this.$nextTick(()=>{this.isExternalFilter?this.updatePillValues(this.externalFilterPillsVals[this.localFilterKey]):this.updatePillValues(this.pillValues)}),this.isExternalFilter&&this.shouldWatchPillValues&&this.$watch("externalFilterPillsVals."+this.localFilterKey,e=>{this.updatePillValues(e)})}})),Alpine.data("tablesExternalFilter",(e,t)=>({externalFilterKey:t,pillValues:[],optionsAvailable:e.entangle("optionsAvailable"),optionsSelected:e.entangle("optionsSelected").live,selectedItems:e.entangle("selectedItems"),sendValueToPill(e){let t=this.removeHTMLTags(e);this.$dispatch("filterpillupdate",{tableName:this.tableName,filterKey:this.externalFilterKey,pillItem:t})},overridePill(e){let t=this.removeHTMLTags(e);this.$dispatch("filterpillupdate",{tableName:this.tableName,filterKey:this.externalFilterKey,pillItem:t})},syncItems(t){this.pillValues=[],t.forEach(e=>{this.pillValues.push(this.optionsAvailable[e])}),this.pillValues.length>0&&(this.pillValues.sort(),this.syncExternalFilterPillsValues(this.externalFilterKey,this.pillValues)),this.optionsSelected=this.selectedItems,e.set("value",this.selectedItems)},init(){this.selectedItems=this.optionsSelected,this.syncItems(this.selectedItems),this.$watch("selectedItems",e=>this.syncItems(e))}}))}); \ No newline at end of file +/*jshint esversion: 6 */ +import table from "./partials/core/table.min.js"; +import tableWrap from "./partials/core/tableWrap.min.js"; +import filterPills from "./partials/core/filterPills.min.js"; +import externalFilter from "./partials/core/externalFilter.min.js"; +import tools from "./partials/core/tools.min.js"; +import boolean from "./partials/filters/boolean.js"; +import fpf from "./partials/filters/fpf.js"; +import nrF from "./partials/filters/numberRange.js"; +import bulkactionsHelper from "./partials/core/bulkactionsHelper.min.js"; + +document.addEventListener('livewire:init', () => { + + table(); + filterPills(); + externalFilter(); + tools(); + boolean(); + fpf(); + nrF(); + bulkactionsHelper(); + +}); \ No newline at end of file diff --git a/resources/js/partials/core/bulkactionsHelper.min.js b/resources/js/partials/core/bulkactionsHelper.min.js new file mode 100644 index 000000000..438883b74 --- /dev/null +++ b/resources/js/partials/core/bulkactionsHelper.min.js @@ -0,0 +1,60 @@ +/*jshint esversion: 6 */ + +function bulkactionsHelper() { + Alpine.data('bulkactions', (wire) => ({ + paginationCurrentCount: wire.entangle('paginationCurrentCount'), + paginationCurrentItems: wire.entangle('paginationCurrentItems'), + selectAllStatus: wire.entangle('selectAll'), + delaySelectAll: wire.entangle('delaySelectAll'), + newSelectCount: 0, + bulkActionHeaderChecked: false, + toggleSelectAll() { + if (this.paginationTotalItemCount === this.selectedItems.length) { + this.clearSelected(); + this.selectAllStatus = false; + } else { + if (this.delaySelectAll) + { + this.setAllItemsSelected(); + } + else + { + this.setAllSelected(); + } + } + }, + setAllItemsSelected() { + this.selectAllStatus = true; + this.selectAllOnPage(); + }, + setAllSelected() { + if (this.delaySelectAll) + { + this.selectAllStatus = true; + this.selectAllOnPage(); + } + else + { + wire.setAllSelected(); + } + }, + clearSelected() { + this.selectAllStatus = false; + wire.clearSelected(); + }, + selectAllOnPage() { + let tempSelectedItems = this.selectedItems; + const iterator = this.paginationCurrentItems.values(); + for (const value of iterator) { + tempSelectedItems.push(value.toString()); + } + this.selectedItems = [...new Set(tempSelectedItems)]; + }, + deselectAllOnPage() { + let tempSelectedItems = this.selectedItems; + tempSelectedItems = tempSelectedItems.filter(item => !this.paginationCurrentItems.includes(item)); + this.selectedItems = [...new Set(tempSelectedItems)]; + } + })); +} +export default bulkactionsHelper; \ No newline at end of file diff --git a/resources/js/partials/core/externalFilter.js b/resources/js/partials/core/externalFilter.js new file mode 100644 index 000000000..eb1e1d9ad --- /dev/null +++ b/resources/js/partials/core/externalFilter.js @@ -0,0 +1,45 @@ +/*jshint esversion: 6 */ + +function externalFilter() { + + + + Alpine.data('tablesExternalFilter', (wire, filterKey) => ({ + externalFilterKey: filterKey, + pillValues: [], + optionsAvailable: wire.entangle('optionsAvailable'), + optionsSelected: wire.entangle('optionsSelected').live, + selectedItems: wire.entangle('selectedItems'), + sendValueToPill(value) + { + let sentValue = this.removeHTMLTags(value); + this.$dispatch('filterpillupdate', { tableName: this.tableName, filterKey: this.externalFilterKey, pillItem: sentValue }); + }, + overridePill(values) + { + let sentValue = this.removeHTMLTags(values); + this.$dispatch('filterpillupdate', { tableName: this.tableName, filterKey: this.externalFilterKey, pillItem: sentValue }); + }, + syncItems(items) { + this.pillValues = []; + items.forEach((item) => { + this.pillValues.push(this.optionsAvailable[item]); + }); + if(this.pillValues.length > 0) + { + this.pillValues.sort(); + this.syncExternalFilterPillsValues(this.externalFilterKey,this.pillValues); + } + this.optionsSelected = this.selectedItems; + wire.set('value', this.selectedItems); + + }, + init() { + this.selectedItems = this.optionsSelected; + this.syncItems(this.selectedItems); + this.$watch('selectedItems', value => this.syncItems(value)); + } + })); +} + +export default externalFilter; \ No newline at end of file diff --git a/resources/js/partials/core/externalFilter.min.js b/resources/js/partials/core/externalFilter.min.js new file mode 100644 index 000000000..aff0f254b --- /dev/null +++ b/resources/js/partials/core/externalFilter.min.js @@ -0,0 +1,2 @@ +/*jshint esversion: 6 */ +function externalFilter(){Alpine.data("tablesExternalFilter",(e,t)=>({externalFilterKey:t,pillValues:[],optionsAvailable:e.entangle("optionsAvailable"),optionsSelected:e.entangle("optionsSelected").live,selectedItems:e.entangle("selectedItems"),sendValueToPill(e){let t=this.removeHTMLTags(e);this.$dispatch("filterpillupdate",{tableName:this.tableName,filterKey:this.externalFilterKey,pillItem:t})},overridePill(e){let t=this.removeHTMLTags(e);this.$dispatch("filterpillupdate",{tableName:this.tableName,filterKey:this.externalFilterKey,pillItem:t})},syncItems(t){this.pillValues=[],t.forEach(e=>{this.pillValues.push(this.optionsAvailable[e])}),this.pillValues.length>0&&(this.pillValues.sort(),this.syncExternalFilterPillsValues(this.externalFilterKey,this.pillValues)),this.optionsSelected=this.selectedItems,e.set("value",this.selectedItems)},init(){this.selectedItems=this.optionsSelected,this.syncItems(this.selectedItems),this.$watch("selectedItems",e=>this.syncItems(e))}}))}export default externalFilter; \ No newline at end of file diff --git a/resources/js/partials/core/filterPills.js b/resources/js/partials/core/filterPills.js new file mode 100644 index 000000000..535e5af48 --- /dev/null +++ b/resources/js/partials/core/filterPills.js @@ -0,0 +1,135 @@ +/*jshint esversion: 6 */ + +function filterPills() { + Alpine.data('filterPillsHandler', (data) => ({ + localData: data, + localFilterKey: '', + localFilterTitle: '', + isExternalFilter: false, + shouldRenderAsHTML: false, + shouldWatchPillValues: false, + pillsSeparator: ',', + pillValues: null, + pillHasValues: false, + displayString: '', + generateLocalFilterPillImplodedValues(filterPillValues) + { + if(typeof(filterPillValues) !== 'undefined') + { + var temporarySeparatorString = '---tablepillsseparator---'; + var regex = new RegExp(temporarySeparatorString, 'g'); + var joinedValues; + + if(Array.isArray(filterPillValues)) + { + joinedValues = filterPillValues.join(temporarySeparatorString); + } + else + { + joinedValues = filterPillValues; + } + + if(!this.shouldRenderAsHTML) + { + joinedValues = this.removeHTMLTags(joinedValues); + } + + if (joinedValues !== null) + { + let replacedJoinedValues = joinedValues.replace(regex, this.pillsSeparator); + return replacedJoinedValues; + + } + return ""; + } + return ""; + }, + clearExternalFilterPill() + { + if(this.isExternalFilter) + { + this.externalFilterPillsVals[this.localFilterKey] = []; + this.displayString = this.generateLocalFilterPillImplodedValues(this.externalFilterPillsVals[this.localFilterKey]); + this.updatePillHasValues(); + this.resetSpecificFilter(this.localFilterKey); + } + }, + trigger: { + ['@filterpillupdate.window'](event) { + this.watchForUpdateEvent(event); + }, + }, + checkEventIsValid(eventTableName, eventFilterKey) + { + return ((this.tableName === eventTableName) && (this.localFilterKey === eventFilterKey)); + }, + watchForUpdateEvent(event) + { + if(this.checkEventIsValid(event.detail.tableName ?? '', event.detail.filterKey ?? '')) + { + let eventPillItem = event.detail.pillItem ?? ''; + if(!this.shouldRenderAsHTML) + { + eventPillItem = this.removeHTMLTags(eventPillItem); + } + + if(eventPillItem != "") + { + if(this.isExternalFilter) + { + let filterPillValues = this.externalFilterPillsVals[this.localFilterKey]; + + filterPillValues.push(eventPillItem); + this.updatePillValues(filterPillValues); + } + else + { + this.updatePillValues(eventPillItem); + } + } + } + }, + updatePillValues(filterPillValues) + { + this.pillValues = filterPillValues; + this.displayString = this.generateLocalFilterPillImplodedValues(filterPillValues); + this.updatePillHasValues(); + + return this.displayString; + }, + updatePillHasValues() + { + this.pillHasValues = (this.displayString.length > 0); + }, + init() + { + this.localFilterKey = this.localData['filterKey'] ?? 'unknown'; + this.localFilterTitle = this.localData['filterPillTitle'] ?? 'Unknown'; + this.pillsSeparator = this.localData['separator'] ?? ','; + this.shouldWatchPillValues = Boolean(this.localData['watchForEvents'] ?? 0); + this.isExternalFilter = Boolean(this.localData['isAnExternalLivewireFilter'] ?? 0); + this.shouldRenderAsHTML = Boolean(this.localData['renderPillsAsHtml'] ?? 0); + this.pillValues = this.localData['pillValues'] ?? null; + + this.$nextTick(() => { + if(this.isExternalFilter) + { + this.updatePillValues(this.externalFilterPillsVals[this.localFilterKey]); + } + else + { + this.updatePillValues(this.pillValues); + } + }); + if(this.isExternalFilter && this.shouldWatchPillValues) + { + this.$watch('externalFilterPillsVals.'+this.localFilterKey, filterPillValues => { + this.updatePillValues(filterPillValues); + }); + } + } + })); + +} + +export default filterPills; \ No newline at end of file diff --git a/resources/js/partials/core/filterPills.min.js b/resources/js/partials/core/filterPills.min.js new file mode 100644 index 000000000..535e5af48 --- /dev/null +++ b/resources/js/partials/core/filterPills.min.js @@ -0,0 +1,135 @@ +/*jshint esversion: 6 */ + +function filterPills() { + Alpine.data('filterPillsHandler', (data) => ({ + localData: data, + localFilterKey: '', + localFilterTitle: '', + isExternalFilter: false, + shouldRenderAsHTML: false, + shouldWatchPillValues: false, + pillsSeparator: ',', + pillValues: null, + pillHasValues: false, + displayString: '', + generateLocalFilterPillImplodedValues(filterPillValues) + { + if(typeof(filterPillValues) !== 'undefined') + { + var temporarySeparatorString = '---tablepillsseparator---'; + var regex = new RegExp(temporarySeparatorString, 'g'); + var joinedValues; + + if(Array.isArray(filterPillValues)) + { + joinedValues = filterPillValues.join(temporarySeparatorString); + } + else + { + joinedValues = filterPillValues; + } + + if(!this.shouldRenderAsHTML) + { + joinedValues = this.removeHTMLTags(joinedValues); + } + + if (joinedValues !== null) + { + let replacedJoinedValues = joinedValues.replace(regex, this.pillsSeparator); + return replacedJoinedValues; + + } + return ""; + } + return ""; + }, + clearExternalFilterPill() + { + if(this.isExternalFilter) + { + this.externalFilterPillsVals[this.localFilterKey] = []; + this.displayString = this.generateLocalFilterPillImplodedValues(this.externalFilterPillsVals[this.localFilterKey]); + this.updatePillHasValues(); + this.resetSpecificFilter(this.localFilterKey); + } + }, + trigger: { + ['@filterpillupdate.window'](event) { + this.watchForUpdateEvent(event); + }, + }, + checkEventIsValid(eventTableName, eventFilterKey) + { + return ((this.tableName === eventTableName) && (this.localFilterKey === eventFilterKey)); + }, + watchForUpdateEvent(event) + { + if(this.checkEventIsValid(event.detail.tableName ?? '', event.detail.filterKey ?? '')) + { + let eventPillItem = event.detail.pillItem ?? ''; + if(!this.shouldRenderAsHTML) + { + eventPillItem = this.removeHTMLTags(eventPillItem); + } + + if(eventPillItem != "") + { + if(this.isExternalFilter) + { + let filterPillValues = this.externalFilterPillsVals[this.localFilterKey]; + + filterPillValues.push(eventPillItem); + this.updatePillValues(filterPillValues); + } + else + { + this.updatePillValues(eventPillItem); + } + } + } + }, + updatePillValues(filterPillValues) + { + this.pillValues = filterPillValues; + this.displayString = this.generateLocalFilterPillImplodedValues(filterPillValues); + this.updatePillHasValues(); + + return this.displayString; + }, + updatePillHasValues() + { + this.pillHasValues = (this.displayString.length > 0); + }, + init() + { + this.localFilterKey = this.localData['filterKey'] ?? 'unknown'; + this.localFilterTitle = this.localData['filterPillTitle'] ?? 'Unknown'; + this.pillsSeparator = this.localData['separator'] ?? ','; + this.shouldWatchPillValues = Boolean(this.localData['watchForEvents'] ?? 0); + this.isExternalFilter = Boolean(this.localData['isAnExternalLivewireFilter'] ?? 0); + this.shouldRenderAsHTML = Boolean(this.localData['renderPillsAsHtml'] ?? 0); + this.pillValues = this.localData['pillValues'] ?? null; + + this.$nextTick(() => { + if(this.isExternalFilter) + { + this.updatePillValues(this.externalFilterPillsVals[this.localFilterKey]); + } + else + { + this.updatePillValues(this.pillValues); + } + }); + if(this.isExternalFilter && this.shouldWatchPillValues) + { + this.$watch('externalFilterPillsVals.'+this.localFilterKey, filterPillValues => { + this.updatePillValues(filterPillValues); + }); + } + } + })); + +} + +export default filterPills; \ No newline at end of file diff --git a/resources/js/partials/core/table.js b/resources/js/partials/core/table.js new file mode 100644 index 000000000..7bf06dd39 --- /dev/null +++ b/resources/js/partials/core/table.js @@ -0,0 +1,173 @@ +/*jshint esversion: 6 */ + +function table() { + Alpine.data('laravellivewiretable', (wire) => ({ + tableId: '', + showBulkActionsAlpine: false, + primaryKeyName: '', + shouldBeDisplayed: wire.entangle('shouldBeDisplayed'), + tableName: wire.entangle('tableName'), + dataTableFingerprint: wire.entangle('dataTableFingerprint'), + listeners: [], + paginationCurrentCount: wire.entangle('paginationCurrentCount'), + paginationTotalItemCount: wire.entangle('paginationTotalItemCount'), + paginationCurrentItems: wire.entangle('paginationCurrentItems'), + selectedItems: wire.entangle('selected'), + selectAllStatus: wire.entangle('selectAll'), + selectedAllOnPage: false, + delaySelectAll: wire.entangle('delaySelectAll'), + hideBulkActionsWhenEmpty: wire.entangle('hideBulkActionsWhenEmpty'), + reorderEnabled: false, + defaultReorderColumn: wire.entangle('defaultReorderColumn'), + reorderStatus: wire.entangle('reorderStatus'), + currentlyReorderingStatus: wire.entangle('currentlyReorderingStatus'), + hideReorderColumnUnlessReorderingStatus: wire.entangle('hideReorderColumnUnlessReorderingStatus'), + reorderDisplayColumn: wire.entangle('reorderDisplayColumn'), + newSelectCount: 0, + indeterminateCheckbox: false, + bulkActionHeaderChecked: false, + currentOrderOfItems: null, + updateOrderOfItems(items) { + this.currentOrderOfItems = items; + }, + storeOrderedItems() { + wire.storeReorder(this.currentOrderOfItems) + }, + stripLivewireTags(data) { + let localHtml = data.innerHTML; + localHtml = localHtml.replace('','') + .replace('','') + .trim(); + return localHtml; + }, + removeHTMLTags(htmlString) { + // Create a new DOMParser instance + const parser = new DOMParser(); + // Parse the HTML string + let doc = parser.parseFromString(htmlString, 'text/html'); + // Extract text content + let textContent = doc.body.innerText || ""; + // Trim whitespace + let trimmedContent = textContent.trim(); + + return trimmedContent; + }, + reorderToggle() { + if (this.currentlyReorderingStatus) { + wire.disableReordering(); + } + else { + if (this.hideReorderColumnUnlessReorderingStatus) { + this.reorderDisplayColumn = true; + } + wire.enableReordering(); + } + }, + cancelReorder() { + if (this.hideReorderColumnUnlessReorderingStatus) { + this.reorderDisplayColumn = false; + } + + wire.disableReordering(); + }, + toggleSelectAll() { + if (!this.showBulkActionsAlpine) { + return; + } + + if (this.paginationTotalItemCount === this.selectedItems.length) { + this.clearSelected(); + this.selectAllStatus = false; + } else { + if (this.delaySelectAll) + { + this.setAllItemsSelected(); + } + else + { + this.setAllSelected(); + } + } + }, + setAllItemsSelected() { + if (!this.showBulkActionsAlpine) { + return; + } + this.selectAllStatus = true; + this.selectAllOnPage(); + }, + setAllSelected() { + if (!this.showBulkActionsAlpine) { + return; + } + if (this.delaySelectAll) + { + this.selectedAllOnPage = true; + this.selectAllStatus = true; + this.selectAllOnPage(); + } + else + { + wire.setAllSelected(); + } + }, + clearSelected() { + if (!this.showBulkActionsAlpine) { + return; + } + this.selectAllStatus = false; + this.selectedAllOnPage = false; + wire.clearSelected(); + }, + selectAllOnPage() { + if (!this.showBulkActionsAlpine) { + return; + } + this.selectedAllOnPage = true; + let tempSelectedItems = this.selectedItems; + const iterator = this.paginationCurrentItems.values(); + for (const value of iterator) { + tempSelectedItems.push(value.toString()); + } + this.selectedItems = [...new Set(tempSelectedItems)]; + }, + setTableId(tableId) + { + this.tableId = tableId; + }, + setAlpineBulkActions(showBulkActionsAlpine) + { + this.showBulkActionsAlpine = showBulkActionsAlpine; + }, + setPrimaryKeyName(primaryKeyName) + { + this.primaryKeyName = primaryKeyName; + }, + showTable(event) + { + let eventTableName = event.detail.tableName ?? ''; + let eventTableFingerprint = event.detail.tableFingerpint ?? ''; + + if (((eventTableName ?? '') != '' && eventTableName === this.tableName) || (eventTableFingerprint != '' && eventTableFingerpint === this.dataTableFingerprint)) { + this.shouldBeDisplayed = true; + } + }, + hideTable(event) + { + let eventTableName = event.detail.tableName ?? ''; + let eventTableFingerprint = event.detail.tableFingerpint ?? ''; + + if ((eventTableName != '' && eventTableName === this.tableName) || (eventTableFingerprint != '' && eventTableFingerpint === this.dataTableFingerprint)) { + this.shouldBeDisplayed = false; + } + }, + destroy() { + this.listeners.forEach((listener) => { + listener(); + }); + }, + })); +} +export default table; \ No newline at end of file diff --git a/resources/js/partials/core/table.min.js b/resources/js/partials/core/table.min.js new file mode 100644 index 000000000..09bf69208 --- /dev/null +++ b/resources/js/partials/core/table.min.js @@ -0,0 +1,100 @@ +/*jshint esversion: 6 */ + +function table() { + Alpine.data('laravellivewiretable', (wire) => ({ + tableId: '', + paginationTotalItemCount: wire.entangle('paginationTotalItemCount'), + selectedItems: wire.entangle('selected'), + hideBulkActionsWhenEmpty: wire.entangle('hideBulkActionsWhenEmpty'), + indeterminateCheckbox: false, + primaryKeyName: '', + shouldBeDisplayed: wire.entangle('shouldBeDisplayed'), + tableName: wire.entangle('tableName'), + dataTableFingerprint: wire.entangle('dataTableFingerprint'), + listeners: [], + reorderEnabled: false, + defaultReorderColumn: wire.entangle('defaultReorderColumn'), + reorderStatus: wire.entangle('reorderStatus'), + currentlyReorderingStatus: wire.entangle('currentlyReorderingStatus'), + hideReorderColumnUnlessReorderingStatus: wire.entangle('hideReorderColumnUnlessReorderingStatus'), + reorderDisplayColumn: wire.entangle('reorderDisplayColumn'), + currentOrderOfItems: null, + stripLivewireTags(data) { + let localHtml = data.innerHTML; + localHtml = localHtml.replace('','') + .replace('','') + .trim(); + return localHtml; + }, + removeHTMLTags(htmlString) { + // Create a new DOMParser instance + const parser = new DOMParser(); + // Parse the HTML string + let doc = parser.parseFromString(htmlString, 'text/html'); + // Extract text content + let textContent = doc.body.innerText || ""; + // Trim whitespace + let trimmedContent = textContent.trim(); + + return trimmedContent; + }, + reorderToggle() { + if (this.currentlyReorderingStatus) { + wire.disableReordering(); + } + else { + if (this.hideReorderColumnUnlessReorderingStatus) { + this.reorderDisplayColumn = true; + } + wire.enableReordering(); + } + }, + cancelReorder() { + if (this.hideReorderColumnUnlessReorderingStatus) { + this.reorderDisplayColumn = false; + } + + wire.disableReordering(); + }, + updateOrderOfItems(items) { + this.currentOrderOfItems = items; + }, + storeOrderedItems() { + wire.storeReorder(this.currentOrderOfItems) + }, + setTableId(tableId) + { + this.tableId = tableId; + }, + setPrimaryKeyName(primaryKeyName) + { + this.primaryKeyName = primaryKeyName; + }, + showTable(event) + { + let eventTableName = event.detail.tableName ?? ''; + let eventTableFingerprint = event.detail.tableFingerpint ?? ''; + + if (((eventTableName ?? '') != '' && eventTableName === this.tableName) || (eventTableFingerprint != '' && eventTableFingerpint === this.dataTableFingerprint)) { + this.shouldBeDisplayed = true; + } + }, + hideTable(event) + { + let eventTableName = event.detail.tableName ?? ''; + let eventTableFingerprint = event.detail.tableFingerpint ?? ''; + + if ((eventTableName != '' && eventTableName === this.tableName) || (eventTableFingerprint != '' && eventTableFingerpint === this.dataTableFingerprint)) { + this.shouldBeDisplayed = false; + } + }, + destroy() { + this.listeners.forEach((listener) => { + listener(); + }); + } + })); +} +export default table; \ No newline at end of file diff --git a/resources/js/partials/tableWrapper.js b/resources/js/partials/core/tableWrap.js similarity index 93% rename from resources/js/partials/tableWrapper.js rename to resources/js/partials/core/tableWrap.js index 9bf1aaaeb..e926aa6e9 100644 --- a/resources/js/partials/tableWrapper.js +++ b/resources/js/partials/core/tableWrap.js @@ -1,10 +1,9 @@ /*jshint esversion: 6 */ -function tableWrapper() { +function tableWrap() { Alpine.data('tableWrapper', (wire, showBulkActionsAlpine) => ({ + shouldBeDisplayed: wire.entangle('shouldBeDisplayed'), listeners: [], - childElementOpen: false, - filtersOpen: wire.entangle('filterSlideDownDefaultVisible'), paginationCurrentCount: wire.entangle('paginationCurrentCount'), paginationTotalItemCount: wire.entangle('paginationTotalItemCount'), paginationCurrentItems: wire.entangle('paginationCurrentItems'), @@ -77,6 +76,7 @@ function tableWrapper() { }); } })); + } -export default tableWrapper; \ No newline at end of file +export default tableWrap; \ No newline at end of file diff --git a/resources/js/partials/core/tableWrap.min.js b/resources/js/partials/core/tableWrap.min.js new file mode 100644 index 000000000..e926aa6e9 --- /dev/null +++ b/resources/js/partials/core/tableWrap.min.js @@ -0,0 +1,82 @@ +/*jshint esversion: 6 */ + +function tableWrap() { + Alpine.data('tableWrapper', (wire, showBulkActionsAlpine) => ({ + shouldBeDisplayed: wire.entangle('shouldBeDisplayed'), + listeners: [], + paginationCurrentCount: wire.entangle('paginationCurrentCount'), + paginationTotalItemCount: wire.entangle('paginationTotalItemCount'), + paginationCurrentItems: wire.entangle('paginationCurrentItems'), + selectedItems: wire.entangle('selected'), + selectAllStatus: wire.entangle('selectAll'), + delaySelectAll: wire.entangle('delaySelectAll'), + hideBulkActionsWhenEmpty: wire.entangle('hideBulkActionsWhenEmpty'), + toggleSelectAll() { + if (!showBulkActionsAlpine) { + return; + } + + if (this.paginationTotalItemCount === this.selectedItems.length) { + this.clearSelected(); + this.selectAllStatus = false; + } else { + if (this.delaySelectAll) + { + this.setAllItemsSelected(); + } + else + { + this.setAllSelected(); + } + } + }, + setAllItemsSelected() { + if (!showBulkActionsAlpine) { + return; + } + this.selectAllStatus = true; + this.selectAllOnPage(); + }, + setAllSelected() { + if (!showBulkActionsAlpine) { + return; + } + if (this.delaySelectAll) + { + this.selectAllStatus = true; + this.selectAllOnPage(); + } + else + { + wire.setAllSelected(); + } + }, + clearSelected() { + if (!showBulkActionsAlpine) { + return; + } + this.selectAllStatus = false; + wire.clearSelected(); + }, + selectAllOnPage() { + if (!showBulkActionsAlpine) { + return; + } + + let tempSelectedItems = this.selectedItems; + const iterator = this.paginationCurrentItems.values(); + for (const value of iterator) { + tempSelectedItems.push(value.toString()); + } + this.selectedItems = [...new Set(tempSelectedItems)]; + }, + destroy() { + this.listeners.forEach((listener) => { + listener(); + }); + } + })); + +} + +export default tableWrap; \ No newline at end of file diff --git a/resources/js/partials/core/tools.js b/resources/js/partials/core/tools.js new file mode 100644 index 000000000..7014c848a --- /dev/null +++ b/resources/js/partials/core/tools.js @@ -0,0 +1,88 @@ +/*jshint esversion: 6 */ + +function tools() { + Alpine.data('tools', (wire) => ({ + filtersOpen: wire.entangle('filterConfiguration.filterSlideDownDefaultVisible'), + externalFilterPillsVals: wire.entangle('externalFilterPillsValues'), + internalFilterPillsVals: wire.entangle('internalFilterPillsVals'), + showFilterPillLabel: [], + filterPillsSeparator: ', ', + showFilterPillsSection: true, + resetSpecificFilter(filterKey) + { + console.log("tools - resetSpecificFilter"); + this.externalFilterPillsVals[filterKey] = []; + wire.call('resetFilter',filterKey); + }, + resetAllFilters() + { + this.externalFilterPillsVals = []; + wire.call('setFilterDefaults'); + }, + setInternalFilterPillVal(filterKey, filterValues) + { + + if(typeof(filterValues) !== 'undefined') + { + this.internalFilterPillsVals[filterKey] = filterValues; + } + }, + syncExternalFilterPillsValues(filterKey,filterValues) { + this.externalFilterPillsVals[filterKey] = filterValues; + this.showFilterPillLabel[filterKey] = this.getFilterPillsLength(filterKey); + }, + getFilterPillsLength(filterKey) + { + return Object.keys(this.externalFilterPillsVals[filterKey]).length ?? 0; + }, + showFilterPillsValue(filterKey, filterPillValue) + { + if(typeof(filterPillValue) !== "undefined") + { + this.externalFilterPillsVals[filterKey] = filterPillValue; + } + else + { + this.externalFilterPillsVals[filterKey] = null; + } + + }, + setFilterPillsLength(externalFilterPillsValues) + { + let filterValueLength = 0; + if (typeof(externalFilterPillsValues) !== 'undefined') + { + filterValueLength = Object.keys(externalFilterPillsValues).length ?? 0; + } + else + { + filterValueLength = 0; + } + return filterValueLength; + }, + showFilterPillsLabel(filterKey) + { + let pillsLength = this.getFilterPillsLength(filterKey); + return (this.getFilterPillsLength(filterKey) > 0); + }, + getFilterPillImplodedValues(filterKey, separator) + { + let filterPillValues = this.externalFilterPillsVals[filterKey]; + if(filterPillValues !== 'undefined') + { + let joinedValues = filterPillValues.join(separator); + + return joinedValues; + } + + return ''; + }, + showFilterPillsSeparator(filterKey,index) + { + return ((index+1) < (this.getFilterPillsLength(filterKey))); + } + + })); +} + +export default tools; \ No newline at end of file diff --git a/resources/js/partials/core/tools.min.js b/resources/js/partials/core/tools.min.js new file mode 100644 index 000000000..3b6ef4619 --- /dev/null +++ b/resources/js/partials/core/tools.min.js @@ -0,0 +1,89 @@ +/*jshint esversion: 6 */ + +function tools() { + Alpine.data('tools', (wire) => ({ + filtersOpen: wire.entangle('filterConfiguration.filterSlideDownDefaultVisible'), + externalFilterPillsVals: wire.entangle('externalFilterPillsValues'), + internalFilterPillsVals: wire.entangle('internalFilterPillsVals'), + showFilterPillLabel: [], + filterPillsSeparator: ', ', + showFilterPillsSection: true, + resetSpecificFilter(filterKey) + { + console.log("tools - resetSpecificFilter"); + this.internalFilterPillsVals[filterKey] = []; + this.externalFilterPillsVals[filterKey] = []; + wire.call('resetFilter',filterKey); + }, + resetAllFilters() + { + this.externalFilterPillsVals = []; + wire.call('setFilterDefaults'); + }, + setInternalFilterPillVal(filterKey, filterValues) + { + + if(typeof(filterValues) !== 'undefined') + { + this.internalFilterPillsVals[filterKey] = filterValues; + } + }, + syncExternalFilterPillsValues(filterKey,filterValues) { + this.externalFilterPillsVals[filterKey] = filterValues; + this.showFilterPillLabel[filterKey] = this.getFilterPillsLength(filterKey); + }, + getFilterPillsLength(filterKey) + { + return Object.keys(this.externalFilterPillsVals[filterKey]).length ?? 0; + }, + showFilterPillsValue(filterKey, filterPillValue) + { + if(typeof(filterPillValue) !== "undefined") + { + this.externalFilterPillsVals[filterKey] = filterPillValue; + } + else + { + this.externalFilterPillsVals[filterKey] = null; + } + + }, + setFilterPillsLength(externalFilterPillsValues) + { + let filterValueLength = 0; + if (typeof(externalFilterPillsValues) !== 'undefined') + { + filterValueLength = Object.keys(externalFilterPillsValues).length ?? 0; + } + else + { + filterValueLength = 0; + } + return filterValueLength; + }, + showFilterPillsLabel(filterKey) + { + let pillsLength = this.getFilterPillsLength(filterKey); + return (this.getFilterPillsLength(filterKey) > 0); + }, + getFilterPillImplodedValues(filterKey, separator) + { + let filterPillValues = this.externalFilterPillsVals[filterKey]; + if(filterPillValues !== 'undefined') + { + let joinedValues = filterPillValues.join(separator); + + return joinedValues; + } + + return ''; + }, + showFilterPillsSeparator(filterKey,index) + { + return ((index+1) < (this.getFilterPillsLength(filterKey))); + } + + })); +} + +export default tools; \ No newline at end of file diff --git a/resources/js/partials/filter-boolean.js b/resources/js/partials/filter-boolean.js index 1f49ca461..117c4d2b6 100644 --- a/resources/js/partials/filter-boolean.js +++ b/resources/js/partials/filter-boolean.js @@ -1,7 +1,7 @@ document.addEventListener('alpine:init', () => { Alpine.data('booleanFilter', (wire,filterKey,tableName,defaultValue) => ({ switchOn: false, - value: wire.entangle('filterComponents.'+filterKey).live, + value: wire.entangle('appliedFilters.'+filterKey).live, init() { this.switchOn = false; if (typeof this.value !== 'undefined') { diff --git a/resources/js/partials/filter-boolean.min.js b/resources/js/partials/filter-boolean.min.js index d53fb4f35..227082694 100644 --- a/resources/js/partials/filter-boolean.min.js +++ b/resources/js/partials/filter-boolean.min.js @@ -1 +1 @@ -document.addEventListener('alpine:init',()=>Alpine.data('booleanFilter',(a,b,c,d)=>({switchOn:!1,value:a.entangle(`filterComponents.${b}`).live,init(){this.switchOn=!1;this.value!==void 0&&(this.switchOn=!!+this.value);this.listeners.push(Livewire.on('filter-was-set',A=>{(A.tableName==c&&A.filterKey==b)&&(this.switchOn=A.value??d)}))}}))); +document.addEventListener('alpine:init',()=>Alpine.data('booleanFilter',(a,b,c,d)=>({switchOn:!1,value:a.entangle(`appliedFilters.${b}`).live,init(){this.switchOn=!1;this.value!==void 0&&(this.switchOn=!!+this.value);this.listeners.push(Livewire.on('filter-was-set',A=>{(A.tableName==c&&A.filterKey==b)&&(this.switchOn=A.value??d)}))}}))); diff --git a/resources/js/partials/filter-date-range.js b/resources/js/partials/filter-date-range.js index aa630347e..f4d3c5612 100644 --- a/resources/js/partials/filter-date-range.js +++ b/resources/js/partials/filter-date-range.js @@ -2,7 +2,7 @@ function fpf() { Alpine.data('flatpickrFilter', (wire, filterKey, filterConfig, refLocation, locale) => ({ - wireValues: wire.entangle('filterComponents.' + filterKey), + wireValues: wire.entangle('availableFilters.' + filterKey), flatpickrInstance: flatpickr(refLocation, { mode: 'range', altFormat: filterConfig['altFormat'] ?? "F j, Y", @@ -36,7 +36,7 @@ function fpf() { window.childElementOpen = false; window.filterPopoverOpen = false; wireDateArray = { 'minDate': dates[0], 'maxDate': (typeof dates[2] === "undefined") ? dates[0] : dates[2] }; - wire.set('filterComponents.' + filterKey, wireDateArray); + wire.set('appliedFilters.' + filterKey, wireDateArray); } }, diff --git a/resources/js/partials/filter-date-range.min.js b/resources/js/partials/filter-date-range.min.js index e789c0b05..e498c642c 100644 --- a/resources/js/partials/filter-date-range.min.js +++ b/resources/js/partials/filter-date-range.min.js @@ -1 +1,68 @@ -function fpf(){Alpine.data("flatpickrFilter",(e,t,a,n,l)=>({wireValues:e.entangle("filterComponents."+t),flatpickrInstance:flatpickr(n,{mode:"range",altFormat:a.altFormat??"F j, Y",altInput:a.altInput??!1,allowInput:a.allowInput??!1,allowInvalidPreload:a.allowInvalidPreload??!0,ariaDateFormat:a.ariaDateFormat??"F j, Y",clickOpens:!0,dateFormat:a.dateFormat??"Y-m-d",defaultDate:a.defaultDate??null,defaultHour:a.defaultHour??12,defaultMinute:a.defaultMinute??0,enableTime:a.enableTime??!1,enableSeconds:a.enableSeconds??!1,hourIncrement:a.hourIncrement??1,locale:a.locale??"en",minDate:a.earliestDate??null,maxDate:a.latestDate??null,minuteIncrement:a.minuteIncrement??5,shorthandCurrentMonth:a.shorthandCurrentMonth??!1,time_24hr:a.time_24hr??!1,weekNumbers:a.weekNumbers??!1,onOpen:function(){window.childElementOpen=!0},onChange:function(a,n,l){if(a.length>1){var i=n.split(" "),r={};window.childElementOpen=!1,window.filterPopoverOpen=!1,r={minDate:i[0],maxDate:void 0===i[2]?i[0]:i[2]},e.set("filterComponents."+t,r)}}}),setupWire(){if(void 0!==this.wireValues){if(void 0!==this.wireValues.minDate&&void 0!==this.wireValues.maxDate){let e=[this.wireValues.minDate,this.wireValues.maxDate];this.flatpickrInstance.setDate(e)}else this.flatpickrInstance.setDate([])}else this.flatpickrInstance.setDate([])},init(){this.setupWire(),this.$watch("wireValues",e=>this.setupWire())}}))}export default fpf; \ No newline at end of file +/*jshint esversion: 6 */ + +function fpf() { + Alpine.data('flatpickrFilter', (wire, filterKey, filterConfig, refLocation, locale) => ({ + wireValues: wire.entangle('availableFilters.' + filterKey), + flatpickrInstance: flatpickr(refLocation, { + mode: 'range', + altFormat: filterConfig['altFormat'] ?? "F j, Y", + altInput: filterConfig['altInput'] ?? false, + allowInput: filterConfig['allowInput'] ?? false, + allowInvalidPreload: filterConfig['allowInvalidPreload'] ?? true, + ariaDateFormat: filterConfig['ariaDateFormat'] ?? "F j, Y", + clickOpens: true, + dateFormat: filterConfig['dateFormat'] ?? "Y-m-d", + defaultDate: filterConfig['defaultDate'] ?? null, + defaultHour: filterConfig['defaultHour'] ?? 12, + defaultMinute: filterConfig['defaultMinute'] ?? 0, + enableTime: filterConfig['enableTime'] ?? false, + enableSeconds: filterConfig['enableSeconds'] ?? false, + hourIncrement: filterConfig['hourIncrement'] ?? 1, + locale: filterConfig['locale'] ?? 'en', + minDate: filterConfig['earliestDate'] ?? null, + maxDate: filterConfig['latestDate'] ?? null, + minuteIncrement: filterConfig['minuteIncrement'] ?? 5, + shorthandCurrentMonth: filterConfig['shorthandCurrentMonth'] ?? false, + time_24hr: filterConfig['time_24hr'] ?? false, + weekNumbers: filterConfig['weekNumbers'] ?? false, + onOpen: function () { + window.childElementOpen = true; + }, + onChange: function (selectedDates, dateStr, instance) { + if (selectedDates.length > 1) { + var dates = dateStr.split(' '); + + var wireDateArray = {}; + window.childElementOpen = false; + window.filterPopoverOpen = false; + wireDateArray = { 'minDate': dates[0], 'maxDate': (typeof dates[2] === "undefined") ? dates[0] : dates[2] }; + wire.set('appliedFilters.' + filterKey, wireDateArray); + } + + }, + }), + setupWire() { + if (this.wireValues !== undefined) { + if (this.wireValues.minDate !== undefined && this.wireValues.maxDate !== undefined) { + let initialDateArray = [this.wireValues.minDate, this.wireValues.maxDate]; + this.flatpickrInstance.setDate(initialDateArray); + } + else { + this.flatpickrInstance.setDate([]); + } + } + else { + this.flatpickrInstance.setDate([]); + } + }, + init() { + this.setupWire(); + this.$watch('wireValues', value => this.setupWire()); + } + + + })); + +} + +export default fpf; \ No newline at end of file diff --git a/resources/js/partials/filter-number-range.js b/resources/js/partials/filter-number-range.js index bf50c65ba..d70a6dd1b 100644 --- a/resources/js/partials/filter-number-range.js +++ b/resources/js/partials/filter-number-range.js @@ -1,7 +1,7 @@ /*jshint esversion: 6 */ export function nrf() { Alpine.data('numberRangeFilter', (wire, filterKey, parentElementPath, filterConfig, childElementRoot) => ({ - allFilters: wire.entangle('filterComponents', false), + allFilters: wire.entangle('appliedFilters', false), originalMin: 0, originalMax: 100, filterMin: 0, @@ -9,7 +9,7 @@ export function nrf() { currentMin: 0, currentMax: 100, hasUpdate: false, - wireValues: wire.entangle('filterComponents.' + filterKey, false), + wireValues: wire.entangle('appliedFilters.' + filterKey, false), defaultMin: filterConfig['minRange'], defaultMax: filterConfig['maxRange'], restrictUpdates: false, @@ -60,7 +60,7 @@ export function nrf() { if (this.hasUpdate) { this.hasUpdate = false; this.wireValues = { 'min': this.filterMin, 'max': this.filterMax }; - wire.set('filterComponents.' + filterKey, this.wireValues); + wire.set('appliedFilters.' + filterKey, this.wireValues); } }, init() { diff --git a/resources/js/partials/filter-number-range.min.js b/resources/js/partials/filter-number-range.min.js index 3c9aa3d13..de0aa34b1 100644 --- a/resources/js/partials/filter-number-range.min.js +++ b/resources/js/partials/filter-number-range.min.js @@ -1 +1 @@ -function a(){Alpine.data('numberRangeFilter',(A,b,c,d,e)=>({allFilters:A.entangle('filterComponents',!1),originalMin:0,originalMax:100,filterMin:0,filterMax:100,currentMin:0,currentMax:100,hasUpdate:!1,wireValues:A.entangle(`filterComponents.${b}`,!1),defaultMin:d['minRange'],defaultMax:d['maxRange'],restrictUpdates:!1,initialiseStyles(){let _=document.getElementById(c);_.style.setProperty('--value-a',this.wireValues['min']??this.filterMin);_.style.setProperty('--text-value-a',JSON.stringify(this.wireValues['min']??this.filterMin));_.style.setProperty('--value-b',this.wireValues['max']??this.filterMax);_.style.setProperty('--text-value-b',JSON.stringify(this.wireValues['max']??this.filterMax))},updateStyles(B,C){let _c=document.getElementById(c);_c.style.setProperty('--value-a',B);_c.style.setProperty('--text-value-a',JSON.stringify(B));_c.style.setProperty('--value-b',C);_c.style.setProperty('--text-value-b',JSON.stringify(C))},setupWire(){this.wireValues!==void 0?(this.filterMin=this.originalMin=(this.wireValues['min']!==void 0)?this.wireValues['min']:this.defaultMin,this.filterMax=this.originalMax=(this.wireValues['max']!==void 0)?this.wireValues['max']:this.defaultMax):(this.filterMin=this.originalMin=this.defaultMin,this.filterMax=this.originalMax=this.defaultMax);this.updateStyles(this.filterMin,this.filterMax)},allowUpdates(){this.updateWire()},updateWire(){let _a=parseInt(this.filterMin);let _b=parseInt(this.filterMax);if(_a!=this.originalMin||_b!=this.originalMax){_b<_a&&(this.filterMin=_b,this.filterMax=_a);this.hasUpdate=!0;this.originalMin=_a;this.originalMax=_b}this.updateStyles(this.filterMin,this.filterMax)},updateWireable(){this.hasUpdate&&(this.hasUpdate=!1,this.wireValues={'min':this.filterMin,'max':this.filterMax},A.set(`filterComponents.${b}`,this.wireValues))},init(){this.initialiseStyles();this.setupWire();this.$watch('allFilters',value=>this.setupWire())}}))}export{a as nrf};export default a; +function a(){Alpine.data('numberRangeFilter',(A,b,c,d,e)=>({allFilters:A.entangle('appliedFilters',!1),originalMin:0,originalMax:100,filterMin:0,filterMax:100,currentMin:0,currentMax:100,hasUpdate:!1,wireValues:A.entangle(`appliedFilters.${b}`,!1),defaultMin:d['minRange'],defaultMax:d['maxRange'],restrictUpdates:!1,initialiseStyles(){let _=document.getElementById(c);_.style.setProperty('--value-a',this.wireValues['min']??this.filterMin);_.style.setProperty('--text-value-a',JSON.stringify(this.wireValues['min']??this.filterMin));_.style.setProperty('--value-b',this.wireValues['max']??this.filterMax);_.style.setProperty('--text-value-b',JSON.stringify(this.wireValues['max']??this.filterMax))},updateStyles(B,C){let _c=document.getElementById(c);_c.style.setProperty('--value-a',B);_c.style.setProperty('--text-value-a',JSON.stringify(B));_c.style.setProperty('--value-b',C);_c.style.setProperty('--text-value-b',JSON.stringify(C))},setupWire(){this.wireValues!==void 0?(this.filterMin=this.originalMin=(this.wireValues['min']!==void 0)?this.wireValues['min']:this.defaultMin,this.filterMax=this.originalMax=(this.wireValues['max']!==void 0)?this.wireValues['max']:this.defaultMax):(this.filterMin=this.originalMin=this.defaultMin,this.filterMax=this.originalMax=this.defaultMax);this.updateStyles(this.filterMin,this.filterMax)},allowUpdates(){this.updateWire()},updateWire(){let _a=parseInt(this.filterMin);let _b=parseInt(this.filterMax);if(_a!=this.originalMin||_b!=this.originalMax){_b<_a&&(this.filterMin=_b,this.filterMax=_a);this.hasUpdate=!0;this.originalMin=_a;this.originalMax=_b}this.updateStyles(this.filterMin,this.filterMax)},updateWireable(){this.hasUpdate&&(this.hasUpdate=!1,this.wireValues={'min':this.filterMin,'max':this.filterMax},A.set(`appliedFilters.${b}`,this.wireValues))},init(){this.initialiseStyles();this.setupWire();this.$watch('allFilters',value=>this.setupWire())}}))}export{a as nrf};export default a; diff --git a/resources/js/partials/filters/boolean.js b/resources/js/partials/filters/boolean.js new file mode 100644 index 000000000..268fa73d8 --- /dev/null +++ b/resources/js/partials/filters/boolean.js @@ -0,0 +1,76 @@ +/*jshint esversion: 6 */ + +function newBf() { + + Alpine.data('newBooleanFilter', (wire,filterKey,tableName,defaultValue) => ({ + booleanFilterKey: filterKey, + switchOn: false, + value: false, + toggleStatus() + { + let tempValue = Boolean(Number(wire.get('appliedFilters.'+this.booleanFilterKey) ?? this.value)); + let newBoolean = !tempValue; + this.switchOn = this.value = newBoolean; + return Number(newBoolean); + }, + toggleStatusWithUpdate() + { + let newValue = this.toggleStatus(); + wire.set('appliedFilters.'+this.booleanFilterKey, newValue); + }, + toggleStatusWithReset() + { + let newValue = this.toggleStatus(); + wire.call('resetFilter',this.booleanFilterKey); + }, + setSwitchOn(val) + { + let number = Number(val ?? 0); + this.switchOn = Boolean(number); + }, + init() { + + this.$nextTick(() => { + this.value = wire.get('appliedFilters.'+this.booleanFilterKey) ?? defaultValue; + console.log('This Value NextTick: '+this.value ?? 0); + this.setSwitchOn(this.value ?? 0); + }); + + this.listeners.push( + Livewire.on('filter-was-set', (detail) => { + console.log('filter-was-set-in-boolean'); + console.log('detail'); + console.log(detail); + + if(detail.tableName == tableName && detail.filterKey == this.booleanFilterKey) { + console.log('applies-to-this-table'); + console.log('typeof'); + console.log(typeof detail.value); + console.log(detail.value); + + if(typeof detail.value === null || detail.value === null) + { + console.log("Null Setting to False"); + this.value = this.switchOn = false; + } + else + { + let number = Number(detail.value ?? 0); + let boolVal = Boolean(number); + console.log("Setting to "+boolVal); + this.value = this.switchOn = boolVal; + this.setSwitchOn(number); + } + } + }) + ); + }, + destroy() { + this.listeners.forEach((listener) => { + listener(); + }); + }, + })); +} + +export default newBf; \ No newline at end of file diff --git a/resources/js/partials/filters/fpf.js b/resources/js/partials/filters/fpf.js new file mode 100644 index 000000000..0ea5cccf4 --- /dev/null +++ b/resources/js/partials/filters/fpf.js @@ -0,0 +1,72 @@ +/*jshint esversion: 6 */ + +function fpf() { + Alpine.data('flatpickrFilter', (wire, filterKey, filterConfig, refLocation, locale) => ({ + wireValues: wire.get('appliedFilters.' + filterKey) ? wire.entangle('appliedFilters.' + filterKey) : wire.entangle('availableFilters.' + filterKey), + flatpickrInstance: flatpickr(refLocation, { + mode: 'range', + altFormat: filterConfig['altFormat'] ?? "F j, Y", + altInput: filterConfig['altInput'] ?? false, + allowInput: filterConfig['allowInput'] ?? false, + allowInvalidPreload: filterConfig['allowInvalidPreload'] ?? true, + ariaDateFormat: filterConfig['ariaDateFormat'] ?? "F j, Y", + clickOpens: true, + dateFormat: filterConfig['dateFormat'] ?? "Y-m-d", + defaultDate: filterConfig['defaultDate'] ?? null, + defaultHour: filterConfig['defaultHour'] ?? 12, + defaultMinute: filterConfig['defaultMinute'] ?? 0, + enableTime: filterConfig['enableTime'] ?? false, + enableSeconds: filterConfig['enableSeconds'] ?? false, + hourIncrement: filterConfig['hourIncrement'] ?? 1, + locale: filterConfig['locale'] ?? 'en', + minDate: filterConfig['earliestDate'] ?? null, + maxDate: filterConfig['latestDate'] ?? null, + minuteIncrement: filterConfig['minuteIncrement'] ?? 5, + shorthandCurrentMonth: filterConfig['shorthandCurrentMonth'] ?? false, + time_24hr: filterConfig['time_24hr'] ?? false, + weekNumbers: filterConfig['weekNumbers'] ?? false, + onOpen: function () { + window.childElementOpen = true; + }, + onChange: function (selectedDates, dateStr, instance) { + if (selectedDates.length > 1) { + var dates = dateStr.split(' '); + var wireDateArray = {}; + window.childElementOpen = false; + window.filterPopoverOpen = false; + wireDateArray = { 'minDate': dates[0], 'maxDate': (typeof dates[2] === "undefined") ? dates[0] : dates[2] }; + wire.set('appliedFilters.' + filterKey, wireDateArray); + } + }, + }), + changedValue: function(value) { + if (value.length < 5) + { + this.flatpickrInstance.setDate([]); + wire.set('appliedFilters.' + filterKey, {}); + } + }, + setupWire() { + if (this.wireValues !== undefined) { + if (this.wireValues.minDate !== undefined && this.wireValues.maxDate !== undefined) { + let initialDateArray = [this.wireValues.minDate, this.wireValues.maxDate]; + this.flatpickrInstance.setDate(initialDateArray); + } + else { + this.flatpickrInstance.setDate([]); + } + } + else { + this.flatpickrInstance.setDate([]); + } + }, + init() { + this.setupWire(); + this.$watch('wireValues', value => this.setupWire()); + } + + + })); +} + +export default fpf; \ No newline at end of file diff --git a/resources/js/partials/filters/numberRange.js b/resources/js/partials/filters/numberRange.js new file mode 100644 index 000000000..f9dc12770 --- /dev/null +++ b/resources/js/partials/filters/numberRange.js @@ -0,0 +1,75 @@ +/*jshint esversion: 6 */ + +function nrF() { + Alpine.data('numberRangeFilter', (wire, filterKey, parentElementPath, filterConfig, childElementRoot) => ({ + allFilters: wire.entangle('appliedFilters', false), + originalMin: 0, + originalMax: 100, + filterMin: 0, + filterMax: 100, + currentMin: 0, + currentMax: 100, + hasUpdate: false, + wireValues: wire.entangle('appliedFilters.' + filterKey, false), + defaultMin: filterConfig['minRange'], + defaultMax: filterConfig['maxRange'], + restrictUpdates: false, + initialiseStyles() + { + let numRangeFilterContainer = document.getElementById(parentElementPath); + numRangeFilterContainer.style.setProperty('--value-a', this.wireValues['min'] ?? this.filterMin); + numRangeFilterContainer.style.setProperty('--text-value-a', JSON.stringify(this.wireValues['min'] ?? this.filterMin)); + numRangeFilterContainer.style.setProperty('--value-b', this.wireValues['max'] ?? this.filterMax); + numRangeFilterContainer.style.setProperty('--text-value-b', JSON.stringify(this.wireValues['max'] ?? this.filterMax)); + }, + updateStyles(filterMin, filterMax) { + let numRangeFilterContainer = document.getElementById(parentElementPath); + numRangeFilterContainer.style.setProperty('--value-a', filterMin); + numRangeFilterContainer.style.setProperty('--text-value-a', JSON.stringify(filterMin)); + numRangeFilterContainer.style.setProperty('--value-b', filterMax); + numRangeFilterContainer.style.setProperty('--text-value-b', JSON.stringify(filterMax)); + }, + setupWire() { + if (this.wireValues !== undefined) { + this.filterMin = this.originalMin = (this.wireValues['min'] !== undefined) ? this.wireValues['min'] : this.defaultMin; + this.filterMax = this.originalMax = (this.wireValues['max'] !== undefined) ? this.wireValues['max'] : this.defaultMax; + } else { + this.filterMin = this.originalMin = this.defaultMin; + this.filterMax = this.originalMax = this.defaultMax; + } + this.updateStyles(this.filterMin, this.filterMax); + }, + allowUpdates() { + this.updateWire(); + }, + updateWire() { + let tmpFilterMin = parseInt(this.filterMin); + let tmpFilterMax = parseInt(this.filterMax); + + if (tmpFilterMin != this.originalMin || tmpFilterMax != this.originalMax) { + if (tmpFilterMax < tmpFilterMin) { + this.filterMin = tmpFilterMax; + this.filterMax = tmpFilterMin; + } + this.hasUpdate = true; + this.originalMin = tmpFilterMin; + this.originalMax = tmpFilterMax; + } + this.updateStyles(this.filterMin,this.filterMax); + }, + updateWireable() { + if (this.hasUpdate) { + this.hasUpdate = false; + this.wireValues = { 'min': this.filterMin, 'max': this.filterMax }; + wire.set('appliedFilters.' + filterKey, this.wireValues); + } + }, + init() { + this.initialiseStyles(); + this.setupWire(); + this.$watch('allFilters', value => this.setupWire()); + }, + })); +} + +export default nrF; \ No newline at end of file diff --git a/resources/js/partials/reorder.js b/resources/js/partials/reorder.js deleted file mode 100644 index a6115025e..000000000 --- a/resources/js/partials/reorder.js +++ /dev/null @@ -1,147 +0,0 @@ -/*jshint esversion: 6 */ - -function tableReorder() { - Alpine.data('reorderFunction', (wire, tableID, primaryKeyName) => ({ - dragging: false, - reorderEnabled: false, - sourceID: '', - targetID: '', - evenRowClasses: '', - oddRowClasses: '', - currentlyHighlightedElement: '', - evenRowClassArray: {}, - oddRowClassArray: {}, - evenNotInOdd: {}, - oddNotInEven: {}, - orderedRows: [], - defaultReorderColumn: wire.get('defaultReorderColumn'), - reorderStatus: wire.get('reorderStatus'), - currentlyReorderingStatus: wire.entangle('currentlyReorderingStatus'), - hideReorderColumnUnlessReorderingStatus: wire.entangle('hideReorderColumnUnlessReorderingStatus'), - reorderDisplayColumn: wire.entangle('reorderDisplayColumn'), - dragStart(event) { - this.$nextTick(() => { this.setupEvenOddClasses() }); - - - this.sourceID = event.target.id; - event.dataTransfer.effectAllowed = 'move'; - event.dataTransfer.setData('text/plain', event.target.id); - event.target.classList.add("laravel-livewire-tables-dragging"); - }, - dragOverEvent(event) { - if (typeof this.currentlyHighlightedElement == 'object') { - this.currentlyHighlightedElement.classList.remove('laravel-livewire-tables-highlight-bottom', 'laravel-livewire-tables-highlight-top'); - } - let target = event.target.closest('tr'); - this.currentlyHighlightedElement = target; - - if (event.offsetY < (target.getBoundingClientRect().height / 2)) { - target.classList.add('laravel-livewire-tables-highlight-top'); - target.classList.remove('laravel-livewire-tables-highlight-bottom'); - } - else { - target.classList.remove('laravel-livewire-tables-highlight-top'); - target.classList.add('laravel-livewire-tables-highlight-bottom'); - } - }, - dragLeaveEvent(event) { - event.target.closest('tr').classList.remove('laravel-livewire-tables-highlight-bottom', 'laravel-livewire-tables-highlight-top'); - }, - dropEvent(event) { - if (typeof this.currentlyHighlightedElement == 'object') { - this.currentlyHighlightedElement.classList.remove('laravel-livewire-tables-highlight-bottom', 'laravel-livewire-tables-highlight-top'); - } - - let target = event.target.closest('tr'); - let parent = event.target.closest('tr').parentNode; - let element = document.getElementById(this.sourceID).closest('tr'); - element.classList.remove("laravel-livewire-table-dragging"); - let originalPosition = element.rowIndex; - let newPosition = target.rowIndex; - let table = document.getElementById(tableID); - let loopStart = originalPosition; - if (event.offsetY > (target.getBoundingClientRect().height / 2)) { - parent.insertBefore(element, target.nextSibling); - } - else { - parent.insertBefore(element, target); - } - if (newPosition < originalPosition) { - loopStart = newPosition; - } - - /* - let evenList = parentNode.querySelectorAll("table[tableType='rappasoft-laravel-livewire-tables']>tbody>tr:nth-child(even of tr.rappasoft-striped-row) ").forEach(function (elem) { - elem.classList.remove(...this.oddNotInEven); - row.classList.add(...this.evenNotInOdd); - }); - */ - let nextLoop = 'even'; - for (let i = 1, row; row = table.rows[i]; i++) { - if (!row.classList.contains('hidden') && !row.classList.contains('md:hidden') ) { - if (nextLoop === 'even') { - row.classList.remove(...this.oddNotInEven); - row.classList.add(...this.evenNotInOdd); - nextLoop = 'odd'; - } - else { - row.classList.remove(...this.evenNotInOdd); - row.classList.add(...this.oddNotInEven); - nextLoop = 'even'; - } - } - } - }, - reorderToggle() { - this.$nextTick(() => { this.setupEvenOddClasses() }); - if (this.currentlyReorderingStatus) { - wire.disableReordering(); - - } - else { - this.setupEvenOddClasses(); - if (this.hideReorderColumnUnlessReorderingStatus) { - this.reorderDisplayColumn = true; - } - wire.enableReordering(); - - } - }, - cancelReorder() { - if (this.hideReorderColumnUnlessReorderingStatus) { - this.reorderDisplayColumn = false; - } - wire.disableReordering(); - - }, - updateOrderedItems() { - let table = document.getElementById(tableID); - let orderedRows = []; - for (let i = 1, row; row = table.rows[i]; i++) { - orderedRows.push({ [primaryKeyName]: row.getAttribute('rowpk'), [this.defaultReorderColumn]: i }); - } - wire.storeReorder(orderedRows); - }, - setupEvenOddClasses() { - if (this.evenNotInOdd.length === undefined || this.evenNotInOdd.length == 0 || this.oddNotInEven.length === undefined || this.oddNotInEven.length == 0) - { - let tbody = document.getElementById(tableID).getElementsByTagName('tbody')[0]; - let evenRowClassArray = []; - let oddRowClassArray = []; - - if (tbody.rows[0] !== undefined && tbody.rows[1] !== undefined) { - evenRowClassArray = Array.from(tbody.rows[0].classList); - oddRowClassArray = Array.from(tbody.rows[1].classList); - this.evenNotInOdd = evenRowClassArray.filter(element => !oddRowClassArray.includes(element)); - this.oddNotInEven = oddRowClassArray.filter(element => !evenRowClassArray.includes(element)); - - evenRowClassArray = [] - oddRowClassArray = [] - } - } - }, - init() { - } - })); -} - export default tableReorder; \ No newline at end of file diff --git a/resources/js/partials/reorder.min.js b/resources/js/partials/reorder.min.js deleted file mode 100644 index 84ad82e43..000000000 --- a/resources/js/partials/reorder.min.js +++ /dev/null @@ -1 +0,0 @@ -function a(){Alpine.data('reorderFunction',(wire,tableID,primaryKeyName)=>({dragging:!1,reorderEnabled:!1,sourceID:'',targetID:'',evenRowClasses:'',oddRowClasses:'',currentlyHighlightedElement:'',evenRowClassArray:{},oddRowClassArray:{},evenNotInOdd:{},oddNotInEven:{},orderedRows:[],defaultReorderColumn:wire.get('defaultReorderColumn'),reorderStatus:wire.get('reorderStatus'),currentlyReorderingStatus:wire.entangle('currentlyReorderingStatus'),hideReorderColumnUnlessReorderingStatus:wire.entangle('hideReorderColumnUnlessReorderingStatus'),reorderDisplayColumn:wire.entangle('reorderDisplayColumn'),dragStart(A){this.$nextTick(()=>this.setupEvenOddClasses());this.sourceID=A.target.id;A.dataTransfer.effectAllowed='move';A.dataTransfer.setData('text/plain',A.target.id);A.target.classList.add('laravel-livewire-tables-dragging')},dragOverEvent(_){typeof this.currentlyHighlightedElement=='object'&&this.currentlyHighlightedElement.classList.remove('laravel-livewire-tables-highlight-bottom','laravel-livewire-tables-highlight-top');let b=_.target.closest('tr');this.currentlyHighlightedElement=b;_.offsetY<(b.getBoundingClientRect().height/2)?(b.classList.add('laravel-livewire-tables-highlight-top'),b.classList.remove('laravel-livewire-tables-highlight-bottom')):(b.classList.remove('laravel-livewire-tables-highlight-top'),b.classList.add('laravel-livewire-tables-highlight-bottom'))},dragLeaveEvent(B){B.target.closest('tr').classList.remove('laravel-livewire-tables-highlight-bottom','laravel-livewire-tables-highlight-top')},dropEvent(c){typeof this.currentlyHighlightedElement=='object'&&this.currentlyHighlightedElement.classList.remove('laravel-livewire-tables-highlight-bottom','laravel-livewire-tables-highlight-top');let C=c.target.closest('tr');let _c=c.target.closest('tr').parentNode;let d=document.getElementById(this.sourceID).closest('tr');d.classList.remove('laravel-livewire-table-dragging');let e=d.rowIndex;let f=C.rowIndex;let g=document.getElementById(tableID);c.offsetY>(C.getBoundingClientRect().height/2)?_c.insertBefore(d,C.nextSibling):_c.insertBefore(d,C);fthis.setupEvenOddClasses());if(this.currentlyReorderingStatus)wire.disableReordering();else{this.setupEvenOddClasses();this.hideReorderColumnUnlessReorderingStatus&&(this.reorderDisplayColumn=!0);wire.enableReordering()}},cancelReorder(){this.hideReorderColumnUnlessReorderingStatus&&(this.reorderDisplayColumn=!1);wire.disableReordering()},updateOrderedItems(){let _a=document.getElementById(tableID);let D=[];for(let i=1,_B;_B=_a.rows[i];i++)D.push({[primaryKeyName]:_B.getAttribute('rowpk'),[this.defaultReorderColumn]:i});wire.storeReorder(D)},setupEvenOddClasses(){if(this.evenNotInOdd.length===void 0||this.evenNotInOdd.length==0||this.oddNotInEven.length===void 0||this.oddNotInEven.length==0){let _A=document.getElementById(tableID).getElementsByTagName('tbody')[0];let E=[];let _C=[];(_A.rows[0]!==void 0&&_A.rows[1]!==void 0)&&(E=[..._A.rows[0].classList],_C=[..._A.rows[1].classList],this.evenNotInOdd=E.filter(aA=>!_C.includes(aA)),this.oddNotInEven=_C.filter(aB=>!E.includes(aB)),E=[],_C=[])}},init(){}}))}export default a; diff --git a/resources/js/partials/tableWrapper.min.js b/resources/js/partials/tableWrapper.min.js deleted file mode 100644 index b89a83af6..000000000 --- a/resources/js/partials/tableWrapper.min.js +++ /dev/null @@ -1 +0,0 @@ -function a(){Alpine.data('tableWrapper',(wire,showBulkActionsAlpine)=>({listeners:[],childElementOpen:!1,filtersOpen:wire.entangle('filterSlideDownDefaultVisible'),paginationCurrentCount:wire.entangle('paginationCurrentCount'),paginationTotalItemCount:wire.entangle('paginationTotalItemCount'),paginationCurrentItems:wire.entangle('paginationCurrentItems'),selectedItems:wire.entangle('selected'),selectAllStatus:wire.entangle('selectAll'),delaySelectAll:wire.entangle('delaySelectAll'),hideBulkActionsWhenEmpty:wire.entangle('hideBulkActionsWhenEmpty'),toggleSelectAll(){if(!showBulkActionsAlpine)return;if(this.paginationTotalItemCount===this.selectedItems.length){this.clearSelected();this.selectAllStatus=!1}else this.delaySelectAll?this.setAllItemsSelected():this.setAllSelected()},setAllItemsSelected(){if(!showBulkActionsAlpine)return;this.selectAllStatus=!0;this.selectAllOnPage()},setAllSelected(){if(!showBulkActionsAlpine)return;this.delaySelectAll?(this.selectAllStatus=!0,this.selectAllOnPage()):(wire.setAllSelected())},clearSelected(){if(!showBulkActionsAlpine)return;this.selectAllStatus=!1;wire.clearSelected()},selectAllOnPage(){if(!showBulkActionsAlpine)return;let A=this.selectedItems;var b=this.paginationCurrentItems.values();for(const _ of b)A.push(`${_}`);this.selectedItems=[...new Set(A)]},destroy(){for(const B of this.listeners)B()}}))}export default a; diff --git a/resources/lang/json/de.json b/resources/lang/json/de.json index 2ddfa94cc..911657691 100644 --- a/resources/lang/json/de.json +++ b/resources/lang/json/de.json @@ -4,12 +4,14 @@ "livewire-tables::Applied Filters": "Angewendete Filter", "livewire-tables::Applied Sorting": "Angewendete Sortierung", "livewire-tables::Bulk Actions": "Aktionen", + "livewire-tables::Cancel": "Stornieren", "livewire-tables::Clear": "Zurücksetzen", "livewire-tables::Columns": "Spalten", "livewire-tables::Debugging Values": "Werte debuggen", "livewire-tables::Deselect All": "Alle abwählen", "livewire-tables::Done Reordering": "Sortieren abgeschlossen", "livewire-tables::Filters": "Filter", + "livewire-tables::Loading": "Laden", "livewire-tables::not_applicable": "N/A", "livewire-tables::No": "Nein", "livewire-tables::No items found. Try to broaden your search.": "Es gibt keine Ergebnisse/Einträge. Versuche die Suche zu erweitern.", diff --git a/resources/lang/json/en.json b/resources/lang/json/en.json index 1579cbbe2..a2e4f88b7 100644 --- a/resources/lang/json/en.json +++ b/resources/lang/json/en.json @@ -1,17 +1,20 @@ { + "livewire-tables::Actions": "Actions", "livewire-tables::All": "All", "livewire-tables::All Columns": "All Columns", "livewire-tables::Applied Filters": "Applied Filters", "livewire-tables::Applied Sorting": "Applied Sorting", "livewire-tables::Bulk Actions": "Bulk Actions", "livewire-tables::Bulk Actions Confirm": "Are you sure?", + "livewire-tables::Cancel": "Cancel", "livewire-tables::Clear": "Clear", "livewire-tables::Columns": "Columns", "livewire-tables::Debugging Values": "Debugging Values", "livewire-tables::Deselect All": "Deselect All", + "livewire-tables::Deselect All On Page": "Deselect All On Page", "livewire-tables::Done Reordering": "Done Reordering", "livewire-tables::Filters": "Filters", - "livewire-tables::loading": "Loading", + "livewire-tables::Loading": "Loading", "livewire-tables::max": "Max", "livewire-tables::min": "Min", "livewire-tables::not_applicable": "N/A", @@ -46,7 +49,7 @@ "Deselect All": "Deselect All", "Done Reordering": "Done Reordering", "Filters": "Filters", - "loading": "Loading", + "Loading": "Loading", "max": "Max", "min": "Min", "not_applicable": "N/A", diff --git a/resources/lang/json/es.json b/resources/lang/json/es.json index b03b2e25f..f8ed8576e 100644 --- a/resources/lang/json/es.json +++ b/resources/lang/json/es.json @@ -4,12 +4,14 @@ "livewire-tables::Applied Filters": "Filtros Aplicados", "livewire-tables::Applied Sorting": "Ordenamiento Aplicado", "livewire-tables::Bulk Actions": "Acciones Masivas", + "livewire-tables::Cancel": "Cancelar", "livewire-tables::Clear": "Borrar", "livewire-tables::Columns": "Columnas", "livewire-tables::Debugging Values": "Valores de depuración", "livewire-tables::Deselect All": "Deseleccionar todo", "livewire-tables::Done Reordering": "Reordenación finalizada", "livewire-tables::Filters": "Filtros", + "livewire-tables::Loading": "Cargando", "livewire-tables::not_applicable": "N/A", "livewire-tables::No": "No", "livewire-tables::No items found. Try to broaden your search.": "No se encontraron elementos. Intente ampliar la búsqueda.", diff --git a/resources/lang/json/fa.json b/resources/lang/json/fa.json index 7bcf32940..c68a98eee 100644 --- a/resources/lang/json/fa.json +++ b/resources/lang/json/fa.json @@ -11,7 +11,7 @@ "livewire-tables::Deselect All": "لغو انتخاب همه", "livewire-tables::Done Reordering": "مرتب‌سازی تمام شد", "livewire-tables::Filters": "فیلترها", - "livewire-tables::loading": "در حال بارگذاری", + "livewire-tables::Loading": "در حال بارگذاری", "livewire-tables::max": "حداکثر", "livewire-tables::min": "حداقل", "livewire-tables::not_applicable": "نامعتبر", @@ -46,7 +46,7 @@ "Deselect All": "لغو انتخاب همه", "Done Reordering": "مرتب‌سازی تمام شد", "Filters": "فیلترها", - "loading": "در حال بارگذاری", + "Loading": "در حال بارگذاری", "max": "حداکثر", "min": "حداقل", "not_applicable": "نامعتبر", diff --git a/resources/lang/json/fr.json b/resources/lang/json/fr.json index 89323dc4a..b01717e36 100644 --- a/resources/lang/json/fr.json +++ b/resources/lang/json/fr.json @@ -4,12 +4,14 @@ "livewire-tables::Applied Filters": "Filtres appliqués", "livewire-tables::Applied Sorting": "Tris appliqués", "livewire-tables::Bulk Actions": "Actions en masse", + "livewire-tables::Cancel": "Annuler", "livewire-tables::Clear": "Effacer", "livewire-tables::Columns": "Colonnes", "livewire-tables::Debugging Values": "Valeurs de débogage", "livewire-tables::Deselect All": "Tout désélectionner ", "livewire-tables::Done Reordering": "Réordonnancement terminé", "livewire-tables::Filters": "Filtres", + "livewire-tables::Loading": "Chargement", "livewire-tables::not_applicable": "N/A", "livewire-tables::No": "Non", "livewire-tables::No items found. Try to broaden your search.": "Aucun élément trouvé. Essayez d'élargir votre recherche.", diff --git a/resources/lang/json/it.json b/resources/lang/json/it.json index a1c50fb21..b577f6e23 100644 --- a/resources/lang/json/it.json +++ b/resources/lang/json/it.json @@ -4,12 +4,14 @@ "livewire-tables::Applied Filters": "Filtri Applicati", "livewire-tables::Applied Sorting": "Ordinamento Applicato", "livewire-tables::Bulk Actions": "Azioni di Gruppo", + "livewire-tables::Cancel": "Cancellare", "livewire-tables::Clear": "Pulisci", "livewire-tables::Columns": "Colonne", "livewire-tables::Debugging Values": "Valori di debug", "livewire-tables::Deselect All": "Deseleziona tutto", "livewire-tables::Done Reordering": "Ordinamento Terminato", "livewire-tables::Filters": "Filtri", + "livewire-tables::Loading": "Caricamento", "livewire-tables::not_applicable": "N/A", "livewire-tables::No": "No", "livewire-tables::No items found. Try to broaden your search.": "Nessun risultato trovato. Prova ad ampliare la tua ricerca.", diff --git a/resources/lang/json/nl.json b/resources/lang/json/nl.json index a6223018c..c01ad7b88 100644 --- a/resources/lang/json/nl.json +++ b/resources/lang/json/nl.json @@ -5,12 +5,14 @@ "livewire-tables::Applied Sorting": "Toegepaste sortering", "livewire-tables::Bulk Actions": "Bulkacties", "livewire-tables::Bulk Actions Confirm": "Weet u het zeker?", + "livewire-tables::Cancel": "Annuleren", "livewire-tables::Clear": "Wissen", "livewire-tables::Columns": "Kolommen", "livewire-tables::Debugging Values": "Debugging waarden", "livewire-tables::Deselect All": "Alles deselecteren", "livewire-tables::Done Reordering": "Hersortering voltooid", "livewire-tables::Filters": "Filters", + "livewire-tables::Loading": "Laden", "livewire-tables::not_applicable": "N/A", "livewire-tables::No": "Nee", "livewire-tables::No items found. Try to broaden your search.": "Er zijn geen items gevonden. Probeer uw zoekopdracht te verfijnen.", diff --git a/resources/lang/json/pl.json b/resources/lang/json/pl.json index 12469dc82..d30fbb62c 100644 --- a/resources/lang/json/pl.json +++ b/resources/lang/json/pl.json @@ -5,12 +5,14 @@ "livewire-tables::Applied Sorting": "Użyte sortowanie", "livewire-tables::Bulk Actions": "Akcje zbiorowe", "livewire-tables::Bulk Actions Confirm": "Czy zastosować ?", + "livewire-tables::Cancel": "Anulować", "livewire-tables::Clear": "Wyczyść", "livewire-tables::Columns": "Kolumny", "livewire-tables::Debugging Values": "Wartości debugowania", "livewire-tables::Deselect All": "Odznacz wszystko", "livewire-tables::Done Reordering": "Done Reordering", "livewire-tables::Filters": "Filtry", + "livewire-tables::Loading": "Załadunek", "livewire-tables::not_applicable": "N/A", "livewire-tables::No": "Nie", "livewire-tables::No items found. Try to broaden your search.": "Brak rezultatów do wyświetlenia.", diff --git a/resources/lang/json/pt_BR.json b/resources/lang/json/pt_BR.json index 09a0e2906..d51e4603a 100644 --- a/resources/lang/json/pt_BR.json +++ b/resources/lang/json/pt_BR.json @@ -5,12 +5,14 @@ "livewire-tables::Applied Sorting": "Ordenação aplicada", "livewire-tables::Bulk Actions": "Ações em massa", "livewire-tables::Bulk Actions Confirm": "Tem certeza", + "livewire-tables::Cancel": "Cancelar", "livewire-tables::Clear": "Limpar", "livewire-tables::Columns": "Colunas", "livewire-tables::Debugging Values": "Valores de depuração", "livewire-tables::Deselect All": "Desmarcar Tudo", "livewire-tables::Done Reordering": "Ordenação finalizada", "livewire-tables::Filters": "Filtros", + "livewire-tables::Loading": "Carregando", "livewire-tables::not_applicable": "N/A", "livewire-tables::No": "Não", "livewire-tables::No items found. Try to broaden your search.": "Nenhum resultado encontrado. Tente ampliar a sua pesquisa.", diff --git a/resources/lang/json/th.json b/resources/lang/json/th.json index 35c21b7fd..e8b779148 100644 --- a/resources/lang/json/th.json +++ b/resources/lang/json/th.json @@ -5,12 +5,14 @@ "livewire-tables::Applied Sorting": "เรียงลำดับตาม", "livewire-tables::Bulk Actions": "เลือกการกระทำ", "livewire-tables::Bulk Actions Confirm": "คุณแน่ใจ?", + "livewire-tables::Cancel": "ยกเลิก", "livewire-tables::Clear": "ล้างทั้งหมด", "livewire-tables::Columns": "เลือกคอลัมน์", "livewire-tables::Debugging Values": "ค่าการดีบัก", "livewire-tables::Deselect All": "ไม่เลือกทั้งหมด", "livewire-tables::Done Reordering": "จัดลำดับแล้ว", "livewire-tables::Filters": "ตัวกรอง", + "livewire-tables::Loading": "กำลังโหลด", "livewire-tables::not_applicable": "N/A", "livewire-tables::No": "เลขที่", "livewire-tables::No items found. Try to broaden your search.": "ไม่พบรายการที่ค้นหา", diff --git a/resources/lang/json/tw.json b/resources/lang/json/tw.json index b675a47c7..0921a37bf 100644 --- a/resources/lang/json/tw.json +++ b/resources/lang/json/tw.json @@ -5,12 +5,14 @@ "livewire-tables::Applied Sorting": "已套用的搜尋規則", "livewire-tables::Bulk Actions": "批次操作", "livewire-tables::Bulk Actions Confirm": "你確定嗎", + "livewire-tables::Cancel": "取消", "livewire-tables::Clear": "清除", "livewire-tables::Columns": "欄位", "livewire-tables::Debugging Values": "調試值", "livewire-tables::Deselect All": "取消選擇", "livewire-tables::Done Reordering": "排序完成", "livewire-tables::Filters": "過濾規則", + "livewire-tables::Loading": "加载中", "livewire-tables::not_applicable": "N/A", "livewire-tables::No": "不", "livewire-tables::No items found. Try to broaden your search.": "無資料呈現。請嘗試擴大搜尋範圍。", diff --git a/resources/lang/json/uk.json b/resources/lang/json/uk.json index 540684056..99afba2cc 100644 --- a/resources/lang/json/uk.json +++ b/resources/lang/json/uk.json @@ -5,12 +5,14 @@ "livewire-tables::Applied Sorting": "Застосовані сортування", "livewire-tables::Bulk Actions": "Масові дії", "livewire-tables::Bulk Actions Confirm": "Vy vpevneni?", + "livewire-tables::Cancel": "Cкасувати", "livewire-tables::Clear": "Очистити", "livewire-tables::Columns": "Колонки", "livewire-tables::Debugging Values": "Значення налагодження", "livewire-tables::Deselect All": "Зняти вибір із усіх", "livewire-tables::Done Reordering": "Сортування виконанно", "livewire-tables::Filters": "Фільтри", + "livewire-tables::Loading": "Завантаження", "livewire-tables::not_applicable": "N/A", "livewire-tables::No": "Немає", "livewire-tables::No items found. Try to broaden your search.": "Немає елементів. Спробуйте розширити пошук.", diff --git a/resources/lang/php/de/core.php b/resources/lang/php/de/core.php index 04963e20a..baad01b44 100644 --- a/resources/lang/php/de/core.php +++ b/resources/lang/php/de/core.php @@ -7,12 +7,14 @@ 'Applied Sorting' => 'Angewendete Sortierung', 'Bulk Actions' => 'Aktionen', 'Bulk Actions Confirm' => 'Bist du sicher?', + 'Cancel' => 'Stornieren', 'Clear' => 'Zurücksetzen', 'Columns' => 'Spalten', 'Debugging Values' => 'Werte debuggen', 'Deselect All' => 'Alle abwählen', 'Done Reordering' => 'Sortieren abgeschlossen', 'Filters' => 'Filter', + 'Loading' => 'Laden', 'not_applicable' => 'N/A', 'No' => 'Nein', 'No items found, try to broaden your search' => 'Es gibt keine Ergebnisse/Einträge. Versuche die Suche zu erweitern', diff --git a/resources/lang/php/en/core.php b/resources/lang/php/en/core.php index 631762dba..f7e0cfdba 100644 --- a/resources/lang/php/en/core.php +++ b/resources/lang/php/en/core.php @@ -1,20 +1,24 @@ 'Actions', 'All' => 'All', 'All Columns' => 'All Columns', 'Applied Filters' => 'Applied Filters', 'Applied Sorting' => 'Applied Sorting', 'Bulk Actions' => 'Bulk Actions', 'Bulk Actions Confirm' => 'Are you sure?', - 'cancel' => 'Cancel', + 'Cancel' => 'Cancel', 'Clear' => 'Clear', 'Columns' => 'Columns', 'Debugging Values' => 'Debugging Values', 'Deselect All' => 'Deselect All', + 'Deselect All On Page' => 'Deselect All On Page', + 'Disabled' => 'Disabled', 'Done Reordering' => 'Done Reordering', + 'Enabled' => 'Enabled', 'Filters' => 'Filters', - 'loading' => 'Loading', + 'Loading' => 'Loading', 'max' => 'Max', 'min' => 'Min', 'not_applicable' => 'N/A', diff --git a/resources/lang/php/es/core.php b/resources/lang/php/es/core.php index 6abcb91ea..a25eafd8e 100644 --- a/resources/lang/php/es/core.php +++ b/resources/lang/php/es/core.php @@ -7,12 +7,14 @@ 'Applied Sorting' => 'Ordenamiento Aplicado', 'Bulk Actions' => 'Acciones Masivas', 'Bulk Actions Confirm' => 'Está seguro?', + 'Cancel' => 'Cancelar', 'Clear' => 'Borrar', 'Columns' => 'Columnas', 'Debugging Values' => 'Valores de depuración', 'Deselect All' => 'Deseleccionar todo', 'Done Reordering' => 'Reordenación finalizada', 'Filters' => 'Filtros', + 'Loading' => 'Cargando', 'not_applicable' => 'N/A', 'No' => 'No', 'No items found, try to broaden your search' => 'No se encontraron elementos. Intente ampliar la búsqueda', diff --git a/resources/lang/php/fa/core.php b/resources/lang/php/fa/core.php index bf880aaeb..0fed934a4 100644 --- a/resources/lang/php/fa/core.php +++ b/resources/lang/php/fa/core.php @@ -14,7 +14,7 @@ 'Deselect All' => 'لغو انتخاب همه', 'Done Reordering' => 'مرتب‌سازی تمام شد', 'Filters' => 'فیلترها', - 'loading' => 'در حال بارگذاری', + 'Loading' => 'در حال بارگذاری', 'max' => 'حداکثر', 'min' => 'حداقل', 'not_applicable' => 'نامعتبر', diff --git a/resources/lang/php/fr/core.php b/resources/lang/php/fr/core.php index a81d0b8ad..066796f7c 100644 --- a/resources/lang/php/fr/core.php +++ b/resources/lang/php/fr/core.php @@ -7,12 +7,14 @@ 'Applied Sorting' => 'Tris appliqués', 'Bulk Actions' => 'Actions en masse', 'Bulk Actions Confirm' => 'Êtes-vous sûr ?', + 'Cancel' => 'Annuler', 'Clear' => 'Effacer', 'Columns' => 'Colonnes', 'Debugging Values' => 'Valeurs de débogage', 'Deselect All' => 'Tout désélectionner ', 'Done Reordering' => 'Réordonnancement terminé', 'Filters' => 'Filtres', + 'Loading' => 'Chargement', 'not_applicable' => 'N/A', 'No' => 'Non', 'No items found, try to broaden your search' => "Aucun élément trouvé. Essayez d'élargir votre recherche.", diff --git a/resources/lang/php/it/core.php b/resources/lang/php/it/core.php index b29208f25..708987515 100644 --- a/resources/lang/php/it/core.php +++ b/resources/lang/php/it/core.php @@ -7,12 +7,14 @@ 'Applied Sorting' => 'Ordinamento Applicato', 'Bulk Actions' => 'Azioni di Gruppo', 'Bulk Actions Confirm' => 'Sei sicuro?', + 'Cancel' => 'Cancellare', 'Clear' => 'Pulisci', 'Columns' => 'Colonne', 'Debugging Values' => 'Valori di debug', 'Deselect All' => 'Deseleziona tutto', 'Done Reordering' => 'Ordinamento Terminato', 'Filters' => 'Filtri', + 'Loading' => 'Caricamento', 'not_applicable' => 'N/A', 'No' => 'No', 'No items found, try to broaden your search' => 'Nessun risultato trovato. Prova ad ampliare la tua ricerca.', diff --git a/resources/lang/php/nb/core.php b/resources/lang/php/nb/core.php index 9bcef1082..df4c53861 100644 --- a/resources/lang/php/nb/core.php +++ b/resources/lang/php/nb/core.php @@ -7,12 +7,14 @@ 'Applied Sorting' => 'Anvendt sortering', 'Bulk Actions' => 'Massehandlinger', 'Bulk Actions Confirm' => 'Er du sikker?', + 'Cancel' => 'Kansellere', 'Clear' => 'Tøm', 'Columns' => 'Kolonner', 'Debugging Values' => 'Debugger verdier', 'Deselect All' => 'Opphev valg for alle', 'Done Reordering' => 'Ferdig med omorganisering', 'Filters' => 'Filtre', + 'Loading' => 'Laster', 'max' => 'Maks', 'min' => 'Min', 'not_applicable' => 'I/T', diff --git a/resources/lang/php/nl/core.php b/resources/lang/php/nl/core.php index ad1eb4c29..a573787f8 100644 --- a/resources/lang/php/nl/core.php +++ b/resources/lang/php/nl/core.php @@ -7,12 +7,14 @@ 'Applied Sorting' => 'Toegepaste sortering', 'Bulk Actions' => 'Bulkacties', 'Bulk Actions Confirm' => 'Weet u het zeker?', + 'Cancel' => 'Annuleren', 'Clear' => 'Wissen', 'Columns' => 'Kolommen', 'Debugging Values' => 'Debugging waarden', 'Deselect All' => 'Alles deselecteren', 'Done Reordering' => 'Hersortering voltooid', 'Filters' => 'Filters', + 'Loading' => 'Laden', 'not_applicable' => 'N/A', 'No' => 'Nee', 'No items found, try to broaden your search' => 'Er zijn geen items gevonden. Probeer uw zoekopdracht te verfijnen', diff --git a/resources/lang/php/pl/core.php b/resources/lang/php/pl/core.php index 144c73d8a..b3e53b1e2 100644 --- a/resources/lang/php/pl/core.php +++ b/resources/lang/php/pl/core.php @@ -7,12 +7,14 @@ 'Applied Sorting' => 'Użyte sortowanie', 'Bulk Actions' => 'Akcje zbiorowe', 'Bulk Actions Confirm' => 'Czy zastosować ?', + 'Cancel' => 'Anulować', 'Clear' => 'Wyczyść', 'Columns' => 'Kolumny', 'Debugging Values' => 'Wartości debugowania', 'Deselect All' => 'Odznacz wszystko', 'Done Reordering' => 'Done Reordering', 'Filters' => 'Filtry', + 'Loading' => 'Załadunek', 'not_applicable' => 'N/A', 'No' => 'Nie', 'No items found, try to broaden your search' => 'Brak rezultatów do wyświetlenia', diff --git a/resources/lang/php/pt_BR/core.php b/resources/lang/php/pt_BR/core.php index af83595e6..fcffb1fb9 100644 --- a/resources/lang/php/pt_BR/core.php +++ b/resources/lang/php/pt_BR/core.php @@ -7,12 +7,14 @@ 'Applied Sorting' => 'Ordenação aplicada', 'Bulk Actions' => 'Ações em massa', 'Bulk Actions Confirm' => 'Tem certeza', + 'Cancel' => 'Cancelar', 'Clear' => 'Limpar', 'Columns' => 'Colunas', 'Debugging Values' => 'Valores de depuração', 'Deselect All' => 'Desmarcar Tudo', 'Done Reordering' => 'Ordenação finalizada', 'Filters' => 'Filtros', + 'Loading' => 'Carregando', 'not_applicable' => 'N/A', 'No' => 'Não', 'No items found, try to broaden your search' => 'Nenhum resultado encontrado. Tente ampliar a sua pesquisa', diff --git a/resources/lang/php/sq/core.php b/resources/lang/php/sq/core.php index 3ea3ea6b9..43fbfe629 100644 --- a/resources/lang/php/sq/core.php +++ b/resources/lang/php/sq/core.php @@ -7,12 +7,14 @@ 'Applied Sorting' => 'Renditja e aplikuar', 'Bulk Actions' => 'Veprime në masë', 'Bulk Actions Confirm' => 'A jeni i sigurt?', + 'Cancel' => 'Anulo', 'Clear' => 'Pastro', 'Columns' => 'Kolonat', 'Debugging Values' => 'Vlerat e korrigjimit', 'Deselect All' => 'Heq të gjitha', 'Done Reordering' => 'Përfundoi riorganizimi', 'Filters' => 'Filtrat', + 'Loading' => 'Po ngarkohet', 'max' => 'Maksimumi', 'min' => 'Minimumi', 'not_applicable' => 'N/A', diff --git a/resources/lang/php/sv/core.php b/resources/lang/php/sv/core.php index b3630fe7c..dad9c0237 100644 --- a/resources/lang/php/sv/core.php +++ b/resources/lang/php/sv/core.php @@ -7,12 +7,14 @@ 'Applied Sorting' => 'Vald sortering', 'Bulk Actions' => 'Bulk Modifiering', 'Bulk Actions Confirm' => 'Är du säker?', + 'Cancel' => 'Avboka', 'Clear' => 'Rensa', 'Columns' => 'Kolumner', 'Debugging Values' => 'Debug Värden', 'Deselect All' => 'Avmarkera alla', 'Done Reordering' => 'Omordning klart', 'Filters' => 'Filter', + 'Loading' => 'Belastning', 'max' => 'Max', 'min' => 'Min', 'not_applicable' => 'N/A', diff --git a/resources/lang/php/th/core.php b/resources/lang/php/th/core.php index bcbe31590..4493062e1 100644 --- a/resources/lang/php/th/core.php +++ b/resources/lang/php/th/core.php @@ -7,12 +7,14 @@ 'Applied Sorting' => 'เรียงลำดับตาม', 'Bulk Actions' => 'เลือกการกระทำ', 'Bulk Actions Confirm' => 'คุณแน่ใจ?', + 'Cancel' => 'ยกเลิก', 'Clear' => 'ล้างทั้งหมด', 'Columns' => 'เลือกคอลัมน์', 'Debugging Values' => 'ค่าการดีบัก', 'Deselect All' => 'ไม่เลือกทั้งหมด', 'Done Reordering' => 'จัดลำดับแล้ว', 'Filters' => 'ตัวกรอง', + 'Loading' => 'กำลังโหลด', 'not_applicable' => 'N/A', 'No' => 'เลขที่', 'No items found, try to broaden your search' => 'ไม่พบรายการที่ค้นหา', diff --git a/resources/lang/php/tw/core.php b/resources/lang/php/tw/core.php index ff83d8a17..d21be4cea 100644 --- a/resources/lang/php/tw/core.php +++ b/resources/lang/php/tw/core.php @@ -7,12 +7,14 @@ 'Applied Sorting' => '已套用的搜尋規則', 'Bulk Actions' => '批次操作', 'Bulk Actions Confirm' => '你確定嗎', + 'Cancel' => '取消', 'Clear' => '清除', 'Columns' => '欄位', 'Debugging Values' => '調試值', 'Deselect All' => '取消選擇', 'Done Reordering' => '排序完成', 'Filters' => '過濾規則', + 'Loading' => '加载中', 'not_applicable' => 'N/A', 'No' => '不', 'No items found, try to broaden your search' => '無資料呈現。請嘗試擴大搜尋範圍', diff --git a/resources/lang/php/uk/core.php b/resources/lang/php/uk/core.php index c0ea65f92..0777f065f 100644 --- a/resources/lang/php/uk/core.php +++ b/resources/lang/php/uk/core.php @@ -7,12 +7,14 @@ 'Applied Sorting' => 'Застосовані сортування', 'Bulk Actions' => 'Масові дії', 'Bulk Actions Confirm' => 'Vy vpevneni?', + 'Cancel' => 'скасувати', 'Clear' => 'Очистити', 'Columns' => 'Колонки', 'Debugging Values' => 'Значення налагодження', 'Deselect All' => 'Зняти вибір із усіх', 'Done Reordering' => 'Сортування виконанно', 'Filters' => 'Фільтри', + 'Loading' => 'Завантаження', 'not_applicable' => 'N/A', 'No' => 'Немає', 'No items found, try to broaden your search' => 'Немає елементів. Спробуйте розширити пошук', diff --git a/resources/views/components/actions/actions.blade.php b/resources/views/components/actions/actions.blade.php new file mode 100755 index 000000000..e2fc1193e --- /dev/null +++ b/resources/views/components/actions/actions.blade.php @@ -0,0 +1,54 @@ +@aware(['isTailwind', 'isTailwind4', 'isBootstrap', 'tableName', 'localisationPath']) +@php($actionWrapperAttributes = $this->getActionWrapperAttributes()) +@php($actionsPosition = $this->getActionsPosition()) +@php($showActionsInToolbar = $this->showActionsInToolbar()) +@php($actions = $this->getActions()) + +@if($showActionsInToolbar && ($this->showActionsAsDropdown || count($actions) >= 5)) + + + {{-- The Button Used To Toggle The Menu --}} + merge($this->getActionsButtonAttributes) }}> + {{ __($localisationPath.'Actions') }} + + @if($isTailwind || $isTailwind4) + + @endif + + + {{-- The Body of The Menu --}} + merge($this->getActionsMenuAttributes) }}> + @foreach($actions as $action) + {{ $action->setInMenu(true)->render() }} + @endforeach + + + +@else +
merge($actionWrapperAttributes) + ->class([ + 'flex flex-cols py-2 space-x-2' => $isTailwind && ($actionWrapperAttributes['default-styling'] ?? true), + '' => $isTailwind && ($actionWrapperAttributes['default-colors'] ?? true), + 'tw4ph flex flex-cols py-2 space-x-2' => $isTailwind4 && ($actionWrapperAttributes['default-styling'] ?? true), + 'tw4ph ' => $isTailwind4 && ($actionWrapperAttributes['default-colors'] ?? true), + + 'd-flex flex-cols py-2 space-x-2' => $isBootstrap && ($actionWrapperAttributes['default-styling'] ?? true), + '' => $isBootstrap && ($actionWrapperAttributes['default-colors'] ?? true), + + // All + 'justify-start' => $actionsPosition === 'left', + 'justify-center' => $actionsPosition === 'center', + 'justify-end' => $actionsPosition === 'right', + 'pl-2' => $showActionsInToolbar && $actionsPosition === 'left', + 'pr-2' => $showActionsInToolbar && $actionsPosition === 'right', + ]) + ->except(['default','default-styling','default-colors']) + }} > + + @foreach($actions as $action) + {{ $action->render() }} + @endforeach + +
+@endif \ No newline at end of file diff --git a/resources/views/components/bulk-actions/menu/body.blade.php b/resources/views/components/bulk-actions/menu/body.blade.php new file mode 100644 index 000000000..34e281b11 --- /dev/null +++ b/resources/views/components/bulk-actions/menu/body.blade.php @@ -0,0 +1,19 @@ +@aware([ 'tableName','isTailwind','isTailwind4','isBootstrap','isBootstrap4','isBootstrap5', 'localisationPath']) +{{-- This is used for the Bulk Actions Dropdown Menu Body --}} +
merge() + ->class([ + 'bg-white dark:bg-gray-700 dark:text-white ring-black divide-gray-100 dark:divide-gray-400' => $isTailwind && ($attributes['default-colors'] ?? true), + 'mt-1 py-1 w-full md:w-48 rounded-md shadow-lg ring-1 ring-opacity-5 divide-y focus:outline-none z-50' => $isTailwind && ($attributes['default-styling'] ?? true), + 'twph4 bg-white dark:bg-gray-700 dark:text-white ring-black divide-gray-100 dark:divide-gray-400' => $isTailwind && ($attributes['default-colors'] ?? true), + 'tw4ph mt-1 py-1 w-full md:w-48 rounded-md shadow-lg ring-1 ring-opacity-5 divide-y focus:outline-none z-50' => $isTailwind4 && ($attributes['default-styling'] ?? true), + 'dropdown-menu dropdown-menu-right w-100' => $isBootstrap4 && ($attributes['default-styling'] ?? true), + 'dropdown-menu dropdown-menu-end w-100' => $isBootstrap5 && ($attributes['default-styling'] ?? true), + ]) + ->except(['default','default-styling','default-colors']) + }} +> + {{ $slot }} +
diff --git a/resources/views/components/bulk-actions/menu/button.blade.php b/resources/views/components/bulk-actions/menu/button.blade.php new file mode 100644 index 000000000..dc08df0bf --- /dev/null +++ b/resources/views/components/bulk-actions/menu/button.blade.php @@ -0,0 +1,9 @@ +@aware(['isTailwind','isTailwind4', 'localisationPath']) +{{-- This is used for the Bulk Actions Dropdown Menu Button --}} + + {{ __($localisationPath.'Bulk Actions') }} + + @if($isTailwind || $isTailwind4) + + @endif + \ No newline at end of file diff --git a/resources/views/components/bulk-actions/td.blade.php b/resources/views/components/bulk-actions/td.blade.php new file mode 100755 index 000000000..6929c53bf --- /dev/null +++ b/resources/views/components/bulk-actions/td.blade.php @@ -0,0 +1,15 @@ +@aware([ 'tableName', 'isTailwind', 'isTailwind4', 'isBootstrap','rowPk', 'bulkActionsTdAttributes', 'bulkActionsTdCheckboxAttributes', 'showBulkActionsSections']) + + +
$isTailwind, + 'tw4ph inline-flex rounded-md shadow-sm' => $isTailwind4, + 'form-check' => $isBootstrap, + ])> + +
+ diff --git a/resources/views/components/bulk-actions/th.blade.php b/resources/views/components/bulk-actions/th.blade.php new file mode 100755 index 000000000..77ed0d846 --- /dev/null +++ b/resources/views/components/bulk-actions/th.blade.php @@ -0,0 +1,28 @@ +@aware(['tableName','isTailwind', 'isTailwind4', 'isBootstrap']) +@php + $customAttributes = $this->hasBulkActionsThAttributes() ? $this->getBulkActionsThAttributes() : $this->getAllThAttributes($this->getBulkActionsColumn())['customAttributes']; + $bulkActionsThCheckboxAttributes = $this->getBulkActionsThCheckboxAttributes(); +@endphp + + +
$isTailwind, + 'tw4ph inline-flex rounded-md shadow-sm' => $isTailwind4, + 'form-check' => $isBootstrap, + ]) + > + merge($bulkActionsThCheckboxAttributes) + ->class([ + 'border-gray-300 text-indigo-600 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-900 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600 dark:focus:bg-gray-600' => $isTailwind && ($bulkActionsThCheckboxAttributes['default-colors'] ?? ($bulkActionsThCheckboxAttributes['default'] ?? true)), + 'rounded shadow-sm transition duration-150 ease-in-out focus:ring focus:ring-opacity-50 ' => $isTailwind && ($bulkActionsThCheckboxAttributes['default-styling'] ?? ($bulkActionsThCheckboxAttributes['default'] ?? true)), + 'tw4ph border-gray-300 text-indigo-600 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-900 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600 dark:focus:bg-gray-600' => $isTailwind4 && ($bulkActionsThCheckboxAttributes['default-colors'] ?? ($bulkActionsThCheckboxAttributes['default'] ?? true)), + 'tw4ph rounded shadow-sm transition duration-150 ease-in-out focus:ring focus:ring-opacity-50 ' => $isTailwind4 && ($bulkActionsThCheckboxAttributes['default-styling'] ?? ($bulkActionsThCheckboxAttributes['default'] ?? true)), + 'form-check-input' => $isBootstrap && ($bulkActionsThCheckboxAttributes['default-styling'] ?? ($bulkActionsThCheckboxAttributes['default'] ?? true)), + ]) + ->except(['default','default-styling','default-colors']) + }} + /> +
+ diff --git a/resources/views/components/bulk-actions/thead/button.blade.php b/resources/views/components/bulk-actions/thead/button.blade.php new file mode 100755 index 000000000..7d31f07fe --- /dev/null +++ b/resources/views/components/bulk-actions/thead/button.blade.php @@ -0,0 +1,22 @@ +@aware(['isTailwind','isTailwind4','isBootstrap','bulkActionsRowButtonAttributes']) +@props(['bulkActionsRowButtonAttributes']) + \ No newline at end of file diff --git a/resources/views/components/bulk-actions/thead/thead.blade.php b/resources/views/components/bulk-actions/thead/thead.blade.php new file mode 100755 index 000000000..5d8c7d800 --- /dev/null +++ b/resources/views/components/bulk-actions/thead/thead.blade.php @@ -0,0 +1,51 @@ +@aware([ 'tableName', 'isTailwind', 'isTailwind4', 'isBootstrap', 'localisationPath', 'collapsingColumnInfo','bulkActionsRowButtonAttributes']) + +@php + $colspan = $collapsingColumnInfo['colspanCount']; + $selectAll = $this->selectAllIsEnabled(); + $simplePagination = $this->isPaginationMethod('simple'); +@endphp + + +getBulkActionsAlpine()->merge(['data-id' => "bil", + 'wire:key' => $this->getTableName() ."-bulk-select-message", + 'x-cloak' => '']) + ->class([ + 'unsortable laravel-livewire-tables-reorderingMinimised bg-indigo-50 dark:bg-gray-900 dark:text-white' => $isTailwind, + 'tw4ph unsortable laravel-livewire-tables-reorderingMinimised bg-indigo-50 dark:bg-gray-900 dark:text-white' => $isTailwind4, + 'laravel-livewire-tables-reorderingMinimised' => $isBootstrap, + '' => $isBootstrap && ($customAttributes['default'] ?? true), + ]) + ->except(['default','default-styling','default-colors']) + }} +> + +
+ + {{ __($localisationPath.'You are currently selecting all') }} + @if(!$simplePagination) @endif + {{ __($localisationPath.'rows') }}. + + + {{ __($localisationPath.'You have selected') }} + + {{ __($localisationPath.'rows, do you want to select all') }} + @if(!$simplePagination) @endif + + + {{ __($localisationPath.'Select All On Page') }} + + + {{ __($localisationPath.'Select All') }} + + + {{ __($localisationPath.'Deselect All') }} + + + {{ __($localisationPath.'Deselect All On Page') }} + + + +
+ + diff --git a/resources/views/components/bulk-actions/thead/tr.blade.php b/resources/views/components/bulk-actions/thead/tr.blade.php new file mode 100755 index 000000000..955be81be --- /dev/null +++ b/resources/views/components/bulk-actions/thead/tr.blade.php @@ -0,0 +1,15 @@ +@aware(['isTailwind', 'isTailwind4', 'tableName']) +merge([ + 'x-cloak' => '', + 'x-show' => 'selectedItems.length > 0 && !currentlyReorderingStatus', + 'data-id' => 'bil', + 'wire:key' => $tableName . "-bulk-select-message", + ]) + ->class([ + 'bg-indigo-50 dark:bg-gray-900 dark:text-white' => $isTailwind, + 'tw4ph bg-indigo-50 dark:bg-gray-900 dark:text-white' => $isTailwind4, + ]) + }} +> + {{ $slot }} + \ No newline at end of file diff --git a/resources/views/components/collapsed-columns/collapsed-columns.blade.php b/resources/views/components/collapsed-columns/collapsed-columns.blade.php new file mode 100755 index 000000000..2df2dbe97 --- /dev/null +++ b/resources/views/components/collapsed-columns/collapsed-columns.blade.php @@ -0,0 +1,48 @@ +@aware([ 'tableName', 'isTailwind', 'isTailwind4','isBootstrap', 'collapsingColumnInfo', 'row', 'rowIndex', 'rowPk', 'tableRowDetails']) + +@if ($collapsingColumnInfo['hasCollapsingColumns'] ?? false) + merge([ + 'wire:loading.class.delay' => 'opacity-50 dark:bg-gray-900 dark:opacity-60', + 'wire:key' => $tableName.'-row-'.$rowPk.'-collapsed-contents', + ]) + ->merge($tableRowDetails['attributes']) + ->class([ + 'hidden rappasoft-striped-row' => $isTailwind && ($tableRowDetails['attributes']['default'] ?? true), + 'tw4ph hidden rappasoft-striped-row' => $isTailwind4 && ($tableRowDetails['attributes']['default'] ?? true), + + 'd-none bg-light rappasoft-striped-row' => $isBootstrap && ($rowIndex % 2 === 0 && ($tableRowDetails['attributes']['default'] ?? true)), + 'd-none bg-white rappasoft-striped-row' => $isBootstrap && ($rowIndex % 2 !== 0 && ($tableRowDetails['attributes']['default'] ?? true)), + + ]) + ->except(['default','default-styling','default-colors']) + }} + > + $isTailwind, + 'tw4ph text-left pt-4 pb-2 px-4' => $isTailwind4, + 'text-start pt-3 p-2' => $isBootstrap, + ]) + > +
+ @tableloop($collapsingColumnInfo['collapsingColumnDetails'] as $colIndex => $columnData) + @php($key = $tableName . '_' . $rowIndex.'_'.$colIndex) +
+ {{ $columnData['title'] }}:
+ +
+ @endtableloop +
+ + +@endif diff --git a/resources/views/components/collapsed-columns/td.blade.php b/resources/views/components/collapsed-columns/td.blade.php new file mode 100755 index 000000000..7c0b0b0b7 --- /dev/null +++ b/resources/views/components/collapsed-columns/td.blade.php @@ -0,0 +1,70 @@ +@aware([ 'tableName','isTailwind','isTailwind4','isBootstrap','rowIndex', 'collapsingColumnInfo']) +@props(['hidden' => false]) + +merge() + ->class([ + 'p-3 table-cell text-center' => $isTailwind, + 'sm:hidden' => $isTailwind && (!($collapsingColumnInfo['shouldCollapseAlways'] ?? false) && !($collapsingColumnInfo['shouldCollapseOnTablet'] ?? false)), + 'md:hidden' => $isTailwind && (!($collapsingColumnInfo['shouldCollapseAlways'] ?? false) && !($collapsingColumnInfo['shouldCollapseOnTablet'] ?? false) && ($collapsingColumnInfo['shouldCollapseOnMobile'] ?? false)), + 'lg:hidden' => $isTailwind && (!($collapsingColumnInfo['shouldCollapseAlways'] ?? false) && (($collapsingColumnInfo['shouldCollapseOnTablet'] ?? false) || ($collapsingColumnInfo['shouldCollapseOnMobile'] ?? false))), + + 'tw4ph p-3 table-cell text-center' => $isTailwind4, + 'tw4ph sm:hidden' => $isTailwind4 && (!($collapsingColumnInfo['shouldCollapseAlways'] ?? false) && !($collapsingColumnInfo['shouldCollapseOnTablet'] ?? false)), + 'tw4ph md:hidden' => $isTailwind4 && (!($collapsingColumnInfo['shouldCollapseAlways'] ?? false) && !($collapsingColumnInfo['shouldCollapseOnTablet'] ?? false) && ($collapsingColumnInfo['shouldCollapseOnMobile'] ?? false)), + 'tw4ph lg:hidden' => $isTailwind4 && (!($collapsingColumnInfo['shouldCollapseAlways'] ?? false) && (($collapsingColumnInfo['shouldCollapseOnTablet'] ?? false) || ($collapsingColumnInfo['shouldCollapseOnMobile'] ?? false))), + + + 'd-sm-none' => $isBootstrap && (!($collapsingColumnInfo['shouldCollapseAlways'] ?? false) && !($collapsingColumnInfo['shouldCollapseOnTablet'] ?? false)), + 'd-md-none' => $isBootstrap && (!($collapsingColumnInfo['shouldCollapseAlways'] ?? false) && !($collapsingColumnInfo['shouldCollapseOnTablet'] ?? false) && ($collapsingColumnInfo['shouldCollapseOnMobile'] ?? false)), + 'd-lg-none' => $isBootstrap && (!($collapsingColumnInfo['shouldCollapseAlways'] ?? false) && (($collapsingColumnInfo['shouldCollapseOnTablet'] ?? false) || ($collapsingColumnInfo['shouldCollapseOnMobile'] ?? false))), + + ]) + }} + :class="currentlyReorderingStatus ? 'laravel-livewire-tables-reorderingMinimised' : ''" +> + @if (! $hidden) + + @endif + \ No newline at end of file diff --git a/resources/views/components/collapsed-columns/th.blade.php b/resources/views/components/collapsed-columns/th.blade.php new file mode 100755 index 000000000..8c6d4b502 --- /dev/null +++ b/resources/views/components/collapsed-columns/th.blade.php @@ -0,0 +1,23 @@ +@aware(['isTailwind','isTailwind4', 'isBootstrap','collapsingColumnInfo']) +@if ($collapsingColumnInfo['hasCollapsingColumns']) + merge() + ->class([ + 'table-cell dark:bg-gray-800 laravel-livewire-tables-reorderingMinimised' => $isTailwind, + 'sm:hidden' => $isTailwind && (!$collapsingColumnInfo['shouldCollapseOnTablet'] && !$collapsingColumnInfo['shouldCollapseAlways']), + 'md:hidden' => $isTailwind && (!$collapsingColumnInfo['shouldCollapseOnMobile'] && !$collapsingColumnInfo['shouldCollapseOnTablet'] && !$collapsingColumnInfo['shouldCollapseAlways']), + 'lg:hidden' => $isTailwind && (!$collapsingColumnInfo['shouldCollapseAlways']), + + 'tw4ph table-cell dark:bg-gray-800 laravel-livewire-tables-reorderingMinimised' => $isTailwind4, + 'tw4ph sm:hidden' => $isTailwind4 && (!$collapsingColumnInfo['shouldCollapseOnTablet'] && !$collapsingColumnInfo['shouldCollapseAlways']), + 'tw4ph md:hidden' => $isTailwind4 && (!$collapsingColumnInfo['shouldCollapseOnMobile'] && !$collapsingColumnInfo['shouldCollapseOnTablet'] && !$collapsingColumnInfo['shouldCollapseAlways']), + 'tw4ph lg:hidden' => $isTailwind4 && (!$collapsingColumnInfo['shouldCollapseAlways']), + + 'd-table-cell laravel-livewire-tables-reorderingMinimised' => $isBootstrap, + 'd-sm-none' => $isBootstrap && (!$collapsingColumnInfo['shouldCollapseOnTablet'] && !$collapsingColumnInfo['shouldCollapseAlways']), + 'd-md-none' => $isBootstrap && (!$collapsingColumnInfo['shouldCollapseOnMobile'] && !$collapsingColumnInfo['shouldCollapseOnTablet']) && !$collapsingColumnInfo['shouldCollapseAlways'], + 'd-lg-none' => $isBootstrap && (!$collapsingColumnInfo['shouldCollapseAlways']), + ]) + }} + > +@endif diff --git a/resources/views/components/collapsed-columns/tr.blade.php b/resources/views/components/collapsed-columns/tr.blade.php new file mode 100755 index 000000000..b79660a25 --- /dev/null +++ b/resources/views/components/collapsed-columns/tr.blade.php @@ -0,0 +1,49 @@ +@aware([ 'tableName', 'isTailwind','isTailwind4','isBootstrap', 'collapsingColumnInfo', 'row', 'rowIndex', 'rowPk', 'tableRowDetails']) + +@if ($collapsingColumnInfo['hasCollapsingColumns']) + merge([ + 'wire:loading.class.delay' => 'opacity-50 dark:bg-gray-900 dark:opacity-60', + 'wire:key' => $tableName.'-row-'.$rowPk.'-collapsed-contents', + ]) + ->merge($tableRowDetails['attributes']) + ->class([ + 'hidden rappasoft-striped-row' => $isTailwind && ($tableRowDetails['attributes']['default'] ?? true), + 'tw4ph hidden rappasoft-striped-row' => $isTailwind4 && ($tableRowDetails['attributes']['default'] ?? true), + + 'd-none bg-light rappasoft-striped-row' => $isBootstrap && ($rowIndex % 2 === 0 && ($tableRowDetails['attributes']['default'] ?? true)), + 'd-none bg-white rappasoft-striped-row' => $isBootstrap && ($rowIndex % 2 !== 0 && ($tableRowDetails['attributes']['default'] ?? true)), + ]) + ->except(['default','default-styling','default-colors']) + }} + > + $isTailwind, + 'tw4ph text-left pt-4 pb-2 px-4' => $isTailwind4, + 'text-start pt-3 p-2' => $isBootstrap, + ]) + > +
+ @tableloop($collapsingColumnInfo['collapsingColumnDetails'] as $colIndex => $columnData) + @php($key = $tableName . '_' . $rowIndex.'_'.$colIndex) +
+ {{ $columnData['title'] }}:
+ +
+ @endtableloop +
+ + +@endif diff --git a/resources/views/components/dropdown/body.blade.php b/resources/views/components/dropdown/body.blade.php new file mode 100644 index 000000000..5156d9143 --- /dev/null +++ b/resources/views/components/dropdown/body.blade.php @@ -0,0 +1,19 @@ +@aware([ 'tableName','isTailwind','isTailwind4','isBootstrap','isBootstrap4','isBootstrap5', 'localisationPath']) +{{-- This is used for the Dropdown Menu Body --}} +
merge() + ->class([ + 'bg-white dark:bg-gray-700 dark:text-white ring-black divide-gray-100 dark:divide-gray-400' => $isTailwind && ($attributes['default-colors'] ?? true), + 'mt-1 py-1 w-full md:w-48 rounded-md shadow-lg ring-1 ring-opacity-5 divide-y focus:outline-none z-50' => $isTailwind && ($attributes['default-styling'] ?? true), + 'twph4 bg-white dark:bg-gray-700 dark:text-white ring-black divide-gray-100 dark:divide-gray-400' => $isTailwind && ($attributes['default-colors'] ?? true), + 'tw4ph mt-1 py-1 w-full md:w-48 rounded-md shadow-lg ring-1 ring-opacity-5 divide-y focus:outline-none z-50' => $isTailwind4 && ($attributes['default-styling'] ?? true), + 'dropdown-menu dropdown-menu-right w-100' => $isBootstrap4 && ($attributes['default-styling'] ?? true), + 'dropdown-menu dropdown-menu-end w-100' => $isBootstrap5 && ($attributes['default-styling'] ?? true), + ]) + ->except(['default','default-styling','default-colors']) + }} +> + {{ $slot }} +
\ No newline at end of file diff --git a/resources/views/components/dropdown/button.blade.php b/resources/views/components/dropdown/button.blade.php new file mode 100644 index 000000000..25c7ee41e --- /dev/null +++ b/resources/views/components/dropdown/button.blade.php @@ -0,0 +1,17 @@ +@aware(['isTailwind','isTailwind4','isBootstrap','isBootstrap4','isBootstrap5']) +{{-- This is used for Buttons --}} + \ No newline at end of file diff --git a/resources/views/components/dropdown/wrapper.blade.php b/resources/views/components/dropdown/wrapper.blade.php new file mode 100644 index 000000000..c4e3423d1 --- /dev/null +++ b/resources/views/components/dropdown/wrapper.blade.php @@ -0,0 +1,17 @@ +@aware(['isTailwind','isTailwind4','isBootstrap','isBootstrap4','isBootstrap5']) +
$isTailwind, + 'tw4ph w-full md:w-auto mb-4 md:mb-0' => $isTailwind4, + 'mb-3 mb-md-0' => $isBootstrap, + ]) +> +
$isTailwind, + 'tw4ph relative inline-block text-left z-10 w-full md:w-auto' => $isTailwind4, + 'dropdown d-block d-md-inline' => $isBootstrap, + ]) + > + {{ $slot }} +
+
\ No newline at end of file diff --git a/resources/views/components/external/filters/livewire-array-filter.blade.php b/resources/views/components/external/filters/livewire-array-filter.blade.php old mode 100644 new mode 100755 diff --git a/resources/views/components/forms/button.blade.php b/resources/views/components/forms/button.blade.php new file mode 100644 index 000000000..25c7ee41e --- /dev/null +++ b/resources/views/components/forms/button.blade.php @@ -0,0 +1,17 @@ +@aware(['isTailwind','isTailwind4','isBootstrap','isBootstrap4','isBootstrap5']) +{{-- This is used for Buttons --}} + \ No newline at end of file diff --git a/resources/views/components/forms/checkbox.blade.php b/resources/views/components/forms/checkbox.blade.php old mode 100644 new mode 100755 index 4b2b9b940..e466ef183 --- a/resources/views/components/forms/checkbox.blade.php +++ b/resources/views/components/forms/checkbox.blade.php @@ -1,11 +1,18 @@ -@aware(['tableName','primaryKey', 'isTailwind', 'isBootstrap', 'isBootstrap4', 'isBootstrap5']) -@props(['checkboxAttributes']) - false]) +merge($checkboxAttributes)->class([ - 'border-gray-300 text-indigo-600 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-900 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600 dark:focus:bg-gray-600' => ($isTailwind) && ($checkboxAttributes['default-colors'] ?? ($checkboxAttributes['default'] ?? true)), - 'rounded shadow-sm transition duration-150 ease-in-out focus:ring focus:ring-opacity-50' => ($isTailwind) && ($checkboxAttributes['default-styling'] ?? ($checkboxAttributes['default'] ?? true)), + $attributes->merge(['type' => 'checkbox'])->merge($checkboxAttributes)->class([ + // Tailwind 3 + 'border-gray-300 text-indigo-600 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-900 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600 dark:focus:bg-gray-600' => $isTailwind && ($checkboxAttributes['default-colors'] ?? ($checkboxAttributes['default'] ?? true)), + 'rounded shadow-sm transition duration-150 ease-in-out focus:ring focus:ring-opacity-50' => $isTailwind && ($checkboxAttributes['default-styling'] ?? ($checkboxAttributes['default'] ?? true)), + + // Tailwind 4 + 'tw4ph border-gray-300 text-indigo-600 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-900 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600 dark:focus:bg-gray-600' => $isTailwind4 && ($checkboxAttributes['default-colors'] ?? ($checkboxAttributes['default'] ?? true)), + 'tw4ph rounded shadow-sm transition duration-150 ease-in-out focus:ring focus:ring-opacity-50' => $isTailwind4 && ($checkboxAttributes['default-styling'] ?? ($checkboxAttributes['default'] ?? true)), + + // Bootstrap 'form-check-input' => ($isBootstrap5) && ($checkboxAttributes['default'] ?? true), ])->except(['default','default-styling','default-colors']) }} -/> \ No newline at end of file +/> \ No newline at end of file diff --git a/resources/views/components/includes/actions.blade.php b/resources/views/components/includes/actions.blade.php deleted file mode 100644 index 837d6a136..000000000 --- a/resources/views/components/includes/actions.blade.php +++ /dev/null @@ -1,21 +0,0 @@ -@aware(['isTailwind', 'isBootstrap']) -@php($actionWrapperAttributes = $this->getActionWrapperAttributes()) -
merge($this->actionWrapperAttributes) - ->class([ - 'flex flex-cols py-2 space-x-2' => $isTailwind && ($actionWrapperAttributes['default-styling'] ?? true), - '' => $isTailwind && ($actionWrapperAttributes['default-colors'] ?? true), - 'd-flex flex-cols py-2 space-x-2' => $isBootstrap && ($this->actionWrapperAttributes['default-styling'] ?? true), - '' => $isBootstrap && ($actionWrapperAttributes['default-colors'] ?? true), - 'justify-start' => $this->getActionsPosition === 'left', - 'justify-center' => $this->getActionsPosition === 'center', - 'justify-end' => $this->getActionsPosition === 'right', - 'pl-2' => $this->showActionsInToolbar && $this->getActionsPosition === 'left', - 'pr-2' => $this->showActionsInToolbar && $this->getActionsPosition === 'right', - ]) - ->except(['default','default-styling','default-colors']) - }} > - @foreach($this->getActions as $action) - {{ $action->render() }} - @endforeach -
diff --git a/resources/views/components/includes/loading.blade.php b/resources/views/components/includes/loading.blade.php old mode 100644 new mode 100755 index 6d7eaf7a3..8736a2abe --- a/resources/views/components/includes/loading.blade.php +++ b/resources/views/components/includes/loading.blade.php @@ -1,42 +1,44 @@ -@aware(['tableName','isTailwind','isBootstrap']) -@props(['colCount' => 1]) +@aware(['tableName','isTailwind','isTailwind4','isBootstrap']) +@props(['colCount' => 1, 'loadingPlaceholderDetails']) -@php - $loaderRow = $this->getLoadingPlaceHolderRowAttributes(); - $loaderCell = $this->getLoadingPlaceHolderCellAttributes(); - $loaderIcon = $this->getLoadingPlaceHolderIconAttributes(); -@endphp -merge($loaderRow) - ->class([ - 'hidden w-full text-center place-items-center align-middle' => $isTailwind && ($loaderRow['default'] ?? true), - 'd-none w-100 text-center align-items-center' => $isBootstrap && ($loaderRow['default'] ?? true), - ]) - ->except(['default','default-styling','default-colors']) -}}> - merge($loaderCell) + + merge($loadingPlaceholderDetails['loaderRow']) ->class([ - 'py-4' => $isTailwind && ($loaderCell['default'] ?? true), - 'py-4' => $isBootstrap && ($loaderCell['default'] ?? true), + 'hidden w-full text-center place-items-center align-middle' => $isTailwind && ($loadingPlaceholderDetails['loaderRow']['default'] ?? true), + 'tw4ph hidden w-full text-center place-items-center align-middle' => $isTailwind4 && ($loadingPlaceholderDetails['loaderRow']['default'] ?? true), + 'd-none w-100 text-center align-items-center' => $isBootstrap && ($loadingPlaceholderDetails['loaderRow']['default'] ?? true), + + 'unsortable' ]) - ->except(['default','default-styling','default-colors', 'colspan','wire:key']) - }}> - @if($this->hasLoadingPlaceholderBlade()) - @include($this->getLoadingPlaceHolderBlade(), ['colCount' => $colCount]) - @else -
-
merge($loaderIcon) - ->class([ - 'lds-hourglass' => $isTailwind && ($loaderIcon['default'] ?? true), - 'lds-hourglass' => $isBootstrap && ($loaderIcon['default'] ?? true), - ]) - ->except(['default','default-styling','default-colors']) - }}>
-
{!! $this->getLoadingPlaceholderContent() !!}
-
- @endif - - + ->except(['default','default-styling','default-colors']) + }} > + merge($loadingPlaceholderDetails['loaderCell']) + ->class([ + 'py-4' => $isTailwind && ($loadingPlaceholderDetails['loaderCell']['default'] ?? true), + 'tw4ph py-4' => $isTailwind4 && ($loadingPlaceholderDetails['loaderCell']['default'] ?? true), + 'bs py-4' => $isBootstrap && ($loadingPlaceholderDetails['loaderCell']['default'] ?? true), + ]) + ->except(['default','default-styling','default-colors', 'colspan','wire:key']) + }}> + @if($loadingPlaceholderDetails['hasLoadingPlaceholderBlade']) + @include($this->loadingPlaceholderDetails['loadingPlaceHolderBlade'], ['colCount' => $colCount]) + @else +
+
merge($loadingPlaceholderDetails['loaderIcon']) + ->class([ + 'lds-hourglass' => $isTailwind && ($loadingPlaceholderDetails['loaderIcon']['default'] ?? true), + 'tw4ph lds-hourglass' => $isTailwind4 && ($loadingPlaceholderDetails['loaderIcon']['default'] ?? true), + 'bs lds-hourglass' => $isBootstrap && ($loadingPlaceholderDetails['loaderIcon']['default'] ?? true), + ]) + ->except(['default','default-styling','default-colors']) + }}>
+
{!! $loadingPlaceholderDetails['loadingPlaceholderContent'] !!}
+
+ @endif + + + \ No newline at end of file diff --git a/resources/views/components/pagination.blade.php b/resources/views/components/pagination.blade.php old mode 100644 new mode 100755 index 633b31b24..8c925251c --- a/resources/views/components/pagination.blade.php +++ b/resources/views/components/pagination.blade.php @@ -1,5 +1,5 @@ -@aware(['isTailwind','isBootstrap','isBootstrap4', 'isBootstrap5', 'localisationPath']) -@props(['currentRows']) +@aware(['isTailwind','isTailwind4','isBootstrap','isBootstrap4', 'isBootstrap5', 'localisationPath']) +@php($currentRows = $this->getRows) @includeWhen( $this->hasConfigurableAreaFor('before-pagination'), $this->getConfigurableAreaFor('before-pagination'), @@ -8,10 +8,10 @@
getPaginationWrapperAttributesBag() }}> @if ($this->paginationVisibilityIsEnabled()) - @if ($isTailwind) + @if ($isTailwind || $isTailwind4)
- @if ($this->paginationIsEnabled && $this->isPaginationMethod('standard') && $currentRows->lastPage() > 1 && $this->showPaginationDetails) + @if ($this->paginationIsEnabled() && $this->isPaginationMethod('standard') && $currentRows->lastPage() > 1 && $this->showPaginationDetails())

{{ __($localisationPath.'Showing') }} {{ $currentRows->firstItem() }} @@ -21,16 +21,16 @@ {{ __($localisationPath.'results') }}

- @elseif ($this->paginationIsEnabled && $this->isPaginationMethod('simple') && $this->showPaginationDetails) + @elseif ($this->paginationIsEnabled() && $this->isPaginationMethod('simple') && $this->showPaginationDetails())

{{ __($localisationPath.'Showing') }} {{ $currentRows->firstItem() }} {{ __($localisationPath.'to') }} {{ $currentRows->lastItem() }}

- @elseif ($this->paginationIsEnabled && $this->isPaginationMethod('cursor')) + @elseif ($this->paginationIsEnabled() && $this->isPaginationMethod('cursor')) @else - @if($this->showPaginationDetails) + @if($this->showPaginationDetails())

{{ __($localisationPath.'Showing') }} {{ $currentRows->count() }} @@ -40,12 +40,12 @@ @endif

- @if ($this->paginationIsEnabled) + @if ($this->paginationIsEnabled()) {{ $currentRows->links('livewire-tables::specific.tailwind.'.(!$this->isPaginationMethod('standard') ? 'simple-' : '').'pagination') }} @endif
@else - @if ($this->paginationIsEnabled && $this->isPaginationMethod('standard') && $currentRows->lastPage() > 1) + @if ($this->paginationIsEnabled() && $this->isPaginationMethod('standard') && $currentRows->lastPage() > 1)
{{ $currentRows->links('livewire-tables::specific.bootstrap-4.pagination') }} @@ -56,7 +56,7 @@ "text-md-right" => $isBootstrap4, "text-md-end" => $isBootstrap5, ])> - @if($this->showPaginationDetails) + @if($this->showPaginationDetails()) {{ __($localisationPath.'Showing') }} {{ $currentRows->count() ? $currentRows->firstItem() : 0 }} {{ __($localisationPath.'to') }} @@ -67,7 +67,7 @@ @endif
- @elseif ($this->paginationIsEnabled && $this->isPaginationMethod('simple')) + @elseif ($this->paginationIsEnabled() && $this->isPaginationMethod('simple'))
{{ $currentRows->links('livewire-tables::specific.bootstrap-4.simple-pagination') }} @@ -78,7 +78,7 @@ "text-md-right" => $isBootstrap4, "text-md-end" => $isBootstrap5, ])> - @if($this->showPaginationDetails) + @if($this->showPaginationDetails()) {{ __($localisationPath.'Showing') }} {{ $currentRows->count() ? $currentRows->firstItem() : 0 }} {{ __($localisationPath.'to') }} @@ -86,7 +86,7 @@ @endif
- @elseif ($this->paginationIsEnabled && $this->isPaginationMethod('cursor')) + @elseif ($this->paginationIsEnabled() && $this->isPaginationMethod('cursor'))
{{ $currentRows->links('livewire-tables::specific.bootstrap-4.simple-pagination') }} @@ -95,7 +95,7 @@ @else
- @if($this->showPaginationDetails) + @if($this->showPaginationDetails()) {{ __($localisationPath.'Showing') }} {{ $currentRows->count() }} {{ __($localisationPath.'results') }} diff --git a/resources/views/components/table/td/reorder.blade.php b/resources/views/components/reorder/td.blade.php old mode 100644 new mode 100755 similarity index 75% rename from resources/views/components/table/td/reorder.blade.php rename to resources/views/components/reorder/td.blade.php index 6b8c9b7a5..d8e9028db --- a/resources/views/components/table/td/reorder.blade.php +++ b/resources/views/components/reorder/td.blade.php @@ -1,7 +1,6 @@ -@aware([ 'tableName', 'isTailwind', 'isBootstrap', 'isBootstrap4', 'isBootstrap5']) -@props(['rowID', 'rowIndex']) +@aware([ 'tableName', 'isTailwind', 'isTailwind4', 'isBootstrap', 'isBootstrap4', 'isBootstrap5', 'rowPk']) - + $isTailwind, + 'tw4ph inline w-4 h-4' => $isTailwind4, 'd-inline' => ($isBootstrap4 || $isBootstrap5), ]) @style([ diff --git a/resources/views/components/reorder/th.blade.php b/resources/views/components/reorder/th.blade.php new file mode 100755 index 000000000..4863db847 --- /dev/null +++ b/resources/views/components/reorder/th.blade.php @@ -0,0 +1,23 @@ +@aware(['isTailwind','isTailwind4', 'isBootstrap', 'tableName']) +@php + $customThAttributes = $this->hasReorderThAttributes() ? $this->getReorderThAttributes() : $this->getAllThAttributes($this->getReorderColumn())['customAttributes']; +@endphp + +merge($customThAttributes) + ->class([ + 'table-cell px-6 py-3 text-left text-xs font-medium whitespace-nowrap uppercase tracking-wider' => $isTailwind && (($customThAttributes['default-styling'] ?? true) || ($customThAttributes['default'] ?? true)), + 'text-gray-500 dark:bg-gray-800 dark:text-gray-400' => $isTailwind && (($customThAttributes['default-colors'] ?? true) || ($customThAttributes['default'] ?? true)), + + 'tw4ph table-cell px-6 py-3 text-left text-xs font-medium whitespace-nowrap uppercase tracking-wider' => $isTailwind4 && (($customThAttributes['default-styling'] ?? true) || ($customThAttributes['default'] ?? true)), + 'tw4ph text-gray-500 dark:bg-gray-800 dark:text-gray-400' => $isTailwind4 && (($customThAttributes['default-colors'] ?? true) || ($customThAttributes['default'] ?? true)), + + 'laravel-livewire-tables-reorderingMinimised' => $isBootstrap && ($customThAttributes['default'] ?? true), + ]) + ->except(['default','default-styling','default-colors']) + }} +> +
+ + diff --git a/resources/views/components/table.blade.php b/resources/views/components/table.blade.php deleted file mode 100644 index a972275b0..000000000 --- a/resources/views/components/table.blade.php +++ /dev/null @@ -1,100 +0,0 @@ -@aware([ 'tableName','isTailwind','isBootstrap']) - -@php - $customAttributes = [ - 'wrapper' => $this->getTableWrapperAttributes(), - 'table' => $this->getTableAttributes(), - 'thead' => $this->getTheadAttributes(), - 'tbody' => $this->getTbodyAttributes(), - ]; -@endphp - -@if ($isTailwind) -
merge($customAttributes['wrapper']) - ->class([ - 'shadow overflow-y-auto border-b border-gray-200 dark:border-gray-700 sm:rounded-lg' => $customAttributes['wrapper']['default'] ?? true - ]) - ->except(['default','default-styling','default-colors']) }} - > - merge($customAttributes['table']) - ->class(['min-w-full divide-y divide-gray-200 dark:divide-none' => $customAttributes['table']['default'] ?? true]) - ->except(['default','default-styling','default-colors']) }} - - > - merge($customAttributes['thead']) - ->class([ - 'bg-gray-50 dark:bg-gray-800' => $customAttributes['thead']['default'] ?? true - ]) - ->except(['default','default-styling','default-colors']) }} - > - - {{ $thead }} - - - - merge($customAttributes['tbody']) - ->class([ - 'bg-white divide-y divide-gray-200 dark:bg-gray-800 dark:divide-none' => $customAttributes['tbody']['default'] ?? true - ]) - ->except(['default','default-styling','default-colors']) }} - > - {{ $slot }} - - - @isset($tfoot) - - {{ $tfoot }} - - @endisset -
-
-@elseif ($isBootstrap) -
merge($customAttributes['wrapper']) - ->class(['table-responsive' => $customAttributes['wrapper']['default'] ?? true]) - ->except(['default','default-styling','default-colors']) }} - > - merge($customAttributes['table']) - ->class(['laravel-livewire-table table' => $customAttributes['table']['default'] ?? true]) - ->except(['default','default-styling','default-colors']) - }} - > - merge($customAttributes['thead']) - ->class(['' => $customAttributes['thead']['default'] ?? true]) - ->except(['default','default-styling','default-colors']) }} - > - - {{ $thead }} - - - - merge($customAttributes['tbody']) - ->class(['' => $customAttributes['tbody']['default'] ?? true]) - ->except(['default','default-styling','default-colors']) }} - > - {{ $slot }} - - - @isset($tfoot) - - {{ $tfoot }} - - @endisset -
-
-@endif diff --git a/resources/views/components/table/collapsed-columns.blade.php b/resources/views/components/table/collapsed-columns.blade.php deleted file mode 100644 index e3ccbbd0a..000000000 --- a/resources/views/components/table/collapsed-columns.blade.php +++ /dev/null @@ -1,52 +0,0 @@ -@aware([ 'tableName', 'primaryKey','isTailwind','isBootstrap']) -@props(['row', 'rowIndex']) - -@if ($this->collapsingColumnsAreEnabled && $this->hasCollapsedColumns) - @php($customAttributes = $this->getTrAttributes($row, $rowIndex)) - merge([ - 'wire:loading.class.delay' => 'opacity-50 dark:bg-gray-900 dark:opacity-60', - 'wire:key' => $tableName.'-row-'.$row->{$primaryKey}.'-collapsed-contents', - ]) - ->merge($customAttributes) - ->class([ - 'hidden bg-white dark:bg-gray-700 dark:text-white rappasoft-striped-row' => ($isTailwind && ($customAttributes['default'] ?? true) && $rowIndex % 2 === 0), - 'hidden bg-gray-50 dark:bg-gray-800 dark:text-white rappasoft-striped-row' => ($isTailwind && ($customAttributes['default'] ?? true) && $rowIndex % 2 !== 0), - 'd-none bg-light rappasoft-striped-row' => ($isBootstrap && $rowIndex % 2 === 0 && ($customAttributes['default'] ?? true)), - 'd-none bg-white rappasoft-striped-row' => ($isBootstrap && $rowIndex % 2 !== 0 && ($customAttributes['default'] ?? true)), - ]) - ->except(['default','default-styling','default-colors']) - }} - > - $isTailwind, - 'text-start pt-3 p-2' => $isBootstrap, - ])> -
- @foreach($this->getCollapsedColumnsForContent as $colIndex => $column) - -

$isTailwind, - 'sm:block' => $isTailwind && $column->shouldCollapseAlways(), - 'sm:block md:hidden' => $isTailwind && !$column->shouldCollapseAlways() && !$column->shouldCollapseOnTablet() && $column->shouldCollapseOnMobile(), - 'sm:block lg:hidden' => $isTailwind && !$column->shouldCollapseAlways() && ($column->shouldCollapseOnTablet() || $column->shouldCollapseOnMobile()), - - 'd-block mb-2' => $isBootstrap, - 'd-sm-none' => $isBootstrap && !$column->shouldCollapseAlways() && !$column->shouldCollapseOnTablet() && !$column->shouldCollapseOnMobile(), - 'd-md-none' => $isBootstrap && !$column->shouldCollapseAlways() && !$column->shouldCollapseOnTablet() && $column->shouldCollapseOnMobile(), - 'd-lg-none' => $isBootstrap && !$column->shouldCollapseAlways() && ($column->shouldCollapseOnTablet() || $column->shouldCollapseOnMobile()), - ])> - {{ $column->getTitle() }}: - @if($column->isHtml()) - {!! $column->setIndexes($rowIndex, $colIndex)->renderContents($row) !!} - @else - {{ $column->setIndexes($rowIndex, $colIndex)->renderContents($row) }} - @endif -

- @endforeach -
- - -@endif diff --git a/resources/views/components/table/empty.blade.php b/resources/views/components/table/empty.blade.php old mode 100644 new mode 100755 index 705f93d48..c06f70819 --- a/resources/views/components/table/empty.blade.php +++ b/resources/views/components/table/empty.blade.php @@ -1,19 +1,13 @@ -@aware(['isTailwind','isBootstrap']) +@aware(['isTailwind','isTailwind4','isBootstrap', 'collapsingColumnInfo']) -@php($attributes = $attributes->merge(['wire:key' => 'empty-message-'.$this->getId()])) - -@if ($isTailwind) - - +merge(['wire:key' => 'empty-message-'.$this->getId()]) }}> + + @if ($isTailwind || $isTailwind4)
{{ $this->getEmptyMessage() }}
- - -@elseif ($isBootstrap) - - + @elseif ($isBootstrap) {{ $this->getEmptyMessage() }} - - -@endif + @endif + + diff --git a/resources/views/components/table/table.blade.php b/resources/views/components/table/table.blade.php new file mode 100755 index 000000000..807abe531 --- /dev/null +++ b/resources/views/components/table/table.blade.php @@ -0,0 +1,34 @@ +@aware(['tableName','primaryKey','isTailwind', 'isTailwind4', 'isBootstrap', 'coreTableAttributes']) +@props(['bulkActionsTdAttributes','bulkActionsTdCheckboxAttributes']) + +merge($coreTableAttributes['table']) + ->class([ + 'rappasoft-livewire-table-new' => $isTailwind, + 'divide-gray-200 dark:divide-none' => $isTailwind && ($coreTableAttributes['table']['default-colors'] ?? ($coreTableAttributes['table']['default'] ?? true)), + 'min-w-full divide-y' => $isTailwind && ($coreTableAttributes['table']['default-styling'] ?? ($coreTableAttributes['table']['default'] ?? true)), + + 'tw4ph rappasoft-livewire-table-new' => $isTailwind4, + 'tw4ph divide-gray-200 dark:divide-none' => $isTailwind4 && ($coreTableAttributes['table']['default-colors'] ?? ($coreTableAttributes['table']['default'] ?? true)), + 'tw4ph min-w-full divide-y' => $isTailwind4 && ($coreTableAttributes['table']['default-styling'] ?? ($coreTableAttributes['table']['default'] ?? true)), + + '' => $isBootstrap && ($coreTableAttributes['table']['default-colors'] ?? ($coreTableAttributes['table']['default'] ?? true)), + 'laravel-livewire-table table' => $isBootstrap && ($coreTableAttributes['table']['default-styling'] ?? ($coreTableAttributes['table']['default'] ?? true)), + ]) + ->except(['default','default-styling','default-colors', 'wire:key']) }} + wire:key="bookingitemstable-table-{{ rand(5828,458218) }}" +> + + + @php($currentRows = $this->getRows) + + @if(count($currentRows) > 0) + @tableloop ($currentRows as $rowIndex => $row) + @php($rowPk = $row->{$primaryKey}) + + @endtableloop + @else + + @endif + + +
diff --git a/resources/views/components/table/td.blade.php b/resources/views/components/table/td.blade.php deleted file mode 100644 index 9fae459d3..000000000 --- a/resources/views/components/table/td.blade.php +++ /dev/null @@ -1,31 +0,0 @@ -@aware([ 'row', 'rowIndex', 'tableName', 'primaryKey','isTailwind','isBootstrap']) -@props(['column', 'colIndex']) - -@php - $customAttributes = $this->getTdAttributes($column, $row, $colIndex, $rowIndex) -@endphp - -isClickable()) - @if($this->getTableRowUrlTarget($row) === 'navigate') wire:navigate href="{{ $this->getTableRowUrl($row) }}" - @else onclick="window.open('{{ $this->getTableRowUrl($row) }}', '{{ $this->getTableRowUrlTarget($row) ?? '_self' }}')" - @endif - @endif - {{ - $attributes->merge($customAttributes) - ->class([ - 'px-6 py-4 whitespace-nowrap text-sm font-medium dark:text-white' => $isTailwind && ($customAttributes['default'] ?? true), - 'hidden' => $isTailwind && $column && $column->shouldCollapseAlways(), - 'hidden md:table-cell' => $isTailwind && $column && $column->shouldCollapseOnMobile(), - 'hidden lg:table-cell' => $isTailwind && $column && $column->shouldCollapseOnTablet(), - '' => $isBootstrap && ($customAttributes['default'] ?? true), - 'd-none' => $isBootstrap && $column && $column->shouldCollapseAlways(), - 'd-none d-md-table-cell' => $isBootstrap && $column && $column->shouldCollapseOnMobile(), - 'd-none d-lg-table-cell' => $isBootstrap && $column && $column->shouldCollapseOnTablet(), - 'laravel-livewire-tables-cursor' => $isBootstrap && $column && $column->isClickable(), - ]) - ->except(['default','default-styling','default-colors']) - }} - > - {{ $slot }} - diff --git a/resources/views/components/table/td/bulk-actions.blade.php b/resources/views/components/table/td/bulk-actions.blade.php deleted file mode 100644 index 1b4049042..000000000 --- a/resources/views/components/table/td/bulk-actions.blade.php +++ /dev/null @@ -1,22 +0,0 @@ -@aware([ 'tableName','primaryKey', 'isTailwind', 'isBootstrap', 'isBootstrap4', 'isBootstrap5']) -@props(['row', 'rowIndex']) - -@php - $tdAttributes = $this->getBulkActionsTdAttributes; - $tdCheckboxAttributes = $this->getBulkActionsTdCheckboxAttributes; -@endphp - -@if ($this->showBulkActionsSections()) - -
$isTailwind, - 'form-check' => $isBootstrap5, - ])> - -
- -@endif diff --git a/resources/views/components/table/td/collapsed-columns.blade.php b/resources/views/components/table/td/collapsed-columns.blade.php deleted file mode 100644 index 078c1e39b..000000000 --- a/resources/views/components/table/td/collapsed-columns.blade.php +++ /dev/null @@ -1,52 +0,0 @@ -@aware([ 'tableName','isTailwind','isBootstrap']) -@props(['rowIndex', 'hidden' => false]) - -@if ($this->collapsingColumnsAreEnabled && $this->hasCollapsedColumns) - merge() - ->class([ - 'p-3 table-cell text-center' => $isTailwind, - 'sm:hidden' => $isTailwind && !$this->shouldCollapseAlways() && !$this->shouldCollapseOnTablet(), - 'md:hidden' => $isTailwind && !$this->shouldCollapseAlways() && !$this->shouldCollapseOnTablet() && $this->shouldCollapseOnMobile(), - 'lg:hidden' => $isTailwind && !$this->shouldCollapseAlways() && ($this->shouldCollapseOnTablet() || $this->shouldCollapseOnMobile()), - 'd-sm-none' => $isBootstrap && !$this->shouldCollapseAlways() && !$this->shouldCollapseOnTablet(), - 'd-md-none' => $isBootstrap && !$this->shouldCollapseAlways() && !$this->shouldCollapseOnTablet() && $this->shouldCollapseOnMobile(), - 'd-lg-none' => $isBootstrap && !$this->shouldCollapseAlways() && ($this->shouldCollapseOnTablet() || $this->shouldCollapseOnMobile()), - ]) - }} - :class="currentlyReorderingStatus ? 'laravel-livewire-tables-reorderingMinimised' : ''" - > - @if (! $hidden) - - @endif - -@endif diff --git a/resources/views/components/table/td/plain.blade.php b/resources/views/components/table/td/plain.blade.php old mode 100644 new mode 100755 index d47872a03..6511e69ae --- a/resources/views/components/table/td/plain.blade.php +++ b/resources/views/components/table/td/plain.blade.php @@ -1,31 +1,19 @@ -@aware([ 'rowIndex', 'rowID','isTailwind','isBootstrap']) -@props(['column' => null, 'customAttributes' => [], 'displayMinimisedOnReorder' => false, 'hideUntilReorder' => false]) +@aware([ 'rowIndex', 'rowID','isTailwind','isTailwind4','isBootstrap', 'collapsingColumnInfo']) +@props(['column' => null, 'colIndex' => null, 'customAttributes' => [], 'displayMinimisedOnReorder' => false, 'hideUntilReorder' => false]) +merge($customAttributes) + ->merge([ + 'x-cloak' => $isTailwind || $isTailwind4 + ]) + ->class([ + 'px-6 py-4 whitespace-nowrap text-sm font-medium dark:text-white' => $isTailwind && ($customAttributes['default'] ?? true), + 'tw4ph px-6 py-4 whitespace-nowrap text-sm font-medium dark:text-white' => $isTailwind4 && ($customAttributes['default'] ?? true), -@if ($isTailwind) - merge($customAttributes) - ->class([ - 'px-6 py-4 whitespace-nowrap text-sm font-medium dark:text-white' => $customAttributes['default'] ?? true, - 'hidden' => $column && $column->shouldCollapseAlways(), - 'hidden md:table-cell' => $column && $column->shouldCollapseOnMobile(), - 'hidden lg:table-cell' => $column && $column->shouldCollapseOnTablet(), - ]) - ->except(['default','default-styling','default-colors']) - }} @if($hideUntilReorder) x-show="reorderDisplayColumn" @endif > - {{ $slot }} - -@elseif ($isBootstrap) - merge($customAttributes) - ->class([ - '' => $customAttributes['default'] ?? true, - 'd-none' => $column && $column->shouldCollapseAlways(), - 'd-none d-md-table-cell' => $column && $column->shouldCollapseOnMobile(), - 'd-none d-lg-table-cell' => $column && $column->shouldCollapseOnTablet(), - ]) - ->except(['default','default-styling','default-colors']) - }}> - {{ $slot }} - -@endif + '' => $isBootstrap && ($customAttributes['default'] ?? true), + ]) + ->class($collapsingColumnInfo['collapsingColumnClasses'][$colIndex] ?? '') + ->except(['default','default-styling','default-colors']) +}} @if($hideUntilReorder) x-show="reorderDisplayColumn" @endif > + {{ $slot }} + diff --git a/resources/views/components/table/td/td.blade.php b/resources/views/components/table/td/td.blade.php new file mode 100755 index 000000000..315bada48 --- /dev/null +++ b/resources/views/components/table/td/td.blade.php @@ -0,0 +1,21 @@ +@aware(['isTailwind','isTailwind4','isBootstrap', 'collapsingColumnInfo', 'tableRowDetails']) +@props(['colIndex', 'isClickable' => false, 'customAttributes' => ['default' => true]]) + +merge($isClickable ? $tableRowDetails['tdAttribs'] : [])->merge($customAttributes) + ->class([ + 'px-6 py-4 whitespace-nowrap text-sm font-medium dark:text-white' => $isTailwind && ($customAttributes['default'] ?? true), + 'cursor-pointer' => $isTailwind && ($isClickable && ($tableRowDetails['url'] !== null && ($tableRowDetails['attributes']['default'] ?? true))), + + 'tw4ph px-6 py-4 whitespace-nowrap text-sm font-medium dark:text-white' => $isTailwind4 && ($customAttributes['default'] ?? true), + 'tw4ph cursor-pointer' => $isTailwind4 && ($isClickable && ($tableRowDetails['url'] !== null && ($tableRowDetails['attributes']['default'] ?? true))), + + '' => $isBootstrap && ($customAttributes['default'] ?? true), + 'laravel-livewire-tables-cursor' => $isBootstrap && $isClickable, + ]) + ->class($collapsingColumnInfo['collapsingColumnClasses'][$colIndex] ?? '') + ->except(['default','default-styling','default-colors']) + }} +> + {{ $slot }} + diff --git a/resources/views/components/table/th/bulk-actions.blade.php b/resources/views/components/table/th/bulk-actions.blade.php deleted file mode 100644 index 64bc3632c..000000000 --- a/resources/views/components/table/th/bulk-actions.blade.php +++ /dev/null @@ -1,33 +0,0 @@ -@aware(['tableName','isTailwind', 'isBootstrap']) -@php - $customAttributes = $this->hasBulkActionsThAttributes ? $this->getBulkActionsThAttributes : $this->getAllThAttributes($this->getBulkActionsColumn())['customAttributes']; - $bulkActionsThCheckboxAttributes = $this->getBulkActionsThCheckboxAttributes(); -@endphp - -@if ($this->bulkActionsAreEnabled() && $this->hasBulkActions()) - -
$isTailwind, - 'form-check' => $isBootstrap, - ]) - > - merge($bulkActionsThCheckboxAttributes)->class([ - 'border-gray-300 text-indigo-600 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-900 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600 dark:focus:bg-gray-600' => $isTailwind && (($bulkActionsThCheckboxAttributes['default'] ?? true) || ($bulkActionsThCheckboxAttributes['default-colors'] ?? true)), - 'rounded shadow-sm transition duration-150 ease-in-out focus:ring focus:ring-opacity-50 ' => $isTailwind && (($bulkActionsThCheckboxAttributes['default'] ?? true) || ($bulkActionsThCheckboxAttributes['default-styling'] ?? true)), - 'form-check-input' => $isBootstrap && ($bulkActionsThCheckboxAttributes['default'] ?? true), - ])->except(['default','default-styling','default-colors']) - }} - /> -
- -@endif \ No newline at end of file diff --git a/resources/views/components/table/th/collapsed-columns.blade.php b/resources/views/components/table/th/collapsed-columns.blade.php deleted file mode 100644 index e05021bd2..000000000 --- a/resources/views/components/table/th/collapsed-columns.blade.php +++ /dev/null @@ -1,16 +0,0 @@ -@aware(['isTailwind', 'isBootstrap']) -@if ($this->collapsingColumnsAreEnabled && $this->hasCollapsedColumns) - merge() - ->class([ - 'table-cell dark:bg-gray-800 laravel-livewire-tables-reorderingMinimised' => $isTailwind, - 'sm:hidden' => $isTailwind && !$this->shouldCollapseOnTablet && !$this->shouldCollapseAlways, - 'md:hidden' => $isTailwind && !$this->shouldCollapseOnMobile && !$this->shouldCollapseOnTablet && !$this->shouldCollapseAlways, - 'lg:hidden' => $isTailwind && !$this->shouldCollapseAlways, - 'd-table-cell laravel-livewire-tables-reorderingMinimised' => $isBootstrap, - 'd-sm-none' => $isBootstrap && !$this->shouldCollapseOnTablet && !$this->shouldCollapseAlways, - 'd-md-none' => $isBootstrap && !$this->shouldCollapseOnMobile && !$this->shouldCollapseOnTablet && !$this->shouldCollapseAlways, - 'd-lg-none' => $isBootstrap && !$this->shouldCollapseAlways, - ]) - }}> -@endif diff --git a/resources/views/components/table/th/label.blade.php b/resources/views/components/table/th/label.blade.php old mode 100644 new mode 100755 diff --git a/resources/views/components/table/th/plain.blade.php b/resources/views/components/table/th/plain.blade.php old mode 100644 new mode 100755 index 929bf1630..acd6ca08f --- a/resources/views/components/table/th/plain.blade.php +++ b/resources/views/components/table/th/plain.blade.php @@ -1,12 +1,19 @@ -@aware(['isTailwind', 'isBootstrap']) +@aware(['isTailwind', 'isTailwind4','isBootstrap']) @props(['displayMinimisedOnReorder' => false, 'hideUntilReorder' => false, 'customAttributes' => ['default' => true]]) merge($customAttributes)->class([ + $attributes->merge($customAttributes) + ->class([ 'table-cell px-3 py-2 md:px-6 md:py-3 text-center md:text-left laravel-livewire-tables-reorderingMinimised' => $isTailwind && (($customAttributes['default-styling'] ?? true) || ($customAttributes['default'] ?? true)), 'bg-gray-50 dark:bg-gray-800' => $isTailwind && (($customAttributes['default-colors'] ?? true) || ($customAttributes['default'] ?? true)), + + 'tw4ph table-cell px-3 py-2 md:px-6 md:py-3 text-center md:text-left laravel-livewire-tables-reorderingMinimised' => $isTailwind4 && (($customAttributes['default-styling'] ?? true) || ($customAttributes['default'] ?? true)), + 'tw4ph bg-gray-50 dark:bg-gray-800' => $isTailwind4 && (($customAttributes['default-colors'] ?? true) || ($customAttributes['default'] ?? true)), + 'laravel-livewire-tables-reorderingMinimised' => $isBootstrap && (($customAttributes['default-colors'] ?? true) || ($customAttributes['default'] ?? true)), - ])->except(['default','default-styling','default-colors']) + + ]) + ->except(['default','default-styling','default-colors']) }}> {{ $slot }} diff --git a/resources/views/components/table/th/reorder.blade.php b/resources/views/components/table/th/reorder.blade.php deleted file mode 100644 index a3b1f7e86..000000000 --- a/resources/views/components/table/th/reorder.blade.php +++ /dev/null @@ -1,18 +0,0 @@ -@php - $customThAttributes = $this->hasReorderThAttributes() ? $this->getReorderThAttributes() : $this->getAllThAttributes($this->getReorderColumn())['customAttributes']; -@endphp - -merge($customThAttributes) - ->class([ - 'table-cell px-6 py-3 text-left text-xs font-medium whitespace-nowrap uppercase tracking-wider' => $this->isTailwind && (($customThAttributes['default-styling'] ?? true) || ($customThAttributes['default'] ?? true)), - 'text-gray-500 dark:bg-gray-800 dark:text-gray-400' => $this->isTailwind && (($customThAttributes['default-colors'] ?? true) || ($customThAttributes['default'] ?? true)), - 'laravel-livewire-tables-reorderingMinimised' => $this->isBootstrap && ($customThAttributes['default'] ?? true), - ]) - ->except(['default','default-styling','default-colors']) - }} -> -
- - diff --git a/resources/views/components/table/th/sort-icons.blade.php b/resources/views/components/table/th/sort-icons.blade.php old mode 100644 new mode 100755 index 26b077bbb..efd953579 --- a/resources/views/components/table/th/sort-icons.blade.php +++ b/resources/views/components/table/th/sort-icons.blade.php @@ -1,4 +1,4 @@ -@aware(['isTailwind', 'isBootstrap']) +@aware(['isTailwind', 'isTailwind4', 'isBootstrap']) @props(['direction' => 'none', 'customIconAttributes']) $isTailwind, @@ -52,6 +52,51 @@ ->except(['default', 'default-colors', 'default-styling', 'wire:key']) }} /> @endswitch + @elseif($isTailwind4) + @switch($direction) + @case('asc') + merge($customIconAttributes) + ->class([ + 'w-3 h-3' => $customIconAttributes['default-styling'] ?? ($customIconAttributes['default'] ?? true), + 'absolute opacity-100 group-hover:opacity-0', + ]) + ->except(['default', 'default-colors', 'default-styling', 'wire:key']) }} /> + merge($customIconAttributes) + ->class([ + 'w-3 h-3' => $customIconAttributes['default-styling'] ?? ($customIconAttributes['default'] ?? true), + 'absolute opacity-0 group-hover:opacity-100', + ]) + ->except(['default', 'default-colors', 'default-styling', 'wire:key']) }} /> + @break + @case('desc') + merge($customIconAttributes) + ->class([ + 'w-3 h-3' => $customIconAttributes['default-styling'] ?? ($customIconAttributes['default'] ?? true), + 'absolute opacity-100 group-hover:opacity-0', + ]) + ->except(['default', 'default-colors', 'default-styling', 'wire:key']) }} /> + merge($customIconAttributes) + ->class([ + 'w-3 h-3' => $customIconAttributes['default-styling'] ?? ($customIconAttributes['default'] ?? true), + 'absolute opacity-0 group-hover:opacity-100', + ]) + ->except(['default', 'default-colors', 'default-styling', 'wire:key']) }} /> + + @break + @default + merge($customIconAttributes) + ->class([ + 'w-3 h-3' => $customIconAttributes['default-styling'] ?? ($customIconAttributes['default'] ?? true), + 'absolute opacity-100 group-hover:opacity-0', + ]) + ->except(['default', 'default-colors', 'default-styling', 'wire:key']) }} /> + merge($customIconAttributes) + ->class([ + 'w-3 h-3' => $customIconAttributes['default-styling'] ?? ($customIconAttributes['default'] ?? true), + 'absolute opacity-0 group-hover:opacity-100', + ]) + ->except(['default', 'default-colors', 'default-styling', 'wire:key']) }} /> + @endswitch @else @switch($direction) diff --git a/resources/views/components/table/th.blade.php b/resources/views/components/table/th/th.blade.php old mode 100644 new mode 100755 similarity index 84% rename from resources/views/components/table/th.blade.php rename to resources/views/components/table/th/th.blade.php index 3562f4cf6..beddccf58 --- a/resources/views/components/table/th.blade.php +++ b/resources/views/components/table/th/th.blade.php @@ -1,4 +1,4 @@ -@aware(['isTailwind','isBootstrap']) +@aware(['isTailwind','isTailwind4','isBootstrap','collapsingColumnInfo']) @props(['column', 'index']) @php @@ -15,21 +15,20 @@ ->class([ 'text-gray-500 dark:bg-gray-800 dark:text-gray-400' => $isTailwind && (($customThAttributes['default-colors'] ?? true) || ($customThAttributes['default'] ?? true)), 'px-6 py-3 text-left text-xs font-medium whitespace-nowrap uppercase tracking-wider' => $isTailwind && (($customThAttributes['default-styling'] ?? true) || ($customThAttributes['default'] ?? true)), - 'hidden' => $isTailwind && $column->shouldCollapseAlways(), - 'hidden md:table-cell' => $isTailwind && $column->shouldCollapseOnMobile(), - 'hidden lg:table-cell' => $isTailwind && $column->shouldCollapseOnTablet(), + + 'tw4ph text-gray-500 dark:bg-gray-800 dark:text-gray-400' => $isTailwind4 && (($customThAttributes['default-colors'] ?? true) || ($customThAttributes['default'] ?? true)), + 'tw4ph px-6 py-3 text-left text-xs font-medium whitespace-nowrap uppercase tracking-wider' => $isTailwind4 && (($customThAttributes['default-styling'] ?? true) || ($customThAttributes['default'] ?? true)), + '' => $isBootstrap && ($customThAttributes['default'] ?? true), - 'd-none' => $isBootstrap && $column->shouldCollapseAlways(), - 'd-none d-md-table-cell' => $isBootstrap && $column->shouldCollapseOnMobile(), - 'd-none d-lg-table-cell' => $isBootstrap && $column->shouldCollapseOnTablet(), ]) + ->class($collapsingColumnInfo['collapsingColumnClasses'][$index] ?? '') ->except(['default', 'default-colors', 'default-styling']) }}> @if($column->getColumnLabelStatus()) @unless ($this->sortingIsEnabled() && ($column->isSortable() || $column->getSortCallback())) @else - @if ($isTailwind) + @if ($isTailwind || $isTailwind4)
+@else +
+ + + + +
+@endif diff --git a/resources/views/components/tools/filters/date-range.blade.php b/resources/views/components/tools/filters/date-range.blade.php old mode 100644 new mode 100755 index f9cab0a75..444db8320 --- a/resources/views/components/tools/filters/date-range.blade.php +++ b/resources/views/components/tools/filters/date-range.blade.php @@ -3,10 +3,10 @@ @endphp
- -
$isTailwind, + +
$isTailwind, + 'tw4ph w-full rounded-md shadow-sm text-left' => $isTailwind4, 'd-inline-block w-100 mb-3 mb-md-0 input-group' => $isBootstrap, ]) > @@ -15,11 +15,12 @@ x-ref="dateRangeInput" x-on:click="init" x-on:change="changedValue($refs.dateRangeInput.value)" - value="{{ $filter->getDateString(isset($this->appliedFilters[$filterKey]) ? $this->appliedFilters[$filterKey] : '') }}" + value="{{ $filter->getDateString(array_key_exists($filterKey, $this->appliedFilters) ? $this->appliedFilters[$filterKey] : '') }}" wire:key="{{ $filter->generateWireKey($tableName, 'dateRange') }}" id="{{ $tableName }}-filter-dateRange-{{ $filterKey }}" @class([ 'w-full inline-block align-middle transition duration-150 ease-in-out border-gray-300 rounded-md shadow-sm transition duration-150 ease-in-out focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-800 dark:text-white dark:border-gray-600' => $isTailwind, + 'tw4ph w-full inline-block align-middle transition duration-150 ease-in-out border-gray-300 rounded-md shadow-sm transition duration-150 ease-in-out focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50 dark:bg-gray-800 dark:text-white dark:border-gray-600' => $isTailwind4, 'd-inline-block w-100 form-control' => $isBootstrap, ]) @if($filter->hasConfig('placeholder')) placeholder="{{ $filter->getConfig('placeholder') }}" @endif diff --git a/resources/views/components/tools/filters/date.blade.php b/resources/views/components/tools/filters/date.blade.php old mode 100644 new mode 100755 index b32b38bbb..725a62a9f --- a/resources/views/components/tools/filters/date.blade.php +++ b/resources/views/components/tools/filters/date.blade.php @@ -1,15 +1,18 @@
- +
$isTailwind, + 'tw4ph rounded-md shadow-sm' => $isTailwind4, 'mb-3 mb-md-0 input-group' => $isBootstrap, ])> - getWireMethod('filterComponents.'.$filter->getKey()) !!} {{ + getWireMethod('appliedFilters.'.$filter->getKey()) !!} {{ $filterInputAttributes->merge() ->class([ - 'block w-full rounded-md shadow-sm transition duration-150 ease-in-out focus:ring focus:ring-opacity-50' => $isTailwind && ($filterInputAttributes['default-styling'] ?? true), - 'border-gray-300 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-800 dark:text-white dark:border-gray-600' => $isTailwind && ($filterInputAttributes['default-colors'] ?? true), - 'form-control' => $isBootstrap, + 'block w-full rounded-md shadow-sm transition duration-150 ease-in-out focus:ring focus:ring-opacity-50' => ($isTailwind && ($filterInputAttributes['default-styling'] ?? true)), + 'border-gray-300 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-800 dark:text-white dark:border-gray-600' => ($isTailwind && ($filterInputAttributes['default-colors'] ?? true)), + 'tw4ph block w-full rounded-sm shadow-md transition duration-150 ease-in-out focus:ring focus:ring-opacity-50' => ($isTailwind4 && ($filterInputAttributes['default-styling'] ?? true)), + 'tw4ph border-gray-350 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-800 dark:text-white dark:border-gray-600' => ($isTailwind4 && ($filterInputAttributes['default-colors'] ?? true)), + 'form-control' => ($isBootstrap), ]) ->except(['default-styling','default-colors']) }} /> diff --git a/resources/views/components/tools/filters/datetime.blade.php b/resources/views/components/tools/filters/datetime.blade.php old mode 100644 new mode 100755 index 74d80455a..faadda166 --- a/resources/views/components/tools/filters/datetime.blade.php +++ b/resources/views/components/tools/filters/datetime.blade.php @@ -1,15 +1,18 @@
- +
$isTailwind, + 'tw4ph rounded-md shadow-sm' => $isTailwind4, 'mb-3 mb-md-0 input-group' => $isBootstrap, ])> - getWireMethod('filterComponents.'.$filter->getKey()) !!} {{ + getWireMethod('appliedFilters.'.$filter->getKey()) !!} {{ $filterInputAttributes->merge() ->class([ 'block w-full rounded-md shadow-sm transition duration-150 ease-in-out focus:ring focus:ring-opacity-50' => $isTailwind && ($filterInputAttributes['default-styling'] ?? true), 'border-gray-300 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-800 dark:text-white dark:border-gray-600' => $isTailwind && ($filterInputAttributes['default-colors'] ?? true), + 'tw4ph block w-full rounded-md shadow-sm transition duration-150 ease-in-out focus:ring focus:ring-opacity-50' => $isTailwind4 && ($filterInputAttributes['default-styling'] ?? true), + 'tw4ph border-gray-300 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-800 dark:text-white dark:border-gray-600' => $isTailwind4 && ($filterInputAttributes['default-colors'] ?? true), 'form-control' => $isBootstrap, ]) ->except(['default-styling','default-colors']) diff --git a/resources/views/components/tools/filters/livewire-component-array-filter.blade.php b/resources/views/components/tools/filters/livewire-component-array-filter.blade.php old mode 100644 new mode 100755 index 237d062fa..148c93a7a --- a/resources/views/components/tools/filters/livewire-component-array-filter.blade.php +++ b/resources/views/components/tools/filters/livewire-component-array-filter.blade.php @@ -1,4 +1,4 @@ -
+
- +
diff --git a/resources/views/components/tools/filters/livewire-component-filter.blade.php b/resources/views/components/tools/filters/livewire-component-filter.blade.php old mode 100644 new mode 100755 index a430faf9f..fc4f54532 --- a/resources/views/components/tools/filters/livewire-component-filter.blade.php +++ b/resources/views/components/tools/filters/livewire-component-filter.blade.php @@ -1,4 +1,4 @@ -
+
- +
diff --git a/resources/views/components/tools/filters/multi-select-dropdown.blade.php b/resources/views/components/tools/filters/multi-select-dropdown.blade.php old mode 100644 new mode 100755 index a0f1a580b..0e8256d2a --- a/resources/views/components/tools/filters/multi-select-dropdown.blade.php +++ b/resources/views/components/tools/filters/multi-select-dropdown.blade.php @@ -1,17 +1,21 @@
- + - @if ($isTailwind) + @if ($isTailwind || $isTailwind4)
@endif - @if ($isTailwind) + @if ($isTailwind || $isTailwind4)
@endif
diff --git a/resources/views/components/tools/filters/multi-select.blade.php b/resources/views/components/tools/filters/multi-select.blade.php old mode 100644 new mode 100755 index 6ee391a71..7ba39fd5d --- a/resources/views/components/tools/filters/multi-select.blade.php +++ b/resources/views/components/tools/filters/multi-select.blade.php @@ -1,8 +1,11 @@
- + - @if ($isTailwind) -
+ @if ($isTailwind || $isTailwind4) +
$isTailwind, + 'tw4ph rounded-md shadow-sm' => $isTailwind4, + ])> @endif
$isBootstrap])> class([ 'rounded shadow-sm transition duration-150 ease-in-out focus:ring focus:ring-opacity-50 disabled:opacity-50 disabled:cursor-wait' => $isTailwind && ($filterInputAttributes['default-styling'] ?? true), 'text-indigo-600 border-gray-300 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-900 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600 dark:focus:bg-gray-600 ' => $isTailwind && ($filterInputAttributes['default-colors'] ?? true), + + 'tw4ph rounded shadow-sm transition duration-150 ease-in-out focus:ring focus:ring-opacity-50 disabled:opacity-50 disabled:cursor-wait' => $isTailwind4 && ($filterInputAttributes['default-styling'] ?? true), + 'tw4ph text-indigo-600 border-gray-300 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-900 dark:text-white dark:border-gray-600 dark:hover:bg-gray-600 dark:focus:bg-gray-600 ' => $isTailwind4 && ($filterInputAttributes['default-colors'] ?? true), + 'form-check-input' => $isBootstrap && ($filterInputAttributes['default-styling'] ?? true), ]) ->except(['id','wire:key','value','default-styling','default-colors']) }}>
@endif
diff --git a/resources/views/components/tools/filters/number-range.blade.php b/resources/views/components/tools/filters/number-range.blade.php old mode 100644 new mode 100755 index ecdc29573..7fe584b21 --- a/resources/views/components/tools/filters/number-range.blade.php +++ b/resources/views/components/tools/filters/number-range.blade.php @@ -7,10 +7,11 @@ @endphp
- +
$isTailwind, + 'tw4ph mt-4 h-22 pt-8 pb-4 grid gap-10' => $isTailwind4, 'mt-4 h-22 w-100 pb-4 pt-2 grid gap-10' => $isBootstrap, ]) wire:ignore @@ -19,6 +20,7 @@ id="{{ $tableName }}-numberRange-{{ $filterKey }}-wrapper" data-ticks-position='bottom' @class([ 'range-slider flat' => $isTailwind, + 'tw4ph range-slider flat' => $isTailwind4, 'range-slider flat w-100' => $isBootstrap, ]) style=' --min:{{ $minRange }}; --max:{{ $maxRange }}; {{ $suffix . $prefix }}' diff --git a/resources/views/components/tools/filters/number.blade.php b/resources/views/components/tools/filters/number.blade.php old mode 100644 new mode 100755 index 0c8e766cb..c0ad8ce52 --- a/resources/views/components/tools/filters/number.blade.php +++ b/resources/views/components/tools/filters/number.blade.php @@ -1,15 +1,23 @@
- +
$isTailwind, + 'tw4ph rounded-md shadow-sm' => $isTailwind4, 'mb-3 mb-md-0 input-group' => $isBootstrap, ])> - getWireMethod('filterComponents.'.$filter->getKey()) !!} {{ + getWireMethod('appliedFilters.'.$filter->getKey()) !!} {{ $filterInputAttributes->merge() ->class([ + // Tailwind 3 'block w-full rounded-md shadow-sm transition duration-150 ease-in-out focus:ring focus:ring-opacity-50' => $isTailwind && ($filterInputAttributes['default-styling'] ?? true), 'border-gray-300 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-800 dark:text-white dark:border-gray-600' => $isTailwind && ($filterInputAttributes['default-colors'] ?? true), + + // Tailwind 4 + 'tw4ph block w-full rounded-md shadow-sm transition duration-150 ease-in-out focus:ring focus:ring-opacity-50' => $isTailwind4 && ($filterInputAttributes['default-styling'] ?? true), + 'tw4ph border-gray-300 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-800 dark:text-white dark:border-gray-600' => $isTailwind4 && ($filterInputAttributes['default-colors'] ?? true), + + // Bootstrap 'form-control' => $isBootstrap, ]) ->except(['default-styling','default-colors']) diff --git a/resources/views/components/tools/filters/select.blade.php b/resources/views/components/tools/filters/select.blade.php old mode 100644 new mode 100755 index 9a0ca9683..e5bc6451b --- a/resources/views/components/tools/filters/select.blade.php +++ b/resources/views/components/tools/filters/select.blade.php @@ -1,16 +1,26 @@
- +
$isTailwind, + 'tw4ph rounded-md shadow-sm' => $isTailwind4, 'inline' => $isBootstrap, ])> - getWireMethod('appliedFilters.'.$filter->getKey()) !!} {{ $filterInputAttributes->merge() ->class([ + // Tailwind 3 'block w-full transition duration-150 ease-in-out rounded-md shadow-sm focus:ring focus:ring-opacity-50' => $isTailwind && ($filterInputAttributes['default-styling'] ?? true), 'border-gray-300 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-800 dark:text-white dark:border-gray-600' => $isTailwind && ($filterInputAttributes['default-colors'] ?? true), + + // Tailwind 4 + 'tw4ph block w-full transition duration-150 ease-in-out rounded-md shadow-sm focus:ring focus:ring-opacity-50' => $isTailwind4 && ($filterInputAttributes['default-styling'] ?? true), + 'tw4ph border-gray-300 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-800 dark:text-white dark:border-gray-600' => $isTailwind4 && ($filterInputAttributes['default-colors'] ?? true), + + // Bootstrap 4 'form-control' => $isBootstrap4 && ($filterInputAttributes['default-styling'] ?? true), + + // Bootstrap 5 'form-select' => $isBootstrap5 && ($filterInputAttributes['default-styling'] ?? true), ]) ->except(['default-styling','default-colors']) diff --git a/resources/views/components/tools/filters/text-field.blade.php b/resources/views/components/tools/filters/text-field.blade.php old mode 100644 new mode 100755 index 74d80455a..d47de6918 --- a/resources/views/components/tools/filters/text-field.blade.php +++ b/resources/views/components/tools/filters/text-field.blade.php @@ -1,16 +1,19 @@
- +
$isTailwind, - 'mb-3 mb-md-0 input-group' => $isBootstrap, + 'rounded-md shadow-sm' => ($isTailwind), + 'tw4ph rounded-md shadow-sm' => ($isTailwind4), + 'mb-3 mb-md-0 input-group' => ($isBootstrap), ])> - getWireMethod('filterComponents.'.$filter->getKey()) !!} {{ + getWireMethod('appliedFilters.'.$filter->getKey()) !!} {{ $filterInputAttributes->merge() ->class([ - 'block w-full rounded-md shadow-sm transition duration-150 ease-in-out focus:ring focus:ring-opacity-50' => $isTailwind && ($filterInputAttributes['default-styling'] ?? true), - 'border-gray-300 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-800 dark:text-white dark:border-gray-600' => $isTailwind && ($filterInputAttributes['default-colors'] ?? true), - 'form-control' => $isBootstrap, + 'block w-full rounded-md shadow-sm transition duration-150 ease-in-out focus:ring focus:ring-opacity-50' => ($isTailwind && ($filterInputAttributes['default-styling'] ?? true)), + 'border-gray-300 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-800 dark:text-white dark:border-gray-600' => ($isTailwind && ($filterInputAttributes['default-colors'] ?? true)), + 'tw4ph block w-full rounded-md shadow-sm transition duration-150 ease-in-out focus:ring focus:ring-opacity-50' => ($isTailwind4 && ($filterInputAttributes['default-styling'] ?? true)), + 'tw4ph border-gray-300 focus:border-indigo-300 focus:ring-indigo-200 dark:bg-gray-800 dark:text-white dark:border-gray-600' => ($isTailwind4 && ($filterInputAttributes['default-colors'] ?? true)), + 'form-control' => ($isBootstrap), ]) ->except(['default-styling','default-colors']) }} /> diff --git a/resources/views/components/tools/sorting-pills.blade.php b/resources/views/components/tools/sorting-pills.blade.php old mode 100644 new mode 100755 index 25a2bc973..f9d410871 --- a/resources/views/components/tools/sorting-pills.blade.php +++ b/resources/views/components/tools/sorting-pills.blade.php @@ -1,4 +1,4 @@ -@aware([ 'tableName','isTailwind','isBootstrap','isBootstrap4','isBootstrap5', 'localisationPath']) +@aware([ 'tableName','isTailwind','isTailwind4', 'isBootstrap','isBootstrap4','isBootstrap5', 'localisationPath']) @if ($isTailwind)
@@ -11,29 +11,29 @@ @continue(is_null($column)) @continue($column->isHidden()) - @continue($this->columnSelectIsEnabled && ! $this->columnSelectIsEnabledForColumn($column)) + @continue($this->columnSelectIsEnabled() && ! $this->columnSelectIsEnabledForColumn($column)) merge($this->getSortingPillsItemAttributes()) + $attributes->merge($this->getSortingPillsItemAttributes) ->class([ - 'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium leading-4 capitalize' => $this->getSortingPillsItemAttributes()['default-styling'], - 'bg-indigo-100 text-indigo-800 dark:bg-indigo-200 dark:text-indigo-900' => $this->getSortingPillsItemAttributes()['default-colors'], + 'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium leading-4 capitalize' => $this->getSortingPillsItemAttributes['default-styling'], + 'bg-indigo-100 text-indigo-800 dark:bg-indigo-200 dark:text-indigo-900' => $this->getSortingPillsItemAttributes['default-colors'], ]) ->except(['default-styling', 'default-colors']) }} > - {{ $column->getSortingPillTitle() }}: {{ $column->getSortingPillDirectionLabel($direction, $this->getDefaultSortingLabelAsc, $this->getDefaultSortingLabelDesc) }} + {{ $column->getSortingPillTitle() }}: {{ $column->getSortingPillDirectionLabel($direction, $this->getDefaultSortingLabelAsc(), $this->getDefaultSortingLabelDesc()) }} +
+ @endif +
+@elseif($isTailwind4) +
+ @if ($this->sortingPillsAreEnabled() && $this->hasSorts()) +
+ {{ __($localisationPath.'Applied Sorting') }}: + + @foreach($this->getSorts() as $columnSelectName => $direction) + @php($column = $this->getColumnBySelectName($columnSelectName) ?? $this->getColumnBySlug($columnSelectName)) + + @continue(is_null($column)) + @continue($column->isHidden()) + @continue($this->columnSelectIsEnabled() && ! $this->columnSelectIsEnabledForColumn($column)) + + merge($this->getSortingPillsItemAttributes) + ->class([ + 'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium leading-4 capitalize' => $this->getSortingPillsItemAttributes['default-styling'], + 'bg-indigo-100 text-indigo-800 dark:bg-indigo-200 dark:text-indigo-900' => $this->getSortingPillsItemAttributes['default-colors'], + ]) + ->except(['default-styling', 'default-colors']) + }} + > + {{ $column->getSortingPillTitle() }}: {{ $column->getSortingPillDirectionLabel($direction, $this->getDefaultSortingLabelAsc(), $this->getDefaultSortingLabelDesc()) }} + + + + @endforeach + + - - @if($isTailwind) -
-
merge($this->getBulkActionsMenuAttributes) - ->class([ - 'bg-white dark:bg-gray-700 dark:text-white' => $isTailwind && ($this->getBulkActionsMenuAttributes['default-colors'] ?? true), - 'rounded-md shadow-xs' => $isTailwind && ($this->getBulkActionsMenuAttributes['default-styling'] ?? true), - ]) - ->except(['default','default-styling','default-colors']) - }} - > - -
-
- @else -
merge($this->getBulkActionsMenuAttributes) - ->class([ - 'dropdown-menu dropdown-menu-right w-100' => $isBootstrap4 && ($this->getBulkActionsMenuAttributes['default-styling'] ?? true), - 'dropdown-menu dropdown-menu-end w-100' => $isBootstrap5 && ($this->getBulkActionsMenuAttributes['default-styling'] ?? true), - ]) - ->except(['default','default-styling','default-colors']) - }} - aria-labelledby="{{ $tableName }}-bulkActionsDropdown" - > - @foreach ($this->getBulkActions() as $action => $title) - hasConfirmationMessage($action)) - wire:confirm="{{ $this->getBulkActionConfirmMessage($action) }}" - @endif - wire:click="{{ $action }}" - wire:key="{{ $tableName }}-bulk-action-{{ $action }}" - {{ - $attributes->merge($this->getBulkActionsMenuItemAttributes) - ->class([ - 'dropdown-item' => $isBootstrap && ($this->getBulkActionsMenuItemAttributes['default-styling'] ?? true), - ]) - ->except(['default','default-styling','default-colors']) - }} - > - {{ $title }} - - @endforeach -
- @endif + {{-- The Body of The Menu --}} + merge($this->getBulkActionsMenuAttributes) }}> + @tableloop ($this->getBulkActionsButtons() as $id => $bulkAction) + {!! $bulkAction->render() !!} + @endtableloop + -
+
diff --git a/resources/views/components/tools/toolbar/items/column-select.blade.php b/resources/views/components/tools/toolbar/items/column-select.blade.php old mode 100644 new mode 100755 index 388b9171c..548c8f187 --- a/resources/views/components/tools/toolbar/items/column-select.blade.php +++ b/resources/views/components/tools/toolbar/items/column-select.blade.php @@ -1,5 +1,123 @@ -@aware([ 'tableName','isTailwind','isBootstrap','isBootstrap4','isBootstrap5', 'localisationPath']) +@aware([ 'tableName','isTailwind','isTailwind4','isBootstrap','isBootstrap4','isBootstrap5', 'localisationPath']) +@php($columnSelectButtonAttributes = $this->getColumnSelectButtonAttributes()) +@php($columnSelectMenuOptionCheckboxAttributes = $this->getColumnSelectMenuOptionCheckboxAttributes) +@php($selectableSelectedColumnCount = $this->getSelectableSelectedColumns()->count()) +@php($jsoned = json_encode(array_keys($this->selectableColumns))) + @if ($isTailwind) + +@elseif ($isTailwind4)