@colletdev/vue 0.1.3

package/dist/button.js

@@ -0,0 +1,68 @@
+// Auto-generated by scripts/generate-vue.mjs — DO NOT EDIT
+// Vue 3 wrapper for <cx-button>
+import { defineComponent, ref, h, onMounted } from 'vue';
+export const Button = defineComponent({
+    name: 'Button',
+    props: {
+        label: { type: String },
+        variant: { type: String },
+        intent: { type: String },
+        shape: { type: String },
+        size: { type: String },
+        disabled: { type: Boolean },
+        iconLeading: { type: String },
+        iconTrailing: { type: String },
+        iconOnly: { type: String },
+        ariaLabel: { type: String },
+        kind: { type: String },
+        pressed: { type: Boolean },
+        href: { type: String },
+    },
+    emits: {
+        'cx-click': (event) => true,
+    },
+    setup(props, { emit, slots, expose }) {
+        const el = ref(null);
+        const listeners = [];
+        onMounted(() => {
+            if (!el.value)
+                return;
+            // Event listeners
+            el.value.addEventListener('cx-click', (ev) => emit('cx-click', ev));
+        });
+        expose({
+            /** The underlying Custom Element. */
+            el,
+        });
+        return () => {
+            const attrs = {};
+            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.intent != null)
+                attrs['intent'] = typeof props.intent === 'object' ? JSON.stringify(props.intent) : String(props.intent);
+            if (props.shape != null)
+                attrs['shape'] = typeof props.shape === 'object' ? JSON.stringify(props.shape) : String(props.shape);
+            if (props.size != null)
+                attrs['size'] = typeof props.size === 'object' ? JSON.stringify(props.size) : String(props.size);
+            if (props.disabled)
+                attrs['disabled'] = '';
+            if (props.iconLeading != null)
+                attrs['icon-leading'] = typeof props.iconLeading === 'object' ? JSON.stringify(props.iconLeading) : String(props.iconLeading);
+            if (props.iconTrailing != null)
+                attrs['icon-trailing'] = typeof props.iconTrailing === 'object' ? JSON.stringify(props.iconTrailing) : String(props.iconTrailing);
+            if (props.iconOnly != null)
+                attrs['icon-only'] = typeof props.iconOnly === 'object' ? JSON.stringify(props.iconOnly) : String(props.iconOnly);
+            if (props.ariaLabel != null)
+                attrs['aria-label'] = typeof props.ariaLabel === 'object' ? JSON.stringify(props.ariaLabel) : String(props.ariaLabel);
+            if (props.kind != null)
+                attrs['kind'] = typeof props.kind === 'object' ? JSON.stringify(props.kind) : String(props.kind);
+            if (props.pressed)
+                attrs['pressed'] = '';
+            if (props.href != null)
+                attrs['href'] = typeof props.href === 'object' ? JSON.stringify(props.href) : String(props.href);
+            return h('cx-button', { ref: el, ...attrs });
+        };
+    },
+});

package/dist/card.d.ts

