@synergy-design-system/vue 1.27.0 → 2.1.0

package/src/components/SynVueIcon.vue

@@ -25,13 +25,7 @@ import type { SynErrorEvent, SynIcon, SynLoadEvent } from '@synergy-design-syste
 // DOM Reference to the element
 const nativeElement = ref<SynIcon>();
 
-// Map methods
-const callHandleLabelChange = (...args: Parameters<SynIcon['handleLabelChange']>) => nativeElement.value?.handleLabelChange(...args);
-const callSetIcon = (...args: Parameters<SynIcon['setIcon']>) => nativeElement.value?.setIcon(...args);
-
 defineExpose({
-  callHandleLabelChange,
-  callSetIcon,
   nativeElement,
 });
 

package/src/components/SynVueIconButton.vue

@@ -26,24 +26,7 @@ import type { SynBlurEvent, SynFocusEvent, SynIconButton } from '@synergy-design
 // DOM Reference to the element
 const nativeElement = ref<SynIconButton>();
 
-// Map methods
-/**
-* Simulates a click on the icon button.
- */
-const callClick = (...args: Parameters<SynIconButton['click']>) => nativeElement.value?.click(...args);
-/**
-* Sets focus on the icon button.
- */
-const callFocus = (...args: Parameters<SynIconButton['focus']>) => nativeElement.value?.focus(...args);
-/**
-* Removes focus from the icon button.
- */
-const callBlur = (...args: Parameters<SynIconButton['blur']>) => nativeElement.value?.blur(...args);
-
 defineExpose({
-  callClick,
-  callFocus,
-  callBlur,
   nativeElement,
 });
 

package/src/components/SynVueInput.vue

