@unofficialbox/box-open-elements-vue 0.7.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 box-open-elements contributors
+
+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

@@ -0,0 +1,26 @@
+# @unofficialbox/box-open-elements-vue
+
+Typed Vue 3 wrappers for `box-open-elements`, including structured property
+sync, custom-event emits, exposed element refs, and a selection-controller
+composable.
+
+```bash
+npm install @unofficialbox/box-open-elements @unofficialbox/box-open-elements-vue vue
+```
+
+```vue
+<script setup lang="ts">
+import { Select, TextField } from "@unofficialbox/box-open-elements-vue";
+const options = [{ label: "Draft", value: "draft" }];
+</script>
+
+<template>
+  <TextField value="Apollo" @value-changed="event => console.log(event.detail.value)" />
+  <Select :options="options" />
+</template>
+```
+
+`useExplorerSelectionController(controller)` exposes the shared selection
+controller as a scoped readonly ref. Version `0.1.0` is a release candidate;
+Supported status follows the first public lockstep adapter release and clean
+registry-install verification.

package/dist/adapter.d.ts

@@ -0,0 +1,7 @@
+import { type ShallowRef } from "vue";
+export type EventBinding = {
+    eventName: string;
+    listener: (event: Event) => void;
+};
+/** Shared lifecycle bridge for Vue wrappers around custom-element hosts. */
+export declare const useWebComponent: <E extends HTMLElement>(sync: (element: E) => void, events?: readonly EventBinding[]) => ShallowRef<E | undefined>;

package/dist/adapter.js

@@ -0,0 +1,24 @@
+import { onBeforeUnmount, onMounted, shallowRef, watchEffect, } from "vue";
+/** Shared lifecycle bridge for Vue wrappers around custom-element hosts. */
+export const useWebComponent = (sync, events = []) => {
+    const element = shallowRef();
+    watchEffect(() => {
+        if (element.value)
+            sync(element.value);
+    });
+    onMounted(() => {
+        if (!element.value)
+            return;
+        for (const binding of events) {
+            element.value.addEventListener(binding.eventName, binding.listener);
+        }
+    });
+    onBeforeUnmount(() => {
+        if (!element.value)
+            return;
+        for (const binding of events) {
+            element.value.removeEventListener(binding.eventName, binding.listener);
+        }
+    });
+    return element;
+};

package/dist/button.d.ts

