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

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

@@ -139,12 +139,23 @@ 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.
   
@@ -155,11 +166,18 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
     - 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"];
@@ -307,12 +325,23 @@ 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.
   
@@ -323,11 +352,18 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
     - 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"];

package/dist/components/SynVueInput.vue.js

@@ -33,7 +33,10 @@ 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"],

package/package.json

@@ -4,7 +4,7 @@
     "url": "https://www.sick.com"
   },
   "dependencies": {
-    "@synergy-design-system/components": "^2.31.0-numeric.1"
+    "@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.31.0-numeric.1",
+  "version": "2.31.0-numeric.2",
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.3",
     "@vue/tsconfig": "^0.7.0",

package/src/components/SynVueAlert.vue

@@ -7,7 +7,7 @@
 
 /**
  * @summary Alerts are used to display important messages inline or as toast notifications.
- * @documentation https://synergy.style/components/alert
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-alert--docs
  * @status stable
  * @since 2.0
  *

package/src/components/SynVueBadge.vue

@@ -7,7 +7,7 @@
 
 /**
  * @summary Badges are used to draw attention and display statuses or counts.
- * @documentation https://synergy.style/components/badge
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-badge--docs
  * @status stable
  * @since 2.0
  *

package/src/components/SynVueBreadcrumb.vue

@@ -7,7 +7,7 @@
 
 /**
  * @summary Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
- * @documentation https://synergy.style/components/breadcrumb
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-breadcrumb--docs
  * @status stable
  * @since 2.0
  *

package/src/components/SynVueBreadcrumbItem.vue

@@ -7,7 +7,7 @@
 
 /**
  * @summary Breadcrumb Items are used inside [breadcrumbs](/components/breadcrumb) to represent different links.
- * @documentation https://synergy.style/components/breadcrumb-item
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-breadcrumb-item--docs
  * @status stable
  * @since 2.0
  *

package/src/components/SynVueButton.vue

@@ -7,7 +7,7 @@
 
 /**
  * @summary Buttons represent actions that are available to the user.
- * @documentation https://synergy.style/components/button
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-button--docs
  * @status stable
  * @since 2.0
  *

package/src/components/SynVueButtonGroup.vue

@@ -7,7 +7,7 @@
 
 /**
  * @summary Button groups can be used to group related buttons into sections.
- * @documentation https://synergy.style/components/button-group
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-button-group--docs
  * @status stable
  * @since 2.0
  *

package/src/components/SynVueCard.vue

@@ -7,7 +7,7 @@
 
 /**
  * @summary Cards can be used to group related subjects in a container.
- * @documentation https://synergy.style/components/card
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-card--docs
  * @status stable
  * @since 2.0
  *

package/src/components/SynVueCheckbox.vue

@@ -7,7 +7,7 @@
 
 /**
  * @summary Checkboxes allow the user to toggle an option on or off.
- * @documentation https://synergy.style/components/checkbox
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-checkbox--docs
  * @status stable
  * @since 2.0
  *

package/src/components/SynVueDetails.vue

@@ -7,7 +7,7 @@
 
 /**
  * @summary Details show a brief summary and expand to show additional content.
- * @documentation https://synergy.style/components/details
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-details--docs
  * @status stable
  * @since 2.0
  *

package/src/components/SynVueDialog.vue

@@ -7,7 +7,7 @@
 
 /**
  * @summary Dialogs, sometimes called "modals", appear above the page and require the user's immediate attention.
- * @documentation https://synergy.style/components/dialog
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-dialog--docs
  * @status stable
  * @since 2.0
  *

package/src/components/SynVueDivider.vue

@@ -7,7 +7,7 @@
 
 /**
  * @summary Dividers are used to visually separate or group elements.
- * @documentation https://synergy.style/components/divider
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-divider--docs
  * @status stable
  * @since 2.0
  *

package/src/components/SynVueDrawer.vue

@@ -7,7 +7,7 @@
 
 /**
  * @summary Drawers slide in from a container to expose additional options and information.
- * @documentation https://synergy.style/components/drawer
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-drawer--docs
  * @status stable
  * @since 2.0
  *

package/src/components/SynVueDropdown.vue

@@ -7,7 +7,7 @@
 
 /**
  * @summary Dropdowns expose additional content that "drops down" in a panel.
- * @documentation https://synergy.style/components/dropdown
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-dropdown--docs
  * @status stable
  * @since 2.0
  *

package/src/components/SynVueFile.vue

@@ -7,6 +7,7 @@
 
 /**
  * @summary File controls allow selecting an arbitrary number of files for uploading.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-file--docs
  * @status stable
  *
  * @dependency syn-button

package/src/components/SynVueIcon.vue

@@ -7,7 +7,7 @@
 
 /**
  * @summary Icons are symbols that can be used to represent various options within an application.
- * @documentation https://synergy.style/components/icon
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-icon--docs
  * @status stable
  * @since 2.0
  *

package/src/components/SynVueIconButton.vue

@@ -7,7 +7,7 @@
 
 /**
  * @summary Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.
- * @documentation https://synergy.style/components/icon-button
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-icon-button--docs
  * @status stable
  * @since 2.0
  *

package/src/components/SynVueInput.vue

@@ -7,7 +7,7 @@
 
 /**
  * @summary Inputs collect data from the user.
- * @documentation https://synergy.style/components/input
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-input--docs
  * @status stable
  * @since 2.0
  *
@@ -233,6 +233,18 @@ 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.
@@ -240,6 +252,7 @@ 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.
 
@@ -250,11 +263,19 @@ You may provide this as one of the following values:
   - 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
    */

package/src/components/SynVueMenu.vue

@@ -7,7 +7,7 @@
 
 /**
  * @summary Menus provide a list of options for the user to choose from.
- * @documentation https://synergy.style/components/menu
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-menu--docs
  * @status stable
  * @since 2.0
  *

package/src/components/SynVueMenuItem.vue

@@ -7,7 +7,7 @@
 
 /**
  * @summary Menu items provide options for the user to pick from in a menu.
- * @documentation https://synergy.style/components/menu-item
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-menu-item--docs
  * @status stable
  * @since 2.0
  *

package/src/components/SynVueMenuLabel.vue

@@ -7,7 +7,7 @@
 
 /**
  * @summary Menu labels are used to describe a group of menu items.
- * @documentation https://synergy.style/components/menu-label
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-menu-label--docs
  * @status stable
  * @since 2.0
  *

package/src/components/SynVueNavItem.vue

@@ -7,6 +7,7 @@
 
 /**
  * @summary Flexible button / link component that can be used to quickly build navigations.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-nav-item--docs
  * Takes one of 3 forms:
  * - button (default),
  * - link (overrides button if a 'href' is provided),

package/src/components/SynVueOption.vue

@@ -7,7 +7,7 @@
 
 /**
  * @summary Options define the selectable items within various form controls such as [select](/components/select).
- * @documentation https://synergy.style/components/option
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-option--docs
  * @status stable
  * @since 2.0
  *

package/src/components/SynVuePopup.vue

@@ -7,7 +7,7 @@
 
 /**
  * @summary Popup is a utility that lets you declaratively anchor "popup" containers to another element.
- * @documentation https://synergy.style/components/popup
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-popup--docs
  * @status stable
  * @since 2.0
  *

package/src/components/SynVuePrioNav.vue

@@ -11,6 +11,7 @@
  * together. It will automatically group all items not visible in the viewport into a custom
  * priority menu.
  *
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-prio-nav--docs
  * @example
  * <syn-prio-nav>
  *  <syn-nav-item current horizontal>Item 1</syn-nav-item>

package/src/components/SynVueProgressBar.vue

@@ -7,7 +7,7 @@
 
 /**
  * @summary Progress bars are used to show the status of an ongoing operation.
- * @documentation https://synergy.style/components/progress-bar
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-progress-bar--docs
  * @status stable
  * @since 2.0
  *

package/src/components/SynVueProgressRing.vue

@@ -7,7 +7,7 @@
 
 /**
  * @summary Progress rings are used to show the progress of a determinate operation in a circular fashion.
- * @documentation https://synergy.style/components/progress-ring
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-progress-ring--docs
  * @status stable
  * @since 2.0
  *

package/src/components/SynVueRadio.vue

@@ -7,7 +7,7 @@
 
 /**
  * @summary Radios allow the user to select a single option from a group.
- * @documentation https://synergy.style/components/radio
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-radio--docs
  * @status stable
  * @since 2.0
  *

package/src/components/SynVueRadioButton.vue

@@ -7,7 +7,7 @@
 
 /**
  * @summary Radios buttons allow the user to select a single option from a group using a button-like control.
- * @documentation https://synergy.style/components/radio-button
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-radio-button--docs
  * @status stable
  * @since 2.0
  *

package/src/components/SynVueRadioGroup.vue

@@ -7,7 +7,7 @@
 
 /**
  * @summary Radio groups are used to group multiple [radios](/components/radio) or [radio buttons](/components/radio-button) so they function as a single form control.
- * @documentation https://synergy.style/components/radio-group
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-radio-group--docs
  * @status stable
  * @since 2.0
  *

package/src/components/SynVueRangeTick.vue

@@ -7,7 +7,7 @@
 
 /**
  * @summary Ticks visually improve positioning on range sliders.
- * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-range--docs
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-range-tick--docs
  * @status stable
  *
  * @slot - The tick's label

package/src/components/SynVueSelect.vue

@@ -7,7 +7,7 @@
 
 /**
  * @summary Selects allow you to choose items from a menu of predefined options.
- * @documentation https://synergy.style/components/select
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-select--docs
  * @status stable
  * @since 2.0
  *

package/src/components/SynVueSpinner.vue

@@ -7,7 +7,7 @@
 
 /**
  * @summary Spinners are used to show the progress of an indeterminate operation.
- * @documentation https://synergy.style/components/spinner
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-spinner--docs
  * @status stable
  * @since 2.0
  *

package/src/components/SynVueSwitch.vue

@@ -7,7 +7,7 @@
 
 /**
  * @summary Switches allow the user to toggle an option on or off.
- * @documentation https://synergy.style/components/switch
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-switch--docs
  * @status stable
  * @since 2.0
  *

package/src/components/SynVueTab.vue

@@ -7,7 +7,7 @@
 
 /**
  * @summary Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).
- * @documentation https://synergy.style/components/tab
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tab--docs
  * @status stable
  * @since 2.0
  *

package/src/components/SynVueTabGroup.vue

@@ -7,7 +7,7 @@
 
 /**
  * @summary Tab groups organize content into a container that shows one section at a time.
- * @documentation https://synergy.style/components/tab-group
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tab-group--docs
  * @status stable
  * @since 2.0
  *

package/src/components/SynVueTabPanel.vue

@@ -7,7 +7,7 @@
 
 /**
  * @summary Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.
- * @documentation https://synergy.style/components/tab-panel
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tab-panel--docs
  * @status stable
  * @since 2.0
  *

package/src/components/SynVueTag.vue

@@ -7,7 +7,7 @@
 
 /**
  * @summary Tags are used as labels to organize things or to indicate a selection.
- * @documentation https://synergy.style/components/tag
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tag--docs
  * @status stable
  * @since 2.0
  *

package/src/components/SynVueTextarea.vue

@@ -7,7 +7,7 @@
 
 /**
  * @summary Textareas collect data from the user and allow multiple lines of text.
- * @documentation https://synergy.style/components/textarea
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-textarea--docs
  * @status stable
  * @since 2.0
  *

package/src/components/SynVueTooltip.vue

@@ -7,7 +7,7 @@
 
 /**
  * @summary Tooltips display additional information based on a specific action.
- * @documentation https://synergy.style/components/tooltip
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-tooltip--docs
  * @status stable
  * @since 2.0
  *

package/src/components/SynVueValidate.vue

@@ -9,7 +9,7 @@
  * @summary Validate provides form field validation messages in a unified way.
  * It does this by using [the native browser validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)
  * and showing the validation message in a consistent, user defined way.
- *
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-validate--docs
  * @dependency syn-alert
  *
  * @slot - The form field that should be validated.