wip poc

dev/Dev.vue

@@ -1,42 +1,94 @@
 <template>
-  <div class="flex items-center justify-center pt-40">
-    <ListBox
+  <div class="flex flex-col items-center space-y-10 justify-center pt-40">
+    <StyledComboBox
+      :label="({ label }) => label"
       v-model="selected"
-      v-model:open="open"
-      class="px-2 text-left border border-gray-500 rounded w-64 relative h-12"
+      :options="config.options"
     >
-      {{ selected?.label }}
-
-      <ListBoxMenu
-        class="absolute inset-0 top-12 w-full h-64 overflow-y-scroll space-y-1 border rounded"
+      <ComboBoxOption
+        @click="selected = country"
+        v-for="country in config.options"
+        :key="country.id"
+        :class="['px-2 py-1']"
+        :value="country"
+        #default="{ isSelected }"
       >
-        <ListBoxOption
+        <span :class="{ 'text-indigo-600': isSelected }">
+          {{ country.label }}
+        </span>
+      </ComboBoxOption>
+    </StyledComboBox>
+
+    <ComboBox v-model="selected" class="text-left w-64 relative">
+      <ComboBoxButton
+        as="div"
+        class="px-2 border flex rounded items-center justify-center h-12 focus:border-indigo-500 focus:outline-none focus:ring-1 focus:ring-indigo-500"
+      >
+        <div class="flex-1">
+          {{ selected?.label }}
+        </div>
+        <div>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke-width="1.5"
+            stroke="currentColor"
+            class="w-6 h-6"
+          >
+            <path
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              d="M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9"
+            />
+          </svg>
+        </div>
+      </ComboBoxButton>
+
+      <ComboBoxMenu
+        class="absolute mt-1 left-0 w-full h-64 overflow-y-scroll space-y-1 border rounded"
+      >
+        <ComboBoxOption
           @click="selected = country"
           v-for="country in config.options"
+          as="button"
           :key="country.id"
-          :class="['px-2 py-1']"
+          :class="['px-2 py-1 flex text-left hover:bg-gray-100 w-full']"
           :value="country"
           #default="{ isSelected }"
         >
           <span :class="{ 'text-indigo-600': isSelected }">
             {{ country.label }}
           </span>
-        </ListBoxOption>
-      </ListBoxMenu>
-    </ListBox>
+        </ComboBoxOption>
+      </ComboBoxMenu>
+    </ComboBox>
   </div>
 </template>
 
 <script>
 import countries from '../docs/.vuepress/data/countryCodes.js'
