@synergy-design-system/vue 2.7.2 → 2.8.0

package/src/components/SynVueAlert.vue

@@ -33,9 +33,11 @@
 import { computed, ref } from 'vue';
 import '@synergy-design-system/components/components/alert/alert.js';
 
-import type {
-  SynAfterHideEvent, SynAfterShowEvent, SynAlert, SynHideEvent, SynShowEvent,
-} from '@synergy-design-system/components';
+import type { SynShowEvent } from '@synergy-design-system/components';
+import type { SynAfterShowEvent } from '@synergy-design-system/components';
+import type { SynHideEvent } from '@synergy-design-system/components';
+import type { SynAfterHideEvent } from '@synergy-design-system/components';
+import type { SynAlert } from '@synergy-design-system/components';
 
 // DOM Reference to the element
 const nativeElement = ref<SynAlert>();
@@ -51,17 +53,17 @@ const props = defineProps<{
 * You can toggle this attribute to show and hide the alert, or you can
 use the `show()` and `hide()` methods and this attribute will reflect the alert's open state.
  */
-  'open'?: SynAlert['open'];
+  open?: SynAlert['open'];
 
   /**
-* Enables a close button that allows the user to dismiss the alert.
- */
-  'closable'?: SynAlert['closable'];
+   * Enables a close button that allows the user to dismiss the alert.
+   */
+  closable?: SynAlert['closable'];
 
   /**
-* The alert's theme variant.
- */
-  'variant'?: SynAlert['variant'];
+   * The alert's theme variant.
+   */
+  variant?: SynAlert['variant'];
 
   /**
 * The length of time, in milliseconds, the alert will show before closing itself.
@@ -71,39 +73,39 @@ the alert before it closes (e.g.
 * Defaults to `Infinity`, meaning
 the alert will not close on its own.
  */
-  'duration'?: SynAlert['duration'];
+  duration?: SynAlert['duration'];
 }>();
 
 // 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 alert opens.
- */
+   * Emitted when the alert opens.
+   */
   'syn-show': [e: SynShowEvent];
 
   /**
-* Emitted after the alert opens and all animations are complete.
- */
+   * Emitted after the alert opens and all animations are complete.
+   */
   'syn-after-show': [e: SynAfterShowEvent];
 
   /**
-* Emitted when the alert closes.
- */
+   * Emitted when the alert closes.
+   */
   'syn-hide': [e: SynHideEvent];
 
   /**
-* Emitted after the alert closes and all animations are complete.
- */
+   * Emitted after the alert closes and all animations are complete.
+   */
   'syn-after-hide': [e: SynAfterHideEvent];
 }>();
 </script>
@@ -117,14 +119,12 @@ export type { SynAfterHideEvent } from '@synergy-design-system/components';
 
 <template>
   <syn-alert
-    v-bind="visibleProps"
-    ref="nativeElement"
     @syn-show="$emit('syn-show', $event)"
     @syn-after-show="$emit('syn-after-show', $event)"
-
     @syn-hide="$emit('syn-hide', $event)"
     @syn-after-hide="$emit('syn-after-hide', $event)"
-  >
-    <slot />
+    v-bind="visibleProps"
+    ref="nativeElement">
+    <slot></slot>
   </syn-alert>
 </template>

package/src/components/SynVueBadge.vue

