@plexui/vue 0.0.0-stage → 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025-present Plex UI
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,79 @@
-# Temporary Holding Version
+# @plexui/vue
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Plex UI components for Vue 3. Every component of [`@plexui/ui`](../ui) has a Vue counterpart with the same names, props, defaults and rendered markup, and the styling comes from [`@plexui/styles`](../styles), the same CSS modules the React components use. Behaviour comes from [Reka UI](https://reka-ui.com) (the Vue lineage of Radix, which `@plexui/ui` uses), corrected to Radix's behaviour where they differ. Automated tests render each component in both frameworks and compare the DOM and the interactions.
+
+Docs: [plexui.com/docs/vue](https://plexui.com/docs/vue) and every component page's **Vue** tab ([plexui.com/vue/components](https://plexui.com/vue/components)).
+
+## Install
+
+```bash
+npm install @plexui/vue @plexui/styles
+```
+
+Requires Vue 3.5+ and Tailwind 4. Install `@plexui/styles` next to it: your stylesheet and Vite config import it directly.
+
+```css
+/* main.css */
+@layer theme, base, components, utilities;
+
+@import "tailwindcss";
+@import "@plexui/styles/css";
+@source "../node_modules/@plexui/vue";
+```
+
+```ts
+// vite.config.ts
+import vue from "@vitejs/plugin-vue"
+import plexui from "@plexui/styles/vite"
+import { defineConfig } from "vite"
+
+export default defineConfig({ plugins: [vue(), plexui()] })
+```
+
+Components import their CSS modules by bare specifier, so build with a bundler that handles CSS modules (Vite, Nuxt, webpack). For SSR, bundle the package: `ssr.noExternal: ["@plexui/vue", "@plexui/styles"]` in Vite, `build.transpile: ["@plexui/vue"]` in Nuxt.
+
+## Use
+
+```vue
+<script setup lang="ts">
+import { ref } from "vue"
+import { Button } from "@plexui/vue/components/Button"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@plexui/vue/components/Dialog"
+
+const open = ref(false)
+</script>
+
+<template>
+  <Dialog v-model:open="open">
+    <DialogTrigger>
+      <Button color="primary">Open dialog</Button>
+    </DialogTrigger>
+    <DialogContent>
+      <DialogHeader>
+        <DialogTitle>Unsaved changes</DialogTitle>
+        <DialogDescription>Save before leaving?</DialogDescription>
+      </DialogHeader>
+    </DialogContent>
+  </Dialog>
+</template>
+```
+
+## From React to Vue
+
+- `className` is `class`, on the same element.
+- Controlled values use `v-model:value` (a `value` prop and an `update:value` event); other controlled props work the same way, e.g. `v-model:open`.
+- `onX` callbacks are `@x` listeners; ReactNode props are slots.
+- Compound parts are flat named exports: `DialogTrigger`, not `Dialog.Trigger`.
+- Icons have the same names (`@plexui/vue/components/Icon`); hooks are composables (`@plexui/vue/composables/<name>`).
+- In templates, use `PlexTransitionGroup` for Plex's `TransitionGroup` (Vue reserves `<TransitionGroup>`).
+
+## License
+
+MIT

package/dist/es/components/Accordion/Accordion.js

@@ -0,0 +1,395 @@
+import { computed, defineComponent, h, inject, onBeforeUnmount, onMounted, provide, ref, toRef, watch, withCtx, } from "vue";
+import { AccordionHeader as RekaAccordionHeader, AccordionItem as RekaAccordionItem, AccordionRoot as RekaAccordionRoot, Presence, injectAccordionItemContext, injectCollapsibleRootContext, useDirection, useId, } from "reka-ui";
+import { ChevronDownMd } from "../Icon/index.js";
+import s from "@plexui/styles/components/Accordion/Accordion.module.css";
+const AccordionContextKey = Symbol("PlexUIAccordion");
+const useAccordionContext = () => {
+    const context = inject(AccordionContextKey, null);
+    if (!context) {
+        throw new Error("Accordion parts must be used inside <Accordion>");
+    }
+    return context;
+};
+const ACCORDION_KEYS = ["Home", "End", "ArrowDown", "ArrowUp", "ArrowLeft", "ArrowRight"];
+// Calls a listener from `attrs` (a function or an array of them)
+const invoke = (handler, event) => {
+    for (const fn of [].concat(handler ?? [])) {
+        if (typeof fn === "function")
+            fn(event);
+    }
+};
+const getState = (open) => (open ? "open" : "closed");
+/* ------------------------------------------------------------------ */
+/*  Root                                                               */
+/* ------------------------------------------------------------------ */
+export const Accordion = defineComponent({
+    name: "Accordion",
+    inheritAttrs: false,
+    props: {
+        /** Whether one item or many can be open at a time */
+        type: { type: String, required: true },
+        /** Controlled open item(s) (`v-model:value`): a string for `single`, an array for `multiple` */
+        value: { type: [String, Array], default: undefined },
+        /** Open item(s) when uncontrolled */
+        defaultValue: { type: [String, Array], default: undefined },
+        /** When `type="single"`, allow closing the open item. @default false */
+        collapsible: { type: Boolean, default: false },
+        /** Disable every item. @default false */
+        disabled: { type: Boolean, default: undefined },
+        /** Reading direction, for horizontal arrow keys. @default "ltr" */
+        dir: String,
+        /** Layout axis. @default "vertical" */
+        orientation: { type: String, default: "vertical" },
+    },
+    emits: {
+        "update:value": (_value) => true,
+    },
+    setup(props, { attrs, slots, emit }) {
+        const isMultiple = () => props.type === "multiple";
+        const internalValue = ref(props.defaultValue ?? (isMultiple() ? [] : ""));
+        const controlledValue = () => props.value;
+        const currentValue = computed(() => controlledValue() ?? internalValue.value);
+        // Radix's useControllableState: a controlled change is reported at once,
+        // from the click, when it differs from `value`. An uncontrolled one is
+        // reported from an effect, once the accordion has rendered it (so a
+        // listener finds the opened panel's content), when it differs from the
+        // last value reported.
+        let reportedValue = internalValue.value;
+        watch(internalValue, (value) => {
+            if (value === reportedValue)
+                return;
+            reportedValue = value;
+            emit("update:value", value);
+        }, { flush: "post" });
+        // React swaps the single and multiple implementations when `type`
+        // changes: the accordion remounts from `defaultValue` (see the `key` below)
+        watch(() => props.type, () => {
+            internalValue.value = props.defaultValue ?? (isMultiple() ? [] : "");
+            reportedValue = internalValue.value;
+        });
+        const setValue = (next) => {
+            const controlled = controlledValue();
+            if (controlled === undefined)
+                internalValue.value = next;
+            else if (next !== controlled)
+                emit("update:value", next);
+        };
+        const asArray = (value) => (Array.isArray(value) ? value : []);
+        const triggers = new Set();
+        provide(AccordionContextKey, {
+            orientation: () => props.orientation,
+            collapsible: () => isMultiple() || props.collapsible,
+            onItemOpen: (itemValue) => setValue(isMultiple() ? [...asArray(currentValue.value), itemValue] : itemValue),
+            onItemClose: (itemValue) => {
+                if (isMultiple())
+                    setValue(asArray(currentValue.value).filter((value) => value !== itemValue));
+                else if (props.collapsible)
+                    setValue("");
+            },
+            triggers,
+        });
+        const direction = useDirection(toRef(props, "dir"));
+        // Radix's AccordionImpl key handling, on the root like in React
+        const handleKeyDown = (event) => {
+            invoke(attrs.onKeydown, event);
+            if (event.defaultPrevented)
+                return;
+            if (!ACCORDION_KEYS.includes(event.key))
+                return;
+            const target = event.target;
+            const triggerCollection = Array.from(triggers)
+                .sort((a, b) => (a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1))
+                .filter((trigger) => !trigger.disabled);
+            const triggerIndex = triggerCollection.findIndex((trigger) => trigger === target);
+            const triggerCount = triggerCollection.length;
+            if (triggerIndex === -1)
+                return;
+            // Prevents page scroll while user is navigating
+            event.preventDefault();
+            let nextIndex = triggerIndex;
+            const homeIndex = 0;
+            const endIndex = triggerCount - 1;
+            const isDirectionLTR = direction.value === "ltr";
+            const { orientation } = props;
+            const moveNext = () => {
+                nextIndex = triggerIndex + 1;
+                if (nextIndex > endIndex) {
+                    nextIndex = homeIndex;
+                }
+            };
+            const movePrev = () => {
+                nextIndex = triggerIndex - 1;
+                if (nextIndex < homeIndex) {
+                    nextIndex = endIndex;
+                }
+            };
+            switch (event.key) {
+                case "Home":
+                    nextIndex = homeIndex;
+                    break;
+                case "End":
+                    nextIndex = endIndex;
+                    break;
+                case "ArrowRight":
+                    if (orientation === "horizontal") {
+                        if (isDirectionLTR) {
+                            moveNext();
+                        }
+                        else {
+                            movePrev();
+                        }
+                    }
+                    break;
+                case "ArrowDown":
+                    if (orientation === "vertical") {
+                        moveNext();
+                    }
+                    break;
+                case "ArrowLeft":
+                    if (orientation === "horizontal") {
+                        if (isDirectionLTR) {
+                            movePrev();
+                        }
+                        else {
+                            moveNext();
+                        }
+                    }
+                    break;
+                case "ArrowUp":
+                    if (orientation === "vertical") {
+                        movePrev();
+                    }
+                    break;
+            }
+            const clampedIndex = nextIndex % triggerCount;
+            triggerCollection[clampedIndex]?.focus();
+        };
+        return () => {
+            const { class: className, onKeydown: _onKeydown, ...restAttrs } = attrs;
+            const value = currentValue.value;
+            return h(RekaAccordionRoot, {
+                ...restAttrs,
+                "key": props.type,
+                "class": [s.Root, className],
+                "type": props.type,
+                // Reka reads the open item(s) from here; `null` is "none open" in
+                // single mode (an empty string would open an item whose value is "")
+                "modelValue": (isMultiple() ? asArray(value) : value || null),
+                "collapsible": props.collapsible,
+                "disabled": props.disabled,
+                "dir": props.dir,
+                "orientation": props.orientation,
+                "data-orientation": props.orientation,
+                // A disabled root drops the root's own keydown listener too, as in Radix
+                "onKeydown": props.disabled ? undefined : handleKeyDown,
+            }, { default: () => slots.default?.() });
+        };
+    },
+});
+/* ------------------------------------------------------------------ */
+/*  Item                                                               */
+/* ------------------------------------------------------------------ */
+export const AccordionItem = defineComponent({
+    name: "AccordionItem",
+    props: {
+        /** Unique identifier used by the root's `value` / `default-value` */
+        value: { type: String, required: true },
+        /** Disable this item. @default false */
+        disabled: { type: Boolean, default: undefined },
+    },
+    setup(props, { slots }) {
+        const context = useAccordionContext();
+        // Other attributes (and `class`) fall through to the item <div>
+        return () => h(RekaAccordionItem, {
+            "value": props.value,
+            "disabled": props.disabled,
+            "class": s.Item,
+            // Reka reads the orientation once; keep it reactive
+            "data-orientation": context.orientation(),
+        }, { default: () => slots.default?.() });
+    },
+});
+/* ------------------------------------------------------------------ */
+/*  Trigger                                                            */
+/* ------------------------------------------------------------------ */
+/** The item's <h3> header and <button>. Attributes and listeners go to the button. */
+export const AccordionTrigger = defineComponent({
+    name: "AccordionTrigger",
+    inheritAttrs: false,
+    setup(_props, { attrs, slots }) {
+        const context = useAccordionContext();
+        const itemContext = injectAccordionItemContext();
+        const collapsibleContext = injectCollapsibleRootContext();
+        // Set before the first render so aria-controls / aria-labelledby always
+        // point at each other, like Radix's ids from the item
+        itemContext.triggerId ||= useId(undefined, "reka-accordion-trigger");
+        collapsibleContext.contentId ||= useId(undefined, "reka-collapsible-content");
+        const buttonRef = ref(null);
+        onMounted(() => {
+            if (buttonRef.value)
+                context.triggers.add(buttonRef.value);
+        });
+        onBeforeUnmount(() => {
+            if (buttonRef.value)
+                context.triggers.delete(buttonRef.value);
+        });
+        const handleClick = (event) => {
+            // A disabled <button> never dispatches click in the browser, nor in React
+            if (itemContext.disabled.value)
+                return;
+            invoke(attrs.onClick, event);
+            if (event.defaultPrevented)
+                return;
+            const value = itemContext.value.value;
+            if (itemContext.open.value)
+                context.onItemClose(value);
+            else
+                context.onItemOpen(value);
+        };
+        return () => {
+            const { class: className, onClick: _onClick, ...restAttrs } = attrs;
+            const open = itemContext.open.value;
+            const disabled = itemContext.disabled.value;
+            return h(RekaAccordionHeader, { "class": s.Header, "data-orientation": context.orientation() }, {
+                default: () => [
+                    h("button", {
+                        "type": "button",
+                        // Radix (radix-ui 1.8) points at the panel only while open
+                        "aria-controls": open ? collapsibleContext.contentId : undefined,
+                        "aria-expanded": open || false,
+                        "data-state": getState(open),
+                        "data-disabled": disabled ? "" : undefined,
+                        "disabled": disabled,
+                        "aria-disabled": (open && !context.collapsible()) || undefined,
+                        "data-orientation": context.orientation(),
+                        "id": itemContext.triggerId,
+                        ...restAttrs,
+                        "class": [s.Trigger, className],
+                        "ref": buttonRef,
+                        "onClick": handleClick,
+                    }, [slots.default?.(), h(ChevronDownMd, { "class": s.Chevron, "aria-hidden": true })]),
+                ],
+            });
+        };
+    },
+});
+/* ------------------------------------------------------------------ */
+/*  Content                                                            */
+/* ------------------------------------------------------------------ */
+// Radix's CollapsibleContentImpl: measures the panel for the height
+// variables, keeps it mounted (hidden, empty) while closed, and suppresses
+// the open animation of an item that mounts open.
+const AccordionContentImpl = defineComponent({
+    name: "AccordionContentImpl",
+    inheritAttrs: false,
+    props: {
+        present: { type: Boolean, required: true },
+        asChild: { type: Boolean, required: true },
+    },
+    setup(props, { attrs, slots }) {
+        const context = useAccordionContext();
+        const itemContext = injectAccordionItemContext();
+        const collapsibleContext = injectCollapsibleRootContext();
+        const node = ref(null);
+        const isPresent = ref(props.present);
+        // Plain values, read on render like Radix's refs
+        let height = 0;
+        let width = 0;
+        const isOpen = () => itemContext.open.value || isPresent.value;
+        let isMountAnimationPrevented = isOpen();
+        let originalStyles;
+        let frame;
+        onMounted(() => {
+            frame = requestAnimationFrame(() => (isMountAnimationPrevented = false));
+        });
+        onBeforeUnmount(() => {
+            if (frame !== undefined)
+                cancelAnimationFrame(frame);
+        });
+        const measure = () => {
+            const element = node.value;
+            if (!element)
+                return;
+            originalStyles = originalStyles || {
+                transitionDuration: element.style.transitionDuration,
+                animationName: element.style.animationName,
+            };
+            // block any animations/transitions so the element renders at its full dimensions
+            element.style.transitionDuration = "0s";
+            element.style.animationName = "none";
+            // get width and height from full dimensions
+            const rect = element.getBoundingClientRect();
+            height = rect.height;
+            width = rect.width;
+            // kick off any animations/transitions that were originally set up if it isn't the initial mount
+            if (!isMountAnimationPrevented) {
+                element.style.transitionDuration = originalStyles.transitionDuration;
+                element.style.animationName = originalStyles.animationName;
+            }
+            isPresent.value = props.present;
+        };
+        onMounted(measure);
+        watch(() => [itemContext.open.value, props.present], measure, { flush: "post" });
+        return () => {
+            const { class: className, style, ...restAttrs } = attrs;
+            const open = itemContext.open.value;
+            const showContent = isOpen();
+            const panel = {
+                "data-state": getState(open),
+                "data-disabled": itemContext.disabled.value ? "" : undefined,
+                "id": collapsibleContext.contentId,
+                "hidden": !showContent,
+                "role": "region",
+                "aria-labelledby": itemContext.triggerId,
+                "data-orientation": context.orientation(),
+                ...restAttrs,
+                "class": [s.Content, className],
+                "ref": node,
+                "style": [
+                    {
+                        "--radix-collapsible-content-height": height ? `${height}px` : undefined,
+                        "--radix-collapsible-content-width": width ? `${width}px` : undefined,
+                        "--radix-accordion-content-height": "var(--radix-collapsible-content-height)",
+                        "--radix-accordion-content-width": "var(--radix-collapsible-content-width)",
+                    },
+                    style,
+                ],
+            };
+            // `asChild`: Radix's Slot merges the panel onto the inner element,
+            // which only renders while the panel shows
+            if (props.asChild) {
+                return showContent ? h("div", { ...panel, class: [s.Content, className, s.ContentInner] }, slots.default?.()) : null;
+            }
+            return h("div", panel, showContent ? [h("div", { class: s.ContentInner }, slots.default?.())] : undefined);
+        };
+    },
+});
+/** The collapsible panel. Attributes go to the panel <div>. */
+export const AccordionContent = defineComponent({
+    name: "AccordionContent",
+    inheritAttrs: false,
+    props: {
+        /** Keep the panel mounted and visible while closed (for custom CSS or JS animations) */
+        forceMount: { type: Boolean, default: undefined },
+        /**
+         * Merge the panel onto its inner element instead of wrapping it, as
+         * React's `asChild` does; a closed panel then renders nothing
+         */
+        asChild: { type: Boolean, default: false },
+    },
+    setup(props, { attrs, slots }) {
+        const itemContext = injectAccordionItemContext();
+        const collapsibleContext = injectCollapsibleRootContext();
+        collapsibleContext.contentId ||= useId(undefined, "reka-collapsible-content");
+        itemContext.triggerId ||= useId(undefined, "reka-accordion-trigger");
+        return () => h(Presence, { present: !!props.forceMount || itemContext.open.value, forceMount: true }, {
+            // Presence calls its slot once during setup; withCtx marks it as a
+            // render slot (returning an array, like compiled slots) so Vue does
+            // not warn about that call
+            default: withCtx(({ present }) => [
+                h(AccordionContentImpl, { ...attrs, present, asChild: props.asChild }, { default: () => slots.default?.() }),
+            ]),
+        });
+    },
+});
+//# sourceMappingURL=Accordion.js.map

package/dist/es/components/Accordion/Accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Accordion.js","sourceRoot":"","sources":["../../../../src/components/Accordion/Accordion.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  computed,\n  defineComponent,\n  h,\n  inject,\n  onBeforeUnmount,\n  onMounted,\n  provide,\n  ref,\n  toRef,\n  watch,\n  withCtx,\n  type ButtonHTMLAttributes,\n  type HTMLAttributes,\n  type InjectionKey,\n  type PropType,\n} from \"vue\"\nimport {\n  AccordionHeader as RekaAccordionHeader,\n  AccordionItem as RekaAccordionItem,\n  AccordionRoot as RekaAccordionRoot,\n  Presence,\n  injectAccordionItemContext,\n  injectCollapsibleRootContext,\n  useDirection,\n  useId,\n} from \"reka-ui\"\nimport { ChevronDownMd } from \"../Icon/index.js\"\nimport s from \"@plexui/styles/components/Accordion/Accordion.module.css\"\n\n// Vue port of packages/ui/src/components/Accordion/Accordion.tsx. React\n// builds on Radix Accordion; this builds on Reka UI's (same anatomy) and\n// renders the same DOM. Exports are flat (`Accordion`, `AccordionItem`,\n// `AccordionTrigger`, `AccordionContent`) because runtime-compiled templates\n// cannot resolve `Accordion.Item` from the `components` option.\n//\n// Reka's root, item and header parts are used as they are. The trigger,\n// the content panel and the value state follow Radix where Reka differs:\n// - value: single mode emits \"\" (not undefined) when the open item closes,\n//   and only emits real changes. `value` + `update:value` mirror React's\n//   `value` / `onValueChange` (`v-model:value`).\n// - trigger: `aria-disabled` marks the open item of a non-collapsible\n//   single accordion (Reka marks disabled items), and a `click` listener\n//   that calls preventDefault() cancels the toggle (composeEventHandlers).\n// - keyboard: Radix's roving focus on the root: Home/End go to the first and\n//   last *enabled* trigger, arrows across the orientation are swallowed, and\n//   the root's own `keydown` listener runs first and can cancel it.\n// - content: Radix's CollapsibleContent (hidden-but-mounted when closed,\n//   mount animation suppressed, exit animation kept via Presence) with the\n//   `--radix-accordion-content-height` variable the shared CSS animates.\n\ntype AccordionType = \"single\" | \"multiple\"\ntype AccordionValue = string | string[]\ntype Orientation = \"vertical\" | \"horizontal\"\n\ntype AccordionContextValue = {\n  orientation: () => Orientation\n  /** Whether the open item may close (always true in multiple mode) */\n  collapsible: () => boolean\n  onItemOpen: (value: string) => void\n  onItemClose: (value: string) => void\n  /** Trigger buttons, for keyboard navigation (Radix's collection) */\n  triggers: Set<HTMLButtonElement>\n}\n\nconst AccordionContextKey: InjectionKey<AccordionContextValue> = Symbol(\"PlexUIAccordion\")\n\nconst useAccordionContext = () => {\n  const context = inject(AccordionContextKey, null)\n  if (!context) {\n    throw new Error(\"Accordion parts must be used inside <Accordion>\")\n  }\n  return context\n}\n\nconst ACCORDION_KEYS = [\"Home\", \"End\", \"ArrowDown\", \"ArrowUp\", \"ArrowLeft\", \"ArrowRight\"]\n\n// Calls a listener from `attrs` (a function or an array of them)\nconst invoke = (handler: unknown, event: Event) => {\n  for (const fn of ([] as unknown[]).concat(handler ?? [])) {\n    if (typeof fn === \"function\") fn(event)\n  }\n}\n\nconst getState = (open: boolean) => (open ? \"open\" : \"closed\")\n\n/* ------------------------------------------------------------------ */\n/*  Root                                                               */\n/* ------------------------------------------------------------------ */\n\nexport const Accordion = defineComponent({\n  name: \"Accordion\",\n  inheritAttrs: false,\n  props: {\n    /** Whether one item or many can be open at a time */\n    type: { type: String as PropType<AccordionType>, required: true },\n    /** Controlled open item(s) (`v-model:value`): a string for `single`, an array for `multiple` */\n    value: { type: [String, Array] as PropType<AccordionValue>, default: undefined },\n    /** Open item(s) when uncontrolled */\n    defaultValue: { type: [String, Array] as PropType<AccordionValue>, default: undefined },\n    /** When `type=\"single\"`, allow closing the open item. @default false */\n    collapsible: { type: Boolean, default: false },\n    /** Disable every item. @default false */\n    disabled: { type: Boolean, default: undefined },\n    /** Reading direction, for horizontal arrow keys. @default \"ltr\" */\n    dir: String as PropType<\"ltr\" | \"rtl\">,\n    /** Layout axis. @default \"vertical\" */\n    orientation: { type: String as PropType<Orientation>, default: \"vertical\" },\n  },\n  emits: {\n    \"update:value\": (_value: AccordionValue) => true,\n  },\n  setup(props, { attrs, slots, emit }) {\n    const isMultiple = () => props.type === \"multiple\"\n    const internalValue = ref<AccordionValue>(props.defaultValue ?? (isMultiple() ? [] : \"\"))\n    const controlledValue = () => props.value\n    const currentValue = computed(() => controlledValue() ?? internalValue.value)\n    // Radix's useControllableState: a controlled change is reported at once,\n    // from the click, when it differs from `value`. An uncontrolled one is\n    // reported from an effect, once the accordion has rendered it (so a\n    // listener finds the opened panel's content), when it differs from the\n    // last value reported.\n    let reportedValue = internalValue.value\n    watch(\n      internalValue,\n      (value) => {\n        if (value === reportedValue) return\n        reportedValue = value\n        emit(\"update:value\", value)\n      },\n      { flush: \"post\" },\n    )\n\n    // React swaps the single and multiple implementations when `type`\n    // changes: the accordion remounts from `defaultValue` (see the `key` below)\n    watch(\n      () => props.type,\n      () => {\n        internalValue.value = props.defaultValue ?? (isMultiple() ? [] : \"\")\n        reportedValue = internalValue.value\n      },\n    )\n\n    const setValue = (next: AccordionValue) => {\n      const controlled = controlledValue()\n      if (controlled === undefined) internalValue.value = next\n      else if (next !== controlled) emit(\"update:value\", next)\n    }\n\n    const asArray = (value: AccordionValue | undefined) => (Array.isArray(value) ? value : [])\n\n    const triggers = new Set<HTMLButtonElement>()\n    provide(AccordionContextKey, {\n      orientation: () => props.orientation,\n      collapsible: () => isMultiple() || props.collapsible,\n      onItemOpen: (itemValue) => setValue(isMultiple() ? [...asArray(currentValue.value), itemValue] : itemValue),\n      onItemClose: (itemValue) => {\n        if (isMultiple()) setValue(asArray(currentValue.value).filter((value) => value !== itemValue))\n        else if (props.collapsible) setValue(\"\")\n      },\n      triggers,\n    })\n\n    const direction = useDirection(toRef(props, \"dir\"))\n\n    // Radix's AccordionImpl key handling, on the root like in React\n    const handleKeyDown = (event: KeyboardEvent) => {\n      invoke(attrs.onKeydown, event)\n      if (event.defaultPrevented) return\n      if (!ACCORDION_KEYS.includes(event.key)) return\n      const target = event.target as HTMLElement\n      const triggerCollection = Array.from(triggers)\n        .sort((a, b) => (a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1))\n        .filter((trigger) => !trigger.disabled)\n      const triggerIndex = triggerCollection.findIndex((trigger) => trigger === target)\n      const triggerCount = triggerCollection.length\n\n      if (triggerIndex === -1) return\n\n      // Prevents page scroll while user is navigating\n      event.preventDefault()\n\n      let nextIndex = triggerIndex\n      const homeIndex = 0\n      const endIndex = triggerCount - 1\n      const isDirectionLTR = direction.value === \"ltr\"\n      const { orientation } = props\n\n      const moveNext = () => {\n        nextIndex = triggerIndex + 1\n        if (nextIndex > endIndex) {\n          nextIndex = homeIndex\n        }\n      }\n\n      const movePrev = () => {\n        nextIndex = triggerIndex - 1\n        if (nextIndex < homeIndex) {\n          nextIndex = endIndex\n        }\n      }\n\n      switch (event.key) {\n        case \"Home\":\n          nextIndex = homeIndex\n          break\n        case \"End\":\n          nextIndex = endIndex\n          break\n        case \"ArrowRight\":\n          if (orientation === \"horizontal\") {\n            if (isDirectionLTR) {\n              moveNext()\n            } else {\n              movePrev()\n            }\n          }\n          break\n        case \"ArrowDown\":\n          if (orientation === \"vertical\") {\n            moveNext()\n          }\n          break\n        case \"ArrowLeft\":\n          if (orientation === \"horizontal\") {\n            if (isDirectionLTR) {\n              movePrev()\n            } else {\n              moveNext()\n            }\n          }\n          break\n        case \"ArrowUp\":\n          if (orientation === \"vertical\") {\n            movePrev()\n          }\n          break\n      }\n\n      const clampedIndex = nextIndex % triggerCount\n      triggerCollection[clampedIndex]?.focus()\n    }\n\n    return () => {\n      const { class: className, onKeydown: _onKeydown, ...restAttrs } = attrs\n      const value = currentValue.value\n      return h(\n        RekaAccordionRoot,\n        {\n          ...restAttrs,\n          \"key\": props.type,\n          \"class\": [s.Root, className],\n          \"type\": props.type,\n          // Reka reads the open item(s) from here; `null` is \"none open\" in\n          // single mode (an empty string would open an item whose value is \"\")\n          \"modelValue\": (isMultiple() ? asArray(value) : value || null) as AccordionValue,\n          \"collapsible\": props.collapsible,\n          \"disabled\": props.disabled,\n          \"dir\": props.dir,\n          \"orientation\": props.orientation,\n          \"data-orientation\": props.orientation,\n          // A disabled root drops the root's own keydown listener too, as in Radix\n          \"onKeydown\": props.disabled ? undefined : handleKeyDown,\n        },\n        { default: () => slots.default?.() },\n      )\n    }\n  },\n})\n\n/* ------------------------------------------------------------------ */\n/*  Item                                                               */\n/* ------------------------------------------------------------------ */\n\nexport const AccordionItem = defineComponent({\n  name: \"AccordionItem\",\n  props: {\n    /** Unique identifier used by the root's `value` / `default-value` */\n    value: { type: String, required: true },\n    /** Disable this item. @default false */\n    disabled: { type: Boolean, default: undefined },\n  },\n  setup(props, { slots }) {\n    const context = useAccordionContext()\n    // Other attributes (and `class`) fall through to the item <div>\n    return () =>\n      h(\n        RekaAccordionItem,\n        {\n          \"value\": props.value,\n          \"disabled\": props.disabled,\n          \"class\": s.Item,\n          // Reka reads the orientation once; keep it reactive\n          \"data-orientation\": context.orientation(),\n        },\n        { default: () => slots.default?.() },\n      )\n  },\n})\n\n/* ------------------------------------------------------------------ */\n/*  Trigger                                                            */\n/* ------------------------------------------------------------------ */\n\n/** The item's <h3> header and <button>. Attributes and listeners go to the button. */\nexport const AccordionTrigger = defineComponent({\n  name: \"AccordionTrigger\",\n  inheritAttrs: false,\n  setup(_props, { attrs, slots }) {\n    const context = useAccordionContext()\n    const itemContext = injectAccordionItemContext()\n    const collapsibleContext = injectCollapsibleRootContext()\n    // Set before the first render so aria-controls / aria-labelledby always\n    // point at each other, like Radix's ids from the item\n    itemContext.triggerId ||= useId(undefined, \"reka-accordion-trigger\")\n    collapsibleContext.contentId ||= useId(undefined, \"reka-collapsible-content\")\n\n    const buttonRef = ref<HTMLButtonElement | null>(null)\n    onMounted(() => {\n      if (buttonRef.value) context.triggers.add(buttonRef.value)\n    })\n    onBeforeUnmount(() => {\n      if (buttonRef.value) context.triggers.delete(buttonRef.value)\n    })\n\n    const handleClick = (event: MouseEvent) => {\n      // A disabled <button> never dispatches click in the browser, nor in React\n      if (itemContext.disabled.value) return\n      invoke(attrs.onClick, event)\n      if (event.defaultPrevented) return\n      const value = itemContext.value.value\n      if (itemContext.open.value) context.onItemClose(value)\n      else context.onItemOpen(value)\n    }\n\n    return () => {\n      const { class: className, onClick: _onClick, ...restAttrs } = attrs\n      const open = itemContext.open.value\n      const disabled = itemContext.disabled.value\n      return h(\n        RekaAccordionHeader,\n        { \"class\": s.Header, \"data-orientation\": context.orientation() },\n        {\n          default: () => [\n            h(\n              \"button\",\n              {\n                \"type\": \"button\",\n                // Radix (radix-ui 1.8) points at the panel only while open\n                \"aria-controls\": open ? collapsibleContext.contentId : undefined,\n                \"aria-expanded\": open || false,\n                \"data-state\": getState(open),\n                \"data-disabled\": disabled ? \"\" : undefined,\n                \"disabled\": disabled,\n                \"aria-disabled\": (open && !context.collapsible()) || undefined,\n                \"data-orientation\": context.orientation(),\n                \"id\": itemContext.triggerId,\n                ...restAttrs,\n                \"class\": [s.Trigger, className],\n                \"ref\": buttonRef,\n                \"onClick\": handleClick,\n              },\n              [slots.default?.(), h(ChevronDownMd, { \"class\": s.Chevron, \"aria-hidden\": true })],\n            ),\n          ],\n        },\n      )\n    }\n  },\n})\n\n/* ------------------------------------------------------------------ */\n/*  Content                                                            */\n/* ------------------------------------------------------------------ */\n\n// Radix's CollapsibleContentImpl: measures the panel for the height\n// variables, keeps it mounted (hidden, empty) while closed, and suppresses\n// the open animation of an item that mounts open.\nconst AccordionContentImpl = defineComponent({\n  name: \"AccordionContentImpl\",\n  inheritAttrs: false,\n  props: {\n    present: { type: Boolean, required: true },\n    asChild: { type: Boolean, required: true },\n  },\n  setup(props, { attrs, slots }) {\n    const context = useAccordionContext()\n    const itemContext = injectAccordionItemContext()\n    const collapsibleContext = injectCollapsibleRootContext()\n\n    const node = ref<HTMLDivElement | null>(null)\n    const isPresent = ref(props.present)\n    // Plain values, read on render like Radix's refs\n    let height = 0\n    let width = 0\n    const isOpen = () => itemContext.open.value || isPresent.value\n    let isMountAnimationPrevented = isOpen()\n    let originalStyles: { transitionDuration: string; animationName: string } | undefined\n\n    let frame: number | undefined\n    onMounted(() => {\n      frame = requestAnimationFrame(() => (isMountAnimationPrevented = false))\n    })\n    onBeforeUnmount(() => {\n      if (frame !== undefined) cancelAnimationFrame(frame)\n    })\n\n    const measure = () => {\n      const element = node.value\n      if (!element) return\n      originalStyles = originalStyles || {\n        transitionDuration: element.style.transitionDuration,\n        animationName: element.style.animationName,\n      }\n      // block any animations/transitions so the element renders at its full dimensions\n      element.style.transitionDuration = \"0s\"\n      element.style.animationName = \"none\"\n\n      // get width and height from full dimensions\n      const rect = element.getBoundingClientRect()\n      height = rect.height\n      width = rect.width\n\n      // kick off any animations/transitions that were originally set up if it isn't the initial mount\n      if (!isMountAnimationPrevented) {\n        element.style.transitionDuration = originalStyles.transitionDuration\n        element.style.animationName = originalStyles.animationName\n      }\n\n      isPresent.value = props.present\n    }\n    onMounted(measure)\n    watch(() => [itemContext.open.value, props.present], measure, { flush: \"post\" })\n\n    return () => {\n      const { class: className, style, ...restAttrs } = attrs\n      const open = itemContext.open.value\n      const showContent = isOpen()\n      const panel = {\n        \"data-state\": getState(open),\n        \"data-disabled\": itemContext.disabled.value ? \"\" : undefined,\n        \"id\": collapsibleContext.contentId,\n        \"hidden\": !showContent,\n        \"role\": \"region\",\n        \"aria-labelledby\": itemContext.triggerId,\n        \"data-orientation\": context.orientation(),\n        ...restAttrs,\n        \"class\": [s.Content, className],\n        \"ref\": node,\n        \"style\": [\n          {\n            \"--radix-collapsible-content-height\": height ? `${height}px` : undefined,\n            \"--radix-collapsible-content-width\": width ? `${width}px` : undefined,\n            \"--radix-accordion-content-height\": \"var(--radix-collapsible-content-height)\",\n            \"--radix-accordion-content-width\": \"var(--radix-collapsible-content-width)\",\n          },\n          style,\n        ],\n      }\n      // `asChild`: Radix's Slot merges the panel onto the inner element,\n      // which only renders while the panel shows\n      if (props.asChild) {\n        return showContent ? h(\"div\", { ...panel, class: [s.Content, className, s.ContentInner] }, slots.default?.()) : null\n      }\n      return h(\"div\", panel, showContent ? [h(\"div\", { class: s.ContentInner }, slots.default?.())] : undefined)\n    }\n  },\n})\n\n/** The collapsible panel. Attributes go to the panel <div>. */\nexport const AccordionContent = defineComponent({\n  name: \"AccordionContent\",\n  inheritAttrs: false,\n  props: {\n    /** Keep the panel mounted and visible while closed (for custom CSS or JS animations) */\n    forceMount: { type: Boolean, default: undefined },\n    /**\n     * Merge the panel onto its inner element instead of wrapping it, as\n     * React's `asChild` does; a closed panel then renders nothing\n     */\n    asChild: { type: Boolean, default: false },\n  },\n  setup(props, { attrs, slots }) {\n    const itemContext = injectAccordionItemContext()\n    const collapsibleContext = injectCollapsibleRootContext()\n    collapsibleContext.contentId ||= useId(undefined, \"reka-collapsible-content\")\n    itemContext.triggerId ||= useId(undefined, \"reka-accordion-trigger\")\n\n    return () =>\n      h(\n        Presence,\n        { present: !!props.forceMount || itemContext.open.value, forceMount: true },\n        {\n          // Presence calls its slot once during setup; withCtx marks it as a\n          // render slot (returning an array, like compiled slots) so Vue does\n          // not warn about that call\n          default: withCtx(({ present }: { present: boolean }) => [\n            h(AccordionContentImpl, { ...attrs, present, asChild: props.asChild }, { default: () => slots.default?.() }),\n          ]),\n        },\n      )\n  },\n})\n\ntype AccordionOwnProps = InstanceType<typeof Accordion>[\"$props\"]\ntype AccordionItemOwnProps = InstanceType<typeof AccordionItem>[\"$props\"]\ntype AccordionContentOwnProps = InstanceType<typeof AccordionContent>[\"$props\"]\n\n/** Accordion props plus the attributes that fall through to the root `<div>`, as in React. */\nexport type AccordionProps = AccordionOwnProps & Omit<HTMLAttributes, keyof AccordionOwnProps>\n\n/** AccordionItem props plus the attributes that fall through to the item `<div>`. */\nexport type AccordionItemProps = AccordionItemOwnProps & Omit<HTMLAttributes, keyof AccordionItemOwnProps>\n\n/** AccordionTrigger takes the attributes of its `<button>`. */\nexport type AccordionTriggerProps = ButtonHTMLAttributes\n\n/** AccordionContent props plus the attributes of the panel `<div>`. */\nexport type AccordionContentProps = AccordionContentOwnProps & Omit<HTMLAttributes, keyof AccordionContentOwnProps>\n"]}

package/dist/es/components/Accordion/index.js

@@ -0,0 +1,2 @@
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, } from "./Accordion.js";
+//# sourceMappingURL=index.js.map

package/dist/es/components/Accordion/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/Accordion/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EACT,gBAAgB,EAChB,aAAa,EACb,gBAAgB,GAKjB,MAAM,gBAAgB,CAAA","sourcesContent":["export {\n  Accordion,\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n  type AccordionContentProps,\n  type AccordionItemProps,\n  type AccordionProps,\n  type AccordionTriggerProps,\n} from \"./Accordion.js\"\n"]}