vue-composable-ui 0.0.1 → 1.0.2

package/dist/types/composables/list.d.ts

@@ -0,0 +1,107 @@
+import type { ComputedRef, MaybeRef, Ref, ShallowRef, InjectionKey } from "vue";
+import { TemplateRefOrSelector } from "../utils/element";
+export type ItemValue = unknown;
+export interface Item {
+    id: number;
+    element: Ref<HTMLElement | null>;
+    value: ItemValue;
+    disabled: MaybeRef<boolean>;
+}
+export interface ActivationOptions {
+    /**
+     * Focus the corresponding HTML element
+     *
+     * @defaultValue `false`
+     */
+    focus?: boolean;
+}
+interface NavigationOptions {
+    /**
+     * Infinitely cycle through 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;
+    /**
+     * Deactivates the currently active item
+     */
+    deactivateItem: () => 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 declare const injectList: InjectionKey<UseListInjectionKey>;
+/**
+ * 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 declare function useList(value: Ref<unknown>): UseListReturn;
+export {};

package/dist/types/composables/listOption.d.ts

@@ -0,0 +1,34 @@
+import type { ComputedRef, MaybeRef } from "vue";
+import type { TemplateRefOrSelector } from "../utils/element";
+import type { ItemValue, ActivationOptions } 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;
+    /**
+     * Deactivate the item
+     */
+    deactivate: () => 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 declare function useListOption(el: TemplateRefOrSelector, value: ItemValue, disabled?: MaybeRef<boolean>): UseListOptionReturn;
+export {};

package/dist/types/composables/popover.d.ts

@@ -0,0 +1,68 @@
+import type { Ref } from "vue";
+import { 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 declare function usePopover(activatorEl: TemplateRefOrSelector, popupEl: TemplateRefOrSelector, { direction, align, position, closeOnOutsideClick, closeOnInsideClick, }?: UsePopoverOptions): UsePopoverReturn;
+export {};

package/dist/types/main.d.ts

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

package/dist/types/utils/element.d.ts

@@ -0,0 +1,3 @@
+import type { Ref } from "vue";
+export type TemplateRefOrSelector<E extends HTMLElement = HTMLElement> = Ref<E | null> | E | string;
+export declare function useHTMLElement<E extends HTMLElement = HTMLElement>(el: TemplateRefOrSelector<E>): Ref<E | null, E | null> | ([E | null] extends [Ref<any, any>] ? import("@vue/shared").IfAny<Ref<any, any> & E, Ref<Ref<any, any> & E, Ref<any, any> & E>, Ref<any, any> & E> : Ref<import("vue").UnwrapRef<E> | null, E | import("vue").UnwrapRef<E> | null>);

package/package.json

@@ -1,14 +1,23 @@
 {
   "name": "vue-composable-ui",
-  "version": "0.0.1",
+  "version": "1.0.2",
   "type": "module",
-  "repository": "https://github.com/dzapletin/vue-composable-ui",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/dzapletin/vue-composable-ui.git"
+  },
   "main": "./dist/composable-ui.umd.cjs",
   "module": "./dist/composable-ui.js",
   "exports": {
     ".": {
-      "import": "./dist/composable-ui.js",
-      "require": "./dist/composable-ui.umd.cjs"
+      "import": {
+        "types": "./dist/types/main.d.ts",
+        "default": "./dist/composable-ui.js"
+      },
+      "require": {
+        "types": "./dist/types/main.d.ts",
+        "default": "./dist/composable-ui.umd.cjs"
+      }
     }
   },
   "types": "./dist/types/main.d.ts",
@@ -18,18 +27,25 @@
     "preview": "vite preview",
     "docs:dev": "vitepress dev docs",
     "docs:build": "vitepress build docs",
-    "docs:preview": "vitepress preview docs"
+    "docs:preview": "vitepress preview docs",
+    "release": "release-it"
   },
-  "dependencies": {
-    "vue": "^3.3.4"
+  "files": [
+    "dist"
+  ],
+  "peerDependencies": {
+    "vue": "^3.5.12"
   },
   "devDependencies": {
-    "@types/node": "^22.4.0",
-    "@vitejs/plugin-vue": "^5.1.2",
+    "@types/node": "^24.1.0",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "glob": "^11.0.2",
+    "release-it": "^19.0.4",
     "sass": "^1.69.5",
     "typescript": "^5.0.2",
-    "vite": "^5.4.1",
-    "vitepress": "^1.0.0-rc.24",
-    "vue-tsc": "^2.0.29"
+    "vite": "^7.0.6",
+    "vitepress": "^1.6.4",
+    "vue": "^3.5.12",
+    "vue-tsc": "^3.0.5"
   }
 }

package/.github/workflows/deploy.yml

@@ -1,21 +0,0 @@
-name: Publish Package to npmjs
-on:
-  release:
-    types: [published]
-jobs:
-  build:
-    runs-on: ubuntu-latest
-    permissions:
-      contents: read
-      id-token: write
-    steps:
-      - uses: actions/checkout@v4
-      # Setup .npmrc file to publish to npm
-      - uses: actions/setup-node@v4
-        with:
-          node-version: "20.x"
-          registry-url: "https://registry.npmjs.org"
-      - run: npm ci
-      - run: npm publish --provenance --access public
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

package/.github/workflows/docs.yml

@@ -1,62 +0,0 @@
-name: Deploy Docs to Pages
-
-on:
-  # Runs on pushes targeting the `main` branch. Change this to `master` if you're
-  # using the `master` branch as the default branch.
-  push:
-    branches: [main]
-
-  # Allows you to run this workflow manually from the Actions tab
-  workflow_dispatch:
-
-# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
-permissions:
-  contents: read
-  pages: write
-  id-token: write
-
-# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
-# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
-concurrency:
-  group: pages
-  cancel-in-progress: false
-
-jobs:
-  # Build job
-  build:
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-        with:
-          fetch-depth: 0 # Not needed if lastUpdated is not enabled
-      # - uses: pnpm/action-setup@v3 # Uncomment this if you're using pnpm
-      # - uses: oven-sh/setup-bun@v1 # Uncomment this if you're using Bun
-      - name: Setup Node
-        uses: actions/setup-node@v4
-        with:
-          node-version: 20
-          cache: npm # or pnpm / yarn
-      - name: Setup Pages
-        uses: actions/configure-pages@v4
-      - name: Install dependencies
-        run: npm ci # or pnpm install / yarn install / bun install
-      - name: Build with VitePress
-        run: npm run docs:build # or pnpm docs:build / yarn docs:build / bun run docs:build
-      - name: Upload artifact
-        uses: actions/upload-pages-artifact@v3
-        with:
-          path: docs/.vitepress/dist
-
-  # Deployment job
-  deploy:
-    environment:
-      name: github-pages
-      url: ${{ steps.deployment.outputs.page_url }}
-    needs: build
-    runs-on: ubuntu-latest
-    name: Deploy
-    steps:
-      - name: Deploy to GitHub Pages
-        id: deployment
-        uses: actions/deploy-pages@v4

package/.vscode/extensions.json

@@ -1,7 +0,0 @@
-{
-  "recommendations": [
-    "Vue.volar",
-    "Vue.vscode-typescript-vue-plugin",
-    "puppet.puppet-vscode"
-  ]
-}

package/docs/.vitepress/config.mts

@@ -1,40 +0,0 @@
-import { defineConfig } from "vitepress";
-
-// https://vitepress.dev/reference/site-config
-export default defineConfig({
-  title: "Vue Composable UI",
-  description: "A truly headless UI framework",
-  base: "/vue-composable-ui/",
-  themeConfig: {
-    // https://vitepress.dev/reference/default-theme-config
-    nav: [{ text: "Home", link: "/" }],
-
-    sidebar: [
-      {
-        text: "Composables",
-        items: [
-          { text: "useList", link: "/composables/list" },
-          { text: "useListOption", link: "/composables/list-option" },
-          { text: "usePopover", link: "/composables/popover" },
-          { text: "useFormControl", link: "/composables/form-control" },
-        ],
-      },
-      {
-        text: "Components",
-        items: [
-          { text: "Listbox", link: "/components/listbox" },
-          { text: "Tabs", link: "/components/tabs" },
-          { text: "Popover", link: "/components/popover" },
-          { text: "Tooltip", link: "/components/tooltip" },
-          { text: "Menu", link: "/components/menu" },
-          { text: "Combobox", link: "/components/combobox" },
-        ],
-      },
-    ],
-
-    socialLinks: [
-      { icon: "github", link: "https://github.com/dzapletin/vue-composable-ui" },
-    ],
-  },
-  lastUpdated: true,
-});

package/docs/.vitepress/theme/index.js

@@ -1,4 +0,0 @@
-import DefaultTheme from "vitepress/theme";
-import "./style.scss";
-
-export default DefaultTheme;

package/docs/.vitepress/theme/style.scss

@@ -1,155 +0,0 @@
-.d-demo {
-  display: flex;
-  gap: 1rem;
-  flex-wrap: wrap;
-  justify-content: center;
-  justify-items: stretch;
-  position: relative;
-  border-radius: 1rem;
-  padding: 5rem;
-  background: linear-gradient(90deg, #e3ffe7 0%, #d9e7ff 100%);
-  overflow: hidden;
-
-  &__column {
-    flex-grow: 1;
-  }
-
-  h5 {
-    font-weight: 600;
-    line-height: 24px;
-    font-size: 16px;
-    margin-bottom: 0.5rem;
-    color: black;
-  }
-}
-
-.d-demo [tabindex]:not([tabindex="-1"]):focus {
-  outline: 3px solid DeepPink;
-  outline-offset: 2px;
-}
-
-.d-pointer {
-  cursor: pointer;
-}
-
-.d-btn {
-  padding: 0.375rem 0.75rem;
-  border-radius: 0.25rem;
-  font-size: 1rem;
-  line-height: 1.5;
-  border: 1px solid transparent;
-  background-color: #6267ec;
-  color: white;
-
-  &:hover {
-    background-color: #5047e0;
-  }
-}
-
-.d-tooltip {
-  background-color: rgba($color: #000, $alpha: 0.8);
-  color: white;
-  border-radius: 0.25rem;
-  padding: 0.25rem 0.5rem;
-  margin: 0.5rem 0;
-}
-
-.d-popover {
-  z-index: 20;
-  outline: none;
-  padding: 1rem;
-  background: white;
-  color: black;
-  border-radius: 0.5rem;
-  box-shadow: 0 14px 44px rgba(0, 0, 0, 0.12), 0 3px 9px rgba(0, 0, 0, 0.12);
-  margin: 0.5rem 0;
-
-  &--h {
-    margin: 0 0.5rem;
-  }
-}
-
-.d-menu {
-  @extend .d-popover;
-  padding: 0.25rem;
-  margin: 0.25rem 0;
-}
-
-.d-menu-item {
-  display: flex;
-  gap: 0.5rem;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.25rem 0.5rem;
-  outline: none;
-  border-radius: 0.25rem;
-  cursor: pointer;
-  user-select: none;
-  &[aria-disabled="true"] {
-    color: gray;
-    cursor: default;
-  }
-  &[data-active="true"] {
-    background-color: #6267ec;
-    color: white;
-  }
-}
-
-.d-input {
-  padding: 0.375rem 0.75rem;
-  border-radius: 0.25rem;
-  background: white;
-  border: 1px solid #d1d5da;
-  outline: none;
-  width: 100%;
-  max-width: 100%;
-  color: black;
-  &:focus {
-    border-color: #6267ec;
-  }
-
-  &--select {
-    cursor: pointer;
-    position: relative;
-    &::after {
-      content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9Im5vbmUiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMS41IiBkPSJNOC4yNSAxNUwxMiAxOC43NUwxNS43NSAxNW0tNy41LTZMMTIgNS4yNUwxNS43NSA5Ii8+PC9zdmc+");
-      position: absolute;
-      right: 0;
-      top: 0;
-    }
-  }
-}
-
-.d-combobox {
-  @extend .d-input;
-  padding: 0.25rem;
-  display: flex;
-  gap: 0.25rem;
-
-  &__tags {
-    display: flex;
-    gap: 0.25rem;
-    align-items: center;
-    color: gray;
-  }
-
-  input {
-    flex-grow: 1;
-    width: 100%;
-    padding: 0.125rem 0.5rem;
-  }
-}
-
-.d-tag {
-  background-color: #6267ec;
-  color: white;
-  border-radius: 0.25rem;
-  padding: 0.125rem 0.5rem;
-  white-space: nowrap;
-}
-
-.d-no-options {
-  padding: 0.25rem 0.5rem;
-  text-align: center;
-  color: gray;
-}