@synergy-design-system/vue 2.31.2 → 2.33.0

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

@@ -10,7 +10,8 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
     label?: SynHeader["label"];
     /**
   * Defines the current visibility and icon of the burger-menu icon.
-  The menu button is added automatically if the component finds a syn-side-nav in non-rail mode.
+  The menu button is added automatically if the component finds a syn-side-nav in
+  variant="default".
   The following values can be used:
   - hidden: The burger menu is not visible
   - open: The burger menu is visible and shows the close icon
@@ -31,7 +32,8 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
     label?: SynHeader["label"];
     /**
   * Defines the current visibility and icon of the burger-menu icon.
-  The menu button is added automatically if the component finds a syn-side-nav in non-rail mode.
+  The menu button is added automatically if the component finds a syn-side-nav in
+  variant="default".
   The following values can be used:
   - hidden: The burger menu is not visible
   - open: The burger menu is visible and shows the close icon

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,43 @@ 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`.
+   */
+    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`.
+   */
+    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.
+  - **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.
+  - 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`.
+  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 +189,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 +323,43 @@ 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`.
+   */
+    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`.
+   */
+    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.
+  - **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.
+  - 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`.
+  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 +371,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/dist/components/SynVueSideNav.vue.d.ts

@@ -9,15 +9,20 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
   You can toggle this attribute to show and hide the side-nav, or you can use the `show()` and
   `hide()` methods and this attribute will reflect the side-nav's open state.
   
-  Depending if the rail attribute is set or not, the behavior will differ.
+  Depending on the "variant" attribute, the behavior will differ.
   
-  __Non rail__:
-  With `open` will show the side-nav.
+  __Default__:
+  With `open` will show the side-nav with an overlay.
   Without `open`, the side-nav will be hidden.
   
   __Rail__:
   With `open` will show the whole side-nav with an overlay for touch devices
   or without an overlay for non-touch devices.
+  Without `open`, the side-nav will only show the prefix of nav-item's.
+  
+  __Sticky__:
+  With `open` will show the whole side-nav with an overlay for touch devices
+  or without an overlay for non-touch devices.
   Without `open`, the side-nav will only show the prefix of nav-item's.
    */
     open?: SynSideNav["open"];
@@ -28,10 +33,33 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
   
   Note: The Rail is only an option if all Navigation Items on the first level have an Icon.
   If this is not the case you should use a burger navigation.
+  
+  @deprecated Use the `variant` attribute with `rail` instead.
+  Will be removed in synergy version 3.0
    */
     rail?: SynSideNav["rail"];
     /**
-  * By default, the side-nav traps the focus if in non-rail mode and open.
+  * The variant that should be used to show the side navigation.
+  
+  The following variants are supported:
+  - **default** (default): Always shows the whole content and additionally an overlay.
+  This makes especially sense for applications, where you navigate to a place and stay
+  there for a longer time.
+  - **rail**: Only show the prefix of navigation items in closed state.
+  This will open on hover on the rail navigation.
+  On touch devices the navigation opens on click and shows an overlay.
+  Note: The rail variant is only an option if all Navigation Items on the first level
+  have an Icon.
+  If this is not the case you should use a burger navigation.
+  - **sticky**: The side-nav has a pin button to show the side-nav in small (icon only)
+  and full width.
+  * This variant is only possible for non-nested navigation items.
+  Note: The sticky variant is only an option if all Navigation Items on the first level
+  have an Icon and if there are only "first level" items.
+   */
+    variant?: SynSideNav["variant"];
+    /**
+  * By default, the side-nav traps the focus if in variant="default" and open.
   To disable the focus trapping, set this attribute.
    */
     noFocusTrapping?: SynSideNav["noFocusTrapping"];
@@ -48,15 +76,20 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
   You can toggle this attribute to show and hide the side-nav, or you can use the `show()` and
   `hide()` methods and this attribute will reflect the side-nav's open state.
   
-  Depending if the rail attribute is set or not, the behavior will differ.
+  Depending on the "variant" attribute, the behavior will differ.
   
-  __Non rail__:
-  With `open` will show the side-nav.
+  __Default__:
+  With `open` will show the side-nav with an overlay.
   Without `open`, the side-nav will be hidden.
   
   __Rail__:
   With `open` will show the whole side-nav with an overlay for touch devices
   or without an overlay for non-touch devices.
+  Without `open`, the side-nav will only show the prefix of nav-item's.
+  
+  __Sticky__:
+  With `open` will show the whole side-nav with an overlay for touch devices
+  or without an overlay for non-touch devices.
   Without `open`, the side-nav will only show the prefix of nav-item's.
    */
     open?: SynSideNav["open"];
@@ -67,10 +100,33 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
   
   Note: The Rail is only an option if all Navigation Items on the first level have an Icon.
   If this is not the case you should use a burger navigation.
+  
+  @deprecated Use the `variant` attribute with `rail` instead.
+  Will be removed in synergy version 3.0
    */
     rail?: SynSideNav["rail"];
     /**
-  * By default, the side-nav traps the focus if in non-rail mode and open.
+  * The variant that should be used to show the side navigation.
+  
+  The following variants are supported:
+  - **default** (default): Always shows the whole content and additionally an overlay.
+  This makes especially sense for applications, where you navigate to a place and stay
+  there for a longer time.
+  - **rail**: Only show the prefix of navigation items in closed state.
+  This will open on hover on the rail navigation.
+  On touch devices the navigation opens on click and shows an overlay.
+  Note: The rail variant is only an option if all Navigation Items on the first level
+  have an Icon.
+  If this is not the case you should use a burger navigation.
+  - **sticky**: The side-nav has a pin button to show the side-nav in small (icon only)
+  and full width.
+  * This variant is only possible for non-nested navigation items.
+  Note: The sticky variant is only an option if all Navigation Items on the first level
+  have an Icon and if there are only "first level" items.
+   */
+    variant?: SynSideNav["variant"];
+    /**
+  * By default, the side-nav traps the focus if in variant="default" and open.
   To disable the focus trapping, set this attribute.
    */
     noFocusTrapping?: SynSideNav["noFocusTrapping"];

package/dist/components/SynVueSideNav.vue.js

@@ -5,6 +5,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   props: {
     open: {},
     rail: {},
+    variant: {},
     noFocusTrapping: {}
   },
   emits: ["syn-show", "syn-after-show", "syn-hide", "syn-after-hide"],

package/package.json

@@ -4,7 +4,7 @@
     "url": "https://www.sick.com"
   },
   "dependencies": {
-    "@synergy-design-system/components": "^2.31.2"
+    "@synergy-design-system/components": "^2.33.0"
   },
   "description": "Vue3 wrappers for the Synergy Design System",
   "exports": {
@@ -40,7 +40,7 @@
     "directory": "packages/vue"
   },
   "type": "module",
-  "version": "2.31.2",
+  "version": "2.33.0",
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.2.3",
     "@vue/tsconfig": "^0.7.0",
@@ -50,7 +50,7 @@
     "vue": "^3.5.13"
   },
   "peerDependencies": {
-    "@synergy-design-system/tokens": "^2.18.1"
+    "@synergy-design-system/tokens": "^2.20.0"
   },
   "scripts": {
     "_build": "vite build"

package/src/components/SynVueHeader.vue

@@ -60,7 +60,8 @@ const props = defineProps<{
 
   /**
 * Defines the current visibility and icon of the burger-menu icon.
-The menu button is added automatically if the component finds a syn-side-nav in non-rail mode.
+The menu button is added automatically if the component finds a syn-side-nav in
+variant="default".
 The following values can be used:
 - hidden: The burger menu is not visible
 - open: The burger menu is visible and shows the close icon

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,47 @@ 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`.
+ */
+  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`.
+ */
+  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.
+- **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.
+- 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`.
+Note this can only be set via `property`, not as an `attribute`!
+ */
+  numberFormatterOptions?: SynInput['numberFormatterOptions'];
+
   /**
    * Support for two way data binding
    */
