vue-composable-ui 0.0.1

package/src/composables/list.ts

@@ -0,0 +1,326 @@
+import type { ComputedRef, MaybeRef, Ref, ShallowRef, InjectionKey } from "vue";
+import {
+  ref,
+  shallowRef,
+  unref,
+  provide,
+  computed,
+  readonly,
+  shallowReadonly,
+  triggerRef,
+} from "vue";
+import { useHTMLElement, TemplateRefOrSelector } from "../utils/element";
+
+export type ItemValue = unknown;
+export interface Item {
+  id: number;
+  element: Ref<HTMLElement | undefined>;
+  value: ItemValue;
+  disabled: MaybeRef<boolean>;
+}
+
+export interface ActivationOptions {
+  /**
+   * Focus the corresponding HTML element
+   *
+   * @defaultValue `false`
+   */
+  focus?: boolean;
+}
+
+interface NavigationOptions {
+  /**
+   * Infinitely cycle throught the items
+   *
+   * @defaultValue `false`
+   */
+  loop?: boolean;
+}
+
+export interface UseListReturn {
+  /**
+   * Array of items
+   */
+  items: Readonly<ShallowRef<Item[]>>;
+  /**
+   * Multiselection flag
+   */
+  isMultiselectable: Readonly<Ref<boolean>>;
+  /**
+   * Currently active item
+   */
+  activeItem: ComputedRef<Item | undefined>;
+  /**
+   * Select the currently active item
+   */
+  selectActiveItem: () => void;
+  /**
+   * Activate the currently selected item
+   */
+  activateSelectedItem: (options?: ActivationOptions) => void;
+  /**
+   * Activate the first item
+   */
+  activateFirstItem: (options?: ActivationOptions) => void;
+  /**
+   * Activate the last item
+   */
+  activateLastItem: (options?: ActivationOptions) => void;
+  /**
+   * Activate next item
+   */
+  activateNextItem: (options?: ActivationOptions & NavigationOptions) => void;
+  /**
+   * Activate previous item
+   */
+  activatePrevItem: (options?: ActivationOptions & NavigationOptions) => void;
+}
+
+interface UseListInjectionKey {
+  /**
+   * The list value
+   */
+  value: Readonly<Ref<unknown>>;
+  /**
+   * Select an item by ID
+   */
+  selectItem: (itemId: number) => void;
+  /**
+   * Activate an item by ID
+   */
+  activateItem: (itemId: number, options?: ActivationOptions) => void;
+  /**
+   * Check if an item is selected
+   */
+  isSelected: (itemId: number) => boolean;
+  /**
+   * Check if an item is active
+   */
+  isActive: (itemId: number) => boolean;
+  /**
+   * Add an item to the list
+   *
+   * @returns New item ID
+   */
+  addItem: (
+    itemEl: TemplateRefOrSelector,
+    itemVal: ItemValue,
+    disabled?: MaybeRef<boolean>
+  ) => number;
+  /**
+   * Remove an item from the list by ID
+   */
+  removeItem: (itemId: number) => void;
+}
+
+export const injectList: InjectionKey<UseListInjectionKey> = Symbol();
+
+function isValuesEqual(v1: ItemValue, v2: ItemValue) {
+  const [_v1, _v2] = [unref(v1), unref(v2)];
+  if (typeof _v1 === "object") {
+    if (typeof _v2 === "object") {
+      return JSON.stringify(_v1) === JSON.stringify(_v2);
+    }
+    return false;
+  }
+  return _v1 === _v2;
+}
+
+/**
+ * Creates a reactive list of HTML elements with assigned values.
+ *
+ * @param value A ref to store the list value. Set to an array to enable multiselection.
+ */
+export function useList(value: Ref<unknown>): UseListReturn {
+  let lastId = 0;
+
+  const items: ShallowRef<Item[]> = shallowRef([]);
+  const activeItemId: Ref<number | undefined> = ref();
+
+  const isMultiselectable = computed(() => Array.isArray(value.value));
+
+  function getItem(itemId: number) {
+    const item = items.value.find((_item) => {
+      return _item.id === itemId;
+    });
+    if (!item) throw new Error(`Item not found: (${itemId})`);
+    return item;
+  }
+
+  function focusItem(item: Item) {
+    const el = unref(item.element);
+    if (!el) return;
+    el.focus();
+    return el;
+  }
+
+  function activateItem(
+    item?: Item,
+    { focus = false }: ActivationOptions = {}
+  ) {
+    activeItemId.value = item?.id ?? undefined;
+    if (item !== undefined && focus) focusItem(item);
+  }
+
+  function activateItemById(
+    itemId: number,
+    { focus = false }: ActivationOptions = {}
+  ) {
+    const item = getItem(itemId);
+    return activateItem(item, { focus });
+  }
+
+  function isActive(itemId: number) {
+    return activeItemId.value === itemId;
+  }
+
+  function addItem(
+    itemEl: TemplateRefOrSelector,
+    itemVal: ItemValue,
+    disabled: MaybeRef<boolean> = false
+  ) {
+    const el = useHTMLElement(itemEl);
+    const id = lastId++;
+    items.value.push({
+      id,
+      value: itemVal,
+      element: el,
+      disabled,
+    });
+    triggerRef(items);
+    return id;
+  }
+
+  function removeItem(itemId: number) {
+    const item = getItem(itemId);
+    const idx = items.value.indexOf(item);
+    items.value.splice(idx, 1);
+    triggerRef(items);
+    if (isActive(itemId)) {
+      activateItem();
+    }
+  }
+
+  function selectItem(itemId: number) {
+    const item = getItem(itemId);
+    if (unref(item.disabled)) return;
+    const v = unref(item.value);
+    if (v === undefined) return;
+    if (unref(isMultiselectable)) {
+      const idx = (value.value as ItemValue[]).findIndex((iv) =>
+        isValuesEqual(v, iv)
+      );
+      if (idx > -1) {
+        (value.value as ItemValue[]).splice(idx, 1);
+      } else {
+        value.value = [...(value.value as ItemValue[]), v];
+      }
+    } else {
+      value.value = v;
+    }
+    activateItem(item);
+  }
+
+  function isSelected(item: Item) {
+    return unref(isMultiselectable)
+      ? !!(value.value as ItemValue[]).find((iv) =>
+          isValuesEqual(item.value, iv)
+        )
+      : isValuesEqual(value, item.value);
+  }
+
+  function isSelectedById(itemId: number) {
+    try {
+      const item = getItem(itemId);
+      return isSelected(item);
+    } catch {
+      return false;
+    }
+  }
+
+  function activateSelectedItem({ focus = false }: ActivationOptions = {}) {
+    for (let item of items.value) {
+      if (isSelected(item)) {
+        return activateItem(item, { focus });
+      }
+    }
+  }
+
+  function activateFirstItem({ focus = false }: ActivationOptions = {}) {
+    if (!items.value.length) return;
+    return activateItem(items.value[0], { focus });
+  }
+
+  function activateLastItem({ focus = false }: ActivationOptions = {}) {
+    if (!items.value.length) return;
+    return activateItem(items.value[items.value.length - 1], { focus });
+  }
+
+  function activateNextItem({
+    focus = false,
+    loop = false,
+  }: ActivationOptions & NavigationOptions = {}) {
+    if (activeItemId.value === undefined) return activateFirstItem({ focus });
+    const item = getItem(activeItemId.value);
+    const idx = items.value.indexOf(item);
+    let nextItem: Item;
+    if (idx + 1 < items.value.length) {
+      nextItem = items.value[idx + 1];
+    } else {
+      if (loop) {
+        nextItem = items.value[0];
+      } else {
+        return;
+      }
+    }
+    return activateItem(nextItem, { focus });
+  }
+
+  function activatePrevItem({
+    focus = false,
+    loop = false,
+  }: ActivationOptions & NavigationOptions = {}) {
+    if (activeItemId.value === undefined) return activateLastItem({ focus });
+    const item = getItem(activeItemId.value);
+    const idx = items.value.indexOf(item);
+    let prevItem: Item;
+    if (idx - 1 > -1) {
+      prevItem = items.value[idx - 1];
+    } else {
+      if (loop) {
+        prevItem = items.value[items.value.length - 1];
+      } else {
+        return;
+      }
+    }
+    return activateItem(prevItem, { focus });
+  }
+
+  provide(injectList, {
+    value: readonly(value),
+    selectItem,
+    activateItem: activateItemById,
+    isSelected: isSelectedById,
+    isActive,
+    addItem,
+    removeItem,
+  });
+
+  return {
+    items: shallowReadonly(items),
+    isMultiselectable: readonly(isMultiselectable),
+    activeItem: computed(() =>
+      activeItemId.value !== undefined ? getItem(activeItemId.value) : undefined
+    ),
+    selectActiveItem: () => {
+      if (activeItemId.value !== undefined) {
+        selectItem(activeItemId.value);
+      }
+    },
+    activateSelectedItem,
+    activateFirstItem,
+    activateLastItem,
+    activateNextItem,
+    activatePrevItem,
+  };
+}

