@plexui/vue 0.0.0-stage → 0.1.1

package/dist/es/components/OTPInput/OTPInput.js

@@ -0,0 +1,262 @@
+import clsx from "clsx";
+import { computed, defineComponent, h, nextTick, onMounted, onUpdated, ref, shallowRef, useId, watch } from "vue";
+import { FieldError } from "../FieldError/index.js";
+import s from "@plexui/styles/components/OTPInput/OTPInput.module.css";
+function sanitizeDigits(value, length) {
+    return value.replace(/\D/g, "").slice(0, length);
+}
+// One entry per cell, "" when empty
+function toCells(value, length) {
+    return Array.from({ length }, (_, index) => value[index] ?? "");
+}
+function shouldShowGap(index, grouping) {
+    let pos = 0;
+    for (const groupSize of grouping) {
+        pos += groupSize;
+        if (index === pos)
+            return true;
+    }
+    return false;
+}
+/**
+ * Port of packages/ui/src/components/OTPInput/OTPInput.tsx. Controlled with
+ * `value` (`v-model:value`); emits `update:value` and `change` when the
+ * digits change and `complete` when every cell is filled.
+ */
+export const OTPInput = defineComponent({
+    name: "OTPInput",
+    inheritAttrs: false,
+    props: {
+        /** Number of digit cells. @default 6 */
+        length: { type: Number, default: 6 },
+        value: String,
+        /** Group sizes, e.g. [3, 3] puts a gap after the third cell */
+        grouping: Array,
+        invalid: { type: Boolean, default: false },
+        errorMessage: String,
+        disabled: { type: Boolean, default: false },
+        autoFocus: { type: Boolean, default: false },
+    },
+    emits: {
+        "update:value": (_value) => true,
+        "change": (_value) => true,
+        "complete": (_value) => true,
+    },
+    setup(props, { attrs, emit, expose }) {
+        const length = computed(() => Math.max(1, Math.floor(props.length)));
+        const controlledValue = computed(() => sanitizeDigits(props.value ?? "", length.value));
+        const isControlled = computed(() => props.value !== undefined);
+        // The digit of every cell, so clearing or filling one cell never moves the
+        // others; the value is the filled cells' digits in order
+        const cells = shallowRef(toCells(controlledValue.value, length.value));
+        const focusedIndex = ref(-1);
+        const rootRef = ref(null);
+        const inputRefs = [];
+        expose({ root: rootRef });
+        const ownCells = computed(() => Array.from({ length: length.value }, (_, index) => cells.value[index] ?? ""));
+        const currentValue = computed(() => (isControlled.value ? controlledValue.value : ownCells.value.join("")));
+        // The cells keep their gaps while they spell the value; any other value
+        // (set by the parent) fills the cells from the start
+        const digits = computed(() => ownCells.value.join("") === currentValue.value ? ownCells.value : toCells(currentValue.value, length.value));
+        const errorId = `otp-input-${useId()}-error`;
+        // Inputs mirror `digits` like React's controlled inputs, which undo any
+        // typing the state did not take
+        const syncInputs = () => {
+            digits.value.forEach((digit, index) => {
+                const input = inputRefs[index];
+                if (input && input.value !== digit)
+                    input.value = digit;
+            });
+        };
+        onUpdated(syncInputs);
+        // React's effect on [autoFocus, disabled]: on mount and on either change
+        const runAutoFocus = () => {
+            if (!props.autoFocus || props.disabled)
+                return;
+            inputRefs[0]?.focus();
+        };
+        onMounted(runAutoFocus);
+        watch([() => props.autoFocus, () => props.disabled], runAutoFocus, { flush: "post" });
+        // The value the field's own last edit produced, until the value changes:
+        // a field the user empties keeps the caret where it is
+        let ownValue = null;
+        const commitDigits = (nextDigits) => {
+            const previous = currentValue.value;
+            // Kept when controlled too: the parent's value then keeps these gaps
+            cells.value = nextDigits;
+            const nextValue = nextDigits.join("");
+            ownValue = nextValue;
+            if (nextValue !== previous) {
+                emit("update:value", nextValue);
+                emit("change", nextValue);
+            }
+            if (nextValue.length === length.value) {
+                emit("complete", nextValue);
+            }
+            void nextTick(syncInputs);
+        };
+        const focusCell = (index) => {
+            const clampedIndex = Math.max(0, Math.min(index, length.value - 1));
+            const input = inputRefs[clampedIndex];
+            if (!input)
+                return;
+            input.focus();
+            input.setSelectionRange(1, 1);
+        };
+        // A field cleared from outside (a wrong code wiped by the form) puts the
+        // caret back in the first cell, when the focus was in the field already
+        let hadValue = currentValue.value.length > 0;
+        watch([currentValue, () => props.disabled], () => {
+            const filled = currentValue.value.length > 0;
+            const fromOutside = ownValue !== currentValue.value;
+            ownValue = null;
+            const root = rootRef.value;
+            if (!filled && hadValue && fromOutside && !props.disabled && root?.contains(document.activeElement)) {
+                focusCell(0);
+            }
+            hadValue = filled;
+        }, { flush: "post" });
+        const handleCellClick = (index) => {
+            if (props.disabled)
+                return;
+            focusCell(index);
+        };
+        const handlePaste = (index, evt) => {
+            if (props.disabled)
+                return;
+            evt.preventDefault();
+            const pastedDigits = sanitizeDigits(evt.clipboardData?.getData("text") ?? "", length.value);
+            if (!pastedDigits)
+                return;
+            const nextDigits = [...digits.value];
+            let writeIndex = index;
+            for (const digit of pastedDigits) {
+                if (writeIndex >= length.value)
+                    break;
+                nextDigits[writeIndex] = digit;
+                writeIndex += 1;
+            }
+            commitDigits(nextDigits);
+            // The cell after the pasted digits
+            focusCell(Math.min(writeIndex, length.value - 1));
+        };
+        const handleChange = (index, evt) => {
+            if (props.disabled)
+                return;
+            const typedDigits = evt.currentTarget.value.replace(/\D/g, "");
+            if (!typedDigits) {
+                const nextDigits = [...digits.value];
+                nextDigits[index] = "";
+                commitDigits(nextDigits);
+                return;
+            }
+            const nextDigits = [...digits.value];
+            if (typedDigits.length === 1) {
+                nextDigits[index] = typedDigits[0];
+                commitDigits(nextDigits);
+                if (index < length.value - 1) {
+                    focusCell(index + 1);
+                }
+                return;
+            }
+            let writeIndex = index;
+            for (const digit of typedDigits) {
+                if (writeIndex >= length.value)
+                    break;
+                nextDigits[writeIndex] = digit;
+                writeIndex += 1;
+            }
+            commitDigits(nextDigits);
+            // The cell after the typed digits
+            focusCell(Math.min(writeIndex, length.value - 1));
+        };
+        const handleKeyDown = (index, evt) => {
+            if (props.disabled)
+                return;
+            if (evt.key === "Backspace") {
+                evt.preventDefault();
+                const nextDigits = [...digits.value];
+                if (nextDigits[index]) {
+                    nextDigits[index] = "";
+                    commitDigits(nextDigits);
+                    return;
+                }
+                if (index > 0) {
+                    nextDigits[index - 1] = "";
+                    commitDigits(nextDigits);
+                    focusCell(index - 1);
+                }
+                return;
+            }
+            if (evt.key === "Delete") {
+                evt.preventDefault();
+                const nextDigits = [...digits.value];
+                nextDigits[index] = "";
+                commitDigits(nextDigits);
+                return;
+            }
+            if (evt.key === "ArrowLeft") {
+                evt.preventDefault();
+                focusCell(index - 1);
+                return;
+            }
+            if (evt.key === "ArrowRight") {
+                evt.preventDefault();
+                focusCell(index + 1);
+            }
+        };
+        const handleBlur = () => {
+            requestAnimationFrame(() => {
+                const activeElement = document.activeElement;
+                const isAnyCellFocused = inputRefs.some((input) => input === activeElement);
+                if (!isAnyCellFocused) {
+                    focusedIndex.value = -1;
+                }
+            });
+        };
+        return () => h("div", { ref: rootRef, class: clsx(s.Root, attrs.class) }, [
+            h("div", { class: s.Cells }, Array.from({ length: length.value }, (_, index) => {
+                const isGroupGap = props.grouping ? shouldShowGap(index, props.grouping) : false;
+                return [
+                    isGroupGap ? h("div", { "class": s.GroupGap, "aria-hidden": "true" }) : null,
+                    h("div", {
+                        "class": clsx(s.Cell, {
+                            [s.CellFocused]: focusedIndex.value === index,
+                            [s.CellFilled]: !!digits.value[index],
+                        }),
+                        "data-invalid": props.invalid ? "" : undefined,
+                        "data-disabled": props.disabled ? "" : undefined,
+                        "onClick": () => handleCellClick(index),
+                    }, [
+                        h("input", {
+                            "ref": (element) => {
+                                inputRefs[index] = element;
+                            },
+                            "type": "text",
+                            "inputmode": "numeric",
+                            "pattern": "[0-9]",
+                            "maxlength": 1,
+                            "value": digits.value[index],
+                            "disabled": props.disabled,
+                            "class": s.CellInput,
+                            "onInput": (evt) => handleChange(index, evt),
+                            "onKeydown": (evt) => handleKeyDown(index, evt),
+                            "onFocus": () => (focusedIndex.value = index),
+                            "onBlur": handleBlur,
+                            "onPaste": (evt) => handlePaste(index, evt),
+                            "aria-label": `Digit ${index + 1}`,
+                            "aria-invalid": props.invalid ? true : undefined,
+                            "aria-describedby": props.errorMessage ? errorId : undefined,
+                            "autocomplete": index === 0 ? "one-time-code" : "off",
+                        }),
+                        !digits.value[index] && focusedIndex.value !== index ? h("div", { class: s.DotPlaceholder }) : null,
+                    ]),
+                ];
+            }).flat()),
+            props.errorMessage
+                ? h(FieldError, { id: errorId, class: s.ErrorMessage }, { default: () => props.errorMessage })
+                : null,
+        ]);
+    },
+});
+//# sourceMappingURL=OTPInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"OTPInput.js","sourceRoot":"","sources":["../../../../src/components/OTPInput/OTPInput.ts"],"names":[],"mappings":"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","sourcesContent":["import clsx from \"clsx\"\nimport { computed, defineComponent, h, nextTick, onMounted, onUpdated, ref, shallowRef, useId, watch, type PropType } from \"vue\"\nimport { FieldError } from \"../FieldError/index.js\"\nimport s from \"@plexui/styles/components/OTPInput/OTPInput.module.css\"\n\nfunction sanitizeDigits(value: string, length: number): string {\n  return value.replace(/\\D/g, \"\").slice(0, length)\n}\n\n// One entry per cell, \"\" when empty\nfunction toCells(value: string, length: number): string[] {\n  return Array.from({ length }, (_, index) => value[index] ?? \"\")\n}\n\nfunction shouldShowGap(index: number, grouping: number[]): boolean {\n  let pos = 0\n  for (const groupSize of grouping) {\n    pos += groupSize\n    if (index === pos) return true\n  }\n  return false\n}\n\n/**\n * Port of packages/ui/src/components/OTPInput/OTPInput.tsx. Controlled with\n * `value` (`v-model:value`); emits `update:value` and `change` when the\n * digits change and `complete` when every cell is filled.\n */\nexport const OTPInput = defineComponent({\n  name: \"OTPInput\",\n  inheritAttrs: false,\n  props: {\n    /** Number of digit cells. @default 6 */\n    length: { type: Number, default: 6 },\n    value: String,\n    /** Group sizes, e.g. [3, 3] puts a gap after the third cell */\n    grouping: Array as PropType<number[]>,\n    invalid: { type: Boolean, default: false },\n    errorMessage: String,\n    disabled: { type: Boolean, default: false },\n    autoFocus: { type: Boolean, default: false },\n  },\n  emits: {\n    \"update:value\": (_value: string) => true,\n    \"change\": (_value: string) => true,\n    \"complete\": (_value: string) => true,\n  },\n  setup(props, { attrs, emit, expose }) {\n    const length = computed(() => Math.max(1, Math.floor(props.length)))\n    const controlledValue = computed(() => sanitizeDigits(props.value ?? \"\", length.value))\n    const isControlled = computed(() => props.value !== undefined)\n\n    // The digit of every cell, so clearing or filling one cell never moves the\n    // others; the value is the filled cells' digits in order\n    const cells = shallowRef(toCells(controlledValue.value, length.value))\n    const focusedIndex = ref(-1)\n\n    const rootRef = ref<HTMLDivElement | null>(null)\n    const inputRefs: Array<HTMLInputElement | null> = []\n\n    expose({ root: rootRef })\n\n    const ownCells = computed(() => Array.from({ length: length.value }, (_, index) => cells.value[index] ?? \"\"))\n    const currentValue = computed(() => (isControlled.value ? controlledValue.value : ownCells.value.join(\"\")))\n    // The cells keep their gaps while they spell the value; any other value\n    // (set by the parent) fills the cells from the start\n    const digits = computed(() =>\n      ownCells.value.join(\"\") === currentValue.value ? ownCells.value : toCells(currentValue.value, length.value),\n    )\n\n    const errorId = `otp-input-${useId()}-error`\n\n    // Inputs mirror `digits` like React's controlled inputs, which undo any\n    // typing the state did not take\n    const syncInputs = () => {\n      digits.value.forEach((digit, index) => {\n        const input = inputRefs[index]\n        if (input && input.value !== digit) input.value = digit\n      })\n    }\n    onUpdated(syncInputs)\n\n    // React's effect on [autoFocus, disabled]: on mount and on either change\n    const runAutoFocus = () => {\n      if (!props.autoFocus || props.disabled) return\n      inputRefs[0]?.focus()\n    }\n    onMounted(runAutoFocus)\n    watch([() => props.autoFocus, () => props.disabled], runAutoFocus, { flush: \"post\" })\n\n    // The value the field's own last edit produced, until the value changes:\n    // a field the user empties keeps the caret where it is\n    let ownValue: string | null = null\n\n    const commitDigits = (nextDigits: string[]) => {\n      const previous = currentValue.value\n      // Kept when controlled too: the parent's value then keeps these gaps\n      cells.value = nextDigits\n      const nextValue = nextDigits.join(\"\")\n      ownValue = nextValue\n      if (nextValue !== previous) {\n        emit(\"update:value\", nextValue)\n        emit(\"change\", nextValue)\n      }\n      if (nextValue.length === length.value) {\n        emit(\"complete\", nextValue)\n      }\n      void nextTick(syncInputs)\n    }\n\n    const focusCell = (index: number) => {\n      const clampedIndex = Math.max(0, Math.min(index, length.value - 1))\n      const input = inputRefs[clampedIndex]\n      if (!input) return\n      input.focus()\n      input.setSelectionRange(1, 1)\n    }\n\n    // A field cleared from outside (a wrong code wiped by the form) puts the\n    // caret back in the first cell, when the focus was in the field already\n    let hadValue = currentValue.value.length > 0\n    watch(\n      [currentValue, () => props.disabled],\n      () => {\n        const filled = currentValue.value.length > 0\n        const fromOutside = ownValue !== currentValue.value\n        ownValue = null\n        const root = rootRef.value\n        if (!filled && hadValue && fromOutside && !props.disabled && root?.contains(document.activeElement)) {\n          focusCell(0)\n        }\n        hadValue = filled\n      },\n      { flush: \"post\" },\n    )\n\n    const handleCellClick = (index: number) => {\n      if (props.disabled) return\n      focusCell(index)\n    }\n\n    const handlePaste = (index: number, evt: ClipboardEvent) => {\n      if (props.disabled) return\n      evt.preventDefault()\n      const pastedDigits = sanitizeDigits(evt.clipboardData?.getData(\"text\") ?? \"\", length.value)\n      if (!pastedDigits) return\n\n      const nextDigits = [...digits.value]\n      let writeIndex = index\n\n      for (const digit of pastedDigits) {\n        if (writeIndex >= length.value) break\n        nextDigits[writeIndex] = digit\n        writeIndex += 1\n      }\n\n      commitDigits(nextDigits)\n      // The cell after the pasted digits\n      focusCell(Math.min(writeIndex, length.value - 1))\n    }\n\n    const handleChange = (index: number, evt: Event) => {\n      if (props.disabled) return\n      const typedDigits = (evt.currentTarget as HTMLInputElement).value.replace(/\\D/g, \"\")\n\n      if (!typedDigits) {\n        const nextDigits = [...digits.value]\n        nextDigits[index] = \"\"\n        commitDigits(nextDigits)\n        return\n      }\n\n      const nextDigits = [...digits.value]\n\n      if (typedDigits.length === 1) {\n        nextDigits[index] = typedDigits[0]!\n        commitDigits(nextDigits)\n        if (index < length.value - 1) {\n          focusCell(index + 1)\n        }\n        return\n      }\n\n      let writeIndex = index\n      for (const digit of typedDigits) {\n        if (writeIndex >= length.value) break\n        nextDigits[writeIndex] = digit\n        writeIndex += 1\n      }\n\n      commitDigits(nextDigits)\n      // The cell after the typed digits\n      focusCell(Math.min(writeIndex, length.value - 1))\n    }\n\n    const handleKeyDown = (index: number, evt: KeyboardEvent) => {\n      if (props.disabled) return\n\n      if (evt.key === \"Backspace\") {\n        evt.preventDefault()\n        const nextDigits = [...digits.value]\n\n        if (nextDigits[index]) {\n          nextDigits[index] = \"\"\n          commitDigits(nextDigits)\n          return\n        }\n\n        if (index > 0) {\n          nextDigits[index - 1] = \"\"\n          commitDigits(nextDigits)\n          focusCell(index - 1)\n        }\n        return\n      }\n\n      if (evt.key === \"Delete\") {\n        evt.preventDefault()\n        const nextDigits = [...digits.value]\n        nextDigits[index] = \"\"\n        commitDigits(nextDigits)\n        return\n      }\n\n      if (evt.key === \"ArrowLeft\") {\n        evt.preventDefault()\n        focusCell(index - 1)\n        return\n      }\n\n      if (evt.key === \"ArrowRight\") {\n        evt.preventDefault()\n        focusCell(index + 1)\n      }\n    }\n\n    const handleBlur = () => {\n      requestAnimationFrame(() => {\n        const activeElement = document.activeElement\n        const isAnyCellFocused = inputRefs.some((input) => input === activeElement)\n        if (!isAnyCellFocused) {\n          focusedIndex.value = -1\n        }\n      })\n    }\n\n    return () =>\n      h(\"div\", { ref: rootRef, class: clsx(s.Root, attrs.class as string | undefined) }, [\n        h(\n          \"div\",\n          { class: s.Cells },\n          Array.from({ length: length.value }, (_, index) => {\n            const isGroupGap = props.grouping ? shouldShowGap(index, props.grouping) : false\n            return [\n              isGroupGap ? h(\"div\", { \"class\": s.GroupGap, \"aria-hidden\": \"true\" }) : null,\n              h(\n                \"div\",\n                {\n                  \"class\": clsx(s.Cell, {\n                    [s.CellFocused!]: focusedIndex.value === index,\n                    [s.CellFilled!]: !!digits.value[index],\n                  }),\n                  \"data-invalid\": props.invalid ? \"\" : undefined,\n                  \"data-disabled\": props.disabled ? \"\" : undefined,\n                  \"onClick\": () => handleCellClick(index),\n                },\n                [\n                  h(\"input\", {\n                    \"ref\": (element: unknown) => {\n                      inputRefs[index] = element as HTMLInputElement | null\n                    },\n                    \"type\": \"text\",\n                    \"inputmode\": \"numeric\",\n                    \"pattern\": \"[0-9]\",\n                    \"maxlength\": 1,\n                    \"value\": digits.value[index],\n                    \"disabled\": props.disabled,\n                    \"class\": s.CellInput,\n                    \"onInput\": (evt: Event) => handleChange(index, evt),\n                    \"onKeydown\": (evt: KeyboardEvent) => handleKeyDown(index, evt),\n                    \"onFocus\": () => (focusedIndex.value = index),\n                    \"onBlur\": handleBlur,\n                    \"onPaste\": (evt: ClipboardEvent) => handlePaste(index, evt),\n                    \"aria-label\": `Digit ${index + 1}`,\n                    \"aria-invalid\": props.invalid ? true : undefined,\n                    \"aria-describedby\": props.errorMessage ? errorId : undefined,\n                    \"autocomplete\": index === 0 ? \"one-time-code\" : \"off\",\n                  }),\n                  !digits.value[index] && focusedIndex.value !== index ? h(\"div\", { class: s.DotPlaceholder }) : null,\n                ],\n              ),\n            ]\n          }).flat(),\n        ),\n        props.errorMessage\n          ? h(FieldError, { id: errorId, class: s.ErrorMessage }, { default: () => props.errorMessage })\n          : null,\n      ])\n  },\n})\n\nexport type OTPInputProps = InstanceType<typeof OTPInput>[\"$props\"]\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/OTPInput/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAsB,MAAM,eAAe,CAAA","sourcesContent":["export { OTPInput, type OTPInputProps } from \"./OTPInput.js\"\n"]}

