@colletdev/vue 0.1.3

package/dist/toggle-group.js

@@ -0,0 +1,77 @@
+// Auto-generated by scripts/generate-vue.mjs — DO NOT EDIT
+// Vue 3 wrapper for <cx-toggle-group>
+import { defineComponent, ref, h, onMounted, watch } from 'vue';
+export const ToggleGroup = defineComponent({
+    name: 'ToggleGroup',
+    props: {
+        id: { type: String },
+        label: { type: String },
+        items: { type: [Array, Object, String] },
+        variant: { type: String },
+        shape: { type: String },
+        mode: { type: String },
+        orientation: { type: String },
+        intent: { type: String },
+        size: { type: String },
+        disabled: { type: Boolean },
+        /** Controlled pressed item IDs. Pass a single ID or an array. */
+        value: { type: [Boolean, String, Array] },
+    },
+    emits: {
+        'cx-input': (event) => true,
+        'cx-change': (event) => true,
+    },
+    setup(props, { emit, slots, expose }) {
+        const el = ref(null);
+        const listeners = [];
+        onMounted(() => {
+            if (!el.value)
+                return;
+            watch(() => props.value, (val) => {
+                if (!el.value)
+                    return;
+                if (val != null)
+                    el.value.setAttribute('value', String(val));
+                else
+                    el.value.removeAttribute('value');
+            }, { immediate: true });
+            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 });
+            // Event listeners
+            el.value.addEventListener('cx-input', (ev) => emit('cx-input', ev));
+            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.variant != null)
+                attrs['variant'] = typeof props.variant === 'object' ? JSON.stringify(props.variant) : String(props.variant);
+            if (props.shape != null)
+                attrs['shape'] = typeof props.shape === 'object' ? JSON.stringify(props.shape) : String(props.shape);
+            if (props.mode != null)
+                attrs['mode'] = typeof props.mode === 'object' ? JSON.stringify(props.mode) : String(props.mode);
+            if (props.orientation != null)
+                attrs['orientation'] = typeof props.orientation === 'object' ? JSON.stringify(props.orientation) : String(props.orientation);
+            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.disabled)
+                attrs['disabled'] = '';
+            return h('cx-toggle-group', { ref: el, ...attrs });
+        };
+    },
+});

package/dist/tooltip.d.ts

@@ -0,0 +1,52 @@
+import { type PropType } from 'vue';
+export declare const Tooltip: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+    };
+    /** Tooltip text shown on hover/focus. Also serves as the accessible name. */
+    content: {
+        type: StringConstructor;
+    };
+    triggerHtml: {
+        type: StringConstructor;
+    };
+    position: {
+        type: PropType<"top" | "bottom" | "left" | "right">;
+    };
+    arrow: {
+        type: BooleanConstructor;
+    };
+    openDelay: {
+        type: NumberConstructor;
+    };
+    closeDelay: {
+        type: NumberConstructor;
+    };
+}>, () => 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;
+    };
+    /** Tooltip text shown on hover/focus. Also serves as the accessible name. */
+    content: {
+        type: StringConstructor;
+    };
+    triggerHtml: {
+        type: StringConstructor;
+    };
+    position: {
+        type: PropType<"top" | "bottom" | "left" | "right">;
+    };
+    arrow: {
+        type: BooleanConstructor;
+    };
+    openDelay: {
+        type: NumberConstructor;
+    };
+    closeDelay: {
+        type: NumberConstructor;
+    };
+}>> & Readonly<{}>, {
+    arrow: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/tooltip.js

@@ -0,0 +1,50 @@
+// Auto-generated by scripts/generate-vue.mjs — DO NOT EDIT
+// Vue 3 wrapper for <cx-tooltip>
+import { defineComponent, ref, h, onMounted } from 'vue';
+export const Tooltip = defineComponent({
+    name: 'Tooltip',
+    props: {
+        id: { type: String },
+        /** Tooltip text shown on hover/focus. Also serves as the accessible name. */
+        content: { type: String },
+        triggerHtml: { type: String },
+        position: { type: String },
+        arrow: { type: Boolean },
+        openDelay: { type: Number },
+        closeDelay: { type: Number },
+    },
+    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.content != null)
+                attrs['content'] = typeof props.content === 'object' ? JSON.stringify(props.content) : String(props.content);
+            if (props.triggerHtml != null)
+                attrs['trigger-html'] = typeof props.triggerHtml === 'object' ? JSON.stringify(props.triggerHtml) : String(props.triggerHtml);
+            if (props.position != null)
+                attrs['position'] = typeof props.position === 'object' ? JSON.stringify(props.position) : String(props.position);
+            if (props.arrow)
+                attrs['arrow'] = '';
+            if (props.openDelay != null)
+                attrs['open-delay'] = typeof props.openDelay === 'object' ? JSON.stringify(props.openDelay) : String(props.openDelay);
+            if (props.closeDelay != null)
+                attrs['close-delay'] = typeof props.closeDelay === 'object' ? JSON.stringify(props.closeDelay) : String(props.closeDelay);
+            return h('cx-tooltip', { ref: el, ...attrs }, [
+                (slots.trigger || slots.default) ? h('div', { slot: 'trigger', style: 'display:contents' }, slots.trigger ? slots.trigger() : slots.default?.()) : undefined
+            ]);
+        };
+    },
+});

