@colletdev/vue 0.1.3

package/README.md

@@ -0,0 +1,64 @@
+# @collet/vue
+
+Vue 3.3+ wrappers (Composition API) for the Collet component library. Typed props, emits, and template refs over 48 Rust/WASM Custom Elements.
+
+## Install
+
+```bash
+npm install @collet/vue @collet/core
+```
+
+## Quick Start
+
+```vue
+<script setup lang="ts">
+import { init, Button, TextInput } from '@collet/vue';
+
+await init(); // once, at app startup
+</script>
+
+<template>
+  <Button variant="filled" label="Save" intent="primary" @cx-click="save" />
+  <TextInput label="Email" kind="email" @cx-input="onInput" />
+</template>
+```
+
+## Features
+
+- **Typed props** -- union-literal types for all component enums
+- **Typed emits** -- `@cx-click`, `@cx-change`, `@cx-input`, etc. with typed `detail`
+- **Template refs** -- `expose()`-based refs for imperative methods (`.open()`, `.close()`)
+- **Structured data** -- `SelectOption[]`, `TableColumn[]`, `AccordionItem[]` fully typed
+- **Ships compiled** -- `dist/` contains ready-to-use `.js` and `.d.ts` files
+
+## Volar Support
+
+For global type checking of `<cx-*>` tags in templates, add to your `tsconfig.json`:
+
+```json
+{
+  "compilerOptions": {
+    "types": ["@collet/vue/global"]
+  }
+}
+```
+
+This enables autocomplete and type checking on raw Custom Element tags alongside the Vue wrapper components.
+
+## Event Pattern
+
+Custom events use the `cx-` prefix. Vue's `@` shorthand works as expected:
+
+```vue
+<template>
+  <Select label="Country" :options="countries" @cx-change="setCountry" />
+</template>
+```
+
+## API Reference
+
+See [@collet/docs](https://www.npmjs.com/package/@collet/docs) for the full props/events reference and framework guides.
+
+## License
+
+MIT -- [github.com/Danrozen87/collet](https://github.com/Danrozen87/collet)

package/dist/accordion.d.ts

@@ -0,0 +1,68 @@
+import { type PropType } from 'vue';
+import type { AccordionDetail, AccordionItem } from './types.js';
+export declare const Accordion: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+    };
+    label: {
+        type: StringConstructor;
+    };
+    items: {
+        type: PropType<AccordionItem[] | string>;
+    };
+    mode: {
+        type: PropType<"single" | "multiple">;
+    };
+    collapsible: {
+        type: BooleanConstructor;
+    };
+    headingLevel: {
+        type: PropType<"h2" | "h3" | "h4" | "h5" | "h6">;
+    };
+    defaultExpanded: {
+        type: PropType<string[] | string>;
+    };
+    size: {
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
+    };
+    disabled: {
+        type: BooleanConstructor;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    'cx-change': (event: CustomEvent<AccordionDetail>) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+    };
+    label: {
+        type: StringConstructor;
+    };
+    items: {
+        type: PropType<AccordionItem[] | string>;
+    };
+    mode: {
+        type: PropType<"single" | "multiple">;
+    };
+    collapsible: {
+        type: BooleanConstructor;
+    };
+    headingLevel: {
+        type: PropType<"h2" | "h3" | "h4" | "h5" | "h6">;
+    };
+    defaultExpanded: {
+        type: PropType<string[] | string>;
+    };
+    size: {
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
+    };
+    disabled: {
+        type: BooleanConstructor;
+    };
+}>> & Readonly<{
+    "onCx-change"?: ((event: CustomEvent<AccordionDetail>) => any) | undefined;
+}>, {
+    collapsible: boolean;
+    disabled: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/accordion.js

@@ -0,0 +1,68 @@
+// Auto-generated by scripts/generate-vue.mjs — DO NOT EDIT
+// Vue 3 wrapper for <cx-accordion>
+import { defineComponent, ref, h, onMounted, watch } from 'vue';
+export const Accordion = defineComponent({
+    name: 'Accordion',
+    props: {
+        id: { type: String },
+        label: { type: String },
+        items: { type: [Array, Object, String] },
+        mode: { type: String },
+        collapsible: { type: Boolean },
+        headingLevel: { type: String },
+        defaultExpanded: { type: [Array, Object, String] },
+        size: { type: String },
+        disabled: { type: Boolean },
+    },
+    emits: {
+        'cx-change': (event) => true,
+    },
+    setup(props, { emit, slots, expose }) {
+        const el = ref(null);
+        const listeners = [];
+        onMounted(() => {
+            if (!el.value)
+                return;
+            watch(() => props.items, (val) => {
+                if (!el.value)
+                    return;
+                if (val != null)
+                    el.value.setAttribute('items', typeof val === 'object' ? JSON.stringify(val) : String(val));
+                else
+                    el.value.removeAttribute('items');
+            }, { immediate: true });
+            watch(() => props.defaultExpanded, (val) => {
+                if (!el.value)
+                    return;
+                if (val != null)
+                    el.value.setAttribute('default-expanded', typeof val === 'object' ? JSON.stringify(val) : String(val));
+                else
+                    el.value.removeAttribute('default-expanded');
+            }, { immediate: true });
+            // Event listeners
+            el.value.addEventListener('cx-change', (ev) => emit('cx-change', ev));
+        });
+        expose({
+            /** The underlying Custom Element. */
+            el,
+        });
+        return () => {
+            const attrs = {};
+            if (props.id != null)
+                attrs['id'] = typeof props.id === 'object' ? JSON.stringify(props.id) : String(props.id);
+            if (props.label != null)
+                attrs['label'] = typeof props.label === 'object' ? JSON.stringify(props.label) : String(props.label);
+            if (props.mode != null)
+                attrs['mode'] = typeof props.mode === 'object' ? JSON.stringify(props.mode) : String(props.mode);
+            if (props.collapsible)
+                attrs['collapsible'] = '';
+            if (props.headingLevel != null)
+                attrs['heading-level'] = typeof props.headingLevel === 'object' ? JSON.stringify(props.headingLevel) : String(props.headingLevel);
+            if (props.size != null)
+                attrs['size'] = typeof props.size === 'object' ? JSON.stringify(props.size) : String(props.size);
+            if (props.disabled)
+                attrs['disabled'] = '';
+            return h('cx-accordion', { ref: el, ...attrs });
+        };
+    },
+});

package/dist/activity-group.d.ts

@@ -0,0 +1,56 @@
+import { type PropType } from 'vue';
+export declare const ActivityGroup: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+    };
+    status: {
+        type: StringConstructor;
+    };
+    size: {
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
+    };
+    border: {
+        type: StringConstructor;
+    };
+    summary: {
+        type: StringConstructor;
+    };
+    action: {
+        type: StringConstructor;
+    };
+    expanded: {
+        type: BooleanConstructor;
+    };
+    parts: {
+        type: StringConstructor;
+    };
+}>, () => 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<{
+    id: {
+        type: StringConstructor;
+    };
+    status: {
+        type: StringConstructor;
+    };
+    size: {
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
+    };
+    border: {
+        type: StringConstructor;
+    };
+    summary: {
+        type: StringConstructor;
+    };
+    action: {
+        type: StringConstructor;
+    };
+    expanded: {
+        type: BooleanConstructor;
+    };
+    parts: {
+        type: StringConstructor;
+    };
+}>> & Readonly<{}>, {
+    expanded: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/activity-group.js

@@ -0,0 +1,50 @@
+// Auto-generated by scripts/generate-vue.mjs — DO NOT EDIT
+// Vue 3 wrapper for <cx-activity-group>
+import { defineComponent, ref, h, onMounted } from 'vue';
+export const ActivityGroup = defineComponent({
+    name: 'ActivityGroup',
+    props: {
+        id: { type: String },
+        status: { type: String },
+        size: { type: String },
+        border: { type: String },
+        summary: { type: String },
+        action: { type: String },
+        expanded: { type: Boolean },
+        parts: { type: String },
+    },
+    emits: {},
+    setup(props, { emit, slots, expose }) {
+        const el = ref(null);
+        const listeners = [];
+        onMounted(() => {
+            if (!el.value)
+                return;
+            // Event listeners
+        });
+        expose({
+            /** The underlying Custom Element. */
+            el,
+        });
+        return () => {
+            const attrs = {};
+            if (props.id != null)
+                attrs['id'] = typeof props.id === 'object' ? JSON.stringify(props.id) : String(props.id);
+            if (props.status != null)
+                attrs['status'] = typeof props.status === 'object' ? JSON.stringify(props.status) : String(props.status);
+            if (props.size != null)
+                attrs['size'] = typeof props.size === 'object' ? JSON.stringify(props.size) : String(props.size);
+            if (props.border != null)
+                attrs['border'] = typeof props.border === 'object' ? JSON.stringify(props.border) : String(props.border);
+            if (props.summary != null)
+                attrs['summary'] = typeof props.summary === 'object' ? JSON.stringify(props.summary) : String(props.summary);
+            if (props.action != null)
+                attrs['action'] = typeof props.action === 'object' ? JSON.stringify(props.action) : String(props.action);
+            if (props.expanded)
+                attrs['expanded'] = '';
+            if (props.parts != null)
+                attrs['parts'] = typeof props.parts === 'object' ? JSON.stringify(props.parts) : String(props.parts);
+            return h('cx-activity-group', { ref: el, ...attrs });
+        };
+    },
+});

package/dist/alert.d.ts

@@ -0,0 +1,94 @@
+import { type PropType } from 'vue';
+import type { DismissDetail } from './types.js';
+export declare const Alert: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+    };
+    title: {
+        type: StringConstructor;
+    };
+    description: {
+        type: StringConstructor;
+    };
+    variant: {
+        type: PropType<"subtle" | "filled" | "outline">;
+    };
+    intent: {
+        type: PropType<"neutral" | "primary" | "info" | "success" | "warning" | "danger">;
+    };
+    size: {
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
+    };
+    showIcon: {
+        type: BooleanConstructor;
+    };
+    icon: {
+        type: StringConstructor;
+    };
+    dismissible: {
+        type: BooleanConstructor;
+    };
+    dismissLabel: {
+        type: StringConstructor;
+    };
+    compact: {
+        type: BooleanConstructor;
+    };
+    dynamic: {
+        type: BooleanConstructor;
+    };
+    actionsHtml: {
+        type: StringConstructor;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    'cx-dismiss': (event: CustomEvent<DismissDetail>) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+    };
+    title: {
+        type: StringConstructor;
+    };
+    description: {
+        type: StringConstructor;
+    };
+    variant: {
+        type: PropType<"subtle" | "filled" | "outline">;
+    };
+    intent: {
+        type: PropType<"neutral" | "primary" | "info" | "success" | "warning" | "danger">;
+    };
+    size: {
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
+    };
+    showIcon: {
+        type: BooleanConstructor;
+    };
+    icon: {
+        type: StringConstructor;
+    };
+    dismissible: {
+        type: BooleanConstructor;
+    };
+    dismissLabel: {
+        type: StringConstructor;
+    };
+    compact: {
+        type: BooleanConstructor;
+    };
+    dynamic: {
+        type: BooleanConstructor;
+    };
+    actionsHtml: {
+        type: StringConstructor;
+    };
+}>> & Readonly<{
+    "onCx-dismiss"?: ((event: CustomEvent<DismissDetail>) => any) | undefined;
+}>, {
+    showIcon: boolean;
+    dismissible: boolean;
+    compact: boolean;
+    dynamic: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/alert.js

@@ -0,0 +1,76 @@
+// Auto-generated by scripts/generate-vue.mjs — DO NOT EDIT
+// Vue 3 wrapper for <cx-alert>
+import { defineComponent, ref, h, onMounted, watch } from 'vue';
+export const Alert = defineComponent({
+    name: 'Alert',
+    props: {
+        id: { type: String },
+        title: { type: String },
+        description: { type: String },
+        variant: { type: String },
+        intent: { type: String },
+        size: { type: String },
+        showIcon: { type: Boolean },
+        icon: { type: String },
+        dismissible: { type: Boolean },
+        dismissLabel: { type: String },
+        compact: { type: Boolean },
+        dynamic: { type: Boolean },
+        actionsHtml: { type: String },
+    },
+    emits: {
+        'cx-dismiss': (event) => true,
+    },
+    setup(props, { emit, slots, expose }) {
+        const el = ref(null);
+        const listeners = [];
+        onMounted(() => {
+            if (!el.value)
+                return;
+            watch(() => props.title, (val) => {
+                if (!el.value)
+                    return;
+                if (val != null)
+                    el.value.setAttribute('title', String(val));
+                else
+                    el.value.removeAttribute('title');
+            }, { immediate: true });
+            // Event listeners
+            el.value.addEventListener('cx-dismiss', (ev) => emit('cx-dismiss', ev));
+        });
+        expose({
+            /** The underlying Custom Element. */
+            el,
+        });
+        return () => {
+            const attrs = {};
+            if (props.id != null)
+                attrs['id'] = typeof props.id === 'object' ? JSON.stringify(props.id) : String(props.id);
+            if (props.description != null)
+                attrs['description'] = typeof props.description === 'object' ? JSON.stringify(props.description) : String(props.description);
+            if (props.variant != null)
+                attrs['variant'] = typeof props.variant === 'object' ? JSON.stringify(props.variant) : String(props.variant);
+            if (props.intent != null)
+                attrs['intent'] = typeof props.intent === 'object' ? JSON.stringify(props.intent) : String(props.intent);
+            if (props.size != null)
+                attrs['size'] = typeof props.size === 'object' ? JSON.stringify(props.size) : String(props.size);
+            if (props.showIcon)
+                attrs['show-icon'] = '';
+            if (props.icon != null)
+                attrs['icon'] = typeof props.icon === 'object' ? JSON.stringify(props.icon) : String(props.icon);
+            if (props.dismissible)
+                attrs['dismissible'] = '';
+            if (props.dismissLabel != null)
+                attrs['dismiss-label'] = typeof props.dismissLabel === 'object' ? JSON.stringify(props.dismissLabel) : String(props.dismissLabel);
+            if (props.compact)
+                attrs['compact'] = '';
+            if (props.dynamic)
+                attrs['dynamic'] = '';
+            if (props.actionsHtml != null)
+                attrs['actions-html'] = typeof props.actionsHtml === 'object' ? JSON.stringify(props.actionsHtml) : String(props.actionsHtml);
+            return h('cx-alert', { ref: el, ...attrs }, [
+                slots.actions ? h('div', { slot: 'actions', style: 'display:contents' }, slots.actions()) : undefined
+            ]);
+        };
+    },
+});

package/dist/autocomplete.d.ts

@@ -0,0 +1,161 @@
+import { type PropType } from 'vue';
+import type { FocusDetail, InputDetail, KeyboardDetail, OptionGroup, SelectDetail, SelectOption } from './types.js';
+export interface AutocompleteRef {
+    /** Opens the suggestion dropdown. */
+    open(): void;
+    /** Closes the suggestion dropdown. */
+    close(): void;
+    /** Clears all selections (multi-mode) or the input (single-mode). */
+    clear(): void;
+    /** Focuses the search input. */
+    focus(): void;
+    /** The underlying Custom Element. */
+    el: HTMLElement | null;
+}
+export declare const Autocomplete: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+    };
+    label: {
+        type: StringConstructor;
+    };
+    variant: {
+        type: PropType<"outline" | "filled" | "ghost">;
+    };
+    shape: {
+        type: PropType<"sharp" | "rounded" | "pill">;
+    };
+    size: {
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
+    };
+    /** 'single' for single select, 'multiple' for multi-select with chips. */
+    mode: {
+        type: PropType<"single" | "multiple">;
+    };
+    selected: {
+        type: PropType<string[] | string>;
+    };
+    /** Current search query text. Controlled by onInput events. */
+    query: {
+        type: StringConstructor;
+    };
+    placeholder: {
+        type: StringConstructor;
+    };
+    helperText: {
+        type: StringConstructor;
+    };
+    error: {
+        type: StringConstructor;
+    };
+    disabled: {
+        type: BooleanConstructor;
+    };
+    required: {
+        type: BooleanConstructor;
+    };
+    readonly: {
+        type: BooleanConstructor;
+    };
+    name: {
+        type: StringConstructor;
+    };
+    /** When true, user can submit values not in the items list. */
+    allowCustom: {
+        type: BooleanConstructor;
+    };
+    clearable: {
+        type: BooleanConstructor;
+    };
+    /** Options to filter from. Filtering is client-side (fuzzy substring match). For server-side search, update this array in your onInput handler. */
+    items: {
+        type: PropType<SelectOption[] | string>;
+    };
+    groups: {
+        type: PropType<OptionGroup[] | string>;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    'cx-input': (event: CustomEvent<InputDetail>) => true;
+    'cx-change': (event: CustomEvent<SelectDetail>) => true;
+    'cx-focus': (event: CustomEvent<FocusDetail>) => true;
+    'cx-blur': (event: CustomEvent<FocusDetail>) => true;
+    'cx-keydown': (event: CustomEvent<KeyboardDetail>) => true;
+    'cx-keyup': (event: CustomEvent<KeyboardDetail>) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+    };
+    label: {
+        type: StringConstructor;
+    };
+    variant: {
+        type: PropType<"outline" | "filled" | "ghost">;
+    };
+    shape: {
+        type: PropType<"sharp" | "rounded" | "pill">;
+    };
+    size: {
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
+    };
+    /** 'single' for single select, 'multiple' for multi-select with chips. */
+    mode: {
+        type: PropType<"single" | "multiple">;
+    };
+    selected: {
+        type: PropType<string[] | string>;
+    };
+    /** Current search query text. Controlled by onInput events. */
+    query: {
+        type: StringConstructor;
+    };
+    placeholder: {
+        type: StringConstructor;
+    };
+    helperText: {
+        type: StringConstructor;
+    };
+    error: {
+        type: StringConstructor;
+    };
+    disabled: {
+        type: BooleanConstructor;
+    };
+    required: {
+        type: BooleanConstructor;
+    };
+    readonly: {
+        type: BooleanConstructor;
+    };
+    name: {
+        type: StringConstructor;
+    };
+    /** When true, user can submit values not in the items list. */
+    allowCustom: {
+        type: BooleanConstructor;
+    };
+    clearable: {
+        type: BooleanConstructor;
+    };
+    /** Options to filter from. Filtering is client-side (fuzzy substring match). For server-side search, update this array in your onInput handler. */
+    items: {
+        type: PropType<SelectOption[] | string>;
+    };
+    groups: {
+        type: PropType<OptionGroup[] | string>;
+    };
+}>> & Readonly<{
+    "onCx-change"?: ((event: CustomEvent<SelectDetail>) => any) | undefined;
+    "onCx-input"?: ((event: CustomEvent<InputDetail>) => any) | undefined;
+    "onCx-focus"?: ((event: CustomEvent<FocusDetail>) => any) | undefined;
+    "onCx-blur"?: ((event: CustomEvent<FocusDetail>) => any) | undefined;
+    "onCx-keydown"?: ((event: CustomEvent<KeyboardDetail>) => any) | undefined;
+    "onCx-keyup"?: ((event: CustomEvent<KeyboardDetail>) => any) | undefined;
+}>, {
+    disabled: boolean;
+    required: boolean;
+    readonly: boolean;
+    allowCustom: boolean;
+    clearable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;