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

package/src/components/display/chat/Chat.story.vue

@@ -0,0 +1,251 @@
+<script lang="ts">
+import Avatar from '@/components/display/avatar/Avatar.vue'
+import { reactive } from 'vue'
+import Chat from './Chat.vue'
+import type { ChatProps } from './chat.props'
+
+const AVATAR_1 = 'https://picsum.photos/seed/chat1/192/192'
+const AVATAR_2 = 'https://picsum.photos/seed/chat2/192/192'
+</script>
+
+<script setup lang="ts">
+const state = reactive<ChatProps>({
+  side: 'start',
+  color: undefined,
+})
+</script>
+
+<template>
+  <Story group="components" title="Display/Chat" auto-props-disabled>
+    <template #default>
+
+      <Variant title="Default">
+        <template #controls>
+          <HstSelect title="Side"  v-model="state.side"  :options="['start', 'end']" />
+          <HstSelect title="Color" v-model="state.color" :options="[{ label: '-- default --', value: undefined }, 'neutral', 'primary', 'secondary', 'accent', 'info', 'success', 'warning', 'error']" />
+        </template>
+
+        <template #source>
+          <textarea v-pre>
+            <Chat side="start">
+              It's over Anakin, I have the high ground.
+            </Chat>
+          </textarea>
+        </template>
+
+        <Chat v-bind="state">
+          It's over Anakin, I have the high ground.
+        </Chat>
+      </Variant>
+
+      <Variant title="With image and header">
+        <template #source>
+          <textarea v-pre>
+            <Chat side="start">
+              <template #image>
+                <Avatar size="xs" shape="rounded-full">
+                  <img src="..." alt="Obi-Wan" />
+                </Avatar>
+              </template>
+              <template #header>Obi-Wan Kenobi</template>
+              It's over Anakin, I have the high ground.
+            </Chat>
+          </textarea>
+        </template>
+
+        <div class="chat-story chat-story--col">
+          <Chat side="start">
+            <template #image>
+              <Avatar size="xs" shape="rounded-full">
+                <img :src="AVATAR_1" alt="Obi-Wan" />
+              </Avatar>
+            </template>
+            <template #header>Obi-Wan Kenobi</template>
+            It's over Anakin, I have the high ground.
+          </Chat>
+          <Chat side="end">
+            <template #image>
+              <Avatar size="xs" shape="rounded-full">
+                <img :src="AVATAR_2" alt="Anakin" />
+              </Avatar>
+            </template>
+            <template #header>Anakin Skywalker</template>
+            You underestimate my power!
+          </Chat>
+        </div>
+      </Variant>
+
+      <Variant title="With footer">
+        <template #source>
+          <textarea v-pre>
+            <Chat side="start">
+              <template #footer>
+                <span class="opacity-50 text-xs">Delivered</span>
+              </template>
+              It's over Anakin, I have the high ground.
+            </Chat>
+          </textarea>
+        </template>
+
+        <div class="chat-story chat-story--col">
+          <Chat side="start">
+            <template #footer>
+              <span class="opacity-50 text-xs">12:45</span>
+            </template>
+            It's over Anakin, I have the high ground.
+          </Chat>
+          <Chat side="end">
+            <template #footer>
+              <span class="opacity-50 text-xs">Delivered ✓</span>
+            </template>
+            You underestimate my power!
+          </Chat>
+        </div>
+      </Variant>
+
+      <Variant title="Colors">
+        <div class="chat-story chat-story--col">
+          <Chat v-for="color in (['neutral', 'primary', 'secondary', 'accent', 'info', 'success', 'warning', 'error'])" :key="color" side="start" :color="color">
+            {{ color }} bubble
+          </Chat>
+        </div>
+      </Variant>
+
+      <Variant title="Conversation">
+        <template #source>
+          <textarea v-pre>
+            <Chat side="start" color="neutral">
+              <template #image>
+                <Avatar size="xs" shape="rounded-full">
+                  <img src="..." alt="Obi-Wan" />
+                </Avatar>
+              </template>
+              <template #header>Obi-Wan Kenobi</template>
+              <template #footer>
+                <span class="text-xs opacity-50">10:00</span>
+              </template>
+              It's over Anakin, I have the high ground.
+            </Chat>
+
+            <Chat side="end" color="primary">
+              <template #image>
+                <Avatar size="xs" shape="rounded-full">
+                  <img src="..." alt="Anakin" />
+                </Avatar>
+              </template>
+              <template #header>Anakin Skywalker</template>
+              <template #footer>
+                <span class="text-xs opacity-50">10:01 ✓</span>
+              </template>
+              You underestimate my power!
+            </Chat>
+          </textarea>
+        </template>
+
+        <div class="chat-story chat-story--col">
+          <Chat side="start" color="neutral">
+            <template #image>
+              <Avatar size="xs" shape="rounded-full">
+                <img :src="AVATAR_1" alt="Obi-Wan" />
+              </Avatar>
+            </template>
+            <template #header>Obi-Wan Kenobi</template>
+            <template #footer><span class="text-xs opacity-50">10:00</span></template>
+            It's over Anakin, I have the high ground.
+          </Chat>
+
+          <Chat side="end" color="primary">
+            <template #image>
+              <Avatar size="xs" shape="rounded-full">
+                <img :src="AVATAR_2" alt="Anakin" />
+              </Avatar>
+            </template>
+            <template #header>Anakin Skywalker</template>
+            <template #footer><span class="text-xs opacity-50">10:01 ✓</span></template>
+            You underestimate my power!
+          </Chat>
+
+          <Chat side="start" color="neutral">
+            <template #image>
+              <Avatar size="xs" shape="rounded-full">
+                <img :src="AVATAR_1" alt="Obi-Wan" />
+              </Avatar>
+            </template>
+            <template #header>Obi-Wan Kenobi</template>
+            <template #footer><span class="text-xs opacity-50">10:02</span></template>
+            Don't try it.
+          </Chat>
+        </div>
+      </Variant>
+
+    </template>
+  </Story>
+</template>
+
+<style scoped>
+.chat-story {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+}
+
+.chat-story--col {
+  flex-direction: column;
+  max-width: 480px;
+  width: 100%;
+}
+</style>
+
+<docs lang="md">
+# Chat
+
+## Description
+
+A chat bubble component for displaying conversation messages.
+Built on DaisyUI's `chat` class system. Supports avatars, headers, footers, and color-coded bubbles.
+
+## Props
+
+| Prop    | Type        | Default     | Required | Configurable       | Description                                             |
+|---------|-------------|-------------|----------|--------------------|---------------------------------------------------------|
+| `side`  | `ChatSide`  | `'start'`   | :x:      | :x:                | Side of the bubble. `'start'` (left) / `'end'` (right). |
+| `color` | `ChatColor` | `undefined` | :x:      | :white_check_mark: | Color theme applied to the chat bubble.                 |
+
+> **Configurable** props can be set globally via the Poppy UI plugin (`components.chat` option). See [Plugin Configuration](../../../stories/Configuration.story.md) for more information.
+
+## Slots
+
+| Slot      | Description                                                              |
+|-----------|--------------------------------------------------------------------------|
+| `image`   | Avatar or image displayed beside the bubble. Wrapped in `chat-image`.    |
+| `header`  | Name or title above the bubble. Wrapped in `chat-header`.                |
+| `default` | Main content of the chat bubble.                                         |
+| `footer`  | Metadata below the bubble (timestamp, status). Wrapped in `chat-footer`. |
+| `meta`    | Additional metadata. Wrapped in `chat-meta`.                             |
+
+## Usage
+
+```vue
+<!-- Basic -->
+<Chat side="start">Hello world!</Chat>
+
+<!-- With avatar and header -->
+<Chat side="start" color="neutral">
+  <template #image>
+    <Avatar size="xs" shape="rounded-full">
+      <img src="..." alt="User" />
+    </Avatar>
+  </template>
+  <template #header>John Doe</template>
+  Hey, how are you?
+</Chat>
+
+<!-- With footer -->
+<Chat side="end" color="primary">
+  <template #footer>
+    <span class="text-xs opacity-50">Delivered ✓</span>
+  </template>
+  I'm doing great, thanks!
+</Chat>
+```
+</docs>

