vue-composable-ui 0.0.1

package/src/components/combobox/combobox.vue

@@ -0,0 +1,229 @@
+<template>
+  <template v-if="name">
+    <ComboboxFormInput
+      v-if="isMultiselectable"
+      v-for="(value, id) in formInputs"
+      :name="`${name}[${id}]`"
+      :value="value"
+    />
+    <ComboboxFormInput v-else :name="name" :value="formInputs" />
+  </template>
+
+  <slot
+    name="input"
+    :popoverId="popoverId"
+    :attrs="inputAttrs"
+    :isOpen="isOpen"
+    :toggle="toggle"
+  >
+    <input v-bind="{ ...$attrs, ...inputAttrs }" autocomplete="off" />
+  </slot>
+
+  <slot />
+</template>
+
+<script setup lang="ts">
+import { ref, computed, provide, watch, nextTick } from "vue";
+import { useSequentialId } from "../../utils/id";
+import { usePopover } from "../../composables/popover";
+import { useList } from "../../composables/list";
+import { useFormControl, FormValidator } from "../../composables/formControl";
+import ComboboxFormInput from "./comboboxFormInput.vue";
+import { injectCombobox } from "../injectionKeys";
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(
+  defineProps<{
+    displayValue?: (value: any) => string;
+
+    id?: string;
+    activatorId?: string;
+
+    name?: string;
+    formValue?: (item: any) => Record<string, string> | string;
+
+    validators?: FormValidator[];
+    showValidationError?: boolean;
+  }>(),
+  {
+    displayValue: (value: any) =>
+      Array.isArray(value)
+        ? value.map((i) => i.toString()).join(", ")
+        : value.toString(),
+    formValue: (item: any) => item,
+    showValidationError: true,
+  }
+);
+
+const formInputs = computed(() => {
+  if (isMultiselectable.value) {
+    return (model.value as any[]).map((i) => props.formValue(i));
+  } else {
+    return props.formValue(model.value);
+  }
+});
+
+const model = defineModel();
+const modelIsValid = defineModel("isValid");
+const modelValidationMessage = defineModel("validationMessage");
+
+const comboboxId = props.id ?? useSequentialId("combobox");
+const activatorId = props.activatorId ?? comboboxId;
+const popoverId = `${comboboxId}-popover`;
+
+// Popover
+const { isOpen, toggle, open, close } = usePopover(
+  `#${activatorId}`,
+  `#${popoverId}`,
+  {
+    direction: "down",
+    align: "stretch",
+    position: "fixed",
+    closeOnOutsideClick: true,
+    closeOnInsideClick: false,
+  }
+);
+
+// List
+const {
+  items,
+  activeItem,
+  isMultiselectable,
+  selectActiveItem,
+  activateSelectedItem,
+  activateFirstItem,
+  activateLastItem,
+  activateNextItem,
+  activatePrevItem,
+} = useList(model);
+
+// Form Control
+const { focus, isValid, validationMessage } = useFormControl(
+  `#${comboboxId}`,
+  props.validators,
+  props.showValidationError
+);
+
+watch(isValid, () => (modelIsValid.value = isValid.value));
+watch(
+  validationMessage,
+  () => (modelValidationMessage.value = validationMessage.value)
+);
+
+watch(items, () => {
+  if (!activeItem.value && items.value.length) {
+    if (
+      (isMultiselectable.value && (model.value as any[]).length) ||
+      (!isMultiselectable.value && model.value)
+    ) {
+      activateSelectedItem({ focus: false });
+    } else {
+      activateFirstItem({ focus: false });
+    }
+  }
+});
+
+const inputValue = ref("");
+
+function updateInputValue() {
+  inputValue.value = props.displayValue(model.value);
+}
+
+watch(model, updateInputValue, { deep: true, immediate: true });
+
+function onChange() {
+  updateInputValue();
+}
+
+function onInput(evt: KeyboardEvent) {
+  inputValue.value = (evt.target as HTMLInputElement).value;
+  open({ focus: false });
+}
+
+function onKeyDown(evt: KeyboardEvent) {
+  if (!isOpen.value) {
+    switch (evt.code) {
+      case "Space":
+      case "Enter":
+        open({ focus: false });
+        break;
+
+      case "End":
+      case "ArrowUp":
+        open({ focus: false });
+        nextTick(() => activateLastItem({ focus: false }));
+        break;
+
+      case "Home":
+      case "ArrowDown":
+        open({ focus: false });
+        nextTick(() => activateFirstItem({ focus: false }));
+        break;
+
+      default:
+        return;
+    }
+  } else {
+    switch (evt.code) {
+      case "Space":
+        selectActiveItem();
+        if (!isMultiselectable.value) {
+          close();
+        }
+        break;
+      case "Enter":
+        selectActiveItem();
+        close();
+        break;
+      case "Tab":
+        selectActiveItem();
+        close();
+        return;
+      case "ArrowUp":
+        activatePrevItem({ focus: false, loop: false });
+        break;
+      case "ArrowDown":
+        activateNextItem({ focus: false, loop: false });
+        break;
+      case "Home":
+        activateFirstItem({ focus: false });
+        break;
+      case "End":
+        activateLastItem({ focus: false });
+        break;
+      case "Escape":
+        close();
+        break;
+      default:
+        return;
+    }
+  }
+
+  evt.preventDefault();
+}
+
+const inputAttrs = computed(() => ({
+  value: inputValue.value,
+  oninput: onInput,
+  onchange: onChange,
+  onkeydown: onKeyDown,
+  onclick: () => open({ focus: false }),
+  id: comboboxId,
+  "aria-controls": isOpen.value ? popoverId : undefined,
+  "aria-expanded": isOpen.value,
+  "aria-activedescendant": activeItem.value?.element.value?.id,
+  "aria-haspopup": "listbox" as "listbox",
+  role: "combobox",
+}));
+
+provide(injectCombobox, {
+  popoverId,
+  isOpen,
+  isMultiselectable,
+  close,
+  focus,
+});
+</script>
+
+<style scoped></style>

