Merge pull request #298 from mkocansey/development

release/v2-6-4
mkocansey · Jul 7, 2024 · 71418d3 · 71418d3
2 parents 9eb893b + d620f7d
commit 71418d3
Show file tree

Hide file tree

Showing 11 changed files with 66 additions and 42 deletions.
diff --git a/README.md b/README.md
@@ -98,6 +98,7 @@ You are now ready to start using any of the BladewindUI components in your appli
 - **[Table](https://bladewindui.com/component/table)**
 - **[Tag](https://bladewindui.com/component/tag)**
 - **[Textarea](https://bladewindui.com/component/textarea)**
+- **[Theme Switcher](https://bladewindui.com/component/theme-switcher)**
 - **[Timeline](https://bladewindui.com/component/timeline)**
 - **[Toggle](https://bladewindui.com/component/toggle)**
 - **[Verification Code](https://bladewindui.com/component/verification-code)**

diff --git a/config/bladewind.php b/config/bladewind.php
@@ -344,6 +344,7 @@
         'currency_position' => 'left',
         'icon_position' => 'left',
         'has_shadow' => true,
+        'has_border' => true,
     ],
 
     /*

diff --git a/public/css/bladewind-ui.min.css b/public/css/bladewind-ui.min.css
diff --git a/public/js/select.js b/public/js/select.js
@@ -116,46 +116,49 @@ class BladewindSelect {
             this.filter(this.toFilter, this.selectedValue);
         }
 
-        if (!this.isMultiple) {
-            changeCssForDomArray(`${this.selectItems} svg`, 'hidden');
-            dom_el(this.displayArea).innerText = selectedLabel;
-            input.value = this.selectedValue;
-            unhide(svg, true);
-            this.moveLabel();
-            if (this.canClear) {
-                unhide(`${this.clickArea} .reset`);
-                dom_el(`${this.clickArea} .reset`).addEventListener('click', (e) => {
-                    this.unsetValue(item);
-                    e.stopImmediatePropagation();
-                });
-            }
-        } else {
-            if (input.value.includes(this.selectedValue)) {
-                this.unsetValue(item);
+        if (this.enabled) {
+            if (!this.isMultiple) {
+                changeCssForDomArray(`${this.selectItems} svg`, 'hidden');
+                dom_el(this.displayArea).innerText = selectedLabel;
+                input.value = this.selectedValue;
+                unhide(svg, true);
+                this.moveLabel();
+                if (this.canClear) {
+                    unhide(`${this.clickArea} .reset`);
+                    dom_el(`${this.clickArea} .reset`).addEventListener('click', (e) => {
+                        this.unsetValue(item);
+                        e.stopImmediatePropagation();
+                    });
+                }
             } else {
-                if (!this.maxSelectableExceeded()) {
-                    unhide(svg, true);
-                    input.value += `,${this.selectedValue}`;
-                    dom_el(this.displayArea).innerHTML += this.labelTemplate(selectedLabel, this.selectedValue);
-                    this.removeLabel(this.selectedValue);
+                if (input.value.includes(this.selectedValue)) {
+                    this.unsetValue(item);
                 } else {
-                    showNotification('', this.maxSelectionError, 'error');
+                    if (!this.maxSelectableExceeded()) {
+                        unhide(svg, true);
+                        input.value += `,${this.selectedValue}`;
+                        dom_el(this.displayArea).innerHTML += this.labelTemplate(selectedLabel, this.selectedValue);
+                        this.removeLabel(this.selectedValue);
+                    } else {
+                        showNotification('', this.maxSelectionError, 'error');
+                    }
+                    this.moveLabel();
                 }
-                this.moveLabel();
+                this.scrollbars();
             }
-            this.scrollbars();
+            stripComma(input);
+            changeCss(`${this.clickArea}`, '!border-red-400', 'remove');
         }
-        stripComma(input);
-        changeCss(`${this.clickArea}`, '!border-red-400', 'remove');
     }
 
     unsetValue = (item) => {
         this.selectedValue = item.getAttribute('data-value');
         // let selectedValue = item.getAttribute('data-value');
         let svg = dom_el(`${this.rootElement} div[data-value="${this.selectedValue}"] svg`);
         let input = dom_el(this.formInput);
+
         // only unset values if the Select component is not disabled
-        if (!dom_el(this.clickArea).classList.contains('cursor-not-allowed')) {
+        if (this.enabled) { //!dom_el(this.clickArea).classList.contains('disabled')
             if (!this.isMultiple) {
                 unhide(`${this.rootElement} .placeholder`);
                 changeCssForDomArray(`${this.selectItems} svg`, 'hidden');
@@ -246,8 +249,8 @@ class BladewindSelect {
     }
 
     disable = () => {
-        changeCss(this.clickArea, 'opacity-40, select-none, cursor-not-allowed');
-        changeCss(this.clickArea, 'focus:border-blue-400, cursor-pointer', 'remove');
+        changeCss(this.clickArea, 'disabled');
+        changeCss(this.clickArea, 'enabled, readonly', 'remove');
         // hide(`${this.clickArea} .reset`);
         dom_el(this.clickArea).addEventListener('click', () => {
             hide(this.itemsContainer);
@@ -256,8 +259,8 @@ class BladewindSelect {
     }
 
     enable = () => {
-        changeCss(this.clickArea, 'opacity-40, select-none, cursor-not-allowed', 'remove');
-        changeCss(this.clickArea, 'focus:border-blue-400, cursor-pointer');
+        changeCss(this.clickArea, 'readonly, disabled', 'remove');
+        changeCss(this.clickArea, 'enabled');
         dom_el(this.clickArea).addEventListener('click', (e) => {
             unhide(this.itemsContainer);
         });

diff --git a/resources/assets/css/button.css b/resources/assets/css/button.css
@@ -1,6 +1,6 @@
 @layer components {
     .bw-button {
-        @apply py-3 px-5 tracking-wider text-xs font-medium inline-block items-center transition
+        @apply py-3 px-5 tracking-wider text-xs font-medium inline-block items-center transition duration-300
     }
 
     .bw-button-circle {

diff --git a/resources/assets/css/input.css b/resources/assets/css/input.css
@@ -14,6 +14,10 @@
         px-3.5 py-[8.5px]
     }
 
+    .bw-input[disabled], .bw-input[readonly], fieldset[disabled] .bw-input {
+        @apply !bg-gray-100/60 dark:!bg-white/10 dark:!opacity-40 !text-slate-400/70 dark:!text-dark-400 cursor-not-allowed dark:!border-dark-500/70
+    }
+
     .bw-input.small {
         @apply py-2
     }
@@ -62,6 +66,14 @@
         peer-placeholder-shown:!top-[23px] peer-focus:!-top-2
     }
 
+    .bw-select div.clickable.disabled, .bw-select div.clickable.readonly, fieldset[disabled] .bw-select {
+        @apply !bg-gray-100/60 opacity-95 dark:opacity-70 dark:!bg-white/5 select-none cursor-not-allowed
+    }
+
+    .bw-select div.clickable.enabled {
+        @apply focus:border-blue-400 dark:focus:border-dark-500 cursor-pointer
+    }
+
     .prefix svg, .suffix svg {
         @apply ltr:!mr-1 rtl:!ml-1 w-6 h-6 dark:text-dark-500
     }

diff --git a/resources/assets/css/table.css b/resources/assets/css/table.css
@@ -8,7 +8,7 @@
     }
 
     .bw-table tr > td {
-        @apply py-4 px-3 align-top text-sm text-slate-600/80 dark:text-dark-400 bg-white dark:bg-dark-800/25 border-x-2 border-transparent
+        @apply py-4 px-3 align-top text-sm text-slate-600/80 dark:text-dark-400 bg-white dark:bg-dark-800/25 border-x-2 border-transparent leading-6
         /*dark:bg-dark-600/40*/
     }
 

diff --git a/resources/views/components/select-item.blade.php b/resources/views/components/select-item.blade.php
@@ -22,6 +22,6 @@
     @if ($image !== '')
         <x-bladewind::avatar size="small" class="!mt-0 !mr-4" image="{{ $image }}"/>
     @endif
-    <span class="grow text-left">{!! $label !!}</span>
+    <span class="grow text-left">{!! html_entity_decode($label) !!}</span>
     <x-bladewind::icon name="check-circle" class="text-slate-400 size-5 hidden svg-{{$value }}"/>
 </div>
diff --git a/resources/views/components/select.blade.php b/resources/views/components/select.blade.php
@@ -167,14 +167,15 @@
      data-multiple="{{$multiple}}" data-type="{{ $data !== 'manual' ? 'dynamic' : 'manual'}}"
      @if(!empty($filter)) data-filter="{{ $filter}}" @endif
      @if($data == 'manual' && $selected_value != '') data-selected-value="{{implode(',',$selected_value)}}" @endif>
-    <div class="flex justify-between text-sm items-center rounded-md bg-white text-slate-600 border-2 border-slate-300/50
-        dark:text-dark-300 dark:border-dark-600 dark:bg-transparent {{$sizes[$size]}} pl-4 pr-2 clickable
-        @if(!$disabled)focus:border-blue-400 dark:focus:border-dark-500 cursor-pointer @else opacity-40 select-none cursor-not-allowed @endif"
-         tabindex="0">
+    <div tabindex="0"
+         class="flex justify-between text-sm items-center rounded-md bg-white text-slate-600 border-2 border-slate-300/50
+         dark:text-dark-300 dark:border-dark-600 dark:bg-transparent {{$sizes[$size]}} pl-4 pr-2 clickable
+         @if($disabled) disabled @elseif($readonly) readonly @else enabled @endif">
         <x-bladewind::icon name="chevron-left" class="!-ml-3 hidden scroll-left"/>
         <div class="text-left placeholder grow-0 text-blue-900/40 dark:text-slate-500">
             @if(!empty($label))
-                <span class="form-label !top-4">{{$label}} @if($required)
+                <span class="form-label !top-4">{{$label}}
+                    @if($required)
                         <x-bladewind::icon name="star" class="!text-red-400 !w-2 !h-2 mt-[-2px]" type="solid"/>
                     @endif</span>
             @else

diff --git a/resources/views/components/statistic.blade.php b/resources/views/components/statistic.blade.php
@@ -13,6 +13,7 @@
     'showSpinner' => false,
     'has_shadow' => config('bladewind.statistic.has_shadow', true),
     'hasShadow' => config('bladewind.statistic.has_shadow', true),
+    'hasBorder' => config('bladewind.statistic.has_border', true),
     'class' => '',
     'number_css' => '',
 ])
@@ -22,14 +23,17 @@
     $showSpinner = filter_var($showSpinner, FILTER_VALIDATE_BOOLEAN);
     $has_shadow = filter_var($has_shadow, FILTER_VALIDATE_BOOLEAN);
     $hasShadow = filter_var($hasShadow, FILTER_VALIDATE_BOOLEAN);
+    $has_border = filter_var($hasBorder, FILTER_VALIDATE_BOOLEAN);
     if ($labelPosition !== $label_position) $label_position = $labelPosition;
     if ($iconPosition !== $icon_position) $icon_position = $iconPosition;
     if ($currencyPosition !== $currency_position) $currency_position = $currencyPosition;
     if ($showSpinner) $show_spinner = $showSpinner;
     if (!$hasShadow) $has_shadow = $hasShadow;
+    $shadow_css = ($has_shadow) ? 'drop-shadow-sm shadow-sm shadow-slate-200 dark:shadow-dark-800/70' : '';
+    $border_css = ($has_border) ? 'border border-gray-100/80 dark:border-dark-600/60' : '';
 @endphp
 
-<div class="bw-statistic bg-white dark:bg-dark-800/30 border border-gray-100/80 dark:border-dark-600/60 focus:outline-none p-6 rounded-md relative @if($has_shadow) drop-shadow-sm shadow-sm shadow-slate-200 dark:shadow-dark-800/70 @endif {{$class}}">
+<div {{ $attributes(['class' => "bw-statistic bg-white dark:bg-dark-800/30 focus:outline-none p-6 rounded-md relative $shadow_css $border_css $class"]) }}>
     <div class="flex space-x-4">
         @if($icon !== '' && $icon_position=='left')
             <div class="grow-0 icon">{!! $icon !!}</div>

diff --git a/resources/views/components/theme-switcher.blade.php b/resources/views/components/theme-switcher.blade.php
@@ -8,12 +8,14 @@
     'iconRight' => true,
     'iconType' => 'outline',
     'iconDir' => '',
+    'modular' => false,
 ])
 @php
     $iconRight = filter_var($iconRight, FILTER_VALIDATE_BOOLEAN);
+    $modular = filter_var($modular, FILTER_VALIDATE_BOOLEAN);
 @endphp
 @once
-    <x-bladewind::dropmenu modular="false" icon_right="{{$iconRight}}">
+    <x-bladewind::dropmenu :modular="$modular" icon_right="{{$iconRight}}">
         <x-slot:trigger>
             <x-bladewind::icon
                     name="{{$lightIcon}}"