@vunset/vue 0.0.0-stage → 1.0.0-rc.2

package/dist/shared/use-transition-status.d.ts

@@ -0,0 +1,27 @@
+import { type Ref } from 'vue';
+export type TransitionStatus = 'enter' | 'leave' | 'idle' | undefined;
+export interface UseTransitionStatusReturn {
+    /** Whether the element should be present in the DOM. Outlives `open` while closing. */
+    mounted: Ref<boolean>;
+    /** Drives the `data-enter-from` / `data-leave-to` hooks. */
+    transitionStatus: Ref<TransitionStatus>;
+    /** Called by the owner once exit animations have finished. */
+    setMounted: (value: boolean) => void;
+}
+export interface UseTransitionStatusOptions {
+    /** Whether an element that mounts already open should still animate in. */
+    animateInitialOpen?: boolean;
+    /** Consulted each time the element opens. Returning `true` skips the `enter` phase, so the element appears with no enter animation. */
+    skipEnter?: () => boolean;
+    /** Consulted each time the element closes. Returning `true` skips the `leave` phase and unmounts at once. */
+    skipExit?: () => boolean;
+}
+/**
+ * Tracks the enter/exit phase of an animating element.
+ *
+ * The lifecycle is: `closed → enter → idle → (open) → leave → closed`
+ *
+ * @param open Whether the element is open.
+ * @param options See {@link UseTransitionStatusOptions}.
+ */
+export declare function useTransitionStatus(open: () => boolean, options?: UseTransitionStatusOptions): UseTransitionStatusReturn;

package/dist/shared/use-transition-status.js

@@ -0,0 +1,70 @@
+import { getCurrentInstance, onMounted, onScopeDispose, ref, watch } from "vue";
+//#region src/shared/use-transition-status.ts
+/**
+* Tracks the enter/exit phase of an animating element.
+*
+* The lifecycle is: `closed → enter → idle → (open) → leave → closed`
+*
+* @param open Whether the element is open.
+* @param options See {@link UseTransitionStatusOptions}.
+*/
+function useTransitionStatus(open, options = {}) {
+	const { animateInitialOpen = false } = options;
+	const initiallyOpen = open();
+	const mounted = ref(initiallyOpen);
+	const transitionStatus = ref(initiallyOpen && !animateInitialOpen ? "idle" : void 0);
+	let frame;
+	const cancelFrame = () => {
+		if (frame !== void 0) {
+			cancelAnimationFrame(frame);
+			frame = void 0;
+		}
+	};
+	/**
+	* Paints `enter` once before flipping to the resting state, so the browser
+	* has two distinct states to interpolate between. Two frames, not one: the
+	* first is the one `enter` is painted in.
+	*/
+	function enter() {
+		transitionStatus.value = "enter";
+		frame = requestAnimationFrame(() => {
+			frame = requestAnimationFrame(() => {
+				transitionStatus.value = "idle";
+			});
+		});
+	}
+	if (initiallyOpen && animateInitialOpen) {
+		transitionStatus.value = "enter";
+		if (getCurrentInstance()) onMounted(enter);
+		else enter();
+	}
+	watch(open, (isOpen) => {
+		cancelFrame();
+		if (isOpen) {
+			mounted.value = true;
+			if (options.skipEnter?.()) {
+				transitionStatus.value = "idle";
+				return;
+			}
+			enter();
+		} else {
+			if (options.skipExit?.()) {
+				transitionStatus.value = void 0;
+				mounted.value = false;
+				return;
+			}
+			transitionStatus.value = "leave";
+		}
+	}, { flush: "post" });
+	onScopeDispose(cancelFrame);
+	return {
+		mounted,
+		transitionStatus,
+		setMounted(value) {
+			mounted.value = value;
+			if (!value) transitionStatus.value = void 0;
+		}
+	};
+}
+//#endregion
+export { useTransitionStatus };

package/dist/shared/use-typeahead.d.ts

@@ -0,0 +1,19 @@
+export interface UseTypeaheadOptions<T = HTMLElement> {
+    /** The items to search, re-read on each keystroke so the list can change. */
+    items: () => T[];
+    /** Text to match against. Defaults to the item's trimmed text content. */
+    getText?: (item: T) => string;
+    /** How long keystrokes accumulate before the buffer resets. */
+    resetMs?: number;
+    /** The item the search should start after. */
+    getActive?: () => T | null;
+    /** What to do with a match. Defaults to focusing it. */
+    onMatch?: (item: T) => void;
+}
+/**
+ * Type-to-focus over a list of items, the way a native `<select>` behaves.
+ */
+export declare function useTypeahead<T = HTMLElement>(options: UseTypeaheadOptions<T>): {
+    onKeydown: (event: KeyboardEvent) => boolean;
+    reset: () => void;
+};

