refactor listbox example to use the @headlessui/tailwindcss plugin

tailwindlabs · May 22, 2022 · 51f61ca · 51f61ca
1 parent d3174b7
commit 51f61ca
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 58 deletions.
diff --git a/packages/playground-react/pages/listbox/listbox-with-pure-tailwind.tsx b/packages/playground-react/pages/listbox/listbox-with-pure-tailwind.tsx
@@ -67,41 +67,20 @@ export default function Home() {
                     <Listbox.Option
                       key={name}
                       value={name}
-                      className={({ active }) => {
-                        return classNames(
-                          'relative cursor-default select-none py-2 pl-3 pr-9 focus:outline-none',
-                          active ? 'bg-indigo-600 text-white' : 'text-gray-900'
-                        )
-                      }}
+                      className="ui-active:bg-indigo-600 ui-active:text-white ui-not-active:text-gray-900 relative cursor-default select-none py-2 pl-3 pr-9 focus:outline-none"
                     >
-                      {({ active, selected }) => (
-                        <>
-                          <span
-                            className={classNames(
-                              'block truncate',
-                              selected ? 'font-semibold' : 'font-normal'
-                            )}
-                          >
-                            {name}
-                          </span>
-                          {selected && (
-                            <span
-                              className={classNames(
-                                'absolute inset-y-0 right-0 flex items-center pr-4',
-                                active ? 'text-white' : 'text-indigo-600'
-                              )}
-                            >
-                              <svg className="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>
-                          )}
-                        </>
-                      )}
+                      <span className="ui-selected:font-semibold ui-not-selected:font-normal block truncate">
+                        {name}
+                      </span>
+                      <span className="ui-not-selected:hidden ui-selected:flex ui-active:text-white ui-not-active:text-indigo-600 absolute inset-y-0 right-0 items-center pr-4">
+                        <svg className="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>
                     </Listbox.Option>
                   ))}
                 </Listbox.Options>

diff --git a/packages/playground-vue/src/components/listbox/listbox.vue b/packages/playground-vue/src/components/listbox/listbox.vue
@@ -41,24 +41,17 @@
                   :value="person"
                   as="template"
                   :disabled="person.disabled"
-                  v-slot="{ active, selected }"
                 >
-                  <li :class="resolveListboxOptionClassName({ active, selected })">
+                  <li
+                    class="ui-active:text-white ui-active:bg-indigo-600 ui-not-active:text-gray-900 ui-disabled:bg-gray-50 ui-disabled:text-gray-300 relative cursor-default select-none py-2 pl-3 pr-9 focus:outline-none"
+                  >
                     <span
-                      :class="
-                        classNames('block truncate', selected ? 'font-semibold' : 'font-normal')
-                      "
+                      class="ui-selected:font-semibold ui-not-selected:font-normal block truncate"
                     >
                       {{ person.name }}
                     </span>
                     <span
-                      v-if="selected"
-                      :class="
-                        classNames(
-                          'absolute inset-y-0 right-0 flex items-center pr-4',
-                          active ? 'text-white' : 'text-indigo-600'
-                        )
-                      "
+                      class="ui-selected:flex ui-not-selected:hidden ui-active:text-white ui-not-active:text-indigo-600 absolute inset-y-0 right-0 items-center pr-4"
                     >
                       <svg class="h-5 w-5" viewbox="0 0 20 20" fill="currentColor">
                         <path
@@ -89,10 +82,6 @@ import {
   ListboxOption,
 } from '@headlessui/vue'
 
-function classNames(...classes) {
-  return classes.filter(Boolean).join(' ')
-}
-
 export default {
   components: { Listbox, ListboxLabel, ListboxButton, ListboxOptions, ListboxOption },
   setup(props, context) {
@@ -114,14 +103,6 @@ export default {
     return {
       people,
       active,
-      classNames,
-      resolveListboxOptionClassName({ active, disabled }) {
-        return classNames(
-          'relative py-2 pl-3 cursor-default select-none pr-9 focus:outline-none',
-          active ? 'text-white bg-indigo-600' : 'text-gray-900',
-          disabled && 'bg-gray-50 text-gray-300'
-        )
-      },
     }
   },
 }