@poppy-ui/vue 0.5.6 → 0.5.7-beta.0

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

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

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

@@ -0,0 +1,84 @@
+import type { Booleanish } from '@/types/utils.type'
+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?: Booleanish
+
+  /**
+   * 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" title="disabled" />
+        <HstCheckbox v-model="state.required" title="required" />
+        <HstText v-model="state.placeholder" title="placeholder" />
+        <HstText v-model="state.label" title="label" />
+        <HstText v-model="state.hint" title="hint" />
+      </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="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="Standalone with label + hint" id="standalone-label-hint">
+      <Textarea
+        v-model="model"
+        label="Bio"
+        hint="Tell us a bit about yourself"
+        variant="bordered"
+        placeholder="I am…"
+      />
+    </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="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`      | `Booleanish`          | `false`               | :white_check_mark: | Grows height to fit content via `field-sizing-content`. Ignores `rows` when on. |
+| `counter`       | `Booleanish`          | `false`               | :white_check_mark: | Shows character counter.                                                        |
+| `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`              | `4`                   | :x:                | Visible row count. Ignored when `autoGrow` is on.                               |
+| `label`         | `string`              | `undefined`           | :x:                | Inline label (standalone use).                                                  |
+| `hint`          | `string`              | `undefined`           | :x:                | Hint text (standalone use).                                                     |
+| `disabled`      | `boolean`             | `undefined`           | :x:                | Native disabled.                                                                |
+| `required`      | `boolean`             | `undefined`           | :x:                | Native required.                                                                |
+| `placeholder`   | `string`              | `undefined`           | :x:                | Placeholder text.                                                               |
+
+### 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 />`. |
+
+### Slots
+
+| Slot      | Scope                   | Description                            |
+|-----------|-------------------------|----------------------------------------|
+| `label`   | undefined                       | Top-left inline label (standalone).    |
+| `hint`    | undefined                       | Bottom-left hint / error (standalone). |
+| `counter` | `{ current, min, max }` | Bottom-right character count.          |
+
+> **Configurable** props can be configured in the Poppy Plugin `install` function via the `Poppy` object. See [Plugin Configuration](../../../stories/Configuration.story.md) for more information.
+
+## Note
+
+### 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`
+
+> **Configurable** props can be configured in the Poppy Plugin `install` function via the `Poppy` object. See [Plugin Configuration](../../../stories/Configuration.story.md) for more information.
+
+## Usage
+```vue
+<!-- Standalone -->
+<Textarea v-model="bio" label="Bio" variant="bordered" counter :max-length="300" />
+
+<!-- Auto grow -->
+<Textarea v-model="notes" auto-grow placeholder="Grows as you type…" />
+
+<!-- Inside FormField -->
+<FormField name="bio" label="Bio">
+  <Textarea required :max-length="500" />
+</FormField>
+
+<!-- Counter inherited from Form -->
+<Form v-model="data" counter>
+  <FormField name="bio">
+    <Textarea :max-length="300" />
+  </FormField>
+</Form>
+```
+</docs>

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

@@ -0,0 +1,179 @@
+<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 { isTrue } from '@/utils/is-true'
+import { computed, inject, useTemplateRef } 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">
+const props = defineProps<TextareaProps>()
+
+/**
+ * The current text content of the textarea.
+ * Supports the `.trim` modifier:
+ * - `v-model.trim` → trims leading and trailing whitespace on update
+ */
+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 },
+}
+
+const config = useComponentConfig(
+  TEXTAREA_CONFIG,
+  props,
+  { size: 'md', rows: 4, autoGrow: false, counter: false },
+  contextOverrides,
+)
+
+// ── Element ref + form field ─────────────────────────────────────────────────
+
+const textareaEl = useTemplateRef('textareaEl')
+
+const { field, fieldValue, onBlur, clearError } = useFormField<string>({
+  required: computed(() => isTrue(props.required)),
+  inputEl: textareaEl,
+})
+
+// ── Value resolution ─────────────────────────────────────────────────────────
+
+const resolvedValue = computed(() => field ? fieldValue.value : model.value)
+
+function handleUpdate(event: Event): void {
+  const raw = (event.target as HTMLTextAreaElement).value
+  model.value = raw
+  field?.setValue(raw)
+  field?.setDirty(true)
+  clearError()
+}
+
+// ── Counter ──────────────────────────────────────────────────────────────────
+
+const currentLength = computed(() => (resolvedValue.value ?? '').length)
+
+const showCounter = computed(() => isTrue(config.value.counter))
+
+const formattedCounter = computed(() => {
+  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) : '')
+})
+
+// ── Error display ────────────────────────────────────────────────────────────
+
+const activeError = computed(() => field?.error.value)
+
+const hasError = computed(() => !!activeError.value)
+</script>
+
+<template>
+  <div class="w-full">
+    <!-- Top label row — standalone use only -->
+    <div v-if="!field && (label || $slots.label)" class="label">
+      <span class="label-text">
+        <slot name="label">{{ label }}</slot>
+      </span>
+    </div>
+
+    <textarea
+      ref="textareaEl"
+      class="textarea w-full"
+      :class="[
+        getClass(colors, config.color),
+        getClass(sizes, config.size),
+        getClass(variants, config.variant),
+        { 'textarea-error': hasError },
+        { 'field-sizing-content': isTrue(config.autoGrow) },
+      ]"
+      :value="resolvedValue"
+      :disabled="disabled"
+      :required="isTrue(required)"
+      :placeholder="placeholder"
+      :rows="isTrue(config.autoGrow) ? undefined : config.rows"
+      :maxlength="config.maxLength"
+      :minlength="config.minLength"
+      @input="handleUpdate"
+      @blur="onBlur"
+    />
+
+    <!-- Bottom label row — standalone use only -->
+    <div
+      v-if="!field && (activeError || hint || $slots.hint || showCounter)"
+      class="label"
+    >
+      <span
+        class="label-text-alt"
+        :class="{ 'text-error': activeError }"
+      >
+        <slot name="hint">{{ activeError || hint }}</slot>
+      </span>
+      <span v-if="showCounter" class="label-text-alt">
+        <slot
+          name="counter"
+          :current="currentLength"
+          :min="config.minLength"
+          :max="config.maxLength"
+        >
+          {{ formattedCounter }}
+        </slot>
+      </span>
+    </div>
+
+    <!-- Counter slot exposed for FormField's bottom row when inside a FormField -->
+    <template v-if="field && showCounter">
+      <slot
+        name="counter"
+        :current="currentLength"
+        :min="config.minLength"
+        :max="config.maxLength"
+      >
+        <!-- rendered by FormField in its own label row -->
+      </slot>
+    </template>
+  </div>
+</template>

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

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

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

@@ -0,0 +1,75 @@
+import type { Booleanish, 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?: Booleanish
+
+  /**
+   * Displays a character counter below the textarea.
+   *
+   * @default false
+   */
+  counter?: Booleanish
+
+  /**
+   * 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']
+  /** Marks the field as required. */
+  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 {
+  /** Inline label text (standalone use). */
+  label?: string
+
+  /** Hint / helper text rendered below the textarea. */
+  hint?: string
+}

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'