<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 Checkboxes allow the user to toggle an option on or off.
 * @documentation https://synergy-design-system.github.io/?path=/docs/components-syn-checkbox--docs
 * @status stable
 * @since 1.0.0
 *
 * @dependency syn-icon
 *
 * @slot - The checkbox's label.
 * @slot help-text - Text that describes how to use the checkbox. Alternatively, you can use the `help-text` attribute.
 *
 * @event syn-blur - Emitted when the checkbox loses focus.
 * @event syn-change - Emitted when the checked state changes.
 * @event syn-focus - Emitted when the checkbox gains focus.
 * @event syn-input - Emitted when the checkbox receives input.
 * @event syn-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
 *
 * @csspart base - The component's base wrapper.
 * @csspart control - The square container that wraps the checkbox's checked state.
 * @csspart control--checked - Matches the control part when the checkbox is checked.
 * @csspart control--indeterminate - Matches the control part when the checkbox is indeterminate.
 * @csspart checked-icon - The checked icon, an `<syn-icon>` element.
 * @csspart indeterminate-icon - The indeterminate icon, an `<syn-icon>` element.
 * @csspart label - The container that wraps the checkbox's label.
 * @csspart form-control-help-text - The help text's wrapper.
 */
import { computed, ref } from 'vue';
import '@synergy-design-system/components/components/checkbox/checkbox.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 SynCheckbox from '@synergy-design-system/components/components/checkbox/checkbox.component.js';

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

defineExpose({
  nativeElement,
});

// Map attributes
const props = defineProps<{
  title?: SynCheckbox['title'];

  /**
   * The name of the checkbox, submitted as a name/value pair with form data.
   */
  name?: SynCheckbox['name'];

  /**
   * The current value of the checkbox, submitted as a name/value pair with form data.
   */
  value?: SynCheckbox['value'];

  /**
   * The checkbox's size.
   */
  size?: SynCheckbox['size'];

  /**
   * Disables the checkbox.
   */
  disabled?: SynCheckbox['disabled'];

  /**
   * Sets the checkbox to a readonly state.
   */
  readonly?: SynCheckbox['readonly'];

  /**
   * Draws the checkbox in a checked state.
   */
  checked?: SynCheckbox['checked'];

  /**
* Draws the checkbox in an indeterminate state.
* This is usually applied to checkboxes that represents a "select
all/none" behavior when associated checkboxes have a mix of checked and unchecked states.
 */
  indeterminate?: SynCheckbox['indeterminate'];

  /**
* 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?: SynCheckbox['form'];

  /**
   * Makes the checkbox a required field.
   */
  required?: SynCheckbox['required'];

  /**
   * The checkbox's help text.
   * If you need to display HTML, use the `help-text` slot instead.
   */
  helpText?: SynCheckbox['helpText'];

  /**
   * Support for two way data binding
   */
  modelValue?: SynCheckbox['checked'];
}>();

// 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 checkbox loses focus.
   */
  'syn-blur': [e: SynBlurEvent];

  /**
   * Emitted when the checked state changes.
   */
  'syn-change': [e: SynChangeEvent];

  /**
   * Emitted when the checkbox gains focus.
   */
  'syn-focus': [e: SynFocusEvent];

  /**
   * Emitted when the checkbox 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];

  /**
   * Support for two way data binding
   */
  'update:modelValue': [newValue: SynCheckbox['checked']];
}>();
</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';
</script>

<template>
  <syn-checkbox
    @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 as SynCheckbox).checked);
      $emit('syn-input', $event);
    "
    @syn-invalid="$emit('syn-invalid', $event)"
    :checked="
      typeof props.modelValue !== 'undefined'
        ? props.modelValue
        : typeof props.checked !== 'undefined'
          ? props.checked
          : undefined
    "
    v-bind="visibleProps"
    ref="nativeElement">
    <slot></slot>
  </syn-checkbox>
</template>
