@synergy-design-system/vue 2.31.0-numeric.3 → 2.31.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.
|
@@ -1,11 +1,10 @@
|
|
|
1
|
-
import { SynBlurEvent, SynChangeEvent, SynClearEvent, SynFocusEvent, SynInputEvent, SynInvalidEvent,
|
|
1
|
+
import { SynBlurEvent, SynChangeEvent, SynClearEvent, SynFocusEvent, SynInputEvent, SynInvalidEvent, SynInput } from '@synergy-design-system/components';
|
|
2
2
|
export type { SynBlurEvent } from '@synergy-design-system/components';
|
|
3
3
|
export type { SynChangeEvent } from '@synergy-design-system/components';
|
|
4
4
|
export type { SynClearEvent } from '@synergy-design-system/components';
|
|
5
5
|
export type { SynFocusEvent } from '@synergy-design-system/components';
|
|
6
6
|
export type { SynInputEvent } from '@synergy-design-system/components';
|
|
7
7
|
export type { SynInvalidEvent } from '@synergy-design-system/components';
|
|
8
|
-
export type { SynClampEvent } from '@synergy-design-system/components';
|
|
9
8
|
declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
|
|
10
9
|
title?: SynInput["title"];
|
|
11
10
|
/**
|
|
@@ -139,44 +138,6 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
|
|
|
139
138
|
*/
|
|
140
139
|
inputmode?: SynInput["inputmode"];
|
|
141
140
|
/**
|
|
142
|
-
* The minimal amount of fraction digits to use for numeric values.
|
|
143
|
-
Used to format the number when the input type is `number`.
|
|
144
|
-
*/
|
|
145
|
-
minFractionDigits?: SynInput["minFractionDigits"];
|
|
146
|
-
/**
|
|
147
|
-
* The maximal amount of fraction digits to use for numeric values.
|
|
148
|
-
Used to format the number when the input type is `number`.
|
|
149
|
-
*/
|
|
150
|
-
maxFractionDigits?: SynInput["maxFractionDigits"];
|
|
151
|
-
/**
|
|
152
|
-
* Defines the strategy for handling numbers in the numeric input.
|
|
153
|
-
This is used to determine how the input behaves when the user interacts with it.
|
|
154
|
-
|
|
155
|
-
Includes the following configuration options:
|
|
156
|
-
|
|
157
|
-
- **autoClamp**: If true, the input will clamp the value to the min and max attributes.
|
|
158
|
-
- **noStepAlign**: If true, the input will not align the value to the step attribute.
|
|
159
|
-
- **noStepValidation**: If true, the input will not validate the value against the step attribute.
|
|
160
|
-
|
|
161
|
-
You may provide this as one of the following values:
|
|
162
|
-
|
|
163
|
-
- 'native': Uses the native browser implementation.
|
|
164
|
-
- 'modern': Uses a more intuitive implementation:
|
|
165
|
-
- Values are clamped to the nearest min or max value.
|
|
166
|
-
- Stepping is inclusive to the provided min and max values.
|
|
167
|
-
- Provided stepping is no longer used in validation.
|
|
168
|
-
- Advanced number formatting is enabled.
|
|
169
|
-
- An object that matches the `NumericStrategy` type.
|
|
170
|
-
* Note this can only be set via `property`, not as an `attribute`!
|
|
171
|
-
*/
|
|
172
|
-
numericStrategy?: SynInput["numericStrategy"];
|
|
173
|
-
/**
|
|
174
|
-
* Optional options that should be passed to the `NumberFormatter` when formatting the value.
|
|
175
|
-
This is used to format the number when the input type is `number`.
|
|
176
|
-
Note this can only be set via `property`, not as an `attribute`!
|
|
177
|
-
*/
|
|
178
|
-
numberFormatterOptions?: SynInput["numberFormatterOptions"];
|
|
179
|
-
/**
|
|
180
141
|
* Support for two way data binding
|
|
181
142
|
*/
|
|
182
143
|
modelValue?: SynInput["value"];
|
|
@@ -190,7 +151,6 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
|
|
|
190
151
|
"syn-input": (e: SynInputEvent) => any;
|
|
191
152
|
"update:modelValue": (newValue: string) => any;
|
|
192
153
|
"syn-clear": (e: SynClearEvent) => any;
|
|
193
|
-
"syn-clamp": (e: SynClampEvent) => any;
|
|
194
154
|
}, string, import('vue').PublicProps, Readonly<{
|
|
195
155
|
title?: SynInput["title"];
|
|
196
156
|
/**
|
|
@@ -324,44 +284,6 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
|
|
|
324
284
|
*/
|
|
325
285
|
inputmode?: SynInput["inputmode"];
|
|
326
286
|
/**
|
|
327
|
-
* The minimal amount of fraction digits to use for numeric values.
|
|
328
|
-
Used to format the number when the input type is `number`.
|
|
329
|
-
*/
|
|
330
|
-
minFractionDigits?: SynInput["minFractionDigits"];
|
|
331
|
-
/**
|
|
332
|
-
* The maximal amount of fraction digits to use for numeric values.
|
|
333
|
-
Used to format the number when the input type is `number`.
|
|
334
|
-
*/
|
|
335
|
-
maxFractionDigits?: SynInput["maxFractionDigits"];
|
|
336
|
-
/**
|
|
337
|
-
* Defines the strategy for handling numbers in the numeric input.
|
|
338
|
-
This is used to determine how the input behaves when the user interacts with it.
|
|
339
|
-
|
|
340
|
-
Includes the following configuration options:
|
|
341
|
-
|
|
342
|
-
- **autoClamp**: If true, the input will clamp the value to the min and max attributes.
|
|
343
|
-
- **noStepAlign**: If true, the input will not align the value to the step attribute.
|
|
344
|
-
- **noStepValidation**: If true, the input will not validate the value against the step attribute.
|
|
345
|
-
|
|
346
|
-
You may provide this as one of the following values:
|
|
347
|
-
|
|
348
|
-
- 'native': Uses the native browser implementation.
|
|
349
|
-
- 'modern': Uses a more intuitive implementation:
|
|
350
|
-
- Values are clamped to the nearest min or max value.
|
|
351
|
-
- Stepping is inclusive to the provided min and max values.
|
|
352
|
-
- Provided stepping is no longer used in validation.
|
|
353
|
-
- Advanced number formatting is enabled.
|
|
354
|
-
- An object that matches the `NumericStrategy` type.
|
|
355
|
-
* Note this can only be set via `property`, not as an `attribute`!
|
|
356
|
-
*/
|
|
357
|
-
numericStrategy?: SynInput["numericStrategy"];
|
|
358
|
-
/**
|
|
359
|
-
* Optional options that should be passed to the `NumberFormatter` when formatting the value.
|
|
360
|
-
This is used to format the number when the input type is `number`.
|
|
361
|
-
Note this can only be set via `property`, not as an `attribute`!
|
|
362
|
-
*/
|
|
363
|
-
numberFormatterOptions?: SynInput["numberFormatterOptions"];
|
|
364
|
-
/**
|
|
365
287
|
* Support for two way data binding
|
|
366
288
|
*/
|
|
367
289
|
modelValue?: SynInput["value"];
|
|
@@ -373,7 +295,6 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
|
|
|
373
295
|
"onSyn-input"?: ((e: SynInputEvent) => any) | undefined;
|
|
374
296
|
"onUpdate:modelValue"?: ((newValue: string) => any) | undefined;
|
|
375
297
|
"onSyn-clear"?: ((e: SynClearEvent) => any) | undefined;
|
|
376
|
-
"onSyn-clamp"?: ((e: SynClampEvent) => any) | undefined;
|
|
377
298
|
}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
|
|
378
299
|
nativeElement: unknown;
|
|
379
300
|
}, any>, {
|
|
@@ -33,13 +33,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
33
33
|
enterkeyhint: {},
|
|
34
34
|
spellcheck: {},
|
|
35
35
|
inputmode: {},
|
|
36
|
-
minFractionDigits: {},
|
|
37
|
-
maxFractionDigits: {},
|
|
38
|
-
numericStrategy: {},
|
|
39
|
-
numberFormatterOptions: {},
|
|
40
36
|
modelValue: {}
|
|
41
37
|
},
|
|
42
|
-
emits: ["syn-blur", "syn-change", "syn-clear", "syn-focus", "syn-input", "syn-invalid", "
|
|
38
|
+
emits: ["syn-blur", "syn-change", "syn-clear", "syn-focus", "syn-input", "syn-invalid", "update:modelValue"],
|
|
43
39
|
setup(__props, { expose: __expose }) {
|
|
44
40
|
const nativeElement = ref();
|
|
45
41
|
__expose({
|
|
@@ -62,7 +58,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
62
58
|
_ctx.$emit("syn-input", $event);
|
|
63
59
|
}),
|
|
64
60
|
onSynInvalid: _cache[5] || (_cache[5] = ($event) => _ctx.$emit("syn-invalid", $event)),
|
|
65
|
-
onSynClamp: _cache[6] || (_cache[6] = ($event) => _ctx.$emit("syn-clamp", $event)),
|
|
66
61
|
value: typeof props.modelValue !== "undefined" ? props.modelValue : typeof props.value !== "undefined" ? props.value : void 0
|
|
67
62
|
}, visibleProps.value, {
|
|
68
63
|
ref_key: "nativeElement",
|
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.31.0
|
|
7
|
+
"@synergy-design-system/components": "^2.31.0"
|
|
8
8
|
},
|
|
9
9
|
"description": "Vue3 wrappers for the Synergy Design System",
|
|
10
10
|
"exports": {
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
"directory": "packages/vue"
|
|
41
41
|
},
|
|
42
42
|
"type": "module",
|
|
43
|
-
"version": "2.31.0
|
|
43
|
+
"version": "2.31.0",
|
|
44
44
|
"devDependencies": {
|
|
45
45
|
"@vitejs/plugin-vue": "^5.2.3",
|
|
46
46
|
"@vue/tsconfig": "^0.7.0",
|
|
@@ -30,7 +30,6 @@
|
|
|
30
30
|
* @event syn-focus - Emitted when the control gains focus.
|
|
31
31
|
* @event syn-input - Emitted when the control receives input.
|
|
32
32
|
* @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
|
|
33
|
-
* @event syn-clamp - Emitted if the numeric strategy allows autoClamp and the value is clamped to the min or max attribute.
|
|
34
33
|
*
|
|
35
34
|
* @csspart form-control - The form control that wraps the label, input, and help text.
|
|
36
35
|
* @csspart form-control-label - The label's wrapper.
|
|
@@ -61,7 +60,6 @@ import type { SynClearEvent } from '@synergy-design-system/components';
|
|
|
61
60
|
import type { SynFocusEvent } from '@synergy-design-system/components';
|
|
62
61
|
import type { SynInputEvent } from '@synergy-design-system/components';
|
|
63
62
|
import type { SynInvalidEvent } from '@synergy-design-system/components';
|
|
64
|
-
import type { SynClampEvent } from '@synergy-design-system/components';
|
|
65
63
|
import type { SynInput } from '@synergy-design-system/components';
|
|
66
64
|
|
|
67
65
|
// DOM Reference to the element
|
|
@@ -233,48 +231,6 @@ keyboard on supportive devices.
|
|
|
233
231
|
*/
|
|
234
232
|
inputmode?: SynInput['inputmode'];
|
|
235
233
|
|
|
236
|
-
/**
|
|
237
|
-
* The minimal amount of fraction digits to use for numeric values.
|
|
238
|
-
Used to format the number when the input type is `number`.
|
|
239
|
-
*/
|
|
240
|
-
minFractionDigits?: SynInput['minFractionDigits'];
|
|
241
|
-
|
|
242
|
-
/**
|
|
243
|
-
* The maximal amount of fraction digits to use for numeric values.
|
|
244
|
-
Used to format the number when the input type is `number`.
|
|
245
|
-
*/
|
|
246
|
-
maxFractionDigits?: SynInput['maxFractionDigits'];
|
|
247
|
-
|
|
248
|
-
/**
|
|
249
|
-
* Defines the strategy for handling numbers in the numeric input.
|
|
250
|
-
This is used to determine how the input behaves when the user interacts with it.
|
|
251
|
-
|
|
252
|
-
Includes the following configuration options:
|
|
253
|
-
|
|
254
|
-
- **autoClamp**: If true, the input will clamp the value to the min and max attributes.
|
|
255
|
-
- **noStepAlign**: If true, the input will not align the value to the step attribute.
|
|
256
|
-
- **noStepValidation**: If true, the input will not validate the value against the step attribute.
|
|
257
|
-
|
|
258
|
-
You may provide this as one of the following values:
|
|
259
|
-
|
|
260
|
-
- 'native': Uses the native browser implementation.
|
|
261
|
-
- 'modern': Uses a more intuitive implementation:
|
|
262
|
-
- Values are clamped to the nearest min or max value.
|
|
263
|
-
- Stepping is inclusive to the provided min and max values.
|
|
264
|
-
- Provided stepping is no longer used in validation.
|
|
265
|
-
- Advanced number formatting is enabled.
|
|
266
|
-
- An object that matches the `NumericStrategy` type.
|
|
267
|
-
* Note this can only be set via `property`, not as an `attribute`!
|
|
268
|
-
*/
|
|
269
|
-
numericStrategy?: SynInput['numericStrategy'];
|
|
270
|
-
|
|
271
|
-
/**
|
|
272
|
-
* Optional options that should be passed to the `NumberFormatter` when formatting the value.
|
|
273
|
-
This is used to format the number when the input type is `number`.
|
|
274
|
-
Note this can only be set via `property`, not as an `attribute`!
|
|
275
|
-
*/
|
|
276
|
-
numberFormatterOptions?: SynInput['numberFormatterOptions'];
|
|
277
|
-
|
|
278
234
|
/**
|
|
279
235
|
* Support for two way data binding
|
|
280
236
|
*/
|
|
@@ -323,11 +279,6 @@ defineEmits<{
|
|
|
323
279
|
*/
|
|
324
280
|
'syn-invalid': [e: SynInvalidEvent];
|
|
325
281
|
|
|
326
|
-
/**
|
|
327
|
-
* Emitted if the numeric strategy allows autoClamp and the value is clamped to the min or max attribute.
|
|
328
|
-
*/
|
|
329
|
-
'syn-clamp': [e: SynClampEvent];
|
|
330
|
-
|
|
331
282
|
/**
|
|
332
283
|
* Support for two way data binding
|
|
333
284
|
*/
|
|
@@ -342,7 +293,6 @@ export type { SynClearEvent } from '@synergy-design-system/components';
|
|
|
342
293
|
export type { SynFocusEvent } from '@synergy-design-system/components';
|
|
343
294
|
export type { SynInputEvent } from '@synergy-design-system/components';
|
|
344
295
|
export type { SynInvalidEvent } from '@synergy-design-system/components';
|
|
345
|
-
export type { SynClampEvent } from '@synergy-design-system/components';
|
|
346
296
|
</script>
|
|
347
297
|
|
|
348
298
|
<template>
|
|
@@ -356,7 +306,6 @@ export type { SynClampEvent } from '@synergy-design-system/components';
|
|
|
356
306
|
$emit('syn-input', $event);
|
|
357
307
|
"
|
|
358
308
|
@syn-invalid="$emit('syn-invalid', $event)"
|
|
359
|
-
@syn-clamp="$emit('syn-clamp', $event)"
|
|
360
309
|
:value="
|
|
361
310
|
typeof props.modelValue !== 'undefined'
|
|
362
311
|
? props.modelValue
|