@synergy-design-system/vue 2.0.0 → 2.2.0

package/README.md

@@ -18,6 +18,9 @@ Run the following steps to install the required packages.
 # Install the base library and required css files
 npm install --save @synergy-design-system/vue @synergy-design-system/tokens
 
+# Optional: Install the styles utility package
+npm install --save @synergy-design-system/styles
+
 # Optional: if icons shall be used, install the assets package
 npm install --save @synergy-design-system/assets
 ```
@@ -33,6 +36,10 @@ The components will not display correctly without the needed theme. Please inclu
 // src/main.ts
 // Add this line to enable the light theme for your application
 import "@synergy-design-system/tokens/themes/light.css";
+import "@synergy-design-system/components/index.css";
+
+// Optional: Import the styles package
+import "@synergy-design-system/styles/index.css";
 
 import { createApp } from "vue";
 import App from "./App.vue";

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

@@ -0,0 +1,63 @@
+import '@synergy-design-system/components/components/tab/tab.js';
+import type { SynCloseEvent, SynTab } from '@synergy-design-system/components';
+export type { SynCloseEvent } from '@synergy-design-system/components';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<{
+    /**
+  * The name of the tab panel this tab is associated with.
+  * The panel must be located in the same tab group.
+   */
+    panel?: string | undefined;
+    /**
+  * Draws the tab in an active state.
+   */
+    active?: boolean | undefined;
+    /**
+  * Makes the tab closable and shows a close button.
+   */
+    closable?: boolean | undefined;
+    /**
+  * Disables the tab and prevents selection.
+   */
+    disabled?: boolean | undefined;
+}>, {
+    nativeElement: import("vue").Ref<SynTab | undefined>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "syn-close": (e: SynCloseEvent) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
+    /**
+  * The name of the tab panel this tab is associated with.
+  * The panel must be located in the same tab group.
+   */
+    panel?: string | undefined;
+    /**
+  * Draws the tab in an active state.
+   */
+    active?: boolean | undefined;
+    /**
+  * Makes the tab closable and shows a close button.
+   */
+    closable?: boolean | undefined;
+    /**
+  * Disables the tab and prevents selection.
+   */
+    disabled?: boolean | undefined;
+}>>> & {
+    "onSyn-close"?: ((e: SynCloseEvent) => 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/SynVueTabGroup.vue.d.ts

@@ -0,0 +1,78 @@
+import '@synergy-design-system/components/components/tab-group/tab-group.js';
+import type { SynTabGroup, SynTabHideEvent, SynTabShowEvent } 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.
+   */
+    placement?: "top" | "end" | "start" | undefined;
+    /**
+  * When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel.
+  * When set to
+  manual, the tab will receive focus but will not show until the user presses spacebar or enter.
+   */
+    activation?: "auto" | "manual" | undefined;
+    /**
+  * Disables the scroll arrows that appear when tabs overflow.
+   */
+    noScrollControls?: boolean | undefined;
+    /**
+  * Draws the tab group as a contained element.
+   */
+    contained?: boolean | undefined;
+    /**
+  * Draws the tab group with edges instead of roundings.
+  * Takes only effect if used with the 'contained' property
+   */
+    sharp?: boolean | undefined;
+}>, {
+    nativeElement: import("vue").Ref<SynTabGroup | undefined>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "syn-tab-show": (e: SynTabShowEvent) => void;
+    "syn-tab-hide": (e: SynTabHideEvent) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<{
+    /**
+  * The placement of the tabs.
+   */
+    placement?: "top" | "end" | "start" | undefined;
+    /**
+  * When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel.
+  * When set to
+  manual, the tab will receive focus but will not show until the user presses spacebar or enter.
+   */
+    activation?: "auto" | "manual" | undefined;
+    /**
+  * Disables the scroll arrows that appear when tabs overflow.
+   */
+    noScrollControls?: boolean | undefined;
+    /**
+  * Draws the tab group as a contained element.
+   */
+    contained?: boolean | undefined;
+    /**
+  * Draws the tab group with edges instead of roundings.
+  * Takes only effect if used with the 'contained' property
+   */
+    sharp?: boolean | undefined;
+}>>> & {
+    "onSyn-tab-show"?: ((e: SynTabShowEvent) => any) | undefined;
+    "onSyn-tab-hide"?: ((e: SynTabHideEvent) => 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/SynVueTabPanel.vue.d.ts

@@ -0,0 +1,40 @@
+import '@synergy-design-system/components/components/tab-panel/tab-panel.js';
+import type { SynTabPanel } from '@synergy-design-system/components';
+declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__VLS_TypePropsToOption<{
+    /**
+  * The tab panel's name.
+   */
+    name?: string | undefined;
+    /**
+  * When true, the tab panel will be shown.
+   */
+    active?: boolean | undefined;
+}>, {
+    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.
+   */
+    name?: string | undefined;
+    /**
+  * When true, the tab panel will be shown.
+   */
+    active?: boolean | 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/index.d.ts

@@ -31,6 +31,9 @@ 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 SynVueTab } from "./components/SynVueTab.vue";
+export { default as SynVueTabGroup } from "./components/SynVueTabGroup.vue";
+export { default as SynVueTabPanel } from "./components/SynVueTabPanel.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": "^2.0.0"
+    "@synergy-design-system/components": "^2.2.0"
   },
   "description": "Vue3 wrappers for the Synergy Design System",
   "exports": {
@@ -40,9 +40,12 @@
     "directory": "packages/vue"
   },
   "type": "module",
-  "version": "2.0.0",
+  "version": "2.2.0",
   "devDependencies": {
     "@vue/tsconfig": "^0.5.1",
     "vue": "^3.4.24"
+  },
+  "peerDependencies": {
+    "@synergy-design-system/tokens": "^2.2.0"
   }
 }

package/src/components/SynVueTab.vue

@@ -0,0 +1,92 @@
+<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 Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).
+ * @documentation https://synergy.style/components/tab
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency syn-icon-button
+ *
+ * @slot - The tab's label.
+ *
+ * @event syn-close - Emitted when the tab is closable and the close button is activated.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart close-button - The close button, an `<syn-icon-button>`.
+ * @csspart close-button__base - The close button's exported `base` part.
+ */
+import { computed, ref } from 'vue';
+import '@synergy-design-system/components/components/tab/tab.js';
+
+import type { SynCloseEvent, SynTab } from '@synergy-design-system/components';
+
+// DOM Reference to the element
+const nativeElement = ref<SynTab>();
+
+defineExpose({
+  nativeElement,
+});
+
+// Map attributes
+const props = defineProps<{
+  /**
+* The name of the tab panel this tab is associated with.
+* The panel must be located in the same tab group.
+ */
+  'panel'?: SynTab['panel'];
+
+  /**
+* Draws the tab in an active state.
+ */
+  'active'?: SynTab['active'];
+
+  /**
+* Makes the tab closable and shows a close button.
+ */
+  'closable'?: SynTab['closable'];
+
+  /**
+* Disables the tab and prevents selection.
+ */
+  'disabled'?: SynTab['disabled'];
+}>();
+
+// 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 tab is closable and the close button is activated.
+ */
+  'syn-close': [e: SynCloseEvent];
+}>();
+</script>
+
+<script lang="ts">
+export type { SynCloseEvent } from '@synergy-design-system/components';
+</script>
+
+<template>
+  <syn-tab
+    v-bind="visibleProps"
+
+    ref="nativeElement"
+    @syn-close="$emit('syn-close', $event)"
+  >
+    <slot />
+  </syn-tab>
+</template>

package/src/components/SynVueTabGroup.vue

@@ -0,0 +1,121 @@
+<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 Tab groups organize content into a container that shows one section at a time.
+ * @documentation https://synergy.style/components/tab-group
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency syn-icon-button
+ *
+ * @slot - Used for grouping tab panels in the tab group. Must be `<syn-tab-panel>` elements.
+ * @slot nav - Used for grouping tabs in the tab group. Must be `<syn-tab>` elements.
+ *
+ * @event {{ name: String }} syn-tab-show - Emitted when a tab is shown. The payload of the event returns the "panel" attribute of the shown tab.
+ * @event {{ name: String }} syn-tab-hide - Emitted when a tab is hidden. The payload of the event returns the "panel" attribute of the hidden tab.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart nav - The tab group's navigation container where tabs are slotted in.
+ * @csspart tabs - The container that wraps the tabs.
+ * @csspart active-tab-indicator - The line that highlights the currently selected tab.
+ * @csspart body - The tab group's body where tab panels are slotted in.
+ * @csspart scroll-button - The previous/next scroll buttons that show when tabs are scrollable, an `<syn-icon-button>`.
+ * @csspart scroll-button--start - The starting scroll button.
+ * @csspart scroll-button--end - The ending scroll button.
+ * @csspart scroll-button__base - The scroll button's exported `base` part.
+ *
+ * @cssproperty --indicator-color - The color of the active tab indicator.
+ * @cssproperty --indicator-width - The width of the active tab indicator.
+ * @cssproperty --track-color - The color of the indicator's track (the line that separates tabs from panels).
+ * @cssproperty --track-width - The width of the indicator's track (the line that separates tabs from panels).
+ */
+import { computed, ref } from 'vue';
+import '@synergy-design-system/components/components/tab-group/tab-group.js';
+
+import type { SynTabGroup, SynTabHideEvent, SynTabShowEvent } from '@synergy-design-system/components';
+
+// DOM Reference to the element
+const nativeElement = ref<SynTabGroup>();
+
+defineExpose({
+  nativeElement,
+});
+
+// Map attributes
+const props = defineProps<{
+  /**
+* 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.
+* When set to
+manual, the tab will receive focus but will not show until the user presses spacebar or enter.
+ */
+  'activation'?: SynTabGroup['activation'];
+
+  /**
+* Disables the scroll arrows that appear when tabs overflow.
+ */
+  'noScrollControls'?: SynTabGroup['noScrollControls'];
+
+  /**
+* 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
+ */
+  'sharp'?: SynTabGroup['sharp'];
+}>();
+
+// 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 a tab is shown.
+* The payload of the event returns the "panel" attribute of the shown tab.
+ */
+  'syn-tab-show': [e: SynTabShowEvent];
+
+  /**
+* Emitted when a tab is hidden.
+* The payload of the event returns the "panel" attribute of the hidden tab.
+ */
+  'syn-tab-hide': [e: SynTabHideEvent];
+}>();
+</script>
+
+<script lang="ts">
+export type { SynTabShowEvent } from '@synergy-design-system/components';
+export type { SynTabHideEvent } from '@synergy-design-system/components';
+</script>
+
+<template>
+  <syn-tab-group
+    v-bind="visibleProps"
+    ref="nativeElement"
+
+    @syn-tab-show="$emit('syn-tab-show', $event)"
+    @syn-tab-hide="$emit('syn-tab-hide', $event)"
+  >
+    <slot />
+  </syn-tab-group>
+</template>

package/src/components/SynVueTabPanel.vue

@@ -0,0 +1,69 @@
+<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 Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.
+ * @documentation https://synergy.style/components/tab-panel
+ * @status stable
+ * @since 2.0
+ *
+ * @slot - The tab panel's content.
+ *
+ * @csspart base - The component's base wrapper.
+ *
+ * @cssproperty --padding - The tab panel's padding.
+ */
+import { computed, ref } from 'vue';
+import '@synergy-design-system/components/components/tab-panel/tab-panel.js';
+
+import type { SynTabPanel } from '@synergy-design-system/components';
+
+// DOM Reference to the element
+const nativeElement = ref<SynTabPanel>();
+
+defineExpose({
+  nativeElement,
+});
+
+// Map attributes
+const props = defineProps<{
+  /**
+* The tab panel's name.
+ */
+  'name'?: SynTabPanel['name'];
+
+  /**
+* When true, the tab panel will be shown.
+ */
+  'active'?: SynTabPanel['active'];
+}>();
+
+// 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-tab-panel
+
+    v-bind="visibleProps"
+    ref="nativeElement"
+  >
+    <slot />
+  </syn-tab-panel>
+</template>

package/src/index.js

@@ -36,6 +36,9 @@ 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 SynVueTab } from './components/SynVueTab.vue';
+export { default as SynVueTabGroup } from './components/SynVueTabGroup.vue';
+export { default as SynVueTabPanel } from './components/SynVueTabPanel.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';