vue-composable-ui 0.0.1

package/src/components/menu/menuItems.vue

@@ -0,0 +1,51 @@
+<template>
+  <div
+    v-if="menu!.isOpen.value"
+    @keydown="onKeyDown"
+    :id="menu!.menuId"
+    :aria-activedescendant="menu!.activeItemId.value"
+    :aria-labelledby="menu!.activatorId"
+    role="menu"
+    tabindex="-1"
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { inject } from "vue";
+import { injectMenu } from "../injectionKeys";
+
+const menu = inject(injectMenu);
+if (!menu) {
+  throw new Error("Menu injectable context is not provided");
+}
+
+function onKeyDown(evt: KeyboardEvent) {
+  switch (evt.code) {
+    case "ArrowUp":
+      menu!.activatePrevItem({ focus: true, loop: false });
+      break;
+    case "ArrowDown":
+      menu!.activateNextItem({ focus: true, loop: false });
+      break;
+    case "Home":
+      menu!.activateFirstItem({ focus: true });
+      break;
+    case "End":
+      menu!.activateLastItem({ focus: true });
+      break;
+    case "Escape":
+      menu!.close();
+      break;
+    case "Tab":
+      menu!.isOpen.value = false;
+      return;
+    default:
+      return;
+  }
+  evt.preventDefault();
+}
+</script>
+
+<style scoped></style>

package/src/components/popover/popover.vue

@@ -0,0 +1,68 @@
+<template>
+  <slot
+    :attrs="activatorAttrs"
+    :isOpen="isOpen"
+    :toggle="toggle"
+    :open="open"
+    :close="close"
+  ></slot>
+</template>
+
+<script setup lang="ts">
+import { provide, computed } from "vue";
+import { useSequentialId } from "../../utils/id";
+import { usePopover } from "../../composables/popover";
+import { injectPopover } 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";
+    closeOnOutsideClick?: boolean;
+    closeOnInsideClick?: boolean;
+    role?: "dialog" | "listbox" | "menu" | "tree" | "grid";
+  }>(),
+  {
+    id: useSequentialId("popover"),
+    activatorId: useSequentialId("popover-activator"),
+    direction: "down",
+    align: "left",
+    position: "fixed",
+    closeOnOutsideClick: true,
+    closeOnInsideClick: false,
+    role: "dialog",
+  }
+);
+
+const { isOpen, toggle, open, close } = usePopover(
+  `#${props.activatorId}`,
+  `#${props.id}`,
+  {
+    direction: props.direction,
+    align: props.align,
+    position: props.position,
+    closeOnOutsideClick: props.closeOnOutsideClick,
+    closeOnInsideClick: props.closeOnInsideClick,
+  }
+);
+
+const activatorAttrs = computed(() => ({
+  id: props.activatorId,
+  "aria-controls": isOpen.value ? props.id : undefined,
+  "aria-haspopup": props.role,
+  "aria-expanded": isOpen.value,
+}));
+
+provide(injectPopover, {
+  popoverId: props.id,
+  activatorId: props.activatorId,
+  role: props.role,
+  isOpen,
+  close,
+});
+</script>
+
+<style scoped></style>

package/src/components/popover/popoverDialog.vue

@@ -0,0 +1,35 @@
+<template>
+  <div
+    v-if="popover!.isOpen.value"
+    @keydown="onKeyDown"
+    :id="popover!.popoverId"
+    :role="popover!.role"
+    :aria-labelledby="popover!.activatorId"
+    tabindex="-1"
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { inject } from "vue";
+import { injectPopover } from "../injectionKeys";
+
+const popover = inject(injectPopover);
+if (!popover) {
+  throw new Error("Popover injectable context is not provided");
+}
+
+function onKeyDown(evt: KeyboardEvent) {
+  switch (evt.code) {
+    case "Escape":
+      popover!.close();
+      break;
+    default:
+      return;
+  }
+  evt.preventDefault();
+}
+</script>
+
+<style scoped></style>

package/src/components/tabs/tab.vue

@@ -0,0 +1,35 @@
+<template>
+  <button
+    ref="tab"
+    @click="select"
+    :v="value"
+    :id="tabId"
+    :aria-selected="isSelected"
+    :aria-controls="tabPanelId"
+    :tabindex="isSelected ? 0 : -1"
+    role="tab"
+  >
+    <slot />
+  </button>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { useSequentialId } from "../../utils/id";
+import { useListOption } from "../../composables/listOption";
+
+const props = defineProps<{
+  id?: string;
+  ariaControls?: string;
+  value: any;
+}>();
+
+const tab = ref<HTMLButtonElement>();
+
+const { isSelected, select } = useListOption(tab, props.value);
+
+const tabId = props.id ?? useSequentialId("tab");
+const tabPanelId = props.ariaControls ?? useSequentialId("tab-panel");
+</script>
+
+<style scoped></style>

package/src/components/tabs/tabContainer.vue

