@colletdev/vue 0.1.3

package/dist/speed-dial.d.ts

@@ -0,0 +1,103 @@
+import { type PropType } from 'vue';
+import type { CollapsibleDetail, MenuActionDetail, SpeedDialAction } from './types.js';
+export interface SpeedDialRef {
+    /** Opens the speed dial action menu. */
+    open(): void;
+    /** Closes the speed dial action menu. */
+    close(): void;
+    /** Toggles the speed dial action menu. */
+    toggle(): void;
+    /** The underlying Custom Element. */
+    el: HTMLElement | null;
+}
+export declare const SpeedDial: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+        required: true;
+    };
+    icon: {
+        type: StringConstructor;
+        required: true;
+    };
+    ariaLabel: {
+        type: StringConstructor;
+    };
+    closeIcon: {
+        type: StringConstructor;
+    };
+    actions: {
+        type: PropType<SpeedDialAction[] | string>;
+    };
+    variant: {
+        type: PropType<"filled" | "outline" | "ghost">;
+    };
+    shape: {
+        type: PropType<"rounded" | "pill">;
+    };
+    size: {
+        type: PropType<"sm" | "md" | "lg">;
+    };
+    direction: {
+        type: PropType<"up" | "down" | "left" | "right">;
+    };
+    backdrop: {
+        type: BooleanConstructor;
+    };
+    tooltips: {
+        type: BooleanConstructor;
+    };
+    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;
+    'cx-change': (event: CustomEvent<CollapsibleDetail>) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+        required: true;
+    };
+    icon: {
+        type: StringConstructor;
+        required: true;
+    };
+    ariaLabel: {
+        type: StringConstructor;
+    };
+    closeIcon: {
+        type: StringConstructor;
+    };
+    actions: {
+        type: PropType<SpeedDialAction[] | string>;
+    };
+    variant: {
+        type: PropType<"filled" | "outline" | "ghost">;
+    };
+    shape: {
+        type: PropType<"rounded" | "pill">;
+    };
+    size: {
+        type: PropType<"sm" | "md" | "lg">;
+    };
+    direction: {
+        type: PropType<"up" | "down" | "left" | "right">;
+    };
+    backdrop: {
+        type: BooleanConstructor;
+    };
+    tooltips: {
+        type: BooleanConstructor;
+    };
+    disabled: {
+        type: BooleanConstructor;
+    };
+}>> & Readonly<{
+    "onCx-change"?: ((event: CustomEvent<CollapsibleDetail>) => any) | undefined;
+    "onCx-action"?: ((event: CustomEvent<MenuActionDetail>) => any) | undefined;
+}>, {
+    backdrop: boolean;
+    disabled: boolean;
+    tooltips: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/speed-dial.js

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

package/dist/spinner.d.ts

@@ -0,0 +1,30 @@
+import { type PropType } from 'vue';
+export declare const Spinner: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+    };
+    variant: {
+        type: PropType<"circle" | "square">;
+    };
+    label: {
+        type: StringConstructor;
+    };
+    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;
+    };
+    variant: {
+        type: PropType<"circle" | "square">;
+    };
+    label: {
+        type: StringConstructor;
+    };
+    size: {
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/spinner.js

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

package/dist/split-button.d.ts

@@ -0,0 +1,101 @@
+import { type PropType } from 'vue';
+import type { ClickDetail, MenuActionDetail, SplitMenuEntry } from './types.js';
+export interface SplitButtonRef {
+    /** Opens the dropdown menu. */
+    open(): void;
+    /** Closes the dropdown menu. */
+    close(): void;
+    /** The underlying Custom Element. */
+    el: HTMLElement | null;
+}
+export declare const SplitButton: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+        required: true;
+    };
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    entries: {
+        type: PropType<SplitMenuEntry[] | string>;
+    };
+    variant: {
+        type: PropType<"filled" | "outline" | "ghost">;
+    };
+    intent: {
+        type: PropType<"neutral" | "primary" | "info" | "success" | "warning" | "danger">;
+    };
+    shape: {
+        type: PropType<"sharp" | "rounded" | "pill">;
+    };
+    size: {
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
+    };
+    iconLeading: {
+        type: StringConstructor;
+    };
+    disabled: {
+        type: BooleanConstructor;
+    };
+    primaryDisabled: {
+        type: BooleanConstructor;
+    };
+    triggerDisabled: {
+        type: BooleanConstructor;
+    };
+    triggerLabel: {
+        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;
+    'cx-action': (event: CustomEvent<MenuActionDetail>) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+        required: true;
+    };
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    entries: {
+        type: PropType<SplitMenuEntry[] | string>;
+    };
+    variant: {
+        type: PropType<"filled" | "outline" | "ghost">;
+    };
+    intent: {
+        type: PropType<"neutral" | "primary" | "info" | "success" | "warning" | "danger">;
+    };
+    shape: {
+        type: PropType<"sharp" | "rounded" | "pill">;
+    };
+    size: {
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
+    };
+    iconLeading: {
+        type: StringConstructor;
+    };
+    disabled: {
+        type: BooleanConstructor;
+    };
+    primaryDisabled: {
+        type: BooleanConstructor;
+    };
+    triggerDisabled: {
+        type: BooleanConstructor;
+    };
+    triggerLabel: {
+        type: StringConstructor;
+    };
+}>> & Readonly<{
+    "onCx-click"?: ((event: CustomEvent<ClickDetail>) => any) | undefined;
+    "onCx-action"?: ((event: CustomEvent<MenuActionDetail>) => any) | undefined;
+}>, {
+    disabled: boolean;
+    primaryDisabled: boolean;
+    triggerDisabled: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/split-button.js

@@ -0,0 +1,77 @@
+// Auto-generated by scripts/generate-vue.mjs — DO NOT EDIT
+// Vue 3 wrapper for <cx-split-button>
+import { defineComponent, ref, h, onMounted, watch } from 'vue';
+export const SplitButton = defineComponent({
+    name: 'SplitButton',
+    props: {
+        id: { type: String, required: true },
+        label: { type: String, required: true },
+        entries: { type: [Array, Object, String] },
+        variant: { type: String },
+        intent: { type: String },
+        shape: { type: String },
+        size: { type: String },
+        iconLeading: { type: String },
+        disabled: { type: Boolean },
+        primaryDisabled: { type: Boolean },
+        triggerDisabled: { type: Boolean },
+        triggerLabel: { type: String },
+    },
+    emits: {
+        'cx-click': (event) => true,
+        'cx-action': (event) => true,
+    },
+    setup(props, { emit, slots, expose }) {
+        const el = ref(null);
+        const listeners = [];
+        onMounted(() => {
+            if (!el.value)
+                return;
+            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-click', (ev) => emit('cx-click', ev));
+            el.value.addEventListener('cx-action', (ev) => emit('cx-action', ev));
+        });
+        expose({
+            /** Opens the dropdown menu. */
+            open() { el.value?.open(); },
+            /** Closes the dropdown menu. */
+            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.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.iconLeading != null)
+                attrs['icon-leading'] = typeof props.iconLeading === 'object' ? JSON.stringify(props.iconLeading) : String(props.iconLeading);
+            if (props.disabled)
+                attrs['disabled'] = '';
+            if (props.primaryDisabled)
+                attrs['primary-disabled'] = '';
+            if (props.triggerDisabled)
+                attrs['trigger-disabled'] = '';
+            if (props.triggerLabel != null)
+                attrs['trigger-label'] = typeof props.triggerLabel === 'object' ? JSON.stringify(props.triggerLabel) : String(props.triggerLabel);
+            return h('cx-split-button', { ref: el, ...attrs });
+        };
+    },
+});

package/dist/stepper.d.ts

@@ -0,0 +1,67 @@
+import { type PropType } from 'vue';
+import type { SelectDetail, StepperStep } from './types.js';
+export declare const Stepper: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+    };
+    label: {
+        type: StringConstructor;
+    };
+    steps: {
+        type: PropType<StepperStep[] | string>;
+    };
+    current: {
+        type: NumberConstructor;
+    };
+    variant: {
+        type: PropType<"outline" | "filled" | "ghost">;
+    };
+    shape: {
+        type: PropType<"sharp" | "rounded">;
+    };
+    orientation: {
+        type: PropType<"horizontal" | "vertical">;
+    };
+    size: {
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
+    };
+    linear: {
+        type: BooleanConstructor;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    'cx-change': (event: CustomEvent<SelectDetail>) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+    };
+    label: {
+        type: StringConstructor;
+    };
+    steps: {
+        type: PropType<StepperStep[] | string>;
+    };
+    current: {
+        type: NumberConstructor;
+    };
+    variant: {
+        type: PropType<"outline" | "filled" | "ghost">;
+    };
+    shape: {
+        type: PropType<"sharp" | "rounded">;
+    };
+    orientation: {
+        type: PropType<"horizontal" | "vertical">;
+    };
+    size: {
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
+    };
+    linear: {
+        type: BooleanConstructor;
+    };
+}>> & Readonly<{
+    "onCx-change"?: ((event: CustomEvent<SelectDetail>) => any) | undefined;
+}>, {
+    linear: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/stepper.js

@@ -0,0 +1,62 @@
+// Auto-generated by scripts/generate-vue.mjs — DO NOT EDIT
+// Vue 3 wrapper for <cx-stepper>
+import { defineComponent, ref, h, onMounted, watch } from 'vue';
+export const Stepper = defineComponent({
+    name: 'Stepper',
+    props: {
+        id: { type: String },
+        label: { type: String },
+        steps: { type: [Array, Object, String] },
+        current: { type: Number },
+        variant: { type: String },
+        shape: { type: String },
+        orientation: { type: String },
+        size: { type: String },
+        linear: { type: Boolean },
+    },
+    emits: {
+        'cx-change': (event) => true,
+    },
+    setup(props, { emit, slots, expose }) {
+        const el = ref(null);
+        const listeners = [];
+        onMounted(() => {
+            if (!el.value)
+                return;
+            watch(() => props.steps, (val) => {
+                if (!el.value)
+                    return;
+                if (val != null)
+                    el.value.setAttribute('steps', typeof val === 'object' ? JSON.stringify(val) : String(val));
+                else
+                    el.value.removeAttribute('steps');
+            }, { immediate: true });
+            // Event listeners
+            el.value.addEventListener('cx-change', (ev) => emit('cx-change', ev));
+        });
+        expose({
+            /** The underlying Custom Element. */
+            el,
+        });
+        return () => {
+            const attrs = {};
+            if (props.id != null)
+                attrs['id'] = typeof props.id === 'object' ? JSON.stringify(props.id) : String(props.id);
+            if (props.label != null)
+                attrs['label'] = typeof props.label === 'object' ? JSON.stringify(props.label) : String(props.label);
+            if (props.current != null)
+                attrs['current'] = typeof props.current === 'object' ? JSON.stringify(props.current) : String(props.current);
+            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.orientation != null)
+                attrs['orientation'] = typeof props.orientation === 'object' ? JSON.stringify(props.orientation) : String(props.orientation);
+            if (props.size != null)
+                attrs['size'] = typeof props.size === 'object' ? JSON.stringify(props.size) : String(props.size);
+            if (props.linear)
+                attrs['linear'] = '';
+            return h('cx-stepper', { ref: el, ...attrs });
+        };
+    },
+});