package/src/components/combobox/comboboxFormInput.vue

@@ -0,0 +1,33 @@
+<template>
+  <input
+    v-for="(value, name) in inputs"
+    :name="name"
+    :value="value"
+    type="hidden"
+  />
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+
+const props = defineProps<{
+  name: string;
+  value: any;
+}>();
+
+const inputs = computed(() => {
+  if (typeof props.value === "object") {
+    const fields: Record<string, any> = {};
+    for (const [key, value] of Object.entries(props.value)) {
+      fields[`${props.name}[${key}]`] = value;
+    }
+    return fields;
+  } else {
+    return {
+      [props.name]: props.value,
+    };
+  }
+});
+</script>
+
+<style scoped></style>

package/src/components/combobox/comboboxOption.vue

@@ -0,0 +1,52 @@
+<template>
+  <div
+    ref="itemEl"
+    :id="itemId"
+    @click="onClick"
+    @mouseenter="activate({ focus: false })"
+    :data-active="isActive"
+    :aria-selected="isSelected"
+    :aria-disabled="disabled || undefined"
+    role="option"
+  >
+    <slot :isSelected="isSelected" :isActive="isActive" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, inject } from "vue";
+import { useSequentialId } from "../../utils/id";
+import { useListOption } from "../../composables/listOption";
+import { injectCombobox } from "../injectionKeys";
+
+const props = defineProps<{
+  id?: string;
+  value: any;
+  disabled?: boolean;
+}>();
+
+const itemId = props.id ?? useSequentialId("combobox-option");
+
+const itemEl = ref<HTMLElement>();
+
+const { isSelected, isActive, activate, select } = useListOption(
+  itemEl,
+  props.value,
+  props.disabled
+);
+
+const combobox = inject(injectCombobox);
+if (!combobox) {
+  throw new Error("Combobox injectable context is not provided");
+}
+
+function onClick() {
+  select();
+  if (!combobox!.isMultiselectable.value) {
+    combobox!.close({ focus: false });
+  }
+  combobox!.focus();
+}
+</script>
+
+<style scoped></style>

package/src/components/combobox/comboboxOptions.vue

@@ -0,0 +1,17 @@
+<template>
+  <div v-if="combobox!.isOpen.value" :id="combobox!.popoverId" role="listbox">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { inject } from "vue";
+import { injectCombobox } from "../injectionKeys";
+
+const combobox = inject(injectCombobox);
+if (!combobox) {
+  throw new Error("Combobox injectable context is not provided");
+}
+</script>
+
+<style scoped></style>

package/src/components/injectionKeys.ts