package/src/composables/listOption.ts

@@ -0,0 +1,80 @@
+import type { ComputedRef, MaybeRef } from "vue";
+import {
+  ref,
+  unref,
+  inject,
+  computed,
+  onBeforeUnmount,
+  onBeforeMount,
+} from "vue";
+
+import type { TemplateRefOrSelector } from "../utils/element";
+
+import type { ItemValue, ActivationOptions } from "./list";
+import { injectList } from "./list";
+
+interface UseListOptionReturn {
+  /**
+   * Whether the item is selected
+   */
+  isSelected: ComputedRef<boolean>;
+  /**
+   * Whether the item is active
+   */
+  isActive: ComputedRef<boolean>;
+  /**
+   * Select the item
+   */
+  select: () => void;
+  /**
+   * Activate the item
+   */
+  activate: (options?: ActivationOptions) => void;
+}
+
+/**
+ * Registers an HTML element and an associated value in the list created in the parent component
+ *
+ * @param el A template ref or a CSS selector
+ * @param value A value of any type
+ * @param disabled Whether the item is disabled (false by default)
+ */
+export function useListOption(
+  el: TemplateRefOrSelector,
+  value: ItemValue,
+  disabled?: MaybeRef<boolean>
+): UseListOptionReturn {
+  const list = inject(injectList);
+  if (!list) {
+    throw new Error("List injectable context is not provided");
+  }
+
+  const itemId = ref(-1);
+
+  const _isSelected = computed(() => list.isSelected(itemId.value));
+  const _isActive = computed(() => list.isActive(itemId.value));
+
+  function select() {
+    list!.selectItem(itemId.value);
+  }
+
+  function activate({ focus = true } = {}) {
+    if (unref(disabled)) return;
+    list!.activateItem(itemId.value, { focus });
+  }
+
+  onBeforeMount(() => {
+    itemId.value = list.addItem(el, value, disabled);
+  });
+
+  onBeforeUnmount(() => {
+    list.removeItem(itemId.value);
+  });
+
+  return {
+    isSelected: _isSelected,
+    isActive: _isActive,
+    select,
+    activate,
+  };
+}