package/dist/es/components/PlexUIProvider/PlexUIProvider.js

@@ -0,0 +1,24 @@
+import { defineComponent, provide } from "vue";
+export const PlexUIContextKey = Symbol("PlexUI");
+/**
+ * Shared context for all Plex UI components - wrap your app in this
+ * provider to use Plex UI components.
+ *
+ * It only holds the component used for rendering links, like the React
+ * provider.
+ */
+export const PlexUIProvider = defineComponent({
+    name: "PlexUIProvider",
+    props: {
+        linkComponent: { type: [String, Object, Function], required: true },
+    },
+    setup(props, { slots }) {
+        provide(PlexUIContextKey, {
+            get linkComponent() {
+                return props.linkComponent;
+            },
+        });
+        return () => slots.default?.();
+    },
+});
+//# sourceMappingURL=PlexUIProvider.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PlexUIProvider.js","sourceRoot":"","sources":["../../../../src/components/PlexUIProvider/PlexUIProvider.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,OAAO,EAAoD,MAAM,KAAK,CAAA;AAShG,MAAM,CAAC,MAAM,gBAAgB,GAAqC,MAAM,CAAC,QAAQ,CAAC,CAAA;AAElF;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,eAAe,CAAC;IAC5C,IAAI,EAAE,gBAAgB;IACtB,KAAK,EAAE;QACL,aAAa,EAAE,EAAE,IAAI,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,CAA4B,EAAE,QAAQ,EAAE,IAAI,EAAE;KAC/F;IACD,KAAK,CAAC,KAAK,EAAE,EAAE,KAAK,EAAE;QACpB,OAAO,CAAC,gBAAgB,EAAE;YACxB,IAAI,aAAa;gBACf,OAAO,KAAK,CAAC,aAAa,CAAA;YAC5B,CAAC;SACF,CAAC,CAAA;QACF,OAAO,GAAG,EAAE,CAAC,KAAK,CAAC,OAAO,EAAE,EAAE,CAAA;IAChC,CAAC;CACF,CAAC,CAAA","sourcesContent":["import { defineComponent, provide, type Component, type InjectionKey, type PropType } from \"vue\"\n\n/** Component used to render internal links: `\"a\"` or your router's link (e.g. vue-router's `RouterLink`). */\nexport type LinkComponent = Component | \"a\"\n\ntype PlexUIContextValue = {\n  linkComponent: LinkComponent\n}\n\nexport const PlexUIContextKey: InjectionKey<PlexUIContextValue> = Symbol(\"PlexUI\")\n\n/**\n * Shared context for all Plex UI components - wrap your app in this\n * provider to use Plex UI components.\n *\n * It only holds the component used for rendering links, like the React\n * provider.\n */\nexport const PlexUIProvider = defineComponent({\n  name: \"PlexUIProvider\",\n  props: {\n    linkComponent: { type: [String, Object, Function] as PropType<LinkComponent>, required: true },\n  },\n  setup(props, { slots }) {\n    provide(PlexUIContextKey, {\n      get linkComponent() {\n        return props.linkComponent\n      },\n    })\n    return () => slots.default?.()\n  },\n})\n"]}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/PlexUIProvider/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAsB,MAAM,qBAAqB,CAAA","sourcesContent":["export { PlexUIProvider, type LinkComponent } from \"./PlexUIProvider.js\"\n"]}

