feat(tw): init listbox component

apps/tailwind-components/assets/css/main.css

@@ -98,6 +98,9 @@
     --background-color-invalid: var(--color-red-200);
     --background-color-input: var(--color-white);
     --background-color-input-checked: var(--color-yellow-500);
+    --background-color-listbox: var(--color-white);
+    --background-color-listbox-hover: var(--color-gray-100);
+    --background-color-listbox-selected: var(--color-umcg-light-blue);
 
     --text-color-button-primary: var(--color-gray-900);
     --text-color-button-primary-hover: var(--color-gray-900);
@@ -143,6 +146,10 @@
     --text-color-pagination-input: var(--color-blue-800);
     --text-color-pagination-hover: var(--color-white);
     --text-color-footer-link: var(--color-yellow-500);
+    --text-color-listbox: var(--color-black);
+    --text-color-listbox-hover: var(--color-black);
+    --text-color-listbox-selected: var(--color-blue-50);
+    --text-color-button-input-toggle: var(--color-black);
 
     --text-color-invalid: var(--color-red-500);
     --text-color-valid: var(--color-green-800);
@@ -168,6 +175,7 @@
     --border-color-pagination: var(--color-transparent);
     --border-color-input: var(--color-transparent);
     --border-color-input-inverted: var(--color-gray-600);
+    --border-color-listbox-option: var(--color-gray-100);
 
     --border-radius-3px: 3px;
     --border-radius-50px: 50px;

apps/tailwind-components/components/input/Listbox.vue