package/src/components/display/chat/Chat.vue

@@ -0,0 +1,56 @@
+<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 { CHAT_CONFIG } from './chat.context'
+import type { ChatProps } from './chat.props'
+import type { ChatColor } from './chat.types'
+
+const chatColors: ComponentClass<'chat-bubble', ChatColor> = {
+  neutral: 'chat-bubble-neutral',
+  primary: 'chat-bubble-primary',
+  secondary: 'chat-bubble-secondary',
+  accent: 'chat-bubble-accent',
+  info: 'chat-bubble-info',
+  success: 'chat-bubble-success',
+  warning: 'chat-bubble-warning',
+  error: 'chat-bubble-error',
+}
+</script>
+
+<script setup lang="ts">
+const props = defineProps<ChatProps>()
+const config = useComponentConfig(CHAT_CONFIG, props, {
+  side: 'start',
+})
+</script>
+
+<template>
+  <div
+    class="chat"
+    :class="config.side === 'end' ? 'chat-end' : 'chat-start'"
+  >
+    <div v-if="$slots.image" class="chat-image">
+      <slot name="image" />
+    </div>
+
+    <div v-if="$slots.header" class="chat-header">
+      <slot name="header" />
+    </div>
+
+    <div
+      class="chat-bubble"
+      :class="getClass(chatColors, config.color)"
+    >
+      <slot />
+    </div>
+
+    <div v-if="$slots.footer" class="chat-footer">
+      <slot name="footer" />
+    </div>
+
+    <div v-if="$slots.meta" class="chat-meta">
+      <slot name="meta" />
+    </div>
+  </div>
+</template>

