@colletdev/vue 0.1.3

package/dist/checkbox.js

@@ -0,0 +1,75 @@
+// Auto-generated by scripts/generate-vue.mjs — DO NOT EDIT
+// Vue 3 wrapper for <cx-checkbox>
+import { defineComponent, ref, h, onMounted } from 'vue';
+export const Checkbox = defineComponent({
+    name: 'Checkbox',
+    props: {
+        id: { type: String },
+        label: { type: String },
+        shape: { type: String },
+        size: { type: String },
+        /** Three-state check. Accepts true/false as aliases for 'checked'/unchecked, and keeps 'indeterminate' for the third state. */
+        checked: { type: [Boolean, String, Array] },
+        disabled: { type: Boolean },
+        required: { type: Boolean },
+        helperText: { type: String },
+        error: { type: String },
+        unlabeled: { 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;
+            // 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 checkbox 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.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);
+            {
+                const value = props.checked === true ? 'checked' : props.checked === false ? undefined : props.checked;
+                if (value != null)
+                    attrs['checked'] = value;
+            }
+            if (props.disabled)
+                attrs['disabled'] = '';
+            if (props.required)
+                attrs['required'] = '';
+            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.unlabeled)
+                attrs['unlabeled'] = '';
+            return h('cx-checkbox', { ref: el, ...attrs });
+        };
+    },
+});

package/dist/code-block.d.ts

@@ -0,0 +1,77 @@
+import { type PropType } from 'vue';
+export declare const CodeBlock: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+    };
+    content: {
+        type: StringConstructor;
+    };
+    variant: {
+        type: StringConstructor;
+    };
+    shape: {
+        type: StringConstructor;
+    };
+    size: {
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
+    };
+    language: {
+        type: StringConstructor;
+    };
+    filename: {
+        type: StringConstructor;
+    };
+    lineNumbers: {
+        type: BooleanConstructor;
+    };
+    copyButton: {
+        type: BooleanConstructor;
+    };
+    trafficLights: {
+        type: BooleanConstructor;
+    };
+    slotted: {
+        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;
+    };
+    content: {
+        type: StringConstructor;
+    };
+    variant: {
+        type: StringConstructor;
+    };
+    shape: {
+        type: StringConstructor;
+    };
+    size: {
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
+    };
+    language: {
+        type: StringConstructor;
+    };
+    filename: {
+        type: StringConstructor;
+    };
+    lineNumbers: {
+        type: BooleanConstructor;
+    };
+    copyButton: {
+        type: BooleanConstructor;
+    };
+    trafficLights: {
+        type: BooleanConstructor;
+    };
+    slotted: {
+        type: BooleanConstructor;
+    };
+}>> & Readonly<{}>, {
+    slotted: boolean;
+    lineNumbers: boolean;
+    copyButton: boolean;
+    trafficLights: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/code-block.js

@@ -0,0 +1,59 @@
+// Auto-generated by scripts/generate-vue.mjs — DO NOT EDIT
+// Vue 3 wrapper for <cx-code-block>
+import { defineComponent, ref, h, onMounted } from 'vue';
+export const CodeBlock = defineComponent({
+    name: 'CodeBlock',
+    props: {
+        id: { type: String },
+        content: { type: String },
+        variant: { type: String },
+        shape: { type: String },
+        size: { type: String },
+        language: { type: String },
+        filename: { type: String },
+        lineNumbers: { type: Boolean },
+        copyButton: { type: Boolean },
+        trafficLights: { type: Boolean },
+        slotted: { 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.content != null)
+                attrs['content'] = typeof props.content === 'object' ? JSON.stringify(props.content) : String(props.content);
+            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.language != null)
+                attrs['language'] = typeof props.language === 'object' ? JSON.stringify(props.language) : String(props.language);
+            if (props.filename != null)
+                attrs['filename'] = typeof props.filename === 'object' ? JSON.stringify(props.filename) : String(props.filename);
+            if (props.lineNumbers)
+                attrs['line-numbers'] = '';
+            if (props.copyButton)
+                attrs['copy-button'] = '';
+            if (props.trafficLights)
+                attrs['traffic-lights'] = '';
+            if (props.slotted)
+                attrs['slotted'] = '';
+            return h('cx-code-block', { ref: el, ...attrs });
+        };
+    },
+});

package/dist/collapsible.d.ts