@@ -0,0 +1,154 @@
+<template>
+  <ul class="mb-6">
+    <li>selection: {{ modelValue }}</li>
+    <li>focus index: {{ focusIndex }}</li>
+  </ul>
+
+  <div class="w-full relative">
+    <InputListboxToggle
+      :id="`listbox-${id}-toggle`"
+      :value="modelValue?.value"
+      :label="modelValue?.label"
+      :placeholder="placeholder"
+      :controls="`listbox-${id}-options`"
+      :required="required"
+      :hasError="hasError"
+      @click="openCloseListbox"
+    />
+
+    <ul
+      :id="`listbox-${id}-options`"
+      role="listbox"
+      tabindex="0"
+      ref="listboxList"
+      :aria-expanded="listboxIsExpanded"
+      :aria-activedescendant="modelValue?.elemId"
+      class="absolute b-0 w-full z-10 bg-listbox"
+      :class="{
+        hidden: !listboxIsExpanded,
+      }"
+      @keydown="onKeyboardEvent"
+    >
+      <li
+        v-for="(option, index) in listboxOptions"
+        :ref="listboxOptionRefs.set"
+        role="option"
+        :id="`listbox-${id}-options-${index}`"
+        class="flex justify-start items-center gap-3 pl-3 py-1 text-listbox border-t-[1px] border-t-listbox-option cursor-pointer focus:bg-listbox-hover focus:text-listbox hover:bg-listbox-hover hover:text-listbox"
+        :class="{
+          '!bg-listbox-selected !text-listbox-selected':
+            option.value === modelValue?.value,
+        }"
+        @click="onListOptionClick(option)"
+        @focus="console.log(option.value, ' is focused')"
+      >
+        <BaseIcon
+          name="Check"
+          class="fill-listbox-selected"
+          :class="option.value === modelValue?.value ? 'visible' : 'invisible'"
+          :width="18"
+        />
+        <span v-if="option.label">
+          {{ option.label }}
+        </span>
+        <span v-else>
+          {{ option.value }}
+        </span>
+      </li>
+      <!-- <ListboxListItem
+        v-for="(option, index) in listboxOptions"
+        :key="index"
+        :ref="listboxOptionRefs.set"
+        :listbox-id="`listbox-${id}-options`"
+        :elem-id="`listbox-${id}-options-${index}`"
+        :value="option.value"
+        :label="option.label"
+        :selected="option.value === modelValue?.value"
+        @update:model-value="onSelection"
+      /> -->
+    </ul>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useTemplateRefsList } from "@vueuse/core";
+import { ref, useTemplateRef } from "vue";
+
+interface IListboxOption {
+  elemId?: string;
+  value: string | number | boolean;
+  label?: string;
+  selected?: boolean;
+}
+
+const props = withDefaults(
+  defineProps<{
+    id: string;
+    listboxLabelId: string;
+    listboxOptions: IListboxOption[];
+    required?: boolean;
+    hasError?: boolean;
+    placeholder?: string;
+  }>(),
+  {
+    required: false,
+    hasError: false,
+    placeholder: "Select an option",
+  }
+);
+
+const modelValue = defineModel<IListboxOption>();
+const listboxIsExpanded = ref<boolean>(false);
+const focusIndex = ref<number>(0);
+const listboxListRef = useTemplateRef<HTMLUListElement>("listboxList");
+const listboxOptionRefs = useTemplateRefsList();
+
+function focusFirstElement() {
+  (listboxOptionRefs.value[0] as HTMLOptionElement).focus();
+}
+
+function openCloseListbox() {
+  listboxIsExpanded.value = !listboxIsExpanded.value;
+  if (listboxIsExpanded.value) {
+    console.log(listboxListRef.value);
+    listboxListRef.value?.focus();
+    focusFirstElement();
+  }
+}
+
+function onListOptionClick(data: IListboxOption) {
+  modelValue.value = data;
+  openCloseListbox();
+}
+
+function onKeyboardEvent(event: KeyboardEvent) {
+  const key = event.key;
+  if (key === "ArrowDown") {
+    event.preventDefault();
+    const newIndexValue: number = focusIndex.value + 1;
+    if (newIndexValue > props.listboxOptions.length - 1) {
+      focusIndex.value = props.listboxOptions.length - 1;
+    } else {
+      focusIndex.value = newIndexValue;
+    }
+  }
+  if (key === "ArrowUp") {
+    event.preventDefault();
+    console.log("up arrow pressed");
+    const newIndexValue: number = focusIndex.value - 1;
+    if (newIndexValue < 0) {
+      focusIndex.value = 0;
+    } else {
+      focusIndex.value = newIndexValue;
+    }
+  }
+
+  if (key === "Enter") {
+    console.log("new selection");
+  }
+
+  if (key === "Spacebar" || key === "" || key === " ") {
+    event.preventDefault();
+  }
+}
+</script>

apps/tailwind-components/components/input/Listbox/List.vue

@@ -0,0 +1,27 @@
+<template>
+  <ul
+    :id="id"
+    role="listbox"
+    tabindex="0"
+    :aria-expanded="expanded"
+    :aria-activedescendant="selectedElemId"
+    class="absolute b-0 w-full z-10 bg-listbox"
+    :class="{
+      hidden: !expanded,
+    }"
+  >
+    <slot></slot>
+  </ul>
+</template>
+
+<script lang="ts" setup>
+interface IListbox {
+  id: string;
+  expanded: boolean;
+  selectedElemId?: string;
+}
+
+withDefaults(defineProps<IListbox>(), {
+  expanded: false,
+});
+</script>

apps/tailwind-components/components/input/Listbox/ListItem.vue

