@colletdev/vue 0.1.3

package/dist/text-input.js

@@ -0,0 +1,134 @@
+// Auto-generated by scripts/generate-vue.mjs — DO NOT EDIT
+// Vue 3 wrapper for <cx-text-input>
+import { defineComponent, ref, h, onMounted, watch } from 'vue';
+export const TextInput = defineComponent({
+    name: 'TextInput',
+    props: {
+        id: { type: String },
+        label: { type: String },
+        variant: { type: String },
+        shape: { type: String },
+        size: { type: String },
+        /** Input type. Use 'multiline' for textarea behavior with optional rows and autoGrow. */
+        kind: { type: String },
+        placeholder: { type: String },
+        /** Controlled value. Set via onInput callback. */
+        value: { type: String },
+        helperText: { type: String },
+        error: { type: String },
+        disabled: { type: Boolean },
+        readonly: { type: Boolean },
+        required: { type: Boolean },
+        clearable: { type: Boolean },
+        prefixIcon: { type: String },
+        suffixIcon: { type: String },
+        passwordToggle: { type: Boolean },
+        passwordVisible: { type: Boolean },
+        name: { type: String },
+        minLength: { type: Number },
+        maxLength: { type: Number },
+        pattern: { type: String },
+        autocomplete: { type: String },
+        rows: { type: Number },
+        autoGrow: { type: Boolean },
+    },
+    emits: {
+        'cx-input': (event) => true,
+        'cx-change': (event) => true,
+        '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 });
+            watch(() => props.name, (val) => {
+                if (!el.value)
+                    return;
+                if (val != null)
+                    el.value.setAttribute('name', String(val));
+                else
+                    el.value.removeAttribute('name');
+            }, { immediate: true });
+            // Event listeners
+            el.value.addEventListener('cx-input', (ev) => emit('cx-input', ev));
+            el.value.addEventListener('cx-change', (ev) => emit('cx-change', ev));
+            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 inner input or textarea. */
+            focus() { el.value?.focus(); },
+            /** Blurs the inner input or textarea. */
+            blur() { el.value?.blur(); },
+            /** Selects all text in the input. */
+            select() { el.value?.select(); },
+            /** 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.kind != null)
+                attrs['kind'] = typeof props.kind === 'object' ? JSON.stringify(props.kind) : String(props.kind);
+            if (props.placeholder != null)
+                attrs['placeholder'] = typeof props.placeholder === 'object' ? JSON.stringify(props.placeholder) : String(props.placeholder);
+            if (props.helperText != null)
+                attrs['helper-text'] = typeof props.helperText === 'object' ? JSON.stringify(props.helperText) : String(props.helperText);
+            if (props.error != null)
+                attrs['error'] = typeof props.error === 'object' ? JSON.stringify(props.error) : String(props.error);
+            if (props.disabled)
+                attrs['disabled'] = '';
+            if (props.readonly)
+                attrs['readonly'] = '';
+            if (props.required)
+                attrs['required'] = '';
+            if (props.clearable)
+                attrs['clearable'] = '';
+            if (props.prefixIcon != null)
+                attrs['prefix-icon'] = typeof props.prefixIcon === 'object' ? JSON.stringify(props.prefixIcon) : String(props.prefixIcon);
+            if (props.suffixIcon != null)
+                attrs['suffix-icon'] = typeof props.suffixIcon === 'object' ? JSON.stringify(props.suffixIcon) : String(props.suffixIcon);
+            if (props.passwordToggle)
+                attrs['password-toggle'] = '';
+            if (props.passwordVisible)
+                attrs['password-visible'] = '';
+            if (props.minLength != null)
+                attrs['min-length'] = typeof props.minLength === 'object' ? JSON.stringify(props.minLength) : String(props.minLength);
+            if (props.maxLength != null)
+                attrs['max-length'] = typeof props.maxLength === 'object' ? JSON.stringify(props.maxLength) : String(props.maxLength);
+            if (props.pattern != null)
+                attrs['pattern'] = typeof props.pattern === 'object' ? JSON.stringify(props.pattern) : String(props.pattern);
+            if (props.autocomplete != null)
+                attrs['autocomplete'] = typeof props.autocomplete === 'object' ? JSON.stringify(props.autocomplete) : String(props.autocomplete);
+            if (props.rows != null)
+                attrs['rows'] = typeof props.rows === 'object' ? JSON.stringify(props.rows) : String(props.rows);
+            if (props.autoGrow)
+                attrs['auto-grow'] = '';
+            return h('cx-text-input', { ref: el, ...attrs });
+        };
+    },
+});

package/dist/text.d.ts

@@ -0,0 +1,99 @@
+import { type PropType } from 'vue';
+export declare const Text: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+    };
+    role: {
+        type: PropType<"display" | "h1" | "h2" | "h3" | "label-lg" | "label-md" | "label-sm" | "body-lg" | "body-md" | "body-sm" | "overline" | "caption" | "code">;
+    };
+    align: {
+        type: PropType<"start" | "center" | "end">;
+    };
+    color: {
+        type: PropType<"primary" | "inverse" | "muted">;
+    };
+    muted: {
+        type: BooleanConstructor;
+    };
+    strong: {
+        type: BooleanConstructor;
+    };
+    italic: {
+        type: BooleanConstructor;
+    };
+    underline: {
+        type: BooleanConstructor;
+    };
+    underlineStrong: {
+        type: BooleanConstructor;
+    };
+    truncate: {
+        type: BooleanConstructor;
+    };
+    lineClamp: {
+        type: NumberConstructor;
+    };
+    balance: {
+        type: BooleanConstructor;
+    };
+    prose: {
+        type: BooleanConstructor;
+    };
+    elementAs: {
+        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;
+    };
+    role: {
+        type: PropType<"display" | "h1" | "h2" | "h3" | "label-lg" | "label-md" | "label-sm" | "body-lg" | "body-md" | "body-sm" | "overline" | "caption" | "code">;
+    };
+    align: {
+        type: PropType<"start" | "center" | "end">;
+    };
+    color: {
+        type: PropType<"primary" | "inverse" | "muted">;
+    };
+    muted: {
+        type: BooleanConstructor;
+    };
+    strong: {
+        type: BooleanConstructor;
+    };
+    italic: {
+        type: BooleanConstructor;
+    };
+    underline: {
+        type: BooleanConstructor;
+    };
+    underlineStrong: {
+        type: BooleanConstructor;
+    };
+    truncate: {
+        type: BooleanConstructor;
+    };
+    lineClamp: {
+        type: NumberConstructor;
+    };
+    balance: {
+        type: BooleanConstructor;
+    };
+    prose: {
+        type: BooleanConstructor;
+    };
+    elementAs: {
+        type: StringConstructor;
+    };
+}>> & Readonly<{}>, {
+    strong: boolean;
+    underline: boolean;
+    muted: boolean;
+    italic: boolean;
+    underlineStrong: boolean;
+    truncate: boolean;
+    balance: boolean;
+    prose: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/text.js

@@ -0,0 +1,88 @@
+// Auto-generated by scripts/generate-vue.mjs — DO NOT EDIT
+// Vue 3 wrapper for <cx-text>
+import { defineComponent, ref, h, onMounted, watch } from 'vue';
+export const Text = defineComponent({
+    name: 'Text',
+    props: {
+        id: { type: String },
+        role: { type: String },
+        align: { type: String },
+        color: { type: String },
+        muted: { type: Boolean },
+        strong: { type: Boolean },
+        italic: { type: Boolean },
+        underline: { type: Boolean },
+        underlineStrong: { type: Boolean },
+        truncate: { type: Boolean },
+        lineClamp: { type: Number },
+        balance: { type: Boolean },
+        prose: { type: Boolean },
+        elementAs: { type: String },
+    },
+    emits: {},
+    setup(props, { emit, slots, expose }) {
+        const el = ref(null);
+        const listeners = [];
+        onMounted(() => {
+            if (!el.value)
+                return;
+            watch(() => props.role, (val) => {
+                if (!el.value)
+                    return;
+                if (val != null)
+                    el.value.setAttribute('role', String(val));
+                else
+                    el.value.removeAttribute('role');
+            }, { immediate: true });
+            watch(() => props.align, (val) => {
+                if (!el.value)
+                    return;
+                if (val != null)
+                    el.value.setAttribute('align', String(val));
+                else
+                    el.value.removeAttribute('align');
+            }, { immediate: true });
+            watch(() => props.color, (val) => {
+                if (!el.value)
+                    return;
+                if (val != null)
+                    el.value.setAttribute('color', String(val));
+                else
+                    el.value.removeAttribute('color');
+            }, { immediate: true });
+            // 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.muted)
+                attrs['muted'] = '';
+            if (props.strong)
+                attrs['strong'] = '';
+            if (props.italic)
+                attrs['italic'] = '';
+            if (props.underline)
+                attrs['underline'] = '';
+            if (props.underlineStrong)
+                attrs['underline-strong'] = '';
+            if (props.truncate)
+                attrs['truncate'] = '';
+            if (props.lineClamp != null)
+                attrs['line-clamp'] = typeof props.lineClamp === 'object' ? JSON.stringify(props.lineClamp) : String(props.lineClamp);
+            if (props.balance)
+                attrs['balance'] = '';
+            if (props.prose)
+                attrs['prose'] = '';
+            if (props.elementAs != null)
+                attrs['element-as'] = typeof props.elementAs === 'object' ? JSON.stringify(props.elementAs) : String(props.elementAs);
+            return h('cx-text', { ref: el, ...attrs }, [
+                slots.default?.()
+            ]);
+        };
+    },
+});

package/dist/thinking.d.ts

@@ -0,0 +1,42 @@
+import { type PropType } from 'vue';
+export declare const Thinking: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+    };
+    variant: {
+        type: PropType<"ghost" | "filled">;
+    };
+    shape: {
+        type: PropType<"sharp" | "rounded" | "pill">;
+    };
+    label: {
+        type: StringConstructor;
+    };
+    size: {
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
+    };
+    speed: {
+        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;
+    };
+    variant: {
+        type: PropType<"ghost" | "filled">;
+    };
+    shape: {
+        type: PropType<"sharp" | "rounded" | "pill">;
+    };
+    label: {
+        type: StringConstructor;
+    };
+    size: {
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
+    };
+    speed: {
+        type: StringConstructor;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/thinking.js

@@ -0,0 +1,44 @@
+// Auto-generated by scripts/generate-vue.mjs — DO NOT EDIT
+// Vue 3 wrapper for <cx-thinking>
+import { defineComponent, ref, h, onMounted } from 'vue';
+export const Thinking = defineComponent({
+    name: 'Thinking',
+    props: {
+        id: { type: String },
+        variant: { type: String },
+        shape: { type: String },
+        label: { type: String },
+        size: { type: String },
+        speed: { 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.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.label != null)
+                attrs['label'] = typeof props.label === 'object' ? JSON.stringify(props.label) : String(props.label);
+            if (props.size != null)
+                attrs['size'] = typeof props.size === 'object' ? JSON.stringify(props.size) : String(props.size);
+            if (props.speed != null)
+                attrs['speed'] = typeof props.speed === 'object' ? JSON.stringify(props.speed) : String(props.speed);
+            return h('cx-thinking', { ref: el, ...attrs });
+        };
+    },
+});

package/dist/toast.d.ts

@@ -0,0 +1,86 @@
+import { type PropType } from 'vue';
+import type { DismissDetail } from './types.js';
+export interface ToastRef {
+    /** Dismisses the toast with exit animation. */
+    dismiss(): void;
+    /** The underlying Custom Element. */
+    el: HTMLElement | null;
+}
+export declare const Toast: 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;
+    };
+    duration: {
+        type: NumberConstructor;
+    };
+}>, () => 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;
+    };
+    duration: {
+        type: NumberConstructor;
+    };
+}>> & Readonly<{
+    "onCx-dismiss"?: ((event: CustomEvent<DismissDetail>) => any) | undefined;
+}>, {
+    showIcon: boolean;
+    dismissible: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/toast.js

@@ -0,0 +1,72 @@
+// Auto-generated by scripts/generate-vue.mjs — DO NOT EDIT
+// Vue 3 wrapper for <cx-toast>
+import { defineComponent, ref, h, onMounted, watch } from 'vue';
+export const Toast = defineComponent({
+    name: 'Toast',
+    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 },
+        duration: { type: Number },
+    },
+    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({
+            /** Dismisses the toast with exit animation. */
+            dismiss() { el.value?.dismiss(); },
+            /** 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.duration != null)
+                attrs['duration'] = typeof props.duration === 'object' ? JSON.stringify(props.duration) : String(props.duration);
+            return h('cx-toast', { ref: el, ...attrs }, [
+                slots.action ? h('div', { slot: 'action', style: 'display:contents' }, slots.action()) : undefined
+            ]);
+        };
+    },
+});

package/dist/toggle-group.d.ts

@@ -0,0 +1,83 @@
+import { type PropType } from 'vue';
+import type { ToggleDetail, ToggleItem } from './types.js';
+export declare const ToggleGroup: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+    };
+    label: {
+        type: StringConstructor;
+    };
+    items: {
+        type: PropType<ToggleItem[] | string>;
+    };
+    variant: {
+        type: PropType<"outline" | "ghost" | "filled">;
+    };
+    shape: {
+        type: PropType<"sharp" | "rounded" | "pill">;
+    };
+    mode: {
+        type: PropType<"single" | "multiple">;
+    };
+    orientation: {
+        type: PropType<"horizontal" | "vertical">;
+    };
+    intent: {
+        type: PropType<"neutral" | "primary" | "info" | "success" | "warning" | "danger">;
+    };
+    size: {
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
+    };
+    disabled: {
+        type: BooleanConstructor;
+    };
+    /** Controlled pressed item IDs. Pass a single ID or an array. */
+    value: {
+        type: PropType<string | string[]>;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    'cx-input': (event: CustomEvent) => true;
+    'cx-change': (event: CustomEvent<ToggleDetail>) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+    };
+    label: {
+        type: StringConstructor;
+    };
+    items: {
+        type: PropType<ToggleItem[] | string>;
+    };
+    variant: {
+        type: PropType<"outline" | "ghost" | "filled">;
+    };
+    shape: {
+        type: PropType<"sharp" | "rounded" | "pill">;
+    };
+    mode: {
+        type: PropType<"single" | "multiple">;
+    };
+    orientation: {
+        type: PropType<"horizontal" | "vertical">;
+    };
+    intent: {
+        type: PropType<"neutral" | "primary" | "info" | "success" | "warning" | "danger">;
+    };
+    size: {
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
+    };
+    disabled: {
+        type: BooleanConstructor;
+    };
+    /** Controlled pressed item IDs. Pass a single ID or an array. */
+    value: {
+        type: PropType<string | string[]>;
+    };
+}>> & Readonly<{
+    "onCx-change"?: ((event: CustomEvent<ToggleDetail>) => any) | undefined;
+    "onCx-input"?: ((event: CustomEvent<any>) => any) | undefined;
+}>, {
+    disabled: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;