@poppy-ui/vue 0.0.0-dev.36.93ba5b2

package/src/components/data/slider/slider.context.ts

@@ -0,0 +1,3 @@
+import { createComponentConfigKey } from '@/config/symbol'
+
+export const SLIDER_CONFIG = createComponentConfigKey('slider')

package/src/components/data/slider/slider.props.ts

@@ -0,0 +1,69 @@
+import type { SliderColor, SliderSize, SliderTrack } from './slider.types'
+export interface SliderConfigurableProps {
+  /**
+   * Color of the slider track and thumb.
+   */
+  color?: SliderColor
+  /**
+   * Size of the slider.
+   *
+   * @default 'md'
+   */
+  size?: SliderSize
+  /**
+   * Track display mode:
+   * - 'normal': Track between min and thumb (or between both thumbs in range mode)
+   * - 'inverted': Track on the unselected area
+   * - false: No track displayed
+   *
+   * @default 'normal'
+   */
+  track?: SliderTrack
+}
+export interface SliderProps<R extends boolean = false> extends SliderConfigurableProps {
+  /**
+   * Enables double thumb mode (range slider).
+   * The model becomes a [number, number] tuple.
+   *
+   * @default false
+   */
+  range?: R & boolean
+  /** Minimum value. */
+  min?: number
+  /** Maximum value. */
+  max?: number
+  /** Step increment. */
+  step?: number
+  /**
+   * Prevents thumbs from swapping when they cross each other.
+   * If false (default), thumbs can cross and swap their roles.
+   * If true, thumbs cannot cross.
+   *
+   * @default false
+   */
+  disableSwap?: boolean
+  /**
+   * Scale function to transform mechanical values to business values.
+   * @param value - The mechanical value
+   * @returns The business value to display and emit
+   */
+  scale?: (value: number) => number
+  /** Disables the slider. */
+  disabled?: boolean
+  /** Marks the field as required. */
+  required?: boolean
+  /** Accessible label for the slider. */
+  ariaLabel?: string
+  /**
+   * Orientation of the slider.
+   *
+   * @default 'horizontal'
+   */
+  orientation?: 'horizontal' | 'vertical'
+  /**
+   * Controls when to show the value tooltip.
+   *
+   * @default 'hover'
+   */
+  showTooltip?: 'always' | 'hover' | 'never'
+}

package/src/components/data/slider/slider.types.ts

@@ -0,0 +1,11 @@
+import type { ComponentSize } from '@/types/size.type'
+
+export type SliderColor = 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'
+
+export type SliderSize = ComponentSize
+
+export type SliderTooltip = 'always' | 'hover' | 'never'
+
+export type SliderOrientation = 'horizontal' | 'vertical'
+
+export type SliderTrack = 'normal' | 'inverted' | 'none'

package/src/components/data/textarea/Textarea.story.vue

