@colletdev/vue 0.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +64 -0
- package/dist/accordion.d.ts +68 -0
- package/dist/accordion.js +68 -0
- package/dist/activity-group.d.ts +56 -0
- package/dist/activity-group.js +50 -0
- package/dist/alert.d.ts +94 -0
- package/dist/alert.js +76 -0
- package/dist/autocomplete.d.ts +161 -0
- package/dist/autocomplete.js +132 -0
- package/dist/avatar.d.ts +50 -0
- package/dist/avatar.js +47 -0
- package/dist/backdrop.d.ts +25 -0
- package/dist/backdrop.js +35 -0
- package/dist/badge.d.ts +74 -0
- package/dist/badge.js +59 -0
- package/dist/breadcrumb.d.ts +49 -0
- package/dist/breadcrumb.js +53 -0
- package/dist/button.d.ts +92 -0
- package/dist/button.js +68 -0
- package/dist/card.d.ts +60 -0
- package/dist/card.js +58 -0
- package/dist/carousel.d.ts +97 -0
- package/dist/carousel.js +77 -0
- package/dist/chat-input.d.ts +99 -0
- package/dist/chat-input.js +79 -0
- package/dist/checkbox.d.ts +93 -0
- package/dist/checkbox.js +75 -0
- package/dist/code-block.d.ts +77 -0
- package/dist/code-block.js +59 -0
- package/dist/collapsible.d.ts +73 -0
- package/dist/collapsible.js +62 -0
- package/dist/date-picker.d.ts +145 -0
- package/dist/date-picker.js +111 -0
- package/dist/dialog.d.ts +61 -0
- package/dist/dialog.js +63 -0
- package/dist/drawer.d.ts +61 -0
- package/dist/drawer.js +63 -0
- package/dist/fab.d.ts +81 -0
- package/dist/fab.js +62 -0
- package/dist/file-upload.d.ts +104 -0
- package/dist/file-upload.js +74 -0
- package/dist/index.d.ts +54 -0
- package/dist/index.js +54 -0
- package/dist/label.d.ts +66 -0
- package/dist/label.js +48 -0
- package/dist/listbox.d.ts +65 -0
- package/dist/listbox.js +77 -0
- package/dist/menu.d.ts +83 -0
- package/dist/menu.js +78 -0
- package/dist/message-bubble.d.ts +74 -0
- package/dist/message-bubble.js +67 -0
- package/dist/message-group.d.ts +51 -0
- package/dist/message-group.js +59 -0
- package/dist/message-part.d.ts +3 -0
- package/dist/message-part.js +25 -0
- package/dist/pagination.d.ts +81 -0
- package/dist/pagination.js +59 -0
- package/dist/popover.d.ts +104 -0
- package/dist/popover.js +92 -0
- package/dist/profile-menu.d.ts +77 -0
- package/dist/profile-menu.js +72 -0
- package/dist/progress.d.ts +50 -0
- package/dist/progress.js +48 -0
- package/dist/radio-group.d.ts +92 -0
- package/dist/radio-group.js +84 -0
- package/dist/scrollbar.d.ts +48 -0
- package/dist/scrollbar.js +55 -0
- package/dist/search-bar.d.ts +127 -0
- package/dist/search-bar.js +105 -0
- package/dist/select.d.ts +124 -0
- package/dist/select.js +114 -0
- package/dist/separator.d.ts +51 -0
- package/dist/separator.js +42 -0
- package/dist/sidebar.d.ts +69 -0
- package/dist/sidebar.js +68 -0
- package/dist/skeleton.d.ts +42 -0
- package/dist/skeleton.js +44 -0
- package/dist/slider.d.ts +133 -0
- package/dist/slider.js +98 -0
- package/dist/speed-dial.d.ts +103 -0
- package/dist/speed-dial.js +79 -0
- package/dist/spinner.d.ts +30 -0
- package/dist/spinner.js +38 -0
- package/dist/split-button.d.ts +101 -0
- package/dist/split-button.js +77 -0
- package/dist/stepper.d.ts +67 -0
- package/dist/stepper.js +62 -0
- package/dist/switch.d.ts +100 -0
- package/dist/switch.js +75 -0
- package/dist/table.d.ts +135 -0
- package/dist/table.js +147 -0
- package/dist/tabs.d.ts +65 -0
- package/dist/tabs.js +67 -0
- package/dist/text-input.d.ts +193 -0
- package/dist/text-input.js +134 -0
- package/dist/text.d.ts +99 -0
- package/dist/text.js +88 -0
- package/dist/thinking.d.ts +42 -0
- package/dist/thinking.js +44 -0
- package/dist/toast.d.ts +86 -0
- package/dist/toast.js +72 -0
- package/dist/toggle-group.d.ts +83 -0
- package/dist/toggle-group.js +77 -0
- package/dist/tooltip.d.ts +52 -0
- package/dist/tooltip.js +50 -0
- package/dist/types.d.ts +256 -0
- package/dist/types.js +4 -0
- package/package.json +44 -0
package/dist/label.d.ts
ADDED
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
export declare const Label: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
2
|
+
id: {
|
|
3
|
+
type: StringConstructor;
|
|
4
|
+
required: true;
|
|
5
|
+
};
|
|
6
|
+
text: {
|
|
7
|
+
type: StringConstructor;
|
|
8
|
+
required: true;
|
|
9
|
+
};
|
|
10
|
+
forInput: {
|
|
11
|
+
type: StringConstructor;
|
|
12
|
+
};
|
|
13
|
+
size: {
|
|
14
|
+
type: StringConstructor;
|
|
15
|
+
};
|
|
16
|
+
required: {
|
|
17
|
+
type: BooleanConstructor;
|
|
18
|
+
};
|
|
19
|
+
optionalText: {
|
|
20
|
+
type: StringConstructor;
|
|
21
|
+
};
|
|
22
|
+
disabled: {
|
|
23
|
+
type: BooleanConstructor;
|
|
24
|
+
};
|
|
25
|
+
helperText: {
|
|
26
|
+
type: StringConstructor;
|
|
27
|
+
};
|
|
28
|
+
error: {
|
|
29
|
+
type: StringConstructor;
|
|
30
|
+
};
|
|
31
|
+
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
32
|
+
[key: string]: any;
|
|
33
|
+
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, never[], never, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
34
|
+
id: {
|
|
35
|
+
type: StringConstructor;
|
|
36
|
+
required: true;
|
|
37
|
+
};
|
|
38
|
+
text: {
|
|
39
|
+
type: StringConstructor;
|
|
40
|
+
required: true;
|
|
41
|
+
};
|
|
42
|
+
forInput: {
|
|
43
|
+
type: StringConstructor;
|
|
44
|
+
};
|
|
45
|
+
size: {
|
|
46
|
+
type: StringConstructor;
|
|
47
|
+
};
|
|
48
|
+
required: {
|
|
49
|
+
type: BooleanConstructor;
|
|
50
|
+
};
|
|
51
|
+
optionalText: {
|
|
52
|
+
type: StringConstructor;
|
|
53
|
+
};
|
|
54
|
+
disabled: {
|
|
55
|
+
type: BooleanConstructor;
|
|
56
|
+
};
|
|
57
|
+
helperText: {
|
|
58
|
+
type: StringConstructor;
|
|
59
|
+
};
|
|
60
|
+
error: {
|
|
61
|
+
type: StringConstructor;
|
|
62
|
+
};
|
|
63
|
+
}>> & Readonly<{}>, {
|
|
64
|
+
disabled: boolean;
|
|
65
|
+
required: boolean;
|
|
66
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
package/dist/label.js
ADDED
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
// Auto-generated by scripts/generate-vue.mjs — DO NOT EDIT
|
|
2
|
+
// Vue 3 wrapper for <cx-label>
|
|
3
|
+
import { defineComponent, ref, onMounted, h } from 'vue';
|
|
4
|
+
export const Label = defineComponent({
|
|
5
|
+
name: 'Label',
|
|
6
|
+
props: {
|
|
7
|
+
id: { type: String, required: true },
|
|
8
|
+
text: { type: String, required: true },
|
|
9
|
+
forInput: { type: String },
|
|
10
|
+
size: { type: String },
|
|
11
|
+
required: { type: Boolean },
|
|
12
|
+
optionalText: { type: String },
|
|
13
|
+
disabled: { type: Boolean },
|
|
14
|
+
helperText: { type: String },
|
|
15
|
+
error: { type: String },
|
|
16
|
+
},
|
|
17
|
+
emits: [],
|
|
18
|
+
setup(props, { emit, slots, expose }) {
|
|
19
|
+
const el = ref(null);
|
|
20
|
+
expose({ el });
|
|
21
|
+
onMounted(() => {
|
|
22
|
+
if (!el.value)
|
|
23
|
+
return;
|
|
24
|
+
});
|
|
25
|
+
return () => {
|
|
26
|
+
const attrs = {};
|
|
27
|
+
if (props.id != null)
|
|
28
|
+
attrs['id'] = props.id;
|
|
29
|
+
if (props.text != null)
|
|
30
|
+
attrs['text'] = props.text;
|
|
31
|
+
if (props.forInput != null)
|
|
32
|
+
attrs['for-input'] = props.forInput;
|
|
33
|
+
if (props.size != null)
|
|
34
|
+
attrs['size'] = props.size;
|
|
35
|
+
if (props.required)
|
|
36
|
+
attrs['required'] = '';
|
|
37
|
+
if (props.optionalText != null)
|
|
38
|
+
attrs['optional-text'] = props.optionalText;
|
|
39
|
+
if (props.disabled)
|
|
40
|
+
attrs['disabled'] = '';
|
|
41
|
+
if (props.helperText != null)
|
|
42
|
+
attrs['helper-text'] = props.helperText;
|
|
43
|
+
if (props.error != null)
|
|
44
|
+
attrs['error'] = props.error;
|
|
45
|
+
return h('cx-label', { ref: el, ...attrs }, slots.default?.());
|
|
46
|
+
};
|
|
47
|
+
},
|
|
48
|
+
});
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
import { type PropType } from 'vue';
|
|
2
|
+
import type { FocusDetail, KeyboardDetail, OptionGroup, SelectOption } from './types.js';
|
|
3
|
+
export declare const Listbox: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
4
|
+
id: {
|
|
5
|
+
type: StringConstructor;
|
|
6
|
+
};
|
|
7
|
+
label: {
|
|
8
|
+
type: StringConstructor;
|
|
9
|
+
};
|
|
10
|
+
shape: {
|
|
11
|
+
type: PropType<"sharp" | "rounded" | "pill">;
|
|
12
|
+
};
|
|
13
|
+
size: {
|
|
14
|
+
type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
|
|
15
|
+
};
|
|
16
|
+
selectionMode: {
|
|
17
|
+
type: StringConstructor;
|
|
18
|
+
};
|
|
19
|
+
selected: {
|
|
20
|
+
type: PropType<string[] | string>;
|
|
21
|
+
};
|
|
22
|
+
items: {
|
|
23
|
+
type: PropType<SelectOption[] | string>;
|
|
24
|
+
};
|
|
25
|
+
groups: {
|
|
26
|
+
type: PropType<OptionGroup[] | string>;
|
|
27
|
+
};
|
|
28
|
+
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
29
|
+
[key: string]: any;
|
|
30
|
+
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
31
|
+
'cx-focus': (event: CustomEvent<FocusDetail>) => true;
|
|
32
|
+
'cx-blur': (event: CustomEvent<FocusDetail>) => true;
|
|
33
|
+
'cx-keydown': (event: CustomEvent<KeyboardDetail>) => true;
|
|
34
|
+
'cx-keyup': (event: CustomEvent<KeyboardDetail>) => true;
|
|
35
|
+
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
36
|
+
id: {
|
|
37
|
+
type: StringConstructor;
|
|
38
|
+
};
|
|
39
|
+
label: {
|
|
40
|
+
type: StringConstructor;
|
|
41
|
+
};
|
|
42
|
+
shape: {
|
|
43
|
+
type: PropType<"sharp" | "rounded" | "pill">;
|
|
44
|
+
};
|
|
45
|
+
size: {
|
|
46
|
+
type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
|
|
47
|
+
};
|
|
48
|
+
selectionMode: {
|
|
49
|
+
type: StringConstructor;
|
|
50
|
+
};
|
|
51
|
+
selected: {
|
|
52
|
+
type: PropType<string[] | string>;
|
|
53
|
+
};
|
|
54
|
+
items: {
|
|
55
|
+
type: PropType<SelectOption[] | string>;
|
|
56
|
+
};
|
|
57
|
+
groups: {
|
|
58
|
+
type: PropType<OptionGroup[] | string>;
|
|
59
|
+
};
|
|
60
|
+
}>> & Readonly<{
|
|
61
|
+
"onCx-focus"?: ((event: CustomEvent<FocusDetail>) => any) | undefined;
|
|
62
|
+
"onCx-blur"?: ((event: CustomEvent<FocusDetail>) => any) | undefined;
|
|
63
|
+
"onCx-keydown"?: ((event: CustomEvent<KeyboardDetail>) => any) | undefined;
|
|
64
|
+
"onCx-keyup"?: ((event: CustomEvent<KeyboardDetail>) => any) | undefined;
|
|
65
|
+
}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
package/dist/listbox.js
ADDED
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
// Auto-generated by scripts/generate-vue.mjs — DO NOT EDIT
|
|
2
|
+
// Vue 3 wrapper for <cx-listbox>
|
|
3
|
+
import { defineComponent, ref, h, onMounted, watch } from 'vue';
|
|
4
|
+
export const Listbox = defineComponent({
|
|
5
|
+
name: 'Listbox',
|
|
6
|
+
props: {
|
|
7
|
+
id: { type: String },
|
|
8
|
+
label: { type: String },
|
|
9
|
+
shape: { type: String },
|
|
10
|
+
size: { type: String },
|
|
11
|
+
selectionMode: { type: String },
|
|
12
|
+
selected: { type: [Array, Object, String] },
|
|
13
|
+
items: { type: [Array, Object, String] },
|
|
14
|
+
groups: { type: [Array, Object, String] },
|
|
15
|
+
},
|
|
16
|
+
emits: {
|
|
17
|
+
'cx-focus': (event) => true,
|
|
18
|
+
'cx-blur': (event) => true,
|
|
19
|
+
'cx-keydown': (event) => true,
|
|
20
|
+
'cx-keyup': (event) => true,
|
|
21
|
+
},
|
|
22
|
+
setup(props, { emit, slots, expose }) {
|
|
23
|
+
const el = ref(null);
|
|
24
|
+
const listeners = [];
|
|
25
|
+
onMounted(() => {
|
|
26
|
+
if (!el.value)
|
|
27
|
+
return;
|
|
28
|
+
watch(() => props.selected, (val) => {
|
|
29
|
+
if (!el.value)
|
|
30
|
+
return;
|
|
31
|
+
if (val != null)
|
|
32
|
+
el.value.setAttribute('selected', typeof val === 'object' ? JSON.stringify(val) : String(val));
|
|
33
|
+
else
|
|
34
|
+
el.value.removeAttribute('selected');
|
|
35
|
+
}, { immediate: true });
|
|
36
|
+
watch(() => props.items, (val) => {
|
|
37
|
+
if (!el.value)
|
|
38
|
+
return;
|
|
39
|
+
if (val != null)
|
|
40
|
+
el.value.setAttribute('items', typeof val === 'object' ? JSON.stringify(val) : String(val));
|
|
41
|
+
else
|
|
42
|
+
el.value.removeAttribute('items');
|
|
43
|
+
}, { immediate: true });
|
|
44
|
+
watch(() => props.groups, (val) => {
|
|
45
|
+
if (!el.value)
|
|
46
|
+
return;
|
|
47
|
+
if (val != null)
|
|
48
|
+
el.value.setAttribute('groups', typeof val === 'object' ? JSON.stringify(val) : String(val));
|
|
49
|
+
else
|
|
50
|
+
el.value.removeAttribute('groups');
|
|
51
|
+
}, { immediate: true });
|
|
52
|
+
// Event listeners
|
|
53
|
+
el.value.addEventListener('cx-focus', (ev) => emit('cx-focus', ev));
|
|
54
|
+
el.value.addEventListener('cx-blur', (ev) => emit('cx-blur', ev));
|
|
55
|
+
el.value.addEventListener('cx-keydown', (ev) => emit('cx-keydown', ev));
|
|
56
|
+
el.value.addEventListener('cx-keyup', (ev) => emit('cx-keyup', ev));
|
|
57
|
+
});
|
|
58
|
+
expose({
|
|
59
|
+
/** The underlying Custom Element. */
|
|
60
|
+
el,
|
|
61
|
+
});
|
|
62
|
+
return () => {
|
|
63
|
+
const attrs = {};
|
|
64
|
+
if (props.id != null)
|
|
65
|
+
attrs['id'] = typeof props.id === 'object' ? JSON.stringify(props.id) : String(props.id);
|
|
66
|
+
if (props.label != null)
|
|
67
|
+
attrs['label'] = typeof props.label === 'object' ? JSON.stringify(props.label) : String(props.label);
|
|
68
|
+
if (props.shape != null)
|
|
69
|
+
attrs['shape'] = typeof props.shape === 'object' ? JSON.stringify(props.shape) : String(props.shape);
|
|
70
|
+
if (props.size != null)
|
|
71
|
+
attrs['size'] = typeof props.size === 'object' ? JSON.stringify(props.size) : String(props.size);
|
|
72
|
+
if (props.selectionMode != null)
|
|
73
|
+
attrs['selection-mode'] = typeof props.selectionMode === 'object' ? JSON.stringify(props.selectionMode) : String(props.selectionMode);
|
|
74
|
+
return h('cx-listbox', { ref: el, ...attrs });
|
|
75
|
+
};
|
|
76
|
+
},
|
|
77
|
+
});
|
package/dist/menu.d.ts
ADDED
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
import { type PropType } from 'vue';
|
|
2
|
+
import type { KeyboardDetail, MenuActionDetail, MenuChangeDetail, MenuEntry } from './types.js';
|
|
3
|
+
export interface MenuRef {
|
|
4
|
+
/** Opens the menu dropdown. */
|
|
5
|
+
open(): void;
|
|
6
|
+
/** Closes the menu dropdown. */
|
|
7
|
+
close(): void;
|
|
8
|
+
/** The underlying Custom Element. */
|
|
9
|
+
el: HTMLElement | null;
|
|
10
|
+
}
|
|
11
|
+
export declare const Menu: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
12
|
+
id: {
|
|
13
|
+
type: StringConstructor;
|
|
14
|
+
};
|
|
15
|
+
triggerLabel: {
|
|
16
|
+
type: StringConstructor;
|
|
17
|
+
required: true;
|
|
18
|
+
};
|
|
19
|
+
entries: {
|
|
20
|
+
type: PropType<MenuEntry[] | string>;
|
|
21
|
+
};
|
|
22
|
+
variant: {
|
|
23
|
+
type: PropType<"filled" | "outline" | "ghost">;
|
|
24
|
+
};
|
|
25
|
+
shape: {
|
|
26
|
+
type: PropType<"sharp" | "rounded" | "pill">;
|
|
27
|
+
};
|
|
28
|
+
width: {
|
|
29
|
+
type: PropType<"auto" | "sm" | "md" | "lg">;
|
|
30
|
+
};
|
|
31
|
+
size: {
|
|
32
|
+
type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
|
|
33
|
+
};
|
|
34
|
+
icon: {
|
|
35
|
+
type: StringConstructor;
|
|
36
|
+
};
|
|
37
|
+
disabled: {
|
|
38
|
+
type: BooleanConstructor;
|
|
39
|
+
};
|
|
40
|
+
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
41
|
+
[key: string]: any;
|
|
42
|
+
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
43
|
+
'cx-action': (event: CustomEvent<MenuActionDetail>) => true;
|
|
44
|
+
'cx-change': (event: CustomEvent<MenuChangeDetail>) => true;
|
|
45
|
+
'cx-keydown': (event: CustomEvent<KeyboardDetail>) => true;
|
|
46
|
+
'cx-keyup': (event: CustomEvent<KeyboardDetail>) => true;
|
|
47
|
+
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
48
|
+
id: {
|
|
49
|
+
type: StringConstructor;
|
|
50
|
+
};
|
|
51
|
+
triggerLabel: {
|
|
52
|
+
type: StringConstructor;
|
|
53
|
+
required: true;
|
|
54
|
+
};
|
|
55
|
+
entries: {
|
|
56
|
+
type: PropType<MenuEntry[] | string>;
|
|
57
|
+
};
|
|
58
|
+
variant: {
|
|
59
|
+
type: PropType<"filled" | "outline" | "ghost">;
|
|
60
|
+
};
|
|
61
|
+
shape: {
|
|
62
|
+
type: PropType<"sharp" | "rounded" | "pill">;
|
|
63
|
+
};
|
|
64
|
+
width: {
|
|
65
|
+
type: PropType<"auto" | "sm" | "md" | "lg">;
|
|
66
|
+
};
|
|
67
|
+
size: {
|
|
68
|
+
type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
|
|
69
|
+
};
|
|
70
|
+
icon: {
|
|
71
|
+
type: StringConstructor;
|
|
72
|
+
};
|
|
73
|
+
disabled: {
|
|
74
|
+
type: BooleanConstructor;
|
|
75
|
+
};
|
|
76
|
+
}>> & Readonly<{
|
|
77
|
+
"onCx-change"?: ((event: CustomEvent<MenuChangeDetail>) => any) | undefined;
|
|
78
|
+
"onCx-keydown"?: ((event: CustomEvent<KeyboardDetail>) => any) | undefined;
|
|
79
|
+
"onCx-keyup"?: ((event: CustomEvent<KeyboardDetail>) => any) | undefined;
|
|
80
|
+
"onCx-action"?: ((event: CustomEvent<MenuActionDetail>) => any) | undefined;
|
|
81
|
+
}>, {
|
|
82
|
+
disabled: boolean;
|
|
83
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
package/dist/menu.js
ADDED
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
// Auto-generated by scripts/generate-vue.mjs — DO NOT EDIT
|
|
2
|
+
// Vue 3 wrapper for <cx-menu>
|
|
3
|
+
import { defineComponent, ref, h, onMounted, watch } from 'vue';
|
|
4
|
+
export const Menu = defineComponent({
|
|
5
|
+
name: 'Menu',
|
|
6
|
+
props: {
|
|
7
|
+
id: { type: String },
|
|
8
|
+
triggerLabel: { type: String, required: true },
|
|
9
|
+
entries: { type: [Array, Object, String] },
|
|
10
|
+
variant: { type: String },
|
|
11
|
+
shape: { type: String },
|
|
12
|
+
width: { type: String },
|
|
13
|
+
size: { type: String },
|
|
14
|
+
icon: { type: String },
|
|
15
|
+
disabled: { type: Boolean },
|
|
16
|
+
},
|
|
17
|
+
emits: {
|
|
18
|
+
'cx-action': (event) => true,
|
|
19
|
+
'cx-change': (event) => true,
|
|
20
|
+
'cx-keydown': (event) => true,
|
|
21
|
+
'cx-keyup': (event) => true,
|
|
22
|
+
},
|
|
23
|
+
setup(props, { emit, slots, expose }) {
|
|
24
|
+
const el = ref(null);
|
|
25
|
+
const listeners = [];
|
|
26
|
+
onMounted(() => {
|
|
27
|
+
if (!el.value)
|
|
28
|
+
return;
|
|
29
|
+
watch(() => props.width, (val) => {
|
|
30
|
+
if (!el.value)
|
|
31
|
+
return;
|
|
32
|
+
if (val != null)
|
|
33
|
+
el.value.setAttribute('width', String(val));
|
|
34
|
+
else
|
|
35
|
+
el.value.removeAttribute('width');
|
|
36
|
+
}, { immediate: true });
|
|
37
|
+
watch(() => props.entries, (val) => {
|
|
38
|
+
if (!el.value)
|
|
39
|
+
return;
|
|
40
|
+
if (val != null)
|
|
41
|
+
el.value.setAttribute('entries', typeof val === 'object' ? JSON.stringify(val) : String(val));
|
|
42
|
+
else
|
|
43
|
+
el.value.removeAttribute('entries');
|
|
44
|
+
}, { immediate: true });
|
|
45
|
+
// Event listeners
|
|
46
|
+
el.value.addEventListener('cx-action', (ev) => emit('cx-action', ev));
|
|
47
|
+
el.value.addEventListener('cx-change', (ev) => emit('cx-change', ev));
|
|
48
|
+
el.value.addEventListener('cx-keydown', (ev) => emit('cx-keydown', ev));
|
|
49
|
+
el.value.addEventListener('cx-keyup', (ev) => emit('cx-keyup', ev));
|
|
50
|
+
});
|
|
51
|
+
expose({
|
|
52
|
+
/** Opens the menu dropdown. */
|
|
53
|
+
open() { el.value?.open(); },
|
|
54
|
+
/** Closes the menu dropdown. */
|
|
55
|
+
close() { el.value?.close(); },
|
|
56
|
+
/** The underlying Custom Element. */
|
|
57
|
+
el,
|
|
58
|
+
});
|
|
59
|
+
return () => {
|
|
60
|
+
const attrs = {};
|
|
61
|
+
if (props.id != null)
|
|
62
|
+
attrs['id'] = typeof props.id === 'object' ? JSON.stringify(props.id) : String(props.id);
|
|
63
|
+
if (props.triggerLabel != null)
|
|
64
|
+
attrs['trigger-label'] = typeof props.triggerLabel === 'object' ? JSON.stringify(props.triggerLabel) : String(props.triggerLabel);
|
|
65
|
+
if (props.variant != null)
|
|
66
|
+
attrs['variant'] = typeof props.variant === 'object' ? JSON.stringify(props.variant) : String(props.variant);
|
|
67
|
+
if (props.shape != null)
|
|
68
|
+
attrs['shape'] = typeof props.shape === 'object' ? JSON.stringify(props.shape) : String(props.shape);
|
|
69
|
+
if (props.size != null)
|
|
70
|
+
attrs['size'] = typeof props.size === 'object' ? JSON.stringify(props.size) : String(props.size);
|
|
71
|
+
if (props.icon != null)
|
|
72
|
+
attrs['icon'] = typeof props.icon === 'object' ? JSON.stringify(props.icon) : String(props.icon);
|
|
73
|
+
if (props.disabled)
|
|
74
|
+
attrs['disabled'] = '';
|
|
75
|
+
return h('cx-menu', { ref: el, ...attrs });
|
|
76
|
+
};
|
|
77
|
+
},
|
|
78
|
+
});
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import { type PropType } from 'vue';
|
|
2
|
+
export declare const MessageBubble: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
3
|
+
id: {
|
|
4
|
+
type: StringConstructor;
|
|
5
|
+
};
|
|
6
|
+
role: {
|
|
7
|
+
type: PropType<"user" | "assistant">;
|
|
8
|
+
};
|
|
9
|
+
variant: {
|
|
10
|
+
type: PropType<"filled" | "ghost">;
|
|
11
|
+
};
|
|
12
|
+
shape: {
|
|
13
|
+
type: PropType<"sharp" | "rounded">;
|
|
14
|
+
};
|
|
15
|
+
alignment: {
|
|
16
|
+
type: PropType<"auto" | "start" | "end">;
|
|
17
|
+
};
|
|
18
|
+
size: {
|
|
19
|
+
type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
|
|
20
|
+
};
|
|
21
|
+
htmlContent: {
|
|
22
|
+
type: StringConstructor;
|
|
23
|
+
};
|
|
24
|
+
senderName: {
|
|
25
|
+
type: StringConstructor;
|
|
26
|
+
};
|
|
27
|
+
timestamp: {
|
|
28
|
+
type: StringConstructor;
|
|
29
|
+
};
|
|
30
|
+
border: {
|
|
31
|
+
type: StringConstructor;
|
|
32
|
+
};
|
|
33
|
+
animated: {
|
|
34
|
+
type: BooleanConstructor;
|
|
35
|
+
};
|
|
36
|
+
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
37
|
+
[key: string]: any;
|
|
38
|
+
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
39
|
+
id: {
|
|
40
|
+
type: StringConstructor;
|
|
41
|
+
};
|
|
42
|
+
role: {
|
|
43
|
+
type: PropType<"user" | "assistant">;
|
|
44
|
+
};
|
|
45
|
+
variant: {
|
|
46
|
+
type: PropType<"filled" | "ghost">;
|
|
47
|
+
};
|
|
48
|
+
shape: {
|
|
49
|
+
type: PropType<"sharp" | "rounded">;
|
|
50
|
+
};
|
|
51
|
+
alignment: {
|
|
52
|
+
type: PropType<"auto" | "start" | "end">;
|
|
53
|
+
};
|
|
54
|
+
size: {
|
|
55
|
+
type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
|
|
56
|
+
};
|
|
57
|
+
htmlContent: {
|
|
58
|
+
type: StringConstructor;
|
|
59
|
+
};
|
|
60
|
+
senderName: {
|
|
61
|
+
type: StringConstructor;
|
|
62
|
+
};
|
|
63
|
+
timestamp: {
|
|
64
|
+
type: StringConstructor;
|
|
65
|
+
};
|
|
66
|
+
border: {
|
|
67
|
+
type: StringConstructor;
|
|
68
|
+
};
|
|
69
|
+
animated: {
|
|
70
|
+
type: BooleanConstructor;
|
|
71
|
+
};
|
|
72
|
+
}>> & Readonly<{}>, {
|
|
73
|
+
animated: boolean;
|
|
74
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
// Auto-generated by scripts/generate-vue.mjs — DO NOT EDIT
|
|
2
|
+
// Vue 3 wrapper for <cx-message-bubble>
|
|
3
|
+
import { defineComponent, ref, h, onMounted, watch } from 'vue';
|
|
4
|
+
export const MessageBubble = defineComponent({
|
|
5
|
+
name: 'MessageBubble',
|
|
6
|
+
props: {
|
|
7
|
+
id: { type: String },
|
|
8
|
+
role: { type: String },
|
|
9
|
+
variant: { type: String },
|
|
10
|
+
shape: { type: String },
|
|
11
|
+
alignment: { type: String },
|
|
12
|
+
size: { type: String },
|
|
13
|
+
htmlContent: { type: String },
|
|
14
|
+
senderName: { type: String },
|
|
15
|
+
timestamp: { type: String },
|
|
16
|
+
border: { type: String },
|
|
17
|
+
animated: { type: Boolean },
|
|
18
|
+
},
|
|
19
|
+
emits: {},
|
|
20
|
+
setup(props, { emit, slots, expose }) {
|
|
21
|
+
const el = ref(null);
|
|
22
|
+
const listeners = [];
|
|
23
|
+
onMounted(() => {
|
|
24
|
+
if (!el.value)
|
|
25
|
+
return;
|
|
26
|
+
watch(() => props.role, (val) => {
|
|
27
|
+
if (!el.value)
|
|
28
|
+
return;
|
|
29
|
+
if (val != null)
|
|
30
|
+
el.value.setAttribute('role', String(val));
|
|
31
|
+
else
|
|
32
|
+
el.value.removeAttribute('role');
|
|
33
|
+
}, { immediate: true });
|
|
34
|
+
// Event listeners
|
|
35
|
+
});
|
|
36
|
+
expose({
|
|
37
|
+
/** The underlying Custom Element. */
|
|
38
|
+
el,
|
|
39
|
+
});
|
|
40
|
+
return () => {
|
|
41
|
+
const attrs = {};
|
|
42
|
+
if (props.id != null)
|
|
43
|
+
attrs['id'] = typeof props.id === 'object' ? JSON.stringify(props.id) : String(props.id);
|
|
44
|
+
if (props.variant != null)
|
|
45
|
+
attrs['variant'] = typeof props.variant === 'object' ? JSON.stringify(props.variant) : String(props.variant);
|
|
46
|
+
if (props.shape != null)
|
|
47
|
+
attrs['shape'] = typeof props.shape === 'object' ? JSON.stringify(props.shape) : String(props.shape);
|
|
48
|
+
if (props.alignment != null)
|
|
49
|
+
attrs['alignment'] = typeof props.alignment === 'object' ? JSON.stringify(props.alignment) : String(props.alignment);
|
|
50
|
+
if (props.size != null)
|
|
51
|
+
attrs['size'] = typeof props.size === 'object' ? JSON.stringify(props.size) : String(props.size);
|
|
52
|
+
if (props.htmlContent != null)
|
|
53
|
+
attrs['html-content'] = typeof props.htmlContent === 'object' ? JSON.stringify(props.htmlContent) : String(props.htmlContent);
|
|
54
|
+
if (props.senderName != null)
|
|
55
|
+
attrs['sender-name'] = typeof props.senderName === 'object' ? JSON.stringify(props.senderName) : String(props.senderName);
|
|
56
|
+
if (props.timestamp != null)
|
|
57
|
+
attrs['timestamp'] = typeof props.timestamp === 'object' ? JSON.stringify(props.timestamp) : String(props.timestamp);
|
|
58
|
+
if (props.border != null)
|
|
59
|
+
attrs['border'] = typeof props.border === 'object' ? JSON.stringify(props.border) : String(props.border);
|
|
60
|
+
if (props.animated)
|
|
61
|
+
attrs['animated'] = '';
|
|
62
|
+
return h('cx-message-bubble', { ref: el, ...attrs }, [
|
|
63
|
+
slots.default?.()
|
|
64
|
+
]);
|
|
65
|
+
};
|
|
66
|
+
},
|
|
67
|
+
});
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { type PropType } from 'vue';
|
|
2
|
+
import type { MessageGroupPart } from './types.js';
|
|
3
|
+
export declare const MessageGroup: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
4
|
+
id: {
|
|
5
|
+
type: StringConstructor;
|
|
6
|
+
};
|
|
7
|
+
role: {
|
|
8
|
+
type: PropType<"user" | "assistant">;
|
|
9
|
+
};
|
|
10
|
+
alignment: {
|
|
11
|
+
type: PropType<"auto" | "start" | "end">;
|
|
12
|
+
};
|
|
13
|
+
size: {
|
|
14
|
+
type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
|
|
15
|
+
};
|
|
16
|
+
senderName: {
|
|
17
|
+
type: StringConstructor;
|
|
18
|
+
};
|
|
19
|
+
animated: {
|
|
20
|
+
type: BooleanConstructor;
|
|
21
|
+
};
|
|
22
|
+
parts: {
|
|
23
|
+
type: PropType<MessageGroupPart[] | string>;
|
|
24
|
+
};
|
|
25
|
+
}>, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
26
|
+
[key: string]: any;
|
|
27
|
+
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
28
|
+
id: {
|
|
29
|
+
type: StringConstructor;
|
|
30
|
+
};
|
|
31
|
+
role: {
|
|
32
|
+
type: PropType<"user" | "assistant">;
|
|
33
|
+
};
|
|
34
|
+
alignment: {
|
|
35
|
+
type: PropType<"auto" | "start" | "end">;
|
|
36
|
+
};
|
|
37
|
+
size: {
|
|
38
|
+
type: PropType<"xs" | "sm" | "md" | "lg" | "xl">;
|
|
39
|
+
};
|
|
40
|
+
senderName: {
|
|
41
|
+
type: StringConstructor;
|
|
42
|
+
};
|
|
43
|
+
animated: {
|
|
44
|
+
type: BooleanConstructor;
|
|
45
|
+
};
|
|
46
|
+
parts: {
|
|
47
|
+
type: PropType<MessageGroupPart[] | string>;
|
|
48
|
+
};
|
|
49
|
+
}>> & Readonly<{}>, {
|
|
50
|
+
animated: boolean;
|
|
51
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
// Auto-generated by scripts/generate-vue.mjs — DO NOT EDIT
|
|
2
|
+
// Vue 3 wrapper for <cx-message-group>
|
|
3
|
+
import { defineComponent, ref, h, onMounted, watch } from 'vue';
|
|
4
|
+
export const MessageGroup = defineComponent({
|
|
5
|
+
name: 'MessageGroup',
|
|
6
|
+
props: {
|
|
7
|
+
id: { type: String },
|
|
8
|
+
role: { type: String },
|
|
9
|
+
alignment: { type: String },
|
|
10
|
+
size: { type: String },
|
|
11
|
+
senderName: { type: String },
|
|
12
|
+
animated: { type: Boolean },
|
|
13
|
+
parts: { type: [Array, Object, String] },
|
|
14
|
+
},
|
|
15
|
+
emits: {},
|
|
16
|
+
setup(props, { emit, slots, expose }) {
|
|
17
|
+
const el = ref(null);
|
|
18
|
+
const listeners = [];
|
|
19
|
+
onMounted(() => {
|
|
20
|
+
if (!el.value)
|
|
21
|
+
return;
|
|
22
|
+
watch(() => props.role, (val) => {
|
|
23
|
+
if (!el.value)
|
|
24
|
+
return;
|
|
25
|
+
if (val != null)
|
|
26
|
+
el.value.setAttribute('role', String(val));
|
|
27
|
+
else
|
|
28
|
+
el.value.removeAttribute('role');
|
|
29
|
+
}, { immediate: true });
|
|
30
|
+
watch(() => props.parts, (val) => {
|
|
31
|
+
if (!el.value)
|
|
32
|
+
return;
|
|
33
|
+
if (val != null)
|
|
34
|
+
el.value.setAttribute('parts', typeof val === 'object' ? JSON.stringify(val) : String(val));
|
|
35
|
+
else
|
|
36
|
+
el.value.removeAttribute('parts');
|
|
37
|
+
}, { immediate: true });
|
|
38
|
+
// Event listeners
|
|
39
|
+
});
|
|
40
|
+
expose({
|
|
41
|
+
/** The underlying Custom Element. */
|
|
42
|
+
el,
|
|
43
|
+
});
|
|
44
|
+
return () => {
|
|
45
|
+
const attrs = {};
|
|
46
|
+
if (props.id != null)
|
|
47
|
+
attrs['id'] = typeof props.id === 'object' ? JSON.stringify(props.id) : String(props.id);
|
|
48
|
+
if (props.alignment != null)
|
|
49
|
+
attrs['alignment'] = typeof props.alignment === 'object' ? JSON.stringify(props.alignment) : String(props.alignment);
|
|
50
|
+
if (props.size != null)
|
|
51
|
+
attrs['size'] = typeof props.size === 'object' ? JSON.stringify(props.size) : String(props.size);
|
|
52
|
+
if (props.senderName != null)
|
|
53
|
+
attrs['sender-name'] = typeof props.senderName === 'object' ? JSON.stringify(props.senderName) : String(props.senderName);
|
|
54
|
+
if (props.animated)
|
|
55
|
+
attrs['animated'] = '';
|
|
56
|
+
return h('cx-message-group', { ref: el, ...attrs });
|
|
57
|
+
};
|
|
58
|
+
},
|
|
59
|
+
});
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
export declare const MessagePart: import("vue").DefineComponent<{}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
|
2
|
+
[key: string]: any;
|
|
3
|
+
}>, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|