vue-composable-ui 0.0.1 → 1.0.2

package/src/composables/popover.ts

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

package/src/main.ts

@@ -1,65 +0,0 @@
-// Composables
-
-import { usePopover } from "./composables/popover";
-import { useList } from "./composables/list";
-import { useListOption } from "./composables/listOption";
-import { useFormControl } from "./composables/formControl";
-
-// Utils
-
-import { useHTMLElement } from "./utils/element";
-import { useSequentialId } from "./utils/id";
-
-// Components
-
-import Listbox from "./components/listbox/listbox.vue";
-import ListboxOption from "./components/listbox/listboxOption.vue";
-
-import TabContainer from "./components/tabs/tabContainer.vue";
-import TabList from "./components/tabs/tabList.vue";
-import Tab from "./components/tabs/tab.vue";
-import TabPanel from "./components/tabs/tabPanel.vue";
-
-import Popover from "./components/popover/popover.vue";
-import PopoverDialog from "./components/popover/popoverDialog.vue";
-
-import Tooltip from "./components/tooltip.vue";
-
-import Menu from "./components/menu/menu.vue";
-import MenuItems from "./components/menu/menuItems.vue";
-import MenuItem from "./components/menu/menuItem.vue";
-
-import Combobox from "./components/combobox/combobox.vue";
-import ComboboxOptions from "./components/combobox/comboboxOptions.vue";
-import ComboboxOption from "./components/combobox/comboboxOption.vue";
-
-export {
-  usePopover,
-  useList,
-  useListOption,
-  useFormControl,
-  //
-  useHTMLElement,
-  useSequentialId,
-  //
-  Listbox,
-  ListboxOption,
-  //
-  Popover,
-  PopoverDialog,
-  //
-  TabContainer,
-  TabList,
-  Tab,
-  TabPanel,
-  //
-  Tooltip,
-  //
-  Menu,
-  MenuItems,
-  MenuItem,
-  //
-  Combobox,
-  ComboboxOptions,
-  ComboboxOption,
-};

package/src/utils/element.ts

@@ -1,19 +0,0 @@
-import type { Ref } from "vue";
-import { ref } from "vue";
-
-export type TemplateRefOrSelector<E extends HTMLElement = HTMLElement> =
-  | Ref<E | undefined>
-  | E
-  | string;
-
-export function useHTMLElement<E extends HTMLElement = HTMLElement>(
-  el: TemplateRefOrSelector<E>
-) {
-  if (typeof el === "string") {
-    return ref<E | undefined>(document.querySelector<E>(el) || undefined);
-  } else if (el instanceof HTMLElement) {
-    return ref<E | undefined>(el);
-  } else {
-    return el;
-  }
-}

package/src/utils/id.ts

@@ -1,5 +0,0 @@
-let id = 0;
-
-export function useSequentialId(base: string = "id") {
-  return `${base}-${++id}`;
-}

package/src/vite-env.d.ts

@@ -1 +0,0 @@
-/// <reference types="vite/client" />

package/tsconfig.json

@@ -1,27 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "module": "ESNext",
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "outDir": "dist/types",
-    "declaration": true,
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "emitDeclarationOnly": true,
-    "jsx": "preserve",
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
-  },
-  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
-  "references": [{ "path": "./tsconfig.node.json" }]
-}

package/tsconfig.node.json

@@ -1,10 +0,0 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "skipLibCheck": true,
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true
-  },
-  "include": ["vite.config.ts"]
-}

package/vite.config.ts

@@ -1,28 +0,0 @@
-import { resolve } from "path";
-import { defineConfig } from "vite";
-import vue from "@vitejs/plugin-vue";
-
-export default defineConfig({
-  plugins: [vue()],
-  build: {
-    lib: {
-      // Could also be a dictionary or array of multiple entry points
-      entry: resolve(__dirname, "src/main.ts"),
-      name: "Vue Composable UI",
-      // the proper extensions will be added
-      fileName: "composable-ui",
-    },
-    rollupOptions: {
-      // make sure to externalize deps that shouldn't be bundled
-      // into your library
-      external: ["vue"],
-      output: {
-        // Provide global variables to use in the UMD build
-        // for externalized deps
-        globals: {
-          vue: "Vue",
-        },
-      },
-    },
-  },
-});