vue-composable-ui 0.0.1 → 1.0.1

package/src/components/menu/menu.vue

@@ -1,100 +0,0 @@
-<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

@@ -1,86 +0,0 @@
-<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>

package/src/components/menu/menuItems.vue

@@ -1,51 +0,0 @@
-<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

@@ -1,68 +0,0 @@
-<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

@@ -1,35 +0,0 @@
-<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

@@ -1,35 +0,0 @@
-<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

@@ -1,50 +0,0 @@
-<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

@@ -1,52 +0,0 @@
-<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

@@ -1,36 +0,0 @@
-<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

@@ -1,115 +0,0 @@
-<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>