search

livewire / flux

The official Livewire UI component library
https://fluxui.dev
494 stars 41 forks source link

Multiple Select rendering without styles #744

Closed faustbrian closed 3 days ago

faustbrian commented 4 days ago

Hi there! 👋

Description I wanted to try the new Multiple Select component from https://fluxui.dev/components/select#multiple-select and copy pasted the code into my fresh Laravel app (for testing purposes) but it seems to render without any styles. All other components render without issues.

livewire/flux                       1.0.27  The official UI component library for Livewire.
livewire/flux-pro                   1.0.27  The pro version of Flux, the official UI component library for Livewire.

Code

<flux:select variant="listbox" multiple placeholder="Choose industries...">
    <flux:option>Photography</flux:option>
    <flux:option>Design services</flux:option>
    <flux:option>Web development</flux:option>
    <flux:option>Accounting</flux:option>
    <flux:option>Legal services</flux:option>
    <flux:option>Consulting</flux:option>
    <flux:option>Other</flux:option>
</flux:select>

Result Image

<ui-select clear="close esc select" filter="filter" class="w-full" multiple="multiple" data-flux-control="" data-flux-select="">
            <button type="button" class="group/select-button cursor-default py-2 overflow-hidden flex items-center shadow-sm bg-white dark:bg-white/10 dark:disabled:bg-white/[7%] disabled:shadow-none h-10 text-sm rounded-lg px-3 block w-full border border-zinc-200 border-b-zinc-300/80 dark:border-white/10" data-flux-group-target="" data-flux-select-button="" role="combobox" aria-controls="lofi-options-233eb4a325fc9" aria-haspopup="listbox" aria-expanded="false">
            <ui-selected x-ignore="" wire:ignore="" class="truncate flex gap-2 text-left flex-1 text-zinc-700 [[disabled]_&amp;]:text-zinc-500 dark:text-zinc-300 dark:[[disabled]_&amp;]:text-zinc-400">
    <template name="placeholder">
        <span class="text-zinc-400 [[disabled]_&amp;]:text-zinc-400/70 dark:text-zinc-400 dark:[[disabled]_&amp;]:text-zinc-500" data-flux-select-placeholder="">
            Choose industries...
        </span>
    </template><span class="text-zinc-400 [[disabled]_&amp;]:text-zinc-400/70 dark:text-zinc-400 dark:[[disabled]_&amp;]:text-zinc-500" data-flux-select-placeholder="">
            Choose industries...
        </span>

    <template name="overflow" max="1">
        <div><slot name="count"></slot> selected</div>
    </template>
<template name="options"><div><slot></slot></div></template><template name="option"><div><slot></slot></div></template></ui-selected>

    <svg class="shrink-0 [:where(&amp;)]:size-5 ml-2 -mr-1 text-zinc-300 [[data-flux-select-button]:hover_&amp;]:text-zinc-800 [[disabled]_&amp;]:!text-zinc-200 dark:text-white/60 dark:[[data-flux-select-button]:hover_&amp;]:text-white dark:[[disabled]_&amp;]:!text-white/40" data-flux-icon="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
  <path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd"></path>
</svg>

        </button>

    <ui-options popover="manual" class="[:where(&amp;)]:min-w-48 [:where(&amp;)]:max-h-[20rem] p-[.3125rem] rounded-lg shadow-sm border border-zinc-200 dark:border-zinc-600 bg-white dark:bg-zinc-700" data-flux-options="" tabindex="-1" role="listbox" id="lofi-options-233eb4a325fc9">
        <ui-option class="group/option overflow-hidden data-[hidden]:hidden group flex items-center px-2 py-1.5 w-full focus:outline-none rounded-md text-left text-sm font-medium text-zinc-800 data-[active]:bg-zinc-100 [&amp;[disabled]]:text-zinc-400 dark:text-white data-[active]:dark:bg-zinc-600 dark:[&amp;[disabled]]:text-zinc-400 scroll-my-[.3125rem]" data-flux-option="" id="lofi-option-53a608e09caf8" role="option" aria-selected="false">
        <div class="w-6 shrink-0 [ui-selected_&amp;]:hidden">
            <svg class="shrink-0 [:where(&amp;)]:size-5 hidden [ui-option[data-selected]_&amp;]:block" data-flux-icon="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
  <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd"></path>
</svg>

                </div>

        Photography

            </ui-option>

                <ui-option class="group/option overflow-hidden data-[hidden]:hidden group flex items-center px-2 py-1.5 w-full focus:outline-none rounded-md text-left text-sm font-medium text-zinc-800 data-[active]:bg-zinc-100 [&amp;[disabled]]:text-zinc-400 dark:text-white data-[active]:dark:bg-zinc-600 dark:[&amp;[disabled]]:text-zinc-400 scroll-my-[.3125rem]" data-flux-option="" id="lofi-option-f4a0bd2447d24" role="option" aria-selected="false">
        <div class="w-6 shrink-0 [ui-selected_&amp;]:hidden">
            <svg class="shrink-0 [:where(&amp;)]:size-5 hidden [ui-option[data-selected]_&amp;]:block" data-flux-icon="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
  <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd"></path>
