@colletdev/vue 0.1.3

package/dist/switch.js

@@ -0,0 +1,75 @@
+// Auto-generated by scripts/generate-vue.mjs — DO NOT EDIT
+// Vue 3 wrapper for <cx-switch>
+import { defineComponent, ref, h, onMounted } from 'vue';
+export const Switch = defineComponent({
+    name: 'Switch',
+    props: {
+        id: { type: String },
+        label: { type: String },
+        shape: { type: String },
+        size: { type: String },
+        /** Boolean checked state (unlike Checkbox, which uses a string). */
+        checked: { type: Boolean },
+        disabled: { type: Boolean },
+        required: { type: Boolean },
+        helperText: { type: String },
+        error: { type: String },
+        description: { 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 switch 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);
+            if (props.checked)
+                attrs['checked'] = '';
+            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.description != null)
+                attrs['description'] = typeof props.description === 'object' ? JSON.stringify(props.description) : String(props.description);
+            if (props.unlabeled)
+                attrs['unlabeled'] = '';
+            return h('cx-switch', { ref: el, ...attrs });
+        };
+    },
+});

package/dist/table.d.ts

@@ -0,0 +1,135 @@
+import { type PropType } from 'vue';
+import type { EmptyStateConfig, FooterRow, KeyboardDetail, PageDetail, PaginationConfig, SortDetail, SortState, TableColumn, TableExpandDetail, TableRow, TableSelectDetail } from './types.js';
+export declare const Table: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+    };
+    caption: {
+        type: StringConstructor;
+        required: true;
+    };
+    columns: {
+        type: PropType<TableColumn[] | string>;
+    };
+    rows: {
+        type: PropType<TableRow[] | string>;
+    };
+    variant: {
+        type: PropType<"plain" | "striped" | "bordered">;
+    };
+    size: {
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
+    };
+    selectable: {
+        type: StringConstructor;
+    };
+    selected: {
+        type: PropType<string[] | string>;
+    };
+    sorts: {
+        type: PropType<SortState[] | string>;
+    };
+    pagination: {
+        type: PropType<PaginationConfig | string>;
+    };
+    hoverable: {
+        type: BooleanConstructor;
+    };
+    stickyHeader: {
+        type: BooleanConstructor;
+    };
+    footer: {
+        type: PropType<FooterRow[] | string>;
+    };
+    emptyState: {
+        type: PropType<EmptyStateConfig | string>;
+    };
+    columnOrder: {
+        type: PropType<string[] | string>;
+    };
+    disabled: {
+        type: BooleanConstructor;
+    };
+    loading: {
+        type: NumberConstructor;
+    };
+    error: {
+        type: StringConstructor;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    'cx-sort': (event: CustomEvent<SortDetail>) => true;
+    'cx-select': (event: CustomEvent<TableSelectDetail>) => true;
+    'cx-expand': (event: CustomEvent<TableExpandDetail>) => true;
+    'cx-page': (event: CustomEvent<PageDetail>) => true;
+    'cx-keydown': (event: CustomEvent<KeyboardDetail>) => true;
+    'cx-keyup': (event: CustomEvent<KeyboardDetail>) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+    };
+    caption: {
+        type: StringConstructor;
+        required: true;
+    };
+    columns: {
+        type: PropType<TableColumn[] | string>;
+    };
+    rows: {
+        type: PropType<TableRow[] | string>;
+    };
+    variant: {
+        type: PropType<"plain" | "striped" | "bordered">;
+    };
+    size: {
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
+    };
+    selectable: {
+        type: StringConstructor;
+    };
+    selected: {
+        type: PropType<string[] | string>;
+    };
+    sorts: {
+        type: PropType<SortState[] | string>;
+    };
+    pagination: {
+        type: PropType<PaginationConfig | string>;
+    };
+    hoverable: {
+        type: BooleanConstructor;
+    };
+    stickyHeader: {
+        type: BooleanConstructor;
+    };
+    footer: {
+        type: PropType<FooterRow[] | string>;
+    };
+    emptyState: {
+        type: PropType<EmptyStateConfig | string>;
+    };
+    columnOrder: {
+        type: PropType<string[] | string>;
+    };
+    disabled: {
+        type: BooleanConstructor;
+    };
+    loading: {
+        type: NumberConstructor;
+    };
+    error: {
+        type: StringConstructor;
+    };
+}>> & Readonly<{
+    "onCx-keydown"?: ((event: CustomEvent<KeyboardDetail>) => any) | undefined;
+    "onCx-keyup"?: ((event: CustomEvent<KeyboardDetail>) => any) | undefined;
+    "onCx-select"?: ((event: CustomEvent<TableSelectDetail>) => any) | undefined;
+    "onCx-sort"?: ((event: CustomEvent<SortDetail>) => any) | undefined;
+    "onCx-expand"?: ((event: CustomEvent<TableExpandDetail>) => any) | undefined;
+    "onCx-page"?: ((event: CustomEvent<PageDetail>) => any) | undefined;
+}>, {
+    disabled: boolean;
+    hoverable: boolean;
+    stickyHeader: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/table.js

@@ -0,0 +1,147 @@
+// Auto-generated by scripts/generate-vue.mjs — DO NOT EDIT
+// Vue 3 wrapper for <cx-table>
+import { defineComponent, ref, h, onMounted, watch } from 'vue';
+export const Table = defineComponent({
+    name: 'Table',
+    props: {
+        id: { type: String },
+        caption: { type: String, required: true },
+        columns: { type: [Array, Object, String] },
+        rows: { type: [Array, Object, String] },
+        variant: { type: String },
+        size: { type: String },
+        selectable: { type: String },
+        selected: { type: [Array, Object, String] },
+        sorts: { type: [Array, Object, String] },
+        pagination: { type: [Array, Object, String] },
+        hoverable: { type: Boolean },
+        stickyHeader: { type: Boolean },
+        footer: { type: [Array, Object, String] },
+        emptyState: { type: [Array, Object, String] },
+        columnOrder: { type: [Array, Object, String] },
+        disabled: { type: Boolean },
+        loading: { type: Number },
+        error: { type: String },
+    },
+    emits: {
+        'cx-sort': (event) => true,
+        'cx-select': (event) => true,
+        'cx-expand': (event) => true,
+        'cx-page': (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.loading, (val) => {
+                if (!el.value)
+                    return;
+                if (val != null)
+                    el.value.setAttribute('loading', String(val));
+                else
+                    el.value.removeAttribute('loading');
+            }, { immediate: true });
+            watch(() => props.columns, (val) => {
+                if (!el.value)
+                    return;
+                if (val != null)
+                    el.value.setAttribute('columns', typeof val === 'object' ? JSON.stringify(val) : String(val));
+                else
+                    el.value.removeAttribute('columns');
+            }, { immediate: true });
+            watch(() => props.rows, (val) => {
+                if (!el.value)
+                    return;
+                if (val != null)
+                    el.value.setAttribute('rows', typeof val === 'object' ? JSON.stringify(val) : String(val));
+                else
+                    el.value.removeAttribute('rows');
+            }, { 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.sorts, (val) => {
+                if (!el.value)
+                    return;
+                if (val != null)
+                    el.value.setAttribute('sorts', typeof val === 'object' ? JSON.stringify(val) : String(val));
+                else
+                    el.value.removeAttribute('sorts');
+            }, { immediate: true });
+            watch(() => props.pagination, (val) => {
+                if (!el.value)
+                    return;
+                if (val != null)
+                    el.value.setAttribute('pagination', typeof val === 'object' ? JSON.stringify(val) : String(val));
+                else
+                    el.value.removeAttribute('pagination');
+            }, { immediate: true });
+            watch(() => props.footer, (val) => {
+                if (!el.value)
+                    return;
+                if (val != null)
+                    el.value.setAttribute('footer', typeof val === 'object' ? JSON.stringify(val) : String(val));
+                else
+                    el.value.removeAttribute('footer');
+            }, { immediate: true });
+            watch(() => props.emptyState, (val) => {
+                if (!el.value)
+                    return;
+                if (val != null)
+                    el.value.setAttribute('empty-state', typeof val === 'object' ? JSON.stringify(val) : String(val));
+                else
+                    el.value.removeAttribute('empty-state');
+            }, { immediate: true });
+            watch(() => props.columnOrder, (val) => {
+                if (!el.value)
+                    return;
+                if (val != null)
+                    el.value.setAttribute('column-order', typeof val === 'object' ? JSON.stringify(val) : String(val));
+                else
+                    el.value.removeAttribute('column-order');
+            }, { immediate: true });
+            // Event listeners
+            el.value.addEventListener('cx-sort', (ev) => emit('cx-sort', ev));
+            el.value.addEventListener('cx-select', (ev) => emit('cx-select', ev));
+            el.value.addEventListener('cx-expand', (ev) => emit('cx-expand', ev));
+            el.value.addEventListener('cx-page', (ev) => emit('cx-page', ev));
+            el.value.addEventListener('cx-keydown', (ev) => emit('cx-keydown', ev));
+            el.value.addEventListener('cx-keyup', (ev) => emit('cx-keyup', 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.caption != null)
+                attrs['caption'] = typeof props.caption === 'object' ? JSON.stringify(props.caption) : String(props.caption);
+            if (props.variant != null)
+                attrs['variant'] = typeof props.variant === 'object' ? JSON.stringify(props.variant) : String(props.variant);
+            if (props.size != null)
+                attrs['size'] = typeof props.size === 'object' ? JSON.stringify(props.size) : String(props.size);
+            if (props.selectable != null)
+                attrs['selectable'] = typeof props.selectable === 'object' ? JSON.stringify(props.selectable) : String(props.selectable);
+            if (props.hoverable)
+                attrs['hoverable'] = '';
+            if (props.stickyHeader)
+                attrs['sticky-header'] = '';
+            if (props.disabled)
+                attrs['disabled'] = '';
+            if (props.error != null)
+                attrs['error'] = typeof props.error === 'object' ? JSON.stringify(props.error) : String(props.error);
+            return h('cx-table', { ref: el, ...attrs });
+        };
+    },
+});

package/dist/tabs.d.ts

@@ -0,0 +1,65 @@
+import { type PropType } from 'vue';
+import type { SelectDetail, TabItem } from './types.js';
+export interface TabsRef {
+    /** Focuses the active tab. */
+    focus(): void;
+    /** The underlying Custom Element. */
+    el: HTMLElement | null;
+}
+export declare const Tabs: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+    };
+    label: {
+        type: StringConstructor;
+    };
+    items: {
+        type: PropType<TabItem[] | string>;
+    };
+    defaultTab: {
+        type: StringConstructor;
+    };
+    variant: {
+        type: PropType<"underline" | "enclosed" | "pill">;
+    };
+    orientation: {
+        type: PropType<"horizontal" | "vertical">;
+    };
+    width: {
+        type: PropType<"auto" | "full">;
+    };
+    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, {
+    'cx-change': (event: CustomEvent<SelectDetail>) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+    };
+    label: {
+        type: StringConstructor;
+    };
+    items: {
+        type: PropType<TabItem[] | string>;
+    };
+    defaultTab: {
+        type: StringConstructor;
+    };
+    variant: {
+        type: PropType<"underline" | "enclosed" | "pill">;
+    };
+    orientation: {
+        type: PropType<"horizontal" | "vertical">;
+    };
+    width: {
+        type: PropType<"auto" | "full">;
+    };
+    size: {
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
+    };
+}>> & Readonly<{
+    "onCx-change"?: ((event: CustomEvent<SelectDetail>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/tabs.js

@@ -0,0 +1,67 @@
+// Auto-generated by scripts/generate-vue.mjs — DO NOT EDIT
+// Vue 3 wrapper for <cx-tabs>
+import { defineComponent, ref, h, onMounted, watch } from 'vue';
+export const Tabs = defineComponent({
+    name: 'Tabs',
+    props: {
+        id: { type: String },
+        label: { type: String },
+        items: { type: [Array, Object, String] },
+        defaultTab: { type: String },
+        variant: { type: String },
+        orientation: { type: String },
+        width: { type: String },
+        size: { type: String },
+    },
+    emits: {
+        'cx-change': (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.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-change', (ev) => emit('cx-change', ev));
+        });
+        expose({
+            /** Focuses the active tab. */
+            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.defaultTab != null)
+                attrs['default-tab'] = typeof props.defaultTab === 'object' ? JSON.stringify(props.defaultTab) : String(props.defaultTab);
+            if (props.variant != null)
+                attrs['variant'] = typeof props.variant === 'object' ? JSON.stringify(props.variant) : String(props.variant);
+            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);
+            return h('cx-tabs', { ref: el, ...attrs });
+        };
+    },
+});

package/dist/text-input.d.ts

@@ -0,0 +1,193 @@
+import { type PropType } from 'vue';
+import type { FocusDetail, InputDetail, KeyboardDetail } from './types.js';
+export interface TextInputRef {
+    /** Focuses the inner input or textarea. */
+    focus(): void;
+    /** Blurs the inner input or textarea. */
+    blur(): void;
+    /** Selects all text in the input. */
+    select(): void;
+    /** The underlying Custom Element. */
+    el: HTMLElement | null;
+}
+export declare const TextInput: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+    };
+    label: {
+        type: StringConstructor;
+    };
+    variant: {
+        type: PropType<"outline" | "filled" | "ghost">;
+    };
+    shape: {
+        type: PropType<"sharp" | "rounded" | "pill">;
+    };
+    size: {
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
+    };
+    /** Input type. Use 'multiline' for textarea behavior with optional rows and autoGrow. */
+    kind: {
+        type: PropType<"text" | "email" | "password" | "search" | "multiline">;
+    };
+    placeholder: {
+        type: StringConstructor;
+    };
+    /** Controlled value. Set via onInput callback. */
+    value: {
+        type: StringConstructor;
+    };
+    helperText: {
+        type: StringConstructor;
+    };
+    error: {
+        type: StringConstructor;
+    };
+    disabled: {
+        type: BooleanConstructor;
+    };
+    readonly: {
+        type: BooleanConstructor;
+    };
+    required: {
+        type: BooleanConstructor;
+    };
+    clearable: {
+        type: BooleanConstructor;
+    };
+    prefixIcon: {
+        type: StringConstructor;
+    };
+    suffixIcon: {
+        type: StringConstructor;
+    };
+    passwordToggle: {
+        type: BooleanConstructor;
+    };
+    passwordVisible: {
+        type: BooleanConstructor;
+    };
+    name: {
+        type: StringConstructor;
+    };
+    minLength: {
+        type: NumberConstructor;
+    };
+    maxLength: {
+        type: NumberConstructor;
+    };
+    pattern: {
+        type: StringConstructor;
+    };
+    autocomplete: {
+        type: StringConstructor;
+    };
+    rows: {
+        type: NumberConstructor;
+    };
+    autoGrow: {
+        type: BooleanConstructor;
+    };
+}>, () => 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;
+    };
+    variant: {
+        type: PropType<"outline" | "filled" | "ghost">;
+    };
+    shape: {
+        type: PropType<"sharp" | "rounded" | "pill">;
+    };
+    size: {
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
+    };
+    /** Input type. Use 'multiline' for textarea behavior with optional rows and autoGrow. */
+    kind: {
+        type: PropType<"text" | "email" | "password" | "search" | "multiline">;
+    };
+    placeholder: {
+        type: StringConstructor;
+    };
+    /** Controlled value. Set via onInput callback. */
+    value: {
+        type: StringConstructor;
+    };
+    helperText: {
+        type: StringConstructor;
+    };
+    error: {
+        type: StringConstructor;
+    };
+    disabled: {
+        type: BooleanConstructor;
+    };
+    readonly: {
+        type: BooleanConstructor;
+    };
+    required: {
+        type: BooleanConstructor;
+    };
+    clearable: {
+        type: BooleanConstructor;
+    };
+    prefixIcon: {
+        type: StringConstructor;
+    };
+    suffixIcon: {
+        type: StringConstructor;
+    };
+    passwordToggle: {
+        type: BooleanConstructor;
+    };
+    passwordVisible: {
+        type: BooleanConstructor;
+    };
+    name: {
+        type: StringConstructor;
+    };
+    minLength: {
+        type: NumberConstructor;
+    };
+    maxLength: {
+        type: NumberConstructor;
+    };
+    pattern: {
+        type: StringConstructor;
+    };
+    autocomplete: {
+        type: StringConstructor;
+    };
+    rows: {
+        type: NumberConstructor;
+    };
+    autoGrow: {
+        type: BooleanConstructor;
+    };
+}>> & 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;
+    clearable: boolean;
+    passwordToggle: boolean;
+    passwordVisible: boolean;
+    autoGrow: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;