<script setup lang="ts">
  import { Input } from '@lite-space/ui'
</script>

<template>
  <Input placeholder="Please Input" />
</template>

<script setup lang="ts">
  import { Input, Space } from '@lite-space/ui'
</script>

<template>
  <Space direction="vertical">
    <Input size="small" placeholder="Please Input" />
    <Input size="default" placeholder="Please Input" />
    <Input size="large" placeholder="Please Input" />
  </Space>
</template>

<script setup lang="ts">
  import { Input, Space } from '@lite-space/ui'
</script>

<template>
  <Space direction="vertical">
    <Input addon-before="http://" placeholder="default size" />
    <Input addon-after=".com" placeholder="default size" />
    <Input addon-before="http://" placeholder="default size" addon-after=".com" />
    <Input placeholder="default size">
      <template #addonBefore>
        <span>http://</span>
      </template>
      <template #addonAfter>
        <span>.com</span>
      </template>
    </Input>
  </Space>
</template>

<script setup lang="ts">
  import { Input, Space } from '@lite-space/ui'
</script>

<template>
  <Space direction="vertical">
    <Input prefix="i-carbon:user-avatar" placeholder="default size" suffix="i-carbon:customer" />
    <Input prefix="$" placeholder="default size" suffix="rmb" />
    <Input placeholder="default size" suffix="rmb">
      <template #prefix>
        <span>$</span>
      </template>
      <template #suffix>
        <span>rmb</span>
      </template>
    </Input>
    <Input
      disabled
      prefix="i-carbon:user-avatar"
      placeholder="default size"
      suffix="i-carbon:customer"
    />
  </Space>
</template>

<script setup lang="ts">
  import { Button, InputPassword, Space } from '@lite-space/ui'

  const visible = ref(true)
  function handleChange(data: boolean) {
    console.log('data', data)
  }
</script>

<template>
  <Space>
    <InputPassword
      v-model:visible="visible"
      @change="handleChange"
    >
      <template #suffix>
        <span>123</span>
      </template>
    </InputPassword>
    <Button type="primary" @click="visible = !visible">
      {{ visible }}
    </Button>
  </Space>
</template>

<script setup lang="ts">
  import { Input } from '@lite-space/ui'

  function handleClear() {
    console.log('clear')
  }
</script>

<template>
  <Input
    clearable
    placeholder="clearable"
    @clear="handleClear"
  />
</template>

<script setup lang="ts">
  import { Space, TextArea } from '@lite-space/ui'
</script>

<template>
  <Space direction="vertical">
    <TextArea />
    <TextArea :resize="false" />
  </Space>
</template>