@colletdev/vue 0.1.3

package/dist/message-part.js

@@ -0,0 +1,25 @@
+// Auto-generated by scripts/generate-vue.mjs — DO NOT EDIT
+// Vue 3 wrapper for <cx-message-part>
+import { defineComponent, ref, h, onMounted } from 'vue';
+export const MessagePart = defineComponent({
+    name: 'MessagePart',
+    props: {},
+    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 = {};
+            return h('cx-message-part', { ref: el, ...attrs });
+        };
+    },
+});

package/dist/pagination.d.ts

@@ -0,0 +1,81 @@
+import { type PropType } from 'vue';
+export declare const Pagination: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+    };
+    currentPage: {
+        type: NumberConstructor;
+        required: true;
+    };
+    pageSize: {
+        type: NumberConstructor;
+        required: true;
+    };
+    totalItems: {
+        type: NumberConstructor;
+        required: true;
+    };
+    label: {
+        type: StringConstructor;
+    };
+    size: {
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
+    };
+    showInfo: {
+        type: BooleanConstructor;
+    };
+    showPrevNext: {
+        type: BooleanConstructor;
+    };
+    prevLabel: {
+        type: StringConstructor;
+    };
+    nextLabel: {
+        type: StringConstructor;
+    };
+    pageSizeOptions: {
+        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;
+    };
+    currentPage: {
+        type: NumberConstructor;
+        required: true;
+    };
+    pageSize: {
+        type: NumberConstructor;
+        required: true;
+    };
+    totalItems: {
+        type: NumberConstructor;
+        required: true;
+    };
+    label: {
+        type: StringConstructor;
+    };
+    size: {
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
+    };
+    showInfo: {
+        type: BooleanConstructor;
+    };
+    showPrevNext: {
+        type: BooleanConstructor;
+    };
+    prevLabel: {
+        type: StringConstructor;
+    };
+    nextLabel: {
+        type: StringConstructor;
+    };
+    pageSizeOptions: {
+        type: StringConstructor;
+    };
+}>> & Readonly<{}>, {
+    showInfo: boolean;
+    showPrevNext: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/pagination.js

@@ -0,0 +1,59 @@
+// Auto-generated by scripts/generate-vue.mjs — DO NOT EDIT
+// Vue 3 wrapper for <cx-pagination>
+import { defineComponent, ref, h, onMounted } from 'vue';
+export const Pagination = defineComponent({
+    name: 'Pagination',
+    props: {
+        id: { type: String },
+        currentPage: { type: Number, required: true },
+        pageSize: { type: Number, required: true },
+        totalItems: { type: Number, required: true },
+        label: { type: String },
+        size: { type: String },
+        showInfo: { type: Boolean },
+        showPrevNext: { type: Boolean },
+        prevLabel: { type: String },
+        nextLabel: { type: String },
+        pageSizeOptions: { 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.currentPage != null)
+                attrs['current-page'] = typeof props.currentPage === 'object' ? JSON.stringify(props.currentPage) : String(props.currentPage);
+            if (props.pageSize != null)
+                attrs['page-size'] = typeof props.pageSize === 'object' ? JSON.stringify(props.pageSize) : String(props.pageSize);
+            if (props.totalItems != null)
+                attrs['total-items'] = typeof props.totalItems === 'object' ? JSON.stringify(props.totalItems) : String(props.totalItems);
+            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.showInfo)
+                attrs['show-info'] = '';
+            if (props.showPrevNext)
+                attrs['show-prev-next'] = '';
+            if (props.prevLabel != null)
+                attrs['prev-label'] = typeof props.prevLabel === 'object' ? JSON.stringify(props.prevLabel) : String(props.prevLabel);
+            if (props.nextLabel != null)
+                attrs['next-label'] = typeof props.nextLabel === 'object' ? JSON.stringify(props.nextLabel) : String(props.nextLabel);
+            if (props.pageSizeOptions != null)
+                attrs['page-size-options'] = typeof props.pageSizeOptions === 'object' ? JSON.stringify(props.pageSizeOptions) : String(props.pageSizeOptions);
+            return h('cx-pagination', { ref: el, ...attrs });
+        };
+    },
+});

package/dist/popover.d.ts