@@ -56,77 +56,7 @@ import type {
 // DOM Reference to the element
 const nativeElement = ref<SynInput>();
 
-// Map methods
-const callHandleDisabledChange = (...args: Parameters<SynInput['handleDisabledChange']>) => nativeElement.value?.handleDisabledChange(...args);
-const callHandleStepChange = (...args: Parameters<SynInput['handleStepChange']>) => nativeElement.value?.handleStepChange(...args);
-const callHandleValueChange = (...args: Parameters<SynInput['handleValueChange']>) => nativeElement.value?.handleValueChange(...args);
-/**
-* Sets focus on the input.
- */
-const callFocus = (...args: Parameters<SynInput['focus']>) => nativeElement.value?.focus(...args);
-/**
-* Removes focus from the input.
- */
-const callBlur = (...args: Parameters<SynInput['blur']>) => nativeElement.value?.blur(...args);
-/**
-* Selects all the text in the input.
- */
-const callSelect = (...args: Parameters<SynInput['select']>) => nativeElement.value?.select(...args);
-/**
-* Sets the start and end positions of the text selection (0-based).
- */
-const callSetSelectionRange = (...args: Parameters<SynInput['setSelectionRange']>) => nativeElement.value?.setSelectionRange(...args);
-/**
-* Replaces a range of text with a new string.
- */
-const callSetRangeText = (...args: Parameters<SynInput['setRangeText']>) => nativeElement.value?.setRangeText(...args);
-/**
-* Displays the browser picker for an input element (only works if the browser supports it for the input type).
- */
-const callShowPicker = (...args: Parameters<SynInput['showPicker']>) => nativeElement.value?.showPicker(...args);
-/**
-* Increments the value of a numeric input type by the value of the step attribute.
- */
-const callStepUp = (...args: Parameters<SynInput['stepUp']>) => nativeElement.value?.stepUp(...args);
-/**
-* Decrements the value of a numeric input type by the value of the step attribute.
- */
-const callStepDown = (...args: Parameters<SynInput['stepDown']>) => nativeElement.value?.stepDown(...args);
-/**
-* Checks for validity but does not show a validation message.
-* Returns `true` when valid and `false` when invalid.
- */
-const callCheckValidity = (...args: Parameters<SynInput['checkValidity']>) => nativeElement.value?.checkValidity(...args);
-/**
-* Gets the associated form, if one exists.
- */
-const callGetForm = (...args: Parameters<SynInput['getForm']>) => nativeElement.value?.getForm(...args);
-/**
-* Checks for validity and shows the browser's validation message if the control is invalid.
- */
-const callReportValidity = (...args: Parameters<SynInput['reportValidity']>) => nativeElement.value?.reportValidity(...args);
-/**
-* Sets a custom validation message.
-* Pass an empty string to restore validity.
- */
-const callSetCustomValidity = (...args: Parameters<SynInput['setCustomValidity']>) => nativeElement.value?.setCustomValidity(...args);
-
 defineExpose({
-  callHandleDisabledChange,
-  callHandleStepChange,
-  callHandleValueChange,
-  callFocus,
-  callBlur,
-  callSelect,
-  callSetSelectionRange,
-  callSetRangeText,
-  callShowPicker,
-  callStepUp,
-  callStepDown,
-  callCheckValidity,
-  callGetForm,
-  callReportValidity,
-  callSetCustomValidity,
   nativeElement,
 });
 

package/src/components/SynVueMenu.vue

@@ -23,10 +23,7 @@ import type { SynMenu, SynSelectEvent } from '@synergy-design-system/components'
 // DOM Reference to the element
 const nativeElement = ref<SynMenu>();
 
-// Map methods
-
 defineExpose({
-
   nativeElement,
 });
 

package/src/components/SynVueMenuItem.vue

@@ -39,22 +39,7 @@ import type { SynMenuItem } from '@synergy-design-system/components';
 // DOM Reference to the element
 const nativeElement = ref<SynMenuItem>();
 
-// Map methods
-const callHandleCheckedChange = (...args: Parameters<SynMenuItem['handleCheckedChange']>) => nativeElement.value?.handleCheckedChange(...args);
-const callHandleDisabledChange = (...args: Parameters<SynMenuItem['handleDisabledChange']>) => nativeElement.value?.handleDisabledChange(...args);
-const callHandleTypeChange = (...args: Parameters<SynMenuItem['handleTypeChange']>) => nativeElement.value?.handleTypeChange(...args);
-/**
-* Returns a text label based on the contents of the menu item's default slot.
- */
-const callGetTextLabel = (...args: Parameters<SynMenuItem['getTextLabel']>) => nativeElement.value?.getTextLabel(...args);
-const callIsSubmenu = (...args: Parameters<SynMenuItem['isSubmenu']>) => nativeElement.value?.isSubmenu(...args);
-
 defineExpose({
-  callHandleCheckedChange,
-  callHandleDisabledChange,
-  callHandleTypeChange,
-  callGetTextLabel,
-  callIsSubmenu,
   nativeElement,
 });
 

package/src/components/SynVueMenuLabel.vue

@@ -29,10 +29,7 @@ import type { SynMenuLabel } from '@synergy-design-system/components';
 // DOM Reference to the element
 const nativeElement = ref<SynMenuLabel>();
 
-// Map methods
-
 defineExpose({
-
   nativeElement,
 });
 

package/src/components/SynVueNavItem.vue

@@ -60,26 +60,7 @@ import type {
 // DOM Reference to the element
 const nativeElement = ref<SynNavItem>();
 
-// Map methods
-const callHandleOpenChange = (...args: Parameters<SynNavItem['handleOpenChange']>) => nativeElement.value?.handleOpenChange(...args);
-/**
-* Removes focus from the button.
- */
-const callBlur = (...args: Parameters<SynNavItem['blur']>) => nativeElement.value?.blur(...args);
-/**
-* Simulates a click on the nav-items button, link or summary.
- */
-const callClick = (...args: Parameters<SynNavItem['click']>) => nativeElement.value?.click(...args);
-/**
-* Sets focus on the nav-item
- */
-const callFocus = (...args: Parameters<SynNavItem['focus']>) => nativeElement.value?.focus(...args);
-
 defineExpose({
-  callHandleOpenChange,
-  callBlur,
-  callClick,
-  callFocus,
   nativeElement,
 });
 

package/src/components/SynVueOptgroup.vue

@@ -35,11 +35,7 @@ import type { SynOptgroup } from '@synergy-design-system/components';
 // DOM Reference to the element
 const nativeElement = ref<SynOptgroup>();
 
-// Map methods
-const callHandleDisabledChange = (...args: Parameters<SynOptgroup['handleDisabledChange']>) => nativeElement.value?.handleDisabledChange(...args);
-
 defineExpose({
-  callHandleDisabledChange,
   nativeElement,
 });
 

package/src/components/SynVueOption.vue

@@ -31,20 +31,7 @@ import type { SynOption } from '@synergy-design-system/components';
 // DOM Reference to the element
 const nativeElement = ref<SynOption>();
 
-// Map methods
-const callHandleDisabledChange = (...args: Parameters<SynOption['handleDisabledChange']>) => nativeElement.value?.handleDisabledChange(...args);
-const callHandleSelectedChange = (...args: Parameters<SynOption['handleSelectedChange']>) => nativeElement.value?.handleSelectedChange(...args);
-const callHandleValueChange = (...args: Parameters<SynOption['handleValueChange']>) => nativeElement.value?.handleValueChange(...args);
-/**
-* Returns a plain text label based on the option's content.
- */
-const callGetTextLabel = (...args: Parameters<SynOption['getTextLabel']>) => nativeElement.value?.getTextLabel(...args);
-
 defineExpose({
-  callHandleDisabledChange,
-  callHandleSelectedChange,
-  callHandleValueChange,
-  callGetTextLabel,
   nativeElement,
 });
 

package/src/components/SynVuePopup.vue

@@ -42,14 +42,7 @@ import type { SynPopup, SynRepositionEvent } from '@synergy-design-system/compon
 // DOM Reference to the element
 const nativeElement = ref<SynPopup>();
 
-// Map methods
-/**
-* Forces the popup to recalculate and reposition itself.
- */
-const callReposition = (...args: Parameters<SynPopup['reposition']>) => nativeElement.value?.reposition(...args);
-
 defineExpose({
-  callReposition,
   nativeElement,
 });
 

package/src/components/SynVuePrioNav.vue

@@ -47,20 +47,13 @@ import type { SynPrioNav } from '@synergy-design-system/components';
 // DOM Reference to the element
 const nativeElement = ref<SynPrioNav>();
 
-// Map methods
-
 defineExpose({
-
   nativeElement,
 });
 
 // Map attributes
 const props = defineProps<{
-  /**
-* The components priority menu label.
-This will be shown after the priority menu 3 dots link
- */
-  'priorityMenuLabel'?: SynPrioNav['priorityMenuLabel'];
+
 }>();
 
 // Make sure prop binding only forwards the props that are actually there.

package/src/components/SynVueProgressBar.vue

@@ -31,10 +31,7 @@ import type { SynProgressBar } from '@synergy-design-system/components';
 // DOM Reference to the element
 const nativeElement = ref<SynProgressBar>();
 
-// Map methods
-
 defineExpose({
-
   nativeElement,
 });
 

package/src/components/SynVueProgressRing.vue

@@ -31,10 +31,7 @@ import type { SynProgressRing } from '@synergy-design-system/components';
 // DOM Reference to the element
 const nativeElement = ref<SynProgressRing>();
 
-// Map methods
-
 defineExpose({
-
   nativeElement,
 });
 

package/src/components/SynVueRadio.vue

@@ -32,13 +32,7 @@ import type { SynBlurEvent, SynFocusEvent, SynRadio } from '@synergy-design-syst
 // DOM Reference to the element
 const nativeElement = ref<SynRadio>();
 
-// Map methods
-const callHandleCheckedChange = (...args: Parameters<SynRadio['handleCheckedChange']>) => nativeElement.value?.handleCheckedChange(...args);
-const callHandleDisabledChange = (...args: Parameters<SynRadio['handleDisabledChange']>) => nativeElement.value?.handleDisabledChange(...args);
-
 defineExpose({
-  callHandleCheckedChange,
-  callHandleDisabledChange,
   nativeElement,
 });
 

package/src/components/SynVueRadioButton.vue

@@ -33,21 +33,7 @@ import type { SynBlurEvent, SynFocusEvent, SynRadioButton } from '@synergy-desig
 // DOM Reference to the element
 const nativeElement = ref<SynRadioButton>();
 
-// Map methods
-const callHandleDisabledChange = (...args: Parameters<SynRadioButton['handleDisabledChange']>) => nativeElement.value?.handleDisabledChange(...args);
-/**
-* Sets focus on the radio button.
- */
-const callFocus = (...args: Parameters<SynRadioButton['focus']>) => nativeElement.value?.focus(...args);
-/**
-* Removes focus from the radio button.
- */
-const callBlur = (...args: Parameters<SynRadioButton['blur']>) => nativeElement.value?.blur(...args);
-
 defineExpose({
-  callHandleDisabledChange,
-  callFocus,
-  callBlur,
   nativeElement,
 });
 

package/src/components/SynVueRadioGroup.vue

@@ -39,35 +39,7 @@ import type {
 // DOM Reference to the element
 const nativeElement = ref<SynRadioGroup>();
 
-// Map methods
-const callHandleSizeChange = (...args: Parameters<SynRadioGroup['handleSizeChange']>) => nativeElement.value?.handleSizeChange(...args);
-const callHandleValueChange = (...args: Parameters<SynRadioGroup['handleValueChange']>) => nativeElement.value?.handleValueChange(...args);
-/**
-* Checks for validity but does not show a validation message.
-* Returns `true` when valid and `false` when invalid.
- */
-const callCheckValidity = (...args: Parameters<SynRadioGroup['checkValidity']>) => nativeElement.value?.checkValidity(...args);
-/**
-* Gets the associated form, if one exists.
- */
-const callGetForm = (...args: Parameters<SynRadioGroup['getForm']>) => nativeElement.value?.getForm(...args);
-/**
-* Checks for validity and shows the browser's validation message if the control is invalid.
- */
-const callReportValidity = (...args: Parameters<SynRadioGroup['reportValidity']>) => nativeElement.value?.reportValidity(...args);
-/**
-* Sets a custom validation message.
-* Pass an empty string to restore validity.
- */
-const callSetCustomValidity = (...args: Parameters<SynRadioGroup['setCustomValidity']>) => nativeElement.value?.setCustomValidity(...args);
-
 defineExpose({
-  callHandleSizeChange,
-  callHandleValueChange,
-  callCheckValidity,
-  callGetForm,
-  callReportValidity,
-  callSetCustomValidity,
   nativeElement,
 });
 

package/src/components/SynVueSelect.vue

@@ -60,57 +60,7 @@ import type {
 // DOM Reference to the element
 const nativeElement = ref<SynSelect>();
 
-// Map methods
-const callHandleDisabledChange = (...args: Parameters<SynSelect['handleDisabledChange']>) => nativeElement.value?.handleDisabledChange(...args);
-const callHandleValueChange = (...args: Parameters<SynSelect['handleValueChange']>) => nativeElement.value?.handleValueChange(...args);
-const callHandleOpenChange = (...args: Parameters<SynSelect['handleOpenChange']>) => nativeElement.value?.handleOpenChange(...args);
-/**
-* Shows the listbox.
- */
-const callShow = (...args: Parameters<SynSelect['show']>) => nativeElement.value?.show(...args);
-/**
-* Hides the listbox.
- */
-const callHide = (...args: Parameters<SynSelect['hide']>) => nativeElement.value?.hide(...args);
-/**
-* Checks for validity but does not show a validation message.
-* Returns `true` when valid and `false` when invalid.
- */
-const callCheckValidity = (...args: Parameters<SynSelect['checkValidity']>) => nativeElement.value?.checkValidity(...args);
-/**
-* Gets the associated form, if one exists.
- */
-const callGetForm = (...args: Parameters<SynSelect['getForm']>) => nativeElement.value?.getForm(...args);
-/**
-* Checks for validity and shows the browser's validation message if the control is invalid.
- */
-const callReportValidity = (...args: Parameters<SynSelect['reportValidity']>) => nativeElement.value?.reportValidity(...args);
-/**
-* Sets a custom validation message.
-* Pass an empty string to restore validity.
- */
-const callSetCustomValidity = (...args: Parameters<SynSelect['setCustomValidity']>) => nativeElement.value?.setCustomValidity(...args);
-/**
-* Sets focus on the control.
- */
-const callFocus = (...args: Parameters<SynSelect['focus']>) => nativeElement.value?.focus(...args);
-/**
-* Removes focus from the control.
- */
-const callBlur = (...args: Parameters<SynSelect['blur']>) => nativeElement.value?.blur(...args);
-
 defineExpose({
-  callHandleDisabledChange,
-  callHandleValueChange,
-  callHandleOpenChange,
-  callShow,
-  callHide,
-  callCheckValidity,
-  callGetForm,
-  callReportValidity,
-  callSetCustomValidity,
-  callFocus,
-  callBlur,
   nativeElement,
 });
 

package/src/components/SynVueSideNav.vue

@@ -59,25 +59,7 @@ import type {
 // DOM Reference to the element
 const nativeElement = ref<SynSideNav>();
 
-// Map methods
-const callHandleModeChange = (...args: Parameters<SynSideNav['handleModeChange']>) => nativeElement.value?.handleModeChange(...args);
-const callHandleOpenChange = (...args: Parameters<SynSideNav['handleOpenChange']>) => nativeElement.value?.handleOpenChange(...args);
-const callHandleFocusTrapping = (...args: Parameters<SynSideNav['handleFocusTrapping']>) => nativeElement.value?.handleFocusTrapping(...args);
-/**
-* Shows the side-nav.
- */
-const callShow = (...args: Parameters<SynSideNav['show']>) => nativeElement.value?.show(...args);
-/**
-* Hides the side-nav
- */
-const callHide = (...args: Parameters<SynSideNav['hide']>) => nativeElement.value?.hide(...args);
-
 defineExpose({
-  callHandleModeChange,
-  callHandleOpenChange,
-  callHandleFocusTrapping,
-  callShow,
-  callHide,
   nativeElement,
 });
 

package/src/components/SynVueSpinner.vue

@@ -25,10 +25,7 @@ import type { SynSpinner } from '@synergy-design-system/components';
 // DOM Reference to the element
 const nativeElement = ref<SynSpinner>();
 
-// Map methods
-
 defineExpose({
-
   nativeElement,
 });
 

package/src/components/SynVueSwitch.vue

@@ -40,50 +40,7 @@ import type {
 // DOM Reference to the element
 const nativeElement = ref<SynSwitch>();
 
-// Map methods
-const callHandleCheckedChange = (...args: Parameters<SynSwitch['handleCheckedChange']>) => nativeElement.value?.handleCheckedChange(...args);
-const callHandleDisabledChange = (...args: Parameters<SynSwitch['handleDisabledChange']>) => nativeElement.value?.handleDisabledChange(...args);
-/**
-* Simulates a click on the switch.
- */
-const callClick = (...args: Parameters<SynSwitch['click']>) => nativeElement.value?.click(...args);
-/**
-* Sets focus on the switch.
- */
-const callFocus = (...args: Parameters<SynSwitch['focus']>) => nativeElement.value?.focus(...args);
-/**
-* Removes focus from the switch.
- */
-const callBlur = (...args: Parameters<SynSwitch['blur']>) => nativeElement.value?.blur(...args);
-/**
-* Checks for validity but does not show a validation message.
-* Returns `true` when valid and `false` when invalid.
- */
-const callCheckValidity = (...args: Parameters<SynSwitch['checkValidity']>) => nativeElement.value?.checkValidity(...args);
-/**
-* Gets the associated form, if one exists.
- */
-const callGetForm = (...args: Parameters<SynSwitch['getForm']>) => nativeElement.value?.getForm(...args);
-/**
-* Checks for validity and shows the browser's validation message if the control is invalid.
- */
-const callReportValidity = (...args: Parameters<SynSwitch['reportValidity']>) => nativeElement.value?.reportValidity(...args);
-/**
-* Sets a custom validation message.
-* Pass an empty string to restore validity.
- */
-const callSetCustomValidity = (...args: Parameters<SynSwitch['setCustomValidity']>) => nativeElement.value?.setCustomValidity(...args);
-
 defineExpose({
-  callHandleCheckedChange,
-  callHandleDisabledChange,
-  callClick,
-  callFocus,
-  callBlur,
-  callCheckValidity,
-  callGetForm,
-  callReportValidity,
-  callSetCustomValidity,
   nativeElement,
 });
 

package/src/components/SynVueTab.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+// ---------------------------------------------------------------------
+// 🔒 AUTOGENERATED @synergy-design-system/vue wrappers for @synergy-design-system/components
+// Please do not edit this file directly!
+// It will get recreated when running pnpm build.
+// ---------------------------------------------------------------------
+
+/**
+ * @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
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency syn-icon-button
+ *
+ * @slot - The tab's label.
+ *
+ * @event syn-close - Emitted when the tab is closable and the close button is activated.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart close-button - The close button, an `<syn-icon-button>`.
+ * @csspart close-button__base - The close button's exported `base` part.
+ */
+import { computed, ref } from 'vue';
+import '@synergy-design-system/components/components/tab/tab.js';
+
+import type { SynCloseEvent, SynTab } from '@synergy-design-system/components';
+
+// DOM Reference to the element
+const nativeElement = ref<SynTab>();
+
+defineExpose({
+  nativeElement,
+});
+
+// Map attributes
+const props = defineProps<{
+  /**
+* The name of the tab panel this tab is associated with.
+* The panel must be located in the same tab group.
+ */
+  'panel'?: SynTab['panel'];
+
+  /**
+* Draws the tab in an active state.
+ */
+  'active'?: SynTab['active'];
+
+  /**
+* Makes the tab closable and shows a close button.
+ */
+  'closable'?: SynTab['closable'];
+
+  /**
+* Disables the tab and prevents selection.
+ */
+  'disabled'?: SynTab['disabled'];
+}>();
+
+// 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<{
+  /**
+* Emitted when the tab is closable and the close button is activated.
+ */
+  'syn-close': [e: SynCloseEvent];
+}>();
+</script>
+
+<script lang="ts">
+export type { SynCloseEvent } from '@synergy-design-system/components';
+</script>
+
+<template>
+  <syn-tab
+    v-bind="visibleProps"
+
+    ref="nativeElement"
+    @syn-close="$emit('syn-close', $event)"
+  >
+    <slot />
+  </syn-tab>
+</template>