@synergy-design-system/vue 2.2.1 → 2.3.0

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

@@ -0,0 +1,49 @@
+import '@synergy-design-system/components/components/accordion/accordion.js';
+import type { SynAccordion } from '@synergy-design-system/components';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<{
+    /**
+  * Indicates whether or not multiple `<syn-detail>` elements can be open at the same time.
+   */
+    closeOthers?: boolean | undefined;
+    /**
+  * Draws the accordion and the slotted `<syn-details>` as contained elements.
+   */
+    contained?: boolean | undefined;
+    /**
+  * The size that should be applied to all slotted `<syn-details>` elements
+   */
+    size?: "medium" | "large" | undefined;
+}>, {
+    nativeElement: import("vue").Ref<SynAccordion | undefined>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
+    /**
+  * Indicates whether or not multiple `<syn-detail>` elements can be open at the same time.
+   */
+    closeOthers?: boolean | undefined;
+    /**
+  * Draws the accordion and the slotted `<syn-details>` as contained elements.
+   */
+    contained?: boolean | undefined;
+    /**
+  * The size that should be applied to all slotted `<syn-details>` elements
+   */
+    size?: "medium" | "large" | undefined;
+}>>>, {}, {}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

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

@@ -68,7 +68,6 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     default?(_: {}): any;
 }>;
 export default _default;