package/src/components/display/chat/chat.context.ts

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

package/src/components/display/chat/chat.props.ts

@@ -0,0 +1,19 @@
+import type { ChatColor, ChatSide } from './chat.types'
+
+export interface ChatConfigurableProps {
+  /**
+   * Color theme applied to the chat bubble.
+   */
+  color?: ChatColor
+}
+
+export interface ChatProps extends ChatConfigurableProps {
+  /**
+   * Side of the chat bubble.
+   * - `'start'`: Left side (incoming message).
+   * - `'end'`: Right side (outgoing message).
+   *
+   * @default 'start'
+   */
+  side?: ChatSide
+}

package/src/components/display/chat/chat.types.ts

@@ -0,0 +1,2 @@
+export type ChatSide = 'start' | 'end'
+export type ChatColor = 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'

package/src/components/display/countdown/Countdown.story.vue

@@ -0,0 +1,284 @@
+<script lang="ts">
+import { logEvent } from 'histoire/client'
+import { computed, ref } from 'vue'
+import Countdown from './Countdown.vue'
+</script>
+
+<script setup lang="ts">
+const inTenMinutes  = computed(() => addSeconds(600))
+const eventDate     = computed(() => addDays(15))
+const customTarget  = ref(addSeconds(30))
+
+function resetCustom() {
+  customTarget.value = addSeconds(30)
+}
+
+function addSeconds(n: number): Date {
+  return new Date(Date.now() + n * 1000)
+}
+
+function addDays(n: number): Date {
+  return new Date(Date.now() + n * 24 * 60 * 60 * 1000)
+}
+</script>
+
+<template>
+  <Story group="components" title="Display/Countdown" auto-props-disabled>
+    <template #default>
+
+      <Variant title="Default (hh:mm:ss)">
+        <template #source>
+          <textarea v-pre>
+            <Countdown :to="targetDate" @end="onEnd" />
+          </textarea>
+        </template>
+
+        <Countdown :to="inTenMinutes" @end="logEvent('end', $event)" />
+      </Variant>
+
+      <Variant title="Custom slot — dd hh mm ss">
+        <template #source>
+          <textarea v-pre>
+            <Countdown :to="targetDate">
+              <template #default="{ days, hours, minutes, seconds }">
+                <div class="grid auto-cols-max grid-flow-col gap-5 text-center">
+                  <div class="flex flex-col">
+                    <span class="countdown font-mono text-5xl">
+                      <span :style="{ '--value': days }">{{ days }}</span>
+                    </span>
+                    days
+                  </div>
+                  <!-- etc. -->
+                </div>
+              </template>
+            </Countdown>
+          </textarea>
+        </template>
+
+        <Countdown :to="eventDate">
+          <template #default="{ days, hours, minutes, seconds }">
+            <div class="grid auto-cols-max grid-flow-col gap-5 text-center">
+              <div class="flex flex-col">
+                <span class="countdown font-mono text-5xl">
+                  <span :style="{ '--value': days }" :aria-label="days.toString()">{{ days }}</span>
+                </span>
+                days
+              </div>
+              <div class="flex flex-col">
+                <span class="countdown font-mono text-5xl">
+                  <span :style="{ '--value': hours }" :aria-label="hours.toString()">{{ hours }}</span>
+                </span>
+                hours
+              </div>
+              <div class="flex flex-col">
+                <span class="countdown font-mono text-5xl">
+                  <span :style="{ '--value': minutes }" :aria-label="minutes.toString()">{{ minutes }}</span>
+                </span>
+                min
+              </div>
+              <div class="flex flex-col">
+                <span class="countdown font-mono text-5xl">
+                  <span :style="{ '--value': seconds }" :aria-label="seconds.toString()">{{ seconds }}</span>
+                </span>
+                sec
+              </div>
+            </div>
+          </template>
+        </Countdown>
+      </Variant>
+
+      <Variant title="In boxes">
+        <Countdown :to="eventDate">
+          <template #default="{ days, hours, minutes, seconds }">
+            <div class="grid auto-cols-max grid-flow-col gap-5 text-center">
+              <div class="bg-neutral rounded-box text-neutral-content flex flex-col p-2 min-w-16">
+                <span class="countdown font-mono text-5xl">
+                  <span :style="{ '--value': days }" :aria-label="days.toString()">{{ days }}</span>
+                </span>
+                days
+              </div>
+              <div class="bg-neutral rounded-box text-neutral-content flex flex-col p-2 min-w-16">
+                <span class="countdown font-mono text-5xl">
+                  <span :style="{ '--value': hours }" :aria-label="hours.toString()">{{ hours }}</span>
+                </span>
+                hours
+              </div>
+              <div class="bg-neutral rounded-box text-neutral-content flex flex-col p-2 min-w-16">
+                <span class="countdown font-mono text-5xl">
+                  <span :style="{ '--value': minutes }" :aria-label="minutes.toString()">{{ minutes }}</span>
+                </span>
+                min
+              </div>
+              <div class="bg-neutral rounded-box text-neutral-content flex flex-col p-2 min-w-16">
+                <span class="countdown font-mono text-5xl">
+                  <span :style="{ '--value': seconds }" :aria-label="seconds.toString()">{{ seconds }}</span>
+                </span>
+                sec
+              </div>
+            </div>
+          </template>
+        </Countdown>
+      </Variant>
+
+      <Variant title="@end event">
+        <div class="countdown-story countdown-story--col">
+          <p class="countdown-story--hint">
+            Countdown reaches zero in 30 seconds — watch the event log.
+            Click <strong>Reset</strong> to restart.
+          </p>
+          <div class="countdown-story countdown-story--row">
+            <Countdown :to="customTarget" @end="logEvent('end', $event)">
+              <template #default="{ seconds, done }">
+                <span v-if="done" class="text-success font-bold text-2xl">Done! 🎉</span>
+                <span v-else class="countdown font-mono text-5xl">
+                  <span :style="{ '--value': seconds }" :aria-label="seconds.toString()">{{ seconds }}</span>
+                </span>
+              </template>
+            </Countdown>
+            <button class="countdown-story--btn" @click="resetCustom">Reset</button>
+          </div>
+        </div>
+      </Variant>
+
+      <Variant title="ISO string and timestamp">
+        <template #source>
+          <textarea v-pre>
+            <!-- ISO string -->
+            <Countdown to="2026-12-31T23:59:59" />
+
+            <!-- Unix timestamp -->
+            <Countdown :to="Date.now() + 60_000" />
+          </textarea>
+        </template>
+
+        <div class="countdown-story countdown-story--col">
+          <div class="countdown-story--item">
+            <span class="countdown-story--label">ISO string — 2026-12-31T23:59:59</span>
+            <Countdown to="2026-12-31T23:59:59" />
+          </div>
+          <div class="countdown-story--item">
+            <span class="countdown-story--label">Unix timestamp (+10 min)</span>
+            <Countdown :to="inTenMinutes.getTime()" />
+          </div>
+        </div>
+      </Variant>
+
+    </template>
+  </Story>
+</template>
+
+<style scoped>
+.countdown-story {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.countdown-story--row {
+  align-items: center;
+}
+
+.countdown-story--col {
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.countdown-story--item {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.countdown-story--label {
+  font-size: 0.7rem;
+  color: #9ca3af;
+  font-family: monospace;
+}
+
+.countdown-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;
+}
+
+.countdown-story--btn {
+  font-size: 0.75rem;
+  padding: 4px 10px;
+  border-radius: 4px;
+  border: 1px solid #d1d5db;
+  background: #f9fafb;
+  cursor: pointer;
+  color: #374151;
+}
+
+.countdown-story--btn:hover {
+  background: #f3f4f6;
+}
+</style>
+
+<docs lang="md">
+# Countdown
+
+## Description
+
+Displays an animated countdown to a target date/time.
+Built on DaisyUI's `countdown` class system with an internal `setInterval` that ticks every 500ms.
+Fully customisable via the `default` slot — the default render shows `hh:mm:ss`.
+
+## Props
+
+| Prop | Type                       | Default     | Required           | Configurable | Description                                                             |
+|------|----------------------------|-------------|--------------------|--------------|-------------------------------------------------------------------------|
+| `to` | `Date \| string \| number` | `undefined` | :white_check_mark: | :x:          | Target date/time. Accepts a `Date`, ISO string, or Unix timestamp (ms). |
+
+## Events
+
+| Event  | Payload | Description                                   |
+|--------|---------|-----------------------------------------------|
+| `@end` | `-`     | Emitted once when the countdown reaches zero. |
+
+## Slot
+
+| Slot      | Bindings                                                                                | Description                              |
+|-----------|-----------------------------------------------------------------------------------------|------------------------------------------|
+| `default` | `{ days, hours, minutes, seconds, done }` undefined all `number` except `done: boolean` | Custom render. Falls back to `hh:mm:ss`. |
+
+## Exposed
+
+| Member  | Type                                      | Description                    |
+|---------|-------------------------------------------|--------------------------------|
+| `delta` | `{ days, hours, minutes, seconds, done }` | Reactive current delta values. |
+
+## Usage
+
+```vue
+<!-- Default render (hh:mm:ss) -->
+<Countdown :to="new Date('2026-12-31')" @end="onEnd" />
+
+<!-- ISO string -->
+<Countdown to="2026-12-31T23:59:59" />
+
+<!-- Unix timestamp -->
+<Countdown :to="Date.now() + 60_000" />
+
+<!-- Custom slot -->
+<Countdown :to="targetDate">
+  <template #default="{ days, hours, minutes, seconds, done }">
+    <span v-if="done">Time's up!</span>
+    <div v-else class="flex gap-4">
+      <div>
+        <span class="countdown font-mono text-5xl">
+          <span :style="{ '--value': days }">{{ days }}</span>
+        </span>
+        days
+      </div>
+      <!-- etc. -->
+    </div>
+  </template>
+</Countdown>
+```
+</docs>