@colletdev/vue 0.1.3

package/dist/dialog.js

@@ -0,0 +1,63 @@
+// Auto-generated by scripts/generate-vue.mjs — DO NOT EDIT
+// Vue 3 wrapper for <cx-dialog>
+import { defineComponent, ref, h, onMounted, watch } from 'vue';
+export const Dialog = defineComponent({
+    name: 'Dialog',
+    props: {
+        id: { type: String },
+        title: { type: String },
+        variant: { type: String },
+        description: { type: String },
+        size: { type: String },
+        closeButton: { type: String },
+        drawer: { type: String },
+    },
+    emits: {
+        'cx-close': (event) => true,
+    },
+    setup(props, { emit, slots, expose }) {
+        const el = ref(null);
+        const listeners = [];
+        onMounted(() => {
+            if (!el.value)
+                return;
+            watch(() => props.title, (val) => {
+                if (!el.value)
+                    return;
+                if (val != null)
+                    el.value.setAttribute('title', String(val));
+                else
+                    el.value.removeAttribute('title');
+            }, { immediate: true });
+            // Event listeners
+            el.value.addEventListener('cx-close', (ev) => emit('cx-close', ev));
+        });
+        expose({
+            /** Opens the dialog modal with entrance animation. */
+            open() { el.value?.open(); },
+            /** Closes the dialog modal with exit animation. */
+            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.variant != null)
+                attrs['variant'] = typeof props.variant === 'object' ? JSON.stringify(props.variant) : String(props.variant);
+            if (props.description != null)
+                attrs['description'] = typeof props.description === 'object' ? JSON.stringify(props.description) : String(props.description);
+            if (props.size != null)
+                attrs['size'] = typeof props.size === 'object' ? JSON.stringify(props.size) : String(props.size);
+            if (props.closeButton != null)
+                attrs['close-button'] = typeof props.closeButton === 'object' ? JSON.stringify(props.closeButton) : String(props.closeButton);
+            if (props.drawer != null)
+                attrs['drawer'] = typeof props.drawer === 'object' ? JSON.stringify(props.drawer) : String(props.drawer);
+            return h('cx-dialog', { ref: el, ...attrs }, [
+                slots.footer ? h('div', { slot: 'footer', style: 'display:contents' }, slots.footer()) : undefined,
+                slots.default?.()
+            ]);
+        };
+    },
+});

package/dist/drawer.d.ts

