@synergy-design-system/vue 2.5.0 → 2.6.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.
|
@@ -0,0 +1,154 @@
|
|
|
1
|
+
import '@synergy-design-system/components/components/range/range.js';
|
|
2
|
+
import type { SynBlurEvent, SynChangeEvent, SynFocusEvent, SynInputEvent, SynInvalidEvent, SynMoveEvent, SynRange } from '@synergy-design-system/components';
|
|
3
|
+
export type { SynBlurEvent } from '@synergy-design-system/components';
|
|
4
|
+
export type { SynChangeEvent } from '@synergy-design-system/components';
|
|
5
|
+
export type { SynFocusEvent } from '@synergy-design-system/components';
|
|
6
|
+
export type { SynInputEvent } from '@synergy-design-system/components';
|
|
7
|
+
export type { SynInvalidEvent } from '@synergy-design-system/components';
|
|
8
|
+
export type { SynMoveEvent } from '@synergy-design-system/components';
|
|
9
|
+
declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<{
|
|
10
|
+
/**
|
|
11
|
+
* The name of the range, submitted as a name/value pair with form data.
|
|
12
|
+
*/
|
|
13
|
+
name?: string | undefined;
|
|
14
|
+
/**
|
|
15
|
+
* The range's label.
|
|
16
|
+
* If you need to display HTML, use the `label` slot instead.
|
|
17
|
+
*/
|
|
18
|
+
label?: string | undefined;
|
|
19
|
+
/**
|
|
20
|
+
* The range's help text.
|
|
21
|
+
* If you need to display HTML, use the help-text slot instead.
|
|
22
|
+
*/
|
|
23
|
+
helpText?: string | undefined;
|
|
24
|
+
/**
|
|
25
|
+
* Disables the range.
|
|
26
|
+
*/
|
|
27
|
+
disabled?: boolean | undefined;
|
|
28
|
+
/**
|
|
29
|
+
* The minimum acceptable value of the range.
|
|
30
|
+
*/
|
|
31
|
+
min?: number | undefined;
|
|
32
|
+
/**
|
|
33
|
+
* The maximum acceptable value of the range.
|
|
34
|
+
*/
|
|
35
|
+
max?: number | undefined;
|
|
36
|
+
/**
|
|
37
|
+
* The interval at which the range will increase and decrease.
|
|
38
|
+
*/
|
|
39
|
+
step?: number | undefined;
|
|
40
|
+
/**
|
|
41
|
+
* The range's size.
|
|
42
|
+
*/
|
|
43
|
+
size?: "medium" | "large" | "small" | undefined;
|
|
44
|
+
/**
|
|
45
|
+
* The preferred placement of the range's tooltip.
|
|
46
|
+
* Use "none" to disable the tooltip
|
|
47
|
+
*/
|
|
48
|
+
tooltipPlacement?: "top" | "bottom" | "none" | undefined;
|
|
49
|
+
/**
|
|
50
|
+
* The current values of the input (in ascending order) as a string of space separated values
|
|
51
|
+
*/
|
|
52
|
+
value?: string | null | undefined;
|
|
53
|
+
/**
|
|
54
|
+
* By default, form controls are associated with the nearest containing `<form>` element.
|
|
55
|
+
This attribute allows you to place the form control outside of a form
|
|
56
|
+
and associate it with the form that has this `id`.
|
|
57
|
+
The form must be in the same document or shadow root for this to work.
|
|
58
|
+
*/
|
|
59
|
+
form?: string | undefined;
|
|
60
|
+
/**
|
|
61
|
+
* Support for two way data binding
|
|
62
|
+
*/
|
|
63
|
+
modelValue?: string | null | undefined;
|
|
64
|
+
}>, {
|
|
65
|
+
nativeElement: import("vue").Ref<SynRange | undefined>;
|
|
66
|
+
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
67
|
+
"syn-blur": (e: SynBlurEvent) => void;
|
|
68
|
+
"syn-focus": (e: SynFocusEvent) => void;
|
|
69
|
+
"syn-invalid": (e: SynInvalidEvent) => void;
|
|
70
|
+
"syn-change": (e: SynChangeEvent) => void;
|
|
71
|
+
"syn-input": (e: SynInputEvent) => void;
|
|
72
|
+
"update:modelValue": (newValue: string | null) => void;
|
|
73
|
+
"syn-move": (e: SynMoveEvent) => void;
|
|
74
|
+
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
|
|
75
|
+
/**
|
|
76
|
+
* The name of the range, submitted as a name/value pair with form data.
|
|
77
|
+
*/
|
|
78
|
+
name?: string | undefined;
|
|
79
|
+
/**
|
|
80
|
+
* The range's label.
|
|
81
|
+
* If you need to display HTML, use the `label` slot instead.
|
|
82
|
+
*/
|
|
83
|
+
label?: string | undefined;
|
|
84
|
+
/**
|
|
85
|
+
* The range's help text.
|
|
86
|
+
* If you need to display HTML, use the help-text slot instead.
|
|
87
|
+
*/
|
|
88
|
+
helpText?: string | undefined;
|
|
89
|
+
/**
|
|
90
|
+
* Disables the range.
|
|
91
|
+
*/
|
|
92
|
+
disabled?: boolean | undefined;
|
|
93
|
+
/**
|
|
94
|
+
* The minimum acceptable value of the range.
|
|
95
|
+
*/
|
|
96
|
+
min?: number | undefined;
|
|
97
|
+
/**
|
|
98
|
+
* The maximum acceptable value of the range.
|
|
99
|
+
*/
|
|
100
|
+
max?: number | undefined;
|
|
101
|
+
/**
|
|
102
|
+
* The interval at which the range will increase and decrease.
|
|
103
|
+
*/
|
|
104
|
+
step?: number | undefined;
|
|
105
|
+
/**
|
|
106
|
+
* The range's size.
|
|
107
|
+
*/
|
|
108
|
+
size?: "medium" | "large" | "small" | undefined;
|
|
109
|
+
/**
|
|
110
|
+
* The preferred placement of the range's tooltip.
|
|
111
|
+
* Use "none" to disable the tooltip
|
|
112
|
+
*/
|
|
113
|
+
tooltipPlacement?: "top" | "bottom" | "none" | undefined;
|
|
114
|
+
/**
|
|
115
|
+
* The current values of the input (in ascending order) as a string of space separated values
|
|
116
|
+
*/
|
|
117
|
+
value?: string | null | undefined;
|
|
118
|
+
/**
|
|
119
|
+
* By default, form controls are associated with the nearest containing `<form>` element.
|
|
120
|
+
This attribute allows you to place the form control outside of a form
|
|
121
|
+
and associate it with the form that has this `id`.
|
|
122
|
+
The form must be in the same document or shadow root for this to work.
|
|
123
|
+
*/
|
|
124
|
+
form?: string | undefined;
|
|
125
|
+
/**
|
|
126
|
+
* Support for two way data binding
|
|
127
|
+
*/
|
|
128
|
+
modelValue?: string | null | undefined;
|
|
129
|
+
}>>> & {
|
|
130
|
+
"onSyn-blur"?: ((e: SynBlurEvent) => any) | undefined;
|
|
131
|
+
"onSyn-focus"?: ((e: SynFocusEvent) => any) | undefined;
|
|
132
|
+
"onSyn-invalid"?: ((e: SynInvalidEvent) => any) | undefined;
|
|
133
|
+
"onSyn-change"?: ((e: SynChangeEvent) => any) | undefined;
|
|
134
|
+
"onSyn-input"?: ((e: SynInputEvent) => any) | undefined;
|
|
135
|
+
"onUpdate:modelValue"?: ((newValue: string | null) => any) | undefined;
|
|
136
|
+
"onSyn-move"?: ((e: SynMoveEvent) => any) | undefined;
|
|
137
|
+
}, {}, {}>, {
|
|
138
|
+
default?(_: {}): any;
|
|
139
|
+
}>;
|
|
140
|
+
export default _default;
|
|
141
|
+
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
142
|
+
new (): {
|
|
143
|
+
$slots: S;
|
|
144
|
+
};
|
|
145
|
+
};
|
|
146
|
+
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
147
|
+
type __VLS_TypePropsToOption<T> = {
|
|
148
|
+
[K in keyof T]-?: {} extends Pick<T, K> ? {
|
|
149
|
+
type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
|
|
150
|
+
} : {
|
|
151
|
+
type: import('vue').PropType<T[K]>;
|
|
152
|
+
required: true;
|
|
153
|
+
};
|
|
154
|
+
};
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import '@synergy-design-system/components/components/range-tick/range-tick.js';
|
|
2
|
+
import type { SynRangeTick } from '@synergy-design-system/components';
|
|
3
|
+
declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<{
|
|
4
|
+
/**
|
|
5
|
+
* Whether the tick should be shown as a subdivision.
|
|
6
|
+
*/
|
|
7
|
+
subdivision?: boolean | undefined;
|
|
8
|
+
}>, {
|
|
9
|
+
nativeElement: import("vue").Ref<SynRangeTick | undefined>;
|
|
10
|
+
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
|
|
11
|
+
/**
|
|
12
|
+
* Whether the tick should be shown as a subdivision.
|
|
13
|
+
*/
|
|
14
|
+
subdivision?: boolean | undefined;
|
|
15
|
+
}>>>, {}, {}>, {
|
|
16
|
+
default?(_: {}): any;
|
|
17
|
+
}>;
|
|
18
|
+
export default _default;
|
|
19
|
+
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
20
|
+
new (): {
|
|
21
|
+
$slots: S;
|
|
22
|
+
};
|
|
23
|
+
};
|
|
24
|
+
type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
|
|
25
|
+
type __VLS_TypePropsToOption<T> = {
|
|
26
|
+
[K in keyof T]-?: {} extends Pick<T, K> ? {
|
|
27
|
+
type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
|
|
28
|
+
} : {
|
|
29
|
+
type: import('vue').PropType<T[K]>;
|
|
30
|
+
required: true;
|
|
31
|
+
};
|
|
32
|
+
};
|
package/dist/index.d.ts
CHANGED
|
@@ -30,6 +30,8 @@ export { default as SynVueProgressRing } from "./components/SynVueProgressRing.v
|
|
|
30
30
|
export { default as SynVueRadio } from "./components/SynVueRadio.vue";
|
|
31
31
|
export { default as SynVueRadioButton } from "./components/SynVueRadioButton.vue";
|
|
32
32
|
export { default as SynVueRadioGroup } from "./components/SynVueRadioGroup.vue";
|
|
33
|
+
export { default as SynVueRange } from "./components/SynVueRange.vue";
|
|
34
|
+
export { default as SynVueRangeTick } from "./components/SynVueRangeTick.vue";
|
|
33
35
|
export { default as SynVueSelect } from "./components/SynVueSelect.vue";
|
|
34
36
|
export { default as SynVueSideNav } from "./components/SynVueSideNav.vue";
|
|
35
37
|
export { default as SynVueSpinner } from "./components/SynVueSpinner.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.6.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.6.0",
|
|
44
44
|
"devDependencies": {
|
|
45
45
|
"@vue/tsconfig": "^0.5.1",
|
|
46
46
|
"vue": "^3.4.24"
|
|
47
47
|
},
|
|
48
48
|
"peerDependencies": {
|
|
49
|
-
"@synergy-design-system/tokens": "^2.
|
|
49
|
+
"@synergy-design-system/tokens": "^2.7.0"
|
|
50
50
|
}
|
|
51
51
|
}
|
|
@@ -0,0 +1,210 @@
|
|
|
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 Ranges allow the user to select values within a given range using one or two thumbs.
|
|
10
|
+
* @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-range--docs
|
|
11
|
+
* @status stable
|
|
12
|
+
*
|
|
13
|
+
* @dependency syn-tooltip
|
|
14
|
+
*
|
|
15
|
+
* @slot label - The range's label. Alternatively, you can use the `label` attribute.
|
|
16
|
+
* @slot prefix - Used to prepend a presentational icon or similar element to the range.
|
|
17
|
+
* @slot suffix - Used to append a presentational icon or similar element to the range.
|
|
18
|
+
* @slot help-text - Text that describes how to use the range.
|
|
19
|
+
* Alternatively, you can use the `help-text` attribute.
|
|
20
|
+
* @slot ticks - Used to display tick marks at specific intervals along the range.
|
|
21
|
+
*
|
|
22
|
+
* @event syn-blur - Emitted when the control loses focus.
|
|
23
|
+
* @event syn-change - Emitted when an alteration to the control's value is committed by the user.
|
|
24
|
+
* @event syn-focus - Emitted when the control gains focus.
|
|
25
|
+
* @event syn-input - Emitted when the control receives input.
|
|
26
|
+
* @event syn-invalid - Emitted when the form control has been checked for validity
|
|
27
|
+
* and its constraints aren't satisfied.
|
|
28
|
+
* @event syn-move - Emitted when the user moves a thumb, either via touch or keyboard.
|
|
29
|
+
* Use `Event.preventDefault()` to prevent movement.
|
|
30
|
+
*
|
|
31
|
+
* @csspart form-control - The form control that wraps the label, input, and help text.
|
|
32
|
+
* @csspart form-control-label - The label's wrapper.
|
|
33
|
+
* @csspart form-control-help-text - The help text's wrapper.
|
|
34
|
+
* @csspart base - The component's base wrapper.
|
|
35
|
+
* @csspart input-wrapper - The container that wraps the input track and ticks.
|
|
36
|
+
* @csspart track-wrapper - The wrapper for the track.
|
|
37
|
+
* @csspart track - The inactive track.
|
|
38
|
+
* @csspart active-track - The active track.
|
|
39
|
+
* @csspart prefix - The container that wraps the prefix.
|
|
40
|
+
* @csspart suffix - The container that wraps the suffix.
|
|
41
|
+
* @csspart ticks - The container that wraps the tick marks.
|
|
42
|
+
* @csspart thumb - The thumb(s) that the user can drag to change the range.
|
|
43
|
+
*
|
|
44
|
+
* @cssproperty --thumb-size - The size of a thumb.
|
|
45
|
+
* @cssproperty --thumb-hit-area-size - The clickable area around the thumb.
|
|
46
|
+
* Per default this is set to 140% of the thumb size. Must be a scale css value (defaults to 1.4).
|
|
47
|
+
* @cssproperty --track-hit-area-size - The clickable area around the track (top and left).
|
|
48
|
+
* @cssproperty --track-color-active - Color of the track representing the current value.
|
|
49
|
+
* @cssproperty --track-color-inactive - Color of the track that represents the remaining value.
|
|
50
|
+
* @cssproperty --track-height - The height of the track.
|
|
51
|
+
* @cssproperty --track-active-offset - The point of origin of the active track,
|
|
52
|
+
* starting at the left side of the range.
|
|
53
|
+
*/
|
|
54
|
+
import { computed, ref } from 'vue';
|
|
55
|
+
import '@synergy-design-system/components/components/range/range.js';
|
|
56
|
+
|
|
57
|
+
import type {
|
|
58
|
+
SynBlurEvent, SynChangeEvent, SynFocusEvent, SynInputEvent, SynInvalidEvent, SynMoveEvent, SynRange,
|
|
59
|
+
} from '@synergy-design-system/components';
|
|
60
|
+
|
|
61
|
+
// DOM Reference to the element
|
|
62
|
+
const nativeElement = ref<SynRange>();
|
|
63
|
+
|
|
64
|
+
defineExpose({
|
|
65
|
+
nativeElement,
|
|
66
|
+
});
|
|
67
|
+
|
|
68
|
+
// Map attributes
|
|
69
|
+
const props = defineProps<{
|
|
70
|
+
/**
|
|
71
|
+
* The name of the range, submitted as a name/value pair with form data.
|
|
72
|
+
*/
|
|
73
|
+
'name'?: SynRange['name'];
|
|
74
|
+
|
|
75
|
+
/**
|
|
76
|
+
* The range's label.
|
|
77
|
+
* If you need to display HTML, use the `label` slot instead.
|
|
78
|
+
*/
|
|
79
|
+
'label'?: SynRange['label'];
|
|
80
|
+
|
|
81
|
+
/**
|
|
82
|
+
* The range's help text.
|
|
83
|
+
* If you need to display HTML, use the help-text slot instead.
|
|
84
|
+
*/
|
|
85
|
+
'helpText'?: SynRange['helpText'];
|
|
86
|
+
|
|
87
|
+
/**
|
|
88
|
+
* Disables the range.
|
|
89
|
+
*/
|
|
90
|
+
'disabled'?: SynRange['disabled'];
|
|
91
|
+
|
|
92
|
+
/**
|
|
93
|
+
* The minimum acceptable value of the range.
|
|
94
|
+
*/
|
|
95
|
+
'min'?: SynRange['min'];
|
|
96
|
+
|
|
97
|
+
/**
|
|
98
|
+
* The maximum acceptable value of the range.
|
|
99
|
+
*/
|
|
100
|
+
'max'?: SynRange['max'];
|
|
101
|
+
|
|
102
|
+
/**
|
|
103
|
+
* The interval at which the range will increase and decrease.
|
|
104
|
+
*/
|
|
105
|
+
'step'?: SynRange['step'];
|
|
106
|
+
|
|
107
|
+
/**
|
|
108
|
+
* The range's size.
|
|
109
|
+
*/
|
|
110
|
+
'size'?: SynRange['size'];
|
|
111
|
+
|
|
112
|
+
/**
|
|
113
|
+
* The preferred placement of the range's tooltip.
|
|
114
|
+
* Use "none" to disable the tooltip
|
|
115
|
+
*/
|
|
116
|
+
'tooltipPlacement'?: SynRange['tooltipPlacement'];
|
|
117
|
+
|
|
118
|
+
/**
|
|
119
|
+
* The current values of the input (in ascending order) as a string of space separated values
|
|
120
|
+
*/
|
|
121
|
+
'value'?: SynRange['value'];
|
|
122
|
+
|
|
123
|
+
/**
|
|
124
|
+
* By default, form controls are associated with the nearest containing `<form>` element.
|
|
125
|
+
This attribute allows you to place the form control outside of a form
|
|
126
|
+
and associate it with the form that has this `id`.
|
|
127
|
+
The form must be in the same document or shadow root for this to work.
|
|
128
|
+
*/
|
|
129
|
+
'form'?: SynRange['form'];
|
|
130
|
+
|
|
131
|
+
/**
|
|
132
|
+
* Support for two way data binding
|
|
133
|
+
*/
|
|
134
|
+
modelValue?: SynRange['value'];
|
|
135
|
+
}>();
|
|
136
|
+
|
|
137
|
+
// Make sure prop binding only forwards the props that are actually there.
|
|
138
|
+
// This is needed because :param="param" also adds an empty attribute
|
|
139
|
+
// when using web-components, which breaks optional arguments like size in SynInput
|
|
140
|
+
// @see https://github.com/vuejs/core/issues/5190#issuecomment-1003112498
|
|
141
|
+
const visibleProps = computed(() => Object.fromEntries(
|
|
142
|
+
Object
|
|
143
|
+
.entries(props)
|
|
144
|
+
.filter(([, value]) => typeof value !== 'undefined'),
|
|
145
|
+
));
|
|
146
|
+
|
|
147
|
+
// Map events
|
|
148
|
+
defineEmits<{
|
|
149
|
+
/**
|
|
150
|
+
* Emitted when the control loses focus.
|
|
151
|
+
*/
|
|
152
|
+
'syn-blur': [e: SynBlurEvent];
|
|
153
|
+
|
|
154
|
+
/**
|
|
155
|
+
* Emitted when an alteration to the control's value is committed by the user.
|
|
156
|
+
*/
|
|
157
|
+
'syn-change': [e: SynChangeEvent];
|
|
158
|
+
|
|
159
|
+
/**
|
|
160
|
+
* Emitted when the control gains focus.
|
|
161
|
+
*/
|
|
162
|
+
'syn-focus': [e: SynFocusEvent];
|
|
163
|
+
|
|
164
|
+
/**
|
|
165
|
+
* Emitted when the control receives input.
|
|
166
|
+
*/
|
|
167
|
+
'syn-input': [e: SynInputEvent];
|
|
168
|
+
|
|
169
|
+
/**
|
|
170
|
+
* Emitted when the form control has been checked for validity and its constraints aren't satisfied.
|
|
171
|
+
*/
|
|
172
|
+
'syn-invalid': [e: SynInvalidEvent];
|
|
173
|
+
|
|
174
|
+
/**
|
|
175
|
+
* Emitted when the user moves a thumb, either via touch or keyboard.
|
|
176
|
+
* Use `Event.preventDefault()` to prevent movement.
|
|
177
|
+
*/
|
|
178
|
+
'syn-move': [e: SynMoveEvent];
|
|
179
|
+
|
|
180
|
+
/**
|
|
181
|
+
* Support for two way data binding
|
|
182
|
+
*/
|
|
183
|
+
'update:modelValue': [newValue: SynRange['value']];
|
|
184
|
+
}>();
|
|
185
|
+
</script>
|
|
186
|
+
|
|
187
|
+
<script lang="ts">
|
|
188
|
+
export type { SynBlurEvent } from '@synergy-design-system/components';
|
|
189
|
+
export type { SynChangeEvent } from '@synergy-design-system/components';
|
|
190
|
+
export type { SynFocusEvent } from '@synergy-design-system/components';
|
|
191
|
+
export type { SynInputEvent } from '@synergy-design-system/components';
|
|
192
|
+
export type { SynInvalidEvent } from '@synergy-design-system/components';
|
|
193
|
+
export type { SynMoveEvent } from '@synergy-design-system/components';
|
|
194
|
+
</script>
|
|
195
|
+
|
|
196
|
+
<template>
|
|
197
|
+
<syn-range
|
|
198
|
+
v-bind="visibleProps"
|
|
199
|
+
ref="nativeElement"
|
|
200
|
+
:value="typeof props.modelValue !== 'undefined' ? props.modelValue : typeof props.value !== 'undefined' ? props.value : undefined"
|
|
201
|
+
@syn-blur="$emit('syn-blur', $event)"
|
|
202
|
+
@syn-change="$emit('syn-change', $event)"
|
|
203
|
+
@syn-focus="$emit('syn-focus', $event)"
|
|
204
|
+
@syn-input="$emit('update:modelValue', $event.target.value); $emit('syn-input', $event)"
|
|
205
|
+
@syn-invalid="$emit('syn-invalid', $event)"
|
|
206
|
+
@syn-move="$emit('syn-move', $event)"
|
|
207
|
+
>
|
|
208
|
+
<slot />
|
|
209
|
+
</syn-range>
|
|
210
|
+
</template>
|
|
@@ -0,0 +1,62 @@
|
|
|
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 Ticks visually improve positioning on range sliders.
|
|
10
|
+
* @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-range--docs
|
|
11
|
+
* @status stable
|
|
12
|
+
*
|
|
13
|
+
* @slot - The tick's label
|
|
14
|
+
*
|
|
15
|
+
* @csspart base - The component's base wrapper.
|
|
16
|
+
* @csspart label - The component's label.
|
|
17
|
+
* @csspart line - The component's tick line.
|
|
18
|
+
*
|
|
19
|
+
* @cssproperty --tick-height - The height of the tick marker.
|
|
20
|
+
* @cssproperty --tick-label-top - The top offset of the tick label.
|
|
21
|
+
*/
|
|
22
|
+
import { computed, ref } from 'vue';
|
|
23
|
+
import '@synergy-design-system/components/components/range-tick/range-tick.js';
|
|
24
|
+
|
|
25
|
+
import type { SynRangeTick } from '@synergy-design-system/components';
|
|
26
|
+
|
|
27
|
+
// DOM Reference to the element
|
|
28
|
+
const nativeElement = ref<SynRangeTick>();
|
|
29
|
+
|
|
30
|
+
defineExpose({
|
|
31
|
+
nativeElement,
|
|
32
|
+
});
|
|
33
|
+
|
|
34
|
+
// Map attributes
|
|
35
|
+
const props = defineProps<{
|
|
36
|
+
/**
|
|
37
|
+
* Whether the tick should be shown as a subdivision.
|
|
38
|
+
*/
|
|
39
|
+
'subdivision'?: SynRangeTick['subdivision'];
|
|
40
|
+
}>();
|
|
41
|
+
|
|
42
|
+
// Make sure prop binding only forwards the props that are actually there.
|
|
43
|
+
// This is needed because :param="param" also adds an empty attribute
|
|
44
|
+
// when using web-components, which breaks optional arguments like size in SynInput
|
|
45
|
+
// @see https://github.com/vuejs/core/issues/5190#issuecomment-1003112498
|
|
46
|
+
const visibleProps = computed(() => Object.fromEntries(
|
|
47
|
+
Object
|
|
48
|
+
.entries(props)
|
|
49
|
+
.filter(([, value]) => typeof value !== 'undefined'),
|
|
50
|
+
));
|
|
51
|
+
|
|
52
|
+
</script>
|
|
53
|
+
|
|
54
|
+
<template>
|
|
55
|
+
<syn-range-tick
|
|
56
|
+
|
|
57
|
+
v-bind="visibleProps"
|
|
58
|
+
ref="nativeElement"
|
|
59
|
+
>
|
|
60
|
+
<slot />
|
|
61
|
+
</syn-range-tick>
|
|
62
|
+
</template>
|
package/src/index.js
CHANGED
|
@@ -35,6 +35,8 @@ export { default as SynVueProgressRing } from './components/SynVueProgressRing.v
|
|
|
35
35
|
export { default as SynVueRadio } from './components/SynVueRadio.vue';
|
|
36
36
|
export { default as SynVueRadioButton } from './components/SynVueRadioButton.vue';
|
|
37
37
|
export { default as SynVueRadioGroup } from './components/SynVueRadioGroup.vue';
|
|
38
|
+
export { default as SynVueRange } from './components/SynVueRange.vue';
|
|
39
|
+
export { default as SynVueRangeTick } from './components/SynVueRangeTick.vue';
|
|
38
40
|
export { default as SynVueSelect } from './components/SynVueSelect.vue';
|
|
39
41
|
export { default as SynVueSideNav } from './components/SynVueSideNav.vue';
|
|
40
42
|
export { default as SynVueSpinner } from './components/SynVueSpinner.vue';
|