Input 输入框

<template>
  <div class="p-4 w-full">
    <SkInput />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('Hello')
</script>

<template>
  <div class="p-4 w-full">
    <SkInput v-model="value" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
</script>

<template>
  <div class="flex flex-col gap-3 p-4 w-full">
    <SkInput v-model="value" placeholder="请输入您的姓名" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const textValue = ref()
const numberValue = ref()
const digitValue = ref()
</script>

<template>
  <div class="flex flex-col p-4 gap-3 w-full">
    <SkInput v-model="textValue" type="text" placeholder="请输入文本" />
    <SkInput v-model="numberValue" type="number" placeholder="请输入数字" />
    <SkInput v-model="digitValue" type="digit" placeholder="请输入带小数点的数字" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const smallValue = ref('')
const mediumValue = ref('')
const largeValue = ref('')
</script>

<template>
  <div class="flex flex-col p-4 gap-3 w-full">
    <SkInput v-model="smallValue" size="small" placeholder="小尺寸输入框" />
    <SkInput v-model="mediumValue" size="medium" placeholder="中尺寸输入框" />
    <SkInput v-model="largeValue" size="large" placeholder="大尺寸输入框" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const passwordValue = ref()
const numericPasswordValue = ref()
</script>

<template>
  <div class="flex flex-col gap-3 p-4 w-full">
    <SkInput
      v-model="passwordValue"
      placeholder="请输入密码"
      password
    />
    <SkInput
      v-model="numericPasswordValue"
      type="number"
      placeholder="请输入6位数字密码"
      password
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const readonlyValue = ref()
const readonlyWithValue = ref('这是只读状态含值的输入框')
</script>

<template>
  <div class="flex flex-col gap-3 p-4 w-full">
    <SkInput
      v-model="readonlyValue"
      placeholder="只读状态，无法编辑"
      readonly
    />
    <SkInput
      v-model="readonlyWithValue"
      placeholder="只读状态，有值"
      readonly
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const disabledValue = ref()
const disabledWithValue = ref('这是禁用状态含值的输入框')
</script>

<template>
  <div class="flex flex-col gap-3 p-4 w-full">
    <SkInput v-model="disabledValue" disabled placeholder="禁用状态，无法输入" />
    <SkInput v-model="disabledWithValue" disabled />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
</script>

<template>
  <div class="p-4 w-full">
    <SkInput
      v-model="value"
      :maxlength="10"
      placeholder="最多输入10个字符"
    />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
</script>

<template>
  <div class="p-4 w-full">
    <SkInput
      v-model="value"
      placeholder="写下你的名言..."
      :maxlength="20"
    >
      <template #trailing="{ clax }">
        <span :class="clax">{{ value.length }}/20</span>
      </template>
    </SkInput>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const roundedValue = ref('')
const gradientValue = ref('')
</script>

<template>
  <div class="flex flex-col gap-3 p-4 w-full">
    <SkInput
      v-model="roundedValue"
      placeholder="圆角输入框"
      :clax="{
        root: 'rounded-full bg-transparent border-2 border-solid border-brand',
      }"
    />
    <SkInput
      v-model="gradientValue"
      placeholder="渐变背景输入框"
      :clax="{
        root: 'bg-gradient-to-r from-brand/10 to-success/10 border border-brand/30',
      }"
    />
  </div>
</template>