package/dist/shared/use-typeahead.js

@@ -0,0 +1,45 @@
+import { onScopeDispose } from "vue";
+//#region src/shared/use-typeahead.ts
+/**
+* Type-to-focus over a list of items, the way a native `<select>` behaves.
+*/
+function useTypeahead(options) {
+	let buffer = "";
+	let timer;
+	const getText = options.getText ?? ((item) => item.textContent?.trim() ?? "");
+	function reset() {
+		buffer = "";
+		timer = void 0;
+	}
+	function onKeydown(event) {
+		if (event.key.length !== 1 || event.ctrlKey || event.metaKey || event.altKey) return false;
+		if (event.key === " " && buffer === "") return false;
+		event.preventDefault();
+		clearTimeout(timer);
+		timer = setTimeout(reset, options.resetMs ?? 500);
+		buffer += event.key.toLowerCase();
+		const list = options.items();
+		if (list.length === 0) return true;
+		const allSame = buffer.length > 1 && buffer.split("").every((c) => c === buffer[0]);
+		const query = allSame ? buffer[0] : buffer;
+		const active = options.getActive ? options.getActive() : document.activeElement;
+		const activeIndex = active ? list.indexOf(active) : -1;
+		const start = allSame || buffer.length === 1 ? activeIndex + 1 : activeIndex;
+		for (let i = 0; i < list.length; i += 1) {
+			const item = list[(Math.max(start, 0) + i) % list.length];
+			if (getText(item).toLowerCase().startsWith(query)) {
+				if (options.onMatch) options.onMatch(item);
+				else item.focus({ preventScroll: true });
+				break;
+			}
+		}
+		return true;
+	}
+	onScopeDispose(() => clearTimeout(timer));
+	return {
+		onKeydown,
+		reset
+	};
+}
+//#endregion
+export { useTypeahead };

package/dist/shared/visually-hidden.d.ts

@@ -0,0 +1,6 @@
+import type { CSSProperties } from 'vue';
+/**
+ * Removes an element from the visual layer while keeping it in the a11y tree
+ * and in the form.
+ */
+export declare const visuallyHidden: CSSProperties;

package/dist/shared/visually-hidden.js

@@ -0,0 +1,18 @@
+//#region src/shared/visually-hidden.ts
+/**
+* Removes an element from the visual layer while keeping it in the a11y tree
+* and in the form.
+*/
+var visuallyHidden = {
+	border: 0,
+	clip: "rect(0 0 0 0)",
+	height: "1px",
+	margin: "-1px",
+	overflow: "hidden",
+	padding: 0,
+	position: "absolute",
+	whiteSpace: "nowrap",
+	width: "1px"
+};
+//#endregion
+export { visuallyHidden };

package/package.json

@@ -1,6 +1,68 @@
 {
   "name": "@vunset/vue",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.0.0-rc.2",
+  "description": "Headless, unstyled Vue 3 components: keyboard, focus and ARIA handled, the look left to you.",
+  "keywords": [
+    "vue",
+    "vue3",
+    "headless",
+    "unstyled",
+    "components",
+    "ui",
+    "accessibility",
+    "a11y",
+    "aria",
+    "component-library"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/vunset/vunset.git",
+    "directory": "packages/vue"
+  },
+  "homepage": "https://vunset.com/get-started",
+  "bugs": "https://github.com/vunset/vunset/issues",
+  "type": "module",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./chart": {
+      "types": "./dist/chart.d.ts",
+      "import": "./dist/chart.js"
+    },
+    "./data-table": {
+      "types": "./dist/data-table.d.ts",
+      "import": "./dist/data-table.js"
+    }
+  },
+  "scripts": {
+    "build": "vite build && vue-tsc -p tsconfig.build.json",
+    "prepublishOnly": "npm run build"
+  },
+  "dependencies": {
+    "@floating-ui/vue": "^2.0.1",
+    "@vunset/utils": "1.0.0-rc.2"
+  },
+  "peerDependencies": {
+    "@tanstack/charts": "^1.1.0",
+    "@tanstack/vue-table": "^9.2.4",
+    "vue": "^3.5.43"
+  },
+  "peerDependenciesMeta": {
+    "@tanstack/charts": {
+      "optional": true
+    },
+    "@tanstack/vue-table": {
+      "optional": true
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}