@synergy-design-system/vue 2.31.1 → 2.32.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.
Files changed (6) hide show
  1. package/dist/components/SynVueHeader.vue.d.ts +4 -2
  2. package/dist/components/SynVueSideNav.vue.d.ts +64 -8
  3. package/dist/components/SynVueSideNav.vue.js +1 -0
  4. package/package.json +3 -3
  5. package/src/components/SynVueHeader.vue +2 -1
  6. package/src/components/SynVueSideNav.vue +50 -9
package/dist/components/SynVueHeader.vue.d.ts CHANGED
@@ -10,7 +10,8 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
10
10
  label?: SynHeader["label"];
11
11
  /**
12
12
  * Defines the current visibility and icon of the burger-menu icon.
13
- The menu button is added automatically if the component finds a syn-side-nav in non-rail mode.
13
+ The menu button is added automatically if the component finds a syn-side-nav in
14
+ variant="default".
14
15
  The following values can be used:
15
16
  - hidden: The burger menu is not visible
16
17
  - open: The burger menu is visible and shows the close icon
@@ -31,7 +32,8 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
31
32
  label?: SynHeader["label"];
32
33
  /**
33
34
  * Defines the current visibility and icon of the burger-menu icon.
34
- The menu button is added automatically if the component finds a syn-side-nav in non-rail mode.
35
+ The menu button is added automatically if the component finds a syn-side-nav in
36
+ variant="default".
35
37
  The following values can be used:
36
38
  - hidden: The burger menu is not visible
37
39
  - open: The burger menu is visible and shows the close icon
package/dist/components/SynVueSideNav.vue.d.ts CHANGED
@@ -9,15 +9,20 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
9
9
  You can toggle this attribute to show and hide the side-nav, or you can use the `show()` and
10
10
  `hide()` methods and this attribute will reflect the side-nav's open state.
11
11
 
12
- Depending if the rail attribute is set or not, the behavior will differ.
12
+ Depending on the "variant" attribute, the behavior will differ.
13
13
 
14
- __Non rail__:
15
- With `open` will show the side-nav.
14
+ __Default__:
15
+ With `open` will show the side-nav with an overlay.
16
16
  Without `open`, the side-nav will be hidden.
17
17
 
18
18
  __Rail__:
19
19
  With `open` will show the whole side-nav with an overlay for touch devices
20
20
  or without an overlay for non-touch devices.
21
+ Without `open`, the side-nav will only show the prefix of nav-item's.
22
+
23
+ __Sticky__:
24
+ With `open` will show the whole side-nav with an overlay for touch devices
25
+ or without an overlay for non-touch devices.
21
26
  Without `open`, the side-nav will only show the prefix of nav-item's.
22
27
  */
23
28
  open?: SynSideNav["open"];
@@ -28,10 +33,33 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
28
33
 
29
34
  Note: The Rail is only an option if all Navigation Items on the first level have an Icon.
30
35
  If this is not the case you should use a burger navigation.
36
+
37
+ @deprecated Use the `variant` attribute with `rail` instead.
38
+ Will be removed in synergy version 3.0
31
39
  */
32
40
  rail?: SynSideNav["rail"];
33
41
  /**
34
- * By default, the side-nav traps the focus if in non-rail mode and open.
42
+ * The variant that should be used to show the side navigation.
43
+
44
+ The following variants are supported:
45
+ - **default** (default): Always shows the whole content and additionally an overlay.
46
+ This makes especially sense for applications, where you navigate to a place and stay
47
+ there for a longer time.
48
+ - **rail**: Only show the prefix of navigation items in closed state.
49
+ This will open on hover on the rail navigation.
50
+ On touch devices the navigation opens on click and shows an overlay.
51
+ Note: The rail variant is only an option if all Navigation Items on the first level
52
+ have an Icon.
53
+ If this is not the case you should use a burger navigation.
54
+ - **sticky**: The side-nav has a pin button to show the side-nav in small (icon only)
55
+ and full width.
56
+ * This variant is only possible for non-nested navigation items.
57
+ Note: The sticky variant is only an option if all Navigation Items on the first level
58
+ have an Icon and if there are only "first level" items.
59
+ */
60
+ variant?: SynSideNav["variant"];
61
+ /**
62
+ * By default, the side-nav traps the focus if in variant="default" and open.
35
63
  To disable the focus trapping, set this attribute.
36
64
  */
37
65
  noFocusTrapping?: SynSideNav["noFocusTrapping"];
@@ -48,15 +76,20 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
48
76
  You can toggle this attribute to show and hide the side-nav, or you can use the `show()` and
49
77
  `hide()` methods and this attribute will reflect the side-nav's open state.
50
78
 
51
- Depending if the rail attribute is set or not, the behavior will differ.
79
+ Depending on the "variant" attribute, the behavior will differ.
52
80
 
