@synergy-design-system/vue 1.23.0 → 1.24.0

package/src/components/SynVueSelect.vue

@@ -58,46 +58,46 @@ import type {
 } from '@synergy-design-system/components';
 
 // DOM Reference to the element
-const element = ref<SynSelect>();
+const nativeElement = ref<SynSelect>();
 
 // Map methods
-const callHandleDisabledChange = (...args: Parameters<SynSelect['handleDisabledChange']>) => element.value?.handleDisabledChange(...args);
-const callHandleValueChange = (...args: Parameters<SynSelect['handleValueChange']>) => element.value?.handleValueChange(...args);
-const callHandleOpenChange = (...args: Parameters<SynSelect['handleOpenChange']>) => element.value?.handleOpenChange(...args);
+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']>) => element.value?.show(...args);
+const callShow = (...args: Parameters<SynSelect['show']>) => nativeElement.value?.show(...args);
 /**
 * Hides the listbox.
  */
-const callHide = (...args: Parameters<SynSelect['hide']>) => element.value?.hide(...args);
+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']>) => element.value?.checkValidity(...args);
+const callCheckValidity = (...args: Parameters<SynSelect['checkValidity']>) => nativeElement.value?.checkValidity(...args);
 /**
 * Gets the associated form, if one exists.
  */
-const callGetForm = (...args: Parameters<SynSelect['getForm']>) => element.value?.getForm(...args);
+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']>) => element.value?.reportValidity(...args);
+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']>) => element.value?.setCustomValidity(...args);
+const callSetCustomValidity = (...args: Parameters<SynSelect['setCustomValidity']>) => nativeElement.value?.setCustomValidity(...args);
 /**
 * Sets focus on the control.
  */
-const callFocus = (...args: Parameters<SynSelect['focus']>) => element.value?.focus(...args);
+const callFocus = (...args: Parameters<SynSelect['focus']>) => nativeElement.value?.focus(...args);
 /**
 * Removes focus from the control.
  */
