@maz-ui/mcp 5.0.1-beta.0 → 5.1.0-beta.1

package/docs/src/components/maz-textarea.md

@@ -1,400 +0,0 @@
----
-title: MazTextarea
-description: MazTextarea is a standalone component that replaces the standard html textarea input with a beautiful design system. Many options like colors, disabled, error, warning, success and error messages are available.
----
-
-# {{ $frontmatter.title }}
-
-{{ $frontmatter.description }}
-
-<!--@include: ./../../.vitepress/mixins/getting-started.md-->
-
-::: info
-This component uses the native CSS `field-sizing: content` property for autogrow — the textarea expands automatically as the user types, with zero JavaScript overhead.
-:::
-
-## Basic usage
-
-<ComponentDemo expanded>
-  <MazTextarea
-    v-model="mainValue"
-    name="comment"
-    label="Enter your comment"
-  />
-
-<template #code>
-
-```vue
-<script lang="ts" setup>
-import MazTextarea from 'maz-ui/components/MazTextarea'
-import { ref } from 'vue'
-
-const value = ref()
-</script>
-
-<template>
-  <MazTextarea
-    v-model="value"
-    name="comment"
-    label="Enter your comment"
-  />
-</template>
-```
-
-  </template>
-</ComponentDemo>
-
-## With top-label
-
-You can use the `top-label` attribute to display a top label above the textarea.
-
-<ComponentDemo>
-  <MazTextarea
-    v-model="value"
-    top-label="Your message"
-    placeholder="Type your message..."
-  />
-
-<template #code>
-
-```html
-<MazTextarea
-  v-model="value"
-  top-label="Your message"
-  placeholder="Type your message..."
-/>
-```
-
-  </template>
-</ComponentDemo>
-
-## With assistive text
-
-You can use the `assistive-text` attribute to display a assistive text below the textarea.
-
-<ComponentDemo>
-  <MazTextarea
-    v-model="value"
-    top-label="Your message"
-    placeholder="Type your message..."
-    assistive-text="This is an assistive text"
-  />
-
-<template #code>
-
-```html
-<MazTextarea
-  v-model="value"
-  top-label="Your message"
-  placeholder="Type your message..."
-  assistive-text="This is an assistive text"
-/>
-```
-
-  </template>
-</ComponentDemo>
-
-## With label and append slots
-
-You can use the `label` and `append` slots to customize the label and the append element.
-
-<ComponentDemo>
-  <MazTextarea
-    v-model="value"
-    name="comment"
-  >
-    <template #label>
-      <MazIcon icon="/envelope.svg" class="maz:text-xl" />
-      <span class="maz:ms-2">
-        The custom label
-      </span>
-    </template>
-    <template #append>
-      <MazBtn icon="/paper-airplane.svg" size="sm" @click="sendMessage" />
-    </template>
-  </MazTextarea>
-
-<template #code>
-
-```vue
-<script lang="ts" setup>
-import { useToast } from 'maz-ui/composables'
-import { ref } from 'vue'
-
-const value = ref<string>()
-
-const toast = useToast()
-
-function sendMessage() {
-  toast.success('Message sent', {
-    position: 'top-right',
-  })
-  value.value = ''
-}
-</script>
-
-<template>
-  <MazTextarea
-    v-model="value"
-    name="comment"
-  >
-    <template #label>
-      <MazIcon icon="/envelope.svg" class="maz:text-xl" />
-      <span class="maz:ms-2">
-        The custom label
-      </span>
-    </template>
-    <template #append>
-      <MazBtn icon="paper-airplane" size="sm" @click="sendMessage" />
-    </template>
-  </MazTextarea>
-</template>
-```
-
-  </template>
-</ComponentDemo>
-
-## With hint and state
-
-You can use the `hint` attribute to display a hint message. This will replace the label.
-
-<ComponentDemo>
-  <div class="maz:flex maz:flex-col maz:gap-4">
-    <MazTextarea
-      v-model="value"
-      name="comment"
-      label="This is a label"
-      hint="This is a hint message"
-    />
-    <MazTextarea
-      v-model="value"
-      name="comment"
-      label="This is a label"
-      hint="This is a hint message"
-      error
-    />
-    <MazTextarea
-      v-model="value"
-      name="comment"
-      label="This is a label"
-      hint="This is a hint message"
-      success
-    />
-    <MazTextarea
-      v-model="value"
-      name="comment"
-      label="This is a label"
-      hint="This is a hint message"
-      warning
-    />
-    <hr class="maz:my-4">
-    <MazTextarea
-      v-model="value"
-      name="comment"
-      top-label="This is a label"
-      hint="This is a hint message"
-    />
-    <MazTextarea
-      v-model="value"
-      name="comment"
-      top-label="This is a label"
-      hint="This is a hint message"
-      error
-    />
-    <MazTextarea
-      v-model="value"
-      name="comment"
-      top-label="This is a label"
-      hint="This is a hint message"
-      success
-    />
-    <MazTextarea
-      v-model="value"
-      name="comment"
-      top-label="This is a label"
-      hint="This is a hint message"
-      warning
-    />
-  </div>
-
-<template #code>
-
-```vue
-<template>
-  <MazTextarea
-    v-model="value"
-    name="comment"
-    label="This is a label"
-    hint="This is a hint message"
-  />
-  <MazTextarea
-    v-model="value"
-    name="comment"
-    label="This is a label"
-    hint="This is a hint message"
-    error
-  />
-  <MazTextarea
-    v-model="value"
-    name="comment"
-    label="This is a label"
-    hint="This is a hint message"
-    success
-  />
-  <MazTextarea
-    v-model="value"
-    name="comment"
-    label="This is a label"
-    hint="This is a hint message"
-    warning
-  />
-  <hr class="maz:my-4">
-  <MazTextarea
-    v-model="value"
-    name="comment"
-    top-label="This is a label"
-    hint="This is a hint message"
-  />
-  <MazTextarea
-    v-model="value"
-    name="comment"
-    top-label="This is a label"
-    hint="This is a hint message"
-    error
-  />
-  <MazTextarea
-    v-model="value"
-    name="comment"
-    top-label="This is a label"
-    hint="This is a hint message"
-    success
-  />
-  <MazTextarea
-    v-model="value"
-    name="comment"
-    top-label="This is a label"
-    hint="This is a hint message"
-    warning
-  />
-</template>
-```
-
-  </template>
-</ComponentDemo>
-
-## Disable autogrow
-
-By default, the textarea automatically expands as the user types. You can disable this behavior with the `autogrow` prop set to `false` — the textarea will then have a fixed height with a manual resize handle.
-
-<ComponentDemo>
-  <MazTextarea
-    v-model="value"
-    name="comment"
-    label="Fixed height textarea"
-    :autogrow="false"
-  />
-
-<template #code>
-
-```html
-<MazTextarea v-model="value" name="comment" label="Fixed height textarea" :autogrow="false" />
-```
-
-  </template>
-</ComponentDemo>
-
-## Minimum rows (compact / input-like)
-
-Use the `min-rows` prop to control the initial (minimum) height of the textarea. It defaults to `3` lines. Set it to `1` to make the textarea start at the height of a regular input while keeping the autogrow behavior: it grows line by line as the user types.
-
-<ComponentDemo>
-  <MazTextarea
-    v-model="value"
-    name="comment"
-    :min-rows="1"
-    rounded-size="xl"
-    placeholder="Send your message"
-  />
-
-<template #code>
-
-```vue
-<template>
-  <MazTextarea
-    v-model="value"
-    name="comment"
-    :min-rows="1"
-    rounded-size="xl"
-    placeholder="Send your message"
-  />
-</template>
-```
-
-  </template>
-</ComponentDemo>
-
-## Sizes
-
-The `size` prop controls the padding (height) and text size of the textarea, mirroring the `MazInput` sizes (`mini`, `xs`, `sm`, `md`, `lg`, `xl`). Combined with `:min-rows="1"`, a given size matches the height of a `MazInput` of the same size, while keeping the autogrow behavior.
-
-<ComponentDemo>
-  <div class="maz:flex maz:flex-col maz:gap-4">
-    <MazTextarea v-model="value" name="comment" size="xs" :min-rows="1" placeholder="Size xs" />
-    <MazTextarea v-model="value" name="comment" size="sm" :min-rows="1" placeholder="Size sm" />
-    <MazTextarea v-model="value" name="comment" size="md" :min-rows="1" placeholder="Size md" />
-    <MazTextarea v-model="value" name="comment" size="lg" :min-rows="1" placeholder="Size lg" />
-    <MazTextarea v-model="value" name="comment" size="xl" :min-rows="1" placeholder="Size xl" />
-  </div>
-
-<template #code>
-
-```vue
-<template>
-  <MazTextarea v-model="value" name="comment" size="xs" :min-rows="1" placeholder="Size xs" />
-  <MazTextarea v-model="value" name="comment" size="sm" :min-rows="1" placeholder="Size sm" />
-  <MazTextarea v-model="value" name="comment" size="md" :min-rows="1" placeholder="Size md" />
-  <MazTextarea v-model="value" name="comment" size="lg" :min-rows="1" placeholder="Size lg" />
-  <MazTextarea v-model="value" name="comment" size="xl" :min-rows="1" placeholder="Size xl" />
-</template>
-```
-
-  </template>
-</ComponentDemo>
-
-## Disabled
-
-<ComponentDemo>
-  <MazTextarea
-    v-model="value"
-    name="comment"
-    label="This is a label"
-    disabled
-  />
-
-<template #code>
-
-```html
-<MazTextarea v-model="value" name="comment" label="This is a label" disabled />
-```
-
-  </template>
-</ComponentDemo>
-
-<!--@include: ./../../.vitepress/generated-docs/maz-textarea.doc.md-->
-
-<script lang="ts" setup>
-  import { ref } from 'vue'
-  import { useToast } from 'maz-ui/composables/useToast'
-
-  const mainValue = ref()
-  const value = ref()
-
-  const toast = useToast()
-
-  function sendMessage() {
-    toast.success('Message sent', {
-      position: 'top-right',
-    })
-    value.value = ''
-  }
-</script>