@@ -0,0 +1,222 @@
+<script lang="ts">
+import Form from '@/components/data/form/Form.vue'
+import FormField from '@/components/data/form-field/FormField.vue'
+import { reactive, ref } from 'vue'
+import { createI18n } from 'vue-i18n'
+import Textarea from './Textarea.vue'
+import type { TextareaProps } from './textarea.props'
+</script>
+
+<script setup lang="ts">
+const model = ref<string>('')
+
+const state = reactive<TextareaProps>({
+  size: 'md',
+  rows: 4,
+  counter: false,
+  autoGrow: false,
+})
+
+const formData = ref<Record<string, unknown>>({ bio: '' })
+const formCounterData = ref<Record<string, unknown>>({ bio: '' })
+</script>
+
+<template>
+  <Story group="components" title="Data/Textarea" auto-props-disabled :setup-app="({ app }) => {
+    app.use(createI18n({}))
+  }">
+
+    <Variant title="Default" id="default">
+      <template #controls>
+        <HstSelect
+          v-model="state.color"
+          title="color"
+          :options="[{ label: '-- default --', value: undefined }, 'neutral', 'primary', 'secondary', 'accent', 'info', 'success', 'warning', 'error']"
+        />
+        <HstSelect
+          v-model="state.size"
+          title="size"
+          :options="['xs', 'sm', 'md', 'lg', 'xl']"
+        />
+        <HstSelect
+          v-model="state.variant"
+          title="variant"
+          :options="[{ label: '-- default --', value: undefined }, 'bordered', 'ghost']"
+        />
+        <HstCheckbox v-model="(state.counter as boolean)" title="counter" />
+        <HstSlider v-model="state.maxLength" title="maxLength" :min="0" :max="500" />
+        <HstSlider v-model="(state.rows as number)" title="rows" :min="1" :max="20" />
+        <HstCheckbox v-model="(state.autoGrow as boolean)" title="autoGrow" />
+        <HstCheckbox v-model="(state.disabled as boolean)" title="disabled" />
+        <HstCheckbox v-model="(state.readonly as boolean)" title="readonly" />
+        <HstCheckbox v-model="(state.required as boolean)" title="required" />
+        <HstText v-model="state.placeholder" title="placeholder" />
+      </template>
+
+      <Textarea v-model="model" v-bind="state" />
+    </Variant>
+
+    <Variant title="Colors" id="colors">
+      <div class="flex flex-col gap-2 p-4">
+        <Textarea v-model="model" placeholder="neutral" color="neutral" variant="bordered" :rows="2" />
+        <Textarea v-model="model" placeholder="primary" color="primary" variant="bordered" :rows="2" />
+        <Textarea v-model="model" placeholder="secondary" color="secondary" variant="bordered" :rows="2" />
+        <Textarea v-model="model" placeholder="accent" color="accent" variant="bordered" :rows="2" />
+        <Textarea v-model="model" placeholder="info" color="info" variant="bordered" :rows="2" />
+        <Textarea v-model="model" placeholder="success" color="success" variant="bordered" :rows="2" />
+        <Textarea v-model="model" placeholder="warning" color="warning" variant="bordered" :rows="2" />
+        <Textarea v-model="model" placeholder="error" color="error" variant="bordered" :rows="2" />
+      </div>
+    </Variant>
+
+    <Variant title="Disabled" id="disabled">
+      <Textarea v-model="model" disabled placeholder="Disabled textarea" />
+    </Variant>
+
+    <Variant title="Readonly" id="readonly">
+      <Textarea v-model="model" readonly placeholder="Readonly textarea" variant="bordered" />
+    </Variant>
+
+    <Variant title="With Counter" id="with-counter">
+      <Textarea v-model="model" counter :max-length="300" placeholder="Max 300 chars" />
+    </Variant>
+
+    <Variant title="Auto Grow" id="auto-grow">
+      <Textarea v-model="model" auto-grow placeholder="Grows as you type…" />
+    </Variant>
+
+    <Variant title="Variant" id="variants">
+      <div class="flex flex-col gap-2">
+        <Textarea v-model="model" variant="bordered" placeholder="Bordered" />
+        <Textarea v-model="model" variant="ghost" placeholder="Ghost" />
+      </div>
+    </Variant>
+
+    <Variant title="Inside FormField" id="inside-form-field">
+      <Form v-model="formData">
+        <FormField name="bio" label="Bio" hint="Max 500 characters">
+          <Textarea required placeholder="Tell us about yourself" :max-length="500" />
+        </FormField>
+      </Form>
+    </Variant>
+
+    <Variant title="Floating label" id="floating-label">
+      <Form v-model="formData">
+        <FormField name="bio" floating>
+          <Textarea placeholder="Bio" :rows="3" variant="bordered" />
+        </FormField>
+      </Form>
+    </Variant>
+
+    <Variant title="Counter inherited from Form" id="counter-from-form">
+      <Form v-model="formCounterData" counter>
+        <FormField name="bio" label="Bio">
+          <Textarea :max-length="300" placeholder="Tell us about yourself" />
+        </FormField>
+      </Form>
+    </Variant>
+
+    <Variant title="Counter overridden on FormField" id="counter-override-form-field">
+      <Form v-model="formCounterData" counter>
+        <FormField name="bio" label="Bio" :counter="false">
+          <Textarea :max-length="300" placeholder="Counter disabled here" />
+        </FormField>
+      </Form>
+    </Variant>
+
+    <Variant title="Counter overridden on Textarea" id="counter-override-textarea">
+      <Form v-model="formCounterData">
+        <FormField name="bio" label="Bio">
+          <Textarea counter :max-length="300" placeholder="Counter forced on textarea" />
+        </FormField>
+      </Form>
+    </Variant>
+
+  </Story>
+</template>
+
+<docs lang="md">
+# Textarea
+
+## Description
+
+Multi-line text input component built on the DaisyUI `textarea` element.
+Works standalone with `v-model` or inside `<FormField />` for full form integration (validation, error display, counter cascade).
+Supports an `autoGrow` mode that expands the height automatically to fit the content.
+
+## API
+
+### v-model
+
+| Name         | Type     | Modifiers | Description                                                            |
+|--------------|----------|-----------|------------------------------------------------------------------------|
+| `modelValue` | `string` | `.trim`   | The current text content. `.trim` removes leading/trailing whitespace. |
+
+### Props
+
+| Prop            | Type                  | Default               | Configurable       | Description                                                                     |
+|-----------------|-----------------------|-----------------------|--------------------|---------------------------------------------------------------------------------|
+| `color`         | `TextareaColor`       | `undefined`           | :white_check_mark: | Color variant.                                                                  |
+| `size`          | `TextareaSize`        | `'md'`                | :white_check_mark: | Size.                                                                           |
+| `variant`       | `TextareaVariant`     | `undefined`           | :white_check_mark: | Visual style variant.                                                           |
+| `autoGrow`      | `boolean`             | `false`               | :white_check_mark: | Grows height to fit content via `field-sizing-content`. Ignores `rows` when on. |
+| `counter`       | `boolean`             | `false`               | :white_check_mark: | Shows character counter (pushed to FormField when inside one).                  |
+| `minLength`     | `number`              | `undefined`           | :white_check_mark: | Min length (counter warning + native).                                          |
+| `maxLength`     | `number`              | `undefined`           | :white_check_mark: | Max length (counter warning + native `maxlength`).                              |
+| `counterFormat` | `string \| CounterFn` | `'{current} / {max}'` | :white_check_mark: | Counter format.                                                                 |
+| `rows`          | `number \| string`    | `4`                   | :x:                | Visible row count. Ignored when `autoGrow` is on.                               |
+| `disabled`      | `boolean`             | `undefined`           | :x:                | Native disabled.                                                                |
+| `readonly`      | `boolean`             | `undefined`           | :x:                | Native read-only.                                                               |
+| `required`      | `boolean`             | `undefined`           | :x:                | Native required (implicit `validator` class).                                   |
+| `placeholder`   | `string`              | `undefined`           | :x:                | Placeholder text.                                                               |
+
+### Expose
+
+| Name    | Type                      | Description                                       |
+|---------|---------------------------|---------------------------------------------------|
+| `$el`   | `HTMLTextAreaElement ref` | Ref to the underlying `<textarea />` DOM element. |
+| `focus` | `() => void`              | Programmatically focuses the textarea.            |
+
+### Events
+
+| Event    | Payload | Description                                                                             |
+|----------|---------|-----------------------------------------------------------------------------------------|
+| `@input` | `Event` | Emitted on every keystroke (native input event).                                        |
+| `@blur`  | `Event` | Emitted when the textarea loses focus. Triggers validation when inside `<FormField />`. |
+
+> **Configurable** props can be set globally via the Poppy UI plugin (`components.textarea` option). See [Plugin Configuration](../../../stories/Configuration.story.md) for more information.
+
+## Notes
+
+### Implicit validator
+The DaisyUI `validator` class (`:user-invalid` styling) is applied automatically when `required`, `minlength`, or `maxlength` are present.
+
+### Counter cascade
+Counter resolution order (first defined wins):
+1. `counter` prop on `<Textarea />` itself
+2. `counter` on `<FormField />`
+3. `counter` on `<Form />`
+4. Plugin config
+5. Default: `false`
+
+## Usage
+```vue
+<!-- Standalone -->
+<Textarea v-model="bio" placeholder="Tell us about yourself" variant="bordered" />
+
+<!-- Auto grow -->
+<Textarea v-model="notes" auto-grow placeholder="Grows as you type…" />
+
+<!-- Inside FormField -->
+<FormField name="bio" label="Bio" hint="Max 500 characters">
+  <Textarea required :max-length="500" />
+</FormField>
+
+<!-- Counter inherited from Form -->
+<Form v-model="data" counter>
+  <FormField name="bio" label="Bio">
+    <Textarea :max-length="300" />
+  </FormField>
+</Form>
+```
+</docs>