package/dist/switch.d.ts

@@ -0,0 +1,100 @@
+import { type PropType } from 'vue';
+import type { CheckedDetail, FocusDetail, KeyboardDetail } from './types.js';
+export interface SwitchRef {
+    /** Focuses the switch input. */
+    focus(): void;
+    /** The underlying Custom Element. */
+    el: HTMLElement | null;
+}
+export declare const Switch: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+    };
+    label: {
+        type: StringConstructor;
+    };
+    shape: {
+        type: PropType<"sharp" | "rounded" | "pill">;
+    };
+    size: {
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
+    };
+    /** Boolean checked state (unlike Checkbox, which uses a string). */
+    checked: {
+        type: BooleanConstructor;
+    };
+    disabled: {
+        type: BooleanConstructor;
+    };
+    required: {
+        type: BooleanConstructor;
+    };
+    helperText: {
+        type: StringConstructor;
+    };
+    error: {
+        type: StringConstructor;
+    };
+    description: {
+        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" | "pill">;
+    };
+    size: {
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
+    };
+    /** Boolean checked state (unlike Checkbox, which uses a string). */
+    checked: {
+        type: BooleanConstructor;
+    };
+    disabled: {
+        type: BooleanConstructor;
+    };
+    required: {
+        type: BooleanConstructor;
+    };
+    helperText: {
+        type: StringConstructor;
+    };
+    error: {
+        type: StringConstructor;
+    };
+    description: {
+        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;
+    checked: boolean;
+    unlabeled: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;