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

package/src/components/feedback/progress/Progress.vue

@@ -0,0 +1,37 @@
+<script lang="ts">
+import { useComponentConfig } from '@/composables/use-component-config'
+import type { ComponentClass } from '@/types/utils.type'
+import { getClass } from '@/utils/build-class.util'
+import { isTrue } from '@/utils/is-true'
+import { computed } from 'vue'
+import { PROGRESS_CONFIG } from './progress.context'
+import type { ProgressProps } from './progress.props'
+import type { ProgressColor } from './progress.types'
+
+const colors: ComponentClass<'progress', ProgressColor> = {
+  neutral: 'progress-neutral',
+  primary: 'progress-primary',
+  secondary: 'progress-secondary',
+  accent: 'progress-accent',
+  info: 'progress-info',
+  success: 'progress-success',
+  warning: 'progress-warning',
+  error: 'progress-error',
+}
+</script>
+
+<script setup lang="ts">
+const props = defineProps<ProgressProps>()
+const config = useComponentConfig(PROGRESS_CONFIG, props, { max: 100 })
+
+const isIndeterminate = computed(() => isTrue(props.indeterminate) || props.value === undefined)
+</script>
+
+<template>
+  <progress
+    class="progress"
+    :class="getClass(colors, config.color)"
+    :value="isIndeterminate ? undefined : props.value"
+    :max="isIndeterminate ? undefined : config.max"
+  />
+</template>

package/src/components/feedback/progress/progress.context.ts

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

package/src/components/feedback/progress/progress.props.ts

@@ -0,0 +1,32 @@
+import type { Booleanish } from '@/types/utils.type'
+import type { ProgressColor } from './progress.types'
+
+export interface ProgressConfigurableProps {
+  /**
+   * Color of the progress bar.
+   */
+  color?: ProgressColor
+}
+
+export interface ProgressProps extends ProgressConfigurableProps {
+  /**
+   * Current value of the progress bar.
+   * Omit or set to `undefined` for indeterminate state.
+   */
+  value?: number
+
+  /**
+   * Maximum value of the progress bar.
+   *
+   * @default 100
+   */
+  max?: number
+
+  /**
+   * When true, renders the progress bar in an indeterminate (animated) state.
+   * Takes precedence over `value`.
+   *
+   * @default false
+   */
+  indeterminate?: Booleanish
+}

package/src/components/feedback/progress/progress.types.ts

@@ -0,0 +1 @@
+export type ProgressColor = 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'

package/src/components/feedback/public.ts

@@ -0,0 +1,5 @@
+export { default as Alert } from './alert/Alert.vue'
+export { default as Loading } from './loading/Loading.vue'
+export { default as Progress } from './progress/Progress.vue'
+export { default as Toast } from './toast/Toast.vue'
+export { default as Tooltip } from './tooltip/Tooltip.vue'

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

@@ -0,0 +1,18 @@
+// Alert
+export type { AlertProps } from './alert/alert.props'
+export * from './alert/alert.types'
+// Loading
+export type { LoadingProps } from './loading/loading.props'
+export * from './loading/loading.types'
+// Progress
+export type { ProgressProps } from './progress/progress.props'
+export * from './progress/progress.types'
+// Radial Progress
+export type { RadialProgressProps } from './radial-progress/radial-progress.props'
+export * from './radial-progress/radial-progress.types'
+// Toast
+export type { ToastProps } from './toast/toast.props'
+export * from './toast/toast.types'
+// Tooltip
+export type { TooltipProps } from './tooltip/tooltip.props'
+export * from './tooltip/tooltip.types'

package/src/components/feedback/radial-progress/RadialProgress.story.vue

