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

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`      | `Booleanish`   | `false`     | :white_check_mark: | Enables half-star precision (0.5 increments).               |
+| `clearable` | `Booleanish`   | `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 configured in the Poppy Plugin `install` function via the `Poppy` object. 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,178 @@
+<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 { isTrue } from '@/utils/is-true'
+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',
+})
+
+// ── 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(() => isTrue(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 = isTrue(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)
+</script>
+
+<template>
+  <div
+    class="rating"
+    :class="[
+      getClass(sizes, config.size),
+      { 'rating-half': isTrue(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="isTrue(required)"
+      :checked="resolvedValue > 0"
+    />
+
+    <!-- Clear affordance — hidden radio at index 0 -->
+    <input
+      v-if="isTrue(config.clearable)"
+      type="radio"
+      class="rating-hidden"
+      name="rating"
+      :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 '@/symbol'
+
+export const RATING_CONFIG = createComponentConfigKey('rating')

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

@@ -0,0 +1,51 @@
+import type { Booleanish } from '@/types/utils.type'
+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?: Booleanish
+
+  /**
+   * Allows clearing the rating by selecting the active value again.
+   * Adds a hidden radio at index 0.
+   *
+   * @default true
+   */
+  clearable?: Booleanish
+
+  /**
+   * @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

package/src/components/data/select/Select.story.vue

@@ -0,0 +1,221 @@
+<script lang="ts">
+import { Form, FormField } from '@/components/data/public'
+import { reactive, ref } from 'vue'
+import { createI18n } from 'vue-i18n'
+import Select from './Select.vue'
+import type { SelectProps } from './select.props.ts'
+</script>
+
+<script setup lang="ts">
+const model = ref<string>()
+const multiModel = ref<string[]>([])
+
+const state = reactive<SelectProps>({
+  size: 'md',
+  clearable: true,
+})
+
+const countries = [
+  { value: 'fr', label: 'France' },
+  { value: 'de', label: 'Germany' },
+  { value: 'es', label: 'Spain' },
+  { value: 'it', label: 'Italy' },
+  { value: 'pt', label: 'Portugal' },
+]
+
+const tags = [
+  { value: 'vue', label: 'Vue' },
+  { value: 'react', label: 'React' },
+  { value: 'svelte', label: 'Svelte' },
+  { value: 'angular', label: 'Angular' },
+  { value: 'solid', label: 'Solid' },
+]
+
+const formData = ref<Record<string, unknown>>({ country: undefined, stack: [] })
+</script>
+
+<template>
+  <Story group="components" title="Data/Select" auto-props-disabled :setup-app="({ app }) => {
+    app.use(createI18n({ legacy: false, locale: 'en', messages: {
+      en: {
+        common: {
+          field: {
+            select: {
+              placeholder: 'Select an option…',
+              empty: 'No options available',
+            },
+          },
+        },
+      },
+    }}))
+  }" :layout="{ type: 'single', iframe: false }">
+
+    <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.clearable" title="clearable" />
+        <HstCheckbox v-model="state.disabled" title="disabled" />
+        <HstCheckbox v-model="state.required" title="required" />
+        <HstText v-model="state.placeholder" title="placeholder" />
+      </template>
+
+      <Select v-model="model" :options="countries" v-bind="state" />
+    </Variant>
+
+    <Variant title="Colors" id="colors">
+      <div class="flex flex-col gap-2 p-4">
+        <Select v-model="model" :options="countries" color="neutral" placeholder="neutral" />
+        <Select v-model="model" :options="countries" color="primary" placeholder="primary" />
+        <Select v-model="model" :options="countries" color="secondary" placeholder="secondary" />
+        <Select v-model="model" :options="countries" color="accent" placeholder="accent" />
+        <Select v-model="model" :options="countries" color="info" placeholder="info" />
+        <Select v-model="model" :options="countries" color="success" placeholder="success" />
+        <Select v-model="model" :options="countries" color="warning" placeholder="warning" />
+        <Select v-model="model" :options="countries" color="error" placeholder="error" />
+      </div>
+    </Variant>
+
+    <Variant title="Disabled" id="disabled">
+      <Select v-model="model" :options="countries" disabled placeholder="Disabled" />
+    </Variant>
+
+    <Variant title="Clearable" id="clearable">
+      <Select v-model="model" :options="countries" clearable placeholder="Select a country…" />
+    </Variant>
+
+    <Variant title="Multiple" id="multiple">
+      <Select v-model="multiModel" :options="tags" multiple placeholder="Select technologies…" />
+    </Variant>
+
+    <Variant title="Multiple with Counter" id="multiple-counter">
+      <Select
+        v-model="multiModel"
+        :options="tags"
+        multiple
+        :min="1"
+        :max="3"
+        placeholder="Select up to 3…"
+      />
+    </Variant>
+
+    <Variant title="Custom option slot" id="custom-option">
+      <Select v-model="model" :options="countries" placeholder="Select a country…">
+        <template #option="{ option, selected }">
+          <span class="flex items-center gap-2">
+            <span>{{ selected ? '✓' : '○' }}</span>
+            <span>{{ option.label }}</span>
+          </span>
+        </template>
+      </Select>
+    </Variant>
+
+    <Variant title="Inside FormField" id="inside-form-field">
+      <Form v-model="formData">
+        <FormField name="country" label="Country" hint="Where are you based?">
+          <Select :options="countries" required placeholder="Select a country…" />
+        </FormField>
+      </Form>
+    </Variant>
+
+    <Variant title="Multiple inside FormField" id="multiple-inside-form-field">
+      <Form v-model="formData">
+        <FormField name="stack" label="Tech stack">
+          <Select :options="tags" multiple :max="3" placeholder="Select up to 3 technologies…" />
+        </FormField>
+      </Form>
+    </Variant>
+
+  </Story>
+</template>
+
+<docs lang="md">
+# Select
+
+## Description
+
+Custom select component with a dropdown built on DaisyUI `select` styling.
+Supports single and multiple selection, object values with custom equality, clearable mode, badges for multiple selection, and an item counter.
+Works standalone with `v-model` or inside `<FormField />` for full form integration.
+
+## API
+
+### v-model
+
+| Name         | Type                    | Modifiers | Description                                       |
+|--------------|-------------------------|-----------|---------------------------------------------------|
+| `modelValue` | `T \| T[] \| undefined` | `-`       | Selected value. Array when `multiple` is enabled. |
+
+### Props
+
+| Prop               | Type                     | Default     | Configurable       | Description                                                            |
+|--------------------|--------------------------|-------------|--------------------|------------------------------------------------------------------------|
+| `color`            | `SelectColor`            | `undefined` | :white_check_mark: | Color variant.                                                         |
+| `size`             | `SelectSize`             | `'md'`      | :white_check_mark: | Size.                                                                  |
+| `variant`          | `SelectVariant`          | `undefined` | :white_check_mark: | Visual style variant. `'bordered'` or `'ghost'`.                       |
+| `options`          | `SelectOption[]`         | `undefined` | :x:                | List of options to display.                                            |
+| `equals`           | `keyof T \| EqualsArgFn` | `undefined` | :x:                | Key or function used for value equality comparison.                    |
+| `multiple`         | `boolean`                | `false`     | :x:                | Enables multiple selection. Model becomes an array.                    |
+| `clearable`        | `boolean`                | `false`     | :x:                | Shows a clear button when a value is selected (single mode).           |
+| `counterFormatter` | `SelectCounterFormatter` | `undefined` | :white_check_mark: | Custom counter format function `(count, min?, max?) => string`.        |
+| `placeholder`      | `string`                 | `undefined` | :x:                | Text shown when no value is selected.                                  |
+| `name`             | `string`                 | `undefined` | :x:                | Native input name. Inferred from `<FormField />` when not provided.    |
+| `disabled`         | `boolean`                | `false`     | :x:                | Disables all interaction.                                              |
+| `required`         | `boolean`                | `false`     | :x:                | Marks the field as required. Signals `<FormField />` to display `"*"`. |
+
+> The item counter is controlled via native `min` and `max` HTML attributes passed directly to the component.
+
+### Events
+
+| Event   | Payload | Description                               |
+|---------|---------|-------------------------------------------|
+| `clear` | -       | Emitted when the clear button is clicked. |
+
+### Slots
+
+| Slot       | Scope                  | Description                                       |
+|------------|------------------------|---------------------------------------------------|
+| `option`   | `{ option, selected }` | Custom rendering for each option in the dropdown. |
+| `selected` | `{ option, remove }`   | Custom rendering for the selected value(s).       |
+
+### Expose
+
+| Name     | Description                           |
+|----------|---------------------------------------|
+| `open`   | Opens the dropdown programmatically.  |
+| `close`  | Closes the dropdown programmatically. |
+| `toggle` | Toggles the dropdown.                 |
+| `clear`  | Clears the current selection.         |
+
+> **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
+<!-- Single -->
+<Select v-model="country" :options="countries" placeholder="Select a country…" clearable />
+
+<!-- Multiple with counter -->
+<Select v-model="tags" :options="tagOptions" multiple :max="3" />
+
+<!-- Object values with key equality -->
+<Select v-model="user" :options="users" equals="id" />
+
+<!-- Inside FormField -->
+<FormField name="country" label="Country">
+  <Select :options="countries" required placeholder="Select a country…" />
+</FormField>
+```
+</docs>