Add listbox multi elements example

playground/dev.html

@@ -32,7 +32,8 @@
  { name: 'Tabs', path: '/tabs/basic', page: 'tabs/basic' },
  { name: 'Combobox', path: '/combobox/basic', page: 'combobox/basic' },
  { name: 'Listbox', path: '/listbox/basic', page: 'listbox/basic' },
- { name: 'Listbox Multi Select', path: '/listbox/multi', page: 'listbox/multi' },
+ { name: 'Listbox Multi Select', path: '/listbox/multi-select', page: 'listbox/multi-select' },
+ { name: 'Listbox Multi Elements', path: '/listbox/multi-elements', page: 'listbox/multi-elements' },
  { name: 'Radio Group', path: '/radio-group/basic', page: 'radio-group/basic' },
  { name: 'Something Wrong!', path: '(.*)', page: 'home', hidden: true }
  ]

playground/pages/listbox/multi-elements.html

@@ -0,0 +1,126 @@
+<script>
+ function setupListboxMultiElementsData() {
+ let people = [
+ { id: 1, name: 'Wade Cooper' },
+ { id: 2, name: 'Arlene Mccoy' },
+ { id: 3, name: 'Devon Webb' },
+ { id: 4, name: 'Tom Cook' },
+ { id: 5, name: 'Tanya Fox' },
+ { id: 6, name: 'Hellen Schmidt' },
+ { id: 7, name: 'Caroline Schultz' },
+ { id: 8, name: 'Mason Heaney' },
+ { id: 9, name: 'Claudie Smitham' },
+ { id: 10, name: 'Emil Schaefer' },
+ ]
+
+ return {
+ people,
+ active: people[1]
+ }
+ }
+</script>
+<template x-component:page="listbox-multi-elements" x-import="hui:listbox" x-data="setupListboxMultiElementsData()">
+ <div class="flex h-full w-screen justify-center space-x-4 bg-gray-50 p-12">
+ <div class="w-64">
+ <div class="space-y-1">
+ <hui-listbox x-model="active">
+ <hui-listbox-label class="block text-sm font-medium leading-5 text-gray-700">Assigned
+ to</hui-listbox-label>
+
+ <div class="relative">
+ <span class="inline-block w-full rounded-md shadow-sm">
+ <hui-listbox-button
+ class="focus:shadow-outline-blue relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-3 pr-10 text-left transition duration-150 ease-in-out focus:border-blue-300 focus:outline-none sm:text-sm sm:leading-5">
+ <span class="block truncate" x-text="active.name"></span>
+ <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+ <svg class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="none"
+ stroke="currentColor">
+ <path d="M7 7l3-3 3 3m0 6l-3 3-3-3" strokeWidth="1.5" strokeLinecap="round"
+ strokeLinejoin="round" />
+ </svg>
+ </span>
+ </hui-listbox-button>
+ </span>
+
+ <div class="absolute mt-1 w-full rounded-md bg-white shadow-lg">
+ <hui-listbox-options
+ class="shadow-xs max-h-60 overflow-auto rounded-md py-1 text-base leading-6 focus:outline-none sm:text-sm sm:leading-5">
+ <template x-for="person in people" :key="person.id">
+ <hui-listbox-option :value="person" :class="[
+ 'relative py-2 pl-3 cursor-default select-none pr-9 focus:outline-none',
+ active ? 'text-white bg-indigo-600' : 'text-gray-900']">
+ <span x-text="person.name "
+ :class=" ['block truncate', selected ? 'font-semibold' : 'font-normal'] ">
+ </span>
+ <span x-show="selected" :class="[ 'absolute inset-y-0 right-0 flex items-center pr-4',
+ active ? 'text-white' : 'text-indigo-600'] ">
+ <svg class="h-5 w-5" viewbox="0 0 20 20" fill="currentColor">
+ <path fillRule="evenodd"
+ d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+ clipRule="evenodd" />
+ </svg>
+ </span>
+ </hui-listbox-option></template>
+ </hui-listbox-options>
+ </div>
+ </div>
+ </hui-listbox>
+ </div>
+ </div>
+
+ <div>
+ <label for="email" class="block text-sm font-medium leading-5 text-gray-700"> Email </label>
+ <div class="relative mt-1 rounded-md shadow-sm">
+ <input class="form-input block w-full sm:text-sm sm:leading-5" placeholder="[email protected]" />
+ </div>
+ </div>
+
+ <div class="w-64">
+ <div class="space-y-1">
+ <hui-listbox x-model="active">
+ <hui-listbox-label class="block text-sm font-medium leading-5 text-gray-700">Assigned
+ to</hui-listbox-label>
+
+ <div class="relative">
+ <span class="inline-block w-full rounded-md shadow-sm">
+ <hui-listbox-button
+ class="focus:shadow-outline-blue relative w-full cursor-default rounded-md border border-gray-300 bg-white py-2 pl-3 pr-10 text-left transition duration-150 ease-in-out focus:border-blue-300 focus:outline-none sm:text-sm sm:leading-5">
+ <span class="block truncate" x-text="active.name"></span>
+ <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+ <svg class="h-5 w-5 text-gray-400" viewBox="0 0 20 20" fill="none"
+ stroke="currentColor">
+ <path d="M7 7l3-3 3 3m0 6l-3 3-3-3" strokeWidth="1.5" strokeLinecap="round"
+ strokeLinejoin="round" />
+ </svg>
+ </span>
+ </hui-listbox-button>
+ </span>
+
+ <div class="absolute mt-1 w-full rounded-md bg-white shadow-lg">
+ <hui-listbox-options
+ class="shadow-xs max-h-60 overflow-auto rounded-md py-1 text-base leading-6 focus:outline-none sm:text-sm sm:leading-5">
+ <template x-for="person in people" :key="person.id">
+ <hui-listbox-option v-for="person in people" :key="person.id" :value="person"
+ :class="['relative py-2 pl-3 cursor-default select-none pr-9 focus:outline-none',
+ active ? 'text-white bg-indigo-600' : 'text-gray-900']">
+ <span x-text="person.name"
+ :class="['block truncate', selected ? 'font-semibold' : 'font-normal']">
+ </span>
+ <span x-show="selected" :class="['absolute inset-y-0 right-0 flex items-center pr-4',
+ active ? 'text-white' : 'text-indigo-600']">
+ <svg class="h-5 w-5" viewbox="0 0 20 20" fill="currentColor">
+ <path fillRule="evenodd"
+ d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+ clipRule="evenodd" />
+ </svg>
+ </span>
+ </hui-listbox-option>
+ </template>
+ </hui-listbox-options>
+ </div>
+ </div>
+ </hui-listbox>
+ </div>
+ </div>
+ </div>
+</template>

playground/pages/listbox/multi.html → playground/pages/listbox/multi-select.html

@@ -21,7 +21,7 @@
  }
  }
 </script>
-<template x-component:page="listbox-multi" x-import="hui:listbox" x-data="setupListboxMultiData()">
+<template x-component:page="listbox-multi-select" x-import="hui:listbox" x-data="setupListboxMultiData()">
  <div class="flex h-full justify-center space-x-4 bg-gray-50 p-12">
  <div class="w-full max-w-4xl">
  <div class="space-y-1">