@synergy-design-system/vue 2.7.1 → 2.7.3

package/src/components/SynVueTab.vue

@@ -24,7 +24,8 @@
 import { computed, ref } from 'vue';
 import '@synergy-design-system/components/components/tab/tab.js';
 
-import type { SynCloseEvent, SynTab } from '@synergy-design-system/components';
+import type { SynCloseEvent } from '@synergy-design-system/components';
+import type { SynTab } from '@synergy-design-system/components';
 
 // DOM Reference to the element
 const nativeElement = ref<SynTab>();
@@ -36,42 +37,42 @@ defineExpose({
 // 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'];
+   * 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'];
+   * Draws the tab in an active state.
+   */
+  active?: SynTab['active'];
 
   /**
-* Makes the tab closable and shows a close button.
- */
-  'closable'?: SynTab['closable'];
+   * Makes the tab closable and shows a close button.
+   */
+  closable?: SynTab['closable'];
 
   /**
-* Disables the tab and prevents selection.
- */
-  'disabled'?: SynTab['disabled'];
+   * 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'),
-));
+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.
- */
+   * Emitted when the tab is closable and the close button is activated.
+   */
   'syn-close': [e: SynCloseEvent];
 }>();
 </script>
@@ -82,11 +83,9 @@ export type { SynCloseEvent } from '@synergy-design-system/components';
 
 <template>
   <syn-tab
-    v-bind="visibleProps"
-
-    ref="nativeElement"
     @syn-close="$emit('syn-close', $event)"
-  >
-    <slot />
+    v-bind="visibleProps"
+    ref="nativeElement">
+    <slot></slot>
   </syn-tab>
 </template>

package/src/components/SynVueTabGroup.vue

@@ -37,7 +37,9 @@
 import { computed, ref } from 'vue';
 import '@synergy-design-system/components/components/tab-group/tab-group.js';
 
-import type { SynTabGroup, SynTabHideEvent, SynTabShowEvent } from '@synergy-design-system/components';
+import type { SynTabShowEvent } from '@synergy-design-system/components';
+import type { SynTabHideEvent } from '@synergy-design-system/components';
+import type { SynTabGroup } from '@synergy-design-system/components';
 
 // DOM Reference to the element
 const nativeElement = ref<SynTabGroup>();
@@ -49,56 +51,56 @@ defineExpose({
 // Map attributes
 const props = defineProps<{
   /**
-* The placement of the tabs.
- */
-  'placement'?: SynTabGroup['placement'];
+   * The placement of the tabs.
+   */
+  placement?: SynTabGroup['placement'];
 
   /**
 * When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel.
 * When set to
 manual, the tab will receive focus but will not show until the user presses spacebar or enter.
  */
-  'activation'?: SynTabGroup['activation'];
+  activation?: SynTabGroup['activation'];
 
   /**
-* Disables the scroll arrows that appear when tabs overflow.
- */
-  'noScrollControls'?: SynTabGroup['noScrollControls'];
+   * Disables the scroll arrows that appear when tabs overflow.
+   */
+  noScrollControls?: SynTabGroup['noScrollControls'];
 
   /**
-* Draws the tab group as a contained element.
- */
-  'contained'?: SynTabGroup['contained'];
+   * Draws the tab group as a contained element.
+   */
+  contained?: SynTabGroup['contained'];
 
   /**
-* Draws the tab group with edges instead of roundings.
-* Takes only effect if used with the 'contained' property
- */
-  'sharp'?: SynTabGroup['sharp'];
+   * Draws the tab group with edges instead of roundings.
+   * Takes only effect if used with the 'contained' property
+   */
+  sharp?: SynTabGroup['sharp'];
 }>();
 
 // 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'),
-));
+const visibleProps = computed(() =>
+  Object.fromEntries(
+    Object.entries(props).filter(([, value]) => typeof value !== 'undefined'),
+  ),
+);
 
 // Map events
 defineEmits<{
   /**
-* Emitted when a tab is shown.
-* The payload of the event returns the "panel" attribute of the shown tab.
- */
+   * Emitted when a tab is shown.
+   * The payload of the event returns the "panel" attribute of the shown tab.
+   */
   'syn-tab-show': [e: SynTabShowEvent];
 
   /**
-* Emitted when a tab is hidden.
-* The payload of the event returns the "panel" attribute of the hidden tab.
- */
+   * Emitted when a tab is hidden.
+   * The payload of the event returns the "panel" attribute of the hidden tab.
+   */
   'syn-tab-hide': [e: SynTabHideEvent];
 }>();
 </script>
