@synergy-design-system/vue 2.5.0 → 2.7.0

package/src/components/SynVueRange.vue

@@ -0,0 +1,210 @@
+<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 Ranges allow the user to select values within a given range using one or two thumbs.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-range--docs
+ * @status stable
+ *
+ * @dependency syn-tooltip
+ *
+ * @slot label - The range's label. Alternatively, you can use the `label` attribute.
+ * @slot prefix - Used to prepend a presentational icon or similar element to the range.
+ * @slot suffix - Used to append a presentational icon or similar element to the range.
+ * @slot help-text - Text that describes how to use the range.
+ * Alternatively, you can use the `help-text` attribute.
+ * @slot ticks - Used to display tick marks at specific intervals along the range.
+ *
+ * @event syn-blur - Emitted when the control loses focus.
+ * @event syn-change - Emitted when an alteration to the control's value is committed by the user.
+ * @event syn-focus - Emitted when the control gains focus.
+ * @event syn-input - Emitted when the control receives input.
+ * @event syn-invalid - Emitted when the form control has been checked for validity
+ * and its constraints aren't satisfied.
+ * @event syn-move - Emitted when the user moves a thumb, either via touch or keyboard.
+ * Use `Event.preventDefault()` to prevent movement.
+ *
+ * @csspart form-control - The form control that wraps the label, input, and help text.
+ * @csspart form-control-label - The label's wrapper.
+ * @csspart form-control-help-text - The help text's wrapper.
+ * @csspart base - The component's base wrapper.
+ * @csspart input-wrapper - The container that wraps the input track and ticks.
+ * @csspart track-wrapper - The wrapper for the track.
+ * @csspart track - The inactive track.
+ * @csspart active-track - The active track.
+ * @csspart prefix - The container that wraps the prefix.
+ * @csspart suffix - The container that wraps the suffix.
+ * @csspart ticks - The container that wraps the tick marks.
+ * @csspart thumb - The thumb(s) that the user can drag to change the range.
+ *
+ * @cssproperty --thumb-size - The size of a thumb.
+ * @cssproperty --thumb-hit-area-size - The clickable area around the thumb.
+ * Per default this is set to 140% of the thumb size. Must be a scale css value (defaults to 1.4).
+ * @cssproperty --track-hit-area-size - The clickable area around the track (top and left).
+ * @cssproperty --track-color-active - Color of the track representing the current value.
+ * @cssproperty --track-color-inactive - Color of the track that represents the remaining value.
+ * @cssproperty --track-height - The height of the track.
+ * @cssproperty --track-active-offset - The point of origin of the active track,
+ * starting at the left side of the range.
+ */
+import { computed, ref } from 'vue';
+import '@synergy-design-system/components/components/range/range.js';
+
+import type {
+  SynBlurEvent, SynChangeEvent, SynFocusEvent, SynInputEvent, SynInvalidEvent, SynMoveEvent, SynRange,
+} from '@synergy-design-system/components';
+
+// DOM Reference to the element
+const nativeElement = ref<SynRange>();
+
+defineExpose({
+  nativeElement,
+});
+
+// Map attributes
+const props = defineProps<{
+  /**
+* The name of the range, submitted as a name/value pair with form data.
+ */
+  'name'?: SynRange['name'];
+
+  /**
+* The range's label.
+* If you need to display HTML, use the `label` slot instead.
+ */
+  'label'?: SynRange['label'];
+
+  /**
+* The range's help text.
+* If you need to display HTML, use the help-text slot instead.
+ */
+  'helpText'?: SynRange['helpText'];
+
+  /**
+* Disables the range.
+ */
+  'disabled'?: SynRange['disabled'];
+
+  /**
+* The minimum acceptable value of the range.
+ */
+  'min'?: SynRange['min'];
+
+  /**
+* The maximum acceptable value of the range.
+ */
+  'max'?: SynRange['max'];
+
+  /**
+* The interval at which the range will increase and decrease.
+ */
+  'step'?: SynRange['step'];
+
+  /**
+* The range's size.
+ */
+  'size'?: SynRange['size'];
+
+  /**
+* The preferred placement of the range's tooltip.
+* Use "none" to disable the tooltip
+ */
+  'tooltipPlacement'?: SynRange['tooltipPlacement'];
+
+  /**
+* The current values of the input (in ascending order) as a string of space separated values
+ */
+  'value'?: SynRange['value'];
+
+  /**
+* By default, form controls are associated with the nearest containing `<form>` element.
+This attribute allows you to place the form control outside of a form
+and associate it with the form that has this `id`.
+The form must be in the same document or shadow root for this to work.
+ */
+  'form'?: SynRange['form'];
+
+  /**
+* Support for two way data binding
+ */
+  modelValue?: SynRange['value'];
+}>();
+
+// 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 control loses focus.
+ */
+  'syn-blur': [e: SynBlurEvent];
+
+  /**
+* Emitted when an alteration to the control's value is committed by the user.
+ */
+  'syn-change': [e: SynChangeEvent];
+
+  /**
+* Emitted when the control gains focus.
+ */
+  'syn-focus': [e: SynFocusEvent];
+
+  /**
+* Emitted when the control receives input.
+ */
+  'syn-input': [e: SynInputEvent];
+
+  /**
+* Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+ */
+  'syn-invalid': [e: SynInvalidEvent];
+
+  /**
+* Emitted when the user moves a thumb, either via touch or keyboard.
+* Use `Event.preventDefault()` to prevent movement.
+ */
+  'syn-move': [e: SynMoveEvent];
+
+  /**
+* Support for two way data binding
+ */
+  'update:modelValue': [newValue: SynRange['value']];
+}>();
+</script>
+
+<script lang="ts">
+export type { SynBlurEvent } from '@synergy-design-system/components';
+export type { SynChangeEvent } from '@synergy-design-system/components';
+export type { SynFocusEvent } from '@synergy-design-system/components';
+export type { SynInputEvent } from '@synergy-design-system/components';
+export type { SynInvalidEvent } from '@synergy-design-system/components';
+export type { SynMoveEvent } from '@synergy-design-system/components';
+</script>
+
+<template>
+  <syn-range
+    v-bind="visibleProps"
+    ref="nativeElement"
+    :value="typeof props.modelValue !== 'undefined' ? props.modelValue : typeof props.value !== 'undefined' ? props.value : undefined"
+    @syn-blur="$emit('syn-blur', $event)"
+    @syn-change="$emit('syn-change', $event)"
+    @syn-focus="$emit('syn-focus', $event)"
+    @syn-input="$emit('update:modelValue', $event.target.value); $emit('syn-input', $event)"
+    @syn-invalid="$emit('syn-invalid', $event)"
+    @syn-move="$emit('syn-move', $event)"
+  >
+    <slot />
+  </syn-range>
+</template>

