vue-composable-ui 0.0.1 → 1.0.2

package/src/components/listbox/listbox.vue

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

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

@@ -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>