@colletdev/vue 0.1.3

package/dist/autocomplete.js

@@ -0,0 +1,132 @@
+// Auto-generated by scripts/generate-vue.mjs — DO NOT EDIT
+// Vue 3 wrapper for <cx-autocomplete>
+import { defineComponent, ref, h, onMounted, watch } from 'vue';
+export const Autocomplete = defineComponent({
+    name: 'Autocomplete',
+    props: {
+        id: { type: String },
+        label: { type: String },
+        variant: { type: String },
+        shape: { type: String },
+        size: { type: String },
+        /** 'single' for single select, 'multiple' for multi-select with chips. */
+        mode: { type: String },
+        selected: { type: [Array, Object, String] },
+        /** Current search query text. Controlled by onInput events. */
+        query: { type: String },
+        placeholder: { type: String },
+        helperText: { type: String },
+        error: { type: String },
+        disabled: { type: Boolean },
+        required: { type: Boolean },
+        readonly: { type: Boolean },
+        name: { type: String },
+        /** When true, user can submit values not in the items list. */
+        allowCustom: { type: Boolean },
+        clearable: { type: Boolean },
+        /** Options to filter from. Filtering is client-side (fuzzy substring match). For server-side search, update this array in your onInput handler. */
+        items: { type: [Array, Object, String] },
+        groups: { type: [Array, Object, String] },
+    },
+    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.name, (val) => {
+                if (!el.value)
+                    return;
+                if (val != null)
+                    el.value.setAttribute('name', String(val));
+                else
+                    el.value.removeAttribute('name');
+            }, { immediate: true });
+            watch(() => props.selected, (val) => {
+                if (!el.value)
+                    return;
+                if (val != null)
+                    el.value.setAttribute('selected', typeof val === 'object' ? JSON.stringify(val) : String(val));
+                else
+                    el.value.removeAttribute('selected');
+            }, { 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 });
+            watch(() => props.groups, (val) => {
+                if (!el.value)
+                    return;
+                if (val != null)
+                    el.value.setAttribute('groups', typeof val === 'object' ? JSON.stringify(val) : String(val));
+                else
+                    el.value.removeAttribute('groups');
+            }, { 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({
+            /** Opens the suggestion dropdown. */
+            open() { el.value?.open(); },
+            /** Closes the suggestion dropdown. */
+            close() { el.value?.close(); },
+            /** Clears all selections (multi-mode) or the input (single-mode). */
+            clear() { el.value?.clear(); },
+            /** Focuses the search input. */
+            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.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.mode != null)
+                attrs['mode'] = typeof props.mode === 'object' ? JSON.stringify(props.mode) : String(props.mode);
+            if (props.query != null)
+                attrs['query'] = typeof props.query === 'object' ? JSON.stringify(props.query) : String(props.query);
+            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.required)
+                attrs['required'] = '';
+            if (props.readonly)
+                attrs['readonly'] = '';
+            if (props.allowCustom)
+                attrs['allow-custom'] = '';
+            if (props.clearable)
+                attrs['clearable'] = '';
+            return h('cx-autocomplete', { ref: el, ...attrs });
+        };
+    },
+});

package/dist/avatar.d.ts

