@synergy-design-system/vue 2.7.2 → 2.8.0

package/src/components/SynVueInput.vue

@@ -49,9 +49,13 @@
 import { computed, ref } from 'vue';
 import '@synergy-design-system/components/components/input/input.js';
 
-import type {
-  SynBlurEvent, SynChangeEvent, SynClearEvent, SynFocusEvent, SynInput, SynInputEvent, SynInvalidEvent,
-} from '@synergy-design-system/components';
+import type { SynBlurEvent } from '@synergy-design-system/components';
+import type { SynChangeEvent } from '@synergy-design-system/components';
+import type { SynClearEvent } 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 { SynInput } from '@synergy-design-system/components';
 
 // DOM Reference to the element
 const nativeElement = ref<SynInput>();
@@ -62,7 +66,7 @@ defineExpose({
 
 // Map attributes
 const props = defineProps<{
-  'title'?: SynInput['title'];
+  title?: SynInput['title'];
 
   /**
 * The type of input.
@@ -70,71 +74,71 @@ const props = defineProps<{
 * Defaults
 to `text`.
  */
-  'type'?: SynInput['type'];
+  type?: SynInput['type'];
 
   /**
-* The name of the input, submitted as a name/value pair with form data.
- */
-  'name'?: SynInput['name'];
+   * The name of the input, submitted as a name/value pair with form data.
+   */
+  name?: SynInput['name'];
 
   /**
-* The current value of the input, submitted as a name/value pair with form data.
- */
-  'value'?: SynInput['value'];
+   * The current value of the input, submitted as a name/value pair with form data.
+   */
+  value?: SynInput['value'];
 
   /**
-* The input's size.
- */
-  'size'?: SynInput['size'];
+   * The input's size.
+   */
+  size?: SynInput['size'];
 
   /**
-* The input's label.
-* If you need to display HTML, use the `label` slot instead.
- */
-  'label'?: SynInput['label'];
+   * The input's label.
+   * If you need to display HTML, use the `label` slot instead.
+   */
+  label?: SynInput['label'];
 
   /**
-* The input's help text.
-* If you need to display HTML, use the `help-text` slot instead.
- */
-  'helpText'?: SynInput['helpText'];
+   * The input's help text.
+   * If you need to display HTML, use the `help-text` slot instead.
+   */
+  helpText?: SynInput['helpText'];
 
   /**
-* Adds a clear button when the input is not empty.
- */
-  'clearable'?: SynInput['clearable'];
+   * Adds a clear button when the input is not empty.
+   */
+  clearable?: SynInput['clearable'];
 
   /**
-* Disables the input.
- */
-  'disabled'?: SynInput['disabled'];
+   * Disables the input.
+   */
+  disabled?: SynInput['disabled'];
 
   /**
-* Placeholder text to show as a hint when the input is empty.
- */
-  'placeholder'?: SynInput['placeholder'];
+   * Placeholder text to show as a hint when the input is empty.
+   */
+  placeholder?: SynInput['placeholder'];
 
   /**
-* Makes the input readonly.
- */
-  'readonly'?: SynInput['readonly'];
+   * Makes the input readonly.
+   */
+  readonly?: SynInput['readonly'];
 
   /**
-* Adds a button to toggle the password's visibility.
-* Only applies to password types.
- */
-  'passwordToggle'?: SynInput['passwordToggle'];
+   * Adds a button to toggle the password's visibility.
+   * Only applies to password types.
+   */
+  passwordToggle?: SynInput['passwordToggle'];
 
   /**
-* Determines whether or not the password is currently visible.
-* Only applies to password input types.
- */
-  'passwordVisible'?: SynInput['passwordVisible'];
+   * Determines whether or not the password is currently visible.
+   * Only applies to password input types.
+   */
+  passwordVisible?: SynInput['passwordVisible'];
 
   /**
-* Hides the increment/decrement spin buttons for number inputs.
- */
-  'noSpinButtons'?: SynInput['noSpinButtons'];
+   * Hides the increment/decrement spin buttons for number inputs.
+   */
+  noSpinButtons?: SynInput['noSpinButtons'];
 
   /**
 * By default, form controls are associated with the nearest containing `<form>` element.
@@ -143,88 +147,88 @@ 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'?: SynInput['form'];
+  form?: SynInput['form'];
 
   /**
-* Makes the input a required field.
- */
-  'required'?: SynInput['required'];
+   * Makes the input a required field.
+   */
+  required?: SynInput['required'];
 
   /**
-* A regular expression pattern to validate input against.
- */
-  'pattern'?: SynInput['pattern'];
+   * A regular expression pattern to validate input against.
+   */
+  pattern?: SynInput['pattern'];
 
   /**
-* The minimum length of input that will be considered valid.
- */
-  'minlength'?: SynInput['minlength'];
+   * The minimum length of input that will be considered valid.
+   */
+  minlength?: SynInput['minlength'];
 
   /**
-* The maximum length of input that will be considered valid.
- */
-  'maxlength'?: SynInput['maxlength'];
+   * The maximum length of input that will be considered valid.
+   */
+  maxlength?: SynInput['maxlength'];
 
   /**
-* The input's minimum value.
-* Only applies to date and number input types.
- */
-  'min'?: SynInput['min'];
+   * The input's minimum value.
+   * Only applies to date and number input types.
+   */
+  min?: SynInput['min'];
 
   /**
-* The input's maximum value.
-* Only applies to date and number input types.
- */
-  'max'?: SynInput['max'];
+   * The input's maximum value.
+   * Only applies to date and number input types.
+   */
+  max?: SynInput['max'];
 
   /**
 * Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is
 implied, allowing any numeric value.
 * Only applies to date and number input types.
  */
-  'step'?: SynInput['step'];
+  step?: SynInput['step'];
 
   /**
-* Controls whether and how text input is automatically capitalized as it is entered by the user.
- */
-  'autocapitalize'?: SynInput['autocapitalize'];
+   * Controls whether and how text input is automatically capitalized as it is entered by the user.
+   */
+  autocapitalize?: SynInput['autocapitalize'];
 
   /**
-* Indicates whether the browser's autocorrect feature is on or off.
- */
-  'autocorrect'?: SynInput['autocorrect'];
+   * Indicates whether the browser's autocorrect feature is on or off.
+   */
+  autocorrect?: SynInput['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'?: SynInput['autocomplete'];
+  autocomplete?: SynInput['autocomplete'];
 
   /**
-* Indicates that the input should receive focus on page load.
- */
-  'autofocus'?: SynInput['autofocus'];
+   * Indicates that the input should receive focus on page load.
+   */
+  autofocus?: SynInput['autofocus'];
 
   /**
-* Used to customize the label or icon of the Enter key on virtual keyboards.
- */
-  'enterkeyhint'?: SynInput['enterkeyhint'];
+   * Used to customize the label or icon of the Enter key on virtual keyboards.
+   */
+  enterkeyhint?: SynInput['enterkeyhint'];
 
   /**
-* Enables spell checking on the input.
- */
-  'spellcheck'?: SynInput['spellcheck'];
+   * Enables spell checking on the input.
+   */
+  spellcheck?: SynInput['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'?: SynInput['inputmode'];
+  inputmode?: SynInput['inputmode'];
 
   /**
-* Support for two way data binding
- */
+   * Support for two way data binding
+   */
   modelValue?: SynInput['value'];
 }>();
 
@@ -232,47 +236,47 @@ 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 clear button is activated.
- */
+   * Emitted when the clear button is activated.
+   */
   'syn-clear': [e: SynClearEvent];
 
   /**
-* 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: SynInput['value']];
 }>();
 </script>
@@ -288,16 +292,24 @@ export type { SynInvalidEvent } from '@synergy-design-system/components';
 
 <template>
   <syn-input
-    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-clear="$emit('syn-clear', $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-input>
 </template>

package/src/components/SynVueMenu.vue

@@ -18,7 +18,8 @@
 import { computed, ref } from 'vue';
 import '@synergy-design-system/components/components/menu/menu.js';
 
-import type { SynMenu, SynSelectEvent } from '@synergy-design-system/components';
+import type { SynSelectEvent } from '@synergy-design-system/components';
+import type { SynMenu } from '@synergy-design-system/components';
 
 // DOM Reference to the element
 const nativeElement = ref<SynMenu>();
@@ -30,8 +31,8 @@ defineExpose({
 // Map events
 defineEmits<{
   /**
-* Emitted when a menu item is selected.
- */
+   * Emitted when a menu item is selected.
+   */
   'syn-select': [e: SynSelectEvent];
 }>();
 </script>
@@ -41,11 +42,7 @@ export type { SynSelectEvent } from '@synergy-design-system/components';
 </script>
 
 <template>
-  <syn-menu
-    ref="nativeElement"
-
-    @syn-select="$emit('syn-select', $event)"
-  >
-    <slot />
+  <syn-menu @syn-select="$emit('syn-select', $event)" ref="nativeElement">
+    <slot></slot>
   </syn-menu>
 </template>

package/src/components/SynVueMenuItem.vue

@@ -46,51 +46,46 @@ defineExpose({
 // Map attributes
 const props = defineProps<{
   /**
-* The type of menu item to render.
-* To use `checked`, this value must be set to `checkbox`.
- */
-  'type'?: SynMenuItem['type'];
+   * The type of menu item to render.
+   * To use `checked`, this value must be set to `checkbox`.
+   */
+  type?: SynMenuItem['type'];
 
   /**
-* Draws the item in a checked state.
- */
-  'checked'?: SynMenuItem['checked'];
+   * Draws the item in a checked state.
+   */
+  checked?: SynMenuItem['checked'];
 
   /**
-* A unique value to store in the menu item.
-* This can be used as a way to identify menu items when selected.
- */
-  'value'?: SynMenuItem['value'];
+   * A unique value to store in the menu item.
+   * This can be used as a way to identify menu items when selected.
+   */
+  value?: SynMenuItem['value'];
 
   /**
-* Draws the menu item in a loading state.
- */
-  'loading'?: SynMenuItem['loading'];
+   * Draws the menu item in a loading state.
+   */
+  loading?: SynMenuItem['loading'];
 
   /**
-* Draws the menu item in a disabled state, preventing selection.
- */
-  'disabled'?: SynMenuItem['disabled'];
+   * Draws the menu item in a disabled state, preventing selection.
+   */
+  disabled?: SynMenuItem['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'),
+  ),
+);
 </script>
 
 <template>
-  <syn-menu-item
-
-    v-bind="visibleProps"
-    ref="nativeElement"
-  >
-    <slot />
+  <syn-menu-item v-bind="visibleProps" ref="nativeElement">
+    <slot></slot>
   </syn-menu-item>
 </template>

package/src/components/SynVueMenuLabel.vue

@@ -32,14 +32,10 @@ const nativeElement = ref<SynMenuLabel>();
 defineExpose({
   nativeElement,
 });
-
 </script>
 
 <template>
-  <syn-menu-label
-
-    ref="nativeElement"
-  >
-    <slot />
+  <syn-menu-label ref="nativeElement">
+    <slot></slot>
   </syn-menu-label>
 </template>

package/src/components/SynVueNavItem.vue

@@ -53,9 +53,11 @@
 import { computed, ref } from 'vue';
 import '@synergy-design-system/components/components/nav-item/nav-item.js';
 
-import type {
-  SynBlurEvent, SynFocusEvent, SynHideEvent, SynNavItem, SynShowEvent,
-} from '@synergy-design-system/components';
+import type { SynShowEvent } from '@synergy-design-system/components';
+import type { SynHideEvent } from '@synergy-design-system/components';
+import type { SynBlurEvent } from '@synergy-design-system/components';
+import type { SynFocusEvent } from '@synergy-design-system/components';
+import type { SynNavItem } from '@synergy-design-system/components';
 
 // DOM Reference to the element
 const nativeElement = ref<SynNavItem>();
@@ -73,69 +75,69 @@ If provided, the navigation item will use an anchor tag otherwise it will use a
 If the 'children' slot is provided, the navigation item will ignore the 'href' and use
 accordion behavior.
  */
-  'href'?: SynNavItem['href'];
+  href?: SynNavItem['href'];
 
-  'current'?: SynNavItem['current'];
+  current?: SynNavItem['current'];
 
   /**
-* Disables the navigation item.
- */
-  'disabled'?: SynNavItem['disabled'];
+   * Disables the navigation item.
+   */
+  disabled?: SynNavItem['disabled'];
 
   /**
-* The navigation item's orientation.
- */
-  'horizontal'?: SynNavItem['horizontal'];
+   * The navigation item's orientation.
+   */
+  horizontal?: SynNavItem['horizontal'];
 
   /**
 * Appends a chevron to the right side of a navigation item.
 Only used if `horizontal` is false.
  */
-  'chevron'?: SynNavItem['chevron'];
+  chevron?: SynNavItem['chevron'];
 
   /**
 * Reflects HTML details element state and allows control from parent.
 Only used if `horizontal` is false and `children` is defined.
  */
-  'open'?: SynNavItem['open'];
+  open?: SynNavItem['open'];
 
   /**
 * Toggle to true to show a divider above the element.
 Only available when horizontal is false.
  */
-  'divider'?: SynNavItem['divider'];
+  divider?: SynNavItem['divider'];
 }>();
 
 // 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 navigation item: - has children, - and is clicked while HTML details are hidden.
- */
+   * Emitted when the navigation item: - has children, - and is clicked while HTML details are hidden.
+   */
   'syn-show': [e: SynShowEvent];
 
   /**
-* Emitted when the navigation item: - has children, - and is clicked while HTML details are shown.
- */
+   * Emitted when the navigation item: - has children, - and is clicked while HTML details are shown.
+   */
   'syn-hide': [e: SynHideEvent];
 
   /**
-* 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];
 }>();
 </script>
@@ -149,14 +151,12 @@ export type { SynFocusEvent } from '@synergy-design-system/components';
 
 <template>
   <syn-nav-item
-    v-bind="visibleProps"
-    ref="nativeElement"
     @syn-show="$emit('syn-show', $event)"
     @syn-hide="$emit('syn-hide', $event)"
-
     @syn-blur="$emit('syn-blur', $event)"
     @syn-focus="$emit('syn-focus', $event)"
-  >
-    <slot />
+    v-bind="visibleProps"
+    ref="nativeElement">
+    <slot></slot>
   </syn-nav-item>
 </template>

package/src/components/SynVueOptgroup.vue

@@ -42,35 +42,30 @@ defineExpose({
 // Map attributes
 const props = defineProps<{
   /**
-* Disables all options in the optgroup.
- */
-  'disabled'?: SynOptgroup['disabled'];
+   * Disables all options in the optgroup.
+   */
+  disabled?: SynOptgroup['disabled'];
 
   /**
-* The optgroups label.
-* If you need to display HTML, use the `label` slot instead.
- */
-  'label'?: SynOptgroup['label'];
+   * The optgroups label.
+   * If you need to display HTML, use the `label` slot instead.
+   */
+  label?: SynOptgroup['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-optgroup
-
-    v-bind="visibleProps"
-    ref="nativeElement"
-  >
-    <slot />
+  <syn-optgroup v-bind="visibleProps" ref="nativeElement">
+    <slot></slot>
   </syn-optgroup>
 </template>