@synergy-design-system/vue 2.7.2 → 2.8.0

package/src/components/SynVueDialog.vue

@@ -58,9 +58,13 @@
 import { computed, ref } from 'vue';
 import '@synergy-design-system/components/components/dialog/dialog.js';
 
-import type {
-  SynAfterHideEvent, SynAfterShowEvent, SynDialog, SynHideEvent, SynInitialFocusEvent, SynRequestCloseEvent, 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 { SynInitialFocusEvent } from '@synergy-design-system/components';
+import type { SynRequestCloseEvent } from '@synergy-design-system/components';
+import type { SynDialog } from '@synergy-design-system/components';
 
 // DOM Reference to the element
 const nativeElement = ref<SynDialog>();
@@ -76,7 +80,7 @@ const props = defineProps<{
 * You can toggle this attribute to show and hide the dialog, or you can
 use the `show()` and `hide()` methods and this attribute will reflect the dialog's open state.
  */
-  'open'?: SynDialog['open'];
+  open?: SynDialog['open'];
 
   /**
 * The dialog's label as displayed in the header.
@@ -84,59 +88,59 @@ use the `show()` and `hide()` methods and this attribute will reflect the dialog
 `no-header`, as it is required for proper accessibility.
 * If you need to display HTML, use the `label` slot instead.
  */
-  'label'?: SynDialog['label'];
+  label?: SynDialog['label'];
 
   /**
 * Disables the header.
 * This will also remove the default close button, so please ensure you provide an easy,
 accessible way for users to dismiss the dialog.
  */
-  'noHeader'?: SynDialog['noHeader'];
+  noHeader?: SynDialog['noHeader'];
 }>();
 
 // 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 dialog opens.
- */
+   * Emitted when the dialog opens.
+   */
   'syn-show': [e: SynShowEvent];
 
   /**
-* Emitted after the dialog opens and all animations are complete.
- */
+   * Emitted after the dialog opens and all animations are complete.
+   */
   'syn-after-show': [e: SynAfterShowEvent];
 
   /**
-* Emitted when the dialog closes.
- */
+   * Emitted when the dialog closes.
+   */
   'syn-hide': [e: SynHideEvent];
 
   /**
-* Emitted after the dialog closes and all animations are complete.
- */
+   * Emitted after the dialog closes and all animations are complete.
+   */
   'syn-after-hide': [e: SynAfterHideEvent];
 
   /**
-* Emitted when the dialog opens and is ready to receive focus.
-* Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.
- */
+   * Emitted when the dialog opens and is ready to receive focus.
+   * Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.
+   */
   'syn-initial-focus': [e: SynInitialFocusEvent];
 
   /**
-* Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape.
-* Calling `event.preventDefault()` will keep the dialog open.
-* Avoid using this unless closing the dialog will result in destructive behavior such as data loss.
- */
+   * Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape.
+   * Calling `event.preventDefault()` will keep the dialog open.
+   * Avoid using this unless closing the dialog will result in destructive behavior such as data loss.
+   */
   'syn-request-close': [e: SynRequestCloseEvent];
 }>();
 </script>
@@ -152,16 +156,14 @@ export type { SynRequestCloseEvent } from '@synergy-design-system/components';
 
 <template>
   <syn-dialog
-    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)"
-
     @syn-initial-focus="$emit('syn-initial-focus', $event)"
     @syn-request-close="$emit('syn-request-close', $event)"
-  >
-    <slot />
+    v-bind="visibleProps"
+    ref="nativeElement">
+    <slot></slot>
   </syn-dialog>
 </template>

package/src/components/SynVueDivider.vue