@@ -0,0 +1,50 @@
+import type { ComputedRef, InjectionKey } from "vue";
+
+import type { UseListReturn } from "../composables/list";
+import type { UsePopoverReturn } from "../composables/popover";
+import type { useFormControlReturn } from "../composables/formControl";
+
+export const injectTabs: InjectionKey<{
+  getIds: (value: any) => ComputedRef<{
+    tabId: string | undefined;
+    panelId: string | undefined;
+  }>;
+  selectActiveItem: UseListReturn["selectActiveItem"];
+  activateFirstItem: UseListReturn["activateFirstItem"];
+  activateLastItem: UseListReturn["activateLastItem"];
+  activateNextItem: UseListReturn["activateNextItem"];
+  activatePrevItem: UseListReturn["activatePrevItem"];
+  orientation: "horizontal" | "vertical";
+}> = Symbol();
+
+export const injectPopover: InjectionKey<{
+  popoverId: string;
+  activatorId: string;
+  role: "dialog" | "listbox" | "menu" | "tree" | "grid";
+  isOpen: UsePopoverReturn["isOpen"];
+  close: UsePopoverReturn["close"];
+}> = Symbol();
+
+export const injectMenu: InjectionKey<{
+  menuId: string;
+  activatorId: string;
+  isOpen: UsePopoverReturn["isOpen"];
+  close: UsePopoverReturn["close"];
+
+  activeItemId: ComputedRef<string | undefined>;
+  isMultiselectable: UseListReturn["isMultiselectable"];
+  activateFirstItem: UseListReturn["activateFirstItem"];
+  activateLastItem: UseListReturn["activateLastItem"];
+  activateNextItem: UseListReturn["activateNextItem"];
+  activatePrevItem: UseListReturn["activatePrevItem"];
+}> = Symbol();
+
+export const injectCombobox: InjectionKey<{
+  popoverId: string;
+  isOpen: UsePopoverReturn["isOpen"];
+  close: UsePopoverReturn["close"];
+
+  isMultiselectable: UseListReturn["isMultiselectable"];
+
+  focus: useFormControlReturn["focus"];
+}> = Symbol();

package/src/components/listbox/listbox.vue

@@ -0,0 +1,91 @@
+<template>
+  <div
+    @keydown="onKeyDown"
+    :aria-activedescendant="activeItemId"
+    :aria-orientation="orientation"
+    :aria-multiselectable="multiselectable"
+    role="listbox"
+    tabindex="0"
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue";
+import { useList } from "../../composables/list";
+
+const props = withDefaults(
+  defineProps<{
+    orientation?: "horizontal" | "vertical";
+    multiselectable?: boolean;
+    loop?: boolean;
+  }>(),
+  {
+    orientation: "vertical",
+    multiselectable: false,
+    loop: false,
+  }
+);
+
+const model = defineModel();
+
+const {
+  isMultiselectable,
+  activeItem,
+  selectActiveItem,
+  activateFirstItem,
+  activateLastItem,
+  activateNextItem,
+  activatePrevItem,
+} = useList(model);
+
+const activeItemId = computed(() => activeItem.value?.element.value?.id);
+
+function onKeyDown(evt: KeyboardEvent) {
+  switch (evt.code) {
+    case "Space":
+      selectActiveItem();
+      break;
+    case "ArrowUp":
+      if (props.orientation === "horizontal") return;
+      activatePrevItem({ focus: false, loop: props.loop });
+      if (!isMultiselectable.value) {
+        selectActiveItem();
+      }
+      break;
+    case "ArrowDown":
+      if (props.orientation === "horizontal") return;
+      activateNextItem({ focus: false, loop: props.loop });
+      if (!isMultiselectable.value) {
+        selectActiveItem();
+      }
+      break;
+    case "ArrowLeft":
+      if (props.orientation === "vertical") return;
+      activatePrevItem({ focus: false, loop: props.loop });
+      if (!isMultiselectable.value) {
+        selectActiveItem();
+      }
+      break;
+    case "ArrowRight":
+      if (props.orientation === "vertical") return;
+      activateNextItem({ focus: false, loop: props.loop });
+      if (!isMultiselectable.value) {
+        selectActiveItem();
+      }
+      break;
+    case "Home":
+      activateFirstItem({ focus: false });
+      break;
+    case "End":
+      activateLastItem({ focus: false });
+      break;
+    default:
+      return;
+  }
+  evt.preventDefault();
+}
+</script>
+
+<style scoped></style>

package/src/components/listbox/listboxOption.vue

@@ -0,0 +1,37 @@
+<template>
+  <div
+    ref="itemEl"
+    :id="itemId"
+    @click="select"
+    :aria-disabled="disabled"
+    :aria-selected="isSelected"
+    :data-active="isActive"
+    role="option"
+    tabindex="-1"
+  >
+    <slot :isSelected="isSelected" :isActive="isActive" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { useSequentialId } from "../../utils/id";
+import { useListOption } from "../../composables/listOption";
+
+const props = defineProps<{
+  id?: string;
+  value?: any;
+  disabled?: boolean;
+}>();
+
+const itemId = props.id ?? useSequentialId("list-option");
+
+const itemEl = ref<HTMLElement>();
+const { isSelected, isActive, select } = useListOption(
+  itemEl,
+  props.value,
+  props.disabled
+);
+</script>
+
+<style scoped></style>

package/src/components/menu/menu.vue