package/dist/es/components/PlexUIProvider/internal.js

@@ -0,0 +1,8 @@
+import { computed, inject } from "vue";
+import { PlexUIContextKey } from "./PlexUIProvider.js";
+/** The provider's link component, kept current when the provider's prop changes. */
+export function useLinkComponent() {
+    const context = inject(PlexUIContextKey, null);
+    return computed(() => context?.linkComponent ?? "a");
+}
+//# sourceMappingURL=internal.js.map

package/dist/es/components/PlexUIProvider/internal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../../src/components/PlexUIProvider/internal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,EAAoB,MAAM,KAAK,CAAA;AACxD,OAAO,EAAE,gBAAgB,EAAsB,MAAM,qBAAqB,CAAA;AAE1E,oFAAoF;AACpF,MAAM,UAAU,gBAAgB;IAC9B,MAAM,OAAO,GAAG,MAAM,CAAC,gBAAgB,EAAE,IAAI,CAAC,CAAA;IAC9C,OAAO,QAAQ,CAAC,GAAG,EAAE,CAAC,OAAO,EAAE,aAAa,IAAI,GAAG,CAAC,CAAA;AACtD,CAAC","sourcesContent":["import { computed, inject, type ComputedRef } from \"vue\"\nimport { PlexUIContextKey, type LinkComponent } from \"./PlexUIProvider.js\"\n\n/** The provider's link component, kept current when the provider's prop changes. */\nexport function useLinkComponent(): ComputedRef<LinkComponent> {\n  const context = inject(PlexUIContextKey, null)\n  return computed(() => context?.linkComponent ?? \"a\")\n}\n"]}