@synergy-design-system/vue 2.30.5 → 2.31.0-numeric.2

package/dist/components/SynVueInput.vue.d.ts

@@ -1,10 +1,11 @@
-import { SynBlurEvent, SynChangeEvent, SynClearEvent, SynFocusEvent, SynInputEvent, SynInvalidEvent, SynInput } from '@synergy-design-system/components';
+import { SynBlurEvent, SynChangeEvent, SynClearEvent, SynFocusEvent, SynInputEvent, SynInvalidEvent, SynClampEvent, SynInput } from '@synergy-design-system/components';
 export type { SynBlurEvent } from '@synergy-design-system/components';
 export type { SynChangeEvent } from '@synergy-design-system/components';
 export type { SynClearEvent } from '@synergy-design-system/components';
 export type { SynFocusEvent } from '@synergy-design-system/components';
 export type { SynInputEvent } from '@synergy-design-system/components';
 export type { SynInvalidEvent } from '@synergy-design-system/components';
+export type { SynClampEvent } from '@synergy-design-system/components';
 declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
     title?: SynInput["title"];
     /**
@@ -138,6 +139,45 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
    */
     inputmode?: SynInput["inputmode"];
     /**
+  * The minimal amount of fraction digits to use for numeric values.
+  Used to format the number when the input type is `number` and `NumericStrategy.enableNumberFormat` is set to `true`.
+   */
+    minFractionDigits?: SynInput["minFractionDigits"];
+    /**
+  * The maximal amount of fraction digits to use for numeric values.
+  Used to format the number when the input type is `number` and `NumericStrategy.enableNumberFormat` is set to `true`.
+   */
+    maxFractionDigits?: SynInput["maxFractionDigits"];
+    /**
+  * Defines the strategy for handling numbers in the numeric input.
+  This is used to determine how the input behaves when the user interacts with it.
+  
+  Includes the following configuration options:
+  
+  - **autoClamp**: If true, the input will clamp the value to the min and max attributes.
+  - **enableNumberFormat**: If true, the input will format the value using a `NumberFormatter`.
+  - **noStepAlign**: If true, the input will not align the value to the step attribute.
+  - **noStepValidation**: If true, the input will not validate the value against the step attribute.
+  
+  You may provide this as one of the following values:
+  
+  - 'native': Uses the native browser implementation.
+  - 'modern': Uses a more intuitive implementation:
+    - Values are clamped to the nearest min or max value.
+    - Stepping is inclusive to the provided min and max values.
+    - Provided stepping is no longer used in validation.
+    - Advanced number formatting is enabled.
+  - An object that matches the `NumericStrategy` type.
+  * Note this can only be set via `property`, not as an `attribute`!
+   */
+    numericStrategy?: SynInput["numericStrategy"];
+    /**
+  * Optional options that should be passed to the `NumberFormatter` when formatting the value.
+  This is used to format the number when the input type is `number` and `NumericStrategy.enableNumberFormat` is set to `true`.
+  Note this can only be set via `property`, not as an `attribute`!
+   */
+    numberFormatterOptions?: SynInput["numberFormatterOptions"];
+    /**
      * Support for two way data binding
      */
     modelValue?: SynInput["value"];
@@ -151,6 +191,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
     "syn-input": (e: SynInputEvent) => any;
     "update:modelValue": (newValue: string) => any;
     "syn-clear": (e: SynClearEvent) => any;