-
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {
         $slots: S;

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

@@ -12,7 +12,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
   * The button's size.
    */
-    size?: "small" | "medium" | "large" | undefined;
+    size?: "medium" | "large" | "small" | undefined;
     /**
   * Draws the button with a caret.
   * Used to indicate that the button triggers a dropdown menu or similar behavior.
@@ -110,7 +110,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
   * The button's size.
    */
-    size?: "small" | "medium" | "large" | undefined;
+    size?: "medium" | "large" | "small" | undefined;
     /**
   * Draws the button with a caret.
   * Used to indicate that the button triggers a dropdown menu or similar behavior.

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

@@ -18,7 +18,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
   * The checkbox's size.
    */
-    size?: "small" | "medium" | "large" | undefined;
+    size?: "medium" | "large" | "small" | undefined;
     /**
   * Disables the checkbox.
    */
@@ -76,7 +76,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
   * The checkbox's size.
    */
-    size?: "small" | "medium" | "large" | undefined;
+    size?: "medium" | "large" | "small" | undefined;
     /**
   * Disables the checkbox.
    */

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

@@ -0,0 +1,84 @@
+import '@synergy-design-system/components/components/details/details.js';
+import type { SynAfterHideEvent, SynAfterShowEvent, SynDetails, SynHideEvent, SynShowEvent } 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<{
+    /**
+  * Indicates whether or not the details is open.
+  * You can toggle this attribute to show and hide the details, or you
+  can use the `show()` and `hide()` methods and this attribute will reflect the details' open state.
+   */
+    open?: boolean | undefined;
+    /**
+  * The summary to show in the header.
+  * If you need to display HTML, use the `summary` slot instead.
+   */
+    summary?: string | undefined;
+    /**
+  * Disables the details so it can't be toggled.
+   */
+    disabled?: boolean | undefined;
+    /**
+  * Draws the details as contained element.
+   */
+    contained?: boolean | undefined;
+    /**
+  * The details's size.
+   */
+    size?: "medium" | "large" | undefined;
+}>, {
+    nativeElement: import("vue").Ref<SynDetails | undefined>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "syn-show": (e: SynShowEvent) => void;
+    "syn-after-show": (e: SynAfterShowEvent) => void;
+    "syn-hide": (e: SynHideEvent) => void;
+    "syn-after-hide": (e: SynAfterHideEvent) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
+    /**
+  * Indicates whether or not the details is open.
+  * You can toggle this attribute to show and hide the details, or you
+  can use the `show()` and `hide()` methods and this attribute will reflect the details' open state.
+   */
+    open?: boolean | undefined;
+    /**
+  * The summary to show in the header.
+  * If you need to display HTML, use the `summary` slot instead.
+   */
+    summary?: string | undefined;
+    /**
+  * Disables the details so it can't be toggled.
+   */
+    disabled?: boolean | undefined;
+    /**
+  * Draws the details as contained element.
+   */
+    contained?: boolean | undefined;
+    /**
+  * The details's size.
+   */
+    size?: "medium" | "large" | undefined;
+}>>> & {
+    "onSyn-show"?: ((e: SynShowEvent) => any) | undefined;
+    "onSyn-after-show"?: ((e: SynAfterShowEvent) => any) | undefined;
+    "onSyn-hide"?: ((e: SynHideEvent) => any) | undefined;
+    "onSyn-after-hide"?: ((e: SynAfterHideEvent) => any) | undefined;
+}, {}, {}>, {
+    default?(_: {}): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToOption<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};

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

@@ -41,7 +41,7 @@ declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<{
     /**
   * The icon button's size.
    */
-    size?: "small" | "medium" | "large" | "inherit" | undefined;
+    size?: "medium" | "large" | "small" | "inherit" | undefined;
     /**
   * The color of the icon button.
   The default "currentColor" makes it possible to easily style the icon button from outside without any CSS variables.
@@ -95,7 +95,7 @@ declare const _default: import("vue").DefineComponent<__VLS_TypePropsToOption<{
     /**
   * The icon button's size.
    */
-    size?: "small" | "medium" | "large" | "inherit" | undefined;
+    size?: "medium" | "large" | "small" | "inherit" | undefined;
     /**
   * The color of the icon button.
   The default "currentColor" makes it possible to easily style the icon button from outside without any CSS variables.

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

@@ -26,7 +26,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
   * The input's size.
    */
-    size?: "small" | "medium" | "large" | undefined;
+    size?: "medium" | "large" | "small" | undefined;
     /**
   * The input's label.
   * If you need to display HTML, use the `label` slot instead.
@@ -172,7 +172,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
   * The input's size.
    */
-    size?: "small" | "medium" | "large" | undefined;
+    size?: "medium" | "large" | "small" | undefined;
     /**
   * The input's label.
   * If you need to display HTML, use the `label` slot instead.

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

@@ -13,7 +13,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
   * When used inside a radio group, the size will be determined by the radio group's size so this
   attribute can typically be omitted.
    */
-    size?: "small" | "medium" | "large" | undefined;
+    size?: "medium" | "large" | "small" | undefined;
     /**
   * Disables the radio.
    */
@@ -34,7 +34,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
   * When used inside a radio group, the size will be determined by the radio group's size so this
   attribute can typically be omitted.
    */
-    size?: "small" | "medium" | "large" | undefined;
+    size?: "medium" | "large" | "small" | undefined;
     /**
   * Disables the radio.
    */

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

@@ -17,7 +17,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
   * When used inside a radio group, the size will be determined by the radio group's size so
   this attribute can typically be omitted.
    */
-    size?: "small" | "medium" | "large" | undefined;
+    size?: "medium" | "large" | "small" | undefined;
     /**
   * Draws a pill-style radio button with rounded edges.
    */
@@ -42,7 +42,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
   * When used inside a radio group, the size will be determined by the radio group's size so
   this attribute can typically be omitted.
    */
-    size?: "small" | "medium" | "large" | undefined;
+    size?: "medium" | "large" | "small" | undefined;
     /**
   * Draws a pill-style radio button with rounded edges.
    */

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

@@ -28,7 +28,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
   * The radio group's size.
   * This size will be applied to all child radios and radio buttons.
    */
-    size?: "small" | "medium" | "large" | undefined;
+    size?: "medium" | "large" | "small" | undefined;
     /**
   * By default, form controls are associated with the nearest containing `<form>` element.
   * This attribute allows you
@@ -77,7 +77,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
   * The radio group's size.
   * This size will be applied to all child radios and radio buttons.
    */
-    size?: "small" | "medium" | "large" | undefined;
+    size?: "medium" | "large" | "small" | undefined;
     /**
   * By default, form controls are associated with the nearest containing `<form>` element.
   * This attribute allows you

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

@@ -26,7 +26,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
   * The select's size.
    */
-    size?: "small" | "medium" | "large" | undefined;
+    size?: "medium" | "large" | "small" | undefined;
     /**
   * Placeholder text to show as a hint when the select is empty.
    */
@@ -132,7 +132,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
   * The select's size.
    */
-    size?: "small" | "medium" | "large" | undefined;
+    size?: "medium" | "large" | "small" | undefined;
     /**
   * Placeholder text to show as a hint when the select is empty.
    */

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

@@ -18,7 +18,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
   * The switch's size.
    */
-    size?: "small" | "medium" | "large" | undefined;
+    size?: "medium" | "large" | "small" | undefined;
     /**
   * Disables the switch.
    */
@@ -70,7 +70,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
   * The switch's size.
    */
-    size?: "small" | "medium" | "large" | undefined;
+    size?: "medium" | "large" | "small" | undefined;
     /**
   * Disables the switch.
    */

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

@@ -5,7 +5,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
   * The tag's size.
    */
-    size?: "small" | "medium" | "large" | undefined;
+    size?: "medium" | "large" | "small" | undefined;
     /**
   * Makes the tag removable and shows a remove button.
    */
@@ -18,7 +18,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
   * The tag's size.
    */
-    size?: "small" | "medium" | "large" | undefined;
+    size?: "medium" | "large" | "small" | undefined;
     /**
   * Makes the tag removable and shows a remove button.
    */

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

@@ -18,7 +18,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
   * The textarea's size.
    */
-    size?: "small" | "medium" | "large" | undefined;
+    size?: "medium" | "large" | "small" | undefined;
     /**
   * The textarea's label.
   * If you need to display HTML, use the `label` slot instead.
@@ -126,7 +126,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     /**
   * The textarea's size.
    */
-    size?: "small" | "medium" | "large" | undefined;
+    size?: "medium" | "large" | "small" | undefined;
     /**
   * The textarea's label.
   * If you need to display HTML, use the `label` slot instead.

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export { default as SynVueAccordion } from "./components/SynVueAccordion.vue";
 export { default as SynVueAlert } from "./components/SynVueAlert.vue";
 export { default as SynVueBadge } from "./components/SynVueBadge.vue";
 export { default as SynVueBreadcrumb } from "./components/SynVueBreadcrumb.vue";
@@ -6,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 SynVueDetails } from "./components/SynVueDetails.vue";
 export { default as SynVueDialog } from "./components/SynVueDialog.vue";
 export { default as SynVueDivider } from "./components/SynVueDivider.vue";
 export { default as SynVueDrawer } from "./components/SynVueDrawer.vue";

package/package.json

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

package/src/components/SynVueAccordion.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+// ---------------------------------------------------------------------
+// 🔒 AUTOGENERATED @synergy-design-system/vue wrappers for @synergy-design-system/components
+// Please do not edit this file directly!
+// It will get recreated when running pnpm build.
+// ---------------------------------------------------------------------
+
+/**
+ * @summary Accordions provide the ability to group a list of `<syn-details>`.
+ *
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-accordion--docs
+ * @status stable
+ * @since 1.23.0
+ *
+ * @slot - The accordion's main content. Must be `<syn-details />` elements.
+ *
+ * @csspart base - The component's base wrapper.
+ */
+import { computed, ref } from 'vue';
+import '@synergy-design-system/components/components/accordion/accordion.js';
+
+import type { SynAccordion } from '@synergy-design-system/components';
+
+// DOM Reference to the element
+const nativeElement = ref<SynAccordion>();
+
+defineExpose({
+  nativeElement,
+});
+
+// Map attributes
+const props = defineProps<{
+  /**
+* 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'];
+
+  /**
+* 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'),
+));
+
+// Map events
+defineEmits<{
+
+}>();
+</script>
+
+<template>
+  <syn-accordion
+
+    v-bind="visibleProps"
+    ref="nativeElement"
+  >
+    <slot />
+  </syn-accordion>
+</template>

package/src/components/SynVueDetails.vue

@@ -0,0 +1,133 @@
+<script setup lang="ts">
+// ---------------------------------------------------------------------
+// 🔒 AUTOGENERATED @synergy-design-system/vue wrappers for @synergy-design-system/components
+// Please do not edit this file directly!
+// It will get recreated when running pnpm build.
+// ---------------------------------------------------------------------
+
+/**
+ * @summary Details show a brief summary and expand to show additional content.
+ * @documentation https://synergy.style/components/details
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency syn-icon
+ *
+ * @slot - The details' main content.
+ * @slot summary - The details' summary. Alternatively, you can use the `summary` attribute.
+ * @slot expand-icon - Optional expand icon to use instead of the default. Works best with `<syn-icon>`.
+ * @slot collapse-icon - Optional collapse icon to use instead of the default. Works best with `<syn-icon>`.
+ *
+ * @event syn-show - Emitted when the details opens.
+ * @event syn-after-show - Emitted after the details opens and all animations are complete.
+ * @event syn-hide - Emitted when the details closes.
+ * @event syn-after-hide - Emitted after the details closes and all animations are complete.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart header - The header that wraps both the summary and the expand/collapse icon.
+ * @csspart summary - The container that wraps the summary.
+ * @csspart summary-icon - The container that wraps the expand/collapse icons.
+ * @csspart content - The details content.
+ *
+ * @animation details.show - The animation to use when showing details. You can use `height: auto` with this animation.
+ * @animation details.hide - The animation to use when hiding details. You can use `height: auto` with this animation.
+ */
+import { computed, ref } from 'vue';
+import '@synergy-design-system/components/components/details/details.js';
+
+import type {
+  SynAfterHideEvent, SynAfterShowEvent, SynDetails, SynHideEvent, SynShowEvent,
+} from '@synergy-design-system/components';
+
+// DOM Reference to the element
+const nativeElement = ref<SynDetails>();
+
+defineExpose({
+  nativeElement,
+});
+
+// Map attributes
+const props = defineProps<{
+  /**
+* Indicates whether or not the details is open.
+* You can toggle this attribute to show and hide the details, or you
+can use the `show()` and `hide()` methods and this attribute will reflect the details' open state.
+ */
+  'open'?: SynDetails['open'];
+
+  /**
+* The summary to show in the header.
+* If you need to display HTML, use the `summary` slot instead.
+ */
+  'summary'?: SynDetails['summary'];
+
+  /**
+* Disables the details so it can't be toggled.
+ */
+  'disabled'?: SynDetails['disabled'];
+
+  /**
+* Draws the details as contained element.
+ */
+  'contained'?: SynDetails['contained'];
+
+  /**
+* The details's size.
+ */
+  'size'?: SynDetails['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'),
+));
+
+// Map events
+defineEmits<{
+  /**
+* Emitted when the details opens.
+ */
+  'syn-show': [e: SynShowEvent];
+
+  /**
+* Emitted after the details opens and all animations are complete.
+ */
+  'syn-after-show': [e: SynAfterShowEvent];
+
+  /**
+* Emitted when the details closes.
+ */
+  'syn-hide': [e: SynHideEvent];
+
+  /**
+* Emitted after the details closes and all animations are complete.
+ */
+  'syn-after-hide': [e: SynAfterHideEvent];
+}>();
+</script>
+
+<script lang="ts">
+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';
+</script>
+
+<template>
+  <syn-details
+    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 />
+  </syn-details>
+</template>

package/src/index.js

@@ -3,6 +3,7 @@
 // Please do not edit this file directly!
 // It will get recreated when running pnpm build.
 // ---------------------------------------------------------------------
+export { default as SynVueAccordion } from './components/SynVueAccordion.vue';
 export { default as SynVueAlert } from './components/SynVueAlert.vue';
 export { default as SynVueBadge } from './components/SynVueBadge.vue';
 export { default as SynVueBreadcrumb } from './components/SynVueBreadcrumb.vue';
@@ -11,6 +12,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 SynVueDetails } from './components/SynVueDetails.vue';
 export { default as SynVueDialog } from './components/SynVueDialog.vue';
 export { default as SynVueDivider } from './components/SynVueDivider.vue';
 export { default as SynVueDrawer } from './components/SynVueDrawer.vue';