@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { provide, computed } from "vue";
+import { useList } from "../../composables/list";
+import { injectTabs } from "../injectionKeys";
+
+const props = withDefaults(
+  defineProps<{
+    orientation?: "horizontal" | "vertical";
+  }>(),
+  {
+    orientation: "horizontal",
+  }
+);
+
+const model = defineModel();
+
+const {
+  items,
+  selectActiveItem,
+  activateFirstItem,
+  activateLastItem,
+  activateNextItem,
+  activatePrevItem,
+} = useList(model);
+
+provide(injectTabs, {
+  getIds: (value: any) =>
+    computed(() => {
+      const item = items.value.find((item) => item.value === value);
+      return {
+        tabId: item?.element.value?.getAttribute("id") || undefined,
+        panelId: item?.element.value?.getAttribute("aria-controls") || undefined,
+      };
+    }),
+  selectActiveItem,
+  activateFirstItem,
+  activateLastItem,
+  activateNextItem,
+  activatePrevItem,
+  orientation: props.orientation,
+});
+</script>
+
+<style scoped></style>

package/src/components/tabs/tabList.vue

@@ -0,0 +1,52 @@
+<template>
+  <div @keydown="onKeyDown" :aria-orientation="tabs!.orientation" role="tablist">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { inject } from "vue";
+import { injectTabs } from "../injectionKeys";
+
+const tabs = inject(injectTabs);
+if (!tabs) {
+  throw new Error("Tabs injectable context is not provided");
+}
+
+function onKeyDown(evt: KeyboardEvent) {
+  switch (evt.code) {
+    case "ArrowUp":
+      if (tabs!.orientation === "vertical") {
+        tabs!.activatePrevItem();
+      }
+      break;
+    case "ArrowDown":
+      if (tabs!.orientation === "vertical") {
+        tabs!.activateNextItem();
+      }
+      break;
+    case "ArrowLeft":
+      if (tabs!.orientation === "horizontal") {
+        tabs!.activatePrevItem();
+      }
+      break;
+    case "ArrowRight":
+      if (tabs!.orientation === "horizontal") {
+        tabs!.activateNextItem();
+      }
+      break;
+    case "Home":
+      tabs!.activateFirstItem();
+      break;
+    case "End":
+      tabs!.activateLastItem();
+      break;
+    default:
+      return;
+  }
+  tabs!.selectActiveItem();
+  evt.preventDefault();
+}
+</script>
+
+<style scoped></style>

package/src/components/tabs/tabPanel.vue

@@ -0,0 +1,36 @@
+<template>
+  <div
+    v-if="isSelected"
+    :id="ids.panelId"
+    :aria-labelledby="ids.tabId"
+    tabindex="0"
+    role="tabpanel"
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { inject, computed } from "vue";
+import { injectList } from "../../composables/list";
+import { injectTabs } from "../injectionKeys";
+
+const props = defineProps<{
+  value: string | number;
+}>();
+
+const list = inject(injectList);
+if (!list) {
+  throw new Error("List injectable context is not provided");
+}
+
+const tabs = inject(injectTabs);
+if (!tabs) {
+  throw new Error("Tabs injectable context is not provided");
+}
+
+const isSelected = computed(() => props.value === list.value.value);
+const ids = tabs.getIds(props.value);
+</script>
+
+<style scoped></style>

package/src/components/tooltip.vue

@@ -0,0 +1,115 @@
+<template>
+  <slot :attrs="activatorAttrs" />
+
+  <Teleport to="body">
+    <div
+      ref="popupEl"
+      v-if="isOpen"
+      :id="tooltipId"
+      v-bind="$attrs"
+      role="tooltip"
+    >
+      <slot name="content">{{ text }}</slot>
+    </div>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref, useSlots } from "vue";
+import { useSequentialId } from "../utils/id";
+import { usePopover } from "../composables/popover";
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = withDefaults(
+  defineProps<{
+    id?: string;
+    text?: string;
+    delay?: string | number;
+    direction?: "up" | "down" | "left" | "right";
+  }>(),
+  {
+    direction: "up",
+  }
+);
+const slots = useSlots();
+
+const popupEl = ref();
+let timer: NodeJS.Timeout;
+
+const tooltipId = props.id ?? useSequentialId("tooltip");
+
+const { isOpen } = usePopover(`[aria-describedby=${tooltipId}]`, popupEl, {
+  direction: props.direction,
+  align: "center",
+});
+
+function open() {
+  timer = setTimeout(
+    () => {
+      isOpen.value = true;
+    },
+    typeof props.delay === "string" ? parseInt(props.delay) : props.delay
+  );
+}
+
+function close() {
+  isOpen.value = false;
+  clearTimeout(timer);
+}
+
+function onKeyDown(evt: KeyboardEvent) {
+  if (evt.key === "Escape") {
+    close();
+  }
+}
+
+const activatorAttrs = {
+  "aria-describedby": tooltipId,
+  onmouseenter: open,
+  onmouseleave: close,
+  onfocus: open,
+  onblur: close,
+  onkeydown: onKeyDown,
+};
+
+const controller = new AbortController();
+
+onMounted(() => {
+  if (slots.default) return;
+  const activator = document.querySelector(
+    `[aria-describedby=${tooltipId}]`
+  ) as HTMLElement;
+  if (!activator) {
+    throw new Error(`Tooltip activator not found: ${tooltipId}`);
+  }
+  activator.addEventListener("mouseenter", open, {
+    signal: controller.signal,
+    passive: true,
+  });
+  activator.addEventListener("mouseleave", close, {
+    signal: controller.signal,
+    passive: true,
+  });
+  activator.addEventListener("focus", open, {
+    signal: controller.signal,
+    passive: true,
+  });
+  activator.addEventListener("blur", close, {
+    signal: controller.signal,
+    passive: true,
+  });
+  activator.addEventListener("keydown", onKeyDown, {
+    signal: controller.signal,
+    passive: true,
+  });
+});
+
+onBeforeUnmount(() => {
+  controller.abort();
+});
+</script>
+
+<style scoped></style>