@@ -30,29 +30,24 @@ defineExpose({
 // Map attributes
 const props = defineProps<{
   /**
-* The badge's theme variant.
- */
-  'variant'?: SynBadge['variant'];
+   * The badge's theme variant.
+   */
+  variant?: SynBadge['variant'];
 }>();
 
 // 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-badge
-
-    v-bind="visibleProps"
-    ref="nativeElement"
-  >
-    <slot />
+  <syn-badge v-bind="visibleProps" ref="nativeElement">
+    <slot></slot>
   </syn-badge>
 </template>

package/src/components/SynVueBreadcrumb.vue

@@ -37,27 +37,22 @@ const props = defineProps<{
 * This will not be shown on the screen, but it will be announced by
 screen readers and other assistive devices to provide more context for users.
  */
-  'label'?: SynBreadcrumb['label'];
+  label?: SynBreadcrumb['label'];
 }>();
 
 // 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-breadcrumb
-
-    v-bind="visibleProps"
-    ref="nativeElement"
-  >
-    <slot />
+  <syn-breadcrumb v-bind="visibleProps" ref="nativeElement">
+    <slot></slot>
   </syn-breadcrumb>
 </template>

package/src/components/SynVueBreadcrumbItem.vue

@@ -43,39 +43,34 @@ const props = defineProps<{
 internally.
 * When unset, a button will be rendered instead.
  */
-  'href'?: SynBreadcrumbItem['href'];
+  href?: SynBreadcrumbItem['href'];
 
   /**
-* Tells the browser where to open the link.
-* Only used when `href` is set.
- */
-  'target'?: SynBreadcrumbItem['target'];
+   * Tells the browser where to open the link.
+   * Only used when `href` is set.
+   */
+  target?: SynBreadcrumbItem['target'];
 
   /**
-* The `rel` attribute to use on the link.
-* Only used when `href` is set.
- */
-  'rel'?: SynBreadcrumbItem['rel'];
+   * The `rel` attribute to use on the link.
+   * Only used when `href` is set.
+   */
+  rel?: SynBreadcrumbItem['rel'];
 }>();
 
 // 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-breadcrumb-item
-
-    v-bind="visibleProps"
-    ref="nativeElement"
-  >
-    <slot />
+  <syn-breadcrumb-item v-bind="visibleProps" ref="nativeElement">
+    <slot></slot>
   </syn-breadcrumb-item>
 </template>

package/src/components/SynVueButton.vue

@@ -32,9 +32,10 @@
 import { computed, ref } from 'vue';
 import '@synergy-design-system/components/components/button/button.js';
 
-import type {
-  SynBlurEvent, SynButton, SynFocusEvent, SynInvalidEvent,
-} from '@synergy-design-system/components';
+import type { SynBlurEvent } from '@synergy-design-system/components';
+import type { SynFocusEvent } from '@synergy-design-system/components';
+import type { SynInvalidEvent } from '@synergy-design-system/components';
+import type { SynButton } from '@synergy-design-system/components';
 
 // DOM Reference to the element
 const nativeElement = ref<SynButton>();
@@ -45,33 +46,33 @@ defineExpose({
 
 // Map attributes
 const props = defineProps<{
-  'title'?: SynButton['title'];
+  title?: SynButton['title'];
 
   /**
-* The button's theme variant.
- */
-  'variant'?: SynButton['variant'];
+   * The button's theme variant.
+   */
+  variant?: SynButton['variant'];
 
   /**
-* The button's size.
- */
-  'size'?: SynButton['size'];
+   * The button's size.
+   */
+  size?: SynButton['size'];
 
   /**
-* Draws the button with a caret.
-* Used to indicate that the button triggers a dropdown menu or similar behavior.
- */
-  'caret'?: SynButton['caret'];
+   * Draws the button with a caret.
+   * Used to indicate that the button triggers a dropdown menu or similar behavior.
+   */
+  caret?: SynButton['caret'];
 
   /**
-* Disables the button.
- */
-  'disabled'?: SynButton['disabled'];
+   * Disables the button.
+   */
+  disabled?: SynButton['disabled'];
 
   /**
-* Draws the button in a loading state.
- */
-  'loading'?: SynButton['loading'];
+   * Draws the button in a loading state.
+   */
+  loading?: SynButton['loading'];
 
   /**
 * The type of button.
@@ -79,31 +80,31 @@ const props = defineProps<{
 `<button>` elements behave.
 * When the type is `submit`, the button will submit the surrounding form.
  */
-  'type'?: SynButton['type'];
+  type?: SynButton['type'];
 
   /**
 * The name of the button, submitted as a name/value pair with form data, but only when this button is the submitter.
 This attribute is ignored when `href` is present.
  */
-  'name'?: SynButton['name'];
+  name?: SynButton['name'];
 
   /**
 * The value of the button, submitted as a pair with the button's name as part of the form data, but only when this
 button is the submitter.
 * This attribute is ignored when `href` is present.
  */
-  'value'?: SynButton['value'];
+  value?: SynButton['value'];
 
   /**
-* When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.
- */
-  'href'?: SynButton['href'];
+   * When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`.
+   */
+  href?: SynButton['href'];
 
   /**
-* Tells the browser where to open the link.
-* Only used when `href` is present.
- */
-  'target'?: SynButton['target'];
+   * Tells the browser where to open the link.
+   * Only used when `href` is present.
+   */
+  target?: SynButton['target'];
 
   /**
 * When using `href`, this attribute will map to the underlying link's `rel` attribute.
@@ -114,13 +115,13 @@ specific tab/window, this will prevent that from working correctly.
 * You can remove or change the default value by
 setting the attribute to an empty string or a value of your choice, respectively.
  */
-  'rel'?: SynButton['rel'];
+  rel?: SynButton['rel'];
 
   /**
-* Tells the browser to download the linked file as this filename.
-* Only used when `href` is present.
- */
-  'download'?: SynButton['download'];
+   * Tells the browser to download the linked file as this filename.
+   * Only used when `href` is present.
+   */
+  download?: SynButton['download'];
 
   /**
 * The "form owner" to associate the button with.
@@ -128,59 +129,59 @@ setting the attribute to an empty string or a value of your choice, respectively
 * The
 value of this attribute must be an id of a form in the same document or shadow root as the button.
  */
-  'form'?: SynButton['form'];
+  form?: SynButton['form'];
 
   /**
-* Used to override the form owner's `action` attribute.
- */
-  'formAction'?: SynButton['formAction'];
+   * Used to override the form owner's `action` attribute.
+   */
+  formAction?: SynButton['formAction'];
 
   /**
-* Used to override the form owner's `enctype` attribute.
- */
-  'formEnctype'?: SynButton['formEnctype'];
+   * Used to override the form owner's `enctype` attribute.
+   */
+  formEnctype?: SynButton['formEnctype'];
 
   /**
-* Used to override the form owner's `method` attribute.
- */
-  'formMethod'?: SynButton['formMethod'];
+   * Used to override the form owner's `method` attribute.
+   */
+  formMethod?: SynButton['formMethod'];
 
   /**
-* Used to override the form owner's `novalidate` attribute.
- */
-  'formNoValidate'?: SynButton['formNoValidate'];
+   * Used to override the form owner's `novalidate` attribute.
+   */
+  formNoValidate?: SynButton['formNoValidate'];
 
   /**
-* Used to override the form owner's `target` attribute.
- */
-  'formTarget'?: SynButton['formTarget'];
+   * Used to override the form owner's `target` attribute.
+   */
+  formTarget?: SynButton['formTarget'];
 }>();
 
 // 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 button loses focus.
- */
+   * Emitted when the button loses focus.
+   */
   'syn-blur': [e: SynBlurEvent];
 
   /**
-* Emitted when the button gains focus.
- */
+   * Emitted when the button gains focus.
+   */
   'syn-focus': [e: SynFocusEvent];
 
   /**
-* 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];
 }>();
 </script>
@@ -193,13 +194,11 @@ export type { SynInvalidEvent } from '@synergy-design-system/components';
 
 <template>
   <syn-button
-    v-bind="visibleProps"
-    ref="nativeElement"
     @syn-blur="$emit('syn-blur', $event)"
-
     @syn-focus="$emit('syn-focus', $event)"
     @syn-invalid="$emit('syn-invalid', $event)"
-  >
-    <slot />
+    v-bind="visibleProps"
+    ref="nativeElement">
+    <slot></slot>
   </syn-button>
 </template>

package/src/components/SynVueButtonGroup.vue

@@ -34,27 +34,22 @@ const props = defineProps<{
 * This won't be displayed on the screen, but it will be announced by assistive
 devices when interacting with the control and is strongly recommended.
  */
-  'label'?: SynButtonGroup['label'];
+  label?: SynButtonGroup['label'];
 }>();
 
 // 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-button-group
-
-    v-bind="visibleProps"
-    ref="nativeElement"
-  >
-    <slot />
+  <syn-button-group v-bind="visibleProps" ref="nativeElement">
+    <slot></slot>
   </syn-button-group>
 </template>

package/src/components/SynVueCard.vue

@@ -42,31 +42,26 @@ defineExpose({
 // Map attributes
 const props = defineProps<{
   /**
-* Draws the card with sharp edges.
-* Can be used e.g.
-* when nesting multiple syn-cards to create hierarchy.
- */
-  'sharp'?: SynCard['sharp'];
+   * Draws the card with sharp edges.
+   * Can be used e.g.
+   * when nesting multiple syn-cards to create hierarchy.
+   */
+  sharp?: SynCard['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'),
+  ),
+);
 </script>
 
 <template>
-  <syn-card
-
-    v-bind="visibleProps"
-    ref="nativeElement"
-  >
-    <slot />
+  <syn-card v-bind="visibleProps" ref="nativeElement">
+    <slot></slot>
   </syn-card>
 </template>