@@ -0,0 +1,77 @@
+<template>
+  <li
+    role="option"
+    tabindex="0"
+    :aria-selected="selected"
+    class="flex justify-start items-center gap-3 pl-3 py-1 text-listbox border-t-[1px] border-t-listbox-option cursor-pointer"
+    :class="{
+      'bg-listbox-selected text-listbox-selected': selected,
+      'hover:bg-listbox-hover hover:text-listbox focus:bg-listbox-hover focus:text-listbox':
+        !selected,
+    }"
+    @click="emitSelection()"
+  >
+    <BaseIcon
+      name="Check"
+      class="fill-listbox-selected"
+      :class="selected ? 'visible' : 'invisible'"
+      :width="18"
+    />
+    <span v-if="label">
+      {{ label }}
+    </span>
+    <span v-else>
+      {{ value }}
+    </span>
+  </li>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+
+interface IListBoxItemData {
+  value: string | number | boolean;
+  label?: string;
+}
+
+interface IListboxItem extends IListBoxItemData {
+  elemId: string;
+  selected?: boolean;
+  å;
+}
+
+const props = withDefaults(defineProps<IListboxItem>(), {
+  selected: false,
+});
+
+const modelValue = ref<IListboxItem>({
+  elemId: props.elemId,
+  value: props.value,
+  label: props.label,
+});
+
+const emit = defineEmits<{
+  (e: "update:modelValue", option: IListBoxItemData): void;
+}>();
+
+function emitSelection() {
+  emit("update:modelValue", modelValue.value);
+}
+
+// function onKeyboardEvent (event: KeyboardEvent) {
+//   const key = event.key;
+//   if (key === 'ArrowDown') {
+//     event.preventDefault();
+//     console.log('down arrow pressed');
+//   }
+//   if (key === 'ArrowUp') {
+//     event.preventDefault();
+//     console.log('up arrow pressed');
+//   }
+
+//   if (key === "Enter") {
+//     console.log("new selection")
+//     emitSelection();
+//   }
+// }
+</script>

apps/tailwind-components/components/input/Listbox/Toggle.vue

@@ -0,0 +1,54 @@
+<template>
+  <button
+    :id="id"
+    aria-haspopup="listbox"
+    :aria-controls="controls"
+    :aria-expanded="expanded"
+    :aria-required="required"
+    class="flex justify-start items-center h-10 w-full text-left pl-10 border-input bg-input text-button-input-toggle"
+    @click="onClick"
+  >
+    <span class="w-full" v-if="label">
+      {{ label }}
+    </span>
+    <span class="w-full" v-else-if="value">
+      {{ value }}
+    </span>
+    <span class="w-full" v-else>
+      {{ placeholder }}
+    </span>
+    <div class="w-[60px] flex flex-col">
+      <BaseIcon :width="18" name="caret-up" class="mx-auto -my-1" />
+      <BaseIcon :width="18" name="caret-down" class="mx-auto -my-1" />
+    </div>
+  </button>
+</template>
+
+<script lang="ts" setup>
+import { ref } from "vue";
+
+interface IInputToggle {
+  id: string;
+  value?: string | number | boolean;
+  label?: string;
+  placeholder?: string;
+  controls: string;
+  required: boolean;
+  hasError: boolean;
+}
+
+withDefaults(defineProps<IInputToggle>(), {
+  placeholder: "Select an option",
+});
+
+const expanded = ref<boolean>(false);
+
+const emit = defineEmits<{
+  (e: "click", value: boolean): void;
+}>();
+
+function onClick() {
+  expanded.value = !expanded.value;
+  emit("click", expanded.value);
+}
+</script>

apps/tailwind-components/pages/input/Listbox.story.vue

@@ -0,0 +1,33 @@
+<template>
+  <InputLabel id="pizza-toppings-label" class="block mb-3">
+    <span>Which pizza topping is you favorite?</span>
+  </InputLabel>
+  <InputListbox
+    id="pizza-toppings"
+    listboxLabelId="pizza-toppings-label"
+    :listboxOptions="[
+      {
+        value: 'tomatoes',
+        label: 'Roma tomatoes',
+      },
+      {
+        value: 'pepperoni',
+        label: 'Pepperoni',
+      },
+      {
+        value: 'mozzerella',
+        label: 'Fresh mozzerella',
+      },
+      {
+        value: 'chillies',
+        label: 'Chillies',
+      },
+      {
+        value: 'basil',
+        label: 'Fresh basil',
+      },
+    ]"
+  />
+</template>
+
+<script lang="ts" setup></script>