@n8n/design-system 2.35.5 → 2.36.1

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.
Files changed (73) hide show
  1. package/dist/components/N8nDatatable/Datatable.vue.d.ts +1 -1
  2. package/dist/components/N8nFormInput/FormInput.vue.d.ts +1 -1
  3. package/dist/components/N8nIcon/icons.d.ts +1 -0
  4. package/dist/components/N8nIconPicker/IconPicker.utils.d.ts +13 -0
  5. package/dist/components/N8nIconPicker/IconPicker.vue.d.ts +13 -5
  6. package/dist/components/N8nIconPicker/useIconPickerSearch.d.ts +1 -2
  7. package/dist/components/N8nPagination/Pagination.types.d.ts +24 -0
  8. package/dist/components/N8nPagination/Pagination.vue.d.ts +34 -52
  9. package/dist/components/N8nPagination/index.d.ts +2 -0
  10. package/dist/components/N8nPagination/reka-ui.d.ts +2 -0
  11. package/dist/components/N8nSelect/Select.vue.d.ts +7 -7
  12. package/dist/components/N8nToggle/Toggle.vue.d.ts +4 -0
  13. package/dist/css/_tokens.scss +4 -0
  14. package/dist/css/common/var.scss +0 -22
  15. package/dist/css/dialog.scss +8 -23
  16. package/dist/css/index.scss +0 -1
  17. package/dist/css/loading.scss +9 -7
  18. package/dist/css/message-box.scss +8 -23
  19. package/dist/css/mixins/_floating-item.scss +13 -0
  20. package/dist/css/mixins/_popover.scss +80 -0
  21. package/dist/css/mixins/index.scss +2 -0
  22. package/dist/css/mixins/mixins.scss +30 -0
  23. package/dist/css/mixins/motion.scss +7 -0
  24. package/dist/css/skeleton.scss +4 -0
  25. package/dist/{en-Dvx8tZIA.js → en-BrDOZbhj.js} +15 -2
  26. package/dist/icons/lucide/index.d.ts +2 -0
  27. package/dist/icons/lucide/index.js +26 -25
  28. package/dist/index.d.ts +9 -6
  29. package/dist/index.js +9347 -8495
  30. package/dist/{lucideIconData-B3lNk4Jv.js → lucideIconData-CKJ1do82.js} +2 -2
  31. package/dist/plugin-DT0YTbz-.js +35 -0
  32. package/dist/plugin.js +2 -0
  33. package/dist/style.css +1 -1
  34. package/dist/theme.css +1 -1
  35. package/dist/useIconBodyLoader-TKQVcLVc.js +8 -0
  36. package/dist/v2/components/Combobox/Combobox.types.d.ts +67 -0
  37. package/dist/v2/components/Combobox/Combobox.vue.d.ts +304 -0
  38. package/dist/v2/components/Combobox/ComboboxItem.vue.d.ts +17 -0
  39. package/dist/v2/components/Combobox/index.d.ts +3 -0
  40. package/dist/v2/components/Combobox/reka-ui.d.ts +2 -0
  41. package/dist/v2/components/TagsInput/TagsInput.types.d.ts +7 -3
  42. package/dist/v2/components/TagsInput/TagsInput.vue.d.ts +6 -3
  43. package/package.json +10 -6
  44. package/dist/components/N8nRadioButtons/RadioButtons.types.d.ts +0 -13
  45. package/dist/css/pagination.scss +0 -534
  46. package/dist/en-CIboFQvZ.js +0 -2
  47. package/dist/v2/components/Pagination/Pagination.types.d.ts +0 -49
  48. package/dist/v2/components/Pagination/Pagination.vue.d.ts +0 -45
  49. /package/dist/{v2/components/RadioGroup → components/N8nRadioGroup}/RadioGroup.types.d.ts +0 -0
  50. /package/dist/{v2/components/RadioGroup → components/N8nRadioGroup}/RadioGroup.vue.d.ts +0 -0
  51. /package/dist/{v2/components/RadioGroup → components/N8nRadioGroup}/RadioGroupItem.types.d.ts +0 -0
  52. /package/dist/{v2/components/RadioGroup → components/N8nRadioGroup}/RadioGroupItem.vue.d.ts +0 -0
  53. /package/dist/{v2/components/RadioGroup → components/N8nRadioGroup}/index.d.ts +0 -0
  54. /package/dist/{v2/components/RadioGroup → components/N8nRadioGroup}/radio-group-context.d.ts +0 -0
  55. /package/dist/{v2/components/RadioGroup → components/N8nRadioGroup}/reka-ui.d.ts +0 -0
  56. /package/dist/{emojiData-DjghW_MV.js → emojiData-zOxnhmb7.js} +0 -0
  57. /package/dist/{lucide-icons-bucket-0-_FAUqb7V.js → lucide-icons-bucket-0-DqyR_rVv.js} +0 -0
  58. /package/dist/{lucide-icons-bucket-1-Di6-h4oX.js → lucide-icons-bucket-1-Bm-V3uZ6.js} +0 -0
  59. /package/dist/{lucide-icons-bucket-10-Cbet_3-P.js → lucide-icons-bucket-10-DiRCwi50.js} +0 -0
  60. /package/dist/{lucide-icons-bucket-11-DXByO0iR.js → lucide-icons-bucket-11-Ds8QwYDh.js} +0 -0
  61. /package/dist/{lucide-icons-bucket-12-BgdKhqIx.js → lucide-icons-bucket-12-D9Z8UvgY.js} +0 -0
  62. /package/dist/{lucide-icons-bucket-13-CPZPIjuP.js → lucide-icons-bucket-13-C9gGGcMo.js} +0 -0
  63. /package/dist/{lucide-icons-bucket-14-CoBYaDIN.js → lucide-icons-bucket-14-BWliLnR1.js} +0 -0
  64. /package/dist/{lucide-icons-bucket-15-eHHlEyaM.js → lucide-icons-bucket-15-CLY5CBLS.js} +0 -0
  65. /package/dist/{lucide-icons-bucket-2-1f3EoyT5.js → lucide-icons-bucket-2-CbY7fxwP.js} +0 -0
  66. /package/dist/{lucide-icons-bucket-3-GJHLvy9q.js → lucide-icons-bucket-3-BETKMrI1.js} +0 -0
  67. /package/dist/{lucide-icons-bucket-4-4gywAul8.js → lucide-icons-bucket-4-BPArXNh5.js} +0 -0
  68. /package/dist/{lucide-icons-bucket-5-4iCem2l-.js → lucide-icons-bucket-5-BieAWTJB.js} +0 -0
  69. /package/dist/{lucide-icons-bucket-6-iE4ywa_E.js → lucide-icons-bucket-6-AleswO1A.js} +0 -0
  70. /package/dist/{lucide-icons-bucket-7-BPXrMpDj.js → lucide-icons-bucket-7-D80iZbJz.js} +0 -0
  71. /package/dist/{lucide-icons-bucket-8-DbHwuUDR.js → lucide-icons-bucket-8-pvdXrKbw.js} +0 -0
  72. /package/dist/{lucide-icons-bucket-9-DYv2gFrZ.js → lucide-icons-bucket-9-by9vBB8Z.js} +0 -0
  73. /package/dist/{node-icons-C_zc8eJj.js → node-icons-CaKBLFvs.js} +0 -0