package/dist/types.d.ts

@@ -0,0 +1,256 @@
+export interface SelectOption {
+    value: string;
+    label: string;
+    icon?: string;
+    description?: string;
+    disabled?: boolean;
+}
+export interface OptionGroup {
+    label: string;
+    options: SelectOption[];
+}
+export interface TabItem {
+    value: string;
+    label: string;
+    content?: string;
+    icon?: string;
+    disabled?: boolean;
+}
+export interface TableColumn {
+    id: string;
+    header: string;
+    sortable?: boolean;
+    width?: string;
+    align?: 'left' | 'center' | 'right';
+    visible?: boolean;
+    pinned?: 'left' | 'right';
+    resizable?: boolean;
+    sr_only?: boolean;
+    min_width?: string;
+    max_width?: string;
+}
+export interface TableCell {
+    text?: string;
+    html?: string;
+    number?: number;
+}
+export interface TableRow {
+    id: string;
+    cells: TableCell[] | Record<string, string | TableCell>;
+    disabled?: boolean;
+    detail?: string;
+    expanded?: boolean;
+}
+export interface SortState {
+    column_id: string;
+    direction: 'asc' | 'desc' | 'ascending' | 'descending';
+}
+export interface PaginationConfig {
+    current_page: number;
+    page_size: number;
+    total_items: number;
+    page_size_options?: number[];
+}
+export interface FooterRow {
+    cells: Record<string, string | TableCell>;
+}
+export interface EmptyStateConfig {
+    title?: string;
+    icon?: string;
+    description?: string;
+}
+export interface AccordionItem {
+    id: string;
+    trigger_label: string;
+    panel_content: string;
+    icon?: string;
+    description?: string;
+    disabled?: boolean;
+}
+export interface MenuRadioItem {
+    value: string;
+    label: string;
+    icon?: string;
+    disabled?: boolean;
+}
+export interface MenuEntry {
+    type: 'item' | 'checkbox' | 'radio-group' | 'separator' | 'label';
+    id?: string;
+    label?: string;
+    icon?: string;
+    shortcut?: string;
+    disabled?: boolean;
+    danger?: boolean;
+    intent?: string;
+    checked?: boolean;
+    value?: string;
+    items?: MenuRadioItem[];
+}
+export interface SidebarNavItem {
+    id: string;
+    label: string;
+    href?: string;
+    icon?: string;
+    badge?: string;
+    active?: boolean;
+    disabled?: boolean;
+}
+export interface SidebarGroup {
+    label?: string;
+    icon?: string;
+    items: SidebarNavItem[];
+    collapsible?: boolean;
+    expanded?: boolean;
+}
+export interface BreadcrumbItem {
+    label: string;
+    href?: string;
+    icon?: string;
+    current?: boolean;
+    ellipsis?: boolean;
+}
+export interface RadioOption {
+    value: string;
+    label: string;
+    description?: string;
+    disabled?: boolean;
+    icon?: string;
+}
+export interface ToggleItem {
+    id: string;
+    label: string;
+    icon?: string;
+    icon_only?: boolean;
+    pressed?: boolean;
+    disabled?: boolean;
+}
+export interface SplitMenuEntry {
+    type: 'item' | 'separator';
+    id?: string;
+    label?: string;
+    icon?: string;
+    shortcut?: string;
+    intent?: string;
+    disabled?: boolean;
+}
+export interface CarouselSlide {
+    image_url?: string;
+    title: string;
+    badge?: string;
+    badge_color?: string;
+    subtitle?: string;
+    href?: string;
+}
+export interface CarouselDetail {
+    index: number;
+    total: number;
+}
+export interface SpeedDialAction {
+    id: string;
+    icon: string;
+    label: string;
+    intent?: string;
+    disabled?: boolean;
+    handler?: string;
+}
+export interface MessageGroupPart {
+    id?: string;
+    kind: 'text' | 'tool-call' | 'tool-result' | 'thinking' | 'code-block' | 'error';
+    connection?: 'standalone' | 'first' | 'middle' | 'last';
+    content?: string;
+    html_content?: string;
+    tool_name?: string;
+    tool_arguments?: string;
+    tool_status?: 'pending' | 'success' | 'error';
+    collapsible?: boolean;
+    thinking_label?: string;
+    language?: string;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+}
+export interface StepperStep {
+    id: string;
+    label: string;
+    description?: string;
+    status?: 'pending' | 'active' | 'completed' | 'error' | 'loading';
+    disabled?: boolean;
+    optional?: boolean;
+}
+export interface InputDetail {
+    value: string;
+}
+export interface SelectDetail {
+    value: string;
+}
+export interface CheckedDetail {
+    checked: boolean;
+}
+export interface SliderDetail {
+    value: number;
+}
+export interface ToggleDetail {
+    pressed: string[];
+}
+export interface AccordionDetail {
+    expanded: string[];
+}
+export interface CollapsibleDetail {
+    open: boolean;
+}
+export interface MenuActionDetail {
+    id: string;
+    label?: string;
+}
+export interface MenuChangeDetail {
+    id: string;
+    checked?: boolean;
+    value?: string;
+}
+export interface SortDetail {
+    column_id: string;
+    direction: 'asc' | 'desc' | 'none';
+}
+export interface TableSelectDetail {
+    selected: string[];
+    row_id?: string;
+}
+export interface TableExpandDetail {
+    row_id: string;
+    expanded: boolean;
+}
+export interface PageDetail {
+    page: number;
+    page_size?: number;
+}
+export interface NavigateDetail {
+    href: string;
+    label: string;
+}
+export interface ClickDetail {
+    x?: number;
+    y?: number;
+}
+export interface FileChangeDetail {
+    files: FileInfo[];
+}
+export interface FileInfo {
+    name: string;
+    size: number;
+    type: string;
+}
+export interface CloseDetail {
+    reason?: 'escape' | 'backdrop' | 'close-button';
+}
+export interface DismissDetail {
+    reason?: 'user' | 'timeout';
+}
+export interface FocusDetail {
+    relatedTarget: EventTarget | null;
+}
+export interface KeyboardDetail {
+    key: string;
+    code: string;
+    shiftKey: boolean;
+    ctrlKey: boolean;
+    altKey: boolean;
+    metaKey: boolean;
+}

package/dist/types.js

@@ -0,0 +1,4 @@
+// Shared TypeScript interfaces for structured component props.
+// These mirror the Rust config structs in crates/wasm-api/src/*.rs.
+// Auto-generated by the framework wrapper generator — DO NOT EDIT.
+export {};

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@colletdev/vue",
+  "version": "0.1.3",
+  "description": "Vue 3 wrappers for Collet Rust/WASM UI components",
+  "type": "module",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./global": {
+      "types": "./dist/global.d.ts"
+    }
+  },
+  "files": [
+    "dist/"
+  ],
+  "peerDependencies": {
+    "@colletdev/core": ">=0.1.0",
+    "vue": ">=3.3.0"
+  },
+  "keywords": [
+    "vue",
+    "web-components",
+    "rust",
+    "wasm",
+    "ui"
+  ],
+  "author": "Dan",
+  "license": "MIT",
+  "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Danrozen87/collet",
+    "directory": "packages/vue"
+  },
+  "devDependencies": {
+    "typescript": "^5.9.3",
+    "vue": "^3.5.30"
+  }
+}