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

package/src/components/data/radio-group/RadioGroup.story.vue

@@ -0,0 +1,155 @@
+<script lang="ts">
+import FieldSet from '@/components/data/field-set/FieldSet.vue'
+import Form from '@/components/data/form/Form.vue'
+import FormField from '@/components/data/form-field/FormField.vue'
+import Radio from '@/components/data/radio/Radio.vue'
+import { reactive, ref } from 'vue'
+import { createI18n } from 'vue-i18n'
+import RadioGroup from './RadioGroup.vue'
+import type { RadioGroupProps } from './radio-group.props'
+</script>
+
+<script setup lang="ts">
+const model = ref<string | number | boolean>('free')
+
+const state = reactive<RadioGroupProps>({})
+
+const formData = ref<Record<string, unknown>>({ plan: '' })
+</script>
+
+<template>
+  <Story group="components" title="Data/RadioGroup" auto-props-disabled :setup-app="({ app }) => {
+    app.use(createI18n({}))
+  }">
+
+    <Variant title="Default" id="default">
+      <template #controls>
+        <HstText v-model="state.name" title="name" />
+        <HstCheckbox v-model="(state.required as boolean)" title="required" />
+      </template>
+
+      <RadioGroup v-model="model" v-bind="state">
+        <div class="flex flex-col gap-2">
+          <Radio value="free" description="Free" />
+          <Radio value="pro" description="Pro — 9€/month" />
+          <Radio value="enterprise" description="Enterprise" />
+        </div>
+      </RadioGroup>
+    </Variant>
+
+    <Variant title="Required" id="required">
+      <RadioGroup v-model="model" required>
+        <div class="flex flex-col gap-2">
+          <Radio value="free" description="Free" />
+          <Radio value="pro" description="Pro" />
+        </div>
+      </RadioGroup>
+    </Variant>
+
+    <Variant title="With Hint" id="with-hint">
+      <RadioGroup v-model="model">
+        <div class="flex flex-col gap-2">
+          <Radio value="free" description="Free" hint="Up to 3 projects, community support" />
+          <Radio value="pro" color="primary" description="Pro — 9€/month" hint="Unlimited projects, priority support" />
+          <Radio value="enterprise" color="secondary" description="Enterprise" hint="Custom pricing, dedicated support" />
+        </div>
+      </RadioGroup>
+    </Variant>
+
+    <Variant title="Inside FieldSet" id="inside-field-set">
+      <FieldSet legend="Subscription plan" bordered>
+        <RadioGroup v-model="model" class="mt-2">
+          <div class="flex flex-col gap-2">
+            <Radio value="free" description="Free" hint="Up to 3 projects" />
+            <Radio value="pro" color="primary" description="Pro — 9€/month" hint="Unlimited projects" />
+            <Radio value="enterprise" color="secondary" description="Enterprise" hint="Custom pricing" />
+          </div>
+        </RadioGroup>
+      </FieldSet>
+    </Variant>
+
+    <Variant title="Inside FormField (use Radio directly instead)" id="use-in-form-field">
+      <!-- Prefer placing <Radio> directly inside <FormField> instead of wrapping in <RadioGroup> -->
+      <Form v-model="formData">
+        <FormField name="plan" label="Plan">
+          <div class="flex flex-col gap-2 mt-1">
+            <Radio value="free" description="Free" required />
+            <Radio value="pro" description="Pro — 9€/month" />
+            <Radio value="enterprise" description="Enterprise" />
+          </div>
+        </FormField>
+      </Form>
+    </Variant>
+
+    <Variant title="Colors" id="colors">
+      <RadioGroup v-model="model">
+        <div class="flex flex-col gap-2">
+          <Radio value="neutral" color="neutral" description="Neutral" />
+          <Radio value="primary" color="primary" description="Primary" />
+          <Radio value="secondary" color="secondary" description="Secondary" />
+          <Radio value="accent" color="accent" description="Accent" />
+          <Radio value="info" color="info" description="Info" />
+          <Radio value="success" color="success" description="Success" />
+          <Radio value="warning" color="warning" description="Warning" />
+          <Radio value="error" color="error" description="Error" />
+        </div>
+      </RadioGroup>
+    </Variant>
+
+  </Story>
+</template>
+
+<docs lang="md">
+# RadioGroup
+
+## Description
+
+Standalone radio group that shares a `name` and a `v-model` value across all child `<Radio />` components.
+Use it when radio buttons live **outside** a `<FormField />`.
+When your radios are inside a `<FormField />`, skip `<RadioGroup />` — FormField already provides the name and value automatically.
+
+## API
+
+### v-model
+
+| Name         | Type                          | Modifiers | Description                                          |
+|--------------|-------------------------------|-----------|------------------------------------------------------|
+| `modelValue` | `string \| number \| boolean` | -         | Currently selected value shared across child radios. |
+
+### Props
+
+| Prop       | Type      | Default     | Description                                                                |
+|------------|-----------|-------------|----------------------------------------------------------------------------|
+| `name`     | `string`  | auto        | Shared `name` for all child `<Radio />` inputs. Auto-generated when omitted. |
+| `required` | `boolean` | `undefined` | Marks all radios in the group as required.                                 |
+
+### Slots
+
+| Slot      | Bindings | Description                 |
+|-----------|----------|-----------------------------|
+| `default` | -        | Child `<Radio />` elements. |
+
+## Usage
+```vue
+<!-- Standalone group -->
+<RadioGroup v-model="plan">
+  <Radio value="free" description="Free" />
+  <Radio value="pro" description="Pro — 9€/month" />
+  <Radio value="enterprise" description="Enterprise" />
+</RadioGroup>
+
+<!-- Inside a FieldSet for visual grouping -->
+<FieldSet legend="Subscription" bordered>
+  <RadioGroup v-model="plan">
+    <Radio value="free" description="Free" hint="Up to 3 projects" />
+    <Radio value="pro" color="primary" description="Pro" hint="Unlimited projects" />
+  </RadioGroup>
+</FieldSet>
+
+<!-- Inside FormField — use Radio directly, no RadioGroup needed -->
+<FormField name="plan" label="Plan">
+  <Radio value="free" description="Free" required />
+  <Radio value="pro" description="Pro — 9€/month" />
+</FormField>
+```
+</docs>