@@ -0,0 +1,8 @@
1
+ import { inject as e } from "vue";
2
+ //#region src/composables/useIconBodyLoader.ts
3
+ var t = Symbol("IconBodyLoader"), n = async () => null;
4
+ function r() {
5
+ return e(t, n);
6
+ }
7
+ //#endregion
8
+ export { r as n, t };
@@ -0,0 +1,67 @@
1
+ import { ComboboxContentProps, ComboboxRootEmits, ComboboxRootProps } from './reka-ui';
2
+ import { IconName } from '../../../components/N8nIcon/icons';
3
+ import { InputSize } from '../../../components/N8nInput/Input.types';
4
+ export type ComboboxValue = string;
5
+ export type ComboboxOptionBase<TValue extends ComboboxValue = ComboboxValue> = {
6
+ type?: 'item';
7
+ value: TValue;
8
+ label: string;
9
+ icon?: IconName;
10
+ disabled?: boolean;
11
+ textValue?: string;
12
+ keywords?: string[];
13
+ onSelect?: (event: Event) => void;
14
+ };
15
+ export type ComboboxGroupItem<TValue extends ComboboxValue = ComboboxValue> = {
16
+ type: 'group';
17
+ label?: string;
18
+ items: Array<ComboboxOptionBase<TValue>>;
19
+ };
20
+ export type ComboboxSeparatorItem = {
21
+ type: 'separator';
22
+ };
23
+ export type ComboboxStructuralItem<TValue extends ComboboxValue = ComboboxValue> = ComboboxGroupItem<TValue> | ComboboxSeparatorItem;
24
+ export type ComboboxItem<TValue extends ComboboxValue = ComboboxValue> = ComboboxOptionBase<TValue> | ComboboxStructuralItem<TValue>;
25
+ export type ComboboxProps = Omit<ComboboxRootProps<ComboboxValue>, 'dir' | 'openOnFocus'> & Pick<ComboboxContentProps, 'side' | 'sideOffset' | 'align'> & {
26
+ size?: ComboboxSizes;
27
+ icon?: IconName;
28
+ placeholder?: string;
29
+ autoFocus?: boolean;
30
+ emptyText?: string;
31
+ items?: ComboboxItem[];
32
+ contentClass?: string;
33
+ id?: string;
34
+ clearable?: boolean;
35
+ teleported?: boolean;
36
+ portalTarget?: string | HTMLElement;
37
+ };
38
+ export type ComboboxEmits = ComboboxRootEmits<ComboboxValue | ComboboxValue[] | undefined>;
39
+ export type ComboboxSizes = InputSize;
40
+ type ComboboxItemUi = {
41
+ class: string;
42
+ };
43
+ type SlotProps = (props: {
44
+ item: ComboboxOptionBase;
45
+ ui: ComboboxItemUi;
46
+ }) => unknown;
47
+ export type ComboboxItemSlots = {
48
+ ['item-leading']?: SlotProps;
49
+ ['item-label']?: (props: {
50
+ item: ComboboxOptionBase;
51
+ }) => unknown;
52
+ ['item-trailing']?: SlotProps;
53
+ };
54
+ export type ComboboxSlots = {
55
+ item?: (props: {
56
+ item: ComboboxOptionBase;
57
+ }) => unknown;
58
+ label?: (props: {
59
+ item: ComboboxGroupItem;
60
+ }) => unknown;
61
+ ['item-leading']?: SlotProps;
62
+ ['item-label']?: (props: {
63
+ item: ComboboxOptionBase;
64
+ }) => unknown;
65
+ ['item-trailing']?: SlotProps;
66
+ };
67
+ export {};
@@ -0,0 +1,304 @@
1
+ import { nextTick } from 'vue';
2
+ import { ComboboxProps, ComboboxSizes, ComboboxSlots } from './Combobox.types';
3
+ declare function __VLS_template(): {
4
+ attrs: Partial<{}>;
5
+ slots: Readonly<ComboboxSlots> & ComboboxSlots;
6
+ refs: {
7
+ anchor: ({
8
+ $: import('vue').ComponentInternalInstance;
9
+ $data: {};
10
+ $props: {
11
+ readonly reference?: import('reka-ui').ReferenceElement | undefined;
12
+ readonly asChild?: boolean | undefined;
13
+ readonly as?: (import('reka-ui').AsTag | import('vue').Component) | undefined;
14
+ } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
15
+ $attrs: {
16
+ [x: string]: unknown;
17
+ };
18
+ $refs: {
19
+ [x: string]: unknown;
20
+ };
21
+ $slots: Readonly<{
22
+ [name: string]: import('vue').Slot<any> | undefined;
23
+ }>;
24
+ $root: import('vue').ComponentPublicInstance | null;
25
+ $parent: import('vue').ComponentPublicInstance | null;
26
+ $host: Element | null;
27
+ $emit: (event: string, ...args: any[]) => void;
28
+ $el: any;
29
+ $options: import('vue').ComponentOptionsBase<Readonly<import('reka-ui').ComboboxAnchorProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
30
+ beforeCreate?: (() => void) | (() => void)[];
31
+ created?: (() => void) | (() => void)[];
32
+ beforeMount?: (() => void) | (() => void)[];
33
+ mounted?: (() => void) | (() => void)[];
34
+ beforeUpdate?: (() => void) | (() => void)[];
35
+ updated?: (() => void) | (() => void)[];
36
+ activated?: (() => void) | (() => void)[];
37
+ deactivated?: (() => void) | (() => void)[];
38
+ beforeDestroy?: (() => void) | (() => void)[];
39
+ beforeUnmount?: (() => void) | (() => void)[];
40
+ destroyed?: (() => void) | (() => void)[];
41
+ unmounted?: (() => void) | (() => void)[];
42
+ renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
43
+ renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
44
+ errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
45
+ };
46
+ $forceUpdate: () => void;
47
+ $nextTick: typeof nextTick;
48
+ $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
49
+ } & Readonly<{}> & Omit<Readonly<import('reka-ui').ComboboxAnchorProps> & Readonly<{}>, never> & import('vue').ShallowUnwrapRef<{}> & {} & import('vue').ComponentCustomProperties & {} & {
50
+ $slots: {
51
+ default?: (props: {}) => any;
52
+ };
53
+ }) | null;
54
+ input: ({
55
+ $: import('vue').ComponentInternalInstance;
56
+ $data: {};
57
+ $props: {
58
+ readonly displayValue?: ((val: any) => string) | undefined;
59
+ readonly modelValue?: string | undefined;
60
+ readonly autoFocus?: boolean | undefined;
61
+ readonly disabled?: boolean | undefined;
62
+ readonly asChild?: boolean | undefined;
63
+ readonly as?: (import('reka-ui').AsTag | import('vue').Component) | undefined;
64
+ readonly "onUpdate:modelValue"?: ((args_0: string) => any) | undefined | undefined;
65
+ } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
66
+ $attrs: {
67
+ [x: string]: unknown;
68
+ };
69
+ $refs: {
70
+ [x: string]: unknown;
71
+ };
72
+ $slots: Readonly<{
73
+ [name: string]: import('vue').Slot<any> | undefined;
74
+ }>;
75
+ $root: import('vue').ComponentPublicInstance | null;
76
+ $parent: import('vue').ComponentPublicInstance | null;
77
+ $host: Element | null;
78
+ $emit: (event: "update:modelValue", args_0: string) => void;
79
+ $el: any;
80
+ $options: import('vue').ComponentOptionsBase<Readonly<import('reka-ui').ComboboxInputProps> & Readonly<{
81
+ "onUpdate:modelValue"?: ((args_0: string) => any) | undefined;
82
+ }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
83
+ "update:modelValue": (args_0: string) => any;
84
+ }, string, {
85
+ as: import('reka-ui').AsTag | import('vue').Component;
86
+ }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
87
+ beforeCreate?: (() => void) | (() => void)[];
88
+ created?: (() => void) | (() => void)[];
89
+ beforeMount?: (() => void) | (() => void)[];
90
+ mounted?: (() => void) | (() => void)[];
91
+ beforeUpdate?: (() => void) | (() => void)[];
92
+ updated?: (() => void) | (() => void)[];
93
+ activated?: (() => void) | (() => void)[];
94
+ deactivated?: (() => void) | (() => void)[];
95
+ beforeDestroy?: (() => void) | (() => void)[];
96
+ beforeUnmount?: (() => void) | (() => void)[];
97
+ destroyed?: (() => void) | (() => void)[];
98
+ unmounted?: (() => void) | (() => void)[];
99
+ renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
100
+ renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
101
+ errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
102
+ };
103
+ $forceUpdate: () => void;
104
+ $nextTick: typeof nextTick;
105
+ $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
106
+ } & Readonly<{
107
+ as: import('reka-ui').AsTag | import('vue').Component;
108
+ }> & Omit<Readonly<import('reka-ui').ComboboxInputProps> & Readonly<{
109
+ "onUpdate:modelValue"?: ((args_0: string) => any) | undefined;
110
+ }>, "as"> & import('vue').ShallowUnwrapRef<{}> & {} & import('vue').ComponentCustomProperties & {} & {
111
+ $slots: {
112
+ default?: (props: {}) => any;
113
+ };
114
+ }) | null;
115
+ };
116
+ rootEl: any;
117
+ };
118
+ type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
119
+ declare const __VLS_component: import('vue').DefineComponent<ComboboxProps, {
120
+ anchorRef: Readonly<import('vue').ShallowRef<({
121
+ $: import('vue').ComponentInternalInstance;
122
+ $data: {};
123
+ $props: {
124
+ readonly reference?: import('reka-ui').ReferenceElement | undefined;
125
+ readonly asChild?: boolean | undefined;
126
+ readonly as?: (import('reka-ui').AsTag | import('vue').Component) | undefined;
127
+ } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
128
+ $attrs: {
129
+ [x: string]: unknown;
130
+ };
131
+ $refs: {
132
+ [x: string]: unknown;
133
+ };
134
+ $slots: Readonly<{
135
+ [name: string]: import('vue').Slot<any> | undefined;
136
+ }>;
137
+ $root: import('vue').ComponentPublicInstance | null;
138
+ $parent: import('vue').ComponentPublicInstance | null;
139
+ $host: Element | null;
140
+ $emit: (event: string, ...args: any[]) => void;
141
+ $el: any;
142
+ $options: import('vue').ComponentOptionsBase<Readonly<import('reka-ui').ComboboxAnchorProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
143
+ beforeCreate?: (() => void) | (() => void)[];
144
+ created?: (() => void) | (() => void)[];
145
+ beforeMount?: (() => void) | (() => void)[];
146
+ mounted?: (() => void) | (() => void)[];
147
+ beforeUpdate?: (() => void) | (() => void)[];
148
+ updated?: (() => void) | (() => void)[];
149
+ activated?: (() => void) | (() => void)[];
150
+ deactivated?: (() => void) | (() => void)[];
151
+ beforeDestroy?: (() => void) | (() => void)[];
152
+ beforeUnmount?: (() => void) | (() => void)[];
153
+ destroyed?: (() => void) | (() => void)[];
154
+ unmounted?: (() => void) | (() => void)[];
155
+ renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
156
+ renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
157
+ errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
158
+ };
159
+ $forceUpdate: () => void;
160
+ $nextTick: typeof nextTick;
161
+ $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
162
+ } & Readonly<{}> & Omit<Readonly<import('reka-ui').ComboboxAnchorProps> & Readonly<{}>, never> & import('vue').ShallowUnwrapRef<{}> & {} & import('vue').ComponentCustomProperties & {} & {
163
+ $slots: {
164
+ default?: (props: {}) => any;
165
+ };
166
+ }) | null>>;
167
+ }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
168
+ highlight: (payload: {
169
+ ref: HTMLElement;
170
+ value: string | string[] | undefined;
171
+ } | undefined) => any;
172
+ "update:modelValue": (value: string | string[] | undefined) => any;
173
+ "update:open": (value: boolean) => any;
174
+ }, string, import('vue').PublicProps, Readonly<ComboboxProps> & Readonly<{
175
+ onHighlight?: ((payload: {
176
+ ref: HTMLElement;
177
+ value: string | string[] | undefined;
178
+ } | undefined) => any) | undefined;
179
+ "onUpdate:modelValue"?: ((value: string | string[] | undefined) => any) | undefined;
180
+ "onUpdate:open"?: ((value: boolean) => any) | undefined;
181
+ }>, {
182
+ teleported: boolean;
183
+ size: ComboboxSizes;
184
+ clearable: boolean;
185
+ align: "center" | "start" | "end";
186
+ side: "right" | "left" | "top" | "bottom";
187
+ sideOffset: number;
188
+ }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
189
+ anchor: ({
190
+ $: import('vue').ComponentInternalInstance;
191
+ $data: {};
192
+ $props: {
193
+ readonly reference?: import('reka-ui').ReferenceElement | undefined;
194
+ readonly asChild?: boolean | undefined;
195
+ readonly as?: (import('reka-ui').AsTag | import('vue').Component) | undefined;
196
+ } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
197
+ $attrs: {
198
+ [x: string]: unknown;
199
+ };
200
+ $refs: {
201
+ [x: string]: unknown;
202
+ };
203
+ $slots: Readonly<{
204
+ [name: string]: import('vue').Slot<any> | undefined;
205
+ }>;
206
+ $root: import('vue').ComponentPublicInstance | null;
207
+ $parent: import('vue').ComponentPublicInstance | null;
208
+ $host: Element | null;
209
+ $emit: (event: string, ...args: any[]) => void;
210
+ $el: any;
211
+ $options: import('vue').ComponentOptionsBase<Readonly<import('reka-ui').ComboboxAnchorProps> & Readonly<{}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
212
+ beforeCreate?: (() => void) | (() => void)[];
213
+ created?: (() => void) | (() => void)[];
214
+ beforeMount?: (() => void) | (() => void)[];
215
+ mounted?: (() => void) | (() => void)[];
216
+ beforeUpdate?: (() => void) | (() => void)[];
217
+ updated?: (() => void) | (() => void)[];
218
+ activated?: (() => void) | (() => void)[];
219
+ deactivated?: (() => void) | (() => void)[];
220
+ beforeDestroy?: (() => void) | (() => void)[];
221
+ beforeUnmount?: (() => void) | (() => void)[];
222
+ destroyed?: (() => void) | (() => void)[];
223
+ unmounted?: (() => void) | (() => void)[];
224
+ renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
225
+ renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
226
+ errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
227
+ };
228
+ $forceUpdate: () => void;
229
+ $nextTick: typeof nextTick;
230
+ $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
231
+ } & Readonly<{}> & Omit<Readonly<import('reka-ui').ComboboxAnchorProps> & Readonly<{}>, never> & import('vue').ShallowUnwrapRef<{}> & {} & import('vue').ComponentCustomProperties & {} & {
232
+ $slots: {
233
+ default?: (props: {}) => any;
234
+ };
235
+ }) | null;
236
+ input: ({
237
+ $: import('vue').ComponentInternalInstance;
238
+ $data: {};
239
+ $props: {
240
+ readonly displayValue?: ((val: any) => string) | undefined;
241
+ readonly modelValue?: string | undefined;
242
+ readonly autoFocus?: boolean | undefined;
243
+ readonly disabled?: boolean | undefined;
244
+ readonly asChild?: boolean | undefined;
245
+ readonly as?: (import('reka-ui').AsTag | import('vue').Component) | undefined;
246
+ readonly "onUpdate:modelValue"?: ((args_0: string) => any) | undefined | undefined;
247
+ } & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps;
248
+ $attrs: {
249
+ [x: string]: unknown;
250
+ };
251
+ $refs: {
252
+ [x: string]: unknown;
253
+ };
254
+ $slots: Readonly<{
255
+ [name: string]: import('vue').Slot<any> | undefined;
256
+ }>;
257
+ $root: import('vue').ComponentPublicInstance | null;
258
+ $parent: import('vue').ComponentPublicInstance | null;
259
+ $host: Element | null;
260
+ $emit: (event: "update:modelValue", args_0: string) => void;
261
+ $el: any;
262
+ $options: import('vue').ComponentOptionsBase<Readonly<import('reka-ui').ComboboxInputProps> & Readonly<{
263
+ "onUpdate:modelValue"?: ((args_0: string) => any) | undefined;
264
+ }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
265
+ "update:modelValue": (args_0: string) => any;
266
+ }, string, {
267
+ as: import('reka-ui').AsTag | import('vue').Component;
268
+ }, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & {
269
+ beforeCreate?: (() => void) | (() => void)[];
270
+ created?: (() => void) | (() => void)[];
271
+ beforeMount?: (() => void) | (() => void)[];
272
+ mounted?: (() => void) | (() => void)[];
273
+ beforeUpdate?: (() => void) | (() => void)[];
274
+ updated?: (() => void) | (() => void)[];
275
+ activated?: (() => void) | (() => void)[];
276
+ deactivated?: (() => void) | (() => void)[];
277
+ beforeDestroy?: (() => void) | (() => void)[];
278
+ beforeUnmount?: (() => void) | (() => void)[];
279
+ destroyed?: (() => void) | (() => void)[];
280
+ unmounted?: (() => void) | (() => void)[];
281
+ renderTracked?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
282
+ renderTriggered?: ((e: import('vue').DebuggerEvent) => void) | ((e: import('vue').DebuggerEvent) => void)[];
283
+ errorCaptured?: ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('vue').ComponentPublicInstance | null, info: string) => boolean | void)[];
284
+ };
285
+ $forceUpdate: () => void;
286
+ $nextTick: typeof nextTick;
287
+ $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('vue').WatchOptions): import('vue').WatchStopHandle;
288
+ } & Readonly<{
289
+ as: import('reka-ui').AsTag | import('vue').Component;
290
+ }> & Omit<Readonly<import('reka-ui').ComboboxInputProps> & Readonly<{
291
+ "onUpdate:modelValue"?: ((args_0: string) => any) | undefined;
292
+ }>, "as"> & import('vue').ShallowUnwrapRef<{}> & {} & import('vue').ComponentCustomProperties & {} & {
293
+ $slots: {
294
+ default?: (props: {}) => any;
295
+ };
296
+ }) | null;
297
+ }, any>;
298
+ declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
299
+ export default _default;
300
+ type __VLS_WithTemplateSlots<T, S> = T & {
301
+ new (): {
302
+ $slots: S;
303
+ };
304
+ };
@@ -0,0 +1,17 @@
1
+ import { ComboboxItemSlots, ComboboxOptionBase } from './Combobox.types';
2
+ type __VLS_Props = ComboboxOptionBase;
3
+ declare function __VLS_template(): {
4
+ attrs: Partial<{}>;
5
+ slots: Readonly<ComboboxItemSlots> & ComboboxItemSlots;
6
+ refs: {};
7
+ rootEl: any;
8
+ };
9
+ type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
10
+ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
11
+ declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
12
+ export default _default;
13
+ type __VLS_WithTemplateSlots<T, S> = T & {
14
+ new (): {
15
+ $slots: S;
16
+ };
17
+ };
@@ -0,0 +1,3 @@
1
+ export { default as N8nCombobox2 } from './Combobox.vue';
2
+ export { default as N8nCombobox2Item } from './ComboboxItem.vue';
3
+ export type { ComboboxEmits, ComboboxGroupItem, ComboboxItem, ComboboxItemSlots, ComboboxOptionBase, ComboboxProps, ComboboxSeparatorItem, ComboboxSizes, ComboboxSlots, ComboboxStructuralItem, ComboboxValue, } from './Combobox.types';
@@ -0,0 +1,2 @@
1
+ export { ComboboxAnchor, ComboboxContent, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxLabel, ComboboxPortal, ComboboxRoot, ComboboxTrigger, ComboboxViewport, useForwardPropsEmits, } from 'reka-ui';
2
+ export type { ComboboxContentProps, ComboboxItemProps, ComboboxRootEmits, ComboboxRootProps, } from 'reka-ui';
@@ -1,10 +1,14 @@
1
- import { AcceptableInputValue, TagsInputInputProps, TagsInputRootEmits, TagsInputRootProps } from './reka-ui';
1
+ import { AcceptableInputValue, TagsInputRootEmits, TagsInputRootProps } from './reka-ui';
2
2
  import { InputSize } from '../../../components/N8nInput/Input.types';