@@ -0,0 +1,73 @@
+import { type PropType } from 'vue';
+import type { CollapsibleDetail } from './types.js';
+export interface CollapsibleRef {
+    /** Expands the collapsible content. */
+    open(): void;
+    /** Collapses the content. */
+    close(): void;
+    /** Toggles the collapsible state. */
+    toggle(): void;
+    /** The underlying Custom Element. */
+    el: HTMLElement | null;
+}
+export declare const Collapsible: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+    };
+    label: {
+        type: StringConstructor;
+    };
+    triggerHtml: {
+        type: StringConstructor;
+    };
+    open: {
+        type: BooleanConstructor;
+    };
+    icon: {
+        type: StringConstructor;
+    };
+    noIcon: {
+        type: BooleanConstructor;
+    };
+    size: {
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
+    };
+    disabled: {
+        type: BooleanConstructor;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    'cx-change': (event: CustomEvent<CollapsibleDetail>) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+    };
+    label: {
+        type: StringConstructor;
+    };
+    triggerHtml: {
+        type: StringConstructor;
+    };
+    open: {
+        type: BooleanConstructor;
+    };
+    icon: {
+        type: StringConstructor;
+    };
+    noIcon: {
+        type: BooleanConstructor;
+    };
+    size: {
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
+    };
+    disabled: {
+        type: BooleanConstructor;
+    };
+}>> & Readonly<{
+    "onCx-change"?: ((event: CustomEvent<CollapsibleDetail>) => any) | undefined;
+}>, {
+    disabled: boolean;
+    open: boolean;
+    noIcon: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/collapsible.js

@@ -0,0 +1,62 @@
+// Auto-generated by scripts/generate-vue.mjs — DO NOT EDIT
+// Vue 3 wrapper for <cx-collapsible>
+import { defineComponent, ref, h, onMounted } from 'vue';
+export const Collapsible = defineComponent({
+    name: 'Collapsible',
+    props: {
+        id: { type: String },
+        label: { type: String },
+        triggerHtml: { type: String },
+        open: { type: Boolean },
+        icon: { type: String },
+        noIcon: { type: Boolean },
+        size: { type: String },
+        disabled: { type: Boolean },
+    },
+    emits: {
+        'cx-change': (event) => true,
+    },
+    setup(props, { emit, slots, expose }) {
+        const el = ref(null);
+        const listeners = [];
+        onMounted(() => {
+            if (!el.value)
+                return;
+            // Event listeners
+            el.value.addEventListener('cx-change', (ev) => emit('cx-change', ev));
+        });
+        expose({
+            /** Expands the collapsible content. */
+            open() { el.value?.open(); },
+            /** Collapses the content. */
+            close() { el.value?.close(); },
+            /** Toggles the collapsible state. */
+            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.label != null)
+                attrs['label'] = typeof props.label === 'object' ? JSON.stringify(props.label) : String(props.label);
+            if (props.triggerHtml != null)
+                attrs['trigger-html'] = typeof props.triggerHtml === 'object' ? JSON.stringify(props.triggerHtml) : String(props.triggerHtml);
+            if (props.open)
+                attrs['open'] = '';
+            if (props.icon != null)
+                attrs['icon'] = typeof props.icon === 'object' ? JSON.stringify(props.icon) : String(props.icon);
+            if (props.noIcon)
+                attrs['no-icon'] = '';
+            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-collapsible', { ref: el, ...attrs }, [
+                slots.trigger ? h('div', { slot: 'trigger', style: 'display:contents' }, slots.trigger()) : undefined,
+                slots.default?.()
+            ]);
+        };
+    },
+});

package/dist/date-picker.d.ts