package/src/composables/formControl.ts

@@ -0,0 +1,144 @@
+import type { MaybeRef, Ref } from "vue";
+import { ref, unref, onBeforeUnmount, onMounted, readonly } from "vue";
+
+import type { TemplateRefOrSelector } from "../utils/element";
+import { useHTMLElement } from "../utils/element";
+
+type FormElement = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
+
+/**
+ * A validating function must return `true` or a string describing the error
+ */
+export type FormValidator = (value: string) => boolean | string;
+
+export interface useFormControlReturn {
+  /**
+   * Focus the form control
+   */
+  focus: () => void;
+  /**
+   * Validate the form control
+   *
+   * @returns Validation result
+   */
+  validate: () => boolean;
+  /**
+   * Whether the form control is valid. A shorthand for `validity.valid`, but can be manually overriden.
+   */
+  isValid: Ref<boolean>;
+  /**
+   * The validity state of the form control
+   *
+   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/ValidityState}
+   */
+  validity: Readonly<Ref<ValidityState | undefined>>;
+  /**
+   * A string representing a localized message that describes the validation constraints that the control does not satisfy (if any)
+   */
+  validationMessage: Readonly<Ref<string>>;
+  /**
+   * Whether the value has been changed since the form control was mounted
+   */
+  isChanged: Ref<boolean>;
+}
+
+/**
+ * Utilizes Constraint Validation API to enable custom validation constrains for a form control
+ *
+ * @param el A template ref or a CSS selector
+ * @param validators An array of validating functions
+ * @param showValidationError Whether to show the default browser validation error (true by default)
+ *
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation}
+ */
+export function useFormControl(
+  el: TemplateRefOrSelector<FormElement>,
+  validators: MaybeRef<FormValidator[]> = [],
+  showValidationError: MaybeRef<boolean> = true
+): useFormControlReturn {
+  const isChanged = ref(false);
+  const isValid = ref(true);
+  const validity = ref<ValidityState>();
+  const validationMessage = ref("");
+
+  let formElement: FormElement | undefined;
+  let initValue: string;
+
+  function focus() {
+    formElement?.focus();
+  }
+
+  function updateValidationState() {
+    isValid.value = formElement!.validity.valid;
+    validity.value = formElement!.validity;
+    validationMessage.value = formElement!.validationMessage;
+  }
+
+  function validate() {
+    if (!formElement) throw new Error("Form element is undefined");
+    formElement.setCustomValidity("");
+
+    if (formElement.validity.valid) {
+      const value = formElement.value;
+      for (const validator of unref(validators)) {
+        const check = validator(value);
+        if (check !== true) {
+          formElement.setCustomValidity(check as string);
+          break;
+        }
+      }
+    }
+
+    updateValidationState();
+    return isValid.value;
+  }
+
+  function onInvalid(event: Event) {
+    updateValidationState();
+    if (!unref(showValidationError)) {
+      event.preventDefault();
+    }
+  }
+
+  function onChange() {
+    validate();
+    isChanged.value = initValue !== formElement!.value;
+  }
+
+  let abortController = new AbortController();
+
+  onMounted(() => {
+    formElement = useHTMLElement(el).value;
+    if (!formElement) throw new Error("Form element is undefined");
+
+    initValue = formElement.value;
+
+    formElement.addEventListener("change", onChange, {
+      signal: abortController.signal,
+      passive: true,
+    });
+    formElement.addEventListener("invalid", onInvalid, {
+      signal: abortController.signal,
+    });
+
+    // Fix autofocus?
+    if (formElement?.autofocus) {
+      focus();
+    }
+  });
+
+  onBeforeUnmount(() => {
+    abortController.abort();
+  });
+
+  return {
+    focus,
+    validate,
+
+    isValid,
+    validity: readonly(validity),
+    validationMessage: readonly(validationMessage),
+
+    isChanged,
+  };
+}