@lovince/ui-vue 0.0.0-stage → 0.1.0

package/dist/shared/context.d.ts

@@ -0,0 +1,2 @@
+import { InjectionKey } from 'vue';
+export declare const createContext: <T extends object>(root: string) => readonly [(value: T) => T, (part: string) => T, InjectionKey<T>];

package/dist/shared/dismiss.d.ts

@@ -0,0 +1,17 @@
+import { DismissReason, EffectEvent, EventObject } from '@lovince/ui-headless';
+type Listener = (reason: DismissReason, native: Event) => void;
+export type DismissRelay = {
+    /** For `useMachine`'s `beforeSend`: lets a consumer cancel a dismissal before the machine sees it. */
+    readonly filter: (event: EventObject | EffectEvent) => boolean;
+    /** The content part registers how it reports dismissals (its emits). */
+    readonly listen: (listener: Listener) => void;
+};
+/**
+ * Consumers hear about a dismissal first — `escapeKeyDown`,
+ * `pointerDownOutside`, `focusOutside` — and may cancel it with
+ * `preventDefault()`. An Escape that does dismiss is marked handled, so
+ * nothing beneath the layer reacts to it too.
+ */
+export declare const createDismissRelay: () => DismissRelay;
+export declare const dismissEmit: (reason: DismissReason) => "escapeKeyDown" | "pointerDownOutside" | "focusOutside";
+export {};

package/dist/shared/element.d.ts

@@ -0,0 +1,6 @@
+import { ComponentPublicInstance, Ref } from 'vue';
+export type ElementRef = Ref<HTMLElement | ComponentPublicInstance | null | undefined>;
+/** The DOM element behind a template ref, whether it points at an element or a component. */
+export declare const toElement: (target: ElementRef | HTMLElement | null | undefined) => HTMLElement | null;
+/** Calls `onChange` with the element's real id whenever it differs from the expected one. */
+export declare const useIdWatch: (target: ElementRef | (() => HTMLElement | null), expected: () => string, onChange: (id: string) => void) => void;

package/dist/shared/floating-props.d.ts

@@ -0,0 +1,27 @@
+import { PropType } from 'vue';
+import { Align, Side } from '@lovince/ui-headless';
+/** Placement props every floating part takes; the content syncs them into its machine. */
+export declare const floatingProps: {
+    readonly side: {
+        readonly type: PropType<Side>;
+        readonly default: "bottom";
+        readonly validator: (value: string) => boolean;
+    };
+    readonly align: {
+        readonly type: PropType<Align>;
+        readonly default: "center";
+        readonly validator: (value: string) => boolean;
+    };
+    readonly sideOffset: {
+        readonly type: NumberConstructor;
+        readonly default: 4;
+    };
+    readonly collisionPadding: {
+        readonly type: NumberConstructor;
+        readonly default: 8;
+    };
+    readonly avoidCollisions: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+};

package/dist/shared/list.d.ts

@@ -0,0 +1,17 @@
+import { ListEnv } from '@lovince/ui-headless';
+import { ElementRef } from './element';
+export type ListBinding = ListEnv & {
+    /** Spread onto each item so it is found in DOM order. */
+    readonly itemAttrs: Readonly<Record<string, string>>;
+    /** Items call this as they mount and unmount, so connect re-reads the list. */
+    readonly track: () => void;
+};
+/**
+ * The list environment a connect function needs, read from the DOM. A DOM
+ * query is not reactive, so items announce themselves and a version counter
+ * makes every reader recompute — the default tab stop appears once items exist.
+ */
+export declare const useListEnv: (container: ElementRef, options?: {
+    readonly includeHidden?: boolean;
+    readonly label?: "text" | "tree";
+}) => ListBinding;

package/dist/shared/machine.d.ts

@@ -0,0 +1,37 @@
+import { Component, ShallowRef } from 'vue';
+import { DomQuery, EffectEvent, EventObject, Machine, PartProps, Service, Snapshot } from '@lovince/ui-headless';
+export type Controlled<C> = {
+    readonly [K in keyof C]?: () => C[K] | undefined;
+};
+export type UseMachineOptions<S extends string, C, E extends EventObject> = {
+    /** Controlled context: a getter per field, `undefined` meaning the machine owns it. */
+    readonly controlled?: Controlled<C>;
+    /** Reacts to accepted changes — typically emitting `update:*`. */
+    readonly onChange?: (next: Snapshot<S, C>, previous: Snapshot<S, C>) => void;
+    /** Runs before any event reaches the machine, effects' included; return false to drop it (a cancelled dismissal). */
+    readonly beforeSend?: (event: E | EffectEvent) => boolean;
+};
+export type MachineBinding<S extends string, C, E extends EventObject> = {
+    readonly snapshot: ShallowRef<Snapshot<S, C>>;
+    readonly send: (event: E | EffectEvent) => void;
+    readonly sync: (partial: Partial<C>) => void;
+    /** Call when a part that an effect needs has mounted. */
+    readonly refresh: () => void;
+    /** The page's facts for `connect` — measured by the DOM layer, never by the adapter. */
+    readonly query: DomQuery;
+    readonly service: Service<S, C, E>;
+};
+/**
+ * Runs an engine machine inside a component. The machine decides; this only
+ * subscribes, feeds controlled props in, and plugs in the DOM layer's effect
+ * handlers. Effects start on mount, so a server render runs none.
+ */
+export declare const useMachine: <S extends string, C, E extends EventObject>(machine: Machine<S, C, E>, context: NoInfer<C>, options?: UseMachineOptions<S, C, E>) => MachineBinding<S, C, E>;
+/**
+ * Engine part props in Vue's terms. Handlers are named like DOM events in the
+ * engine (`onKeyDown`) and Vue wants them lower-cased after `on`
+ * (`onKeydown`), or it listens for `key-down`. `false` is dropped, since Vue
+ * would render `disabled="false"` on a non-button, which still disables it.
+ * The engine's `type: 'button'` applies only when the part renders a button.
+ */
+export declare const normalizeProps: (props: PartProps, as?: string | Component) => Record<string, unknown>;

