@synergy-design-system/vue 1.20.2 → 1.22.0

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

@@ -0,0 +1,9 @@
+import '@synergy-design-system/components/components/spinner/spinner.js';
+declare const _default: import("vue").DefineComponent<Readonly<import("vue").ComponentPropsOptions<{
+    [x: string]: unknown;
+}>>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, readonly string[] | Readonly<import("vue").ExtractPropTypes<Readonly<import("vue").ComponentObjectPropsOptions<{
+    [x: string]: unknown;
+}>>>>, {
+    readonly [x: number]: string;
+} | {}, {}>;
+export default _default;

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

@@ -0,0 +1,131 @@
+import '@synergy-design-system/components/components/tooltip/tooltip.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<{
+    /**
+  * The tooltip's content.
+  * If you need to display HTML, use the `content` slot instead.
+   */
+    content?: string | undefined;
+    /**
+  * The preferred placement of the tooltip.
+  * Note that the actual placement may vary as needed to keep the tooltip
+  inside of the viewport.
+   */
+    placement?: "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right" | "right-start" | "right-end" | "left" | "left-start" | "left-end" | undefined;
+    /**
+  * Disables the tooltip so it won't show when triggered.
+   */
+    disabled?: boolean | undefined;
+    /**
+  * The distance in pixels from which to offset the tooltip away from its target.
+   */
+    distance?: number | undefined;
+    /**
+  * Indicates whether or not the tooltip is open.
+  * You can use this in lieu of the show/hide methods.
+   */
+    open?: boolean | undefined;
+    /**
+  * The distance in pixels from which to offset the tooltip along its target.
+   */
+    skidding?: number | undefined;
+    /**
+  * Controls how the tooltip is activated.
+  * Possible options include `click`, `hover`, `focus`, and `manual`.
+  * Multiple
+  options can be passed by separating them with a space.
+  * When manual is used, the tooltip must be activated
+  programmatically.
+   */
+    trigger?: string | undefined;
+    /**
+  * Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with
+  `overflow: auto|hidden|scroll`.
+  * Hoisting uses a fixed positioning strategy that works in many, but not all,
+  scenarios.
+   */
+    hoist?: boolean | undefined;
+}>, {
+    callHandleOpenChange: () => Promise<void> | undefined;
+    callHandleOptionsChange: () => Promise<void> | undefined;
+    callHandleDisabledChange: () => 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;
+}, 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.
+   */
+    content?: string | undefined;
+    /**
+  * The preferred placement of the tooltip.
+  * Note that the actual placement may vary as needed to keep the tooltip
+  inside of the viewport.
+   */
+    placement?: "top" | "bottom" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right" | "right-start" | "right-end" | "left" | "left-start" | "left-end" | undefined;
+    /**
+  * Disables the tooltip so it won't show when triggered.
+   */
+    disabled?: boolean | undefined;
+    /**
+  * The distance in pixels from which to offset the tooltip away from its target.
+   */
+    distance?: number | undefined;
+    /**
+  * Indicates whether or not the tooltip is open.
+  * You can use this in lieu of the show/hide methods.
+   */
+    open?: boolean | undefined;
+    /**
+  * The distance in pixels from which to offset the tooltip along its target.
+   */
+    skidding?: number | undefined;
+    /**
+  * Controls how the tooltip is activated.
+  * Possible options include `click`, `hover`, `focus`, and `manual`.
+  * Multiple
+  options can be passed by separating them with a space.
+  * When manual is used, the tooltip must be activated
+  programmatically.
+   */
+    trigger?: string | undefined;
+    /**
+  * Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with
+  `overflow: auto|hidden|scroll`.
+  * Hoisting uses a fixed positioning strategy that works in many, but not all,
+  scenarios.
+   */
+    hoist?: 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;
+}, {}, {}>, {
+    default?(_: {}): any;
+    content?(_: {}): 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

@@ -25,6 +25,8 @@ export { default as SynVueRadioButton } from "./components/SynVueRadioButton.vue
 export { default as SynVueRadioGroup } from "./components/SynVueRadioGroup.vue";
 export { default as SynVueSelect } from "./components/SynVueSelect.vue";
 export { default as SynVueSideNav } from "./components/SynVueSideNav.vue";
+export { default as SynVueSpinner } from "./components/SynVueSpinner.vue";
 export { default as SynVueSwitch } from "./components/SynVueSwitch.vue";
 export { default as SynVueTag } from "./components/SynVueTag.vue";
 export { default as SynVueTextarea } from "./components/SynVueTextarea.vue";
+export { default as SynVueTooltip } from "./components/SynVueTooltip.vue";

package/package.json

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

package/src/components/SynVueSpinner.vue

@@ -0,0 +1,61 @@
+<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 Spinners are used to show the progress of an indeterminate operation.
+ * @documentation https://synergy.style/components/spinner
+ * @status stable
+ * @since 2.0
+ *
+ * @csspart base - The component's base wrapper.
+ *
+ * @cssproperty --track-width - The width of the track.
+ * @cssproperty --indicator-color - The color of the spinner's indicator.
+ * @cssproperty --speed - The time it takes for the spinner to complete one animation cycle.
+ */
+import { computed, ref } from 'vue';
+import '@synergy-design-system/components/components/spinner/spinner.js';
+
+import type { SynSpinner } from '@synergy-design-system/components';
+
+// DOM Reference to the element
+const element = ref<SynSpinner>();
+
+// Map methods
+
+defineExpose({
+
+});
+
+// Map attributes
+const props = defineProps<{
+
+}>();
+
+// 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-spinner
+
+    v-bind="visibleProps"
+    ref="element"
+  />
+</template>

package/src/components/SynVueTooltip.vue

@@ -0,0 +1,176 @@
+<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 Tooltips display additional information based on a specific action.
+ * @documentation https://synergy.style/components/tooltip
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency syn-popup
+ *
+ * @slot - The tooltip's target element. Avoid slotting in more than one element, as subsequent ones will be ignored.
+ * @slot content - The content to render in the tooltip. Alternatively, you can use the `content` attribute.
+ *
+ * @event syn-show - Emitted when the tooltip begins to show.
+ * @event syn-after-show - Emitted after the tooltip has shown and all animations are complete.
+ * @event syn-hide - Emitted when the tooltip begins to hide.
+ * @event syn-after-hide - Emitted after the tooltip has hidden and all animations are complete.
+ *
+ * @csspart base - The component's base wrapper, an `<syn-popup>` element.
+ * @csspart base__popup - The popup's exported `popup` part. Use this to target the tooltip's popup container.
+ * @csspart base__arrow - The popup's exported `arrow` part. Use this to target the tooltip's arrow.
+ * @csspart body - The tooltip's body where its content is rendered.
+ *
+ * @cssproperty --max-width - The maximum width of the tooltip before its content will wrap.
+ * @cssproperty --hide-delay - The amount of time to wait before hiding the tooltip when hovering.
+ * @cssproperty --show-delay - The amount of time to wait before showing the tooltip when hovering.
+ *
+ * @animation tooltip.show - The animation to use when showing the tooltip.
+ * @animation tooltip.hide - The animation to use when hiding the tooltip.
+ */
+import { computed, ref } from 'vue';
+import '@synergy-design-system/components/components/tooltip/tooltip.js';
+
+import type {
+  SynAfterHideEvent, SynAfterShowEvent, SynHideEvent, SynShowEvent, SynTooltip,
+} from '@synergy-design-system/components';
+
+// DOM Reference to the element
+const element = ref<SynTooltip>();
+
+// Map methods
+const callHandleOpenChange = (...args: Parameters<SynTooltip['handleOpenChange']>) => element.value?.handleOpenChange(...args);
+const callHandleOptionsChange = (...args: Parameters<SynTooltip['handleOptionsChange']>) => element.value?.handleOptionsChange(...args);
+const callHandleDisabledChange = (...args: Parameters<SynTooltip['handleDisabledChange']>) => element.value?.handleDisabledChange(...args);
+/**
+* Shows the tooltip.
+ */
+const callShow = (...args: Parameters<SynTooltip['show']>) => element.value?.show(...args);
+/**
+* Hides the tooltip
+ */
+const callHide = (...args: Parameters<SynTooltip['hide']>) => element.value?.hide(...args);
+
+defineExpose({
+  callHandleOpenChange,
+  callHandleOptionsChange,
+  callHandleDisabledChange,
+  callShow,
+  callHide,
+});
+
+// Map attributes
+const props = defineProps<{
+  /**
+* The tooltip's content.
+* If you need to display HTML, use the `content` slot instead.
+ */
+  'content'?: SynTooltip['content'];
+
+  /**
+* The preferred placement of the tooltip.
+* Note that the actual placement may vary as needed to keep the tooltip
+inside of the viewport.
+ */
+  'placement'?: SynTooltip['placement'];
+
+  /**
+* 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.
+ */
+  'distance'?: SynTooltip['distance'];
+
+  /**
+* 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.
+ */
+  'skidding'?: SynTooltip['skidding'];
+
+  /**
+* Controls how the tooltip is activated.
+* Possible options include `click`, `hover`, `focus`, and `manual`.
+* Multiple
+options can be passed by separating them with a space.
+* When manual is used, the tooltip must be activated
+programmatically.
+ */
+  'trigger'?: SynTooltip['trigger'];
+
+  /**
+* Enable this option to prevent the tooltip from being clipped when the component is placed inside a container with
+`overflow: auto|hidden|scroll`.
+* Hoisting uses a fixed positioning strategy that works in many, but not all,
+scenarios.
+ */
+  'hoist'?: SynTooltip['hoist'];
+}>();
+
+// 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 tooltip begins to show.
+ */
+  'syn-show': [e: SynShowEvent];
+
+  /**
+* Emitted after the tooltip has shown and all animations are complete.
+ */
+  'syn-after-show': [e: SynAfterShowEvent];
+
+  /**
+* Emitted when the tooltip begins to hide.
+ */
+  'syn-hide': [e: SynHideEvent];
+
+  /**
+* Emitted after the tooltip has hidden 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-tooltip
+    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="content" />
+  </syn-tooltip>
+</template>

package/src/index.js

@@ -30,6 +30,8 @@ export { default as SynVueRadioButton } from './components/SynVueRadioButton.vue
 export { default as SynVueRadioGroup } from './components/SynVueRadioGroup.vue';
 export { default as SynVueSelect } from './components/SynVueSelect.vue';
 export { default as SynVueSideNav } from './components/SynVueSideNav.vue';
+export { default as SynVueSpinner } from './components/SynVueSpinner.vue';
 export { default as SynVueSwitch } from './components/SynVueSwitch.vue';
 export { default as SynVueTag } from './components/SynVueTag.vue';
 export { default as SynVueTextarea } from './components/SynVueTextarea.vue';
+export { default as SynVueTooltip } from './components/SynVueTooltip.vue';