<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 Validate provides form field validation messages in a unified way.
 * It does this by using [the native browser validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)
 * and showing the validation message in a consistent, user defined way.
 * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-validate--docs
 * @status stable
 * @since 2.12.0
 *
 * @dependency syn-alert
 * @dependency syn-tooltip
 *
 * @slot - The form field that should be validated.
 * Avoid slotting in more than one element, as subsequent ones will be ignored.
 *
 * @csspart base - The component's base wrapper.
 * @csspart input-wrapper - The container that wraps the form field.
 *
 * @csspart alert - The syn-alert that is shown when the variant is set to "inline".
 * @csspart alert__base - The container that wraps the alert.
 * @csspart alert__message - The container that wraps the alert message.
 * @csspart alert__icon - The container that wraps the alert icon.
 *
 * @csspart tooltip - The syn-tooltip that is shown when the variant is set to "tooltip".
 * @csspart tooltip__base - The container that wraps the tooltip.
 * @csspart tooltip__popup - The container that wraps the tooltip popup.
 * @csspart tooltip__arrow - The container that wraps the tooltip arrow.
 * @csspart tooltip__body - The container that wraps the tooltip body.
 */
import { computed, ref } from 'vue';
import '@synergy-design-system/components/components/validate/validate.js';

import type SynValidate from '@synergy-design-system/components/components/validate/validate.component.js';

// DOM Reference to the element
const nativeElement = ref<SynValidate>();

defineExpose({
  nativeElement,
});

// Map attributes
const props = defineProps<{
  /**
* The variant that should be used to show validation alerts.

The following variants are supported:
- **native** (default): Uses the native browser validation, usually a browser tooltip.
- **tooltip**: Show the validation message as a tooltip using a `<syn-tooltip>`.
- **inline**: Show the validation message underneath the element, using a `<syn-alert>`
 */
  variant?: SynValidate['variant'];

  /**
   * Do not show the error icon when using the inline variant validation
   */
  hideIcon?: SynValidate['hideIcon'];

  /**
* Defines the events that trigger the validation.
`invalid` will always automatically be included.
You may also use the `live` keyword to validate on every input change.
`live` will make sure to listen to the `invalid`, `input` and `blur` events.

Please have a look at the [documentation for native form validation](https://developer.mozilla.org/en-US/docs/Learn/Forms/Form_validation)
and [the use of form invalid events](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event) for further information.
 */
  on?: SynValidate['on'];

  /**
* Custom validation message to be displayed when the input is invalid.
Will override the default browser validation message.
Set to an empty string to reset the validation message.
 */
  customValidationMessage?: SynValidate['customValidationMessage'];

  /**
* Set this to true to validate the input immediately when it is rendered.
Best used with a `variant` of `inline`.
When setting eager, the input will not be focused automatically.

When using a `variant` of `native` the browser will focus
the last eager field as it is using a tooltip.
In this case it is better to just provide one eager field.
 */
  eager?: SynValidate['eager'];
}>();

// 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-validate v-bind="visibleProps" ref="nativeElement">
    <slot></slot>
  </syn-validate>
</template>