@@ -0,0 +1,16 @@
+/** Typed Vue wrapper for `<box-button>`. */
+export declare const Button: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    label: StringConstructor;
+    tone: StringConstructor;
+    size: StringConstructor;
+    disabled: BooleanConstructor;
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    label: StringConstructor;
+    tone: StringConstructor;
+    size: StringConstructor;
+    disabled: BooleanConstructor;
+}>> & Readonly<{}>, {
+    disabled: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/button.js

@@ -0,0 +1,28 @@
+import { defineComponent, h } from "vue";
+import { Button as ButtonElement } from "@unofficialbox/box-open-elements/button";
+import { useWebComponent } from "./adapter.js";
+ButtonElement.register();
+/** Typed Vue wrapper for `<box-button>`. */
+export const Button = defineComponent({
+    name: "Button",
+    inheritAttrs: false,
+    props: {
+        label: String,
+        tone: String,
+        size: String,
+        disabled: Boolean,
+    },
+    setup(props, { attrs, slots, expose }) {
+        const element = useWebComponent(host => {
+            if (props.label !== undefined)
+                host.label = props.label;
+            if (props.tone !== undefined)
+                host.tone = props.tone;
+            if (props.size !== undefined)
+                host.size = props.size;
+            host.disabled = props.disabled;
+        });
+        expose({ get element() { return element.value; } });
+        return () => h("box-button", { ...attrs, ref: element }, slots.default?.());
+    },
+});

package/dist/dialog.d.ts

@@ -0,0 +1,31 @@
+import { type PropType } from "vue";
+export type DialogSize = "small" | "medium" | "large" | "fullscreen";
+export type OpenChangedEvent = CustomEvent<{
+    open: boolean;
+}>;
+/** Typed Vue wrapper for the controlled `<box-dialog>`. */
+export declare const Dialog: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    open: BooleanConstructor;
+    heading: StringConstructor;
+    description: StringConstructor;
+    confirmLabel: StringConstructor;
+    size: PropType<DialogSize>;
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "open-changed": (_event: OpenChangedEvent) => true;
+    confirm: (_event: CustomEvent<null>) => true;
+    cancel: (_event: CustomEvent<null>) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    open: BooleanConstructor;
+    heading: StringConstructor;
+    description: StringConstructor;
+    confirmLabel: StringConstructor;
+    size: PropType<DialogSize>;
+}>> & Readonly<{
+    onCancel?: ((_event: CustomEvent<null>) => any) | undefined;
+    "onOpen-changed"?: ((_event: OpenChangedEvent) => any) | undefined;
+    onConfirm?: ((_event: CustomEvent<null>) => any) | undefined;
+}>, {
+    open: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/dialog.js

@@ -0,0 +1,49 @@
+import { defineComponent, h } from "vue";
+import { Dialog as DialogElement } from "@unofficialbox/box-open-elements/dialog";
+import { useWebComponent } from "./adapter.js";
+DialogElement.register();
+/** Typed Vue wrapper for the controlled `<box-dialog>`. */
+export const Dialog = defineComponent({
+    name: "Dialog",
+    inheritAttrs: false,
+    props: {
+        open: Boolean,
+        heading: String,
+        description: String,
+        confirmLabel: String,
+        size: String,
+    },
+    emits: {
+        "open-changed": (_event) => true,
+        confirm: (_event) => true,
+        cancel: (_event) => true,
+    },
+    setup(props, { attrs, slots, emit, expose }) {
+        const element = useWebComponent(host => {
+            host.open = props.open;
+            if (props.heading !== undefined)
+                host.heading = props.heading;
+            if (props.description !== undefined)
+                host.description = props.description;
+            if (props.confirmLabel !== undefined)
+                host.confirmLabel = props.confirmLabel;
+            if (props.size !== undefined)
+                host.size = props.size;
+        }, [
+            {
+                eventName: "open-changed",
+                listener: event => emit("open-changed", event),
+            },
+            {
+                eventName: "confirm",
+                listener: event => emit("confirm", event),
+            },
+            {
+                eventName: "cancel",
+                listener: event => emit("cancel", event),
+            },
+        ]);
+        expose({ get element() { return element.value; } });
+        return () => h("box-dialog", { ...attrs, ref: element }, slots.default?.());
+    },
+});

package/dist/explorer-selection.d.ts

@@ -0,0 +1,6 @@
+import { type DeepReadonly, type ShallowRef } from "vue";
+import { ExplorerSelectionController, type ExplorerSelectionState } from "@unofficialbox/box-open-elements/patterns/content-explorer/selection";
+export { ExplorerSelectionController };
+export type { ExplorerSelectionState };
+/** Vue composable for the framework-neutral explorer selection controller. */
+export declare const useExplorerSelectionController: (controller: ExplorerSelectionController) => DeepReadonly<ShallowRef<Readonly<ExplorerSelectionState>>>;

package/dist/explorer-selection.js

@@ -0,0 +1,18 @@
+import { getCurrentScope, onScopeDispose, readonly, shallowRef, } from "vue";
+import { ExplorerSelectionController, } from "@unofficialbox/box-open-elements/patterns/content-explorer/selection";
+// Re-exported so a host can construct the controller through this package and
+// hand it straight to the adapter API. Classes with private fields are
+// nominally typed, so a host that imports the class from a differently
+// resolved copy of the core package gets an incompatible identity — one
+// import path sidesteps that whole class of version-skew errors.
+export { ExplorerSelectionController };
+/** Vue composable for the framework-neutral explorer selection controller. */
+export const useExplorerSelectionController = (controller) => {
+    const state = shallowRef(controller.getState());
+    const unsubscribe = controller.subscribe("selectionChanged", () => {
+        state.value = controller.getState();
+    });
+    if (getCurrentScope())
+        onScopeDispose(unsubscribe);
+    return readonly(state);
+};

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+export { useWebComponent, type EventBinding } from "./adapter.js";
+export { Button } from "./button.js";
+export { Dialog, type DialogSize, type OpenChangedEvent } from "./dialog.js";
+export { useExplorerSelectionController } from "./explorer-selection.js";
+export { Select, type SelectOption } from "./select.js";
+export { TextField, type ValueChangedDetail, type ValueChangedEvent } from "./text-field.js";
+export { ExplorerSelectionController, type ExplorerSelectionState } from "./explorer-selection.js";

package/dist/index.js

@@ -0,0 +1,7 @@
+export { useWebComponent } from "./adapter.js";
+export { Button } from "./button.js";
+export { Dialog } from "./dialog.js";
+export { useExplorerSelectionController } from "./explorer-selection.js";
+export { Select } from "./select.js";
+export { TextField } from "./text-field.js";
+export { ExplorerSelectionController } from "./explorer-selection.js";

package/dist/select.d.ts

@@ -0,0 +1,33 @@
+import { type PropType } from "vue";
+import type { ValueChangedEvent } from "./text-field.js";
+export type SelectOption = {
+    label: string;
+    value: string;
+};
+/** Typed Vue wrapper for `<box-select>`, including structured options. */
+export declare const Select: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    label: StringConstructor;
+    value: StringConstructor;
+    options: PropType<SelectOption[]>;
+    disabled: BooleanConstructor;
+    name: StringConstructor;
+    invalid: BooleanConstructor;
+    errorMessage: StringConstructor;
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "value-changed": (_event: ValueChangedEvent) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    label: StringConstructor;
+    value: StringConstructor;
+    options: PropType<SelectOption[]>;
+    disabled: BooleanConstructor;
+    name: StringConstructor;
+    invalid: BooleanConstructor;
+    errorMessage: StringConstructor;
+}>> & Readonly<{
+    "onValue-changed"?: ((_event: ValueChangedEvent) => any) | undefined;
+}>, {
+    invalid: boolean;
+    disabled: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/select.js

@@ -0,0 +1,42 @@
+import { defineComponent, h } from "vue";
+import { Select as SelectElement } from "@unofficialbox/box-open-elements/select";
+import { useWebComponent } from "./adapter.js";
+SelectElement.register();
+/** Typed Vue wrapper for `<box-select>`, including structured options. */
+export const Select = defineComponent({
+    name: "Select",
+    inheritAttrs: false,
+    props: {
+        label: String,
+        value: String,
+        options: Array,
+        disabled: Boolean,
+        name: String,
+        invalid: Boolean,
+        errorMessage: String,
+    },
+    emits: {
+        "value-changed": (_event) => true,
+    },
+    setup(props, { attrs, slots, emit, expose }) {
+        const element = useWebComponent(host => {
+            if (props.label !== undefined)
+                host.label = props.label;
+            if (props.value !== undefined)
+                host.value = props.value;
+            if (props.options !== undefined)
+                host.options = props.options;
+            if (props.name !== undefined)
+                host.name = props.name;
+            if (props.errorMessage !== undefined)
+                host.errorMessage = props.errorMessage;
+            host.disabled = props.disabled;
+            host.invalid = props.invalid;
+        }, [{
+                eventName: "value-changed",
+                listener: event => emit("value-changed", event),
+            }]);
+        expose({ get element() { return element.value; } });
+        return () => h("box-select", { ...attrs, ref: element }, slots.default?.());
+    },
+});

package/dist/text-field.d.ts

@@ -0,0 +1,31 @@
+export type ValueChangedDetail = {
+    value: string;
+};
+export type ValueChangedEvent = CustomEvent<ValueChangedDetail>;
+/** Typed Vue wrapper for `<box-text-field>`. */
+export declare const TextField: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    label: StringConstructor;
+    value: StringConstructor;
+    placeholder: StringConstructor;
+    disabled: BooleanConstructor;
+    name: StringConstructor;
+    invalid: BooleanConstructor;
+    errorMessage: StringConstructor;
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "value-changed": (_event: ValueChangedEvent) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    label: StringConstructor;
+    value: StringConstructor;
+    placeholder: StringConstructor;
+    disabled: BooleanConstructor;
+    name: StringConstructor;
+    invalid: BooleanConstructor;
+    errorMessage: StringConstructor;
+}>> & Readonly<{
+    "onValue-changed"?: ((_event: ValueChangedEvent) => any) | undefined;
+}>, {
+    invalid: boolean;
+    disabled: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/text-field.js

@@ -0,0 +1,42 @@
+import { defineComponent, h } from "vue";
+import { TextField as TextFieldElement } from "@unofficialbox/box-open-elements/text-field";
+import { useWebComponent } from "./adapter.js";
+TextFieldElement.register();
+/** Typed Vue wrapper for `<box-text-field>`. */
+export const TextField = defineComponent({
+    name: "TextField",
+    inheritAttrs: false,
+    props: {
+        label: String,
+        value: String,
+        placeholder: String,
+        disabled: Boolean,
+        name: String,
+        invalid: Boolean,
+        errorMessage: String,
+    },
+    emits: {
+        "value-changed": (_event) => true,
+    },
+    setup(props, { attrs, slots, emit, expose }) {
+        const element = useWebComponent(host => {
+            if (props.label !== undefined)
+                host.label = props.label;
+            if (props.value !== undefined)
+                host.value = props.value;
+            if (props.placeholder !== undefined)
+                host.placeholder = props.placeholder;
+            if (props.name !== undefined)
+                host.name = props.name;
+            if (props.errorMessage !== undefined)
+                host.errorMessage = props.errorMessage;
+            host.disabled = props.disabled;
+            host.invalid = props.invalid;
+        }, [{
+                eventName: "value-changed",
+                listener: event => emit("value-changed", event),
+            }]);
+        expose({ get element() { return element.value; } });
+        return () => h("box-text-field", { ...attrs, ref: element }, slots.default?.());
+    },
+});

package/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@unofficialbox/box-open-elements-vue",
+  "version": "0.7.0",
+  "description": "Typed Vue adapters for box-open-elements Web Components.",
+  "license": "MIT",
+  "homepage": "https://unofficialbox.github.io/box-open-elements",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/unofficialbox/box-open-elements.git",
+    "directory": "packages/vue"
+  },
+  "bugs": {
+    "url": "https://github.com/unofficialbox/box-open-elements/issues"
+  },
+  "keywords": ["vue", "web-components", "design-system", "box"],
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": ["dist"],
+  "publishConfig": {
+    "access": "public"
+  },
+  "engines": {
+    "node": ">=20.9.0"
+  },
+  "peerDependencies": {
+    "@unofficialbox/box-open-elements": "^0.7.0",
+    "vue": ">=3.5.0 <4.0.0"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "prepublishOnly": "bun run build",
+    "typecheck": "tsc -p tsconfig.json --noEmit"
+  }
+}