wireui · ph7jack · Oct 23, 2023 · Oct 20, 2023 · Oct 20, 2023 · Oct 20, 2023
diff --git a/composer.lock b/composer.lock
diff --git a/dist/mix-manifest.json b/dist/mix-manifest.json
@@ -1,4 +1,4 @@
 {
-    "/wireui.js": "/wireui.js?id=2bb2382efa56ba70bd4659eaccb242c7",
-    "/wireui.css": "/wireui.css?id=5905b18aaf23f74a3419ba4e7a4c2f53"
+    "/wireui.js": "/wireui.js?id=eac37e3099acafcb5036e20dd54a70e9",
+    "/wireui.css": "/wireui.css?id=fe2ab443dcadd418f0f1adebd291ccfd"
 }
diff --git a/dist/wireui.css b/dist/wireui.css
diff --git a/dist/wireui.js b/dist/wireui.js
diff --git a/package.json b/package.json
@@ -12,33 +12,33 @@
         "test": "jest"
     },
     "dependencies": {
-        "@floating-ui/dom": "^1.5.1",
-        "@types/lodash.debounce": "^4.0.7",
+        "@floating-ui/dom": "^1.5.3",
+        "@types/lodash.debounce": "^4.0.8",
         "@wireui/alpinejs-hold-directive": "^1.0.1",
-        "alpinejs": "^3.13.0",
-        "dayjs": "^1.11.9",
+        "alpinejs": "^3.13.2",
+        "dayjs": "^1.11.10",
         "lodash.debounce": "^4.0.8",
         "lodash.kebabcase": "^4.1.1",
         "qs": "^6.11.2"
     },
     "devDependencies": {
         "@tailwindcss/forms": "^0.5.6",
-        "@types/jest": "^29.5.4",
+        "@types/jest": "^29.5.6",
         "@types/tailwindcss": "^3.1.0",
-        "@typescript-eslint/eslint-plugin": "^6.5.0",
-        "@typescript-eslint/parser": "^6.5.0",
-        "autoprefixer": "^10.4.15",
-        "eslint": "^8.48.0",
+        "@typescript-eslint/eslint-plugin": "^6.8.0",
+        "@typescript-eslint/parser": "^6.8.0",
+        "autoprefixer": "^10.4.16",
+        "eslint": "^8.52.0",
         "eslint-plugin-import": "^2.28.1",
-        "jest": "^29.6.4",
-        "jest-environment-jsdom": "^29.6.4",
-        "jest-extended": "^4.0.1",
+        "jest": "^29.7.0",
+        "jest-environment-jsdom": "^29.7.0",
+        "jest-extended": "^4.0.2",
         "laravel-mix": "^6.0.49",
-        "postcss": "^8.4.29",
+        "postcss": "^8.4.31",
         "postcss-import": "^15.1.0",
         "tailwindcss": "^3.3.3",
         "ts-jest": "^29.1.1",
-        "ts-loader": "^9.4.4",
+        "ts-loader": "^9.5.0",
         "ts-node": "^10.9.1",
         "typescript": "^5.2.2"
     }

diff --git a/resources/views/components/color-picker.blade.php b/resources/views/components/color-picker.blade.php
@@ -55,19 +55,24 @@ class="
 
     <x-wireui::parts.popover
         :margin="(bool) $label"
-        class="
-            max-h-56 py-3 px-2 sm:py-2 sm:px-1 sm:w-72 sm:rounded-xl
-            overflow-y-auto soft-scrollbar border border-secondary-200
-        ">
-        <div class="flex flex-wrap items-center justify-center gap-1 sm:gap-0.5 max-w-[18rem] mx-auto">
+        @class([
+            'max-h-64 select-none overflow-hidden',
+            'sm:max-w-[19rem]',
+        ])
+    >
+        <div @class([
+            'max-h-60 overflow-y-auto overscroll-contain soft-scrollbar py-2 px-1',
+            'flex flex-wrap items-center justify-center gap-1 sm:gap-0.5 mx-auto',
+        ])>
             <span class="sr-only">dropdown-open</span>
 
             <template x-for="(color, index) in colors" :key="index">