@@ -0,0 +1,50 @@
+import { type PropType } from 'vue';
+export declare const Avatar: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+    };
+    label: {
+        type: StringConstructor;
+    };
+    shape: {
+        type: PropType<"circle" | "rounded">;
+    };
+    size: {
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
+    };
+    image: {
+        type: StringConstructor;
+    };
+    initials: {
+        type: StringConstructor;
+    };
+    clickable: {
+        type: 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<{
+    id: {
+        type: StringConstructor;
+    };
+    label: {
+        type: StringConstructor;
+    };
+    shape: {
+        type: PropType<"circle" | "rounded">;
+    };
+    size: {
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
+    };
+    image: {
+        type: StringConstructor;
+    };
+    initials: {
+        type: StringConstructor;
+    };
+    clickable: {
+        type: BooleanConstructor;
+    };
+}>> & Readonly<{}>, {
+    clickable: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/avatar.js

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

package/dist/backdrop.d.ts

@@ -0,0 +1,25 @@
+export declare const Backdrop: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    tint: {
+        type: StringConstructor;
+    };
+    blur: {
+        type: StringConstructor;
+    };
+    dismissible: {
+        type: 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<{
+    tint: {
+        type: StringConstructor;
+    };
+    blur: {
+        type: StringConstructor;
+    };
+    dismissible: {
+        type: BooleanConstructor;
+    };
+}>> & Readonly<{}>, {
+    dismissible: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/backdrop.js

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

package/dist/badge.d.ts

@@ -0,0 +1,74 @@
+import { type PropType } from 'vue';
+export declare const Badge: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+    };
+    label: {
+        type: StringConstructor;
+    };
+    variant: {
+        type: PropType<"filled" | "outline" | "ghost">;
+    };
+    intent: {
+        type: PropType<"neutral" | "primary" | "info" | "success" | "warning" | "danger">;
+    };
+    shape: {
+        type: PropType<"rounded" | "pill">;
+    };
+    size: {
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
+    };
+    dot: {
+        type: BooleanConstructor;
+    };
+    dismissible: {
+        type: BooleanConstructor;
+    };
+    dismissLabel: {
+        type: StringConstructor;
+    };
+    dynamic: {
+        type: BooleanConstructor;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    'cx-dismiss': (event: CustomEvent) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+    };
+    label: {
+        type: StringConstructor;
+    };
+    variant: {
+        type: PropType<"filled" | "outline" | "ghost">;
+    };
+    intent: {
+        type: PropType<"neutral" | "primary" | "info" | "success" | "warning" | "danger">;
+    };
+    shape: {
+        type: PropType<"rounded" | "pill">;
+    };
+    size: {
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
+    };
+    dot: {
+        type: BooleanConstructor;
+    };
+    dismissible: {
+        type: BooleanConstructor;
+    };
+    dismissLabel: {
+        type: StringConstructor;
+    };
+    dynamic: {
+        type: BooleanConstructor;
+    };
+}>> & Readonly<{
+    "onCx-dismiss"?: ((event: CustomEvent<any>) => any) | undefined;
+}>, {
+    dismissible: boolean;
+    dynamic: boolean;
+    dot: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/badge.js

@@ -0,0 +1,59 @@
+// Auto-generated by scripts/generate-vue.mjs — DO NOT EDIT
+// Vue 3 wrapper for <cx-badge>
+import { defineComponent, ref, h, onMounted } from 'vue';
+export const Badge = defineComponent({
+    name: 'Badge',
+    props: {
+        id: { type: String },
+        label: { type: String },
+        variant: { type: String },
+        intent: { type: String },
+        shape: { type: String },
+        size: { type: String },
+        dot: { type: Boolean },
+        dismissible: { type: Boolean },
+        dismissLabel: { type: String },
+        dynamic: { type: Boolean },
+    },
+    emits: {
+        'cx-dismiss': (event) => true,
+    },
+    setup(props, { emit, slots, expose }) {
+        const el = ref(null);
+        const listeners = [];
+        onMounted(() => {
+            if (!el.value)
+                return;
+            // 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.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.dot)
+                attrs['dot'] = '';
+            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.dynamic)
+                attrs['dynamic'] = '';
+            return h('cx-badge', { ref: el, ...attrs });
+        };
+    },
+});

package/dist/breadcrumb.d.ts

@@ -0,0 +1,49 @@
+import { type PropType } from 'vue';
+import type { BreadcrumbItem, NavigateDetail } from './types.js';
+export declare const Breadcrumb: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+    };
+    items: {
+        type: PropType<BreadcrumbItem[] | string>;
+    };
+    separator: {
+        type: StringConstructor;
+    };
+    size: {
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
+    };
+    navLabel: {
+        type: StringConstructor;
+    };
+    disabled: {
+        type: BooleanConstructor;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    'cx-navigate': (event: CustomEvent<NavigateDetail>) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+    };
+    items: {
+        type: PropType<BreadcrumbItem[] | string>;
+    };
+    separator: {
+        type: StringConstructor;
+    };
+    size: {
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
+    };
+    navLabel: {
+        type: StringConstructor;
+    };
+    disabled: {
+        type: BooleanConstructor;
+    };
+}>> & Readonly<{
+    "onCx-navigate"?: ((event: CustomEvent<NavigateDetail>) => any) | undefined;
+}>, {
+    disabled: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/breadcrumb.js

@@ -0,0 +1,53 @@
+// Auto-generated by scripts/generate-vue.mjs — DO NOT EDIT
+// Vue 3 wrapper for <cx-breadcrumb>
+import { defineComponent, ref, h, onMounted, watch } from 'vue';
+export const Breadcrumb = defineComponent({
+    name: 'Breadcrumb',
+    props: {
+        id: { type: String },
+        items: { type: [Array, Object, String] },
+        separator: { type: String },
+        size: { type: String },
+        navLabel: { type: String },
+        disabled: { type: Boolean },
+    },
+    emits: {
+        'cx-navigate': (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 });
+            // Event listeners
+            el.value.addEventListener('cx-navigate', (ev) => emit('cx-navigate', 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.separator != null)
+                attrs['separator'] = typeof props.separator === 'object' ? JSON.stringify(props.separator) : String(props.separator);
+            if (props.size != null)
+                attrs['size'] = typeof props.size === 'object' ? JSON.stringify(props.size) : String(props.size);
+            if (props.navLabel != null)
+                attrs['nav-label'] = typeof props.navLabel === 'object' ? JSON.stringify(props.navLabel) : String(props.navLabel);
+            if (props.disabled)
+                attrs['disabled'] = '';
+            return h('cx-breadcrumb', { ref: el, ...attrs });
+        };
+    },
+});

package/dist/button.d.ts

@@ -0,0 +1,92 @@
+import { type PropType } from 'vue';
+import type { ClickDetail } from './types.js';
+export declare const Button: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    label: {
+        type: StringConstructor;
+    };
+    variant: {
+        type: PropType<"filled" | "ghost" | "outline" | "underline" | "side-indicator">;
+    };
+    intent: {
+        type: PropType<"neutral" | "primary" | "info" | "success" | "warning" | "danger">;
+    };
+    shape: {
+        type: PropType<"sharp" | "rounded" | "pill">;
+    };
+    size: {
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
+    };
+    disabled: {
+        type: BooleanConstructor;
+    };
+    iconLeading: {
+        type: StringConstructor;
+    };
+    iconTrailing: {
+        type: StringConstructor;
+    };
+    iconOnly: {
+        type: StringConstructor;
+    };
+    ariaLabel: {
+        type: StringConstructor;
+    };
+    kind: {
+        type: PropType<"button" | "submit" | "toggle" | "link">;
+    };
+    pressed: {
+        type: BooleanConstructor;
+    };
+    href: {
+        type: StringConstructor;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    'cx-click': (event: CustomEvent<ClickDetail>) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    label: {
+        type: StringConstructor;
+    };
+    variant: {
+        type: PropType<"filled" | "ghost" | "outline" | "underline" | "side-indicator">;
+    };
+    intent: {
+        type: PropType<"neutral" | "primary" | "info" | "success" | "warning" | "danger">;
+    };
+    shape: {
+        type: PropType<"sharp" | "rounded" | "pill">;
+    };
+    size: {
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
+    };
+    disabled: {
+        type: BooleanConstructor;
+    };
+    iconLeading: {
+        type: StringConstructor;
+    };
+    iconTrailing: {
+        type: StringConstructor;
+    };
+    iconOnly: {
+        type: StringConstructor;
+    };
+    ariaLabel: {
+        type: StringConstructor;
+    };
+    kind: {
+        type: PropType<"button" | "submit" | "toggle" | "link">;
+    };
+    pressed: {
+        type: BooleanConstructor;
+    };
+    href: {
+        type: StringConstructor;
+    };
+}>> & Readonly<{
+    "onCx-click"?: ((event: CustomEvent<ClickDetail>) => any) | undefined;
+}>, {
+    disabled: boolean;
+    pressed: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;