@synergy-design-system/vue 1.19.0 → 1.20.0

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

@@ -0,0 +1,90 @@
+import '@synergy-design-system/components/components/alert/alert.js';
+import type { SynAfterHideEvent, SynAfterShowEvent, 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 alert is open.
+  * 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?: boolean | undefined;
+    /**
+  * Enables a close button that allows the user to dismiss the alert.
+   */
+    closable?: boolean | undefined;
+    /**
+  * The alert's theme variant.
+   */
+    variant?: "primary" | "success" | "neutral" | "warning" | "danger" | undefined;
+    /**
+  * The length of time, in milliseconds, the alert will show before closing itself.
+  * If the user interacts with
+  the alert before it closes (e.g.
+  * moves the mouse over it), the timer will restart.
+  * Defaults to `Infinity`, meaning
+  the alert will not close on its own.
+   */
+    duration?: number | undefined;
+}>, {
+    callHandleOpenChange: () => Promise<void> | undefined;
+    callHandleDurationChange: () => void | undefined;
+    callShow: () => Promise<void> | undefined;
+    callHide: () => Promise<void> | undefined;
+    callToast: () => Promise<void> | 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 alert is open.
+  * 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?: boolean | undefined;
+    /**
+  * Enables a close button that allows the user to dismiss the alert.
+   */
+    closable?: boolean | undefined;
+    /**
+  * The alert's theme variant.
+   */
+    variant?: "primary" | "success" | "neutral" | "warning" | "danger" | undefined;
+    /**
+  * The length of time, in milliseconds, the alert will show before closing itself.
+  * If the user interacts with
+  the alert before it closes (e.g.
+  * moves the mouse over it), the timer will restart.
+  * Defaults to `Infinity`, meaning
+  the alert will not close on its own.
+   */
+    duration?: number | 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;
+    icon?(_: {}): 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/SynVueBadge.vue.d.ts

@@ -13,7 +13,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/SynVueNavItem.vue.d.ts

@@ -43,10 +43,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     callClick: () => void | undefined;
     callFocus: (options?: FocusOptions | undefined) => void | undefined;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "syn-blur": (e: SynBlurEvent) => void;
-    "syn-focus": (e: SynFocusEvent) => void;
     "syn-show": (e: SynShowEvent) => void;
     "syn-hide": (e: SynHideEvent) => void;
+    "syn-blur": (e: SynBlurEvent) => void;
+    "syn-focus": (e: SynFocusEvent) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
     /**
   * The navigation item's href target.
@@ -81,10 +81,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
    */
     divider?: boolean | undefined;
 }>>> & {
-    "onSyn-blur"?: ((e: SynBlurEvent) => any) | undefined;
-    "onSyn-focus"?: ((e: SynFocusEvent) => any) | undefined;
     "onSyn-show"?: ((e: SynShowEvent) => any) | undefined;
     "onSyn-hide"?: ((e: SynHideEvent) => any) | undefined;
+    "onSyn-blur"?: ((e: SynBlurEvent) => any) | undefined;
+    "onSyn-focus"?: ((e: SynFocusEvent) => any) | undefined;
 }, {}, {}>, {
     default?(_: {}): any;
     prefix?(_: {}): any;

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

@@ -115,16 +115,16 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     callFocus: (options?: FocusOptions | undefined) => void | undefined;
     callBlur: () => void | 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;
     "syn-blur": (e: SynBlurEvent) => void;
     "syn-focus": (e: SynFocusEvent) => void;
     "syn-invalid": (e: SynInvalidEvent) => void;
     "syn-change": (e: SynChangeEvent) => void;
     "syn-input": (e: SynInputEvent) => void;
     "update:modelValue": (newValue: string | string[]) => void;
-    "syn-show": (e: SynShowEvent) => void;
-    "syn-after-show": (e: SynAfterShowEvent) => void;
-    "syn-hide": (e: SynHideEvent) => void;
-    "syn-after-hide": (e: SynAfterHideEvent) => void;
     "syn-clear": (e: SynClearEvent) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
     /**
@@ -219,16 +219,16 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
    */
     modelValue?: string | string[] | 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;
     "onSyn-blur"?: ((e: SynBlurEvent) => any) | undefined;
     "onSyn-focus"?: ((e: SynFocusEvent) => any) | undefined;
     "onSyn-invalid"?: ((e: SynInvalidEvent) => any) | undefined;
     "onSyn-change"?: ((e: SynChangeEvent) => any) | undefined;
     "onSyn-input"?: ((e: SynInputEvent) => any) | undefined;
     "onUpdate:modelValue"?: ((newValue: string | string[]) => any) | 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;
     "onSyn-clear"?: ((e: SynClearEvent) => any) | undefined;
 }, {}, {}>, {
     default?(_: {}): any;

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export { default as SynVueAlert } from "./components/SynVueAlert.vue";
 export { default as SynVueBadge } from "./components/SynVueBadge.vue";
 export { default as SynVueButton } from "./components/SynVueButton.vue";
 export { default as SynVueButtonGroup } from "./components/SynVueButtonGroup.vue";

package/package.json

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

package/src/components/SynVueAlert.vue

@@ -0,0 +1,156 @@
+<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 Alerts are used to display important messages inline or as toast notifications.
+ * @documentation https://synergy.style/components/alert
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency syn-icon-button
+ *
+ * @slot - The alert's main content.
+ * @slot icon - An icon to show in the alert. Works best with `<syn-icon>`.
+ *
+ * @event syn-show - Emitted when the alert opens.
+ * @event syn-after-show - Emitted after the alert opens and all animations are complete.
+ * @event syn-hide - Emitted when the alert closes.
+ * @event syn-after-hide - Emitted after the alert closes and all animations are complete.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart icon - The container that wraps the optional icon.
+ * @csspart message - The container that wraps the alert's main content.
+ * @csspart close-button - The close button, an `<syn-icon-button>`.
+ * @csspart close-button__base - The close button's exported `base` part.
+ *
+ * @animation alert.show - The animation to use when showing the alert.
+ * @animation alert.hide - The animation to use when hiding the alert.
+ */
+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';
+
+// DOM Reference to the element
+const element = ref<SynAlert>();
+
+// Map methods
+const callHandleOpenChange = (...args: Parameters<SynAlert['handleOpenChange']>) => element.value?.handleOpenChange(...args);
+const callHandleDurationChange = (...args: Parameters<SynAlert['handleDurationChange']>) => element.value?.handleDurationChange(...args);
+/**
+* Shows the alert.
+ */
+const callShow = (...args: Parameters<SynAlert['show']>) => element.value?.show(...args);
+/**
+* Hides the alert
+ */
+const callHide = (...args: Parameters<SynAlert['hide']>) => element.value?.hide(...args);
+/**
+* Displays the alert as a toast notification.
+* This will move the alert out of its position in the DOM and, when
+dismissed, it will be removed from the DOM completely.
+* By storing a reference to the alert, you can reuse it by
+calling this method again.
+* The returned promise will resolve after the alert is hidden.
+ */
+const callToast = (...args: Parameters<SynAlert['toast']>) => element.value?.toast(...args);
+
+defineExpose({
+  callHandleOpenChange,
+  callHandleDurationChange,
+  callShow,
+  callHide,
+  callToast,
+});
+
+// Map attributes
+const props = defineProps<{
+  /**
+* Indicates whether or not the alert is open.
+* 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'];
+
+  /**
+* Enables a close button that allows the user to dismiss the alert.
+ */
+  'closable'?: SynAlert['closable'];
+
+  /**
+* The alert's theme variant.
+ */
+  'variant'?: SynAlert['variant'];
+
+  /**
+* The length of time, in milliseconds, the alert will show before closing itself.
+* If the user interacts with
+the alert before it closes (e.g.
+* moves the mouse over it), the timer will restart.
+* Defaults to `Infinity`, meaning
+the alert will not close on its own.
+ */
+  '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'),
+));
+
+// Map events
+defineEmits<{
+  /**
+* Emitted when the alert opens.
+ */
+  'syn-show': [e: SynShowEvent];
+
+  /**
+* Emitted after the alert opens and all animations are complete.
+ */
+  'syn-after-show': [e: SynAfterShowEvent];
+
+  /**
+* Emitted when the alert closes.
+ */
+  'syn-hide': [e: SynHideEvent];
+
+  /**
+* Emitted after the alert 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-alert
+    v-bind="visibleProps"
+    ref="element"
+    @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 />
+    <slot name="icon" />
+  </syn-alert>
+</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 SynVueAlert } from './components/SynVueAlert.vue';
 export { default as SynVueBadge } from './components/SynVueBadge.vue';
 export { default as SynVueButton } from './components/SynVueButton.vue';
 export { default as SynVueButtonGroup } from './components/SynVueButtonGroup.vue';