vue-composable-ui 0.0.1 → 1.0.2

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>

package/src/composables/formControl.ts

@@ -1,144 +0,0 @@
-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,
-  };
-}

package/src/composables/list.ts

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

@@ -1,80 +0,0 @@
-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,
-  };
-}