@synergy-design-system/vue 1.22.0 → 1.23.0

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

@@ -0,0 +1,87 @@
+import '@synergy-design-system/components/components/dialog/dialog.js';
+import type { SynAfterHideEvent, SynAfterShowEvent, SynHideEvent, SynInitialFocusEvent, SynRequestCloseEvent, 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';
+export type { SynInitialFocusEvent } from '@synergy-design-system/components';
+export type { SynRequestCloseEvent } from '@synergy-design-system/components';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<{
+    /**
+  * Indicates whether or not the dialog is open.
+  * You can toggle this attribute to show and hide the dialog, or you can
+  use the `show()` and `hide()` methods and this attribute will reflect the dialog's open state.
+   */
+    open?: boolean | undefined;
+    /**
+  * The dialog's label as displayed in the header.
+  * You should always include a relevant label even when using
+  `no-header`, as it is required for proper accessibility.
+  * If you need to display HTML, use the `label` slot instead.
+   */
+    label?: string | undefined;
+    /**
+  * Disables the header.
+  * This will also remove the default close button, so please ensure you provide an easy,
+  accessible way for users to dismiss the dialog.
+   */
+    noHeader?: boolean | undefined;
+}>, {
+    callHandleOpenChange: () => Promise<void> | undefined;
+    callShow: () => Promise<void> | undefined;
+    callHide: () => 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;
+    "syn-initial-focus": (e: SynInitialFocusEvent) => void;
+    "syn-request-close": (e: SynRequestCloseEvent) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
+    /**
+  * Indicates whether or not the dialog is open.
+  * You can toggle this attribute to show and hide the dialog, or you can
+  use the `show()` and `hide()` methods and this attribute will reflect the dialog's open state.
+   */
+    open?: boolean | undefined;
+    /**
+  * The dialog's label as displayed in the header.
+  * You should always include a relevant label even when using
+  `no-header`, as it is required for proper accessibility.
+  * If you need to display HTML, use the `label` slot instead.
+   */
+    label?: string | undefined;
+    /**
+  * Disables the header.
+  * This will also remove the default close button, so please ensure you provide an easy,
+  accessible way for users to dismiss the dialog.
+   */
+    noHeader?: boolean | 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-initial-focus"?: ((e: SynInitialFocusEvent) => any) | undefined;
+    "onSyn-request-close"?: ((e: SynRequestCloseEvent) => any) | undefined;
+}, {}, {}>, {
+    default?(_: {}): any;
+    label?(_: {}): any;
+    "header-actions"?(_: {}): any;
+    footer?(_: {}): 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/index.d.ts

@@ -3,6 +3,7 @@ export { default as SynVueBadge } from "./components/SynVueBadge.vue";
 export { default as SynVueButton } from "./components/SynVueButton.vue";
 export { default as SynVueButtonGroup } from "./components/SynVueButtonGroup.vue";
 export { default as SynVueCheckbox } from "./components/SynVueCheckbox.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";
 export { default as SynVueDropdown } from "./components/SynVueDropdown.vue";

package/package.json

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

package/src/components/SynVueDialog.vue

@@ -0,0 +1,183 @@
+<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 Dialogs, sometimes called "modals", appear above the page and require the user's immediate attention.
+ * @documentation https://synergy.style/components/dialog
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency syn-icon-button
+ *
+ * @slot - The dialog's main content.
+ * @slot label - The dialog's label. Alternatively, you can use the `label` attribute.
+ * @slot header-actions - Optional actions to add to the header. Works best with `<syn-icon-button>`.
+ * @slot footer - The dialog's footer, usually one or more buttons representing various options.
+ *
+ * @event syn-show - Emitted when the dialog opens.
+ * @event syn-after-show - Emitted after the dialog opens and all animations are complete.
+ * @event syn-hide - Emitted when the dialog closes.
+ * @event syn-after-hide - Emitted after the dialog closes and all animations are complete.
+ * @event syn-initial-focus - Emitted when the dialog opens and is ready to receive focus. Calling
+ *   `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.
+ * @event {{ source: 'close-button' | 'keyboard' | 'overlay' }} syn-request-close - Emitted when the user attempts to
+ *   close the dialog by clicking the close button, clicking the overlay, or pressing escape. Calling
+ *   `event.preventDefault()` will keep the dialog open. Avoid using this unless closing the dialog will result in
+ *   destructive behavior such as data loss.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart overlay - The overlay that covers the screen behind the dialog.
+ * @csspart panel - The dialog's panel (where the dialog and its content are rendered).
+ * @csspart header - The dialog's header. This element wraps the title and header actions.
+ * @csspart header-actions - Optional actions to add to the header. Works best with `<syn-icon-button>`.
+ * @csspart title - The dialog's title.
+ * @csspart close-button - The close button, an `<syn-icon-button>`.
+ * @csspart close-button__base - The close button's exported `base` part.
+ * @csspart body - The dialog's body.
+ * @csspart footer - The dialog's footer.
+ *
+ * @cssproperty --width - The preferred width of the dialog. Note that the dialog will shrink to accommodate smaller screens.
+ * @cssproperty --header-spacing - The amount of padding to use for the header.
+ * @cssproperty --body-spacing - The amount of padding to use for the body.
+ * @cssproperty --footer-spacing - The amount of padding to use for the footer.
+ *
+ * @animation dialog.show - The animation to use when showing the dialog.
+ * @animation dialog.hide - The animation to use when hiding the dialog.
+ * @animation dialog.denyClose - The animation to use when a request to close the dialog is denied.
+ * @animation dialog.overlay.show - The animation to use when showing the dialog's overlay.
+ * @animation dialog.overlay.hide - The animation to use when hiding the dialog's overlay.
+ *
+ * @property modal - Exposes the internal modal utility that controls focus trapping. To temporarily disable focus
+ *   trapping and allow third-party modals spawned from an active Synergy modal, call `modal.activateExternal()` when
+ *   the third-party modal opens. Upon closing, call `modal.deactivateExternal()` to restore Synergy's focus trapping.
+ */
+import { computed, ref } from 'vue';
+import '@synergy-design-system/components/components/dialog/dialog.js';
+
+import type {
+  SynAfterHideEvent, SynAfterShowEvent, SynDialog, SynHideEvent, SynInitialFocusEvent, SynRequestCloseEvent, SynShowEvent,
+} from '@synergy-design-system/components';
+
+// DOM Reference to the element
+const element = ref<SynDialog>();
+
+// Map methods
+const callHandleOpenChange = (...args: Parameters<SynDialog['handleOpenChange']>) => element.value?.handleOpenChange(...args);
+/**
+* Shows the dialog.
+ */
+const callShow = (...args: Parameters<SynDialog['show']>) => element.value?.show(...args);
+/**
+* Hides the dialog
+ */
+const callHide = (...args: Parameters<SynDialog['hide']>) => element.value?.hide(...args);
+
+defineExpose({
+  callHandleOpenChange,
+  callShow,
+  callHide,
+});
+
+// Map attributes
+const props = defineProps<{
+  /**
+* Indicates whether or not the dialog is open.
+* You can toggle this attribute to show and hide the dialog, or you can
+use the `show()` and `hide()` methods and this attribute will reflect the dialog's open state.
+ */
+  'open'?: SynDialog['open'];
+
+  /**
+* The dialog's label as displayed in the header.
+* You should always include a relevant label even when using
+`no-header`, as it is required for proper accessibility.
+* If you need to display HTML, use the `label` slot instead.
+ */
+  'label'?: SynDialog['label'];
+
+  /**
+* Disables the header.
+* This will also remove the default close button, so please ensure you provide an easy,
+accessible way for users to dismiss the dialog.
+ */
+  'noHeader'?: SynDialog['noHeader'];
+}>();
+
+// 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 dialog opens.
+ */
+  'syn-show': [e: SynShowEvent];
+
+  /**
+* Emitted after the dialog opens and all animations are complete.
+ */
+  'syn-after-show': [e: SynAfterShowEvent];
+
+  /**
+* Emitted when the dialog closes.
+ */
+  'syn-hide': [e: SynHideEvent];
+
+  /**
+* Emitted after the dialog closes and all animations are complete.
+ */
+  'syn-after-hide': [e: SynAfterHideEvent];
+
+  /**
+* Emitted when the dialog opens and is ready to receive focus.
+* Calling `event.preventDefault()` will prevent focusing and allow you to set it on a different element, such as an input.
+ */
+  'syn-initial-focus': [e: SynInitialFocusEvent];
+
+  /**
+* Emitted when the user attempts to close the dialog by clicking the close button, clicking the overlay, or pressing escape.
+* Calling `event.preventDefault()` will keep the dialog open.
+* Avoid using this unless closing the dialog will result in destructive behavior such as data loss.
+ */
+  'syn-request-close': [e: SynRequestCloseEvent];
+}>();
+</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';
+export type { SynInitialFocusEvent } from '@synergy-design-system/components';
+export type { SynRequestCloseEvent } from '@synergy-design-system/components';
+</script>
+
+<template>
+  <syn-dialog
+    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)"
+
+    @syn-initial-focus="$emit('syn-initial-focus', $event)"
+    @syn-request-close="$emit('syn-request-close', $event)"
+  >
+    <slot />
+    <slot name="label" />
+    <slot name="header-actions" />
+    <slot name="footer" />
+  </syn-dialog>
+</template>

package/src/index.js

@@ -8,6 +8,7 @@ export { default as SynVueBadge } from './components/SynVueBadge.vue';
 export { default as SynVueButton } from './components/SynVueButton.vue';
 export { default as SynVueButtonGroup } from './components/SynVueButtonGroup.vue';
 export { default as SynVueCheckbox } from './components/SynVueCheckbox.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';
 export { default as SynVueDropdown } from './components/SynVueDropdown.vue';