@@ -279,6 +322,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 +341,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 +355,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

package/src/components/SynVueSideNav.vue

@@ -21,10 +21,15 @@
  *
  * @dependency syn-divider
  * @dependency syn-drawer
+ * @dependency syn-icon
+ * @dependency syn-nav-item
  *
  * @slot - The main content of the side-nav. Used for <syn-nav-item /> elements.
  * @slot footer - The footer content of the side-nav. Used for <syn-nav-item /> elements.
  *    Please avoid having to many nav-items as it can massively influence the user experience.
+ * @slot toggle-label - The label of the toggle nav-item for variant="sticky".
+ * @slot toggle-icon - An icon to use in lieu of the default icon for the toggle nav-item
+ * for variant="sticky".
  *
  * @event syn-show - Emitted when the side-nav opens.
  * @event syn-after-show - Emitted after the side-nav opens and all animations are complete.
@@ -43,13 +48,20 @@
  * @csspart panel - The side-nav's panel (where the whole content is rendered).
  * @csspart body - The side-nav's body (where the default slot content is rendered)
  * @csspart drawer__base - The drawer's base wrapper
- *
+ * @csspart toggle-nav-item - The nav-item to toggle open state for variant="sticky"
+ * @csspart toggle-icon - The icon of the toggle nav-item for variant="sticky"
+ * @csspart toggle-label - The label of the toggle nav-item for variant="sticky".
+
  * @cssproperty  --side-nav-open-width - The width of the side-nav if in open state
  *