-const callBlur = (...args: Parameters<SynSelect['blur']>) => element.value?.blur(...args);
+const callBlur = (...args: Parameters<SynSelect['blur']>) => nativeElement.value?.blur(...args);
 
 defineExpose({
   callHandleDisabledChange,
@@ -111,6 +111,7 @@ defineExpose({
   callSetCustomValidity,
   callFocus,
   callBlur,
+  nativeElement,
 });
 
 // Map attributes
@@ -312,7 +313,7 @@ export type { SynInvalidEvent } from '@synergy-design-system/components';
     :value="typeof props.modelValue !== 'undefined' ? props.modelValue : typeof props.value !== 'undefined' ? props.value : undefined"
     @syn-clear="$emit('syn-clear', $event)"
     v-bind="visibleProps"
-    ref="element"
+    ref="nativeElement"
     @syn-input="$emit('update:modelValue', $event.target.value); $emit('syn-input', $event)"
     @syn-focus="$emit('syn-focus', $event)"
     @syn-blur="$emit('syn-blur', $event)"
@@ -323,10 +324,5 @@ export type { SynInvalidEvent } from '@synergy-design-system/components';
     @syn-invalid="$emit('syn-invalid', $event)"
   >
     <slot />
-    <slot name="label" />
-    <slot name="prefix" />
-    <slot name="clear-icon" />
-    <slot name="expand-icon" />
-    <slot name="help-text" />
   </syn-select>
 </template>

package/src/components/SynVueSideNav.vue

@@ -57,20 +57,20 @@ import type {
 } from '@synergy-design-system/components';
 
 // DOM Reference to the element
-const element = ref<SynSideNav>();
+const nativeElement = ref<SynSideNav>();
 
 // Map methods
-const callHandleModeChange = (...args: Parameters<SynSideNav['handleModeChange']>) => element.value?.handleModeChange(...args);
-const callHandleOpenChange = (...args: Parameters<SynSideNav['handleOpenChange']>) => element.value?.handleOpenChange(...args);
-const callHandleFocusTrapping = (...args: Parameters<SynSideNav['handleFocusTrapping']>) => element.value?.handleFocusTrapping(...args);
+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']>) => element.value?.show(...args);
+const callShow = (...args: Parameters<SynSideNav['show']>) => nativeElement.value?.show(...args);
 /**
 * Hides the side-nav
  */
-const callHide = (...args: Parameters<SynSideNav['hide']>) => element.value?.hide(...args);
+const callHide = (...args: Parameters<SynSideNav['hide']>) => nativeElement.value?.hide(...args);
 
 defineExpose({
   callHandleModeChange,
@@ -78,6 +78,7 @@ defineExpose({
   callHandleFocusTrapping,
   callShow,
   callHide,
+  nativeElement,
 });
 
 // Map attributes
@@ -161,7 +162,7 @@ export type { SynAfterHideEvent } from '@synergy-design-system/components';
 <template>
   <syn-side-nav
     v-bind="visibleProps"
-    ref="element"
+    ref="nativeElement"
     @syn-show="$emit('syn-show', $event)"
     @syn-after-show="$emit('syn-after-show', $event)"
 
@@ -169,6 +170,5 @@ export type { SynAfterHideEvent } from '@synergy-design-system/components';
     @syn-after-hide="$emit('syn-after-hide', $event)"
   >
     <slot />
-    <slot name="footer" />
   </syn-side-nav>
 </template>

package/src/components/SynVueSpinner.vue

@@ -23,12 +23,13 @@ import '@synergy-design-system/components/components/spinner/spinner.js';
 import type { SynSpinner } from '@synergy-design-system/components';
 
 // DOM Reference to the element
-const element = ref<SynSpinner>();
+const nativeElement = ref<SynSpinner>();
 
 // Map methods
 
 defineExpose({
 
+  nativeElement,
 });
 
 // Map attributes
@@ -56,6 +57,6 @@ defineEmits<{
   <syn-spinner
 
     v-bind="visibleProps"
-    ref="element"
+    ref="nativeElement"
   />
 </template>

package/src/components/SynVueSwitch.vue

@@ -38,41 +38,41 @@ import type {
 } from '@synergy-design-system/components';
 
 // DOM Reference to the element
-const element = ref<SynSwitch>();
+const nativeElement = ref<SynSwitch>();
 
 // Map methods
-const callHandleCheckedChange = (...args: Parameters<SynSwitch['handleCheckedChange']>) => element.value?.handleCheckedChange(...args);
-const callHandleDisabledChange = (...args: Parameters<SynSwitch['handleDisabledChange']>) => element.value?.handleDisabledChange(...args);
+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']>) => element.value?.click(...args);
+const callClick = (...args: Parameters<SynSwitch['click']>) => nativeElement.value?.click(...args);
 /**
 * Sets focus on the switch.
  */
-const callFocus = (...args: Parameters<SynSwitch['focus']>) => element.value?.focus(...args);
+const callFocus = (...args: Parameters<SynSwitch['focus']>) => nativeElement.value?.focus(...args);
 /**
 * Removes focus from the switch.
  */
-const callBlur = (...args: Parameters<SynSwitch['blur']>) => element.value?.blur(...args);
+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']>) => element.value?.checkValidity(...args);
+const callCheckValidity = (...args: Parameters<SynSwitch['checkValidity']>) => nativeElement.value?.checkValidity(...args);
 /**
 * Gets the associated form, if one exists.
  */
-const callGetForm = (...args: Parameters<SynSwitch['getForm']>) => element.value?.getForm(...args);
+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']>) => element.value?.reportValidity(...args);
+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']>) => element.value?.setCustomValidity(...args);
+const callSetCustomValidity = (...args: Parameters<SynSwitch['setCustomValidity']>) => nativeElement.value?.setCustomValidity(...args);
 
 defineExpose({
   callHandleCheckedChange,
@@ -84,6 +84,7 @@ defineExpose({
   callGetForm,
   callReportValidity,
   callSetCustomValidity,
+  nativeElement,
 });
 
 // Map attributes
@@ -196,7 +197,7 @@ export type { SynInvalidEvent } from '@synergy-design-system/components';
 <template>
   <syn-switch
     v-bind="visibleProps"
-    ref="element"
+    ref="nativeElement"
     :checked="typeof props.modelValue !== 'undefined' ? props.modelValue : typeof props.checked !== 'undefined' ? props.checked : undefined"
     @syn-blur="$emit('syn-blur', $event)"
     @syn-change="$emit('syn-change', $event)"
@@ -205,6 +206,5 @@ export type { SynInvalidEvent } from '@synergy-design-system/components';
     @syn-invalid="$emit('syn-invalid', $event)"
   >
     <slot />
-    <slot name="help-text" />
   </syn-switch>
 </template>

package/src/components/SynVueTag.vue

@@ -28,12 +28,13 @@ import '@synergy-design-system/components/components/tag/tag.js';
 import type { SynRemoveEvent, SynTag } from '@synergy-design-system/components';
 
 // DOM Reference to the element
-const element = ref<SynTag>();
+const nativeElement = ref<SynTag>();
 
 // Map methods
 
 defineExpose({
 
+  nativeElement,
 });
 
 // Map attributes
@@ -76,7 +77,7 @@ export type { SynRemoveEvent } from '@synergy-design-system/components';
   <syn-tag
     v-bind="visibleProps"
 
-    ref="element"
+    ref="nativeElement"
     @syn-remove="$emit('syn-remove', $event)"
   >
     <slot />

package/src/components/SynVueTextarea.vue

@@ -35,54 +35,54 @@ import type {
 } from '@synergy-design-system/components';
 
 // DOM Reference to the element
-const element = ref<SynTextarea>();
+const nativeElement = ref<SynTextarea>();
 
 // Map methods
-const callHandleDisabledChange = (...args: Parameters<SynTextarea['handleDisabledChange']>) => element.value?.handleDisabledChange(...args);
-const callHandleRowsChange = (...args: Parameters<SynTextarea['handleRowsChange']>) => element.value?.handleRowsChange(...args);
-const callHandleValueChange = (...args: Parameters<SynTextarea['handleValueChange']>) => element.value?.handleValueChange(...args);
+const callHandleDisabledChange = (...args: Parameters<SynTextarea['handleDisabledChange']>) => nativeElement.value?.handleDisabledChange(...args);
+const callHandleRowsChange = (...args: Parameters<SynTextarea['handleRowsChange']>) => nativeElement.value?.handleRowsChange(...args);
+const callHandleValueChange = (...args: Parameters<SynTextarea['handleValueChange']>) => nativeElement.value?.handleValueChange(...args);
 /**
 * Sets focus on the textarea.
  */
-const callFocus = (...args: Parameters<SynTextarea['focus']>) => element.value?.focus(...args);
+const callFocus = (...args: Parameters<SynTextarea['focus']>) => nativeElement.value?.focus(...args);
 /**
 * Removes focus from the textarea.
  */
-const callBlur = (...args: Parameters<SynTextarea['blur']>) => element.value?.blur(...args);
+const callBlur = (...args: Parameters<SynTextarea['blur']>) => nativeElement.value?.blur(...args);
 /**
 * Selects all the text in the textarea.
  */
-const callSelect = (...args: Parameters<SynTextarea['select']>) => element.value?.select(...args);
+const callSelect = (...args: Parameters<SynTextarea['select']>) => nativeElement.value?.select(...args);
 /**
 * Gets or sets the textarea's scroll position.
  */
-const callScrollPosition = (...args: Parameters<SynTextarea['scrollPosition']>) => element.value?.scrollPosition(...args);
+const callScrollPosition = (...args: Parameters<SynTextarea['scrollPosition']>) => nativeElement.value?.scrollPosition(...args);
 /**
 * Sets the start and end positions of the text selection (0-based).
  */
-const callSetSelectionRange = (...args: Parameters<SynTextarea['setSelectionRange']>) => element.value?.setSelectionRange(...args);
+const callSetSelectionRange = (...args: Parameters<SynTextarea['setSelectionRange']>) => nativeElement.value?.setSelectionRange(...args);
 /**
 * Replaces a range of text with a new string.
  */
-const callSetRangeText = (...args: Parameters<SynTextarea['setRangeText']>) => element.value?.setRangeText(...args);
+const callSetRangeText = (...args: Parameters<SynTextarea['setRangeText']>) => nativeElement.value?.setRangeText(...args);
 /**
 * Checks for validity but does not show a validation message.
 * Returns `true` when valid and `false` when invalid.
  */
-const callCheckValidity = (...args: Parameters<SynTextarea['checkValidity']>) => element.value?.checkValidity(...args);
+const callCheckValidity = (...args: Parameters<SynTextarea['checkValidity']>) => nativeElement.value?.checkValidity(...args);
 /**
 * Gets the associated form, if one exists.
  */
-const callGetForm = (...args: Parameters<SynTextarea['getForm']>) => element.value?.getForm(...args);
+const callGetForm = (...args: Parameters<SynTextarea['getForm']>) => nativeElement.value?.getForm(...args);
 /**
 * Checks for validity and shows the browser's validation message if the control is invalid.
  */
-const callReportValidity = (...args: Parameters<SynTextarea['reportValidity']>) => element.value?.reportValidity(...args);
+const callReportValidity = (...args: Parameters<SynTextarea['reportValidity']>) => nativeElement.value?.reportValidity(...args);
 /**
 * Sets a custom validation message.
 * Pass an empty string to restore validity.
  */
-const callSetCustomValidity = (...args: Parameters<SynTextarea['setCustomValidity']>) => element.value?.setCustomValidity(...args);
+const callSetCustomValidity = (...args: Parameters<SynTextarea['setCustomValidity']>) => nativeElement.value?.setCustomValidity(...args);
 
 defineExpose({
   callHandleDisabledChange,
@@ -98,6 +98,7 @@ defineExpose({
   callGetForm,
   callReportValidity,
   callSetCustomValidity,
+  nativeElement,
 });
 
 // Map attributes
@@ -279,7 +280,7 @@ export type { SynInvalidEvent } from '@synergy-design-system/components';
 <template>
   <syn-textarea
     v-bind="visibleProps"
-    ref="element"
+    ref="nativeElement"
     :value="typeof props.modelValue !== 'undefined' ? props.modelValue : typeof props.value !== 'undefined' ? props.value : undefined"
     @syn-blur="$emit('syn-blur', $event)"
     @syn-change="$emit('syn-change', $event)"
@@ -287,7 +288,6 @@ export type { SynInvalidEvent } from '@synergy-design-system/components';
     @syn-input="$emit('update:modelValue', $event.target.value); $emit('syn-input', $event)"
     @syn-invalid="$emit('syn-invalid', $event)"
   >
-    <slot name="label" />
-    <slot name="help-text" />
+    <slot />
   </syn-textarea>
 </template>

package/src/components/SynVueTooltip.vue

@@ -41,20 +41,20 @@ import type {
 } from '@synergy-design-system/components';
 
 // DOM Reference to the element
-const element = ref<SynTooltip>();
+const nativeElement = ref<SynTooltip>();
 
 // Map methods
-const callHandleOpenChange = (...args: Parameters<SynTooltip['handleOpenChange']>) => element.value?.handleOpenChange(...args);
-const callHandleOptionsChange = (...args: Parameters<SynTooltip['handleOptionsChange']>) => element.value?.handleOptionsChange(...args);
-const callHandleDisabledChange = (...args: Parameters<SynTooltip['handleDisabledChange']>) => element.value?.handleDisabledChange(...args);
+const callHandleOpenChange = (...args: Parameters<SynTooltip['handleOpenChange']>) => nativeElement.value?.handleOpenChange(...args);
+const callHandleOptionsChange = (...args: Parameters<SynTooltip['handleOptionsChange']>) => nativeElement.value?.handleOptionsChange(...args);
+const callHandleDisabledChange = (...args: Parameters<SynTooltip['handleDisabledChange']>) => nativeElement.value?.handleDisabledChange(...args);
 /**
 * Shows the tooltip.
  */
-const callShow = (...args: Parameters<SynTooltip['show']>) => element.value?.show(...args);
+const callShow = (...args: Parameters<SynTooltip['show']>) => nativeElement.value?.show(...args);
 /**
 * Hides the tooltip
  */
-const callHide = (...args: Parameters<SynTooltip['hide']>) => element.value?.hide(...args);
+const callHide = (...args: Parameters<SynTooltip['hide']>) => nativeElement.value?.hide(...args);
 
 defineExpose({
   callHandleOpenChange,
@@ -62,6 +62,7 @@ defineExpose({
   callHandleDisabledChange,
   callShow,
   callHide,
+  nativeElement,
 });
 
 // Map attributes
@@ -163,7 +164,7 @@ export type { SynAfterHideEvent } from '@synergy-design-system/components';
 <template>
   <syn-tooltip
     v-bind="visibleProps"
-    ref="element"
+    ref="nativeElement"
     @syn-show="$emit('syn-show', $event)"
     @syn-after-show="$emit('syn-after-show', $event)"
 
@@ -171,6 +172,5 @@ export type { SynAfterHideEvent } from '@synergy-design-system/components';
     @syn-after-hide="$emit('syn-after-hide', $event)"
   >
     <slot />
-    <slot name="content" />
   </syn-tooltip>
 </template>