package/src/components/data/textarea/Textarea.vue

@@ -0,0 +1,168 @@
+<script lang="ts">
+import { FORM_CONTEXT_KEY } from '@/components/data/form/form.context'
+import { FORM_FIELD_CONTEXT_KEY } from '@/components/data/form-field/form-field.context'
+import { useComponentConfig } from '@/composables/use-component-config'
+import { useFormField } from '@/composables/use-form-field'
+import type { ComponentClass } from '@/types/utils.type'
+import { getClass } from '@/utils/build-class.util'
+import { computed, inject, useAttrs, useTemplateRef, watchEffect } from 'vue'
+import { TEXTAREA_CONFIG } from './textarea.context'
+import type { TextareaProps } from './textarea.props'
+import type { TextareaColor, TextareaSize, TextareaVariant } from './textarea.types'
+
+const colors: ComponentClass<'textarea', TextareaColor> = {
+  neutral: 'textarea-neutral',
+  primary: 'textarea-primary',
+  secondary: 'textarea-secondary',
+  accent: 'textarea-accent',
+  info: 'textarea-info',
+  success: 'textarea-success',
+  warning: 'textarea-warning',
+  error: 'textarea-error',
+}
+
+const sizes: ComponentClass<'textarea', TextareaSize> = {
+  xs: 'textarea-xs',
+  sm: 'textarea-sm',
+  md: 'textarea-md',
+  lg: 'textarea-lg',
+  xl: 'textarea-xl',
+}
+
+const variants: ComponentClass<'textarea', TextareaVariant> = {
+  bordered: 'textarea-bordered',
+  ghost: 'textarea-ghost',
+}
+</script>
+
+<script setup lang="ts">
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps<TextareaProps>()
+
+/**
+ * Bound string value.
+ */
+const model = defineModel<string>()
+
+// ── Context injection ────────────────────────────────────────────────────────
+
+const formCtx = inject(FORM_CONTEXT_KEY, null)
+const fieldCtx = inject(FORM_FIELD_CONTEXT_KEY, null)
+
+const contextOverrides = {
+  get counter() { return fieldCtx?.counter.value ?? formCtx?.counter.value },
+  get counterFormat() { return fieldCtx?.counterFormat.value ?? formCtx?.counterFormat.value },
+}
+
+// @ts-ignore - Type too complex
+const config = useComponentConfig(TEXTAREA_CONFIG, props, { size: 'md', counter: false }, contextOverrides)
+
+// ── Element ref ──────────────────────────────────────────────────────────────
+
+const textareaEl = useTemplateRef('textareaEl')
+const attrs = useAttrs()
+
+// ── Form field ───────────────────────────────────────────────────────────────
+
+const { field, onBlur, clearError } = useFormField<string>({
+  required: computed(() => !!props.required),
+  inputEl: textareaEl as any,
+})
+
+// ── Value resolution ─────────────────────────────────────────────────────────
+
+const resolvedValue = computed(() =>
+  field ? (field.value.value as string | undefined) : model.value,
+)
+
+function handleUpdate(event: Event): void {
+  const raw = (event.target as HTMLTextAreaElement).value
+  model.value = raw
+  field?.setValue(raw)
+  field?.setDirty(true)
+  clearError()
+}
+
+// ── Implicit validator ───────────────────────────────────────────────────────
+
+const hasConstraints = computed(() =>
+  !!props.required
+  || attrs.minlength != null
+  || attrs.maxlength != null,
+)
+
+// ── Counter ──────────────────────────────────────────────────────────────────
+
+const currentLength = computed(() => (resolvedValue.value ?? '').length)
+const showCounter = computed(() => config.value.counter)
+
+const counterText = computed<string>(() => {
+  if (!showCounter.value) return ''
+  const fmt = config.value.counterFormat ?? '{current} / {max}'
+  const current = currentLength.value
+  const min = config.value.minLength
+  const max = config.value.maxLength
+  if (typeof fmt === 'function') return fmt(current, min, max)
+  return fmt
+    .replace('{current}', String(current))
+    .replace('{min}', min != null ? String(min) : '')
+    .replace('{max}', max != null ? String(max) : '')
+})
+
+const counterColor = computed<string>(() => {
+  const max = config.value.maxLength
+  const min = config.value.minLength
+  const current = currentLength.value
+  if (max != null && current > max) return 'text-error'
+  if (min != null && current < min) return 'text-warning'
+  return ''
+})
+
+// Push counter up to FormField
+watchEffect(() => {
+  if (!field) return
+  field.setCounterText(
+    showCounter.value ? counterText.value : '',
+    showCounter.value ? counterColor.value : '',
+  )
+})
+
+// ── Error ────────────────────────────────────────────────────────────────────
+
+const hasError = computed(() => !!field?.error.value)
+
+defineExpose({
+  $el: textareaEl,
+  focus: () => textareaEl.value?.focus(),
+})
+</script>
+
+<template>
+  <textarea
+    ref="textareaEl"
+    v-bind="$attrs"
+    class="textarea w-full"
+    :class="[
+      getClass(colors, config.color),
+      getClass(sizes, config.size),
+      getClass(variants, config.variant),
+      { 'textarea-error': hasError },
+      { validator: hasConstraints },
+      { 'resize-none': !autoGrow },
+    ]"
+    :value="resolvedValue"
+    :disabled="disabled"
+    :readonly="readonly"
+    :required="required"
+    :placeholder="placeholder"
+    :rows="rows"
+    @input="handleUpdate"
+    @blur="onBlur"
+  />
+
+  <!-- Standalone counter (no FormField) -->
+  <div v-if="!field && showCounter" class="flex justify-end mt-1">
+    <span class="text-xs" :class="counterColor">{{ counterText }}</span>
+  </div>
+</template>