package/src/components/data/radio-group/RadioGroup.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { FORM_FIELD_CONTEXT_KEY } from '@/components/data/form-field/form-field.context'
+import { computed, inject, provide, shallowRef, useId, watch } from 'vue'
+import type { RadioGroupContext } from './radio-group.context'
+import { RADIO_GROUP_CONTEXT_KEY } from './radio-group.context'
+import type { RadioGroupProps } from './radio-group.props'
+
+const props = defineProps<RadioGroupProps>()
+
+/**
+ * The currently selected value.
+ * Ignored when RadioGroup is inside a FormField (FormField owns the value).
+ */
+const model = defineModel<string | number | boolean>()
+
+// RadioGroup must not be used inside FormField — FormField owns the value.
+const fieldCtx = inject(FORM_FIELD_CONTEXT_KEY, null)
+
+if (import.meta.env.DEV && fieldCtx) {
+  console.warn(
+    '[RadioGroup] Do not use <RadioGroup> inside <FormField>. ' +
+      'Place <Radio> components directly inside <FormField> — they share the field value automatically.',
+  )
+}
+
+const autoName = `radio-group-${useId()}`
+const resolvedName = computed(() => props.name ?? autoName)
+const required = shallowRef(!!props.required)
+
+watch(
+  () => props.required,
+  val => {
+    required.value = !!val
+  },
+)
+
+// When inside FormField, defer to it; otherwise manage value locally.
+const modelValue = computed<string | number | boolean | undefined>(() =>
+  fieldCtx ? (fieldCtx.value.value as string | number | boolean | undefined) : model.value,
+)
+
+function setValue(value: string | number | boolean): void {
+  if (fieldCtx) {
+    fieldCtx.setValue(value)
+    fieldCtx.setDirty(true)
+  } else {
+    model.value = value
+  }
+}
+
+const context: RadioGroupContext = {
+  name: resolvedName.value,
+  modelValue,
+  required,
+  setValue,
+}
+
+provide(RADIO_GROUP_CONTEXT_KEY, context)
+</script>
+
+<template>
+  <div role="radiogroup">
+    <slot />
+  </div>
+</template>

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