@@ -110,12 +112,10 @@ export type { SynTabHideEvent } from '@synergy-design-system/components';
 
 <template>
   <syn-tab-group
-    v-bind="visibleProps"
-    ref="nativeElement"
-
     @syn-tab-show="$emit('syn-tab-show', $event)"
     @syn-tab-hide="$emit('syn-tab-hide', $event)"
-  >
-    <slot />
+    v-bind="visibleProps"
+    ref="nativeElement">
+    <slot></slot>
   </syn-tab-group>
 </template>

package/src/components/SynVueTabPanel.vue

@@ -32,34 +32,29 @@ defineExpose({
 // Map attributes
 const props = defineProps<{
   /**
-* The tab panel's name.
- */
-  'name'?: SynTabPanel['name'];
+   * The tab panel's name.
+   */
+  name?: SynTabPanel['name'];
 
   /**
-* When true, the tab panel will be shown.
- */
-  'active'?: SynTabPanel['active'];
+   * When true, the tab panel will be shown.
+   */
+  active?: SynTabPanel['active'];
 }>();
 
 // 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'),
-));
-
+const visibleProps = computed(() =>
+  Object.fromEntries(
+    Object.entries(props).filter(([, value]) => typeof value !== 'undefined'),
+  ),
+);
 </script>
 
 <template>
-  <syn-tab-panel
-
-    v-bind="visibleProps"
-    ref="nativeElement"
-  >
-    <slot />
+  <syn-tab-panel v-bind="visibleProps" ref="nativeElement">
+    <slot></slot>
   </syn-tab-panel>
 </template>

package/src/components/SynVueTag.vue

@@ -25,7 +25,8 @@
 import { computed, ref } from 'vue';
 import '@synergy-design-system/components/components/tag/tag.js';
 
-import type { SynRemoveEvent, SynTag } from '@synergy-design-system/components';
+import type { SynRemoveEvent } from '@synergy-design-system/components';
+import type { SynTag } from '@synergy-design-system/components';
 
 // DOM Reference to the element
 const nativeElement = ref<SynTag>();
@@ -37,31 +38,31 @@ defineExpose({
 // Map attributes
 const props = defineProps<{
   /**
-* The tag's size.
- */
-  'size'?: SynTag['size'];
+   * The tag's size.
+   */
+  size?: SynTag['size'];
 
   /**
-* Makes the tag removable and shows a remove button.
- */
-  'removable'?: SynTag['removable'];
+   * Makes the tag removable and shows a remove button.
+   */
+  removable?: SynTag['removable'];
 }>();
 
 // 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'),
-));
+const visibleProps = computed(() =>
+  Object.fromEntries(
+    Object.entries(props).filter(([, value]) => typeof value !== 'undefined'),
+  ),
+);
 
 // Map events
 defineEmits<{
   /**
-* Emitted when the remove button is activated.
- */
+   * Emitted when the remove button is activated.
+   */
   'syn-remove': [e: SynRemoveEvent];
 }>();
 </script>
@@ -72,11 +73,9 @@ export type { SynRemoveEvent } from '@synergy-design-system/components';
 
 <template>
   <syn-tag
-    v-bind="visibleProps"
-
-    ref="nativeElement"
     @syn-remove="$emit('syn-remove', $event)"
-  >
-    <slot />
+    v-bind="visibleProps"
+    ref="nativeElement">
+    <slot></slot>
   </syn-tag>
 </template>

package/src/components/SynVueTextarea.vue

@@ -30,9 +30,12 @@
 import { computed, ref } from 'vue';
 import '@synergy-design-system/components/components/textarea/textarea.js';
 
