Alain Afflelou Design System

Template Select 

<div x-data="select" class="relative">
    <button type="button" @click="openSelect" class="text-neutral-500 flex items-center text-neutral-800 justify-between w-full px-3.5 py-2.5 text-left border border-neutral-300 rounded-md shadow-sm text-sm">
        <span :class="selected ? 'font-medium' : 'text-neutral-500'" class="truncate" x-text="selected ? selected.name : 'Select an option'">Select an option</span>
        <svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
        </svg>
    </button>
    <div class="dropdown-content relative mt-2 shadow-none " x-show="show" x-transition x-cloak @click.outside="show = false">
        <template x-for="option in options">
            <button type="button" @click="select(option.id)" class="dropdown-item px-4 border-l border-r first-of-type:border-t first-of-type:rounded-t-md" :class="option.checked ? 'dropdown-item-checked' : ''">
                <span class="max-w-full truncate" x-text="option.name"></span>
                <svg class="dropdown-item-checkmark shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M18.5303 7.46967C18.8232 7.76256 18.8232 8.23744 18.5303 8.53033L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303L5.46967 12.5303C5.17678 12.2374 5.17678 11.7626 5.46967 11.4697C5.76256 11.1768 6.23744 11.1768 6.53033 11.4697L10 14.9393L17.4697 7.46967C17.7626 7.17678 18.2374 7.17678 18.5303 7.46967Z" fill="currentColor" />
                </svg>
            </button>
        </template>
    </div>
    <select class="hidden" x-ref="select" name="subject">
        <option value="" selected disabled hidden></option>
        <option value="option-1">Option 1</option>
        <option value="option-2">Option 2</option>
        <option value="option-3">Option 3</option>
    </select>
</div>

<script>
    function select() {
        return {
            options: [],
            show: false,
            selected: null,
            init() {
                Array.from(this.$refs.select.options).forEach(option => {
                    if (!option.disabled)
                        this.options.push({
                            id: option.value,
                            name: option.text,
                            checked: option.selected
                        })
                });
            },
            openSelect() {
                this.show = !this.show;
            },
            select(id) {
                this.options = this.options.map(option => {
                    if (option.id === id) {
                        option.checked = true;
                        this.selected = option;
                    } else {
                        option.checked = false;
                    }
                    return option;
                });
                this.$refs.select.value = this.selected.id;
                this.show = false;
            }
        }
    }
</script>
 
<div x-data="{{ x_data is defined ? x_data : 'select' }}" class="relative">
    <button type="button" @click="openSelect" class="text-neutral-500 flex items-center text-neutral-800 justify-between w-full px-3.5 py-2.5 text-left border border-neutral-300 rounded-md shadow-sm text-sm">
        <span :class="selected ? 'font-medium' : 'text-neutral-500'" class="truncate" x-text="selected ? selected.name : '{{ placeholder }}'" >{{ placeholder }}</span>
        {% render "@icons-library--chevron-bottom" %}
    </button>
    <div class="dropdown-content relative mt-2 shadow-none {{ absolute ? 'absolute left-0 right-0 top-[calc(100%+8px)]' }}" x-show="show" x-transition x-cloak @click.outside="show = false">
        <template x-for="option in options">
            <button type="button" @click="select(option.id)" class="dropdown-item px-4 border-l border-r first-of-type:border-t first-of-type:rounded-t-md" :class="option.checked ? 'dropdown-item-checked' : ''">
                <span class="max-w-full truncate" x-text="option.name"></span>
                {% render "@icons-library--check-outline" with {iconClass:"dropdown-item-checkmark"} %}
            </button>
        </template>
    </div>
    <select class="hidden" x-ref="select" name="{{ select_name }}">
        <option value="" selected disabled hidden></option>
        {% for option in options %}
            <option value="{{ option.value }}">{{ option.text }}</option>
        {% endfor %}
    </select>
</div>

{% if (x_data is not defined) %}
<script>
    function select() {
        return {
            options: [],
            show: false,
            selected: null,
            init() {
                Array.from(this.$refs.select.options).forEach(option => {
                    if (!option.disabled)
                        this.options.push({
                            id: option.value,
                            name: option.text,
                            checked: option.selected
                        })
                });
            },
            openSelect() {
                this.show = !this.show;
            },
            select(id) {
                this.options = this.options.map(option => {
                    if (option.id === id) {
                        option.checked = true;
                        this.selected = option;
                    } else {
                        option.checked = false;
                    }
                    return option;
                });
                this.$refs.select.value = this.selected.id;
                this.show = false;
            }
        }
    }
</script>
{% endif %}
 
{
  "select_name": "subject",
  "placeholder": "Select an option",
  "options": [
    {
      "value": "option-1",
      "text": "Option 1"
    },
    {
      "value": "option-2",
      "text": "Option 2"
    },
    {
      "value": "option-3",
      "text": "Option 3"
    }
  ]
}

No notes defined.