@synergy-design-system/vue 2.7.2 → 2.8.0

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

@@ -1,11 +1,13 @@
 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';
 export type { SynTabShowEvent } from '@synergy-design-system/components';
 export type { SynTabHideEvent } from '@synergy-design-system/components';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<{
     /**
-  * The placement of the tabs.
-   */
+     * 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.
@@ -14,17 +16,17 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
    */
     activation?: SynTabGroup["activation"];
     /**
-  * Disables the scroll arrows that appear when tabs overflow.
-   */
+     * Disables the scroll arrows that appear when tabs overflow.
+     */
     noScrollControls?: SynTabGroup["noScrollControls"];
     /**
-  * Draws the tab group as a contained element.
-   */
+     * 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
-   */
+     * Draws the tab group with edges instead of roundings.
+     * Takes only effect if used with the 'contained' property
+     */
     sharp?: SynTabGroup["sharp"];
 }>, {
     nativeElement: import("vue").Ref<SynTabGroup | undefined>;
@@ -33,8 +35,8 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     "syn-tab-hide": (e: SynTabHideEvent) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
     /**
-  * The placement of the tabs.
-   */
+     * 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.
@@ -43,17 +45,17 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
    */
     activation?: SynTabGroup["activation"];
     /**
-  * Disables the scroll arrows that appear when tabs overflow.
-   */
+     * Disables the scroll arrows that appear when tabs overflow.
+     */
     noScrollControls?: SynTabGroup["noScrollControls"];
     /**
-  * Draws the tab group as a contained element.
-   */
+     * 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
-   */
+     * Draws the tab group with edges instead of roundings.
+     * Takes only effect if used with the 'contained' property
+     */
     sharp?: SynTabGroup["sharp"];
 }>>> & {
     "onSyn-tab-show"?: ((e: SynTabShowEvent) => any) | undefined;

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

@@ -5,23 +5,23 @@ declare function __VLS_template(): {
 };
 declare const __VLS_component: import("vue").DefineComponent<__VLS_TypePropsToOption<{
     /**
-  * The tab panel's name.
-   */
+     * The tab panel's name.
+     */
     name?: SynTabPanel["name"];
     /**
-  * When true, the tab panel will be shown.
-   */
+     * When true, the tab panel will be shown.
+     */
     active?: SynTabPanel["active"];
 }>, {
     nativeElement: import("vue").Ref<SynTabPanel | undefined>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
     /**
-  * The tab panel's name.
-   */
+     * The tab panel's name.
+     */
     name?: SynTabPanel["name"];
     /**
-  * When true, the tab panel will be shown.
-   */
+     * When true, the tab panel will be shown.
+     */
     active?: SynTabPanel["active"];
 }>>>, {}, {}>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;

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

@@ -1,14 +1,15 @@
 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';
 export type { SynRemoveEvent } from '@synergy-design-system/components';
 declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<{
     /**
-  * The tag's size.
-   */
+     * The tag's size.
+     */
     size?: SynTag["size"];
     /**
-  * Makes the tag removable and shows a remove button.
-   */
+     * Makes the tag removable and shows a remove button.
+     */
     removable?: SynTag["removable"];
 }>, {
     nativeElement: import("vue").Ref<SynTag | undefined>;
@@ -16,12 +17,12 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     "syn-remove": (e: SynRemoveEvent) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
     /**
-  * The tag's size.
-   */
+     * The tag's size.
+     */
     size?: SynTag["size"];
     /**
-  * Makes the tag removable and shows a remove button.
-   */
+     * Makes the tag removable and shows a remove button.
+     */
     removable?: SynTag["removable"];
 }>>> & {
     "onSyn-remove"?: ((e: SynRemoveEvent) => any) | undefined;

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/dist/index.d.ts

@@ -7,6 +7,7 @@ export { default as SynVueButton } from "./components/SynVueButton.vue";
 export { default as SynVueButtonGroup } from "./components/SynVueButtonGroup.vue";
 export { default as SynVueCard } from "./components/SynVueCard.vue";
 export { default as SynVueCheckbox } from "./components/SynVueCheckbox.vue";
+export { default as SynVueCombobox } from "./components/SynVueCombobox.vue";
 export { default as SynVueDetails } from "./components/SynVueDetails.vue";
 export { default as SynVueDialog } from "./components/SynVueDialog.vue";
 export { default as SynVueDivider } from "./components/SynVueDivider.vue";

package/package.json

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

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>