3
3
  export type TagsInputValue = AcceptableInputValue;
4
4
  export type TagsInputSizes = InputSize;
5
- export type TagsInputProps = TagsInputRootProps<TagsInputValue> & Pick<TagsInputInputProps, 'placeholder' | 'autoFocus'> & {
5
+ export interface TagsInputOwnProps {
6
6
  size?: TagsInputSizes;
7
- };
7
+ embedded?: boolean;
8
+ placeholder?: string;
9
+ autoFocus?: boolean;
10
+ }
11
+ export type TagsInputProps = TagsInputRootProps<TagsInputValue> & TagsInputOwnProps;
8
12
  export type TagsInputEmits = TagsInputRootEmits<TagsInputValue>;
9
13
  export type TagsInputTagUi = {
10
14
  text: string;
@@ -1,4 +1,6 @@
1
- import { TagsInputProps, TagsInputSizes, TagsInputSlots } from './TagsInput.types';
1
+ import { TagsInputRootProps } from './reka-ui';
2
+ import { TagsInputOwnProps, TagsInputSizes, TagsInputSlots, TagsInputValue } from './TagsInput.types';
3
+ type __VLS_Props = TagsInputOwnProps & TagsInputRootProps<TagsInputValue>;
2
4
  declare function __VLS_template(): {
3
5
  attrs: Partial<{}>;
4
6
  slots: Readonly<TagsInputSlots> & TagsInputSlots;
@@ -8,12 +10,12 @@ declare function __VLS_template(): {
8
10
  rootEl: any;
9
11
  };
10
12
  type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
11
- declare const __VLS_component: import('vue').DefineComponent<TagsInputProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
13
+ declare const __VLS_component: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
12
14
  "update:modelValue": (payload: import('reka-ui').AcceptableInputValue[]) => any;
13
15
  invalid: (payload: import('reka-ui').AcceptableInputValue) => any;
14
16
  addTag: (payload: import('reka-ui').AcceptableInputValue) => any;
15
17
  removeTag: (payload: import('reka-ui').AcceptableInputValue) => any;
16
- }, string, import('vue').PublicProps, Readonly<TagsInputProps> & Readonly<{
18
+ }, string, import('vue').PublicProps, Readonly<__VLS_Props> & Readonly<{
17
19
  "onUpdate:modelValue"?: ((payload: import('reka-ui').AcceptableInputValue[]) => any) | undefined;
18
20
  onInvalid?: ((payload: import('reka-ui').AcceptableInputValue) => any) | undefined;
19
21
  onAddTag?: ((payload: import('reka-ui').AcceptableInputValue) => any) | undefined;
@@ -22,6 +24,7 @@ declare const __VLS_component: import('vue').DefineComponent<TagsInputProps, {},
22
24
  disabled: boolean;
23
25
  size: TagsInputSizes;
24
26
  placeholder: string;
27
+ embedded: boolean;
25
28
  delimiter: string | RegExp;
26
29
  }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
27
30
  root: HTMLDivElement;
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "type": "module",
3
3
  "name": "@n8n/design-system",
4
- "version": "2.35.5",
4
+ "version": "2.36.1",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.js",
7
7
  "types": "./dist/index.d.ts",
@@ -14,6 +14,10 @@
14
14
  "types": "./dist/icons/lucide/index.d.ts",
15
15
  "import": "./dist/icons/lucide/index.js"
16
16
  },
