<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
 * @since 2.6.0
 *
 * @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.
 *
 * @csspart tooltip__base - The base of the tooltip
 * @csspart tooltip__arrow - The arrow of the tooltip
 * @csspart tooltip__popup - The popup of the tooltip
 * @csspart tooltip__body - The body of the tooltip
 *
 * @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 } from '@synergy-design-system/components';
import type { SynChangeEvent } from '@synergy-design-system/components';
import type { SynFocusEvent } from '@synergy-design-system/components';
import type { SynInputEvent } from '@synergy-design-system/components';
import type { SynInvalidEvent } from '@synergy-design-system/components';
import type { SynMoveEvent } from '@synergy-design-system/components';
import type SynRange from '@synergy-design-system/components/components/range/range.component.js';

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

  /**
   * Sets the range to a readonly state.
   */
  readonly?: SynRange['readonly'];

  /**
   * 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'];

  /**
* Set to true to restrict the movement of a thumb to its next and previous thumb.
This only affects multi range components
 */
  restrictMovement?: SynRange['restrictMovement'];

  /**
* 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'];

  /**
* A function used to format the tooltip's value.
The value of the thumb is passed as the only argument.
The function should return a string to display in the tooltip.
 */
  tooltipFormatter?: SynRange['tooltipFormatter'];

  /**
   * 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
    @syn-blur="$emit('syn-blur', $event)"
    @syn-change="
      $emit('update:modelValue', ($event.target as SynRange).value);
      $emit('syn-change', $event);
    "
    @syn-focus="$emit('syn-focus', $event)"
    @syn-input="$emit('syn-input', $event)"
    @syn-invalid="$emit('syn-invalid', $event)"
    @syn-move="$emit('syn-move', $event)"
    :value="
      typeof props.modelValue !== 'undefined'
        ? props.modelValue
        : typeof props.value !== 'undefined'
          ? props.value
          : undefined
    "
    v-bind="visibleProps"
    ref="nativeElement">
    <slot></slot>
  </syn-range>
</template>