@@ -0,0 +1,145 @@
+import { type PropType } from 'vue';
+import type { FocusDetail, InputDetail, KeyboardDetail } from './types.js';
+export interface DatePickerRef {
+    /** Opens the calendar panel. */
+    open(): void;
+    /** Closes the calendar panel. */
+    close(): void;
+    /** Focuses the trigger button. */
+    focus(): void;
+    /** The underlying Custom Element. */
+    el: HTMLElement | null;
+}
+export declare const DatePicker: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+    };
+    label: {
+        type: StringConstructor;
+        required: true;
+    };
+    variant: {
+        type: PropType<"outline" | "filled" | "ghost">;
+    };
+    shape: {
+        type: PropType<"sharp" | "rounded">;
+    };
+    size: {
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
+    };
+    selected: {
+        type: StringConstructor;
+    };
+    min: {
+        type: StringConstructor;
+    };
+    max: {
+        type: StringConstructor;
+    };
+    disabledDates: {
+        type: PropType<string[] | string>;
+    };
+    format: {
+        type: PropType<"iso" | "us-short" | "eu-short" | "eu-dot">;
+    };
+    firstDay: {
+        type: PropType<"monday" | "sunday">;
+    };
+    placeholder: {
+        type: StringConstructor;
+    };
+    helperText: {
+        type: StringConstructor;
+    };
+    error: {
+        type: StringConstructor;
+    };
+    disabled: {
+        type: BooleanConstructor;
+    };
+    required: {
+        type: BooleanConstructor;
+    };
+    readonly: {
+        type: BooleanConstructor;
+    };
+    name: {
+        type: StringConstructor;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    'cx-input': (event: CustomEvent<InputDetail>) => true;
+    'cx-change': (event: CustomEvent<InputDetail>) => 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;
+        required: true;
+    };
+    variant: {
+        type: PropType<"outline" | "filled" | "ghost">;
+    };
+    shape: {
+        type: PropType<"sharp" | "rounded">;
+    };
+    size: {
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
+    };
+    selected: {
+        type: StringConstructor;
+    };
+    min: {
+        type: StringConstructor;
+    };
+    max: {
+        type: StringConstructor;
+    };
+    disabledDates: {
+        type: PropType<string[] | string>;
+    };
+    format: {
+        type: PropType<"iso" | "us-short" | "eu-short" | "eu-dot">;
+    };
+    firstDay: {
+        type: PropType<"monday" | "sunday">;
+    };
+    placeholder: {
+        type: StringConstructor;
+    };
+    helperText: {
+        type: StringConstructor;
+    };
+    error: {
+        type: StringConstructor;
+    };
+    disabled: {
+        type: BooleanConstructor;
+    };
+    required: {
+        type: BooleanConstructor;
+    };
+    readonly: {
+        type: BooleanConstructor;
+    };
+    name: {
+        type: StringConstructor;
+    };
+}>> & Readonly<{
+    "onCx-change"?: ((event: CustomEvent<InputDetail>) => any) | undefined;
+    "onCx-input"?: ((event: CustomEvent<InputDetail>) => 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;
+    readonly: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/date-picker.js

@@ -0,0 +1,111 @@
+// Auto-generated by scripts/generate-vue.mjs — DO NOT EDIT
+// Vue 3 wrapper for <cx-date-picker>
+import { defineComponent, ref, h, onMounted, watch } from 'vue';
+export const DatePicker = defineComponent({
+    name: 'DatePicker',
+    props: {
+        id: { type: String },
+        label: { type: String, required: true },
+        variant: { type: String },
+        shape: { type: String },
+        size: { type: String },
+        selected: { type: String },
+        min: { type: String },
+        max: { type: String },
+        disabledDates: { type: [Array, Object, String] },
+        format: { type: String },
+        firstDay: { type: String },
+        placeholder: { type: String },
+        helperText: { type: String },
+        error: { type: String },
+        disabled: { type: Boolean },
+        required: { type: Boolean },
+        readonly: { type: Boolean },
+        name: { type: 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.disabledDates, (val) => {
+                if (!el.value)
+                    return;
+                if (val != null)
+                    el.value.setAttribute('disabled-dates', typeof val === 'object' ? JSON.stringify(val) : String(val));
+                else
+                    el.value.removeAttribute('disabled-dates');
+            }, { 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 calendar panel. */
+            open() { el.value?.open(); },
+            /** Closes the calendar panel. */
+            close() { el.value?.close(); },
+            /** Focuses the trigger button. */
+            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.selected != null)
+                attrs['selected'] = typeof props.selected === 'object' ? JSON.stringify(props.selected) : String(props.selected);
+            if (props.min != null)
+                attrs['min'] = typeof props.min === 'object' ? JSON.stringify(props.min) : String(props.min);
+            if (props.max != null)
+                attrs['max'] = typeof props.max === 'object' ? JSON.stringify(props.max) : String(props.max);
+            if (props.format != null)
+                attrs['format'] = typeof props.format === 'object' ? JSON.stringify(props.format) : String(props.format);
+            if (props.firstDay != null)
+                attrs['first-day'] = typeof props.firstDay === 'object' ? JSON.stringify(props.firstDay) : String(props.firstDay);
+            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'] = '';
+            return h('cx-date-picker', { ref: el, ...attrs });
+        };
+    },
+});

package/dist/dialog.d.ts

@@ -0,0 +1,61 @@
+import { type PropType } from 'vue';
+import type { CloseDetail } from './types.js';
+export interface DialogRef {
+    /** Opens the dialog modal with entrance animation. */
+    open(): void;
+    /** Closes the dialog modal with exit animation. */
+    close(): void;
+    /** The underlying Custom Element. */
+    el: HTMLElement | null;
+}
+export declare const Dialog: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+    };
+    title: {
+        type: StringConstructor;
+    };
+    variant: {
+        type: PropType<"standard" | "alert">;
+    };
+    description: {
+        type: StringConstructor;
+    };
+    size: {
+        type: PropType<"sm" | "md" | "lg" | "xl" | "full">;
+    };
+    closeButton: {
+        type: StringConstructor;
+    };
+    drawer: {
+        type: StringConstructor;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    'cx-close': (event: CustomEvent<CloseDetail>) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+    };
+    title: {
+        type: StringConstructor;
+    };
+    variant: {
+        type: PropType<"standard" | "alert">;
+    };
+    description: {
+        type: StringConstructor;
+    };
+    size: {
+        type: PropType<"sm" | "md" | "lg" | "xl" | "full">;
+    };
+    closeButton: {
+        type: StringConstructor;
+    };
+    drawer: {
+        type: StringConstructor;
+    };
+}>> & Readonly<{
+    "onCx-close"?: ((event: CustomEvent<CloseDetail>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;