Zone de texte

<script setup lang="ts">
import { ref } from 'vue'
import { VTextarea } from 'vectis-ui'

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

<template>
  <VTextarea v-model="message" label="Message" placeholder="What would you like to tell us?" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { VTextarea } from 'vectis-ui'

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

<template>
  <VTextarea
    v-model="bio"
    label="Short bio"
    hint="Two or three sentences. It appears on your public profile."
    placeholder="What do you work on?"
  />
</template>

<script setup lang="ts">
import { VTextarea } from 'vectis-ui'

const sizes = ['sm', 'md', 'lg'] as const
</script>

<template>
  <div class="grid">
    <template v-for="size in sizes" :key="size">
      <VTextarea :size="size" :label="size" :rows="2" />
      <VTextarea :size="size" :label="`${size} compact`" :rows="2" compact />
    </template>
  </div>
</template>

<style scoped>
/* Two columns wherever there is room for them, so each size is read against its own
   compact form rather than against the size above it. */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  gap: var(--vectis-space-4);
}
</style>

<script setup lang="ts">
import { VTextarea } from 'vectis-ui'
import { description, info } from 'vectis-ui/icons'
</script>

<template>
  <VTextarea :icon-start="description" label="Start icon" :rows="2" />
  <VTextarea :icon-end="info" label="End icon" :rows="2" />
  <VTextarea :icon-start="description" :icon-end="info" label="Both" :rows="2" />
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import { VTextarea } from 'vectis-ui'
import { attach_file as attachFile, code } from 'vectis-ui/icons'

const message = ref('')
const attachments = ref(0)

const hint = computed(() => {
  if (attachments.value === 0) return 'Nothing attached yet.'
  return attachments.value === 1 ? '1 file attached.' : `${attachments.value} files attached.`
})

function insertCodeBlock() {
  message.value += '\n```\n\n```'
}
</script>

<template>
  <VTextarea
    v-model="message"
    label="Message"
    :hint="hint"
    :rows="4"
    :icon-start="code"
    icon-start-label="Insert a code block"
    :icon-end="attachFile"
    icon-end-label="Attach a file"
    @click:icon-start="insertCodeBlock"
    @click:icon-end="attachments += 1"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { VTextarea } from 'vectis-ui'

const draft = ref('A first attempt, worth throwing away in one go.')
</script>

<template>
  <VTextarea v-model="draft" label="Draft" clearable :rows="3" />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { VTextarea } from 'vectis-ui'

const summary = ref('Vue developer in Lyon.')
const review = ref('')
const note = ref('')
</script>

<template>
  <VTextarea
    v-model="summary"
    label="Summary"
    hint="The browser refuses the eighty-first character."
    :maxlength="80"
    counter
    :rows="2"
  />

  <VTextarea
    v-model="review"
    label="Review"
    hint="Type past eighty and the field goes into error instead."
    :maxlength="80"
    soft-limit
    counter
    :rows="3"
  />

  <VTextarea
    v-model="note"
    label="Note"
    hint="No limit, so the counter only counts."
    counter
    :rows="2"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { VTextarea } from 'vectis-ui'

const text =
  'Both fields start two rows tall.\nAdd a line to each of them.\nThe first one scrolls, the second one gets taller.'

const fixed = ref(text)
const growing = ref(text)
</script>

<template>
  <VTextarea v-model="fixed" label="Fixed height" :rows="2" />
  <VTextarea v-model="growing" label="Grows with the text" :rows="2" auto-grow />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { VTextarea } from 'vectis-ui'

const invalid = ref('Too short')
const disabled = ref('Waiting on the form to be submitted')
const readonly = ref('Signed off on 12 March, and no longer open to changes')
const loading = ref('Writing a summary')
</script>

<template>
  <VTextarea
    v-model="invalid"
    label="Invalid"
    hint="Say a little more than that."
    invalid
    :rows="2"
  />
  <VTextarea v-model="disabled" label="Disabled" disabled :rows="2" />
  <VTextarea v-model="readonly" label="Read only" readonly :rows="2" />
  <VTextarea v-model="loading" label="Loading" loading :rows="2" />
</template>