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

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

@@ -1,11 +1,10 @@
-import { SynBlurEvent, SynChangeEvent, SynClearEvent, SynFocusEvent, SynInputEvent, SynInvalidEvent, SynClampEvent, SynInput } from '@synergy-design-system/components';
+import { SynBlurEvent, SynChangeEvent, SynClearEvent, SynFocusEvent, SynInputEvent, SynInvalidEvent, 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"];
     /**
@@ -139,45 +138,6 @@ 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"];
@@ -191,7 +151,6 @@ 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"];
     /**
@@ -325,45 +284,6 @@ 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"];
@@ -375,7 +295,6 @@ 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,13 +33,9 @@ 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", "syn-clamp", "update:modelValue"],
+  emits: ["syn-blur", "syn-change", "syn-clear", "syn-focus", "syn-input", "syn-invalid", "update:modelValue"],
   setup(__props, { expose: __expose }) {
     const nativeElement = ref();
     __expose({
@@ -62,7 +58,6 @@ 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.31.0-numeric.2"
+    "@synergy-design-system/components": "^2.31.0"
   },
   "description": "Vue3 wrappers for the Synergy Design System",
   "exports": {
@@ -40,7 +40,7 @@
     "directory": "packages/vue"
   },
   "type": "module",
-  "version": "2.31.0-numeric.2",
+  "version": "2.31.0",
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.3",
     "@vue/tsconfig": "^0.7.0",

package/src/components/SynVueCombobox.vue

@@ -51,6 +51,8 @@
  * @csspart filtered-listbox - The container that wraps the filtered options.
  * @csspart clear-button - The clear button.
  * @csspart expand-icon - The container that wraps the expand icon.
+ * @csspart popup - The popup's exported `popup` part.
+ * Use this to target the tooltip's popup container.
  *
  * @animation combobox.show - The animation to use when showing the combobox.
  * @animation combobox.hide - The animation to use when hiding the combobox.

package/src/components/SynVueInput.vue

@@ -30,7 +30,6 @@
  * @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.
@@ -61,7 +60,6 @@ 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
@@ -233,49 +231,6 @@ 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
    */
@@ -324,11 +279,6 @@ 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
    */
@@ -343,7 +293,6 @@ 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>
@@ -357,7 +306,6 @@ export type { SynClampEvent } 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

package/src/components/SynVueSelect.vue

@@ -51,6 +51,7 @@
  * @csspart tag__remove-button__base - The tag's remove button base part.
  * @csspart clear-button - The clear button.
  * @csspart expand-icon - The container that wraps the expand icon.
+ * @csspart popup - The popup's exported `popup` part. Use this to target the tooltip's popup container.
  */
 import { computed, ref } from 'vue';
 import '@synergy-design-system/components/components/select/select.js';