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

package/src/components/data/input/Input.vue

@@ -0,0 +1,196 @@
+<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 { INPUT_CONFIG } from './input.context'
+import type { InputProps } from './input.props'
+import type { InputColor, InputSize, InputVariant } from './input.types'
+
+const colors: ComponentClass<'input', InputColor> = {
+  neutral: 'input-neutral',
+  primary: 'input-primary',
+  secondary: 'input-secondary',
+  accent: 'input-accent',
+  info: 'input-info',
+  success: 'input-success',
+  warning: 'input-warning',
+  error: 'input-error',
+}
+
+const sizes: ComponentClass<'input', InputSize> = {
+  xs: 'input-xs',
+  sm: 'input-sm',
+  md: 'input-md',
+  lg: 'input-lg',
+  xl: 'input-xl',
+}
+
+const variants: ComponentClass<'input', InputVariant> = {
+  bordered: 'input-bordered',
+  ghost: 'input-ghost',
+}
+</script>
+
+<script setup lang="ts">
+
+const props = defineProps<InputProps>()
+
+/**
+ * Bound value. Supports `.number` and `.trim` modifiers.
+ * - `v-model.number` → coerces to number
+ * - `v-model.trim` → trims whitespace on update
+ */
+const model = defineModel<string | number>()
+
+// ── Context injection ────────────────────────────────────────────────────────
+
+const formCtx = inject(FORM_CONTEXT_KEY, null)
+const fieldCtx = inject(FORM_FIELD_CONTEXT_KEY, null)
+
+// contextOverrides: Form/FormField counter values fed into mergeProps.
+// Priority: fieldCtx (own prop) → formCtx (own prop).
+// Both are raw boolean | undefined — undefined is skipped by mergeProps.
+// contextOverrides feeds Form/FormField counter values into the mergeProps chain.
+// Passed as a getter so useComponentConfig's computed stays reactive to context changes.
+const contextOverrides = {
+  get counter()       { return fieldCtx?.counter.value       ?? formCtx?.counter.value },
+  get counterFormat() { return fieldCtx?.counterFormat.value ?? formCtx?.counterFormat.value },
+}
+
+// @ts-ignore - Type too complexe
+const config = useComponentConfig(
+  INPUT_CONFIG,
+  props,
+  { size: 'md', type: 'text', counter: false },
+  contextOverrides,
+)
+
+// ── Element ref + form field ─────────────────────────────────────────────────
+
+const inputEl = useTemplateRef('inputEl')
+
+const { field, onBlur, clearError } = useFormField({
+  required: computed(() => isTrue(props.required)),
+  inputEl,
+})
+
+// ── Value resolution ─────────────────────────────────────────────────────────
+
+// When inside a FormField: field context owns the value.
+// Standalone: falls back to defineModel, then defaultValue.
+const resolvedValue = computed(() =>
+  field ? field.value.value : (model.value ?? props.defaultValue),
+)
+
+function handleUpdate(event: Event): void {
+  const raw = (event.target as HTMLInputElement).value
+  model.value = raw
+  field?.setValue(raw)
+  field?.setDirty(true)
+  clearError()
+}
+
+// ── Counter ──────────────────────────────────────────────────────────────────
+
+const currentLength = computed(() => String(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 ────────────────────────────────────────────────────────────
+
+// Active error from FormField context (available in both standalone and form modes).
+// When inside FormField, the FormField owns the error text rendering.
+// When standalone, we render it in the bottom label row below.
+const activeError = computed(() => field?.error.value)
+
+// Error color applied to the input element itself in both modes.
+const hasError = computed(() => !!activeError.value)
+</script>
+
+<template>
+  <div class="w-full">
+    <!-- Top label row — standalone use only (FormField owns label when present) -->
+    <div v-if="!field && (label || $slots.label)" class="label">
+      <span class="label-text">
+        <slot name="label">{{ label }}</slot>
+      </span>
+    </div>
+
+    <input
+      ref="inputEl"
+      class="input w-full"
+      :class="[
+        getClass(colors, config.color),
+        getClass(sizes, config.size),
+        getClass(variants, config.variant),
+        { 'input-error': hasError },
+      ]"
+      :type="config.type"
+      :value="resolvedValue"
+      :disabled="disabled"
+      :required="isTrue(required)"
+      :placeholder="placeholder"
+      :autocomplete="autocomplete"
+      :pattern="pattern"
+      :title="title"
+      :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/input/input.context.ts

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

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

@@ -0,0 +1,83 @@
+import type { Booleanish, CounterFn } from '@/types/utils.type'
+import type { InputHTMLAttributes } from 'vue'
+import type { InputColor, InputSize, InputType, InputVariant } from './input.types'
+
+export interface InputConfigurableProps {
+  /**
+   * Color variant of the input.
+   */
+  color?: InputColor
+
+  /**
+   * Size of the input.
+   *
+   * @default 'md'
+   */
+  size?: InputSize
+
+  /**
+   * Visual style variant.
+   * - `'bordered'` — adds a visible border
+   * - `'ghost'` — transparent background
+   */
+  variant?: InputVariant
+
+  /**
+   * Displays a character counter below the input.
+   *
+   * @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 NativeInput {
+  /** Disables the input. */
+  disabled?: InputHTMLAttributes['disabled']
+  /** Marks the field as required. */
+  required?: InputHTMLAttributes['required']
+  /** Placeholder text. */
+  placeholder?: InputHTMLAttributes['placeholder']
+  /** HTML autocomplete attribute. */
+  autocomplete?: InputHTMLAttributes['autocomplete']
+  /** Native pattern for constraint validation. */
+  pattern?: InputHTMLAttributes['pattern']
+  /** Title shown on pattern mismatch (used as custom validation message). */
+  title?: InputHTMLAttributes['title']
+}
+
+export interface InputProps extends InputConfigurableProps, NativeInput {
+  /**
+   * HTML input type.
+   *
+   * @default 'text'
+   */
+  type?: InputType
+
+  /**
+   * Fallback value rendered when the model is empty or undefined.
+   */
+  defaultValue?: string | number
+
+  /** Inline label text (standalone use). */
+  label?: string
+
+  /** Hint / helper text rendered below the input. */
+  hint?: string
+}

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

@@ -0,0 +1,10 @@
+import type { ComponentSize } from '@/types/size.type'
+
+export type InputColor = 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'
+
+export type InputSize = ComponentSize
+
+export type InputVariant = 'bordered' | 'ghost'
+
+// Date/datetime types are handled by a dedicated DateInput component
+export type InputType = 'text' | 'email' | 'password' | 'number' | 'tel' | 'url' | 'search' | 'time'

package/src/components/data/public.ts

@@ -0,0 +1,10 @@
+export { default as Checkbox } from './checkbox/Checkbox.vue'
+export { default as Form } from './form/Form.vue'
+export { default as FormField } from './form-field/FormField.vue'
+export { default as Input } from './input/Input.vue'
+export { default as Radio } from './radio/Radio.vue'
+export { default as Rating } from './rating/Rating.vue'
+export { default as Select } from './select/Select.vue'
+export { default as Slider } from './slider/Slider.vue'
+export { default as Textarea } from './textarea/Textarea.vue'
+export { default as Toggle } from './toggle/Toggle.vue'

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

@@ -0,0 +1,30 @@
+// Checkbox
+export type { CheckboxProps } from './checkbox/checkbox.props'
+export * from './checkbox/checkbox.types'
+// Form
+export type { FormProps } from './form/form.props'
+export * from './form/form.types'
+// Form Field
+export type { FormFieldProps } from './form-field/form-field.props'
+export * from './form-field/form-field.types'
+// Input
+export type { InputProps } from './input/input.props'
+export * from './input/input.types'
+// Radio
+export type { RadioProps } from './radio/radio.props'
+export * from './radio/radio.types'
+// Rating
+export type { RatingProps } from './rating/rating.props'
+export * from './rating/rating.types'
+// Select
+export type { SelectProps } from './select/select.props'
+export * from './select/select.types'
+// Slider
+export type { SliderProps } from './slider/slider.props'
+export * from './slider/slider.types'
+// Textarea
+export type { TextareaProps } from './textarea/textarea.props'
+export * from './textarea/textarea.types'
+// Toggle
+export type { ToggleProps } from './toggle/toggle.props'
+export * from './toggle/toggle.types'

package/src/components/data/radio/Radio.story.vue

@@ -0,0 +1,158 @@
+<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 Radio from './Radio.vue'
+import type { RadioProps } from './radio.props'
+</script>
+
+<script setup lang="ts">
+const model = ref<string | number | boolean>('free')
+
+const state = reactive<Omit<RadioProps, 'value'>>({
+  size: 'md',
+})
+
+const formData = ref<Record<string, unknown>>({ plan: '' })
+</script>
+
+<template>
+  <Story group="components" title="Data/Radio" 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']"
+        />
+        <HstCheckbox v-model="state.disabled" title="disabled" />
+        <HstText v-model="state.description" title="description" />
+      </template>
+
+      <div class="flex gap-4">
+        <Radio v-model="model" value="free" v-bind="state" />
+        <Radio v-model="model" value="pro" v-bind="state" />
+        <Radio v-model="model" value="enterprise" v-bind="state" />
+      </div>
+    </Variant>
+
+    <Variant title="Colors" id="colors">
+      <div class="flex flex-wrap gap-4 p-4">
+        <Radio v-model="model" value="neutral" color="neutral" />
+        <Radio v-model="model" value="primary" color="primary" />
+        <Radio v-model="model" value="secondary" color="secondary" />
+        <Radio v-model="model" value="accent" color="accent" />
+        <Radio v-model="model" value="info" color="info" />
+        <Radio v-model="model" value="success" color="success" />
+        <Radio v-model="model" value="warning" color="warning" />
+        <Radio v-model="model" value="error" color="error" />
+      </div>
+    </Variant>
+
+    <Variant title="Sizes" id="sizes">
+      <div class="flex items-center gap-4 p-4">
+        <Radio v-model="model" value="xs" size="xs" />
+        <Radio v-model="model" value="sm" size="sm" />
+        <Radio v-model="model" value="md" size="md" />
+        <Radio v-model="model" value="lg" size="lg" />
+        <Radio v-model="model" value="xl" size="xl" />
+      </div>
+    </Variant>
+
+    <Variant title="Disabled" id="disabled">
+      <div class="flex gap-4">
+        <Radio v-model="model" value="free" disabled />
+        <Radio v-model="model" value="pro" disabled />
+      </div>
+    </Variant>
+
+    <Variant title="With Description" id="with-description">
+      <div class="flex flex-col gap-3">
+        <Radio v-model="model" value="free" description="Free — up to 3 projects" />
+        <Radio v-model="model" value="pro" color="primary" description="Pro — unlimited projects, 9€/month" />
+        <Radio v-model="model" value="enterprise" color="secondary" description="Enterprise — custom pricing" />
+      </div>
+    </Variant>
+
+    <Variant title="Inside FormField" id="inside-form-field">
+      <!-- FormField provides the `name` automatically to all child Radio inputs -->
+      <Form v-model="formData">
+        <FormField name="plan" label="Plan">
+          <div class="flex flex-col gap-2">
+            <Radio value="free" description="Free" required />
+            <Radio value="pro" description="Pro — 9€/month" />
+            <Radio value="enterprise" description="Enterprise" />
+          </div>
+        </FormField>
+      </Form>
+    </Variant>
+
+  </Story>
+</template>
+
+<docs lang="md">
+# Radio
+
+## Description
+
+Radio button component built on the DaisyUI `radio` element.
+Radio buttons are grouped by sharing the same `v-model` and `name`. When inside a `<FormField />`, the `name` is inferred automatically from the field name.
+
+## API
+
+### v-model
+
+| Name         | Type                          | Modifiers | Description                                             |
+|--------------|-------------------------------|-----------|---------------------------------------------------------|
+| `modelValue` | `string \| number \| boolean` | `-`       | Bound group value. Checked when equal to `props.value`. |
+
+### Props
+| Prop          | Type                          | Default     | Configurable       | Description                                                             |
+|---------------|-------------------------------|-------------|--------------------|-------------------------------------------------------------------------|
+| `value`       | `string \| number \| boolean` | `undefined` | :x:                | The value this radio represents (required).                             |
+| `color`       | `RadioColor`                  | `undefined` | :white_check_mark: | Color variant.                                                          |
+| `size`        | `RadioSize`                   | `'md'`      | :white_check_mark: | Size.                                                                   |
+| `description` | `string`                      | `undefined` | :x:                | Secondary text displayed next to the radio button.                      |
+| `name`        | `string`                      | `undefined` | :x:                | Input group name. Inferred from `<FormField />` name when not provided. |
+| `disabled`    | `boolean`                     | `undefined` | :x:                | Native disabled.                                                        |
+| `required`    | `boolean`                     | `undefined` | :x:                | Native required. Signals `<FormField />` to display `"*"`.              |
+
+### Events
+
+| Event     | Payload | Description                                                                                 |
+|-----------|---------|---------------------------------------------------------------------------------------------|
+| `@change` | `Event` | Emitted when this radio is selected (native change event).                                  |
+| `@blur`   | `Event` | Emitted when the radio button loses focus. Triggers validation when inside `<FormField />`. |
+
+### Slots
+
+| Slot          | Scope     | Description                                        |
+|---------------|-----------|----------------------------------------------------|
+| `description` | `-`       | Secondary text displayed next to the radio button. |
+
+> **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 group -->
+<Radio v-model="plan" value="free" description="Free tier" />
+<Radio v-model="plan" value="pro" description="Pro — 9€/month" />
+
+<!-- Inside FormField — name inferred automatically -->
+<FormField name="plan" label="Plan">
+  <div class="flex flex-col gap-2">
+    <Radio value="free" description="Free" required />
+    <Radio value="pro" description="Pro — 9€/month" />
+  </div>
+</FormField>
+```
+</docs>

package/src/components/data/radio/Radio.vue

@@ -0,0 +1,105 @@
+<script lang="ts">
+import type { FormFieldContext } from '@/components/data/form-field/form-field.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, useId, useTemplateRef, watch } from 'vue'
+import { RADIO_CONFIG } from './radio.context'
+import type { RadioProps } from './radio.props'
+import type { RadioColor, RadioSize } from './radio.types'
+
+const colors: ComponentClass<'radio', RadioColor> = {
+  neutral: 'radio-neutral',
+  primary: 'radio-primary',
+  secondary: 'radio-secondary',
+  accent: 'radio-accent',
+  info: 'radio-info',
+  success: 'radio-success',
+  warning: 'radio-warning',
+  error: 'radio-error',
+}
+
+const sizes: ComponentClass<'radio', RadioSize> = {
+  xs: 'radio-xs',
+  sm: 'radio-sm',
+  md: 'radio-md',
+  lg: 'radio-lg',
+  xl: 'radio-xl',
+}
+</script>
+
+<script setup lang="ts">
+const props = defineProps<RadioProps>()
+const model = defineModel<string | number | boolean>()
+const inputEl = useTemplateRef('inputEl')
+
+const config = useComponentConfig(RADIO_CONFIG, props, {
+  size: 'md',
+})
+
+const inputId = `radio-${useId()}`
+
+// Try to get name from FormField context
+const fieldCtx = inject(FORM_FIELD_CONTEXT_KEY, null as FormFieldContext | null)
+const resolvedName = computed(() => props.name ?? fieldCtx?.name ?? 'radio-group')
+
+// Bridge to form field context
+const { field, onBlur } = useFormField({
+  required: computed(() => isTrue(props.required)),
+  inputEl,
+})
+
+// Resolved value: field context wins when inside FormField
+const resolvedValue = computed(() =>
+  field ? field.value.value : model.value
+)
+
+// Checked state
+const isChecked = computed(() => resolvedValue.value === props.value)
+
+// Sync model with field context
+watch(
+  () => field?.value.value,
+  (val) => {
+    if (val !== undefined && model.value !== val) {
+      model.value = val as string | number | boolean
+    }
+  }
+)
+
+function handleChange(): void {
+  const value = props.value
+  model.value = value
+  field?.setValue(value)
+  field?.setDirty(true)
+}
+
+function handleBlur(): void {
+  onBlur()
+}
+</script>
+
+<template>
+  <div class="flex items-center gap-3">
+    <input
+      ref="inputEl"
+      :id="inputId"
+      type="radio"
+      class="radio bg-base-200"
+      :class="[getClass(colors, config.color), getClass(sizes, config.size)]"
+      :name="resolvedName"
+      :value="value"
+      :checked="isChecked"
+      :disabled="disabled"
+      :required="required"
+      @change="handleChange"
+      @blur="handleBlur"
+    />
+    <label v-if="description || $slots.description" :for="inputId" class="text-sm text-base-content/70 cursor-pointer">
+      <slot name="description">{{ description }}</slot>
+    </label>
+  </div>
+</template>

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

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

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

@@ -0,0 +1,46 @@
+import type { InputHTMLAttributes } from 'vue'
+import type { RadioColor, RadioSize } from './radio.types'
+
+export interface RadioConfigurableProps {
+  /**
+   * Color of the radio button.
+   */
+  color?: RadioColor
+
+  /**
+   * Size of the radio button.
+   *
+   * @default 'md'
+   */
+  size?: RadioSize
+}
+
+interface NativeRadio {
+  /**
+   * Disables the radio button.
+   */
+  disabled?: InputHTMLAttributes['disabled']
+
+  /**
+   * Marks the field as required.
+   */
+  required?: InputHTMLAttributes['required']
+
+  /**
+   * Groups radio buttons together natively. Inferred from FormField name if omitted.
+   */
+  name?: InputHTMLAttributes['name']
+}
+
+export interface RadioProps extends RadioConfigurableProps, NativeRadio {
+  /**
+   * The value this radio represents.
+   * The radio is checked when `modelValue === value`.
+   */
+  value: string | number | boolean
+
+  /**
+   * Description text displayed next to the radio.
+   */
+  description?: string
+}

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

@@ -0,0 +1,5 @@
+import type { ComponentSize } from '@/types/size.type'
+
+export type RadioColor = 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'
+
+export type RadioSize = ComponentSize