-                <button class="
-                        w-6 h-6 rounded shadow-lg border hover:scale-125 transition-all ease-in-out duration-100 cursor-pointer
-                        hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-primary-600 sdark:focus:ring-gray-400
-                        dark:border-0 dark:hover:ring-2 dark:hover:ring-gray-400
-                    "
+                <button
+                    @class([
+                        'w-6 h-6 rounded shadow-lg border hover:scale-125 transition-all ease-in-out duration-100 cursor-pointer',
+                        'hover:border-gray-400 focus:outline-none focus:ring-2 focus:ring-primary-600 dark:focus:ring-gray-400',
+                        'dark:border-0 dark:hover:ring-2 dark:hover:ring-gray-400',
+                    ])
                     :style="{ 'background-color': color.value }"
                     x-on:click="select(color)"
                     :title="color.name"

diff --git a/resources/views/components/datetime-picker.blade.php b/resources/views/components/datetime-picker.blade.php
@@ -70,7 +70,11 @@ class="cursor-pointer w-5 h-5"
         @endif
     </x-dynamic-component>
 
-    <x-wireui::parts.popover :margin="(bool) $label" class="max-h-96 overflow-y-auto p-3 sm:w-72">
+    <x-wireui::parts.popover
+        :margin="(bool) $label"
+        root-class="sm:!w-72 ml-auto"
+        class="max-h-96 overflow-y-auto p-3 sm:w-72"
+    >
         <div x-show="tab === 'date'" class="space-y-5">
             @unless ($withoutTips)
                 <div class="grid grid-cols-3 gap-x-2 text-center text-secondary-600">

diff --git a/resources/views/components/inputs/password.blade.php b/resources/views/components/inputs/password.blade.php
@@ -11,6 +11,7 @@
         :prefix="$prefix"
         :prepend="$prepend"
         x-bind:type="type"
+        type="password"
     >
         <x-slot name="append">
             <div class="absolute inset-y-0 right-0 pr-2.5 flex items-center">

diff --git a/resources/views/components/modal.blade.php b/resources/views/components/modal.blade.php
@@ -4,7 +4,7 @@
     x-data="wireui_modal({
         show: @toJs($show),
         @if ($attributes->wire('model')->value())
-            model: @entangle($attributes->wire('model'))
+            model: @entangleable($attributes->wire('model'))
         @endif
     })"
     x-on:keydown.escape.window="handleEscape"

diff --git a/resources/views/components/parts/popover.blade.php b/resources/views/components/parts/popover.blade.php
@@ -1,13 +1,24 @@
 @props(['margin' => false, 'rootClass' => null])
 
-<div class="fixed inset-0 z-20 flex items-end sm:z-10 sm:absolute sm:inset-auto transition-all ease-linear duration-150 {{ $rootClass }}"
-    style="display: none"
+<div
+    @class([
+        'fixed inset-0 z-20 flex sm:w-full sm:justify-end items-end sm:z-10 sm:absolute sm:inset-auto',
+        'pointer-events-none transition-all ease-linear duration-150',
+        'sm:top-0 sm:right-0',
+        $rootClass,
+    ])
+    style="display: none;"
     x-cloak
     x-show="popover"
     x-ref="popover"
     x-on:click.outside="close"
-    x-on:keydown.escape.window="handleEscape">
-    <div class="fixed inset-0 transition-opacity bg-secondary-400 bg-opacity-60 sm:hidden dark:bg-secondary-700 dark:bg-opacity-60"
+    x-on:keydown.escape.window="handleEscape"
+>
+    <div
+        @class([
+            'fixed inset-0 transition-opacity bg-secondary-400 bg-opacity-60 sm:hidden',
+            'pointer-events-auto dark:bg-secondary-700 dark:bg-opacity-60',
+        ])
         x-show="popover"
         x-transition:enter="ease-out duration-300"
         x-transition:enter-start="opacity-0"
@@ -16,13 +27,14 @@
         x-transition:leave-start="opacity-100"
         x-transition:leave-end="opacity-0"
         x-on:click="close"
-        aria-hidden="true">
-    </div>
+        aria-hidden="true"
+    ></div>
 
     <div
         {{ $attributes->class([
             'w-full rounded-t-md sm:rounded-xl border border-secondary-200 bg-white shadow-lg',
             'dark:bg-secondary-800 dark:border-secondary-600 transition-all relative overflow-hidden',
+            'pointer-events-auto',
         ]) }}
         x-show="popover"
         tabindex="-1"