-import type {
-  SynBlurEvent, SynChangeEvent, SynFocusEvent, SynInputEvent, SynInvalidEvent, SynTextarea,
-} from '@synergy-design-system/components';
+import type { SynBlurEvent } from '@synergy-design-system/components';
+import type { SynChangeEvent } 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 { SynTextarea } from '@synergy-design-system/components';
 
 // DOM Reference to the element
 const nativeElement = ref<SynTextarea>();
@@ -43,59 +46,59 @@ defineExpose({
 
 // Map attributes
 const props = defineProps<{
-  'title'?: SynTextarea['title'];
+  title?: SynTextarea['title'];
 
   /**
-* The name of the textarea, submitted as a name/value pair with form data.
- */
-  'name'?: SynTextarea['name'];
+   * The name of the textarea, submitted as a name/value pair with form data.
+   */
+  name?: SynTextarea['name'];
 
   /**
-* The current value of the textarea, submitted as a name/value pair with form data.
- */
-  'value'?: SynTextarea['value'];
+   * The current value of the textarea, submitted as a name/value pair with form data.
+   */
+  value?: SynTextarea['value'];
 
   /**
-* The textarea's size.
- */
-  'size'?: SynTextarea['size'];
+   * The textarea's size.
+   */
+  size?: SynTextarea['size'];
 
   /**
-* The textarea's label.
-* If you need to display HTML, use the `label` slot instead.
- */
-  'label'?: SynTextarea['label'];
+   * The textarea's label.
+   * If you need to display HTML, use the `label` slot instead.
+   */
+  label?: SynTextarea['label'];
 
   /**
-* The textarea's help text.
-* If you need to display HTML, use the `help-text` slot instead.
- */
-  'helpText'?: SynTextarea['helpText'];
+   * The textarea's help text.
+   * If you need to display HTML, use the `help-text` slot instead.
+   */
+  helpText?: SynTextarea['helpText'];
 
   /**
-* Placeholder text to show as a hint when the input is empty.
- */
-  'placeholder'?: SynTextarea['placeholder'];
+   * Placeholder text to show as a hint when the input is empty.
+   */
+  placeholder?: SynTextarea['placeholder'];
 
   /**
-* The number of rows to display by default.
- */
-  'rows'?: SynTextarea['rows'];
+   * The number of rows to display by default.
+   */
+  rows?: SynTextarea['rows'];
 
   /**
-* Controls how the textarea can be resized.
- */
-  'resize'?: SynTextarea['resize'];
+   * Controls how the textarea can be resized.
+   */
+  resize?: SynTextarea['resize'];
 
   /**
-* Disables the textarea.
- */
-  'disabled'?: SynTextarea['disabled'];
+   * Disables the textarea.
+   */
+  disabled?: SynTextarea['disabled'];
 
   /**
-* Makes the textarea readonly.
- */
-  'readonly'?: SynTextarea['readonly'];
+   * Makes the textarea readonly.
+   */
+  readonly?: SynTextarea['readonly'];
 
   /**
 * By default, form controls are associated with the nearest containing `<form>` element.
@@ -104,64 +107,64 @@ to place the form control outside of a form and associate it with the form that
 * The form must be in
 the same document or shadow root for this to work.
  */
-  'form'?: SynTextarea['form'];
+  form?: SynTextarea['form'];
 
   /**
-* Makes the textarea a required field.
- */
-  'required'?: SynTextarea['required'];
+   * Makes the textarea a required field.
+   */
+  required?: SynTextarea['required'];
 
   /**
-* The minimum length of input that will be considered valid.
- */
-  'minlength'?: SynTextarea['minlength'];
+   * The minimum length of input that will be considered valid.
+   */
+  minlength?: SynTextarea['minlength'];
 
   /**
-* The maximum length of input that will be considered valid.
- */
-  'maxlength'?: SynTextarea['maxlength'];
+   * The maximum length of input that will be considered valid.
+   */
+  maxlength?: SynTextarea['maxlength'];
 
   /**
-* Controls whether and how text input is automatically capitalized as it is entered by the user.
- */
-  'autocapitalize'?: SynTextarea['autocapitalize'];
+   * Controls whether and how text input is automatically capitalized as it is entered by the user.
+   */
+  autocapitalize?: SynTextarea['autocapitalize'];
 
   /**
-* Indicates whether the browser's autocorrect feature is on or off.
- */
-  'autocorrect'?: SynTextarea['autocorrect'];
+   * Indicates whether the browser's autocorrect feature is on or off.
+   */
+  autocorrect?: SynTextarea['autocorrect'];
 
   /**
 * Specifies what permission the browser has to provide assistance in filling out form field values.
 * Refer to
 [this page on MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete) for available values.
  */
-  'autocomplete'?: SynTextarea['autocomplete'];
+  autocomplete?: SynTextarea['autocomplete'];
 
   /**
-* Indicates that the input should receive focus on page load.
- */
-  'autofocus'?: SynTextarea['autofocus'];
+   * Indicates that the input should receive focus on page load.
+   */
+  autofocus?: SynTextarea['autofocus'];
 
   /**
-* Used to customize the label or icon of the Enter key on virtual keyboards.
- */
-  'enterkeyhint'?: SynTextarea['enterkeyhint'];
+   * Used to customize the label or icon of the Enter key on virtual keyboards.
+   */
+  enterkeyhint?: SynTextarea['enterkeyhint'];
 
   /**
-* Enables spell checking on the textarea.
- */
-  'spellcheck'?: SynTextarea['spellcheck'];
+   * Enables spell checking on the textarea.
+   */
+  spellcheck?: SynTextarea['spellcheck'];
 
   /**
 * Tells the browser what type of data will be entered by the user, allowing it to display the appropriate virtual
 keyboard on supportive devices.
  */
-  'inputmode'?: SynTextarea['inputmode'];
+  inputmode?: SynTextarea['inputmode'];
 
   /**
-* Support for two way data binding
- */
+   * Support for two way data binding
+   */
   modelValue?: SynTextarea['value'];
 }>();
 
@@ -169,42 +172,42 @@ keyboard on supportive devices.
 // 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'),
-));
+const visibleProps = computed(() =>
+  Object.fromEntries(
+    Object.entries(props).filter(([, value]) => typeof value !== 'undefined'),
+  ),
+);
 
 // Map events
 defineEmits<{
   /**
-* Emitted when the control loses focus.
- */
+   * Emitted when the control loses focus.
+   */
   'syn-blur': [e: SynBlurEvent];
 
   /**
-* Emitted when an alteration to the control's value is committed by the user.
- */
+   * Emitted when an alteration to the control's value is committed by the user.
+   */
   'syn-change': [e: SynChangeEvent];
 
   /**
-* Emitted when the control gains focus.
- */
+   * Emitted when the control gains focus.
+   */
   'syn-focus': [e: SynFocusEvent];
 
   /**
-* Emitted when the control receives input.
- */
+   * Emitted when the control receives input.
+   */
   'syn-input': [e: SynInputEvent];
 
   /**
-* Emitted when the form control has been checked for validity and its constraints aren't satisfied.
- */
+   * Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+   */
   'syn-invalid': [e: SynInvalidEvent];
 
   /**
-* Support for two way data binding
- */
+   * Support for two way data binding
+   */
   'update:modelValue': [newValue: SynTextarea['value']];
 }>();
 </script>
@@ -219,15 +222,23 @@ export type { SynInvalidEvent } from '@synergy-design-system/components';
 
 <template>
   <syn-textarea
-    v-bind="visibleProps"
-    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)"
     @syn-focus="$emit('syn-focus', $event)"
-    @syn-input="$emit('update:modelValue', $event.target.value); $emit('syn-input', $event)"
+    @syn-input="
+      $emit('update:modelValue', $event.target.value);
+      $emit('syn-input', $event);
+    "
     @syn-invalid="$emit('syn-invalid', $event)"
-  >
-    <slot />
+    :value="
+      typeof props.modelValue !== 'undefined'
+        ? props.modelValue
+        : typeof props.value !== 'undefined'
+          ? props.value
+          : undefined
+    "
+    v-bind="visibleProps"
+    ref="nativeElement">
+    <slot></slot>
   </syn-textarea>
 </template>