@@ -0,0 +1,100 @@
+<template>
+  <slot :attrs="activatorAttrs"></slot>
+</template>
+
+<script setup lang="ts">
+import { computed, provide, nextTick } from "vue";
+import { useSequentialId } from "../../utils/id";
+import { usePopover } from "../../composables/popover";
+import { useList } from "../../composables/list";
+import { injectMenu } from "../injectionKeys";
+
+const props = withDefaults(
+  defineProps<{
+    id?: string;
+    activatorId?: string;
+    direction?: "up" | "down" | "left" | "right";
+    align?: "top" | "bottom" | "left" | "right" | "center" | "stretch";
+    position?: "fixed" | "absolute";
+  }>(),
+  {
+    direction: "down",
+    align: "left",
+    position: "fixed",
+  }
+);
+
+const menuId = props.id ?? useSequentialId("menu");
+const activatorId = props.activatorId ?? useSequentialId("menu-activator");
+
+const model = defineModel();
+
+const {
+  isMultiselectable,
+  activeItem,
+  activateFirstItem,
+  activateLastItem,
+  activateNextItem,
+  activatePrevItem,
+} = useList(model);
+
+const { isOpen, toggle, open, close } = usePopover(
+  `#${activatorId}`,
+  `#${menuId}`,
+  {
+    direction: props.direction,
+    align: props.align,
+    position: props.position,
+    closeOnOutsideClick: true,
+    closeOnInsideClick: false,
+  }
+);
+
+function onActivatorKeyDown(evt: KeyboardEvent) {
+  switch (evt.code) {
+    case "Space":
+    case "Enter":
+      toggle();
+      if (isOpen.value) {
+        nextTick(activateFirstItem);
+      }
+      break;
+    case "ArrowUp":
+      open();
+      nextTick(activateLastItem);
+      break;
+    case "ArrowDown":
+      open();
+      nextTick(activateFirstItem);
+      break;
+    default:
+      return;
+  }
+  evt.preventDefault();
+}
+
+const activatorAttrs = computed(() => ({
+  id: activatorId,
+  "aria-controls": isOpen.value ? menuId : undefined,
+  "aria-haspopup": "menu" as "menu",
+  "aria-expanded": isOpen.value,
+  onclick: toggle,
+  onkeydown: onActivatorKeyDown,
+  tabindex: 0,
+}));
+
+provide(injectMenu, {
+  menuId: menuId,
+  activatorId: activatorId,
+  isOpen,
+  close,
+  isMultiselectable,
+  activeItemId: computed(() => activeItem.value?.element.value?.id),
+  activateFirstItem,
+  activateLastItem,
+  activateNextItem,
+  activatePrevItem,
+});
+</script>
+
+<style scoped></style>

package/src/components/menu/menuItem.vue

@@ -0,0 +1,86 @@
+<template>
+  <div
+    ref="itemEl"
+    :id="itemId"
+    @click="onClick"
+    @keydown="onKeyDown"
+    @mouseenter="activate({ focus: false })"
+    :data-active="isActive"
+    :role="role"
+    :aria-checked="value !== undefined ? isSelected : undefined"
+    :aria-disabled="disabled || undefined"
+    tabindex="-1"
+  >
+    <slot :isSelected="isSelected" :isActive="isActive" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, inject, computed } from "vue";
+import { useSequentialId } from "../../utils/id";
+import { useListOption } from "../../composables/listOption";
+import { injectMenu } from "../injectionKeys";
+
+const props = defineProps<{
+  id?: string;
+  value?: any;
+  disabled?: boolean;
+}>();
+
+const emit = defineEmits<{
+  select: [value: any];
+}>();
+
+const itemId = props.id ?? useSequentialId("menu-item");
+
+const itemEl = ref<HTMLElement>();
+const { isSelected, isActive, select, activate } = useListOption(
+  itemEl,
+  props.value,
+  props.disabled
+);
+
+const menu = inject(injectMenu);
+if (!menu) {
+  throw new Error("Menu injectable context is not provided");
+}
+
+const role = computed(() => {
+  if (props.value !== undefined) {
+    return menu.isMultiselectable.value ? "menuitemcheckbox" : "menuitemradio";
+  }
+  return "menuitem";
+});
+
+function selectAndEmit() {
+  select();
+  emit("select", props.value);
+}
+
+function onClick() {
+  selectAndEmit();
+  if (props.value === undefined || !menu?.isMultiselectable.value) {
+    menu!.close();
+  }
+}
+
+function onKeyDown(evt: KeyboardEvent) {
+  switch (evt.code) {
+    case "Space":
+      selectAndEmit();
+      if (props.value === undefined) {
+        menu!.close();
+      }
+      break;
+    case "Enter":
+      selectAndEmit();
+      menu!.close();
+      break;
+    default:
+      return;
+  }
+  evt.preventDefault();
+}
+</script>
+
+<style scoped></style>