@colletdev/vue 0.1.3

package/dist/select.js

@@ -0,0 +1,114 @@
+// Auto-generated by scripts/generate-vue.mjs — DO NOT EDIT
+// Vue 3 wrapper for <cx-select>
+import { defineComponent, ref, h, onMounted, watch } from 'vue';
+export const Select = defineComponent({
+    name: 'Select',
+    props: {
+        id: { type: String },
+        label: { type: String },
+        variant: { type: String },
+        shape: { type: String },
+        size: { type: String },
+        mode: { type: String },
+        selected: { type: [Array, Object, String] },
+        placeholder: { type: String },
+        helperText: { type: String },
+        error: { type: String },
+        disabled: { type: Boolean },
+        required: { type: Boolean },
+        name: { type: String },
+        items: { type: [Array, Object, String] },
+        groups: { type: [Array, Object, String] },
+    },
+    emits: {
+        'cx-input': (event) => true,
+        'cx-change': (event) => true,
+        'cx-focus': (event) => true,
+        'cx-blur': (event) => true,
+        'cx-keydown': (event) => true,
+        'cx-keyup': (event) => true,
+    },
+    setup(props, { emit, slots, expose }) {
+        const el = ref(null);
+        const listeners = [];
+        onMounted(() => {
+            if (!el.value)
+                return;
+            watch(() => props.name, (val) => {
+                if (!el.value)
+                    return;
+                if (val != null)
+                    el.value.setAttribute('name', String(val));
+                else
+                    el.value.removeAttribute('name');
+            }, { immediate: true });
+            watch(() => props.selected, (val) => {
+                if (!el.value)
+                    return;
+                if (val != null)
+                    el.value.setAttribute('selected', typeof val === 'object' ? JSON.stringify(val) : String(val));
+                else
+                    el.value.removeAttribute('selected');
+            }, { immediate: true });
+            watch(() => props.items, (val) => {
+                if (!el.value)
+                    return;
+                if (val != null)
+                    el.value.setAttribute('items', typeof val === 'object' ? JSON.stringify(val) : String(val));
+                else
+                    el.value.removeAttribute('items');
+            }, { immediate: true });
+            watch(() => props.groups, (val) => {
+                if (!el.value)
+                    return;
+                if (val != null)
+                    el.value.setAttribute('groups', typeof val === 'object' ? JSON.stringify(val) : String(val));
+                else
+                    el.value.removeAttribute('groups');
+            }, { immediate: true });
+            // Event listeners
+            el.value.addEventListener('cx-input', (ev) => emit('cx-input', ev));
+            el.value.addEventListener('cx-change', (ev) => emit('cx-change', ev));
+            el.value.addEventListener('cx-focus', (ev) => emit('cx-focus', ev));
+            el.value.addEventListener('cx-blur', (ev) => emit('cx-blur', ev));
+            el.value.addEventListener('cx-keydown', (ev) => emit('cx-keydown', ev));
+            el.value.addEventListener('cx-keyup', (ev) => emit('cx-keyup', ev));
+        });
+        expose({
+            /** Opens the dropdown. */
+            open() { el.value?.open(); },
+            /** Closes the dropdown. */
+            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.mode != null)
+                attrs['mode'] = typeof props.mode === 'object' ? JSON.stringify(props.mode) : String(props.mode);
+            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'] = '';
+            return h('cx-select', { ref: el, ...attrs });
+        };
+    },
+});

package/dist/separator.d.ts