17
+ "./plugin": {
18
+ "types": "./dist/plugin.d.ts",
19
+ "import": "./dist/plugin.js"
20
+ },
17
21
  "./style.css": "./dist/style.css",
18
22
  "./theme.css": "./dist/theme.css",
19
23
  "./css/*": "./dist/css/*",
@@ -27,8 +31,8 @@
27
31
  "dist",
28
32
  "assets/fonts",
29
33
  "README.md",
30
- "LICENSE.md",
31
- "LICENSE_EE.md"
34
+ "LICENSE_EE.md",
35
+ "LICENSE.md"
32
36
  ],
33
37
  "license": "SEE LICENSE IN LICENSE.md",
34
38
  "dependencies": {
@@ -63,9 +67,9 @@
63
67
  "sanitize-html": "2.17.5",
64
68
  "vue-boring-avatars": "^1.3.0",
65
69
  "xss": "1.0.15",
66
- "@n8n/frontend-utils": "0.4.0",
67
- "@n8n/composables": "1.26.5",
68
- "@n8n/utils": "1.44.0"
70
+ "@n8n/composables": "1.27.1",
71
+ "@n8n/utils": "1.45.0",
72
+ "@n8n/frontend-utils": "0.4.0"
69
73
  },
70
74
  "peerDependencies": {
71
75
  "vue": "^3.5.13",
@@ -1,13 +0,0 @@
1
- export interface RadioOption<Value extends string | boolean = string | boolean> {
2
- label: string;
3
- value: Value;
4
- disabled?: boolean;
5
- data?: Record<string, string | number | boolean | undefined>;
6
- }
7
- export interface RadioButtonsProps<Value extends string | boolean = string | boolean> {
8
- modelValue?: Value;
9
- options?: Array<RadioOption<Value>>;
10
- size?: 'small' | 'small-medium' | 'medium';
11
- disabled?: boolean;
12
- squareButtons?: boolean;
13
- }