-import ListBox from '@/components/ListBox/ListBox.vue'
-import ListBoxMenu from '@/components/ListBox/ListBoxMenu.vue'
-import ListBoxOption from '@/components/ListBox/ListBoxOption.vue'
+import StyledComboBox from '@/components/ComboBox/StyledComboBox.vue'
+import ComboBoxOption from '@/components/ComboBox/ComboBoxOption.vue'
+import ComboBox from '@/components/ComboBox/ComboBox.vue'
+import ComboBoxMenu from '@/components/ComboBox/ComboBoxMenu.vue'
+import ComboBoxButton from '@/components/ComboBox/ComboBoxButton.vue'
+import ComboBoxInput from '@/components/ComboBox/ComboBoxInput.vue'
 
 export default {
-  components: { ListBoxOption, ListBoxMenu, ListBox },
+  components: {
+    ComboBoxInput,
+    ComboBoxButton,
+    ComboBoxMenu,
+    ComboBox,
+    ComboBoxOption,
+    StyledComboBox,
+  },
   data: () => ({
-    selected: null,
+    selected: {
+      styled: null,
+      composed: null,
+    },
     open: false,
 
     config: {

package.json

@@ -48,34 +48,34 @@
         "vue": "3.x"
     },
     "devDependencies": {
-        "@rushstack/eslint-patch": "^1.1.4",
+        "@rushstack/eslint-patch": "^1.8.0",
         "@semantic-release/git": "^10.0.1",
-        "@semantic-release/github": "^8.0.5",
-        "@types/jsdom": "^16.2.14",
-        "@types/node": "^18.0.5",
-        "@vitejs/plugin-vue": "^3.0.0",
-        "@vue/eslint-config-prettier": "^7.0.0",
-        "@vue/eslint-config-typescript": "^11.0.0",
-        "@vue/test-utils": "^2.0.2",
-        "@vue/tsconfig": "^0.1.3",
-        "autoprefixer": "^10.4.7",
+        "@semantic-release/github": "^10.0.2",
+        "@types/jsdom": "^21.1.6",
+        "@types/node": "^20.11.30",
+        "@vitejs/plugin-vue": "^5.0.4",
+        "@vue/eslint-config-prettier": "^9.0.0",
+        "@vue/eslint-config-typescript": "^13.0.0",
+        "@vue/test-utils": "^2.4.5",
+        "@vue/tsconfig": "^0.5.1",
+        "autoprefixer": "^10.4.19",
         "bundlewatch": "^0.3.3",
-        "c8": "^7.11.3",
-        "commitizen": "^4.2.5",
+        "c8": "^9.1.0",
+        "commitizen": "^4.3.0",
         "coveralls": "^3.1.1",
         "cross-env": "^7.0.3",
         "cz-conventional-changelog": "3.3.0",
-        "eslint": "^8.20.0",
-        "eslint-plugin-vue": "^9.2.0",
-        "jsdom": "^20.0.0",
-        "postcss-nested": "^5.0.6",
-        "prettier": "^2.7.1",
-        "semantic-release": "^19.0.3",
-        "typescript": "^4.7.4",
-        "vite": "^3.0.0",
-        "vitest": "^0.18.1",
-        "vue": "^3.2.45",
-        "vue-tsc": "^0.38.8"
+        "eslint": "^8.57.0",
+        "eslint-plugin-vue": "^9.23.0",
+        "jsdom": "^24.0.0",
+        "postcss-nested": "^6.0.1",
+        "prettier": "^3.2.5",
+        "semantic-release": "^23.0.5",
+        "typescript": "^5.4.3",
+        "vite": "^5.2.3",
+        "vitest": "^1.4.0",
+        "vue": "^3.4.21",
+        "vue-tsc": "^2.0.7"
     },
     "config": {
         "commitizen": {

src/components/ComboBox/ComboBox.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { ListBoxKey } from '@/keys'
+import type { ComputedRef } from 'vue'
+import {
+  provide,
+  computed,
+  reactive,
+  watch,
+  onMounted,
+  ref,
+  onUnmounted,
+} from 'vue'
+import { useClickAway } from '@/hooks/useClickAway'
+import type {
+  InjectedListBoxProps,
+  ListBoxProps,
+  ResolvedListBoxProps,
+  VueSelectValue,
+} from '@/types'
+
+const emit = defineEmits(['update:modelValue', 'update:open', 'open', 'close'])
+
+const props = withDefaults(defineProps<ListBoxProps>(), {
+  open: undefined,
+})
+
+const el = ref<HTMLElement>()
+const state = reactive<{
+  open: boolean
+}>({
+  open: props.open === undefined ? false : props.open,
+})
+
+watch(
+  () => state.open,
+  (open) => emit('update:open', open),
+)
+
+const inputText = ref('')
+
+const isOpen = computed<boolean>(() => {
+  if (props.open !== undefined) {
+    return props.open
+  }
+  return state.open
+})
+
+const { addClickAwayListener, removeClickAwayListener } = useClickAway(
+  () => (state.open = false),
+)
+
+onMounted(() => addClickAwayListener(el.value))
+onUnmounted(() => removeClickAwayListener(el.value))
+
+provide<InjectedListBoxProps>(
+  ListBoxKey,
+  computed<ResolvedListBoxProps>(() => ({
+    open: isOpen.value,
+    modelValue: props.modelValue,
+    inputText: inputText.value,
+    toggleOpen: () => (state.open = !state.open),
+    setModelValue: (modelValue) => emit('update:modelValue', modelValue),
+    setInputText: (value: string) => (inputText.value = value),
+  })),
+)
+</script>
+
+<template>
+  <div tabindex="0" role="combobox" ref="el">
+    <slot></slot>
+  </div>
+</template>

src/components/ComboBox/ComboBoxButton.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { inject } from 'vue'
+import { ListBoxKey } from '@/keys'
+
+withDefaults(
+  defineProps<{
+    as?: string
+  }>(),
+  {
+    as: 'button',
+  },
+)
+
+const listBoxProps = inject(ListBoxKey)
+</script>
+
+<template>
+  <Component
+    :is="as"
+    tabindex="0"
+    type="button"
+    aria-haspopup="true"
+    :aria-expanded="listBoxProps.open"
+    @click="listBoxProps.toggleOpen"
+  >
+    <slot></slot>
+  </Component>
+</template>

src/components/ComboBox/ComboBoxInput.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { inject } from 'vue'
+import { ListBoxKey } from '@/keys'
+
+const listBoxProps = inject(ListBoxKey)
+</script>
+
+<template>
+  <input
+    type="search"
+    @input="({ target }) => listBoxProps?.setInputText(target.value)"
+  />
+</template>

src/components/ComboBox/ComboBoxMenu.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { defineProps, inject } from 'vue'
-import { ListBoxInjectionKey } from '@/keys'
-import type { InjectedListBoxProps } from '@/components/ListBox/ListBox.vue'
+import { ListBoxKey } from '@/keys'
 
 withDefaults(
   defineProps<{
@@ -9,10 +8,10 @@ withDefaults(
   }>(),
   {
     as: 'div',
-  }
+  },
 )
 
-const listBoxProps = inject<InjectedListBoxProps>(ListBoxInjectionKey)
+const listBoxProps = inject(ListBoxKey)
 </script>
 
 <template>

src/components/ComboBox/ComboBoxOption.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { computed, defineProps, inject } from 'vue'
-import type { InjectedListBoxProps } from '@/components/ListBox/ListBox.vue'
-import { ListBoxInjectionKey } from '@/keys'
+import { ListBoxKey } from '@/keys'
 
 const props = withDefaults(
   defineProps<{
@@ -10,10 +9,10 @@ const props = withDefaults(
   }>(),
   {
     as: 'div',
-  }
+  },
 )
 
-const listBoxProps = inject<InjectedListBoxProps>(ListBoxInjectionKey)
+const listBoxProps = inject(ListBoxKey)
 
 const isSelected = computed(() => {
   return listBoxProps?.value.modelValue === props.value
@@ -21,7 +20,7 @@ const isSelected = computed(() => {
 </script>
 
 <template>
-  <Component :is="as">
+  <Component :is="as" @click="() => listBoxProps.setModelValue(value)">
     <slot v-bind="{ isSelected }"></slot>
   </Component>
 </template>

src/components/ComboBox/StyledComboBox.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import ComboBox from '@/components/ComboBox/ComboBox.vue'
+import ComboBoxInput from '@/components/ComboBox/ComboBoxInput.vue'
+import ComboBoxMenu from '@/components/ComboBox/ComboBoxMenu.vue'
+import ComboBoxOption from '@/components/ComboBox/ComboBoxOption.vue'
+import ComboBoxButton from '@/components/ComboBox/ComboBoxButton.vue'
+import type { VueSelectOption } from '@/types'
+
+const props = defineProps<{
+  modelValue: unknown
+  label: (value: VueSelectOption) => string
+}>()
+
+const emits = defineEmits(['update:modelValue'])
+
+const value = ref(props.modelValue)
+
+watch(value, (newValue) => emits('update:modelValue', newValue))
+</script>
+
+<template>
+  <ComboBox v-model="value" class="w-64 relative">
+    <div class="flex border border-gray-500 rounded">
+      <ComboBoxInput v-bind="{ label }" class="pl-2 py-1 border-none rounded" />
+      <ComboBoxButton as="button">
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          fill="none"
+          viewBox="0 0 24 24"
+          stroke-width="1.5"
+          stroke="currentColor"
+          class="w-6 h-6"
+        >
+          <path
+            stroke-linecap="round"
+            stroke-linejoin="round"
+            d="M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9"
+          />
+        </svg>
+      </ComboBoxButton>
+    </div>
+
+    <ComboBoxMenu
+      class="absolute z-50 bg-white inset-0 top-12 w-full h-64 overflow-y-scroll space-y-1 border rounded"
+    >
+      <slot></slot>
+    </ComboBoxMenu>
+  </ComboBox>
+</template>

src/components/ListBox/ListBox.vue

@@ -1,58 +0,0 @@
-<script setup lang="ts">
-import { ListBoxInjectionKey } from '@/keys'
-import type { ComputedRef, PropType } from 'vue'
-import { provide, defineEmits, computed, reactive, watch } from 'vue'
-
-export interface ListBoxProps {
-  modelValue: PropType<unknown>
-  open?: boolean | undefined
-}
-export interface ResolvedListBoxProps extends Omit<ListBoxProps, 'open'> {
-  open: boolean
-}
-export type InjectedListBoxProps = ComputedRef<ResolvedListBoxProps>
-
-const emit = defineEmits(['update:modelValue', 'update:open', 'open', 'close'])
-
-const props = withDefaults(defineProps<ListBoxProps>(), {
-  open: undefined,
-})
-
-const mutableState = reactive<{
-  open: boolean
-}>({
-  open: props.open === undefined ? false : props.open,
-})
-
-watch(
-  () => mutableState.open,
-  (open) => emit('update:open', open)
-)
-
-const isOpen = computed<boolean>(() => {
-  if (props.open !== undefined) {
-    return props.open
-  }
-  return mutableState.open
-})
-
-provide<InjectedListBoxProps>(
-  ListBoxInjectionKey,
-  computed<ResolvedListBoxProps>(() => ({
-    open: isOpen.value,
-    modelValue: props.modelValue,
-  }))
-)
-</script>
-
-<template>
-  <button
-    tabindex="0"
-    type="button"
-    aria-haspopup="true"
-    :aria-expanded="open"
-    @click.exact="mutableState.open = !mutableState.open"
-  >
-    <slot></slot>
-  </button>
-</template>

src/hooks/useClickAway.ts

@@ -0,0 +1,21 @@
+export function useClickAway(callback: () => void): {
+  addClickAwayListener: (el: HTMLElement | undefined) => void
+  removeClickAwayListener: (el: HTMLElement | undefined) => void
+} {
+  function clickedOutside(el: HTMLElement | undefined, event: MouseEvent) {
+    if (el && !(el == event.target || el?.contains(event.target))) {
+      callback()
+    }
+  }
+
+  return {
+    addClickAwayListener: (el) =>
+      document.addEventListener('click', (event: MouseEvent) =>
+        clickedOutside(el, event)
+      ),
+    removeClickAwayListener: (el) =>
+      document.removeEventListener('click', (event: MouseEvent) =>
+        clickedOutside(el, event)
+      ),
+  }
+}

src/hooks/useModelValue.ts

@@ -0,0 +1,5 @@
+export function useModelValue<TypeProps>(
+  props: Readonly<TypeProps>,
+  key: string,
+  emit: (name: string, ...args: any[]) => void
+) {}

src/keys.ts

@@ -1,3 +1,8 @@
 import type { InjectionKey } from 'vue'
+import type { ResolvedListBoxProps } from '@/types'
 
-export const ListBoxInjectionKey = Symbol() as InjectionKey<string>
+export const ListBoxKey: InjectionKey<ResolvedListBoxProps> = Symbol(
+  'ListBoxInjectionKey',
+)
+
+export const ListBoxOptionInjectionKey = Symbol() as InjectionKey<string>

src/types.ts

@@ -0,0 +1,16 @@
+import { ComputedRef, PropType } from 'vue'
+
+export type VueSelectValue = PropType<unknown>
+export type VueSelectOption = PropType<unknown>
+
+export interface ListBoxProps {
+  modelValue: VueSelectValue
+  open?: boolean | undefined
+}
+export interface ResolvedListBoxProps extends Omit<ListBoxProps, 'open'> {
+  open: boolean
+  inputText: string
+  toggleOpen: () => boolean
+  setInputText: (text: string) => void
+  setModelValue: (value: unknown) => void
+}

tsconfig.app.json

@@ -1,5 +1,5 @@
 {
-  "extends": "@vue/tsconfig/tsconfig.web.json",
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
   "include": ["env.d.ts", "src/**/*", "src/**/*.vue"],
   "exclude": ["tests"],
   "compilerOptions": {

tsconfig.vite-config.json

@@ -1,5 +1,5 @@
 {
-  "extends": "@vue/tsconfig/tsconfig.node.json",
+  "extends": "@vue/tsconfig/tsconfig.dom.json",
   "include": ["vite.config.*"],
   "compilerOptions": {
     "composite": true,