@@ -0,0 +1,104 @@
+import { type PropType } from 'vue';
+export interface PopoverRef {
+    /** Opens the popover panel. */
+    open(): void;
+    /** Closes the popover panel. */
+    close(): void;
+    /** The underlying Custom Element. */
+    el: HTMLElement | null;
+}
+export declare const Popover: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+    };
+    triggerLabel: {
+        type: StringConstructor;
+        required: true;
+    };
+    title: {
+        type: StringConstructor;
+    };
+    description: {
+        type: StringConstructor;
+    };
+    width: {
+        type: PropType<"sm" | "md" | "lg" | "xl" | "auto">;
+    };
+    placement: {
+        type: PropType<"top" | "bottom">;
+    };
+    align: {
+        type: PropType<"start" | "center" | "end">;
+    };
+    arrow: {
+        type: BooleanConstructor;
+    };
+    closeButton: {
+        type: BooleanConstructor;
+    };
+    variant: {
+        type: PropType<"outline" | "filled" | "ghost">;
+    };
+    shape: {
+        type: PropType<"sharp" | "rounded" | "pill">;
+    };
+    size: {
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
+    };
+    icon: {
+        type: StringConstructor;
+    };
+    disabled: {
+        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;
+    };
+    triggerLabel: {
+        type: StringConstructor;
+        required: true;
+    };
+    title: {
+        type: StringConstructor;
+    };
+    description: {
+        type: StringConstructor;
+    };
+    width: {
+        type: PropType<"sm" | "md" | "lg" | "xl" | "auto">;
+    };
+    placement: {
+        type: PropType<"top" | "bottom">;
+    };
+    align: {
+        type: PropType<"start" | "center" | "end">;
+    };
+    arrow: {
+        type: BooleanConstructor;
+    };
+    closeButton: {
+        type: BooleanConstructor;
+    };
+    variant: {
+        type: PropType<"outline" | "filled" | "ghost">;
+    };
+    shape: {
+        type: PropType<"sharp" | "rounded" | "pill">;
+    };
+    size: {
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
+    };
+    icon: {
+        type: StringConstructor;
+    };
+    disabled: {
+        type: BooleanConstructor;
+    };
+}>> & Readonly<{}>, {
+    disabled: boolean;
+    closeButton: boolean;
+    arrow: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/popover.js

@@ -0,0 +1,92 @@
+// Auto-generated by scripts/generate-vue.mjs — DO NOT EDIT
+// Vue 3 wrapper for <cx-popover>
+import { defineComponent, ref, h, onMounted, watch } from 'vue';
+export const Popover = defineComponent({
+    name: 'Popover',
+    props: {
+        id: { type: String },
+        triggerLabel: { type: String, required: true },
+        title: { type: String },
+        description: { type: String },
+        width: { type: String },
+        placement: { type: String },
+        align: { type: String },
+        arrow: { type: Boolean },
+        closeButton: { type: Boolean },
+        variant: { type: String },
+        shape: { type: String },
+        size: { type: String },
+        icon: { type: String },
+        disabled: { type: Boolean },
+    },
+    emits: {},
+    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 });
+            watch(() => props.width, (val) => {
+                if (!el.value)
+                    return;
+                if (val != null)
+                    el.value.setAttribute('width', String(val));
+                else
+                    el.value.removeAttribute('width');
+            }, { 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 });
+            // Event listeners
+        });
+        expose({
+            /** Opens the popover panel. */
+            open() { el.value?.open(); },
+            /** Closes the popover panel. */
+            close() { el.value?.close(); },
+            /** 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.triggerLabel != null)
+                attrs['trigger-label'] = typeof props.triggerLabel === 'object' ? JSON.stringify(props.triggerLabel) : String(props.triggerLabel);
+            if (props.description != null)
+                attrs['description'] = typeof props.description === 'object' ? JSON.stringify(props.description) : String(props.description);
+            if (props.placement != null)
+                attrs['placement'] = typeof props.placement === 'object' ? JSON.stringify(props.placement) : String(props.placement);
+            if (props.arrow)
+                attrs['arrow'] = '';
+            if (props.closeButton)
+                attrs['close-button'] = '';
+            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.icon != null)
+                attrs['icon'] = typeof props.icon === 'object' ? JSON.stringify(props.icon) : String(props.icon);
+            if (props.disabled)
+                attrs['disabled'] = '';
+            return h('cx-popover', { ref: el, ...attrs }, [
+                slots.default?.()
+            ]);
+        };
+    },
+});

package/dist/profile-menu.d.ts

@@ -0,0 +1,77 @@
+import { type PropType } from 'vue';
+import type { MenuActionDetail, MenuEntry } from './types.js';
+export interface ProfileMenuRef {
+    /** Opens the profile menu dropdown. */
+    open(): void;
+    /** Closes the profile menu dropdown. */
+    close(): void;
+    /** The underlying Custom Element. */
+    el: HTMLElement | null;
+}
+export declare const ProfileMenu: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+    };
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    image: {
+        type: StringConstructor;
+    };
+    initials: {
+        type: StringConstructor;
+    };
+    shape: {
+        type: PropType<"circle" | "rounded">;
+    };
+    size: {
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
+    };
+    width: {
+        type: PropType<"auto" | "sm" | "md" | "lg">;
+    };
+    entries: {
+        type: PropType<MenuEntry[] | string>;
+    };
+    disabled: {
+        type: BooleanConstructor;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    'cx-action': (event: CustomEvent<MenuActionDetail>) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+    };
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    image: {
+        type: StringConstructor;
+    };
+    initials: {
+        type: StringConstructor;
+    };
+    shape: {
+        type: PropType<"circle" | "rounded">;
+    };
+    size: {
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
+    };
+    width: {
+        type: PropType<"auto" | "sm" | "md" | "lg">;
+    };
+    entries: {
+        type: PropType<MenuEntry[] | string>;
+    };
+    disabled: {
+        type: BooleanConstructor;
+    };
+}>> & Readonly<{
+    "onCx-action"?: ((event: CustomEvent<MenuActionDetail>) => any) | undefined;
+}>, {
+    disabled: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/profile-menu.js

@@ -0,0 +1,72 @@
+// Auto-generated by scripts/generate-vue.mjs — DO NOT EDIT
+// Vue 3 wrapper for <cx-profile-menu>
+import { defineComponent, ref, h, onMounted, watch } from 'vue';
+export const ProfileMenu = defineComponent({
+    name: 'ProfileMenu',
+    props: {
+        id: { type: String },
+        label: { type: String, required: true },
+        image: { type: String },
+        initials: { type: String },
+        shape: { type: String },
+        size: { type: String },
+        width: { type: String },
+        entries: { type: [Array, Object, String] },
+        disabled: { type: Boolean },
+    },
+    emits: {
+        'cx-action': (event) => true,
+    },
+    setup(props, { emit, slots, expose }) {
+        const el = ref(null);
+        const listeners = [];
+        onMounted(() => {
+            if (!el.value)
+                return;
+            watch(() => props.width, (val) => {
+                if (!el.value)
+                    return;
+                if (val != null)
+                    el.value.setAttribute('width', String(val));
+                else
+                    el.value.removeAttribute('width');
+            }, { immediate: true });
+            watch(() => props.entries, (val) => {
+                if (!el.value)
+                    return;
+                if (val != null)
+                    el.value.setAttribute('entries', typeof val === 'object' ? JSON.stringify(val) : String(val));
+                else
+                    el.value.removeAttribute('entries');
+            }, { immediate: true });
+            // Event listeners
+            el.value.addEventListener('cx-action', (ev) => emit('cx-action', ev));
+        });
+        expose({
+            /** Opens the profile menu dropdown. */
+            open() { el.value?.open(); },
+            /** Closes the profile menu dropdown. */
+            close() { el.value?.close(); },
+            /** 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.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.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'] = '';
+            return h('cx-profile-menu', { ref: el, ...attrs });
+        };
+    },
+});

package/dist/progress.d.ts

@@ -0,0 +1,50 @@
+import { type PropType } from 'vue';
+export declare const Progress: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+    };
+    label: {
+        type: StringConstructor;
+    };
+    /** Percentage 0–100. No max prop — the component assumes max=100. */
+    value: {
+        type: NumberConstructor;
+    };
+    valueText: {
+        type: StringConstructor;
+    };
+    intent: {
+        type: PropType<"neutral" | "primary" | "info" | "success" | "warning" | "danger">;
+    };
+    shape: {
+        type: PropType<"rounded" | "sharp" | "pill">;
+    };
+    size: {
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
+    };
+}>, () => 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;
+    };
+    /** Percentage 0–100. No max prop — the component assumes max=100. */
+    value: {
+        type: NumberConstructor;
+    };
+    valueText: {
+        type: StringConstructor;
+    };
+    intent: {
+        type: PropType<"neutral" | "primary" | "info" | "success" | "warning" | "danger">;
+    };
+    shape: {
+        type: PropType<"rounded" | "sharp" | "pill">;
+    };
+    size: {
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/progress.js

@@ -0,0 +1,48 @@
+// Auto-generated by scripts/generate-vue.mjs — DO NOT EDIT
+// Vue 3 wrapper for <cx-progress>
+import { defineComponent, ref, h, onMounted } from 'vue';
+export const Progress = defineComponent({
+    name: 'Progress',
+    props: {
+        id: { type: String },
+        label: { type: String },
+        /** Percentage 0–100. No max prop — the component assumes max=100. */
+        value: { type: Number },
+        valueText: { type: String },
+        intent: { type: String },
+        shape: { type: String },
+        size: { 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.label != null)
+                attrs['label'] = typeof props.label === 'object' ? JSON.stringify(props.label) : String(props.label);
+            if (props.value != null)
+                attrs['value'] = typeof props.value === 'object' ? JSON.stringify(props.value) : String(props.value);
+            if (props.valueText != null)
+                attrs['value-text'] = typeof props.valueText === 'object' ? JSON.stringify(props.valueText) : String(props.valueText);
+            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);
+            return h('cx-progress', { ref: el, ...attrs });
+        };
+    },
+});