@@ -0,0 +1,118 @@
+<script lang="ts">
+import { reactive } from 'vue'
+import RadialProgress from './RadialProgress.vue'
+import type { RadialProgressProps } from './radial-progress.props'
+</script>
+
+<script setup lang="ts">
+const state = reactive<RadialProgressProps>({
+  value: 70,
+  color: undefined,
+  size: undefined,
+  thickness: undefined,
+})
+</script>
+
+<template>
+  <Story group="components" title="Feedback/RadialProgress" auto-props-disabled>
+
+    <Variant title="Default">
+      <template #controls>
+        <HstSelect
+          v-model="state.color"
+          title="Color"
+          :options="[
+            { label: '-- default --', value: undefined },
+            'neutral', 'primary', 'secondary', 'accent',
+            'info', 'success', 'warning', 'error',
+          ]"
+        />
+        <HstSlider v-model="state.value" title="Value" :min="0" :max="100" />
+      </template>
+      <div class="bg-base-100 p-4 rounded-lg">
+        <RadialProgress v-bind="state" />
+      </div>
+    </Variant>
+
+    <Variant title="Colors">
+      <div class="flex flex-wrap gap-4 bg-base-100 p-4 rounded-lg">
+        <RadialProgress color="neutral" :value="70" />
+        <RadialProgress color="primary" :value="70" />
+        <RadialProgress color="secondary" :value="70" />
+        <RadialProgress color="accent" :value="70" />
+        <RadialProgress color="info" :value="70" />
+        <RadialProgress color="success" :value="70" />
+        <RadialProgress color="warning" :value="70" />
+        <RadialProgress color="error" :value="70" />
+      </div>
+    </Variant>
+
+    <Variant title="Different values">
+      <div class="flex flex-wrap gap-4 bg-base-100 p-4 rounded-lg">
+        <RadialProgress color="primary" :value="0" />
+        <RadialProgress color="primary" :value="25" />
+        <RadialProgress color="primary" :value="50" />
+        <RadialProgress color="primary" :value="75" />
+        <RadialProgress color="primary" :value="100" />
+      </div>
+    </Variant>
+
+    <Variant title="Custom size and thickness">
+      <div class="flex flex-wrap gap-4 bg-base-100 p-4 rounded-lg">
+        <RadialProgress color="primary" :value="70" size="8rem" thickness="2px" />
+        <RadialProgress color="primary" :value="70" size="8rem" thickness="1rem" />
+        <RadialProgress color="primary" :value="70" size="12rem" thickness="4px" />
+      </div>
+    </Variant>
+
+    <Variant title="Custom slot content">
+      <div class="flex flex-wrap gap-4 bg-base-100 p-4 rounded-lg">
+        <RadialProgress color="primary" :value="70">
+          <span class="text-xs font-bold">70%</span>
+        </RadialProgress>
+        <RadialProgress color="success" :value="100">
+          ✓
+        </RadialProgress>
+        <RadialProgress color="warning" :value="30">
+          Low
+        </RadialProgress>
+      </div>
+    </Variant>
+
+  </Story>
+</template>
+
+<docs lang="md">
+# RadialProgress
+
+## Description
+Radial progress bar used to show the completion of a task or the passing of time.
+Renders as a `<div role="progressbar" />` for cross-browser compatibility (Firefox doesn't support pseudo-elements inside `<progress />`).
+
+## Props
+| Prop        | Type                  | Default     | Required | Configurable       | Description                                        |
+|-------------|-----------------------|-------------|----------|--------------------|----------------------------------------------------|
+| `value`     | `number`              | `0`         | :x:      | :x:                | Current value (0–100)                              |
+| `color`     | `RadialProgressColor` | `undefined` | :x:      | :white_check_mark: | Color of the progress arc (`text-{color}`)         |
+| `size`      | `string`              | `'5rem'`    | :x:      | :white_check_mark: | Size of the circle (any CSS value, e.g. `'8rem'`)  |
+| `thickness` | `string`              | `'10%'`     | :x:      | :white_check_mark: | Thickness of the arc (any CSS value, e.g. `'2px'`) |
+
+## Slots
+| Slot      | Description                                             |
+|-----------|---------------------------------------------------------|
+| `default` | Content displayed at the center. Defaults to `{value}%` |
+
+## Usage
+```vue
+<!-- Default -->
+<RadialProgress color="primary" :value="70" />
+
+<!-- Custom size & thickness -->
+<RadialProgress color="success" :value="40" size="8rem" thickness="4px" />
+
+<!-- Custom center content -->
+<RadialProgress color="warning" :value="30">
+  Low
+</RadialProgress>
+```
+</docs>

package/src/components/feedback/radial-progress/RadialProgress.vue

@@ -0,0 +1,46 @@
+<script lang="ts">
+import { useComponentConfig } from '@/composables/use-component-config'
+import type { ComponentClass } from '@/types/utils.type'
+import { getClass } from '@/utils/build-class.util'
+import { computed } from 'vue'
+import { RADIAL_PROGRESS_CONFIG } from './radial-progress.context'
+import type { RadialProgressProps } from './radial-progress.props'
+import type { RadialProgressColor } from './radial-progress.types'
+
+const colors: ComponentClass<'text', RadialProgressColor> = {
+  neutral: 'text-neutral',
+  primary: 'text-primary',
+  secondary: 'text-secondary',
+  accent: 'text-accent',
+  info: 'text-info',
+  success: 'text-success',
+  warning: 'text-warning',
+  error: 'text-error',
+}
+</script>
+
+<script setup lang="ts">
+const props = defineProps<RadialProgressProps>()
+const config = useComponentConfig(RADIAL_PROGRESS_CONFIG, props, {
+  value: 0,
+  size: '5rem',
+})
+
+const cssVars = computed(() => ({
+  '--value': config.value.value,
+  ...(config.value.size && { '--size': config.value.size }),
+  ...(config.value.thickness && { '--thickness': config.value.thickness }),
+}))
+</script>
+
+<template>
+  <div
+    class="radial-progress"
+    :class="getClass(colors, config.color)"
+    :style="cssVars"
+    :aria-valuenow="config.value"
+    role="progressbar"
+  >
+    <slot>{{ config.value }}%</slot>
+  </div>
+</template>

package/src/components/feedback/radial-progress/radial-progress.context.ts

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

package/src/components/feedback/radial-progress/radial-progress.props.ts

@@ -0,0 +1,35 @@
+import type { RadialProgressColor } from './radial-progress.types'
+
+export interface RadialProgressConfigurableProps {
+  /**
+   * Color of the radial progress arc.
+   * Applied as a `text-{color}` Tailwind class.
+   */
+  color?: RadialProgressColor
+
+  /**
+   * Size of the radial progress circle.
+   * Accepts any valid CSS size value.
+   *
+   * @default '5rem'
+   */
+  size?: string
+
+  /**
+   * Thickness of the progress arc.
+   * Accepts any valid CSS size value. Defaults to 10% of `size`.
+   *
+   * @example '2px'
+   * @example '1rem'
+   */
+  thickness?: string
+}
+
+export interface RadialProgressProps extends RadialProgressConfigurableProps {
+  /**
+   * Current value of the radial progress (0–100).
+   *
+   * @default 0
+   */
+  value?: number
+}

package/src/components/feedback/radial-progress/radial-progress.types.ts

@@ -0,0 +1,9 @@
+export type RadialProgressColor =
+  | 'neutral'
+  | 'primary'
+  | 'secondary'
+  | 'accent'
+  | 'info'
+  | 'success'
+  | 'warning'
+  | 'error'

package/src/components/feedback/toast/Toast.story.vue

@@ -0,0 +1,356 @@
+<script lang="ts" setup>
+import Button from '@/components/actions/button/Button.vue'
+import Alert from '@/components/feedback/alert/Alert.vue'
+import type { ToastItem } from '@/composables/use-toast.ts'
+import { computed, provide, reactive, ref } from 'vue'
+import Toast from './Toast.vue'
+import { TOAST_CONTEXT_KEY } from './toast.context'
+import type { ToastProps } from './toast.props'
+import type { ToastAlign, ToastSide } from './toast.types'
+
+const state = reactive<ToastProps>({
+  align: 'end',
+  side: 'bottom',
+})
+
+// ── Toast state ───────────────────────────────────────────────────────────────
+
+const toasts = ref<ToastItem[]>([])
+let nextId = 0
+
+function push(message: string, options?: Partial<Omit<ToastItem, 'id' | 'message'>>) {
+  const duration = options?.duration ?? 3000
+  const item: ToastItem = { id: nextId++, message, duration, ...options }
+  toasts.value.push(item)
+  if (item.duration) setTimeout(() => dismiss(item.id), item.duration)
+}
+
+function dismiss(id: number) {
+  toasts.value = toasts.value.filter(t => t.id !== id)
+}
+
+provide(TOAST_CONTEXT_KEY, { push, dismiss })
+
+// ── Positions variant ─────────────────────────────────────────────────────────
+
+type PositionToast = ToastItem & { align: ToastAlign; side: ToastSide }
+
+const positionToasts = ref<PositionToast[]>([])
+let posNextId = 0
+
+const positions: { align: ToastAlign; side: ToastSide; label: string }[] = [
+  { align: 'start', side: 'top', label: 'top start' },
+  { align: 'center', side: 'top', label: 'top center' },
+  { align: 'end', side: 'top', label: 'top end' },
+  { align: 'start', side: 'middle', label: 'middle start' },
+  { align: 'center', side: 'middle', label: 'middle center' },
+  { align: 'end', side: 'middle', label: 'middle end' },
+  { align: 'start', side: 'bottom', label: 'bottom start' },
+  { align: 'center', side: 'bottom', label: 'bottom center' },
+  { align: 'end', side: 'bottom', label: 'bottom end' },
+]
+
+function pushAt(align: ToastAlign, side: ToastSide) {
+  const item: PositionToast = { id: posNextId++, message: `${align} · ${side}`, duration: 3000, align, side }
+  positionToasts.value.push(item)
+  setTimeout(() => {
+    positionToasts.value = positionToasts.value.filter(t => t.id !== item.id)
+  }, 3000)
+}
+
+const positionGroups = computed(() => {
+  const map = new Map<string, { align: ToastAlign; side: ToastSide; toasts: PositionToast[] }>()
+  for (const toast of positionToasts.value) {
+    const key = `${toast.align}-${toast.side}`
+    if (!map.has(key)) map.set(key, { align: toast.align, side: toast.side, toasts: [] })
+    map.get(key)?.toasts.push(toast)
+  }
+  return [...map.values()]
+})
+</script>
+
+<template>
+  <Story group="components" title="Feedback/Toast" auto-props-disabled>
+    <template #default>
+
+      <Variant title="Default">
+        <template #controls>
+          <HstSelect title="Align" v-model="state.align" :options="['start', 'center', 'end']" />
+          <HstSelect title="Side" v-model="state.side" :options="['top', 'middle', 'bottom']" />
+        </template>
+
+        <template #source>
+          <textarea v-pre>
+            <Toast :align="state.align" :side="state.side" class="z-50">
+              <Alert
+                v-for="toast in toasts"
+                :key="toast.id"
+                :color="toast.color"
+                class="cursor-pointer"
+                @click="dismiss(toast.id)"
+              >
+                {{ toast.message }}
+              </Alert>
+            </Toast>
+          </textarea>
+        </template>
+
+        <div class="toast-story toast-story--col">
+          <p class="toast-story--hint">
+            Toasts are teleported to <code>&lt;body&gt;</code> — change align/side to see them move.
+          </p>
+          <div class="toast-story--row">
+            <Button color="primary" @click="push('Default toast message')">Push toast</Button>
+            <Button color="info" @click="push('Info message', { color: 'info' })">Info</Button>
+            <Button color="success" @click="push('Changes saved!', { color: 'success' })">Success</Button>
+            <Button color="warning" @click="push('Check your settings', { color: 'warning' })">Warning</Button>
+            <Button color="error" @click="push('Something went wrong', { color: 'error' })">Error</Button>
+          </div>
+        </div>
+
+        <Teleport to="body">
+          <Toast v-bind="state" class="z-50">
+            <Alert
+              v-for="toast in toasts"
+              :key="toast.id"
+              :color="toast.color"
+              class="cursor-pointer"
+              @click="dismiss(toast.id)"
+            >
+              {{ toast.message }}
+            </Alert>
+          </Toast>
+        </Teleport>
+      </Variant>
+
+      <Variant title="Positions">
+        <div class="toast-story toast-story--col">
+          <p class="toast-story--hint">Click a button to see a toast appear at that position.</p>
+          <div class="toast-story--grid">
+            <Button
+              v-for="pos in positions"
+              :key="`${pos.align}-${pos.side}`"
+              size="sm"
+              variant="outline"
+              @click="pushAt(pos.align, pos.side)"
+            >
+              {{ pos.label }}
+            </Button>
+          </div>
+        </div>
+
+        <Teleport to="body">
+          <Toast
+            v-for="group in positionGroups"
+            :key="`${group.align}-${group.side}`"
+            :align="group.align"
+            :side="group.side"
+            class="z-50"
+          >
+            <Alert
+              v-for="toast in group.toasts"
+              :key="toast.id"
+              :color="toast.color"
+              class="cursor-pointer"
+              @click="positionToasts = positionToasts.filter(t => t.id !== toast.id)"
+            >
+              {{ toast.message }}
+            </Alert>
+          </Toast>
+        </Teleport>
+      </Variant>
+
+      <Variant title="Duration">
+        <div class="toast-story toast-story--col">
+          <p class="toast-story--hint">
+            Each toast auto-dismisses after its <code>duration</code>.
+            Set to <code>0</code> to disable auto-dismiss — click to close manually.
+          </p>
+          <div class="toast-story--row">
+            <Button size="sm" @click="push('1 second', { duration: 1000, color: 'info' })">1s</Button>
+            <Button size="sm" @click="push('3 seconds (default)', { duration: 3000, color: 'success' })">3s</Button>
+            <Button size="sm" @click="push('5 seconds', { duration: 5000, color: 'warning' })">5s</Button>
+            <Button size="sm" @click="push('No auto-dismiss — click to close', { duration: 0, color: 'error' })">∞</Button>
+          </div>
+        </div>
+
+        <Teleport to="body">
+          <Toast class="z-50">
+            <Alert
+              v-for="toast in toasts"
+              :key="toast.id"
+              :color="toast.color"
+              class="cursor-pointer"
+              @click="dismiss(toast.id)"
+            >
+              {{ toast.message }}
+            </Alert>
+          </Toast>
+        </Teleport>
+      </Variant>
+
+      <Variant title="PoppyApp — useToast()">
+        <template #source>
+          <textarea v-pre>
+            <!-- App.vue -->
+            <PoppyApp>
+              <MyLayout>
+                <RouterView />
+              </MyLayout>
+            </PoppyApp>
+
+            <!-- AnyComponent.vue -->
+            <script setup>
+            const { push } = useToast()
+            </script>
+
+            <Button @click="push('Done!', { color: 'success' })">Save</Button>
+          </textarea>
+        </template>
+        <div class="toast-story toast-story--col">
+          <p class="toast-story--hint">
+            In a real app, wrap your root with <code>&lt;PoppyApp&gt;</code>.
+            Any component in the tree can then call <code>useToast()</code> to push notifications.
+          </p>
+
+          <div class="toast-story--row">
+            <Button color="primary" @click="push('Pushed via useToast()!', { color: 'success' })">
+              Simulate useToast().push()
+            </Button>
+          </div>
+        </div>
+
+        <Teleport to="body">
+          <Toast class="z-50">
+            <Alert
+              v-for="toast in toasts"
+              :key="toast.id"
+              :color="toast.color"
+              class="cursor-pointer"
+              @click="dismiss(toast.id)"
+            >
+              {{ toast.message }}
+            </Alert>
+          </Toast>
+        </Teleport>
+      </Variant>
+
+    </template>
+  </Story>
+</template>
+
+<style scoped>
+.toast-story {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.75rem;
+}
+
+.toast-story--row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  align-items: center;
+}
+
+.toast-story--col {
+  flex-direction: column;
+}
+
+.toast-story--grid {
+  display: grid;
+  grid-template-columns: repeat(3, auto);
+  gap: 0.5rem;
+  width: fit-content;
+}
+
+.toast-story--hint {
+  font-size: 0.875rem;
+  color: #6b7280;
+  background: #f9fafb;
+  border-left: 3px solid #d1d5db;
+  padding: 0.6rem 0.875rem;
+  border-radius: 0 4px 4px 0;
+  max-width: 480px;
+}
+
+.toast-story--hint code {
+  font-size: 0.8rem;
+  background: #e5e7eb;
+  padding: 1px 4px;
+  border-radius: 3px;
+}
+
+</style>
+
+<docs lang="md">
+# Toast
+
+## Description
+
+A fixed-position container for stacked notification messages. Built on DaisyUI's `toast` class system.
+Each notification is rendered as an `Alert` inside the `Toast` container.
+
+In most cases, use `<PoppyApp />` at the root and `useToast()` anywhere in the tree to push notifications transparently.
+The `Toast` component itself remains available as a low-level primitive for custom implementations.
+
+## Toast props
+
+| Prop       | Type         | Default    | Required | Configurable       | Description                                                           |
+|------------|--------------|------------|----------|--------------------|-----------------------------------------------------------------------|
+| `align`    | `ToastAlign` | `'end'`    | :x:      | :white_check_mark: | Horizontal position. `start` / `center` / `end`.                      |
+| `side`     | `ToastSide`  | `'bottom'` | :x:      | :white_check_mark: | Vertical position. `top` / `middle` / `bottom`.                       |
+| `duration` | `number`     | `3000`     | :x:      | :white_check_mark: | Default auto-dismiss delay in ms. Set to `0` to disable auto-dismiss. |
+
+> **Configurable** props can be set globally via the Poppy UI plugin (`components.toast` option). See [Plugin Configuration](../../../stories/Configuration.story.md) for more information.
+
+## ToastItem
+
+| Field     | Type         | Default     | Description                                            |
+|-----------|--------------|-------------|--------------------------------------------------------|
+| `id`      | `number`     | auto        | Auto-incremented identifier.                           |
+| `message` | `string`     | `undefined` | Text content of the notification.                      |
+| `color`   | `ToastColor` | `undefined` | Alert color. `info` / `success` / `warning` / `error`. |
+| `duration`| `number`     | `3000`      | Overrides the global default for this toast.           |
+
+## useToast()
+
+```ts
+const { push, dismiss } = useToast()
+
+// Push a notification
+push('Saved!', { color: 'success' })
+
+// Push with custom duration
+push('Check this out', { color: 'info', duration: 5000 })
+
+// Push with no auto-dismiss
+push('Action required', { color: 'warning', duration: 0 })
+
+// Dismiss manually
+dismiss(id)
+```
+
+## PoppyApp
+
+Wrap your root component with `<PoppyApp />` to enable `useToast()` anywhere in the tree.
+The toast container is rendered automatically via `Teleport`.
+
+```vue
+<!-- App.vue -->
+<PoppyApp>
+  <MyLayout>
+    <RouterView />
+  </MyLayout>
+</PoppyApp>
+```
+
+> **Nuxt note** — `useToast()` uses `inject()` to read state from `<PoppyApp />`, avoiding module-level singletons that would be shared across SSR requests.
+
+## Slots
+
+| Component  | Slot      | Description                         |
+|------------|-----------|-------------------------------------|
+| `Toast`    | `default` | Alert components to display.        |
+| `PoppyApp` | `default` | App content (layouts, RouterView…). |
+</docs>