package/src/components/SynVueRangeTick.vue

@@ -0,0 +1,62 @@
+<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 Ticks visually improve positioning on range sliders.
+ * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-range--docs
+ * @status stable
+ *
+ * @slot - The tick's label
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart label - The component's label.
+ * @csspart line - The component's tick line.
+ *
+ * @cssproperty --tick-height - The height of the tick marker.
+ * @cssproperty --tick-label-top - The top offset of the tick label.
+ */
+import { computed, ref } from 'vue';
+import '@synergy-design-system/components/components/range-tick/range-tick.js';
+
+import type { SynRangeTick } from '@synergy-design-system/components';
+
+// DOM Reference to the element
+const nativeElement = ref<SynRangeTick>();
+
+defineExpose({
+  nativeElement,
+});
+
+// Map attributes
+const props = defineProps<{
+  /**
+* Whether the tick should be shown as a subdivision.
+ */
+  'subdivision'?: SynRangeTick['subdivision'];
+}>();
+
+// 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'),
+));
+
+</script>
+
+<template>
+  <syn-range-tick
+
+    v-bind="visibleProps"
+    ref="nativeElement"
+  >
+    <slot />
+  </syn-range-tick>
+</template>

package/src/components/SynVueSelect.vue

@@ -18,6 +18,7 @@
  * @slot - The listbox options. Must be `<syn-option>` elements. You can use `<syn-divider>` to group items visually.
  * @slot label - The input's label. Alternatively, you can use the `label` attribute.
  * @slot prefix - Used to prepend a presentational icon or similar element to the combobox.
+ * @slot suffix - Used to append a presentational icon or similar element to the combobox.
  * @slot clear-icon - An icon to use in lieu of the default clear icon.
  * @slot expand-icon - The icon to show when the control is expanded and collapsed. Rotates on open and close.
  * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
@@ -37,8 +38,9 @@
  * @csspart form-control-label - The label's wrapper.
  * @csspart form-control-input - The select's wrapper.
  * @csspart form-control-help-text - The help text's wrapper.
- * @csspart combobox - The container the wraps the prefix, combobox, clear icon, and expand button.
+ * @csspart combobox - The container the wraps the prefix, suffix, combobox, clear icon, and expand button.
  * @csspart prefix - The container that wraps the prefix slot.
+ * @csspart suffix - The container that wraps the suffix slot.
  * @csspart display-input - The element that displays the selected option's label, an `<input>` element.
  * @csspart listbox - The listbox container where options are slotted.
  * @csspart tags - The container that houses option tags when `multiselect` is used.

package/src/index.js

@@ -35,6 +35,8 @@ export { default as SynVueProgressRing } from './components/SynVueProgressRing.v
 export { default as SynVueRadio } from './components/SynVueRadio.vue';
 export { default as SynVueRadioButton } from './components/SynVueRadioButton.vue';
 export { default as SynVueRadioGroup } from './components/SynVueRadioGroup.vue';
+export { default as SynVueRange } from './components/SynVueRange.vue';
+export { default as SynVueRangeTick } from './components/SynVueRangeTick.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';