- * @animation sideNav.showNonRail - The animation to use when showing the side-nav in non-rail mode.
- * @animation sideNav.showRail - The animation to use when showing the side-nav in rail mode.
- * @animation sideNav.hideNonRail - The animation to use when hiding the side-nav in non-rail mode.
- * @animation sideNav.hideRail - The animation to use when hiding the side-nav in rail mode.
+ * @animation sideNav.showNonRail - The animation to use when showing the side-nav
+ *  in variant="default".
+ * @animation sideNav.showRail - The animation to use when showing the side-nav in variant="rail"
+ *  and variant="sticky".
+ * @animation sideNav.hideNonRail - The animation to use when hiding the side-nav
+ *  in variant="default".
+ * @animation sideNav.hideRail - The animation to use when hiding the side-nav in variant="rail"
+ *  and variant="sticky".
  * @animation sideNav.overlay.show - The animation to use when showing the side-nav's overlay.
  * @animation sideNav.overlay.hide - The animation to use when hiding the side-nav's overlay.
  */
@@ -76,15 +88,20 @@ const props = defineProps<{
 You can toggle this attribute to show and hide the side-nav, or you can use the `show()` and
 `hide()` methods and this attribute will reflect the side-nav's open state.
 
-Depending if the rail attribute is set or not, the behavior will differ.
+Depending on the "variant" attribute, the behavior will differ.
 
-__Non rail__:
-With `open` will show the side-nav.
+__Default__:
+With `open` will show the side-nav with an overlay.
 Without `open`, the side-nav will be hidden.
 
 __Rail__:
 With `open` will show the whole side-nav with an overlay for touch devices
 or without an overlay for non-touch devices.
+Without `open`, the side-nav will only show the prefix of nav-item's.
+
+__Sticky__:
+With `open` will show the whole side-nav with an overlay for touch devices
+or without an overlay for non-touch devices.
 Without `open`, the side-nav will only show the prefix of nav-item's.
  */
   open?: SynSideNav['open'];
@@ -96,11 +113,35 @@ On touch devices the navigation opens on click and shows an overlay.
 
 Note: The Rail is only an option if all Navigation Items on the first level have an Icon.
 If this is not the case you should use a burger navigation.
+
+@deprecated Use the `variant` attribute with `rail` instead.
+Will be removed in synergy version 3.0
  */
   rail?: SynSideNav['rail'];
 
   /**
-* By default, the side-nav traps the focus if in non-rail mode and open.
+* The variant that should be used to show the side navigation.
+
+The following variants are supported:
+- **default** (default): Always shows the whole content and additionally an overlay.
+This makes especially sense for applications, where you navigate to a place and stay
+there for a longer time.
+- **rail**: Only show the prefix of navigation items in closed state.
+This will open on hover on the rail navigation.
+On touch devices the navigation opens on click and shows an overlay.
+Note: The rail variant is only an option if all Navigation Items on the first level
+have an Icon.
+If this is not the case you should use a burger navigation.
+- **sticky**: The side-nav has a pin button to show the side-nav in small (icon only)
+and full width.
+* This variant is only possible for non-nested navigation items.
+Note: The sticky variant is only an option if all Navigation Items on the first level
+have an Icon and if there are only "first level" items.
+ */
+  variant?: SynSideNav['variant'];
+
+  /**
+* By default, the side-nav traps the focus if in variant="default" and open.
 To disable the focus trapping, set this attribute.
  */
   noFocusTrapping?: SynSideNav['noFocusTrapping'];