<script setup lang='ts'>
import AInputPassword from './AInputPassword.vue'

const initState = () => ({
  text: 'Password input',
  disabled: false,
  label: 'Label',
  size: 'md',
  error: '',
  required: false,
})


const sizeOptions = [
  { value: 'sm', label: 'Small' },
  { value: 'md', label: 'Medium' }
]

</script>

<template>
  <Story
    title="Forms/Input/Password"
    :layout="{
      type: 'grid',
      width: 500,
    }"
  >
    <Variant
      title="InputPassword"
      :init-state="initState"
    >
      <template #default="{state}">
        <div class="p-10">
          <a-input-password
            v-model="state.text"
            v-bind="state"
          />

          <p class="mt-5">
            <span class="font-bold">v-model value:</span> {{ state.text }}
          </p>
        </div>
      </template>

      <template #controls="{ state }">
        <HstSelect
          v-model="state.size"
          title="Size"
          :options="sizeOptions"
        />
        <HstCheckbox
          v-model="state.disabled"
          title="Disabled"
        />
        <HstCheckbox
          v-model="state.required"
          title="Required"
        />
        <HstText
          v-model="state.text"
          title="Text"
        />
        <HstText
          v-model="state.label"
          title="Label"
        />
        <HstText
          v-model="state.error"
          title="Error"
        />
      </template>
    </Variant>
  </Story>
</template>

<style scoped>

</style>