+    "syn-clamp": (e: SynClampEvent) => any;
 }, string, import('vue').PublicProps, Readonly<{
     title?: SynInput["title"];
     /**
@@ -284,6 +325,45 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
    */
     inputmode?: SynInput["inputmode"];
     /**
+  * The minimal amount of fraction digits to use for numeric values.
+  Used to format the number when the input type is `number` and `NumericStrategy.enableNumberFormat` is set to `true`.
+   */
+    minFractionDigits?: SynInput["minFractionDigits"];
+    /**
+  * The maximal amount of fraction digits to use for numeric values.
+  Used to format the number when the input type is `number` and `NumericStrategy.enableNumberFormat` is set to `true`.
+   */
+    maxFractionDigits?: SynInput["maxFractionDigits"];
+    /**
+  * Defines the strategy for handling numbers in the numeric input.
+  This is used to determine how the input behaves when the user interacts with it.
+  
+  Includes the following configuration options:
+  
+  - **autoClamp**: If true, the input will clamp the value to the min and max attributes.
+  - **enableNumberFormat**: If true, the input will format the value using a `NumberFormatter`.
+  - **noStepAlign**: If true, the input will not align the value to the step attribute.
+  - **noStepValidation**: If true, the input will not validate the value against the step attribute.
+  
+  You may provide this as one of the following values:
+  
+  - 'native': Uses the native browser implementation.
+  - 'modern': Uses a more intuitive implementation:
+    - Values are clamped to the nearest min or max value.
+    - Stepping is inclusive to the provided min and max values.
+    - Provided stepping is no longer used in validation.
+    - Advanced number formatting is enabled.
+  - An object that matches the `NumericStrategy` type.
+  * Note this can only be set via `property`, not as an `attribute`!
+   */
+    numericStrategy?: SynInput["numericStrategy"];
+    /**
+  * Optional options that should be passed to the `NumberFormatter` when formatting the value.
+  This is used to format the number when the input type is `number` and `NumericStrategy.enableNumberFormat` is set to `true`.
+  Note this can only be set via `property`, not as an `attribute`!
+   */
+    numberFormatterOptions?: SynInput["numberFormatterOptions"];
+    /**
      * Support for two way data binding
      */
     modelValue?: SynInput["value"];
@@ -295,6 +375,7 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
     "onSyn-input"?: ((e: SynInputEvent) => any) | undefined;
     "onUpdate:modelValue"?: ((newValue: string) => any) | undefined;
     "onSyn-clear"?: ((e: SynClearEvent) => any) | undefined;
+    "onSyn-clamp"?: ((e: SynClampEvent) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {
     nativeElement: unknown;
 }, any>, {

package/dist/components/SynVueInput.vue.js

@@ -33,9 +33,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     enterkeyhint: {},
     spellcheck: {},
     inputmode: {},
+    minFractionDigits: {},
+    maxFractionDigits: {},
+    numericStrategy: {},
+    numberFormatterOptions: {},
     modelValue: {}
   },
-  emits: ["syn-blur", "syn-change", "syn-clear", "syn-focus", "syn-input", "syn-invalid", "update:modelValue"],
+  emits: ["syn-blur", "syn-change", "syn-clear", "syn-focus", "syn-input", "syn-invalid", "syn-clamp", "update:modelValue"],
   setup(__props, { expose: __expose }) {
     const nativeElement = ref();
     __expose({
@@ -58,6 +62,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           _ctx.$emit("syn-input", $event);
         }),
         onSynInvalid: _cache[5] || (_cache[5] = ($event) => _ctx.$emit("syn-invalid", $event)),
+        onSynClamp: _cache[6] || (_cache[6] = ($event) => _ctx.$emit("syn-clamp", $event)),
         value: typeof props.modelValue !== "undefined" ? props.modelValue : typeof props.value !== "undefined" ? props.value : void 0
       }, visibleProps.value, {
         ref_key: "nativeElement",

package/package.json

@@ -4,7 +4,7 @@
     "url": "https://www.sick.com"
   },
   "dependencies": {
-    "@synergy-design-system/components": "^2.30.5"
+    "@synergy-design-system/components": "^2.31.0-numeric.2"
   },
   "description": "Vue3 wrappers for the Synergy Design System",
   "exports": {
@@ -40,7 +40,7 @@
     "directory": "packages/vue"
   },
   "type": "module",
-  "version": "2.30.5",
+  "version": "2.31.0-numeric.2",
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.3",
     "@vue/tsconfig": "^0.7.0",

package/src/components/SynVueInput.vue

@@ -30,6 +30,7 @@
  * @event syn-focus - Emitted when the control gains focus.
  * @event syn-input - Emitted when the control receives input.
  * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+ * @event syn-clamp - Emitted if the numeric strategy allows autoClamp and the value is clamped to the min or max attribute.
  *
  * @csspart form-control - The form control that wraps the label, input, and help text.
  * @csspart form-control-label - The label's wrapper.
@@ -60,6 +61,7 @@ import type { SynClearEvent } from '@synergy-design-system/components';
 import type { SynFocusEvent } from '@synergy-design-system/components';
 import type { SynInputEvent } from '@synergy-design-system/components';
 import type { SynInvalidEvent } from '@synergy-design-system/components';
+import type { SynClampEvent } from '@synergy-design-system/components';
 import type { SynInput } from '@synergy-design-system/components';
 
 // DOM Reference to the element
@@ -231,6 +233,49 @@ keyboard on supportive devices.
  */
   inputmode?: SynInput['inputmode'];
 
+  /**
+* The minimal amount of fraction digits to use for numeric values.
+Used to format the number when the input type is `number` and `NumericStrategy.enableNumberFormat` is set to `true`.
+ */
+  minFractionDigits?: SynInput['minFractionDigits'];
+
+  /**
+* The maximal amount of fraction digits to use for numeric values.
+Used to format the number when the input type is `number` and `NumericStrategy.enableNumberFormat` is set to `true`.
+ */
+  maxFractionDigits?: SynInput['maxFractionDigits'];
+
+  /**
+* Defines the strategy for handling numbers in the numeric input.
+This is used to determine how the input behaves when the user interacts with it.
+
+Includes the following configuration options:
+
+- **autoClamp**: If true, the input will clamp the value to the min and max attributes.
+- **enableNumberFormat**: If true, the input will format the value using a `NumberFormatter`.
+- **noStepAlign**: If true, the input will not align the value to the step attribute.
+- **noStepValidation**: If true, the input will not validate the value against the step attribute.
+
+You may provide this as one of the following values:
+
+- 'native': Uses the native browser implementation.
+- 'modern': Uses a more intuitive implementation:
+  - Values are clamped to the nearest min or max value.
+  - Stepping is inclusive to the provided min and max values.
+  - Provided stepping is no longer used in validation.
+  - Advanced number formatting is enabled.
+- An object that matches the `NumericStrategy` type.
+* Note this can only be set via `property`, not as an `attribute`!
+ */
+  numericStrategy?: SynInput['numericStrategy'];
+
+  /**
+* Optional options that should be passed to the `NumberFormatter` when formatting the value.
+This is used to format the number when the input type is `number` and `NumericStrategy.enableNumberFormat` is set to `true`.
+Note this can only be set via `property`, not as an `attribute`!
+ */
+  numberFormatterOptions?: SynInput['numberFormatterOptions'];
+
   /**
    * Support for two way data binding
    */
@@ -279,6 +324,11 @@ defineEmits<{
    */
   'syn-invalid': [e: SynInvalidEvent];
 
+  /**
+   * Emitted if the numeric strategy allows autoClamp and the value is clamped to the min or max attribute.
+   */
+  'syn-clamp': [e: SynClampEvent];
+
   /**
    * Support for two way data binding
    */
@@ -293,6 +343,7 @@ export type { SynClearEvent } from '@synergy-design-system/components';
 export type { SynFocusEvent } from '@synergy-design-system/components';
 export type { SynInputEvent } from '@synergy-design-system/components';
 export type { SynInvalidEvent } from '@synergy-design-system/components';
+export type { SynClampEvent } from '@synergy-design-system/components';
 </script>
 
 <template>
@@ -306,6 +357,7 @@ export type { SynInvalidEvent } from '@synergy-design-system/components';
       $emit('syn-input', $event);
     "
     @syn-invalid="$emit('syn-invalid', $event)"
+    @syn-clamp="$emit('syn-clamp', $event)"
     :value="
       typeof props.modelValue !== 'undefined'
         ? props.modelValue