@@ -0,0 +1,14 @@
+import type { ComputedRef, InjectionKey, ShallowRef } from 'vue'
+
+export interface RadioGroupContext {
+  /** Shared name attribute for all child Radio inputs. */
+  name: string
+  /** Currently selected value. */
+  modelValue: ComputedRef<string | number | boolean | undefined>
+  /** Whether any radio in the group is required. */
+  required: ShallowRef<boolean>
+  /** Updates the selected value. */
+  setValue: (value: string | number | boolean) => void
+}
+
+export const RADIO_GROUP_CONTEXT_KEY: InjectionKey<RadioGroupContext> = Symbol('RadioGroupContext')

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

@@ -0,0 +1,12 @@
+export interface RadioGroupProps {
+  /**
+   * Shared `name` attribute for all child `<Radio>` inputs.
+   * Auto-generated when omitted.
+   */
+  name?: string
+
+  /**
+   * Marks all radios in the group as required.
+   */
+  required?: boolean
+}

package/src/components/data/rating/Rating.story.vue

@@ -0,0 +1,150 @@
+<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 Rating from './Rating.vue'
+import type { RatingProps } from './rating.props'
+</script>
+
+<script setup lang="ts">
+const model = ref<number>(0)
+
+const state = reactive<RatingProps>({
+  size: 'md',
+  count: 5,
+  half: false,
+  clearable: true,
+})
+
+const formData = ref<Record<string, unknown>>({ rating: 0 })
+</script>
+
+<template>
+  <Story group="components" title="Data/Rating" 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']"
+        />
+        <HstSlider v-model="state.count" title="count" :min="1" :max="10" />
+        <HstCheckbox v-model="(state.half as boolean)" title="half" />
+        <HstCheckbox v-model="(state.clearable as boolean)" title="clearable" />
+        <HstCheckbox v-model="state.disabled" title="disabled" />
+        <HstCheckbox v-model="state.required" title="required" />
+      </template>
+
+      <Rating v-model="model" v-bind="state" />
+    </Variant>
+
+    <Variant title="Colors" id="colors">
+      <div class="flex flex-col gap-3 p-4">
+        <Rating v-model="model" color="neutral" :value="3" />
+        <Rating v-model="model" color="primary" :value="3" />
+        <Rating v-model="model" color="secondary" :value="3" />
+        <Rating v-model="model" color="accent" :value="3" />
+        <Rating v-model="model" color="info" :value="3" />
+        <Rating v-model="model" color="success" :value="3" />
+        <Rating v-model="model" color="warning" :value="3" />
+        <Rating v-model="model" color="error" :value="3" />
+      </div>
+    </Variant>
+
+    <Variant title="Sizes" id="sizes">
+      <div class="flex flex-col gap-3 p-4">
+        <Rating v-model="model" size="xs" />
+        <Rating v-model="model" size="sm" />
+        <Rating v-model="model" size="md" />
+        <Rating v-model="model" size="lg" />
+        <Rating v-model="model" size="xl" />
+      </div>
+    </Variant>
+
+    <Variant title="Half precision" id="half">
+      <Rating v-model="model" half :value="2.5" />
+    </Variant>
+
+    <Variant title="Not clearable" id="not-clearable">
+      <Rating v-model="model" :clearable="false" />
+    </Variant>
+
+    <Variant title="Disabled" id="disabled">
+      <Rating :model-value="3" disabled />
+    </Variant>
+
+    <Variant title="Inside FormField" id="inside-form-field">
+      <Form v-model="formData">
+        <FormField name="rating" label="Your rating">
+          <Rating required />
+        </FormField>
+      </Form>
+    </Variant>
+
+  </Story>
+</template>
+
+<docs lang="md">
+# Rating
+
+## Description
+Star rating component built on the DaisyUI `rating` element.
+Rendered as a set of `<input type="radio" />` elements styled as stars.
+Supports half-star precision and a clearable affordance.
+Works standalone with `v-model` or inside `<FormField />` for full form integration.
+
+## API
+
+### v-model
+
+| Name      | Type     | Modifiers | Description                                                                                   |
+|-----------|----------|-----------|-----------------------------------------------------------------------------------------------|
+| `v-model` | `number` | -         | Current rating value (1-based). `0` means no star selected. Increments by `0.5` in half mode. |
+
+### Props
+
+| Prop        | Type           | Default     | Configurable       | Description                                                 |
+|-------------|----------------|-------------|--------------------|-------------------------------------------------------------|
+| `color`     | `RatingColor`  | `undefined` | :white_check_mark: | Color applied to the star icons.                            |
+| `size`      | `RatingSize`   | `'md'`      | :white_check_mark: | Size of the stars.                                          |
+| `count`     | `number`       | `5`         | :white_check_mark: | Total number of stars.                                      |
+| `half`      | `boolean`      | `false`     | :white_check_mark: | Enables half-star precision (0.5 increments).               |
+| `clearable` | `boolean`      | `true`      | :white_check_mark: | Allows clearing the rating by re-selecting the active star. |
+| `disabled`  | `boolean`      | `undefined` | :x:                | Disables all interaction.                                   |
+| `required`  | `boolean`      | `undefined` | :x:                | Native required. Signals `<FormField />` to display `"*"`.  |
+
+### Events
+
+| Event     | Payload  | Description                                                                            |
+|-----------|----------|----------------------------------------------------------------------------------------|
+| `@change` | `number` | Emitted when the selected star changes. Payload is the new value (`0` when cleared).   |
+| `@blur`   | `Event`  | Emitted when focus leaves the rating. Triggers validation when inside `<FormField />`. |
+
+> **Configurable** props can be set globally via the Poppy UI plugin (`components.rating` option). See [Plugin Configuration](../../../stories/Configuration.story.md) for more information.
+
+## Usage
+```vue
+<!-- Standalone -->
+<Rating v-model="score" color="warning" />
+
+<!-- Half precision -->
+<Rating v-model="score" half />
+
+<!-- Not clearable -->
+<Rating v-model="score" :clearable="false" />
+
+<!-- Inside FormField -->
+<FormField name="rating" label="Your rating">
+  <Rating required />
+</FormField>
+```
+</docs>

