@synergy-design-system/vue 2.7.3 → 2.8.0
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/dist/components/SynVueCombobox.vue.d.ts +232 -0
- package/dist/index.d.ts +1 -0
- package/package.json +3 -3
- package/src/components/SynVueCombobox.vue +295 -0
- package/src/index.js +1 -0
|
@@ -0,0 +1,232 @@
|
|
|
1
|
+
import '@synergy-design-system/components/components/combobox/combobox.js';
|
|
2
|
+
import type { SynChangeEvent } from '@synergy-design-system/components';
|
|
3
|
+
import type { SynClearEvent } from '@synergy-design-system/components';
|
|
4
|
+
import type { SynInputEvent } from '@synergy-design-system/components';
|
|
5
|
+
import type { SynFocusEvent } from '@synergy-design-system/components';
|
|
6
|
+
import type { SynBlurEvent } from '@synergy-design-system/components';
|
|
7
|
+
import type { SynShowEvent } from '@synergy-design-system/components';
|
|
8
|
+
import type { SynAfterShowEvent } from '@synergy-design-system/components';
|
|
9
|
+
import type { SynHideEvent } from '@synergy-design-system/components';
|
|
10
|
+
import type { SynAfterHideEvent } from '@synergy-design-system/components';
|
|
11
|
+
import type { SynInvalidEvent } from '@synergy-design-system/components';
|
|
12
|
+
import type { SynErrorEvent } from '@synergy-design-system/components';
|
|
13
|
+
import type { SynCombobox } from '@synergy-design-system/components';
|
|
14
|
+
export type { SynChangeEvent } from '@synergy-design-system/components';
|
|
15
|
+
export type { SynClearEvent } from '@synergy-design-system/components';
|
|
16
|
+
export type { SynInputEvent } from '@synergy-design-system/components';
|
|
17
|
+
export type { SynFocusEvent } from '@synergy-design-system/components';
|
|
18
|
+
export type { SynBlurEvent } from '@synergy-design-system/components';
|
|
19
|
+
export type { SynShowEvent } from '@synergy-design-system/components';
|
|
20
|
+
export type { SynAfterShowEvent } from '@synergy-design-system/components';
|
|
21
|
+
export type { SynHideEvent } from '@synergy-design-system/components';
|
|
22
|
+
export type { SynAfterHideEvent } from '@synergy-design-system/components';
|
|
23
|
+
export type { SynInvalidEvent } from '@synergy-design-system/components';
|
|
24
|
+
export type { SynErrorEvent } from '@synergy-design-system/components';
|
|
25
|
+
declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<{
|
|
26
|
+
/**
|
|
27
|
+
* The name of the combobox, submitted as a name/value pair with form data.
|
|
28
|
+
*/
|
|
29
|
+
name?: SynCombobox["name"];
|
|
30
|
+
/**
|
|
31
|
+
* The current value of the combobox, submitted as a name/value pair with form data.
|
|
32
|
+
*/
|
|
33
|
+
value?: SynCombobox["value"];
|
|
34
|
+
/**
|
|
35
|
+
* The combobox's size.
|
|
36
|
+
*/
|
|
37
|
+
size?: SynCombobox["size"];
|
|
38
|
+
/**
|
|
39
|
+
* Placeholder text to show as a hint when the combobox is empty.
|
|
40
|
+
*/
|
|
41
|
+
placeholder?: SynCombobox["placeholder"];
|
|
42
|
+
/**
|
|
43
|
+
* Disables the combobox control.
|
|
44
|
+
*/
|
|
45
|
+
disabled?: SynCombobox["disabled"];
|
|
46
|
+
/**
|
|
47
|
+
* Adds a clear button when the combobox is not empty.
|
|
48
|
+
*/
|
|
49
|
+
clearable?: SynCombobox["clearable"];
|
|
50
|
+
/**
|
|
51
|
+
* Indicates whether or not the combobox is open.
|
|
52
|
+
You can toggle this attribute to show and hide the listbox, or you can use the `show()`
|
|
53
|
+
and `hide()` methods and this attribute will reflect the combobox's open state.
|
|
54
|
+
*/
|
|
55
|
+
open?: SynCombobox["open"];
|
|
56
|
+
/**
|
|
57
|
+
* Enable this option to prevent the listbox from being clipped,
|
|
58
|
+
when the component is placed inside a container with `overflow: auto|scroll`.
|
|
59
|
+
Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
|
|
60
|
+
*/
|
|
61
|
+
hoist?: SynCombobox["hoist"];
|
|
62
|
+
/**
|
|
63
|
+
* The combobox's label.
|
|
64
|
+
* If you need to display HTML, use the `label` slot instead.
|
|
65
|
+
*/
|
|
66
|
+
label?: SynCombobox["label"];
|
|
67
|
+
/**
|
|
68
|
+
* The preferred placement of the combobox's menu.
|
|
69
|
+
Note that the actual placement may vary as needed to keep the listbox inside of the viewport.
|
|
70
|
+
*/
|
|
71
|
+
placement?: SynCombobox["placement"];
|
|
72
|
+
/**
|
|
73
|
+
* The combobox's help text.
|
|
74
|
+
* If you need to display HTML, use the `help-text` slot instead.
|
|
75
|
+
*/
|
|
76
|
+
helpText?: SynCombobox["helpText"];
|
|
77
|
+
/**
|
|
78
|
+
* By default, form controls are associated with the nearest containing `<form>` element.
|
|
79
|
+
This attribute allows you to place the form control outside of a form and associate it
|
|
80
|
+
with the form that has this `id`.
|
|
81
|
+
The form must be in the same document or shadow root for this to work.
|
|
82
|
+
*/
|
|
83
|
+
form?: SynCombobox["form"];
|
|
84
|
+
/**
|
|
85
|
+
* The combobox's required attribute.
|
|
86
|
+
*/
|
|
87
|
+
required?: SynCombobox["required"];
|
|
88
|
+
/**
|
|
89
|
+
* A function that customizes the rendered option.
|
|
90
|
+
* The first argument is the option, the second
|
|
91
|
+
is the query string, which is typed into the combobox.
|
|
92
|
+
The function should return either a Lit TemplateResult or a string containing trusted HTML
|
|
93
|
+
to render in the shown list of filtered options.
|
|
94
|
+
If the query string should be highlighted use the `highlightOptionRenderer` function.
|
|
95
|
+
*/
|
|
96
|
+
getOption?: SynCombobox["getOption"];
|
|
97
|
+
/**
|
|
98
|
+
* A function used to filter options in the combobox component.
|
|
99
|
+
The default filter method is a case- and diacritic-insensitive string comparison.
|
|
100
|
+
*/
|
|
101
|
+
filter?: SynCombobox["filter"];
|
|
102
|
+
/**
|
|
103
|
+
* Support for two way data binding
|
|
104
|
+
*/
|
|
105
|
+
modelValue?: SynCombobox["value"];
|
|
106
|
+
}>, {
|
|
107
|
+
nativeElement: import("vue").Ref<SynCombobox | undefined>;
|
|
108
|
+
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
109
|
+
"syn-show": (e: SynShowEvent) => void;
|
|
110
|
+
"syn-after-show": (e: SynAfterShowEvent) => void;
|
|
111
|
+
"syn-hide": (e: SynHideEvent) => void;
|
|
112
|
+
"syn-after-hide": (e: SynAfterHideEvent) => void;
|
|
113
|
+
"syn-blur": (e: SynBlurEvent) => void;
|
|
114
|
+
"syn-focus": (e: SynFocusEvent) => void;
|
|
115
|
+
"syn-invalid": (e: SynInvalidEvent) => void;
|
|
116
|
+
"syn-change": (e: SynChangeEvent) => void;
|
|
117
|
+
"syn-input": (e: SynInputEvent) => void;
|
|
118
|
+
"update:modelValue": (newValue: string) => void;
|
|
119
|
+
"syn-clear": (e: SynClearEvent) => void;
|
|
120
|
+
"syn-error": (e: SynErrorEvent) => void;
|
|
121
|
+
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
|
|
122
|
+
/**
|
|
123
|
+
* The name of the combobox, submitted as a name/value pair with form data.
|
|
124
|
+
*/
|
|
125
|
+
name?: SynCombobox["name"];
|
|
126
|
+
/**
|
|
127
|
+
* The current value of the combobox, submitted as a name/value pair with form data.
|
|
128
|
+
*/
|
|
129
|
+
value?: SynCombobox["value"];
|
|
130
|
+
/**
|
|
131
|
+
* The combobox's size.
|
|
132
|
+
*/
|
|
133
|
+
size?: SynCombobox["size"];
|
|
134
|
+
/**
|
|
135
|
+
* Placeholder text to show as a hint when the combobox is empty.
|
|
136
|
+
*/
|
|
137
|
+
placeholder?: SynCombobox["placeholder"];
|
|
138
|
+
/**
|
|
139
|
+
* Disables the combobox control.
|
|
140
|
+
*/
|
|
141
|
+
disabled?: SynCombobox["disabled"];
|
|
142
|
+
/**
|
|
143
|
+
* Adds a clear button when the combobox is not empty.
|
|
144
|
+
*/
|
|
145
|
+
clearable?: SynCombobox["clearable"];
|
|
146
|
+
/**
|
|
147
|
+
* Indicates whether or not the combobox is open.
|
|
148
|
+
You can toggle this attribute to show and hide the listbox, or you can use the `show()`
|
|
149
|
+
and `hide()` methods and this attribute will reflect the combobox's open state.
|
|
150
|
+
*/
|
|
151
|
+
open?: SynCombobox["open"];
|
|
152
|
+
/**
|
|
153
|
+
* Enable this option to prevent the listbox from being clipped,
|
|
154
|
+
when the component is placed inside a container with `overflow: auto|scroll`.
|
|
155
|
+
Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
|
|
156
|
+
*/
|
|
157
|
+
hoist?: SynCombobox["hoist"];
|
|
158
|
+
/**
|
|
159
|
+
* The combobox's label.
|
|
160
|
+
* If you need to display HTML, use the `label` slot instead.
|
|
161
|
+
*/
|
|
162
|
+
label?: SynCombobox["label"];
|
|
163
|
+
/**
|
|
164
|
+
* The preferred placement of the combobox's menu.
|
|
165
|
+
Note that the actual placement may vary as needed to keep the listbox inside of the viewport.
|
|
166
|
+
*/
|
|
167
|
+
placement?: SynCombobox["placement"];
|
|
168
|
+
/**
|
|
169
|
+
* The combobox's help text.
|
|
170
|
+
* If you need to display HTML, use the `help-text` slot instead.
|
|
171
|
+
*/
|
|
172
|
+
helpText?: SynCombobox["helpText"];
|
|
173
|
+
/**
|
|
174
|
+
* By default, form controls are associated with the nearest containing `<form>` element.
|
|
175
|
+
This attribute allows you to place the form control outside of a form and associate it
|
|
176
|
+
with the form that has this `id`.
|
|
177
|
+
The form must be in the same document or shadow root for this to work.
|
|
178
|
+
*/
|
|
179
|
+
form?: SynCombobox["form"];
|
|
180
|
+
/**
|
|
181
|
+
* The combobox's required attribute.
|
|
182
|
+
*/
|
|
183
|
+
required?: SynCombobox["required"];
|
|
184
|
+
/**
|
|
185
|
+
* A function that customizes the rendered option.
|
|
186
|
+
* The first argument is the option, the second
|
|
187
|
+
is the query string, which is typed into the combobox.
|
|
188
|
+
The function should return either a Lit TemplateResult or a string containing trusted HTML
|
|
189
|
+
to render in the shown list of filtered options.
|
|
190
|
+
If the query string should be highlighted use the `highlightOptionRenderer` function.
|
|
191
|
+
*/
|
|
192
|
+
getOption?: SynCombobox["getOption"];
|
|
193
|
+
/**
|
|
194
|
+
* A function used to filter options in the combobox component.
|
|
195
|
+
The default filter method is a case- and diacritic-insensitive string comparison.
|
|
196
|
+
*/
|
|
197
|
+
filter?: SynCombobox["filter"];
|
|
198
|
+
/**
|
|
199
|
+
* Support for two way data binding
|
|
200
|
+
*/
|
|
201
|
+
modelValue?: SynCombobox["value"];
|
|
202
|
+
}>>> & {
|
|
203
|
+
"onSyn-show"?: ((e: SynShowEvent) => any) | undefined;
|
|
204
|
+
"onSyn-after-show"?: ((e: SynAfterShowEvent) => any) | undefined;
|
|
205
|
+
"onSyn-hide"?: ((e: SynHideEvent) => any) | undefined;
|
|
206
|
+
"onSyn-after-hide"?: ((e: SynAfterHideEvent) => any) | undefined;
|
|
207
|
+
"onSyn-blur"?: ((e: SynBlurEvent) => any) | undefined;
|
|
208
|
+
"onSyn-focus"?: ((e: SynFocusEvent) => any) | undefined;
|
|
209
|
+
"onSyn-invalid"?: ((e: SynInvalidEvent) => any) | undefined;
|
|
210
|
+
"onSyn-change"?: ((e: SynChangeEvent) => any) | undefined;
|
|
211
|
+
"onSyn-input"?: ((e: SynInputEvent) => any) | undefined;
|
|
212
|
+
"onUpdate:modelValue"?: ((newValue: string) => any) | undefined;
|
|
213
|
+
"onSyn-clear"?: ((e: SynClearEvent) => any) | undefined;
|
|
214
|
+
"onSyn-error"?: ((e: SynErrorEvent) => any) | undefined;
|
|
215
|
+
}, {}, {}>, {
|
|
216
|
+
default?(_: {}): any;
|
|
217
|
+
}>;
|
|
218
|
+
export default _default;
|
|
219
|
+
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
220
|
+
new (): {
|
|
221
|
+
$slots: S;
|
|
222
|
+
};
|
|
223
|
+
};
|
|
224
|
+
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
225
|
+
type __VLS_TypePropsToOption<T> = {
|
|
226
|
+
[K in keyof T]-?: {} extends Pick<T, K> ? {
|
|
227
|
+
type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
|
|
228
|
+
} : {
|
|
229
|
+
type: import('vue').PropType<T[K]>;
|
|
230
|
+
required: true;
|
|
231
|
+
};
|
|
232
|
+
};
|
package/dist/index.d.ts
CHANGED
|
@@ -7,6 +7,7 @@ export { default as SynVueButton } from "./components/SynVueButton.vue";
|
|
|
7
7
|
export { default as SynVueButtonGroup } from "./components/SynVueButtonGroup.vue";
|
|
8
8
|
export { default as SynVueCard } from "./components/SynVueCard.vue";
|
|
9
9
|
export { default as SynVueCheckbox } from "./components/SynVueCheckbox.vue";
|
|
10
|
+
export { default as SynVueCombobox } from "./components/SynVueCombobox.vue";
|
|
10
11
|
export { default as SynVueDetails } from "./components/SynVueDetails.vue";
|
|
11
12
|
export { default as SynVueDialog } from "./components/SynVueDialog.vue";
|
|
12
13
|
export { default as SynVueDivider } from "./components/SynVueDivider.vue";
|
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"url": "https://www.sick.com"
|
|
5
5
|
},
|
|
6
6
|
"dependencies": {
|
|
7
|
-
"@synergy-design-system/components": "^2.
|
|
7
|
+
"@synergy-design-system/components": "^2.8.0"
|
|
8
8
|
},
|
|
9
9
|
"description": "Vue3 wrappers for the Synergy Design System",
|
|
10
10
|
"exports": {
|
|
@@ -40,12 +40,12 @@
|
|
|
40
40
|
"directory": "packages/vue"
|
|
41
41
|
},
|
|
42
42
|
"type": "module",
|
|
43
|
-
"version": "2.
|
|
43
|
+
"version": "2.8.0",
|
|
44
44
|
"devDependencies": {
|
|
45
45
|
"@vue/tsconfig": "^0.5.1",
|
|
46
46
|
"vue": "^3.4.38"
|
|
47
47
|
},
|
|
48
48
|
"peerDependencies": {
|
|
49
|
-
"@synergy-design-system/tokens": "^2.
|
|
49
|
+
"@synergy-design-system/tokens": "^2.10.0"
|
|
50
50
|
}
|
|
51
51
|
}
|
|
@@ -0,0 +1,295 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
// ---------------------------------------------------------------------
|
|
3
|
+
// 🔒 AUTOGENERATED @synergy-design-system/vue wrappers for @synergy-design-system/components
|
|
4
|
+
// Please do not edit this file directly!
|
|
5
|
+
// It will get recreated when running pnpm build.
|
|
6
|
+
// ---------------------------------------------------------------------
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* @summary Comboboxes allow you to choose items from a menu of predefined options.
|
|
10
|
+
* @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-combobox--docs
|
|
11
|
+
* @status stable
|
|
12
|
+
*
|
|
13
|
+
* @dependency syn-icon
|
|
14
|
+
* @dependency syn-popup
|
|
15
|
+
*
|
|
16
|
+
* @slot - The listbox options. Must be `<syn-option>` elements.
|
|
17
|
+
* You can use `<syn-optgroup>`'s to group items visually.
|
|
18
|
+
* @slot label - The combobox's label. Alternatively, you can use the `label` attribute.
|
|
19
|
+
* @slot prefix - Used to prepend a presentational icon or similar element to the combobox.
|
|
20
|
+
* @slot suffix - Used to append a presentational icon or similar element to the combobox.
|
|
21
|
+
* @slot clear-icon - An icon to use in lieu of the default clear icon.
|
|
22
|
+
* @slot expand-icon - The icon to show when the control is expanded and collapsed.
|
|
23
|
+
* Rotates on open and close.
|
|
24
|
+
* @slot help-text - Text that describes how to use the combobox.
|
|
25
|
+
* Alternatively, you can use the `help-text` attribute.
|
|
26
|
+
*
|
|
27
|
+
* @event syn-change - Emitted when the control's value changes.
|
|
28
|
+
* @event syn-clear - Emitted when the control's value is cleared.
|
|
29
|
+
* @event syn-input - Emitted when the control receives input.
|
|
30
|
+
* @event syn-focus - Emitted when the control gains focus.
|
|
31
|
+
* @event syn-blur - Emitted when the control loses focus.
|
|
32
|
+
* @event syn-show - Emitted when the combobox's menu opens.
|
|
33
|
+
* @event syn-after-show - Emitted after the combobox's menu opens and all animations are complete.
|
|
34
|
+
* @event syn-hide - Emitted when the combobox's menu closes.
|
|
35
|
+
* @event syn-after-hide - Emitted after the combobox's menu closes and all animations are complete.
|
|
36
|
+
* @event syn-invalid - Emitted when the form control has been checked for validity
|
|
37
|
+
* and its constraints aren't satisfied.
|
|
38
|
+
* @event syn-error - Emitted when the combobox menu fails to open.
|
|
39
|
+
*
|
|
40
|
+
* @csspart form-control - The form control that wraps the label, combobox, and help text.
|
|
41
|
+
* @csspart form-control-label - The label's wrapper.
|
|
42
|
+
* @csspart form-control-input - The combobox's wrapper.
|
|
43
|
+
* @csspart form-control-help-text - The help text's wrapper.
|
|
44
|
+
* @csspart combobox - The container the wraps the prefix, combobox, clear icon, and expand button.
|
|
45
|
+
* @csspart prefix - The container that wraps the prefix slot.
|
|
46
|
+
* @csspart suffix - The container that wraps the suffix slot.
|
|
47
|
+
* @csspart display-input - The element that displays the selected option's label,
|
|
48
|
+
* an `<input>` element.
|
|
49
|
+
* @csspart listbox - The listbox container where the options are slotted
|
|
50
|
+
* and the filtered options list exists.
|
|
51
|
+
* @csspart filtered-listbox - The container that wraps the filtered options.
|
|
52
|
+
* @csspart clear-button - The clear button.
|
|
53
|
+
* @csspart expand-icon - The container that wraps the expand icon.
|
|
54
|
+
*
|
|
55
|
+
* @animation combobox.show - The animation to use when showing the combobox.
|
|
56
|
+
* @animation combobox.hide - The animation to use when hiding the combobox.
|
|
57
|
+
*/
|
|
58
|
+
import { computed, ref } from 'vue';
|
|
59
|
+
import '@synergy-design-system/components/components/combobox/combobox.js';
|
|
60
|
+
|
|
61
|
+
import type { SynChangeEvent } from '@synergy-design-system/components';
|
|
62
|
+
import type { SynClearEvent } from '@synergy-design-system/components';
|
|
63
|
+
import type { SynInputEvent } from '@synergy-design-system/components';
|
|
64
|
+
import type { SynFocusEvent } from '@synergy-design-system/components';
|
|
65
|
+
import type { SynBlurEvent } from '@synergy-design-system/components';
|
|
66
|
+
import type { SynShowEvent } from '@synergy-design-system/components';
|
|
67
|
+
import type { SynAfterShowEvent } from '@synergy-design-system/components';
|
|
68
|
+
import type { SynHideEvent } from '@synergy-design-system/components';
|
|
69
|
+
import type { SynAfterHideEvent } from '@synergy-design-system/components';
|
|
70
|
+
import type { SynInvalidEvent } from '@synergy-design-system/components';
|
|
71
|
+
import type { SynErrorEvent } from '@synergy-design-system/components';
|
|
72
|
+
import type { SynCombobox } from '@synergy-design-system/components';
|
|
73
|
+
|
|
74
|
+
// DOM Reference to the element
|
|
75
|
+
const nativeElement = ref<SynCombobox>();
|
|
76
|
+
|
|
77
|
+
defineExpose({
|
|
78
|
+
nativeElement,
|
|
79
|
+
});
|
|
80
|
+
|
|
81
|
+
// Map attributes
|
|
82
|
+
const props = defineProps<{
|
|
83
|
+
/**
|
|
84
|
+
* The name of the combobox, submitted as a name/value pair with form data.
|
|
85
|
+
*/
|
|
86
|
+
name?: SynCombobox['name'];
|
|
87
|
+
|
|
88
|
+
/**
|
|
89
|
+
* The current value of the combobox, submitted as a name/value pair with form data.
|
|
90
|
+
*/
|
|
91
|
+
value?: SynCombobox['value'];
|
|
92
|
+
|
|
93
|
+
/**
|
|
94
|
+
* The combobox's size.
|
|
95
|
+
*/
|
|
96
|
+
size?: SynCombobox['size'];
|
|
97
|
+
|
|
98
|
+
/**
|
|
99
|
+
* Placeholder text to show as a hint when the combobox is empty.
|
|
100
|
+
*/
|
|
101
|
+
placeholder?: SynCombobox['placeholder'];
|
|
102
|
+
|
|
103
|
+
/**
|
|
104
|
+
* Disables the combobox control.
|
|
105
|
+
*/
|
|
106
|
+
disabled?: SynCombobox['disabled'];
|
|
107
|
+
|
|
108
|
+
/**
|
|
109
|
+
* Adds a clear button when the combobox is not empty.
|
|
110
|
+
*/
|
|
111
|
+
clearable?: SynCombobox['clearable'];
|
|
112
|
+
|
|
113
|
+
/**
|
|
114
|
+
* Indicates whether or not the combobox is open.
|
|
115
|
+
You can toggle this attribute to show and hide the listbox, or you can use the `show()`
|
|
116
|
+
and `hide()` methods and this attribute will reflect the combobox's open state.
|
|
117
|
+
*/
|
|
118
|
+
open?: SynCombobox['open'];
|
|
119
|
+
|
|
120
|
+
/**
|
|
121
|
+
* Enable this option to prevent the listbox from being clipped,
|
|
122
|
+
when the component is placed inside a container with `overflow: auto|scroll`.
|
|
123
|
+
Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
|
|
124
|
+
*/
|
|
125
|
+
hoist?: SynCombobox['hoist'];
|
|
126
|
+
|
|
127
|
+
/**
|
|
128
|
+
* The combobox's label.
|
|
129
|
+
* If you need to display HTML, use the `label` slot instead.
|
|
130
|
+
*/
|
|
131
|
+
label?: SynCombobox['label'];
|
|
132
|
+
|
|
133
|
+
/**
|
|
134
|
+
* The preferred placement of the combobox's menu.
|
|
135
|
+
Note that the actual placement may vary as needed to keep the listbox inside of the viewport.
|
|
136
|
+
*/
|
|
137
|
+
placement?: SynCombobox['placement'];
|
|
138
|
+
|
|
139
|
+
/**
|
|
140
|
+
* The combobox's help text.
|
|
141
|
+
* If you need to display HTML, use the `help-text` slot instead.
|
|
142
|
+
*/
|
|
143
|
+
helpText?: SynCombobox['helpText'];
|
|
144
|
+
|
|
145
|
+
/**
|
|
146
|
+
* By default, form controls are associated with the nearest containing `<form>` element.
|
|
147
|
+
This attribute allows you to place the form control outside of a form and associate it
|
|
148
|
+
with the form that has this `id`.
|
|
149
|
+
The form must be in the same document or shadow root for this to work.
|
|
150
|
+
*/
|
|
151
|
+
form?: SynCombobox['form'];
|
|
152
|
+
|
|
153
|
+
/**
|
|
154
|
+
* The combobox's required attribute.
|
|
155
|
+
*/
|
|
156
|
+
required?: SynCombobox['required'];
|
|
157
|
+
|
|
158
|
+
/**
|
|
159
|
+
* A function that customizes the rendered option.
|
|
160
|
+
* The first argument is the option, the second
|
|
161
|
+
is the query string, which is typed into the combobox.
|
|
162
|
+
The function should return either a Lit TemplateResult or a string containing trusted HTML
|
|
163
|
+
to render in the shown list of filtered options.
|
|
164
|
+
If the query string should be highlighted use the `highlightOptionRenderer` function.
|
|
165
|
+
*/
|
|
166
|
+
getOption?: SynCombobox['getOption'];
|
|
167
|
+
|
|
168
|
+
/**
|
|
169
|
+
* A function used to filter options in the combobox component.
|
|
170
|
+
The default filter method is a case- and diacritic-insensitive string comparison.
|
|
171
|
+
*/
|
|
172
|
+
filter?: SynCombobox['filter'];
|
|
173
|
+
|
|
174
|
+
/**
|
|
175
|
+
* Support for two way data binding
|
|
176
|
+
*/
|
|
177
|
+
modelValue?: SynCombobox['value'];
|
|
178
|
+
}>();
|
|
179
|
+
|
|
180
|
+
// Make sure prop binding only forwards the props that are actually there.
|
|
181
|
+
// This is needed because :param="param" also adds an empty attribute
|
|
182
|
+
// when using web-components, which breaks optional arguments like size in SynInput
|
|
183
|
+
// @see https://github.com/vuejs/core/issues/5190#issuecomment-1003112498
|
|
184
|
+
const visibleProps = computed(() =>
|
|
185
|
+
Object.fromEntries(
|
|
186
|
+
Object.entries(props).filter(([, value]) => typeof value !== 'undefined'),
|
|
187
|
+
),
|
|
188
|
+
);
|
|
189
|
+
|
|
190
|
+
// Map events
|
|
191
|
+
defineEmits<{
|
|
192
|
+
/**
|
|
193
|
+
* Emitted when the control's value changes.
|
|
194
|
+
*/
|
|
195
|
+
'syn-change': [e: SynChangeEvent];
|
|
196
|
+
|
|
197
|
+
/**
|
|
198
|
+
* Emitted when the control's value is cleared.
|
|
199
|
+
*/
|
|
200
|
+
'syn-clear': [e: SynClearEvent];
|
|
201
|
+
|
|
202
|
+
/**
|
|
203
|
+
* Emitted when the control receives input.
|
|
204
|
+
*/
|
|
205
|
+
'syn-input': [e: SynInputEvent];
|
|
206
|
+
|
|
207
|
+
/**
|
|
208
|
+
* Emitted when the control gains focus.
|
|
209
|
+
*/
|
|
210
|
+
'syn-focus': [e: SynFocusEvent];
|
|
211
|
+
|
|
212
|
+
/**
|
|
213
|
+
* Emitted when the control loses focus.
|
|
214
|
+
*/
|
|
215
|
+
'syn-blur': [e: SynBlurEvent];
|
|
216
|
+
|
|
217
|
+
/**
|
|
218
|
+
* Emitted when the combobox's menu opens.
|
|
219
|
+
*/
|
|
220
|
+
'syn-show': [e: SynShowEvent];
|
|
221
|
+
|
|
222
|
+
/**
|
|
223
|
+
* Emitted after the combobox's menu opens and all animations are complete.
|
|
224
|
+
*/
|
|
225
|
+
'syn-after-show': [e: SynAfterShowEvent];
|
|
226
|
+
|
|
227
|
+
/**
|
|
228
|
+
* Emitted when the combobox's menu closes.
|
|
229
|
+
*/
|
|
230
|
+
'syn-hide': [e: SynHideEvent];
|
|
231
|
+
|
|
232
|
+
/**
|
|
233
|
+
* Emitted after the combobox's menu closes and all animations are complete.
|
|
234
|
+
*/
|
|
235
|
+
'syn-after-hide': [e: SynAfterHideEvent];
|
|
236
|
+
|
|
237
|
+
/**
|
|
238
|
+
* Emitted when the form control has been checked for validity and its constraints aren't satisfied.
|
|
239
|
+
*/
|
|
240
|
+
'syn-invalid': [e: SynInvalidEvent];
|
|
241
|
+
|
|
242
|
+
/**
|
|
243
|
+
* Emitted when the combobox menu fails to open.
|
|
244
|
+
*/
|
|
245
|
+
'syn-error': [e: SynErrorEvent];
|
|
246
|
+
|
|
247
|
+
/**
|
|
248
|
+
* Support for two way data binding
|
|
249
|
+
*/
|
|
250
|
+
'update:modelValue': [newValue: SynCombobox['value']];
|
|
251
|
+
}>();
|
|
252
|
+
</script>
|
|
253
|
+
|
|
254
|
+
<script lang="ts">
|
|
255
|
+
export type { SynChangeEvent } from '@synergy-design-system/components';
|
|
256
|
+
export type { SynClearEvent } from '@synergy-design-system/components';
|
|
257
|
+
export type { SynInputEvent } from '@synergy-design-system/components';
|
|
258
|
+
export type { SynFocusEvent } from '@synergy-design-system/components';
|
|
259
|
+
export type { SynBlurEvent } from '@synergy-design-system/components';
|
|
260
|
+
export type { SynShowEvent } from '@synergy-design-system/components';
|
|
261
|
+
export type { SynAfterShowEvent } from '@synergy-design-system/components';
|
|
262
|
+
export type { SynHideEvent } from '@synergy-design-system/components';
|
|
263
|
+
export type { SynAfterHideEvent } from '@synergy-design-system/components';
|
|
264
|
+
export type { SynInvalidEvent } from '@synergy-design-system/components';
|
|
265
|
+
export type { SynErrorEvent } from '@synergy-design-system/components';
|
|
266
|
+
</script>
|
|
267
|
+
|
|
268
|
+
<template>
|
|
269
|
+
<syn-combobox
|
|
270
|
+
@syn-change="$emit('syn-change', $event)"
|
|
271
|
+
@syn-clear="$emit('syn-clear', $event)"
|
|
272
|
+
@syn-input="
|
|
273
|
+
$emit('update:modelValue', $event.target.value);
|
|
274
|
+
$emit('syn-input', $event);
|
|
275
|
+
"
|
|
276
|
+
@syn-focus="$emit('syn-focus', $event)"
|
|
277
|
+
@syn-blur="$emit('syn-blur', $event)"
|
|
278
|
+
@syn-show="$emit('syn-show', $event)"
|
|
279
|
+
@syn-after-show="$emit('syn-after-show', $event)"
|
|
280
|
+
@syn-hide="$emit('syn-hide', $event)"
|
|
281
|
+
@syn-after-hide="$emit('syn-after-hide', $event)"
|
|
282
|
+
@syn-invalid="$emit('syn-invalid', $event)"
|
|
283
|
+
@syn-error="$emit('syn-error', $event)"
|
|
284
|
+
:value="
|
|
285
|
+
typeof props.modelValue !== 'undefined'
|
|
286
|
+
? props.modelValue
|
|
287
|
+
: typeof props.value !== 'undefined'
|
|
288
|
+
? props.value
|
|
289
|
+
: undefined
|
|
290
|
+
"
|
|
291
|
+
v-bind="visibleProps"
|
|
292
|
+
ref="nativeElement">
|
|
293
|
+
<slot></slot>
|
|
294
|
+
</syn-combobox>
|
|
295
|
+
</template>
|
package/src/index.js
CHANGED
|
@@ -12,6 +12,7 @@ export { default as SynVueButton } from './components/SynVueButton.vue';
|
|
|
12
12
|
export { default as SynVueButtonGroup } from './components/SynVueButtonGroup.vue';
|
|
13
13
|
export { default as SynVueCard } from './components/SynVueCard.vue';
|
|
14
14
|
export { default as SynVueCheckbox } from './components/SynVueCheckbox.vue';
|
|
15
|
+
export { default as SynVueCombobox } from './components/SynVueCombobox.vue';
|
|
15
16
|
export { default as SynVueDetails } from './components/SynVueDetails.vue';
|
|
16
17
|
export { default as SynVueDialog } from './components/SynVueDialog.vue';
|
|
17
18
|
export { default as SynVueDivider } from './components/SynVueDivider.vue';
|