</svg>

                </div>

        Design services

            </ui-option>

                <ui-option class="group/option overflow-hidden data-[hidden]:hidden group flex items-center px-2 py-1.5 w-full focus:outline-none rounded-md text-left text-sm font-medium text-zinc-800 data-[active]:bg-zinc-100 [&amp;[disabled]]:text-zinc-400 dark:text-white data-[active]:dark:bg-zinc-600 dark:[&amp;[disabled]]:text-zinc-400 scroll-my-[.3125rem]" data-flux-option="" id="lofi-option-68ef519fd36fc" role="option" aria-selected="false">
        <div class="w-6 shrink-0 [ui-selected_&amp;]:hidden">
            <svg class="shrink-0 [:where(&amp;)]:size-5 hidden [ui-option[data-selected]_&amp;]:block" data-flux-icon="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
  <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd"></path>
</svg>

                </div>

        Web development

            </ui-option>

                <ui-option class="group/option overflow-hidden data-[hidden]:hidden group flex items-center px-2 py-1.5 w-full focus:outline-none rounded-md text-left text-sm font-medium text-zinc-800 data-[active]:bg-zinc-100 [&amp;[disabled]]:text-zinc-400 dark:text-white data-[active]:dark:bg-zinc-600 dark:[&amp;[disabled]]:text-zinc-400 scroll-my-[.3125rem]" data-flux-option="" id="lofi-option-6a6477ec57aad" role="option" aria-selected="false">
        <div class="w-6 shrink-0 [ui-selected_&amp;]:hidden">
            <svg class="shrink-0 [:where(&amp;)]:size-5 hidden [ui-option[data-selected]_&amp;]:block" data-flux-icon="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
  <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd"></path>
</svg>

                </div>

        Accounting

            </ui-option>

                <ui-option class="group/option overflow-hidden data-[hidden]:hidden group flex items-center px-2 py-1.5 w-full focus:outline-none rounded-md text-left text-sm font-medium text-zinc-800 data-[active]:bg-zinc-100 [&amp;[disabled]]:text-zinc-400 dark:text-white data-[active]:dark:bg-zinc-600 dark:[&amp;[disabled]]:text-zinc-400 scroll-my-[.3125rem]" data-flux-option="" id="lofi-option-3c7dc07dedcea" role="option" aria-selected="false">
        <div class="w-6 shrink-0 [ui-selected_&amp;]:hidden">
            <svg class="shrink-0 [:where(&amp;)]:size-5 hidden [ui-option[data-selected]_&amp;]:block" data-flux-icon="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
  <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd"></path>
</svg>

                </div>

        Legal services

            </ui-option>

                <ui-option class="group/option overflow-hidden data-[hidden]:hidden group flex items-center px-2 py-1.5 w-full focus:outline-none rounded-md text-left text-sm font-medium text-zinc-800 data-[active]:bg-zinc-100 [&amp;[disabled]]:text-zinc-400 dark:text-white data-[active]:dark:bg-zinc-600 dark:[&amp;[disabled]]:text-zinc-400 scroll-my-[.3125rem]" data-flux-option="" id="lofi-option-483c723c4bdd5" role="option" aria-selected="false">
        <div class="w-6 shrink-0 [ui-selected_&amp;]:hidden">
            <svg class="shrink-0 [:where(&amp;)]:size-5 hidden [ui-option[data-selected]_&amp;]:block" data-flux-icon="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
  <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd"></path>
</svg>

                </div>

        Consulting

            </ui-option>

                <ui-option class="group/option overflow-hidden data-[hidden]:hidden group flex items-center px-2 py-1.5 w-full focus:outline-none rounded-md text-left text-sm font-medium text-zinc-800 data-[active]:bg-zinc-100 [&amp;[disabled]]:text-zinc-400 dark:text-white data-[active]:dark:bg-zinc-600 dark:[&amp;[disabled]]:text-zinc-400 scroll-my-[.3125rem]" data-flux-option="" id="lofi-option-fc34d310eab6c" role="option" aria-selected="false">
        <div class="w-6 shrink-0 [ui-selected_&amp;]:hidden">
            <svg class="shrink-0 [:where(&amp;)]:size-5 hidden [ui-option[data-selected]_&amp;]:block" data-flux-icon="" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
  <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd"></path>
</svg>

                </div>

        Other

            </ui-option>
    </ui-options>
</ui-select>
jeffchown commented 3 days ago

@faustbrian The result looks like the styles haven't been compiled. Did you run npm run build (or npm run dev) then php artisan view:clear?

faustbrian commented 3 days ago

Did both of those as the first thing and they also run during the post-install script.

creativagr commented 3 days ago

Remove tailwind forms plugin as it is not compatible with flux.

jeffchown commented 3 days ago

Good call, @creativagr 👍

faustbrian commented 3 days ago

Removing it solved it, thanks!