package/src/components/data/rating/Rating.vue

@@ -0,0 +1,190 @@
+<script lang="ts">
+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, useTemplateRef } from 'vue'
+import { RATING_CONFIG } from './rating.context'
+import type { RatingProps } from './rating.props'
+import type { RatingColor, RatingMask, RatingSize } from './rating.types'
+
+const colors: ComponentClass<'bg', RatingColor> = {
+  neutral: 'bg-neutral',
+  primary: 'bg-primary',
+  secondary: 'bg-secondary',
+  accent: 'bg-accent',
+  info: 'bg-info',
+  success: 'bg-success',
+  warning: 'bg-warning',
+  error: 'bg-error',
+}
+
+const sizes: ComponentClass<'rating', RatingSize> = {
+  xs: 'rating-xs',
+  sm: 'rating-sm',
+  md: 'rating-md',
+  lg: 'rating-lg',
+  xl: 'rating-xl',
+}
+
+const masks: ComponentClass<'mask', RatingMask> = {
+  'hexagon-2': 'mask-hexagon-2',
+  'star-2': 'mask-star-2',
+  'triangle-2': 'mask-triangle-2',
+  'triangle-3': 'mask-triangle-3',
+  'triangle-4': 'mask-triangle-4',
+  circle: 'mask-circle',
+  decagon: 'mask-decagon',
+  diamond: 'mask-diamond',
+  heart: 'mask-heart',
+  hexagon: 'mask-hexagon',
+  pentagon: 'mask-pentagon',
+  square: 'mask-square',
+  squircle: 'mask-squircle',
+  star: 'mask-star',
+  triangle: 'mask-triangle',
+}
+</script>
+
+<script setup lang="ts">
+const props = defineProps<RatingProps>()
+
+/**
+ * The current rating value (1-based star index).
+ * In half mode, increments by 0.5 (e.g. 0.5, 1, 1.5, 2…).
+ * A value of 0 means no star is selected.
+ */
+const model = defineModel<number>()
+
+const config = useComponentConfig(RATING_CONFIG, props, {
+  size: 'md',
+  count: 5,
+  half: false,
+  clearable: true,
+  mask: 'star',
+})
+
+// ── Refs ─────────────────────────────────────────────────────────────────────
+
+const rootEl = useTemplateRef('rootEl')
+
+// ── Form field ───────────────────────────────────────────────────────────────
+
+// Rating uses a hidden input as the form field anchor for constraint validation
+const hiddenEl = useTemplateRef('hiddenEl')
+
+const { field, fieldValue, onBlur, clearError } = useFormField<number>({
+  required: computed(() => !!props.required),
+  inputEl: hiddenEl,
+})
+
+// ── Value resolution ─────────────────────────────────────────────────────────
+
+const resolvedValue = computed(() => field ? (fieldValue.value ?? 0) : (model.value ?? 0))
+
+function handleChange(value: number): void {
+  model.value = value
+  field?.setValue(value)
+  field?.setDirty(true)
+  clearError()
+}
+
+// ── Star generation ──────────────────────────────────────────────────────────
+
+interface StarInput {
+  key: string
+  value: number
+  // full mode: 'mask-star' | half mode left half: 'mask-star-2 mask-half-1' | right half: 'mask-star-2 mask-half-2'
+  maskClass: string
+}
+
+const stars = computed<StarInput[]>(() => {
+  const count = config.value.count ?? 5
+  const half = config.value.half
+  const result: StarInput[] = []
+  const mask = getClass(masks, config.value.mask)
+
+  for (let i = 1; i <= count; i++) {
+    if (half) {
+      result.push({
+        key: `${i}-left`,
+        value: i - 0.5,
+        maskClass: `mask ${mask} mask-half-1`,
+      })
+      result.push({
+        key: `${i}-right`,
+        value: i,
+        maskClass: `mask ${mask} mask-half-2`,
+      })
+    } else {
+      result.push({
+        key: String(i),
+        value: i,
+        maskClass: `mask ${mask}`,
+      })
+    }
+  }
+
+  return result
+})
+
+// ── Error ────────────────────────────────────────────────────────────────────
+
+const hasError = computed(() => !!field?.error.value)
+
+defineExpose({
+  $el: rootEl,
+  focus: () => rootEl.value
+    ?.querySelector<HTMLInputElement>('input[type="radio"]:not(.hidden):not(.rating-hidden)')
+    ?.focus(),
+})
+</script>
+
+<template>
+  <div
+    ref="rootEl"
+    class="rating"
+    :class="[
+      getClass(sizes, config.size),
+      { 'rating-half': config.half },
+      { 'opacity-50 pointer-events-none': disabled },
+    ]"
+    @blur.capture="onBlur"
+  >
+    <!-- Hidden anchor input for constraint validation -->
+    <input
+      ref="hiddenEl"
+      type="radio"
+      class="hidden"
+      :required="required"
+      :checked="resolvedValue > 0"
+    />
+
+    <!-- Clear affordance — hidden radio at index 0 -->
+    <input
+      v-if="config.clearable"
+      type="radio"
+      class="rating-hidden"
+      name="rating"
+      :disabled="disabled"
+      :checked="resolvedValue === 0"
+      @change="handleChange(0)"
+    />
+
+    <!-- Star inputs -->
+    <input
+      v-for="star in stars"
+      :key="star.key"
+      type="radio"
+      name="rating"
+      :class="[
+        star.maskClass,
+        getClass(colors, config.color),
+        { 'border-error': hasError },
+      ]"
+      :checked="resolvedValue === star.value"
+      :disabled="disabled"
+      @change="handleChange(star.value)"
+    />
+  </div>
+</template>

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

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

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