@@ -31,7 +43,8 @@
         x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
         x-transition:leave="ease-in duration-200"
         x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
-        x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
+        x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+    >
         {{ $slot }}
     </div>
 </div>
diff --git a/resources/views/components/select.blade.php b/resources/views/components/select.blade.php
@@ -60,7 +60,8 @@ class="cursor-pointer overflow-hidden !text-transparent !dark:text-transparent s
                 ->except(['class'])
                 ->class(['pl-8' => $icon])
                 ->whereDoesntStartWith(['wire:model', 'type', 'wire:key'])
-            }}>
+            }}
+        >
             <x-slot name="prepend">
                 <div :class="{
                     'pointer-events-none': config.readonly,
@@ -176,19 +177,22 @@ class="w-5 h-5
         @endif
     </div>
 
-    <x-wireui::parts.popover :margin="(bool) $label" root-class="sm:w-full">
+    <x-wireui::parts.popover
+        :margin="(bool) $label"
+        class="sm:max-w-xs"
+    >
         <template x-if="asyncData.api || (config.searchable && options.length >= @toJs($minItemsForSearch))">
             <div class="px-2 my-2" wire:key="search.options.{{ $name }}">
                 <x-dynamic-component
                     :component="WireUi::component('input')"
+                    :placeholder="trans('wireui::messages.searchHere')"
                     class="bg-slate-100"
                     x-ref="search"
-                    x-model.debounce.{{ $asyncData ? 750 : 0 }}ms="search"
+                    x-model.debounce.500ms="search"
                     x-on:keydown.arrow-down.prevent="$event.shiftKey || getNextFocusable().focus()"
                     x-on:keydown.arrow-up.prevent="getPrevFocusable().focus()"
                     shadowless
                     right-icon="search"
-                    :placeholder="trans('wireui::messages.searchHere')"
                 />
             </div>
         </template>

diff --git a/resources/views/components/time-picker.blade.php b/resources/views/components/time-picker.blade.php
@@ -60,7 +60,7 @@ class="cursor-pointer w-5 h-5 text-gray-400 dark:text-gray-600"
     </div>
 
     <x-wireui::parts.popover
-        class="p-2.5"
+        class="p-2.5 sm:max-w-[15rem]"
         :margin="(bool) $label"
         x-on:keydown.tab.prevent="$event.shiftKey || getNextFocusable().focus()"
         x-on:keydown.arrow-down.prevent="$event.shiftKey || getNextFocusable().focus()"

diff --git a/src/Support/BladeDirectives.php b/src/Support/BladeDirectives.php
@@ -78,13 +78,24 @@ public function boolean(string $value): string
         return "<?= json_encode(filter_var($value, FILTER_VALIDATE_BOOLEAN)); ?>";
     }
 
+    /**
+     * This function overwrite the original entangle directive from Livewire
+     */
     public function entangleable(mixed $expression): string
     {
         $fallback = (string) Str::of($expression)->after(',')->trim();
         $property = (string) Str::of($expression)->before(',')->trim();
 
         return <<<EOT
-        <?php if (!isset(\$__livewire)): ?>@toJs({$fallback})<?php elseif ((object) ({$property}) instanceof \Livewire\WireDirective && {$property}->hasModifier('blur')): ?>@entangle({$property}).live<?php else: ?>@entangle({$property})<?php endif; ?>
+        <?php if (!isset(\$__livewire)): ?>
+            <?php if (is_object({$fallback}) || is_array({$fallback})) { echo "JSON.parse(atob('".base64_encode(json_encode({$fallback}))."'))"; } elseif (is_string({$fallback})) { echo "'".str_replace("'", "\'", {$fallback})."'"; } else { echo json_encode({$fallback}); } ?>
+        <?php elseif ((object) ({$property}) instanceof \Livewire\WireDirective && {$property}->hasModifier('blur')): ?>
+            window.Livewire.find('{{ \$__livewire->getId() }}').entangle('{{ {$property}->value() }}').live
+        <?php elseif ((object) ({$property}) instanceof \Livewire\WireDirective) : ?>
+            window.Livewire.find('{{ \$__livewire->getId() }}').entangle('{{ {$property}->value() }}'){{ {$property}->hasModifier('live') ? '.live' : '' }}
+        <?php else : ?>
+            window.Livewire.find('{{ \$__livewire->getId() }}').entangle('{{ {$property} }}')
+        <?php endif; ?>
         EOT;
     }
 

