@synergy-design-system/vue 2.7.1 → 2.7.3

package/dist/components/SynVueTextarea.vue.d.ts

@@ -1,5 +1,10 @@
 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';
 export type { SynBlurEvent } from '@synergy-design-system/components';
 export type { SynChangeEvent } from '@synergy-design-system/components';
 export type { SynFocusEvent } from '@synergy-design-system/components';
@@ -8,46 +13,46 @@ export type { SynInvalidEvent } from '@synergy-design-system/components';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<{
     title?: SynTextarea["title"];
     /**
-  * The name of the textarea, submitted as a name/value pair with form data.
-   */
+     * 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.
-   */
+     * The current value of the textarea, submitted as a name/value pair with form data.
+     */
     value?: SynTextarea["value"];
     /**
-  * The textarea's size.
-   */
+     * The textarea's size.
+     */
     size?: SynTextarea["size"];
     /**
-  * The textarea's label.
-  * If you need to display HTML, use the `label` slot instead.
-   */
+     * 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.
-   */
+     * 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 text to show as a hint when the input is empty.
+     */
     placeholder?: SynTextarea["placeholder"];
     /**
-  * The number of rows to display by default.
-   */
+     * The number of rows to display by default.
+     */
     rows?: SynTextarea["rows"];
     /**
-  * Controls how the textarea can be resized.
-   */
+     * Controls how the textarea can be resized.
+     */
     resize?: SynTextarea["resize"];
     /**
-  * Disables the textarea.
-   */
+     * Disables the textarea.
+     */
     disabled?: SynTextarea["disabled"];
     /**
-  * Makes the textarea readonly.
-   */
+     * Makes the textarea readonly.
+     */
     readonly?: SynTextarea["readonly"];
     /**
   * By default, form controls are associated with the nearest containing `<form>` element.
@@ -58,24 +63,24 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
    */
     form?: SynTextarea["form"];
     /**
-  * Makes the textarea a required field.
-   */
+     * Makes the textarea a required field.
+     */
     required?: SynTextarea["required"];
     /**
-  * The minimum length of input that will be considered valid.
-   */
+     * The minimum length of input that will be considered valid.
+     */
     minlength?: SynTextarea["minlength"];
     /**
-  * The maximum length of input that will be considered valid.
-   */
+     * 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.
-   */
+     * 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.
-   */
+     * 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.
@@ -84,16 +89,16 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
    */
     autocomplete?: SynTextarea["autocomplete"];
     /**
-  * Indicates that the input should receive focus on page load.
-   */
+     * 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.
-   */
+     * Used to customize the label or icon of the Enter key on virtual keyboards.
+     */
     enterkeyhint?: SynTextarea["enterkeyhint"];
     /**
-  * Enables spell checking on the textarea.
-   */
+     * 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
@@ -101,8 +106,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
    */
     inputmode?: SynTextarea["inputmode"];
     /**
-  * Support for two way data binding
-   */
+     * Support for two way data binding
+     */
     modelValue?: SynTextarea["value"];
 }>, {
     nativeElement: import("vue").Ref<SynTextarea | undefined>;
@@ -116,46 +121,46 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
     title?: SynTextarea["title"];
     /**
-  * The name of the textarea, submitted as a name/value pair with form data.
-   */
+     * 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.
-   */
+     * The current value of the textarea, submitted as a name/value pair with form data.
+     */
     value?: SynTextarea["value"];
     /**
-  * The textarea's size.
-   */
+     * The textarea's size.
+     */
     size?: SynTextarea["size"];
     /**
-  * The textarea's label.
-  * If you need to display HTML, use the `label` slot instead.
-   */
+     * 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.
-   */
+     * 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 text to show as a hint when the input is empty.
+     */
     placeholder?: SynTextarea["placeholder"];
     /**
-  * The number of rows to display by default.
-   */
+     * The number of rows to display by default.
+     */
     rows?: SynTextarea["rows"];
     /**
-  * Controls how the textarea can be resized.
-   */
+     * Controls how the textarea can be resized.
+     */
     resize?: SynTextarea["resize"];
     /**
-  * Disables the textarea.
-   */
+     * Disables the textarea.
+     */
     disabled?: SynTextarea["disabled"];
     /**
-  * Makes the textarea readonly.
-   */
+     * Makes the textarea readonly.
+     */
     readonly?: SynTextarea["readonly"];
     /**
   * By default, form controls are associated with the nearest containing `<form>` element.
@@ -166,24 +171,24 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
    */
     form?: SynTextarea["form"];
     /**
-  * Makes the textarea a required field.
-   */
+     * Makes the textarea a required field.
+     */
     required?: SynTextarea["required"];
     /**
-  * The minimum length of input that will be considered valid.
-   */
+     * The minimum length of input that will be considered valid.
+     */
     minlength?: SynTextarea["minlength"];
     /**
-  * The maximum length of input that will be considered valid.
-   */
+     * 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.
-   */
+     * 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.
-   */
+     * 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.
@@ -192,16 +197,16 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
    */
     autocomplete?: SynTextarea["autocomplete"];
     /**
-  * Indicates that the input should receive focus on page load.
-   */
+     * 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.
-   */
+     * Used to customize the label or icon of the Enter key on virtual keyboards.
+     */
     enterkeyhint?: SynTextarea["enterkeyhint"];
     /**
-  * Enables spell checking on the textarea.
-   */
+     * 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
@@ -209,8 +214,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
    */
     inputmode?: SynTextarea["inputmode"];
     /**
-  * Support for two way data binding
-   */
+     * Support for two way data binding
+     */
     modelValue?: SynTextarea["value"];
 }>>> & {
     "onSyn-blur"?: ((e: SynBlurEvent) => any) | undefined;

package/dist/components/SynVueTooltip.vue.d.ts

@@ -1,14 +1,18 @@
 import '@synergy-design-system/components/components/tooltip/tooltip.js';
-import type { SynAfterHideEvent, SynAfterShowEvent, SynHideEvent, SynShowEvent, SynTooltip } 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 { SynTooltip } from '@synergy-design-system/components';
 export type { SynShowEvent } from '@synergy-design-system/components';
 export type { SynAfterShowEvent } from '@synergy-design-system/components';
 export type { SynHideEvent } from '@synergy-design-system/components';
 export type { SynAfterHideEvent } from '@synergy-design-system/components';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<{
     /**
-  * The tooltip's content.
-  * If you need to display HTML, use the `content` slot instead.
-   */
+     * The tooltip's content.
+     * If you need to display HTML, use the `content` slot instead.
+     */
     content?: SynTooltip["content"];
     /**
   * The preferred placement of the tooltip.
@@ -17,21 +21,21 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
    */
     placement?: SynTooltip["placement"];
     /**
-  * Disables the tooltip so it won't show when triggered.
-   */
+     * Disables the tooltip so it won't show when triggered.
+     */
     disabled?: SynTooltip["disabled"];
     /**
-  * The distance in pixels from which to offset the tooltip away from its target.
-   */
+     * The distance in pixels from which to offset the tooltip away from its target.
+     */
     distance?: SynTooltip["distance"];
     /**
-  * Indicates whether or not the tooltip is open.
-  * You can use this in lieu of the show/hide methods.
-   */
+     * Indicates whether or not the tooltip is open.
+     * You can use this in lieu of the show/hide methods.
+     */
     open?: SynTooltip["open"];
     /**
-  * The distance in pixels from which to offset the tooltip along its target.
-   */
+     * The distance in pixels from which to offset the tooltip along its target.
+     */
     skidding?: SynTooltip["skidding"];
     /**
   * Controls how the tooltip is activated.
@@ -58,9 +62,9 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     "syn-after-hide": (e: SynAfterHideEvent) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
     /**
-  * The tooltip's content.
-  * If you need to display HTML, use the `content` slot instead.
-   */
+     * The tooltip's content.
+     * If you need to display HTML, use the `content` slot instead.
+     */
     content?: SynTooltip["content"];
     /**
   * The preferred placement of the tooltip.
@@ -69,21 +73,21 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
    */
     placement?: SynTooltip["placement"];
     /**
-  * Disables the tooltip so it won't show when triggered.
-   */
+     * Disables the tooltip so it won't show when triggered.
+     */
     disabled?: SynTooltip["disabled"];
     /**
-  * The distance in pixels from which to offset the tooltip away from its target.
-   */
+     * The distance in pixels from which to offset the tooltip away from its target.
+     */
     distance?: SynTooltip["distance"];
     /**
-  * Indicates whether or not the tooltip is open.
-  * You can use this in lieu of the show/hide methods.
-   */
+     * Indicates whether or not the tooltip is open.
+     * You can use this in lieu of the show/hide methods.
+     */
     open?: SynTooltip["open"];
     /**
-  * The distance in pixels from which to offset the tooltip along its target.
-   */
+     * The distance in pixels from which to offset the tooltip along its target.
+     */
     skidding?: SynTooltip["skidding"];
     /**
   * Controls how the tooltip is activated.

package/package.json

@@ -4,7 +4,7 @@
     "url": "https://www.sick.com"
   },
   "dependencies": {
-    "@synergy-design-system/components": "^2.7.1"
+    "@synergy-design-system/components": "^2.7.3"
   },
   "description": "Vue3 wrappers for the Synergy Design System",
   "exports": {
@@ -40,7 +40,7 @@
     "directory": "packages/vue"
   },
   "type": "module",
-  "version": "2.7.1",
+  "version": "2.7.3",
   "devDependencies": {
     "@vue/tsconfig": "^0.5.1",
     "vue": "^3.4.38"

package/src/components/SynVueAccordion.vue

@@ -31,39 +31,34 @@ defineExpose({
 // Map attributes
 const props = defineProps<{
   /**
-* Indicates whether or not multiple `<syn-detail>` elements can be open at the same time.
- */
-  'closeOthers'?: SynAccordion['closeOthers'];
+   * Indicates whether or not multiple `<syn-detail>` elements can be open at the same time.
+   */
+  closeOthers?: SynAccordion['closeOthers'];
 
   /**
-* Draws the accordion and the slotted `<syn-details>` as contained elements.
- */
-  'contained'?: SynAccordion['contained'];
+   * Draws the accordion and the slotted `<syn-details>` as contained elements.
+   */
+  contained?: SynAccordion['contained'];
 
   /**
-* The size that should be applied to all slotted `<syn-details>` elements
- */
-  'size'?: SynAccordion['size'];
+   * The size that should be applied to all slotted `<syn-details>` elements
+   */
+  size?: SynAccordion['size'];
 }>();
 
 // 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-accordion
-
-    v-bind="visibleProps"
-    ref="nativeElement"
-  >
-    <slot />
+  <syn-accordion v-bind="visibleProps" ref="nativeElement">
+    <slot></slot>
   </syn-accordion>
 </template>

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>