@synergy-design-system/vue 1.27.0 → 2.1.0

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/components/SynVueTag.vue

@@ -30,10 +30,7 @@ import type { SynRemoveEvent, SynTag } from '@synergy-design-system/components';
 // DOM Reference to the element
 const nativeElement = ref<SynTag>();
 
-// Map methods
-
 defineExpose({
-
   nativeElement,
 });
 

package/src/components/SynVueTextarea.vue

@@ -37,67 +37,7 @@ import type {
 // DOM Reference to the element
 const nativeElement = ref<SynTextarea>();
 
-// Map methods
-const callHandleDisabledChange = (...args: Parameters<SynTextarea['handleDisabledChange']>) => nativeElement.value?.handleDisabledChange(...args);
-const callHandleRowsChange = (...args: Parameters<SynTextarea['handleRowsChange']>) => nativeElement.value?.handleRowsChange(...args);
-const callHandleValueChange = (...args: Parameters<SynTextarea['handleValueChange']>) => nativeElement.value?.handleValueChange(...args);
-/**
-* Sets focus on the textarea.
- */
-const callFocus = (...args: Parameters<SynTextarea['focus']>) => nativeElement.value?.focus(...args);
-/**
-* Removes focus from the textarea.
- */
-const callBlur = (...args: Parameters<SynTextarea['blur']>) => nativeElement.value?.blur(...args);
-/**
-* Selects all the text in the textarea.
- */
-const callSelect = (...args: Parameters<SynTextarea['select']>) => nativeElement.value?.select(...args);
-/**
-* Gets or sets the textarea's scroll position.
- */
-const callScrollPosition = (...args: Parameters<SynTextarea['scrollPosition']>) => nativeElement.value?.scrollPosition(...args);
-/**
-* Sets the start and end positions of the text selection (0-based).
- */
-const callSetSelectionRange = (...args: Parameters<SynTextarea['setSelectionRange']>) => nativeElement.value?.setSelectionRange(...args);
-/**
-* Replaces a range of text with a new string.
- */
-const callSetRangeText = (...args: Parameters<SynTextarea['setRangeText']>) => nativeElement.value?.setRangeText(...args);
-/**
-* Checks for validity but does not show a validation message.
-* Returns `true` when valid and `false` when invalid.
- */
-const callCheckValidity = (...args: Parameters<SynTextarea['checkValidity']>) => nativeElement.value?.checkValidity(...args);
-/**
-* Gets the associated form, if one exists.
- */
-const callGetForm = (...args: Parameters<SynTextarea['getForm']>) => nativeElement.value?.getForm(...args);
-/**
-* Checks for validity and shows the browser's validation message if the control is invalid.
- */
-const callReportValidity = (...args: Parameters<SynTextarea['reportValidity']>) => nativeElement.value?.reportValidity(...args);
-/**
-* Sets a custom validation message.
-* Pass an empty string to restore validity.
- */
-const callSetCustomValidity = (...args: Parameters<SynTextarea['setCustomValidity']>) => nativeElement.value?.setCustomValidity(...args);
-
 defineExpose({
-  callHandleDisabledChange,
-  callHandleRowsChange,
-  callHandleValueChange,
-  callFocus,
-  callBlur,
-  callSelect,
-  callScrollPosition,
-  callSetSelectionRange,
-  callSetRangeText,
-  callCheckValidity,
-  callGetForm,
-  callReportValidity,
-  callSetCustomValidity,
   nativeElement,
 });
 

package/src/components/SynVueTooltip.vue

@@ -43,25 +43,7 @@ import type {
 // DOM Reference to the element
 const nativeElement = ref<SynTooltip>();
 
-// Map methods
-const callHandleOpenChange = (...args: Parameters<SynTooltip['handleOpenChange']>) => nativeElement.value?.handleOpenChange(...args);
-const callHandleOptionsChange = (...args: Parameters<SynTooltip['handleOptionsChange']>) => nativeElement.value?.handleOptionsChange(...args);
-const callHandleDisabledChange = (...args: Parameters<SynTooltip['handleDisabledChange']>) => nativeElement.value?.handleDisabledChange(...args);
-/**
-* Shows the tooltip.
- */
-const callShow = (...args: Parameters<SynTooltip['show']>) => nativeElement.value?.show(...args);
-/**
-* Hides the tooltip
- */
-const callHide = (...args: Parameters<SynTooltip['hide']>) => nativeElement.value?.hide(...args);
-
 defineExpose({
-  callHandleOpenChange,
-  callHandleOptionsChange,
-  callHandleDisabledChange,
-  callShow,
-  callHide,
   nativeElement,
 });
 

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';