diff --git a/src/Support/Html.php b/src/Support/Html.php
@@ -0,0 +1,17 @@
+<?php
+
+namespace WireUi\Support;
+
+use Illuminate\Contracts\Support\Htmlable;
+
+class Html implements Htmlable {
+    public function __construct(
+        public string $html
+    ) {
+    }
+
+    public function toHtml(): string
+    {
+        return $this->html;
+    }
+}
diff --git a/src/View/Components/BaseBadge.php b/src/View/Components/BaseBadge.php
@@ -26,7 +26,7 @@ public function __construct(
     public function render(): Closure
     {
         return function (array $data) {
-            return view('wireui::components.badge', $this->mergeData($data))->render();
+            return view('wireui::components.badge', $this->mergeData($data));
         };
     }
 

diff --git a/src/View/Components/BaseButton.php b/src/View/Components/BaseButton.php
@@ -29,7 +29,7 @@ public function __construct(
     public function render(): Closure
     {
         return function (array $data) {
-            return view('wireui::components.button', $this->mergeData($data))->render();
+            return view('wireui::components.button', $this->mergeData($data));
         };
     }
 

diff --git a/src/View/Components/CircleBadge.php b/src/View/Components/CircleBadge.php
@@ -31,7 +31,7 @@ public function __construct(
     public function render(): Closure
     {
         return function (array $data) {
-            return view('wireui::components.circle-badge', $this->mergeData($data))->render();
+            return view('wireui::components.circle-badge', $this->mergeData($data));
         };
     }
 

diff --git a/src/View/Components/CircleButton.php b/src/View/Components/CircleButton.php
@@ -41,7 +41,7 @@ public function __construct(
     public function render(): Closure
     {
         return function (array $data) {
-            return view('wireui::components.circle-button', $this->mergeData($data))->render();
+            return view('wireui::components.circle-button', $this->mergeData($data));
         };
     }
 

diff --git a/src/View/Components/Component.php b/src/View/Components/Component.php
@@ -4,9 +4,19 @@
 
 use Illuminate\View;
 use Illuminate\View\ComponentAttributeBag;
+use WireUi\Support\Html;
 
 abstract class Component extends View\Component
 {
+    protected function extractBladeViewFromString($contents)
+    {
+        if ($contents instanceof \Illuminate\Contracts\View\View) {
+            return new Html($contents->render());
+        }
+
+        return parent::extractBladeViewFromString($contents);
+    }
+
     protected const DEFAULT = 'default';
 
     protected function classes(array $classList): string

diff --git a/src/View/Components/FormComponent.php b/src/View/Components/FormComponent.php
@@ -2,14 +2,15 @@
 
 namespace WireUi\View\Components;
 
+use Closure;
 use Illuminate\View\ComponentAttributeBag;
 
 abstract class FormComponent extends Component
 {
-    public function render()
+    public function render(): Closure
     {
         return function (array $data) {
-            return view($this->getView(), $this->mergeAttributes($data))->render();
+            return view($this->getView(), $this->mergeAttributes($data));
         };
     }
 

diff --git a/tests/Browser/ColorPickerTest.php b/tests/Browser/ColorPickerTest.php
@@ -45,13 +45,16 @@ public function it_should_toggle_the_colors_dropdown()
 
             $testable
                 ->click('div[id="color-picker"] button[trigger]')
-                ->waitUsing(7, 100, function () use ($browser) {
-                    return $browser->assertSee('dropdown-open');
-                })
+                ->pause(600)
+                ->assertScript(<<<JS
+                    document.querySelector('div[id="color-picker"] div[x-ref="popover"]').style.display === ''
+                JS)
                 ->click('div[id="color-picker"] button[trigger]')
-                ->waitUsing(7, 100, function () use ($browser) {
-                    return $browser->assertDontSee('dropdown-open');
-                });
+                ->pause(600)
+                ->assertScript(<<<JS
+                    document.querySelector('div[id="color-picker"] div[x-ref="popover"]').style.display === 'none'
+                JS)
+            ;
         });
     }