package/src/composables/popover.ts

@@ -0,0 +1,306 @@
+import type { Ref } from "vue";
+import { ref, watch, onMounted, onBeforeUnmount, nextTick } from "vue";
+import { useHTMLElement, TemplateRefOrSelector } from "../utils/element";
+
+interface UsePopoverOptions {
+  /**
+   * The direction of the popover dialog
+   *
+   * @defaultValue `"down"`
+   */
+  direction?: "up" | "down" | "left" | "right";
+  /**
+   * The alignment of the popover dialog
+   *
+   * @defaultValue `"left"`
+   */
+  align?: "top" | "bottom" | "left" | "right" | "center" | "stretch";
+  /**
+   * The CSS position of the popover dialog
+   *
+   * @defaultValue `"fixed"`
+   */
+  position?: "fixed" | "absolute";
+  /**
+   * Close the popover on a click outside of the dialog
+   *
+   * @defaultValue `true`
+   */
+  closeOnOutsideClick?: boolean;
+  /**
+   * Close the popover on a click inside of the dialog
+   *
+   * @defaultValue `false`
+   */
+  closeOnInsideClick?: boolean;
+}
+
+interface FocusOptions {
+  /**
+   * Focus the popover/activator
+   *
+   * @defaultValue `true`
+   */
+  focus?: boolean;
+}
+
+export interface UsePopoverReturn {
+  /**
+   * The popover state
+   */
+  isOpen: Ref<boolean>;
+  /**
+   * Open the popover
+   */
+  open: (options?: FocusOptions) => void;
+  /**
+   * Close the popover
+   */
+  close: (options?: FocusOptions) => void;
+  /**
+   * Toggle the popover
+   */
+  toggle: (options?: FocusOptions) => void;
+}
+
+/**
+ *
+ * @param activatorEl A template ref or a CSS selector
+ * @param popupEl A template ref or a CSS selector
+ * @param options Popover options
+ */
+export function usePopover(
+  activatorEl: TemplateRefOrSelector,
+  popupEl: TemplateRefOrSelector,
+  {
+    direction = "down",
+    align = "left",
+    position = "fixed",
+    closeOnOutsideClick = true,
+    closeOnInsideClick = false,
+  }: UsePopoverOptions = {}
+): UsePopoverReturn {
+  const isOpen = ref(false);
+
+  function getActivator() {
+    const el = useHTMLElement(activatorEl);
+    if (!el.value) throw new Error("Activator element is undefined");
+    return el.value;
+  }
+
+  function getPopup() {
+    const el = useHTMLElement(popupEl);
+    if (!el.value) throw new Error("Popover element is undefined");
+    return el.value;
+  }
+
+  function open({ focus = true }: FocusOptions = {}) {
+    isOpen.value = true;
+    if (focus)
+      nextTick(() => {
+        const popover = getPopup();
+        popover.focus();
+      });
+  }
+
+  function close({ focus = true }: FocusOptions = {}) {
+    isOpen.value = false;
+    if (focus) {
+      const activator = getActivator();
+      activator.focus();
+    }
+  }
+
+  function toggle(options?: FocusOptions) {
+    if (isOpen.value) {
+      close(options);
+    } else {
+      open(options);
+    }
+  }
+
+  function calcPosition() {
+    if (!isOpen.value) return;
+
+    const activator = getActivator();
+    const popover = getPopup();
+
+    popover.style.position = position;
+    const {
+      top: aTop,
+      right: aRight,
+      bottom: aBottom,
+      left: aLeft,
+      width: aWidth,
+      height: aHeight,
+    } = activator.getBoundingClientRect();
+
+    const popoverHeight = popover.offsetHeight;
+    const popoverWidth = popover.offsetWidth; //> aWidth ? popover.offsetWidth : aWidth;
+
+    const viewportHeight = document.documentElement.clientHeight;
+    const viewportWidth = document.documentElement.clientWidth;
+
+    // reverse menu direction if it doesnt fit in the viewport
+    let _direction = direction;
+
+    if (direction == "up") {
+      if (aTop - popoverHeight < 0) {
+        _direction = "down";
+      }
+    } else if (direction == "down") {
+      if (aBottom + popoverHeight > viewportHeight) {
+        _direction = "up";
+      }
+    } else if (direction == "right") {
+      if (aRight + popoverWidth > viewportWidth) {
+        _direction = "left";
+      }
+    } else if (direction == "left") {
+      if (aLeft - popoverWidth < 0) {
+        _direction = "right";
+      }
+    }
+
+    let _align = align;
+
+    if (align == "left") {
+      if (aLeft + popoverWidth > viewportWidth) {
+        _align = "right";
+      }
+    } else if (align == "right") {
+      if (aRight - popoverWidth < 0) {
+        _align = "left";
+      }
+    } else if (align == "top") {
+      if (aTop + popoverHeight > viewportHeight) {
+        _align = "bottom";
+      }
+    } else if (align == "bottom") {
+      if (aBottom - popoverHeight < 0) {
+        _align = "top";
+      }
+    }
+
+    const _position = {
+      top: "auto",
+      bottom: "auto",
+      left: "auto",
+      right: "auto",
+      width: "auto",
+    };
+
+    const isFixed = position === "fixed";
+
+    if (_direction == "up") {
+      _position.bottom = `${
+        aHeight + (isFixed ? viewportHeight - aBottom : 0)
+      }px`;
+    } else if (_direction == "down") {
+      _position.top = `${aHeight + (isFixed ? aTop : 0)}px`;
+    } else if (_direction == "right") {
+      _position.left = `${aWidth + (isFixed ? aLeft : 0)}px`;
+    } else if (_direction == "left") {
+      _position.right = `${aWidth + (isFixed ? viewportWidth - aRight : 0)}px`;
+    }
+
+    if (["up", "down"].includes(_direction)) {
+      if (_align == "right") {
+        _position.right = `${isFixed ? viewportWidth - aRight : 0}px`;
+      } else if (_align == "left" || _align == "stretch") {
+        _position.left = `${isFixed ? aLeft : 0}px`;
+      } else if (_align == "center") {
+        _position.left = `${
+          (isFixed ? aLeft : 0) - (popoverWidth - aWidth) / 2
+        }px`;
+      }
+    } else {
+      if (_align == "bottom") {
+        _position.bottom = `${isFixed ? viewportHeight - aBottom : 0}px`;
+      } else if (_align == "top") {
+        _position.top = `${isFixed ? aTop : 0}px`;
+      } else if (_align == "center") {
+        _position.top = `${
+          (isFixed ? aTop : 0) - (popoverHeight - aHeight) / 2
+        }px`;
+      }
+    }
+
+    if (["up", "down"].includes(_direction) && _align === "stretch") {
+      _position["width"] = aWidth + "px";
+    }
+
+    for (const prop in _position) {
+      popover.style[prop as keyof typeof _position] =
+        _position[prop as keyof typeof _position];
+    }
+  }
+
+  watch(
+    isOpen,
+    (val) => {
+      if (val) {
+        nextTick(() => {
+          calcPosition();
+        });
+      }
+    },
+    { flush: "pre" }
+  );
+
+  function onWindowClick(evt: MouseEvent) {
+    const target = evt.target as HTMLElement;
+
+    // ignore activator clicks
+    const activator = getActivator();
+    if (activator.contains(target)) return;
+
+    try {
+      const popover = getPopup();
+      // inside
+      if (popover.contains(target)) {
+        if (closeOnInsideClick) {
+          close();
+        }
+      }
+      // outside
+      else {
+        if (closeOnOutsideClick) {
+          isOpen.value = false;
+        }
+      }
+    } catch (e) {}
+  }
+
+  const resizeObserver = new ResizeObserver(calcPosition);
+  const abortController = new AbortController();
+
+  onMounted(() => {
+    window.addEventListener("resize", calcPosition, {
+      passive: true,
+      signal: abortController.signal,
+    });
+    window.addEventListener("scroll", calcPosition, {
+      passive: true,
+      //capture: true,
+      signal: abortController.signal,
+    });
+    window.addEventListener("click", onWindowClick, {
+      passive: true,
+      signal: abortController.signal,
+    });
+    resizeObserver.observe(getActivator());
+  });
+
+  onBeforeUnmount(() => {
+    abortController.abort();
+    resizeObserver.disconnect();
+  });
+
+  return {
+    isOpen,
+    open,
+    close,
+    toggle,
+  };
+}