package/dist/shared/parts.d.ts

@@ -0,0 +1,8 @@
+import { InjectionKey } from 'vue';
+import { ariaChecked, openState, CheckedState } from '@lovince/ui-headless';
+/** Injects a compound component's context, failing loudly when a part is used outside its root. */
+export declare const useContext: <T>(key: InjectionKey<T>, part: string, root: string) => T;
+export { Portal } from './portal';
+export { ariaChecked, openState, type CheckedState };
+export declare const checkedState: (checked: CheckedState) => "checked" | "unchecked" | "indeterminate";
+export declare const dataFlag: (on: boolean) => "" | undefined;

package/dist/shared/portal.d.ts

@@ -0,0 +1,34 @@
+import { PropType } from 'vue';
+/**
+ * Teleports its content, but only once mounted. A server render never emits
+ * content for a `body` target, so hydrating a Teleport there finds no anchors
+ * and Vue removes the siblings it mistakes for teleported nodes — the whole
+ * app root included. Rendering nothing until mounted keeps server and client
+ * in agreement; overlays are closed on first render, so nothing is lost.
+ */
+export declare const Portal: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    to: {
+        type: PropType<string | HTMLElement>;
+        default: string;
+    };
+    /** Render in place instead of teleporting. */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}> | null, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    to: {
+        type: PropType<string | HTMLElement>;
+        default: string;
+    };
+    /** Render in place instead of teleporting. */
+    disabled: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    to: string | HTMLElement;
+    disabled: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/shared/primitive.d.ts

@@ -0,0 +1,57 @@
+import { Component, PropType, VNode } from 'vue';
+/**
+ * Renders its single child with this component's attributes merged in:
+ * classes and styles concatenate, handlers chain, and for any other attribute
+ * the child's own value wins, because it is what the consumer wrote. This is
+ * what `asChild` means — behaviour attaches to your element, not a wrapper.
+ */
+export declare const Slot: import('vue').DefineComponent<{}, () => VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}> | null, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export declare const primitiveProps: {
+    readonly as: {
+        readonly type: PropType<string | Component>;
+        readonly default: "div";
+    };
+    readonly asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+};
+export declare const buttonPrimitiveProps: {
+    readonly as: {
+        readonly default: "button";
+        readonly type: PropType<string | Component>;
+    };
+    readonly asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+};
+/** A polymorphic element: `as` swaps the tag or component, `asChild` renders the child instead. */
+export declare const Primitive: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    readonly as: {
+        readonly type: PropType<string | Component>;
+        readonly default: "div";
+    };
+    readonly asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>, () => VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    readonly as: {
+        readonly type: PropType<string | Component>;
+        readonly default: "div";
+    };
+    readonly asChild: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+}>> & Readonly<{}>, {
+    readonly as: string | Component;
+    readonly asChild: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+/** `type="button"` only when the part really renders a button, so a form never submits by accident. */
+export declare const buttonType: (as: string | Component) => "button" | undefined;

package/package.json

@@ -1,6 +1,70 @@
 {
   "name": "@lovince/ui-vue",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "Accessible headless Vue 3 components for Lovince UI — Disclosure, Checkbox, Tabs and Dialog, unstyled.",
+  "type": "module",
+  "license": "MIT",
+  "author": "Lovince Tech",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Mac254/Lovince_product_journey.git",
+    "directory": "packages/ui-vue"
+  },
+  "homepage": "https://github.com/Mac254/Lovince_product_journey#readme",
+  "bugs": {
+    "url": "https://github.com/Mac254/Lovince_product_journey/issues"
+  },
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "sideEffects": false,
+  "engines": {
+    "node": ">=18"
+  },
+  "browserslist": [
+    "last 2 Chrome versions",
+    "last 2 Edge versions",
+    "last 2 Firefox versions",
+    "last 2 Safari versions",
+    "iOS >= 15",
+    "not dead"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "nuxt",
+    "headless",
+    "headless-ui",
+    "components",
+    "accessibility",
+    "wai-aria",
+    "dialog",
+    "tabs"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "build": "vite build",
+    "typecheck": "vue-tsc --noEmit"
+  },
+  "dependencies": {
+    "@lovince/ui-headless": "^0.1.0",
+    "@lovince/ui-dom": "^0.1.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  }
+}