@@ -0,0 +1,43 @@
+import type { RatingColor, RatingMask, RatingSize } from './rating.types'
+export interface RatingConfigurableProps {
+  /**
+   * Color applied to the star icons.
+   */
+  color?: RatingColor
+  /**
+   * Size of the rating stars.
+   *
+   * @default 'md'
+   */
+  size?: RatingSize
+  /**
+   * Total number of stars.
+   *
+   * @default 5
+   */
+  count?: number
+  /**
+   * Renders half-star precision using split mask inputs.
+   * In half mode the model value increments by 0.5.
+   *
+   * @default false
+   */
+  half?: boolean
+  /**
+   * Allows clearing the rating by selecting the active value again.
+   * Adds a hidden radio at index 0.
+   *
+   * @default true
+   */
+  clearable?: boolean
+  /**
+   * @default 'star'
+   */
+  mask?: RatingMask
+}
+export interface RatingProps extends RatingConfigurableProps {
+  /** Disables all interaction. */
+  disabled?: boolean
+  /** Marks as required — signals FormField to display "*". */
+  required?: boolean
+}

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

@@ -0,0 +1,8 @@
+import type { MaskVariant } from '@/public'
+import type { ComponentSize } from '@/types/size.type'
+
+export type RatingColor = 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'
+
+export type RatingSize = ComponentSize
+
+export type RatingMask = MaskVariant