53
- __Non rail__:
54
- With `open` will show the side-nav.
81
+ __Default__:
82
+ With `open` will show the side-nav with an overlay.
55
83
  Without `open`, the side-nav will be hidden.
56
84
 
57
85
  __Rail__:
58
86
  With `open` will show the whole side-nav with an overlay for touch devices
59
87
  or without an overlay for non-touch devices.
88
+ Without `open`, the side-nav will only show the prefix of nav-item's.
89
+
90
+ __Sticky__:
91
+ With `open` will show the whole side-nav with an overlay for touch devices
92
+ or without an overlay for non-touch devices.
60
93
  Without `open`, the side-nav will only show the prefix of nav-item's.
61
94
  */
62
95
  open?: SynSideNav["open"];
@@ -67,10 +100,33 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{
67
100
 
68
101
  Note: The Rail is only an option if all Navigation Items on the first level have an Icon.
69
102
  If this is not the case you should use a burger navigation.
103
+
104
+ @deprecated Use the `variant` attribute with `rail` instead.
105
+ Will be removed in synergy version 3.0
70
106
  */
71
107
  rail?: SynSideNav["rail"];
72
108
  /**
73
- * By default, the side-nav traps the focus if in non-rail mode and open.
109
+ * The variant that should be used to show the side navigation.
110
+
111
+ The following variants are supported:
112
+ - **default** (default): Always shows the whole content and additionally an overlay.
113
+ This makes especially sense for applications, where you navigate to a place and stay
114
+ there for a longer time.
115
+ - **rail**: Only show the prefix of navigation items in closed state.
116
+ This will open on hover on the rail navigation.
117
+ On touch devices the navigation opens on click and shows an overlay.
118
+ Note: The rail variant is only an option if all Navigation Items on the first level
119
+ have an Icon.
120
+ If this is not the case you should use a burger navigation.
121
+ - **sticky**: The side-nav has a pin button to show the side-nav in small (icon only)
122
+ and full width.
123
+ * This variant is only possible for non-nested navigation items.
124
+ Note: The sticky variant is only an option if all Navigation Items on the first level
125
+ have an Icon and if there are only "first level" items.
126
+ */
127
+ variant?: SynSideNav["variant"];
128
+ /**
129
+ * By default, the side-nav traps the focus if in variant="default" and open.
74
130
  To disable the focus trapping, set this attribute.
75
131
  */
76
132
  noFocusTrapping?: SynSideNav["noFocusTrapping"];
package/dist/components/SynVueSideNav.vue.js CHANGED
@@ -5,6 +5,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
5
5
  props: {
6
6
  open: {},
7
7
  rail: {},
8
+ variant: {},
8
9
  noFocusTrapping: {}
9
10
  },
10
11
  emits: ["syn-show", "syn-after-show", "syn-hide", "syn-after-hide"],
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.1"
7
+ "@synergy-design-system/components": "^2.32.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.1",
43
+ "version": "2.32.0",
44
44
  "devDependencies": {
45
45
  "@vitejs/plugin-vue": "^5.2.3",
46
46
  "@vue/tsconfig": "^0.7.0",
@@ -50,7 +50,7 @@
50
50
  "vue": "^3.5.13"
51
51
  },
52
52
  "peerDependencies": {
53
- "@synergy-design-system/tokens": "^2.18.1"
53
+ "@synergy-design-system/tokens": "^2.19.0"
54
54
  },
55
55
  "scripts": {
56
56
  "_build": "vite build"
package/src/components/SynVueHeader.vue CHANGED
@@ -60,7 +60,8 @@ const props = defineProps<{
60
60
 
61
61
  /**
62
62
  * Defines the current visibility and icon of the burger-menu icon.
63
- The menu button is added automatically if the component finds a syn-side-nav in non-rail mode.
63
+ The menu button is added automatically if the component finds a syn-side-nav in
64
+ variant="default".
64
65
  The following values can be used:
65
66
  - hidden: The burger menu is not visible
66
67
  - open: The burger menu is visible and shows the close icon
package/src/components/SynVueSideNav.vue CHANGED
@@ -21,10 +21,15 @@
21
21
  *
22
22
  * @dependency syn-divider
23
23
  * @dependency syn-drawer
24
+ * @dependency syn-icon
25
+ * @dependency syn-nav-item
24
26
  *
25
27
  * @slot - The main content of the side-nav. Used for <syn-nav-item /> elements.
26
28
  * @slot footer - The footer content of the side-nav. Used for <syn-nav-item /> elements.
27
29
  * Please avoid having to many nav-items as it can massively influence the user experience.
30
+ * @slot toggle-label - The label of the toggle nav-item for variant="sticky".
31
+ * @slot toggle-icon - An icon to use in lieu of the default icon for the toggle nav-item
32
+ * for variant="sticky".
28
33
  *
29
34
  * @event syn-show - Emitted when the side-nav opens.
30
35
  * @event syn-after-show - Emitted after the side-nav opens and all animations are complete.
@@ -43,13 +48,20 @@
43
48
  * @csspart panel - The side-nav's panel (where the whole content is rendered).
44
49
  * @csspart body - The side-nav's body (where the default slot content is rendered)
45
50
  * @csspart drawer__base - The drawer's base wrapper
46
- *
51
+ * @csspart toggle-nav-item - The nav-item to toggle open state for variant="sticky"
52
+ * @csspart toggle-icon - The icon of the toggle nav-item for variant="sticky"
53
+ * @csspart toggle-label - The label of the toggle nav-item for variant="sticky".
54
+
47
55
  * @cssproperty --side-nav-open-width - The width of the side-nav if in open state
48
56
  *
49
- * @animation sideNav.showNonRail - The animation to use when showing the side-nav in non-rail mode.
50
- * @animation sideNav.showRail - The animation to use when showing the side-nav in rail mode.
51
- * @animation sideNav.hideNonRail - The animation to use when hiding the side-nav in non-rail mode.
52
- * @animation sideNav.hideRail - The animation to use when hiding the side-nav in rail mode.
57
+ * @animation sideNav.showNonRail - The animation to use when showing the side-nav
58
+ * in variant="default".
59
+ * @animation sideNav.showRail - The animation to use when showing the side-nav in variant="rail"
60
+ * and variant="sticky".
61
+ * @animation sideNav.hideNonRail - The animation to use when hiding the side-nav
62
+ * in variant="default".
63
+ * @animation sideNav.hideRail - The animation to use when hiding the side-nav in variant="rail"
64
+ * and variant="sticky".
53
65
  * @animation sideNav.overlay.show - The animation to use when showing the side-nav's overlay.
54
66
  * @animation sideNav.overlay.hide - The animation to use when hiding the side-nav's overlay.
55
67
  */
@@ -76,15 +88,20 @@ const props = defineProps<{
76
88
  You can toggle this attribute to show and hide the side-nav, or you can use the `show()` and
77
89
  `hide()` methods and this attribute will reflect the side-nav's open state.
78
90
 
79
- Depending if the rail attribute is set or not, the behavior will differ.
91
+ Depending on the "variant" attribute, the behavior will differ.
80
92
 
81
- __Non rail__:
82
- With `open` will show the side-nav.
93
+ __Default__:
94
+ With `open` will show the side-nav with an overlay.
83
95
  Without `open`, the side-nav will be hidden.
84
96
 
85
97
  __Rail__:
86
98
  With `open` will show the whole side-nav with an overlay for touch devices
87
99
  or without an overlay for non-touch devices.
100
+ Without `open`, the side-nav will only show the prefix of nav-item's.
101
+
102
+ __Sticky__:
103
+ With `open` will show the whole side-nav with an overlay for touch devices
104
+ or without an overlay for non-touch devices.
88
105
  Without `open`, the side-nav will only show the prefix of nav-item's.
89
106
  */
90
107
  open?: SynSideNav['open'];
@@ -96,11 +113,35 @@ On touch devices the navigation opens on click and shows an overlay.
96
113
 
97
114
  Note: The Rail is only an option if all Navigation Items on the first level have an Icon.
98
115
  If this is not the case you should use a burger navigation.
116
+
117
+ @deprecated Use the `variant` attribute with `rail` instead.
118
+ Will be removed in synergy version 3.0
99
119
  */
100
120
  rail?: SynSideNav['rail'];
101
121
 
102
122
  /**
103
- * By default, the side-nav traps the focus if in non-rail mode and open.
123
+ * The variant that should be used to show the side navigation.
124
+
125
+ The following variants are supported:
126
+ - **default** (default): Always shows the whole content and additionally an overlay.
127
+ This makes especially sense for applications, where you navigate to a place and stay
128
+ there for a longer time.
129
+ - **rail**: Only show the prefix of navigation items in closed state.
130
+ This will open on hover on the rail navigation.
131
+ On touch devices the navigation opens on click and shows an overlay.
132
+ Note: The rail variant is only an option if all Navigation Items on the first level
133
+ have an Icon.
134
+ If this is not the case you should use a burger navigation.
135
+ - **sticky**: The side-nav has a pin button to show the side-nav in small (icon only)
136
+ and full width.
137
+ * This variant is only possible for non-nested navigation items.
138
+ Note: The sticky variant is only an option if all Navigation Items on the first level
139
+ have an Icon and if there are only "first level" items.
140
+ */
141
+ variant?: SynSideNav['variant'];
142
+
143
+ /**
144
+ * By default, the side-nav traps the focus if in variant="default" and open.
104
145
  To disable the focus trapping, set this attribute.
105
146
  */
106
147
  noFocusTrapping?: SynSideNav['noFocusTrapping'];