package/src/components/data/textarea/textarea.context.ts

@@ -0,0 +1,3 @@
+import { createComponentConfigKey } from '@/config/symbol'
+
+export const TEXTAREA_CONFIG = createComponentConfigKey('textarea')

package/src/components/data/textarea/textarea.props.ts

@@ -0,0 +1,71 @@
+import type { CounterFn } from '@/types/utils.type'
+import type { TextareaHTMLAttributes } from 'vue'
+import type { TextareaColor, TextareaSize, TextareaVariant } from './textarea.types'
+
+export interface TextareaConfigurableProps {
+  /**
+   * Color variant of the textarea.
+   */
+  color?: TextareaColor
+
+  /**
+   * Size of the textarea.
+   *
+   * @default 'md'
+   */
+  size?: TextareaSize
+
+  /**
+   * Visual style variant.
+   * - `'bordered'` — adds a visible border
+   * - `'ghost'` — transparent background
+   */
+  variant?: TextareaVariant
+
+  /**
+   * Automatically grows the textarea height to fit its content.
+   * When active, `rows` is ignored.
+   *
+   * @default false
+   */
+  autoGrow?: boolean
+
+  /**
+   * Displays a character counter below the textarea.
+   *
+   * @default false
+   */
+  counter?: boolean
+
+  /**
+   * Minimum character length (counter warning state).
+   */
+  minLength?: number
+
+  /**
+   * Maximum character length (counter warning state; also applied as native `maxlength`).
+   */
+  maxLength?: number
+
+  /**
+   * Custom counter format. Tokens: `{current}`, `{min}`, `{max}`.
+   *
+   * @default '{current} / {max}'
+   */
+  counterFormat?: string | CounterFn
+}
+
+interface NativeTextarea {
+  /** Disables the textarea. */
+  disabled?: TextareaHTMLAttributes['disabled']
+  /** Makes the textarea read-only. */
+  readonly?: TextareaHTMLAttributes['readonly']
+  /** Marks the field as required — signals FormField to display "*". */
+  required?: TextareaHTMLAttributes['required']
+  /** Placeholder text. */
+  placeholder?: TextareaHTMLAttributes['placeholder']
+  /** Number of visible text rows (ignored when `autoGrow` is active). */
+  rows?: number | `${number}`
+}
+
+export interface TextareaProps extends TextareaConfigurableProps, NativeTextarea {}

package/src/components/data/textarea/textarea.types.ts

@@ -0,0 +1,7 @@
+import type { ComponentSize } from '@/types/size.type'
+
+export type TextareaColor = 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'
+
+export type TextareaSize = ComponentSize
+
+export type TextareaVariant = 'bordered' | 'ghost'