@@ -0,0 +1,51 @@
+export declare const Separator: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+        required: true;
+    };
+    variant: {
+        type: StringConstructor;
+    };
+    orientation: {
+        type: StringConstructor;
+    };
+    size: {
+        type: StringConstructor;
+    };
+    label: {
+        type: StringConstructor;
+    };
+    semantic: {
+        type: BooleanConstructor;
+    };
+    color: {
+        type: StringConstructor;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, never[], never, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+        required: true;
+    };
+    variant: {
+        type: StringConstructor;
+    };
+    orientation: {
+        type: StringConstructor;
+    };
+    size: {
+        type: StringConstructor;
+    };
+    label: {
+        type: StringConstructor;
+    };
+    semantic: {
+        type: BooleanConstructor;
+    };
+    color: {
+        type: StringConstructor;
+    };
+}>> & Readonly<{}>, {
+    semantic: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/separator.js

@@ -0,0 +1,42 @@
+// Auto-generated by scripts/generate-vue.mjs — DO NOT EDIT
+// Vue 3 wrapper for <cx-separator>
+import { defineComponent, ref, onMounted, h } from 'vue';
+export const Separator = defineComponent({
+    name: 'Separator',
+    props: {
+        id: { type: String, required: true },
+        variant: { type: String },
+        orientation: { type: String },
+        size: { type: String },
+        label: { type: String },
+        semantic: { type: Boolean },
+        color: { type: String },
+    },
+    emits: [],
+    setup(props, { emit, slots, expose }) {
+        const el = ref(null);
+        expose({ el });
+        onMounted(() => {
+            if (!el.value)
+                return;
+        });
+        return () => {
+            const attrs = {};
+            if (props.id != null)
+                attrs['id'] = props.id;
+            if (props.variant != null)
+                attrs['variant'] = props.variant;
+            if (props.orientation != null)
+                attrs['orientation'] = props.orientation;
+            if (props.size != null)
+                attrs['size'] = props.size;
+            if (props.label != null)
+                attrs['label'] = props.label;
+            if (props.semantic)
+                attrs['semantic'] = '';
+            if (props.color != null)
+                attrs['color'] = props.color;
+            return h('cx-separator', { ref: el, ...attrs }, slots.default?.());
+        };
+    },
+});

package/dist/sidebar.d.ts

@@ -0,0 +1,69 @@
+import { type PropType } from 'vue';
+import type { CloseDetail, NavigateDetail, SidebarGroup } from './types.js';
+export interface SidebarRef {
+    /** Opens the mobile sidebar drawer. */
+    open(): void;
+    /** Closes the mobile sidebar drawer. */
+    close(): void;
+    /** The underlying Custom Element. */
+    el: HTMLElement | null;
+}
+export declare const Sidebar: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+    };
+    label: {
+        type: StringConstructor;
+    };
+    groups: {
+        type: PropType<SidebarGroup[] | string>;
+    };
+    separatorsAfter: {
+        type: StringConstructor;
+    };
+    side: {
+        type: PropType<"left" | "right">;
+    };
+    state: {
+        type: PropType<"expanded" | "narrow" | "hidden">;
+    };
+    shape: {
+        type: PropType<"sharp" | "rounded" | "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, {
+    'cx-close': (event: CustomEvent<CloseDetail>) => true;
+    'cx-navigate': (event: CustomEvent<NavigateDetail>) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+    };
+    label: {
+        type: StringConstructor;
+    };
+    groups: {
+        type: PropType<SidebarGroup[] | string>;
+    };
+    separatorsAfter: {
+        type: StringConstructor;
+    };
+    side: {
+        type: PropType<"left" | "right">;
+    };
+    state: {
+        type: PropType<"expanded" | "narrow" | "hidden">;
+    };
+    shape: {
+        type: PropType<"sharp" | "rounded" | "pill">;
+    };
+    size: {
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
+    };
+}>> & Readonly<{
+    "onCx-navigate"?: ((event: CustomEvent<NavigateDetail>) => any) | undefined;
+    "onCx-close"?: ((event: CustomEvent<CloseDetail>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/sidebar.js

@@ -0,0 +1,68 @@
+// Auto-generated by scripts/generate-vue.mjs — DO NOT EDIT
+// Vue 3 wrapper for <cx-sidebar>
+import { defineComponent, ref, h, onMounted, watch } from 'vue';
+export const Sidebar = defineComponent({
+    name: 'Sidebar',
+    props: {
+        id: { type: String },
+        label: { type: String },
+        groups: { type: [Array, Object, String] },
+        separatorsAfter: { type: String },
+        side: { type: String },
+        state: { type: String },
+        shape: { type: String },
+        size: { type: String },
+    },
+    emits: {
+        'cx-close': (event) => true,
+        'cx-navigate': (event) => true,
+    },
+    setup(props, { emit, slots, expose }) {
+        const el = ref(null);
+        const listeners = [];
+        onMounted(() => {
+            if (!el.value)
+                return;
+            watch(() => props.groups, (val) => {
+                if (!el.value)
+                    return;
+                if (val != null)
+                    el.value.setAttribute('groups', typeof val === 'object' ? JSON.stringify(val) : String(val));
+                else
+                    el.value.removeAttribute('groups');
+            }, { immediate: true });
+            // Event listeners
+            el.value.addEventListener('cx-close', (ev) => emit('cx-close', ev));
+            el.value.addEventListener('cx-navigate', (ev) => emit('cx-navigate', ev));
+        });
+        expose({
+            /** Opens the mobile sidebar drawer. */
+            open() { el.value?.open(); },
+            /** Closes the mobile sidebar drawer. */
+            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.separatorsAfter != null)
+                attrs['separators-after'] = typeof props.separatorsAfter === 'object' ? JSON.stringify(props.separatorsAfter) : String(props.separatorsAfter);
+            if (props.side != null)
+                attrs['side'] = typeof props.side === 'object' ? JSON.stringify(props.side) : String(props.side);
+            if (props.state != null)
+                attrs['state'] = typeof props.state === 'object' ? JSON.stringify(props.state) : String(props.state);
+            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-sidebar', { ref: el, ...attrs }, [
+                slots.header ? h('div', { slot: 'header', style: 'display:contents' }, slots.header()) : undefined,
+                slots.footer ? h('div', { slot: 'footer', style: 'display:contents' }, slots.footer()) : undefined
+            ]);
+        };
+    },
+});

package/dist/skeleton.d.ts

@@ -0,0 +1,42 @@
+import { type PropType } from 'vue';
+export declare const Skeleton: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+    };
+    variant: {
+        type: PropType<"text" | "circle" | "rectangular">;
+    };
+    animation: {
+        type: PropType<"pulse" | "wave">;
+    };
+    label: {
+        type: StringConstructor;
+    };
+    size: {
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
+    };
+    lines: {
+        type: NumberConstructor;
+    };
+}>, () => 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<"text" | "circle" | "rectangular">;
+    };
+    animation: {
+        type: PropType<"pulse" | "wave">;
+    };
+    label: {
+        type: StringConstructor;
+    };
+    size: {
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
+    };
+    lines: {
+        type: NumberConstructor;
+    };
+}>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/skeleton.js

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