@@ -0,0 +1,60 @@
+import { type PropType } from 'vue';
+import type { ClickDetail, KeyboardDetail } from './types.js';
+export declare const Card: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+    };
+    label: {
+        type: StringConstructor;
+    };
+    variant: {
+        type: PropType<"elevated" | "outlined" | "filled">;
+    };
+    shape: {
+        type: PropType<"rounded" | "sharp" | "soft">;
+    };
+    size: {
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
+    };
+    clickable: {
+        type: BooleanConstructor;
+    };
+    texture: {
+        type: BooleanConstructor;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    'cx-click': (event: CustomEvent<ClickDetail>) => 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<"elevated" | "outlined" | "filled">;
+    };
+    shape: {
+        type: PropType<"rounded" | "sharp" | "soft">;
+    };
+    size: {
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
+    };
+    clickable: {
+        type: BooleanConstructor;
+    };
+    texture: {
+        type: BooleanConstructor;
+    };
+}>> & Readonly<{
+    "onCx-keydown"?: ((event: CustomEvent<KeyboardDetail>) => any) | undefined;
+    "onCx-keyup"?: ((event: CustomEvent<KeyboardDetail>) => any) | undefined;
+    "onCx-click"?: ((event: CustomEvent<ClickDetail>) => any) | undefined;
+}>, {
+    clickable: boolean;
+    texture: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/card.js

@@ -0,0 +1,58 @@
+// Auto-generated by scripts/generate-vue.mjs — DO NOT EDIT
+// Vue 3 wrapper for <cx-card>
+import { defineComponent, ref, h, onMounted } from 'vue';
+export const Card = defineComponent({
+    name: 'Card',
+    props: {
+        id: { type: String },
+        label: { type: String },
+        variant: { type: String },
+        shape: { type: String },
+        size: { type: String },
+        clickable: { type: Boolean },
+        texture: { type: Boolean },
+    },
+    emits: {
+        'cx-click': (event) => true,
+        'cx-keydown': (event) => true,
+        'cx-keyup': (event) => true,
+    },
+    setup(props, { emit, slots, expose }) {
+        const el = ref(null);
+        const listeners = [];
+        onMounted(() => {
+            if (!el.value)
+                return;
+            // Event listeners
+            el.value.addEventListener('cx-click', (ev) => emit('cx-click', ev));
+            el.value.addEventListener('cx-keydown', (ev) => emit('cx-keydown', ev));
+            el.value.addEventListener('cx-keyup', (ev) => emit('cx-keyup', 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.size != null)
+                attrs['size'] = typeof props.size === 'object' ? JSON.stringify(props.size) : String(props.size);
+            if (props.clickable)
+                attrs['clickable'] = '';
+            if (props.texture)
+                attrs['texture'] = '';
+            return h('cx-card', { ref: el, ...attrs }, [
+                slots.header ? h('div', { slot: 'header', style: 'display:contents' }, slots.header()) : undefined,
+                slots.footer ? h('div', { slot: 'footer', style: 'display:contents' }, slots.footer()) : undefined,
+                slots.default?.()
+            ]);
+        };
+    },
+});

package/dist/carousel.d.ts

@@ -0,0 +1,97 @@
+import { type PropType } from 'vue';
+import type { CarouselDetail, CarouselSlide } from './types.js';
+export interface CarouselRef {
+    /** Advances to the next slide. */
+    next(): void;
+    /** Returns to the previous slide. */
+    prev(): void;
+    /** Navigates to the slide at the given index. */
+    goTo(index: number): void;
+    /** The underlying Custom Element. */
+    el: HTMLElement | null;
+}
+export declare const Carousel: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+    };
+    label: {
+        type: StringConstructor;
+    };
+    variant: {
+        type: PropType<"editorial" | "card">;
+    };
+    shape: {
+        type: PropType<"sharp" | "rounded">;
+    };
+    size: {
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
+    };
+    slides: {
+        type: PropType<CarouselSlide[] | string>;
+    };
+    autoplay: {
+        type: PropType<"off" | "on">;
+    };
+    autoplayInterval: {
+        type: NumberConstructor;
+    };
+    loopMode: {
+        type: BooleanConstructor;
+    };
+    motionBlur: {
+        type: BooleanConstructor;
+    };
+    customCursor: {
+        type: BooleanConstructor;
+    };
+    indicator: {
+        type: StringConstructor;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    'cx-change': (event: CustomEvent<CarouselDetail>) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+    };
+    label: {
+        type: StringConstructor;
+    };
+    variant: {
+        type: PropType<"editorial" | "card">;
+    };
+    shape: {
+        type: PropType<"sharp" | "rounded">;
+    };
+    size: {
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
+    };
+    slides: {
+        type: PropType<CarouselSlide[] | string>;
+    };
+    autoplay: {
+        type: PropType<"off" | "on">;
+    };
+    autoplayInterval: {
+        type: NumberConstructor;
+    };
+    loopMode: {
+        type: BooleanConstructor;
+    };
+    motionBlur: {
+        type: BooleanConstructor;
+    };
+    customCursor: {
+        type: BooleanConstructor;
+    };
+    indicator: {
+        type: StringConstructor;
+    };
+}>> & Readonly<{
+    "onCx-change"?: ((event: CustomEvent<CarouselDetail>) => any) | undefined;
+}>, {
+    loopMode: boolean;
+    motionBlur: boolean;
+    customCursor: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/carousel.js

@@ -0,0 +1,77 @@
+// Auto-generated by scripts/generate-vue.mjs — DO NOT EDIT
+// Vue 3 wrapper for <cx-carousel>
+import { defineComponent, ref, h, onMounted, watch } from 'vue';
+export const Carousel = defineComponent({
+    name: 'Carousel',
+    props: {
+        id: { type: String },
+        label: { type: String },
+        variant: { type: String },
+        shape: { type: String },
+        size: { type: String },
+        slides: { type: [Array, Object, String] },
+        autoplay: { type: String },
+        autoplayInterval: { type: Number },
+        loopMode: { type: Boolean },
+        motionBlur: { type: Boolean },
+        customCursor: { type: Boolean },
+        indicator: { type: String },
+    },
+    emits: {
+        'cx-change': (event) => true,
+    },
+    setup(props, { emit, slots, expose }) {
+        const el = ref(null);
+        const listeners = [];
+        onMounted(() => {
+            if (!el.value)
+                return;
+            watch(() => props.slides, (val) => {
+                if (!el.value)
+                    return;
+                if (val != null)
+                    el.value.setAttribute('slides', typeof val === 'object' ? JSON.stringify(val) : String(val));
+                else
+                    el.value.removeAttribute('slides');
+            }, { immediate: true });
+            // Event listeners
+            el.value.addEventListener('cx-change', (ev) => emit('cx-change', ev));
+        });
+        expose({
+            /** Advances to the next slide. */
+            next() { el.value?.next(); },
+            /** Returns to the previous slide. */
+            prev() { el.value?.prev(); },
+            /** Navigates to the slide at the given index. */
+            goTo(index) { el.value?.goTo(index); },
+            /** 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.size != null)
+                attrs['size'] = typeof props.size === 'object' ? JSON.stringify(props.size) : String(props.size);
+            if (props.autoplay != null)
+                attrs['autoplay'] = typeof props.autoplay === 'object' ? JSON.stringify(props.autoplay) : String(props.autoplay);
+            if (props.autoplayInterval != null)
+                attrs['autoplay-interval'] = typeof props.autoplayInterval === 'object' ? JSON.stringify(props.autoplayInterval) : String(props.autoplayInterval);
+            if (props.loopMode)
+                attrs['loop-mode'] = '';
+            if (props.motionBlur)
+                attrs['motion-blur'] = '';
+            if (props.customCursor)
+                attrs['custom-cursor'] = '';
+            if (props.indicator != null)
+                attrs['indicator'] = typeof props.indicator === 'object' ? JSON.stringify(props.indicator) : String(props.indicator);
+            return h('cx-carousel', { ref: el, ...attrs });
+        };
+    },
+});

package/dist/chat-input.d.ts

@@ -0,0 +1,99 @@
+import { type PropType } from 'vue';
+import type { FocusDetail, KeyboardDetail } from './types.js';
+export interface ChatInputRef {
+    /** Focuses the textarea. */
+    focus(): void;
+    /** The underlying Custom Element. */
+    el: HTMLElement | null;
+}
+export declare const ChatInput: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+    };
+    shape: {
+        type: PropType<"sharp" | "rounded" | "pill">;
+    };
+    size: {
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
+    };
+    placeholder: {
+        type: StringConstructor;
+    };
+    value: {
+        type: StringConstructor;
+    };
+    disabled: {
+        type: BooleanConstructor;
+    };
+    maxRows: {
+        type: NumberConstructor;
+    };
+    showActionButton: {
+        type: BooleanConstructor;
+    };
+    actionLabel: {
+        type: StringConstructor;
+    };
+    submitLabel: {
+        type: StringConstructor;
+    };
+    label: {
+        type: StringConstructor;
+    };
+    slotted: {
+        type: BooleanConstructor;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    '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;
+    };
+    shape: {
+        type: PropType<"sharp" | "rounded" | "pill">;
+    };
+    size: {
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
+    };
+    placeholder: {
+        type: StringConstructor;
+    };
+    value: {
+        type: StringConstructor;
+    };
+    disabled: {
+        type: BooleanConstructor;
+    };
+    maxRows: {
+        type: NumberConstructor;
+    };
+    showActionButton: {
+        type: BooleanConstructor;
+    };
+    actionLabel: {
+        type: StringConstructor;
+    };
+    submitLabel: {
+        type: StringConstructor;
+    };
+    label: {
+        type: StringConstructor;
+    };
+    slotted: {
+        type: BooleanConstructor;
+    };
+}>> & Readonly<{
+    "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;
+    showActionButton: boolean;
+    slotted: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/chat-input.js

@@ -0,0 +1,79 @@
+// Auto-generated by scripts/generate-vue.mjs — DO NOT EDIT
+// Vue 3 wrapper for <cx-chat-input>
+import { defineComponent, ref, h, onMounted, watch } from 'vue';
+export const ChatInput = defineComponent({
+    name: 'ChatInput',
+    props: {
+        id: { type: String },
+        shape: { type: String },
+        size: { type: String },
+        placeholder: { type: String },
+        value: { type: String },
+        disabled: { type: Boolean },
+        maxRows: { type: Number },
+        showActionButton: { type: Boolean },
+        actionLabel: { type: String },
+        submitLabel: { type: String },
+        label: { type: String },
+        slotted: { type: Boolean },
+    },
+    emits: {
+        'cx-focus': (event) => true,
+        'cx-blur': (event) => true,
+        'cx-keydown': (event) => true,
+        'cx-keyup': (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 });
+            // Event listeners
+            el.value.addEventListener('cx-focus', (ev) => emit('cx-focus', ev));
+            el.value.addEventListener('cx-blur', (ev) => emit('cx-blur', ev));
+            el.value.addEventListener('cx-keydown', (ev) => emit('cx-keydown', ev));
+            el.value.addEventListener('cx-keyup', (ev) => emit('cx-keyup', ev));
+        });
+        expose({
+            /** Focuses the textarea. */
+            focus() { el.value?.focus(); },
+            /** 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.shape != null)
+                attrs['shape'] = typeof props.shape === 'object' ? JSON.stringify(props.shape) : String(props.shape);
+            if (props.size != null)
+                attrs['size'] = typeof props.size === 'object' ? JSON.stringify(props.size) : String(props.size);
+            if (props.placeholder != null)
+                attrs['placeholder'] = typeof props.placeholder === 'object' ? JSON.stringify(props.placeholder) : String(props.placeholder);
+            if (props.disabled)
+                attrs['disabled'] = '';
+            if (props.maxRows != null)
+                attrs['max-rows'] = typeof props.maxRows === 'object' ? JSON.stringify(props.maxRows) : String(props.maxRows);
+            if (props.showActionButton)
+                attrs['show-action-button'] = '';
+            if (props.actionLabel != null)
+                attrs['action-label'] = typeof props.actionLabel === 'object' ? JSON.stringify(props.actionLabel) : String(props.actionLabel);
+            if (props.submitLabel != null)
+                attrs['submit-label'] = typeof props.submitLabel === 'object' ? JSON.stringify(props.submitLabel) : String(props.submitLabel);
+            if (props.label != null)
+                attrs['label'] = typeof props.label === 'object' ? JSON.stringify(props.label) : String(props.label);
+            if (props.slotted)
+                attrs['slotted'] = '';
+            return h('cx-chat-input', { ref: el, ...attrs });
+        };
+    },
+});

package/dist/checkbox.d.ts

@@ -0,0 +1,93 @@
+import { type PropType } from 'vue';
+import type { CheckedDetail, FocusDetail, KeyboardDetail } from './types.js';
+export interface CheckboxRef {
+    /** Focuses the checkbox input. */
+    focus(): void;
+    /** The underlying Custom Element. */
+    el: HTMLElement | null;
+}
+export declare const Checkbox: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+    };
+    label: {
+        type: StringConstructor;
+    };
+    shape: {
+        type: PropType<"sharp" | "rounded">;
+    };
+    size: {
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
+    };
+    /** Three-state check. Accepts true/false as aliases for 'checked'/unchecked, and keeps 'indeterminate' for the third state. */
+    checked: {
+        type: PropType<boolean | "" | "checked" | "indeterminate">;
+    };
+    disabled: {
+        type: BooleanConstructor;
+    };
+    required: {
+        type: BooleanConstructor;
+    };
+    helperText: {
+        type: StringConstructor;
+    };
+    error: {
+        type: StringConstructor;
+    };
+    unlabeled: {
+        type: BooleanConstructor;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    'cx-input': (event: CustomEvent<CheckedDetail>) => true;
+    'cx-change': (event: CustomEvent<CheckedDetail>) => 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;
+    };
+    shape: {
+        type: PropType<"sharp" | "rounded">;
+    };
+    size: {
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
+    };
+    /** Three-state check. Accepts true/false as aliases for 'checked'/unchecked, and keeps 'indeterminate' for the third state. */
+    checked: {
+        type: PropType<boolean | "" | "checked" | "indeterminate">;
+    };
+    disabled: {
+        type: BooleanConstructor;
+    };
+    required: {
+        type: BooleanConstructor;
+    };
+    helperText: {
+        type: StringConstructor;
+    };
+    error: {
+        type: StringConstructor;
+    };
+    unlabeled: {
+        type: BooleanConstructor;
+    };
+}>> & Readonly<{
+    "onCx-change"?: ((event: CustomEvent<CheckedDetail>) => any) | undefined;
+    "onCx-input"?: ((event: CustomEvent<CheckedDetail>) => 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;
+    unlabeled: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;