@synergy-design-system/vue 2.4.1 → 2.4.3

package/README.md

@@ -2,12 +2,16 @@
 
 This package provides [vue.js](https://vuejs.org/) wrappers for [Synergy Web Components](https://github.com/synergy-design-system/synergy-design-system/tree/main/packages/components).
 
-This package aims to provide an improved developer experience in Vue applications:
+It aims to provide an improved developer experience in Vue applications:
 
 - Provides two way data binding and `v-model`
 - Autocompletion and Types
 - Better custom event handling of `synergy` events
 
+## Known issues and limitations
+
+Got any problems using our Vue wrappers? Please take a look at [our list of known issues and limitations](https://synergy-design-system.github.io/?path=/docs/limitations-vue--docs) before [creating a ticket](https://github.com/synergy-design-system/synergy-design-system/issues/new?assignees=&labels=&projects=&template=generic-bug.md&title=fix%3A+%F0%9F%90%9B+).
+
 ## Getting started
 
 ### 1. Package installation

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

@@ -1,19 +1,13 @@
 import '@synergy-design-system/components/components/menu/menu.js';
 import type { SynMenu, SynSelectEvent } from '@synergy-design-system/components';
 export type { SynSelectEvent } from '@synergy-design-system/components';
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<Readonly<import("vue").ComponentPropsOptions<{
-    [x: string]: unknown;
-}>>, {
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {
     nativeElement: import("vue").Ref<SynMenu | undefined>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "syn-select": (e: SynSelectEvent) => void;
-}, string, import("vue").PublicProps, Readonly<readonly string[] | import("vue").ExtractPropTypes<Readonly<import("vue").ComponentObjectPropsOptions<{
-    [x: string]: unknown;
-}>>>> & {
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>> & {
     "onSyn-select"?: ((e: SynSelectEvent) => any) | undefined;
-}, {
-    readonly [x: number]: string;
-} | {}, {}>, {
+}, {}, {}>, {
     default?(_: {}): any;
 }>;
 export default _default;

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

@@ -1,14 +1,8 @@
 import '@synergy-design-system/components/components/menu-label/menu-label.js';
 import type { SynMenuLabel } from '@synergy-design-system/components';
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<Readonly<import("vue").ComponentPropsOptions<{
-    [x: string]: unknown;
-}>>, {
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {
     nativeElement: import("vue").Ref<SynMenuLabel | undefined>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, readonly string[] | Readonly<import("vue").ExtractPropTypes<Readonly<import("vue").ComponentObjectPropsOptions<{
-    [x: string]: unknown;
-}>>>>, {
-    readonly [x: number]: string;
-} | {}, {}>, {
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>, {
     default?(_: {}): any;
 }>;
 export default _default;

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

@@ -1,14 +1,8 @@
 import '@synergy-design-system/components/components/prio-nav/prio-nav.js';
 import type { SynPrioNav } from '@synergy-design-system/components';
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<Readonly<import("vue").ComponentPropsOptions<{
-    [x: string]: unknown;
-}>>, {
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{}, {
     nativeElement: import("vue").Ref<SynPrioNav | undefined>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, readonly string[] | Readonly<import("vue").ExtractPropTypes<Readonly<import("vue").ComponentObjectPropsOptions<{
-    [x: string]: unknown;
-}>>>>, {
-    readonly [x: number]: string;
-} | {}, {}>, {
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>, {
     default?(_: {}): any;
 }>;
 export default _default;

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

@@ -1,12 +1,6 @@
 import '@synergy-design-system/components/components/spinner/spinner.js';
 import type { SynSpinner } from '@synergy-design-system/components';
-declare const _default: import("vue").DefineComponent<Readonly<import("vue").ComponentPropsOptions<{
-    [x: string]: unknown;
-}>>, {
+declare const _default: import("vue").DefineComponent<{}, {
     nativeElement: import("vue").Ref<SynSpinner | undefined>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, readonly string[] | Readonly<import("vue").ExtractPropTypes<Readonly<import("vue").ComponentObjectPropsOptions<{
-    [x: string]: unknown;
-}>>>>, {
-    readonly [x: number]: string;
-} | {}, {}>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
 export default _default;

package/package.json

@@ -4,7 +4,7 @@
     "url": "https://www.sick.com"
   },
   "dependencies": {
-    "@synergy-design-system/components": "^2.4.1"
+    "@synergy-design-system/components": "^2.4.3"
   },
   "description": "Vue3 wrappers for the Synergy Design System",
   "exports": {
@@ -40,12 +40,12 @@
     "directory": "packages/vue"
   },
   "type": "module",
-  "version": "2.4.1",
+  "version": "2.4.3",
   "devDependencies": {
     "@vue/tsconfig": "^0.5.1",
     "vue": "^3.4.24"
   },
   "peerDependencies": {
-    "@synergy-design-system/tokens": "^2.3.1"
+    "@synergy-design-system/tokens": "^2.5.0"
   }
 }

package/src/components/SynVueAccordion.vue

@@ -56,10 +56,6 @@ const visibleProps = computed(() => Object.fromEntries(
     .filter(([, value]) => typeof value !== 'undefined'),
 ));
 
-// Map events
-defineEmits<{
-
-}>();
 </script>
 
 <template>

package/src/components/SynVueBadge.vue

@@ -45,10 +45,6 @@ const visibleProps = computed(() => Object.fromEntries(
     .filter(([, value]) => typeof value !== 'undefined'),
 ));
 
-// Map events
-defineEmits<{
-
-}>();
 </script>
 
 <template>

package/src/components/SynVueBreadcrumb.vue

@@ -50,10 +50,6 @@ const visibleProps = computed(() => Object.fromEntries(
     .filter(([, value]) => typeof value !== 'undefined'),
 ));
 
-// Map events
-defineEmits<{
-
-}>();
 </script>
 
 <template>

package/src/components/SynVueBreadcrumbItem.vue

@@ -68,10 +68,6 @@ const visibleProps = computed(() => Object.fromEntries(
     .filter(([, value]) => typeof value !== 'undefined'),
 ));
 
-// Map events
-defineEmits<{
-
-}>();
 </script>
 
 <template>

package/src/components/SynVueButtonGroup.vue

@@ -47,10 +47,6 @@ const visibleProps = computed(() => Object.fromEntries(
     .filter(([, value]) => typeof value !== 'undefined'),
 ));
 
-// Map events
-defineEmits<{
-
-}>();
 </script>
 
 <template>

package/src/components/SynVueCard.vue

@@ -59,10 +59,6 @@ const visibleProps = computed(() => Object.fromEntries(
     .filter(([, value]) => typeof value !== 'undefined'),
 ));
 
-// Map events
-defineEmits<{
-
-}>();
 </script>
 
 <template>

package/src/components/SynVueDivider.vue

@@ -45,10 +45,6 @@ const visibleProps = computed(() => Object.fromEntries(
     .filter(([, value]) => typeof value !== 'undefined'),
 ));
 
-// Map events
-defineEmits<{
-
-}>();
 </script>
 
 <template>

package/src/components/SynVueMenu.vue

@@ -27,21 +27,6 @@ defineExpose({
   nativeElement,
 });
 
-// Map attributes
-const props = defineProps<{
-
-}>();
-
-// Make sure prop binding only forwards the props that are actually there.
-// This is needed because :param="param" also adds an empty attribute
-// when using web-components, which breaks optional arguments like size in SynInput
-// @see https://github.com/vuejs/core/issues/5190#issuecomment-1003112498
-const visibleProps = computed(() => Object.fromEntries(
-  Object
-    .entries(props)
-    .filter(([, value]) => typeof value !== 'undefined'),
-));
-
 // Map events
 defineEmits<{
   /**
@@ -57,9 +42,8 @@ export type { SynSelectEvent } from '@synergy-design-system/components';
 
 <template>
   <syn-menu
-    v-bind="visibleProps"
-
     ref="nativeElement"
+
     @syn-select="$emit('syn-select', $event)"
   >
     <slot />

package/src/components/SynVueMenuItem.vue

@@ -83,10 +83,6 @@ const visibleProps = computed(() => Object.fromEntries(
     .filter(([, value]) => typeof value !== 'undefined'),
 ));
 
-// Map events
-defineEmits<{
-
-}>();
 </script>
 
 <template>

package/src/components/SynVueMenuLabel.vue

@@ -33,31 +33,11 @@ defineExpose({
   nativeElement,
 });
 
-// Map attributes
-const props = defineProps<{
-
-}>();
-
-// Make sure prop binding only forwards the props that are actually there.
-// This is needed because :param="param" also adds an empty attribute
-// when using web-components, which breaks optional arguments like size in SynInput
-// @see https://github.com/vuejs/core/issues/5190#issuecomment-1003112498
-const visibleProps = computed(() => Object.fromEntries(
-  Object
-    .entries(props)
-    .filter(([, value]) => typeof value !== 'undefined'),
-));
-
-// Map events
-defineEmits<{
-
-}>();
 </script>
 
 <template>
   <syn-menu-label
 
-    v-bind="visibleProps"
     ref="nativeElement"
   >
     <slot />

package/src/components/SynVueOptgroup.vue

@@ -63,10 +63,6 @@ const visibleProps = computed(() => Object.fromEntries(
     .filter(([, value]) => typeof value !== 'undefined'),
 ));
 
-// Map events
-defineEmits<{
-
-}>();
 </script>
 
 <template>

package/src/components/SynVueOption.vue

@@ -63,10 +63,6 @@ const visibleProps = computed(() => Object.fromEntries(
     .filter(([, value]) => typeof value !== 'undefined'),
 ));
 
-// Map events
-defineEmits<{
-
-}>();
 </script>
 
 <template>

package/src/components/SynVuePrioNav.vue

@@ -51,31 +51,11 @@ defineExpose({
   nativeElement,
 });
 
-// Map attributes
-const props = defineProps<{
-
-}>();
-
-// Make sure prop binding only forwards the props that are actually there.
-// This is needed because :param="param" also adds an empty attribute
-// when using web-components, which breaks optional arguments like size in SynInput
-// @see https://github.com/vuejs/core/issues/5190#issuecomment-1003112498
-const visibleProps = computed(() => Object.fromEntries(
-  Object
-    .entries(props)
-    .filter(([, value]) => typeof value !== 'undefined'),
-));
-
-// Map events
-defineEmits<{
-
-}>();
 </script>
 
 <template>
   <syn-prio-nav
 
-    v-bind="visibleProps"
     ref="nativeElement"
   >
     <slot />

package/src/components/SynVueProgressBar.vue

@@ -63,10 +63,6 @@ const visibleProps = computed(() => Object.fromEntries(
     .filter(([, value]) => typeof value !== 'undefined'),
 ));
 
-// Map events
-defineEmits<{
-
-}>();
 </script>
 
 <template>

package/src/components/SynVueProgressRing.vue

@@ -58,10 +58,6 @@ const visibleProps = computed(() => Object.fromEntries(
     .filter(([, value]) => typeof value !== 'undefined'),
 ));
 
-// Map events
-defineEmits<{
-
-}>();
 </script>
 
 <template>

package/src/components/SynVueSpinner.vue

@@ -29,31 +29,11 @@ defineExpose({
   nativeElement,
 });
 
-// Map attributes
-const props = defineProps<{
-
-}>();
-
-// Make sure prop binding only forwards the props that are actually there.
-// This is needed because :param="param" also adds an empty attribute
-// when using web-components, which breaks optional arguments like size in SynInput
-// @see https://github.com/vuejs/core/issues/5190#issuecomment-1003112498
-const visibleProps = computed(() => Object.fromEntries(
-  Object
-    .entries(props)
-    .filter(([, value]) => typeof value !== 'undefined'),
-));
-
-// Map events
-defineEmits<{
-
-}>();
 </script>
 
 <template>
   <syn-spinner
 
-    v-bind="visibleProps"
     ref="nativeElement"
   />
 </template>

package/src/components/SynVueTabPanel.vue

@@ -52,10 +52,6 @@ const visibleProps = computed(() => Object.fromEntries(
     .filter(([, value]) => typeof value !== 'undefined'),
 ));
 
-// Map events
-defineEmits<{
-
-}>();
 </script>
 
 <template>