package/dist/slider.d.ts

@@ -0,0 +1,133 @@
+import { type PropType } from 'vue';
+import type { FocusDetail, KeyboardDetail, SliderDetail } from './types.js';
+export interface SliderRef {
+    /** Focuses the range input. */
+    focus(): void;
+    /** The underlying Custom Element. */
+    el: HTMLElement | null;
+}
+export declare const Slider: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+    };
+    label: {
+        type: StringConstructor;
+    };
+    ariaLabel: {
+        type: StringConstructor;
+    };
+    value: {
+        type: NumberConstructor;
+    };
+    min: {
+        type: NumberConstructor;
+    };
+    max: {
+        type: NumberConstructor;
+    };
+    step: {
+        type: NumberConstructor;
+    };
+    orientation: {
+        type: PropType<"horizontal" | "vertical">;
+    };
+    shape: {
+        type: PropType<"sharp" | "rounded" | "pill">;
+    };
+    intent: {
+        type: PropType<"neutral" | "primary" | "info" | "success" | "warning" | "danger">;
+    };
+    size: {
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
+    };
+    showValue: {
+        type: BooleanConstructor;
+    };
+    valueText: {
+        type: StringConstructor;
+    };
+    helperText: {
+        type: StringConstructor;
+    };
+    errorText: {
+        type: StringConstructor;
+    };
+    disabled: {
+        type: BooleanConstructor;
+    };
+    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<SliderDetail>) => true;
+    'cx-change': (event: CustomEvent) => 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;
+    };
+    ariaLabel: {
+        type: StringConstructor;
+    };
+    value: {
+        type: NumberConstructor;
+    };
+    min: {
+        type: NumberConstructor;
+    };
+    max: {
+        type: NumberConstructor;
+    };
+    step: {
+        type: NumberConstructor;
+    };
+    orientation: {
+        type: PropType<"horizontal" | "vertical">;
+    };
+    shape: {
+        type: PropType<"sharp" | "rounded" | "pill">;
+    };
+    intent: {
+        type: PropType<"neutral" | "primary" | "info" | "success" | "warning" | "danger">;
+    };
+    size: {
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
+    };
+    showValue: {
+        type: BooleanConstructor;
+    };
+    valueText: {
+        type: StringConstructor;
+    };
+    helperText: {
+        type: StringConstructor;
+    };
+    errorText: {
+        type: StringConstructor;
+    };
+    disabled: {
+        type: BooleanConstructor;
+    };
+    unlabeled: {
+        type: BooleanConstructor;
+    };
+}>> & Readonly<{
+    "onCx-change"?: ((event: CustomEvent<any>) => any) | undefined;
+    "onCx-input"?: ((event: CustomEvent<SliderDetail>) => 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;
+    unlabeled: boolean;
+    showValue: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/slider.js

@@ -0,0 +1,98 @@
+// Auto-generated by scripts/generate-vue.mjs — DO NOT EDIT
+// Vue 3 wrapper for <cx-slider>
+import { defineComponent, ref, h, onMounted, watch } from 'vue';
+export const Slider = defineComponent({
+    name: 'Slider',
+    props: {
+        id: { type: String },
+        label: { type: String },
+        ariaLabel: { type: String },
+        value: { type: Number },
+        min: { type: Number },
+        max: { type: Number },
+        step: { type: Number },
+        orientation: { type: String },
+        shape: { type: String },
+        intent: { type: String },
+        size: { type: String },
+        showValue: { type: Boolean },
+        valueText: { type: String },
+        helperText: { type: String },
+        errorText: { type: String },
+        disabled: { type: Boolean },
+        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;
+            watch(() => props.value, (val) => {
+                if (!el.value)
+                    return;
+                if (val != null)
+                    el.value.setAttribute('value', String(val));
+                else
+                    el.value.removeAttribute('value');
+            }, { 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({
+            /** Focuses the range 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.ariaLabel != null)
+                attrs['aria-label'] = typeof props.ariaLabel === 'object' ? JSON.stringify(props.ariaLabel) : String(props.ariaLabel);
+            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.step != null)
+                attrs['step'] = typeof props.step === 'object' ? JSON.stringify(props.step) : String(props.step);
+            if (props.orientation != null)
+                attrs['orientation'] = typeof props.orientation === 'object' ? JSON.stringify(props.orientation) : String(props.orientation);
+            if (props.shape != null)
+                attrs['shape'] = typeof props.shape === 'object' ? JSON.stringify(props.shape) : String(props.shape);
+            if (props.intent != null)
+                attrs['intent'] = typeof props.intent === 'object' ? JSON.stringify(props.intent) : String(props.intent);
+            if (props.size != null)
+                attrs['size'] = typeof props.size === 'object' ? JSON.stringify(props.size) : String(props.size);
+            if (props.showValue)
+                attrs['show-value'] = '';
+            if (props.valueText != null)
+                attrs['value-text'] = typeof props.valueText === 'object' ? JSON.stringify(props.valueText) : String(props.valueText);
+            if (props.helperText != null)
+                attrs['helper-text'] = typeof props.helperText === 'object' ? JSON.stringify(props.helperText) : String(props.helperText);
+            if (props.errorText != null)
+                attrs['error-text'] = typeof props.errorText === 'object' ? JSON.stringify(props.errorText) : String(props.errorText);
+            if (props.disabled)
+                attrs['disabled'] = '';
+            if (props.unlabeled)
+                attrs['unlabeled'] = '';
+            return h('cx-slider', { ref: el, ...attrs });
+        };
+    },
+});