@@ -0,0 +1,61 @@
+import { type PropType } from 'vue';
+import type { CloseDetail } from './types.js';
+export interface DrawerRef {
+    /** Opens the drawer panel with slide-in animation. */
+    open(): void;
+    /** Closes the drawer panel with slide-out animation. */
+    close(): void;
+    /** The underlying Custom Element. */
+    el: HTMLElement | null;
+}
+export declare const Drawer: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+    };
+    title: {
+        type: StringConstructor;
+    };
+    description: {
+        type: StringConstructor;
+    };
+    side: {
+        type: PropType<"left" | "right" | "top" | "bottom">;
+    };
+    size: {
+        type: PropType<"sm" | "md" | "lg" | "xl" | "full">;
+    };
+    shape: {
+        type: PropType<"sharp" | "rounded" | "pill">;
+    };
+    closeButton: {
+        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;
+    };
+    description: {
+        type: StringConstructor;
+    };
+    side: {
+        type: PropType<"left" | "right" | "top" | "bottom">;
+    };
+    size: {
+        type: PropType<"sm" | "md" | "lg" | "xl" | "full">;
+    };
+    shape: {
+        type: PropType<"sharp" | "rounded" | "pill">;
+    };
+    closeButton: {
+        type: StringConstructor;
+    };
+}>> & Readonly<{
+    "onCx-close"?: ((event: CustomEvent<CloseDetail>) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/drawer.js

@@ -0,0 +1,63 @@
+// Auto-generated by scripts/generate-vue.mjs — DO NOT EDIT
+// Vue 3 wrapper for <cx-drawer>
+import { defineComponent, ref, h, onMounted, watch } from 'vue';
+export const Drawer = defineComponent({
+    name: 'Drawer',
+    props: {
+        id: { type: String },
+        title: { type: String },
+        description: { type: String },
+        side: { type: String },
+        size: { type: String },
+        shape: { type: String },
+        closeButton: { type: String },
+    },
+    emits: {
+        'cx-close': (event) => true,
+    },
+    setup(props, { emit, slots, expose }) {
+        const el = ref(null);
+        const listeners = [];
+        onMounted(() => {
+            if (!el.value)
+                return;
+            watch(() => props.title, (val) => {
+                if (!el.value)
+                    return;
+                if (val != null)
+                    el.value.setAttribute('title', String(val));
+                else
+                    el.value.removeAttribute('title');
+            }, { immediate: true });
+            // Event listeners
+            el.value.addEventListener('cx-close', (ev) => emit('cx-close', ev));
+        });
+        expose({
+            /** Opens the drawer panel with slide-in animation. */
+            open() { el.value?.open(); },
+            /** Closes the drawer panel with slide-out animation. */
+            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.description != null)
+                attrs['description'] = typeof props.description === 'object' ? JSON.stringify(props.description) : String(props.description);
+            if (props.side != null)
+                attrs['side'] = typeof props.side === 'object' ? JSON.stringify(props.side) : String(props.side);
+            if (props.size != null)
+                attrs['size'] = typeof props.size === 'object' ? JSON.stringify(props.size) : String(props.size);
+            if (props.shape != null)
+                attrs['shape'] = typeof props.shape === 'object' ? JSON.stringify(props.shape) : String(props.shape);
+            if (props.closeButton != null)
+                attrs['close-button'] = typeof props.closeButton === 'object' ? JSON.stringify(props.closeButton) : String(props.closeButton);
+            return h('cx-drawer', { ref: el, ...attrs }, [
+                slots.footer ? h('div', { slot: 'footer', style: 'display:contents' }, slots.footer()) : undefined,
+                slots.default?.()
+            ]);
+        };
+    },
+});

package/dist/fab.d.ts

@@ -0,0 +1,81 @@
+import { type PropType } from 'vue';
+import type { ClickDetail } from './types.js';
+export declare const Fab: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    icon: {
+        type: StringConstructor;
+    };
+    label: {
+        type: StringConstructor;
+    };
+    ariaLabel: {
+        type: StringConstructor;
+    };
+    variant: {
+        type: PropType<"filled" | "outline" | "ghost">;
+    };
+    intent: {
+        type: PropType<"neutral" | "primary" | "info" | "success" | "warning" | "danger">;
+    };
+    shape: {
+        type: PropType<"rounded" | "pill">;
+    };
+    size: {
+        type: PropType<"sm" | "md" | "lg">;
+    };
+    disabled: {
+        type: BooleanConstructor;
+    };
+    hasPopup: {
+        type: BooleanConstructor;
+    };
+    expanded: {
+        type: BooleanConstructor;
+    };
+    controls: {
+        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;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    icon: {
+        type: StringConstructor;
+    };
+    label: {
+        type: StringConstructor;
+    };
+    ariaLabel: {
+        type: StringConstructor;
+    };
+    variant: {
+        type: PropType<"filled" | "outline" | "ghost">;
+    };
+    intent: {
+        type: PropType<"neutral" | "primary" | "info" | "success" | "warning" | "danger">;
+    };
+    shape: {
+        type: PropType<"rounded" | "pill">;
+    };
+    size: {
+        type: PropType<"sm" | "md" | "lg">;
+    };
+    disabled: {
+        type: BooleanConstructor;
+    };
+    hasPopup: {
+        type: BooleanConstructor;
+    };
+    expanded: {
+        type: BooleanConstructor;
+    };
+    controls: {
+        type: StringConstructor;
+    };
+}>> & Readonly<{
+    "onCx-click"?: ((event: CustomEvent<ClickDetail>) => any) | undefined;
+}>, {
+    disabled: boolean;
+    expanded: boolean;
+    hasPopup: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/fab.js

@@ -0,0 +1,62 @@
+// Auto-generated by scripts/generate-vue.mjs — DO NOT EDIT
+// Vue 3 wrapper for <cx-fab>
+import { defineComponent, ref, h, onMounted } from 'vue';
+export const Fab = defineComponent({
+    name: 'Fab',
+    props: {
+        icon: { type: String },
+        label: { type: String },
+        ariaLabel: { type: String },
+        variant: { type: String },
+        intent: { type: String },
+        shape: { type: String },
+        size: { type: String },
+        disabled: { type: Boolean },
+        hasPopup: { type: Boolean },
+        expanded: { type: Boolean },
+        controls: { type: String },
+    },
+    emits: {
+        'cx-click': (event) => true,
+    },
+    setup(props, { emit, slots, expose }) {
+        const el = ref(null);
+        const listeners = [];
+        onMounted(() => {
+            if (!el.value)
+                return;
+            // Event listeners
+            el.value.addEventListener('cx-click', (ev) => emit('cx-click', ev));
+        });
+        expose({
+            /** The underlying Custom Element. */
+            el,
+        });
+        return () => {
+            const attrs = {};
+            if (props.icon != null)
+                attrs['icon'] = typeof props.icon === 'object' ? JSON.stringify(props.icon) : String(props.icon);
+            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.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.disabled)
+                attrs['disabled'] = '';
+            if (props.hasPopup)
+                attrs['has-popup'] = '';
+            if (props.expanded)
+                attrs['expanded'] = '';
+            if (props.controls != null)
+                attrs['controls'] = typeof props.controls === 'object' ? JSON.stringify(props.controls) : String(props.controls);
+            return h('cx-fab', { ref: el, ...attrs });
+        };
+    },
+});

package/dist/file-upload.d.ts

@@ -0,0 +1,104 @@
+import { type PropType } from 'vue';
+export declare const FileUpload: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+    };
+    label: {
+        type: StringConstructor;
+    };
+    mode: {
+        type: PropType<"inline" | "overlay">;
+    };
+    variant: {
+        type: PropType<"outline" | "filled" | "subtle">;
+    };
+    shape: {
+        type: PropType<"sharp" | "rounded" | "pill">;
+    };
+    size: {
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
+    };
+    disabled: {
+        type: BooleanConstructor;
+    };
+    multiple: {
+        type: BooleanConstructor;
+    };
+    accept: {
+        type: StringConstructor;
+    };
+    maxSize: {
+        type: NumberConstructor;
+    };
+    heading: {
+        type: StringConstructor;
+    };
+    browseText: {
+        type: StringConstructor;
+    };
+    hint: {
+        type: StringConstructor;
+    };
+    capture: {
+        type: StringConstructor;
+    };
+    preview: {
+        type: BooleanConstructor;
+    };
+}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    'cx-change': (event: CustomEvent) => true;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    id: {
+        type: StringConstructor;
+    };
+    label: {
+        type: StringConstructor;
+    };
+    mode: {
+        type: PropType<"inline" | "overlay">;
+    };
+    variant: {
+        type: PropType<"outline" | "filled" | "subtle">;
+    };
+    shape: {
+        type: PropType<"sharp" | "rounded" | "pill">;
+    };
+    size: {
+        type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
+    };
+    disabled: {
+        type: BooleanConstructor;
+    };
+    multiple: {
+        type: BooleanConstructor;
+    };
+    accept: {
+        type: StringConstructor;
+    };
+    maxSize: {
+        type: NumberConstructor;
+    };
+    heading: {
+        type: StringConstructor;
+    };
+    browseText: {
+        type: StringConstructor;
+    };
+    hint: {
+        type: StringConstructor;
+    };
+    capture: {
+        type: StringConstructor;
+    };
+    preview: {
+        type: BooleanConstructor;
+    };
+}>> & Readonly<{
+    "onCx-change"?: ((event: CustomEvent<any>) => any) | undefined;
+}>, {
+    multiple: boolean;
+    disabled: boolean;
+    preview: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;

package/dist/file-upload.js

@@ -0,0 +1,74 @@
+// Auto-generated by scripts/generate-vue.mjs — DO NOT EDIT
+// Vue 3 wrapper for <cx-file-upload>
+import { defineComponent, ref, h, onMounted } from 'vue';
+export const FileUpload = defineComponent({
+    name: 'FileUpload',
+    props: {
+        id: { type: String },
+        label: { type: String },
+        mode: { type: String },
+        variant: { type: String },
+        shape: { type: String },
+        size: { type: String },
+        disabled: { type: Boolean },
+        multiple: { type: Boolean },
+        accept: { type: String },
+        maxSize: { type: Number },
+        heading: { type: String },
+        browseText: { type: String },
+        hint: { type: String },
+        capture: { type: String },
+        preview: { 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({
+            /** 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.mode != null)
+                attrs['mode'] = typeof props.mode === 'object' ? JSON.stringify(props.mode) : String(props.mode);
+            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.disabled)
+                attrs['disabled'] = '';
+            if (props.multiple)
+                attrs['multiple'] = '';
+            if (props.accept != null)
+                attrs['accept'] = typeof props.accept === 'object' ? JSON.stringify(props.accept) : String(props.accept);
+            if (props.maxSize != null)
+                attrs['max-size'] = typeof props.maxSize === 'object' ? JSON.stringify(props.maxSize) : String(props.maxSize);
+            if (props.heading != null)
+                attrs['heading'] = typeof props.heading === 'object' ? JSON.stringify(props.heading) : String(props.heading);
+            if (props.browseText != null)
+                attrs['browse-text'] = typeof props.browseText === 'object' ? JSON.stringify(props.browseText) : String(props.browseText);
+            if (props.hint != null)
+                attrs['hint'] = typeof props.hint === 'object' ? JSON.stringify(props.hint) : String(props.hint);
+            if (props.capture != null)
+                attrs['capture'] = typeof props.capture === 'object' ? JSON.stringify(props.capture) : String(props.capture);
+            if (props.preview)
+                attrs['preview'] = '';
+            return h('cx-file-upload', { ref: el, ...attrs });
+        };
+    },
+});

package/dist/index.d.ts

@@ -0,0 +1,54 @@
+import '@colletdev/core';
+export { init, componentNames } from '@colletdev/core';
+export type { InitOptions, ComponentName } from '@colletdev/core';
+export type { SelectOption, OptionGroup, TabItem, TableColumn, TableCell, TableRow, SortState, PaginationConfig, FooterRow, EmptyStateConfig, AccordionItem, MenuEntry, MenuRadioItem, SidebarNavItem, SidebarGroup, BreadcrumbItem, RadioOption, ToggleItem, SplitMenuEntry, SpeedDialAction, CarouselSlide, MessageGroupPart, StepperStep, } from './types.js';
+export type { InputDetail, SelectDetail, CheckedDetail, SliderDetail, ToggleDetail, AccordionDetail, CollapsibleDetail, MenuActionDetail, MenuChangeDetail, SortDetail, TableSelectDetail, TableExpandDetail, PageDetail, NavigateDetail, ClickDetail, CloseDetail, DismissDetail, FocusDetail, KeyboardDetail, CarouselDetail, FileChangeDetail, FileInfo, } from './types.js';
+export { Accordion } from './accordion.js';
+export { ActivityGroup } from './activity-group.js';
+export { Alert } from './alert.js';
+export { Autocomplete, type AutocompleteRef } from './autocomplete.js';
+export { Avatar } from './avatar.js';
+export { Backdrop } from './backdrop.js';
+export { Badge } from './badge.js';
+export { Breadcrumb } from './breadcrumb.js';
+export { Button } from './button.js';
+export { Card } from './card.js';
+export { Carousel, type CarouselRef } from './carousel.js';
+export { ChatInput, type ChatInputRef } from './chat-input.js';
+export { Checkbox, type CheckboxRef } from './checkbox.js';
+export { CodeBlock } from './code-block.js';
+export { Collapsible, type CollapsibleRef } from './collapsible.js';
+export { DatePicker, type DatePickerRef } from './date-picker.js';
+export { Dialog, type DialogRef } from './dialog.js';
+export { Drawer, type DrawerRef } from './drawer.js';
+export { Fab } from './fab.js';
+export { FileUpload } from './file-upload.js';
+export { Listbox } from './listbox.js';
+export { Menu, type MenuRef } from './menu.js';
+export { MessageBubble } from './message-bubble.js';
+export { MessageGroup } from './message-group.js';
+export { MessagePart } from './message-part.js';
+export { Pagination } from './pagination.js';
+export { Popover, type PopoverRef } from './popover.js';
+export { ProfileMenu, type ProfileMenuRef } from './profile-menu.js';
+export { Progress } from './progress.js';
+export { RadioGroup } from './radio-group.js';
+export { Scrollbar } from './scrollbar.js';
+export { SearchBar, type SearchBarRef } from './search-bar.js';
+export { Select, type SelectRef } from './select.js';
+export { Sidebar, type SidebarRef } from './sidebar.js';
+export { Skeleton } from './skeleton.js';
+export { Slider, type SliderRef } from './slider.js';
+export { SpeedDial, type SpeedDialRef } from './speed-dial.js';
+export { Spinner } from './spinner.js';
+export { SplitButton, type SplitButtonRef } from './split-button.js';
+export { Stepper } from './stepper.js';
+export { Switch, type SwitchRef } from './switch.js';
+export { Table } from './table.js';
+export { Tabs, type TabsRef } from './tabs.js';
+export { Text } from './text.js';
+export { TextInput, type TextInputRef } from './text-input.js';
+export { Thinking } from './thinking.js';
+export { Toast, type ToastRef } from './toast.js';
+export { ToggleGroup } from './toggle-group.js';
+export { Tooltip } from './tooltip.js';

package/dist/index.js

@@ -0,0 +1,54 @@
+// Auto-generated by scripts/generate-vue.mjs — DO NOT EDIT
+// Consumers must call `init()` from @colletdev/core before using these wrappers.
+import '@colletdev/core';
+// Re-export init and types from core
+export { init, componentNames } from '@colletdev/core';
+export { Accordion } from './accordion.js';
+export { ActivityGroup } from './activity-group.js';
+export { Alert } from './alert.js';
+export { Autocomplete } from './autocomplete.js';
+export { Avatar } from './avatar.js';
+export { Backdrop } from './backdrop.js';
+export { Badge } from './badge.js';
+export { Breadcrumb } from './breadcrumb.js';
+export { Button } from './button.js';
+export { Card } from './card.js';
+export { Carousel } from './carousel.js';
+export { ChatInput } from './chat-input.js';
+export { Checkbox } from './checkbox.js';
+export { CodeBlock } from './code-block.js';
+export { Collapsible } from './collapsible.js';
+export { DatePicker } from './date-picker.js';
+export { Dialog } from './dialog.js';
+export { Drawer } from './drawer.js';
+export { Fab } from './fab.js';
+export { FileUpload } from './file-upload.js';
+export { Listbox } from './listbox.js';
+export { Menu } from './menu.js';
+export { MessageBubble } from './message-bubble.js';
+export { MessageGroup } from './message-group.js';
+export { MessagePart } from './message-part.js';
+export { Pagination } from './pagination.js';
+export { Popover } from './popover.js';
+export { ProfileMenu } from './profile-menu.js';
+export { Progress } from './progress.js';
+export { RadioGroup } from './radio-group.js';
+export { Scrollbar } from './scrollbar.js';
+export { SearchBar } from './search-bar.js';
+export { Select } from './select.js';
+export { Sidebar } from './sidebar.js';
+export { Skeleton } from './skeleton.js';
+export { Slider } from './slider.js';
+export { SpeedDial } from './speed-dial.js';
+export { Spinner } from './spinner.js';
+export { SplitButton } from './split-button.js';
+export { Stepper } from './stepper.js';
+export { Switch } from './switch.js';
+export { Table } from './table.js';
+export { Tabs } from './tabs.js';
+export { Text } from './text.js';
+export { TextInput } from './text-input.js';
+export { Thinking } from './thinking.js';
+export { Toast } from './toast.js';
+export { ToggleGroup } from './toggle-group.js';
+export { Tooltip } from './tooltip.js';