@@ -30,27 +30,22 @@ defineExpose({
 // Map attributes
 const props = defineProps<{
   /**
-* Draws the divider in a vertical orientation.
- */
-  'vertical'?: SynDivider['vertical'];
+   * Draws the divider in a vertical orientation.
+   */
+  vertical?: SynDivider['vertical'];
 }>();
 
 // 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-divider
-
-    v-bind="visibleProps"
-    ref="nativeElement"
-  />
+  <syn-divider v-bind="visibleProps" ref="nativeElement"> </syn-divider>
 </template>

package/src/components/SynVueDrawer.vue

@@ -65,9 +65,13 @@
 import { computed, ref } from 'vue';
 import '@synergy-design-system/components/components/drawer/drawer.js';
 
-import type {
-  SynAfterHideEvent, SynAfterShowEvent, SynDrawer, SynHideEvent, SynInitialFocusEvent, SynRequestCloseEvent, 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 { SynInitialFocusEvent } from '@synergy-design-system/components';
+import type { SynRequestCloseEvent } from '@synergy-design-system/components';
+import type { SynDrawer } from '@synergy-design-system/components';
 
 // DOM Reference to the element
 const nativeElement = ref<SynDrawer>();
@@ -83,7 +87,7 @@ const props = defineProps<{
 * You can toggle this attribute to show and hide the drawer, or you can
 use the `show()` and `hide()` methods and this attribute will reflect the drawer's open state.
  */
-  'open'?: SynDrawer['open'];
+  open?: SynDrawer['open'];
 
   /**
 * The drawer's label as displayed in the header.
@@ -91,71 +95,71 @@ use the `show()` and `hide()` methods and this attribute will reflect the drawer
 `no-header`, as it is required for proper accessibility.
 * If you need to display HTML, use the `label` slot instead.
  */
-  'label'?: SynDrawer['label'];
+  label?: SynDrawer['label'];
 
   /**
-* The direction from which the drawer will open.
- */
-  'placement'?: SynDrawer['placement'];
+   * The direction from which the drawer will open.
+   */
+  placement?: SynDrawer['placement'];
 
   /**
 * By default, the drawer slides out of its containing block (usually the viewport).
 * To make the drawer slide out of
 its parent element, set this attribute and add `position: relative` to the parent.
  */
-  'contained'?: SynDrawer['contained'];
+  contained?: SynDrawer['contained'];
 
   /**
 * Removes the header.
 * This will also remove the default close button, so please ensure you provide an easy,
 accessible way for users to dismiss the drawer.
  */
-  'noHeader'?: SynDrawer['noHeader'];
+  noHeader?: SynDrawer['noHeader'];
 }>();
 
 // 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 drawer opens.
- */
+   * Emitted when the drawer opens.
+   */
   'syn-show': [e: SynShowEvent];
 
   /**
-* Emitted after the drawer opens and all animations are complete.
- */
+   * Emitted after the drawer opens and all animations are complete.
+   */
   'syn-after-show': [e: SynAfterShowEvent];
 
   /**
-* Emitted when the drawer closes.
- */
+   * Emitted when the drawer closes.
+   */
   'syn-hide': [e: SynHideEvent];
 
   /**
-* Emitted after the drawer closes and all animations are complete.
- */
+   * Emitted after the drawer closes and all animations are complete.
+   */
   'syn-after-hide': [e: SynAfterHideEvent];
 
   /**
-* Emitted when the drawer opens and is ready to receive focus.
-* Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.
- */
+   * Emitted when the drawer opens and is ready to receive focus.
+   * Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.
+   */
   'syn-initial-focus': [e: SynInitialFocusEvent];
 
   /**
-* Emitted when the user attempts to close the drawer by clicking the close button, clicking the overlay, or pressing escape.
-* Calling `event.preventDefault()` will keep the drawer open.
-* Avoid using this unless closing the drawer will result in destructive behavior such as data loss.
- */
+   * Emitted when the user attempts to close the drawer by clicking the close button, clicking the overlay, or pressing escape.
+   * Calling `event.preventDefault()` will keep the drawer open.
+   * Avoid using this unless closing the drawer will result in destructive behavior such as data loss.
+   */
   'syn-request-close': [e: SynRequestCloseEvent];
 }>();
 </script>
@@ -171,16 +175,14 @@ export type { SynRequestCloseEvent } from '@synergy-design-system/components';
 
 <template>
   <syn-drawer
-    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)"
-
     @syn-initial-focus="$emit('syn-initial-focus', $event)"
     @syn-request-close="$emit('syn-request-close', $event)"
-  >
-    <slot />
+    v-bind="visibleProps"
+    ref="nativeElement">
+    <slot></slot>
   </syn-drawer>
 </template>

package/src/components/SynVueDropdown.vue

@@ -32,9 +32,11 @@
 import { computed, ref } from 'vue';
 import '@synergy-design-system/components/components/dropdown/dropdown.js';
 
-import type {
-  SynAfterHideEvent, SynAfterShowEvent, SynDropdown, 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 { SynDropdown } from '@synergy-design-system/components';
 
 // DOM Reference to the element
 const nativeElement = ref<SynDropdown>();
@@ -50,19 +52,19 @@ const props = defineProps<{
 * You can toggle this attribute to show and hide the dropdown, or you
 can use the `show()` and `hide()` methods and this attribute will reflect the dropdown's open state.
  */
-  'open'?: SynDropdown['open'];
+  open?: SynDropdown['open'];
 
   /**
 * The preferred placement of the dropdown panel.
 * Note that the actual placement may vary as needed to keep the panel
 inside of the viewport.
  */
-  'placement'?: SynDropdown['placement'];
+  placement?: SynDropdown['placement'];
 
   /**
-* Disables the dropdown so the panel will not open.
- */
-  'disabled'?: SynDropdown['disabled'];
+   * Disables the dropdown so the panel will not open.
+   */
+  disabled?: SynDropdown['disabled'];
 
   /**
 * By default, the dropdown is closed when an item is selected.
@@ -70,61 +72,61 @@ inside of the viewport.
 * Useful for
 dropdowns that allow for multiple interactions.
  */
-  'stayOpenOnSelect'?: SynDropdown['stayOpenOnSelect'];
+  stayOpenOnSelect?: SynDropdown['stayOpenOnSelect'];
 
   /**
-* The distance in pixels from which to offset the panel away from its trigger.
- */
-  'distance'?: SynDropdown['distance'];
+   * The distance in pixels from which to offset the panel away from its trigger.
+   */
+  distance?: SynDropdown['distance'];
 
   /**
-* The distance in pixels from which to offset the panel along its trigger.
- */
-  'skidding'?: SynDropdown['skidding'];
+   * The distance in pixels from which to offset the panel along its trigger.
+   */
+  skidding?: SynDropdown['skidding'];
 
   /**
 * Enable this option to prevent the panel from being clipped when the component is placed inside a container with
 `overflow: auto|scroll`.
 * Hoisting uses a fixed positioning strategy that works in many, but not all, scenarios.
  */
-  'hoist'?: SynDropdown['hoist'];
+  hoist?: SynDropdown['hoist'];
 
   /**
-* Syncs the popup width or height to that of the trigger element.
- */
-  'sync'?: SynDropdown['sync'];
+   * Syncs the popup width or height to that of the trigger element.
+   */
+  sync?: SynDropdown['sync'];
 }>();
 
 // 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 dropdown opens.
- */
+   * Emitted when the dropdown opens.
+   */
   'syn-show': [e: SynShowEvent];
 
   /**
-* Emitted after the dropdown opens and all animations are complete.
- */
+   * Emitted after the dropdown opens and all animations are complete.
+   */
   'syn-after-show': [e: SynAfterShowEvent];
 
   /**
-* Emitted when the dropdown closes.
- */
+   * Emitted when the dropdown closes.
+   */
   'syn-hide': [e: SynHideEvent];
 
   /**
-* Emitted after the dropdown closes and all animations are complete.
- */
+   * Emitted after the dropdown closes and all animations are complete.
+   */
   'syn-after-hide': [e: SynAfterHideEvent];
 }>();
 </script>
@@ -138,14 +140,12 @@ export type { SynAfterHideEvent } from '@synergy-design-system/components';
 
 <template>
   <syn-dropdown
-    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-dropdown>
 </template>