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

package/src/components/display/list/ListItem.vue

@@ -0,0 +1,53 @@
+<script lang="ts">
+import { computed, useSlots } from 'vue'
+import { RouterLink } from 'vue-router'
+import type { ListItemProps } from './list-item.props'
+</script>
+
+<script setup lang="ts">
+const props = defineProps<ListItemProps>()
+
+const tag = computed(() => props.to ? props.to === '#' ? 'a' : RouterLink : 'li')
+const attr = computed(() => {
+  if (tag.value === 'a') {
+    return {
+      href: props.to
+    }
+  }
+  if (tag.value === 'li') {
+    return {}
+  }
+  return {
+    to: props.to
+  }
+})
+
+const slots = useSlots()
+const hasContent = computed(() => !!props.title || !!props.description || !!slots.title || !!slots.description)
+</script>
+
+<template>
+  <component
+    :is="tag"
+    class="list-row"
+    v-bind="attr"
+  >
+    <slot name="prefix" />
+
+    <div v-if="hasContent" class="list-col-grow">
+      <slot name="title">
+        <div>{{ title }}</div>
+      </slot>
+      <slot name="description">
+        <div class="text-xs uppercase font-semibold opacity-60">{{ description }}</div>
+      </slot>
+    </div>
+    <slot v-else />
+
+    <div v-if="$slots.details" class="list-col-wrap text-xs opacity-60">
+      <slot name="details" />
+    </div>
+
+    <slot name="actions" />
+  </component>
+</template>

package/src/components/display/list/list-item.props.ts

@@ -0,0 +1,19 @@
+import type { RouteLocationRaw } from 'vue-router'
+
+export interface ListItemProps {
+  /**
+   * If provided, the component renders as a `RouterLink`.
+   * Accepts a string path or a route location object.
+   */
+  to?: RouteLocationRaw
+
+  /**
+   * Title text for the list item. Can also be passed via #title slot.
+   */
+  title?: string
+
+  /**
+   * Description text for the list item. Can also be passed via #description slot.
+   */
+  description?: string
+}

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

@@ -0,0 +1,7 @@
+export interface ListProps {
+  /**
+   * Optional title to display at the top of the list.
+   * Can also be passed via the #title slot.
+   */
+  title?: string
+}

package/src/components/display/public.ts

@@ -0,0 +1,18 @@
+export { default as Accordion } from './accordion/Accordion.vue'
+export { default as AccordionItem } from './accordion/AccordionItem.vue'
+export { default as Avatar } from './avatar/Avatar.vue'
+export { default as Badge } from './badge/Badge.vue'
+export { default as Card } from './card/Card.vue'
+export { default as CardActions } from './card/CardActions.vue'
+export { default as CardBody } from './card/CardBody.vue'
+export { default as CardTitle } from './card/CardTitle.vue'
+export { default as Carousel } from './carousel/Carousel.vue'
+export { default as Chat } from './chat/Chat.vue'
+export { default as Countdown } from './countdown/Countdown.vue'
+export { default as Diff } from './diff/Diff.vue'
+export { default as Hover3d } from './hover-3d/Hover3d.vue'
+export { default as HoverGallery } from './hover-gallery/HoverGallery.vue'
+export { default as Kbd } from './kbd/Kbd.vue'
+export { default as List } from './list/List.vue'
+export { default as ListItem } from './list/ListItem.vue'
+export { default as Status } from './status/Status.vue'

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

@@ -0,0 +1,34 @@
+// Accordion
+export type { AccordionProps } from './accordion/accordion.props'
+export type { AccordionItemProps } from './accordion/accordion-item.props'
+export * from './accordion/accordion-item.types'
+// Avatar
+export type { AvatarProps } from './avatar/avatar.props'
+export * from './avatar/avatar.types'
+// Badge
+export type { BadgeProps } from './badge/badge.props'
+export * from './badge/badge.types'
+// Card
+export type { CardProps } from './card/card.props'
+export * from './card/card.types'
+export type { CardActionsProps } from './card/card-actions.props'
+export * from './card/card-actions.types'
+// Carousel
+export type { CarouselProps } from './carousel/carousel.props'
+export * from './carousel/carousel.types'
+// Chat
+export type { ChatProps } from './chat/chat.props'
+export * from './chat/chat.types'
+// Countdown
+export type { CountdownProps } from './countdown/countdown.props'
+export * from './countdown/countdown.types'
+// Hover3d
+export type { Hover3dProps } from './hover-3d/hover-3d.props'
+// Kbd
+export type { KbdProps } from './kbd/kbd.props'
+export * from './kbd/kbd.types'
+// List
+export type { ListItemProps } from './list/list-item.props'
+// Status
+export type { StatusProps } from './status/status.props'
+export * from './status/status.types'

package/src/components/display/status/Status.story.vue

@@ -0,0 +1,195 @@
+<script lang="ts">
+import { reactive } from 'vue'
+import Status from './Status.vue'
+import type { StatusProps } from './status.props'
+</script>
+
+<script setup lang="ts">
+const state = reactive<StatusProps>({
+  color: undefined,
+  size: 'md',
+  animation: undefined,
+  label: 'status',
+})
+</script>
+
+<template>
+  <Story group="components" title="Display/Status" auto-props-disabled>
+    <template #default>
+
+      <Variant title="Default">
+        <template #controls>
+          <HstSelect title="Color"     v-model="state.color"     :options="[{ label: '-- default --', value: undefined }, 'neutral', 'primary', 'secondary', 'accent', 'info', 'success', 'warning', 'error']" />
+          <HstSelect title="Size"      v-model="state.size"      :options="['xs', 'sm', 'md', 'lg', 'xl']" />
+          <HstSelect title="Animation" v-model="state.animation" :options="[{ label: '-- default --', value: undefined }, 'ping', 'bounce']" />
+        </template>
+
+        <template #source>
+          <textarea v-pre>
+            <Status color="success" size="md" />
+          </textarea>
+        </template>
+
+        <Status v-bind="state" />
+      </Variant>
+
+      <Variant title="Colors">
+        <div class="status-story status-story--row">
+          <div v-for="color in (['neutral', 'primary', 'secondary', 'accent', 'info', 'success', 'warning', 'error'])" :key="color" class="status-story--item">
+            <Status :color="color" />
+            <span class="status-story--label">{{ color }}</span>
+          </div>
+        </div>
+      </Variant>
+
+      <Variant title="Sizes">
+        <div class="status-story status-story--row" style="align-items: flex-end;">
+          <div v-for="size in (['xs', 'sm', 'md', 'lg', 'xl'])" :key="size" class="status-story--item">
+            <Status color="primary" :size="size" />
+            <span class="status-story--label">{{ size }}</span>
+          </div>
+        </div>
+      </Variant>
+
+      <Variant title="Animations">
+        <template #source>
+          <textarea v-pre>
+            <!-- Ping -->
+            <Status color="error" animation="ping" />
+
+            <!-- Bounce -->
+            <Status color="info" animation="bounce" />
+          </textarea>
+        </template>
+
+        <div class="status-story status-story--col">
+          <div class="status-story--item-group">
+            <span class="status-story--label">ping</span>
+            <div class="status-story status-story--row">
+              <div v-for="color in (['neutral', 'primary', 'secondary', 'accent', 'info', 'success', 'warning', 'error'])" :key="color" class="status-story--item">
+                <Status :color="color" animation="ping" />
+                <span class="status-story--label">{{ color }}</span>
+              </div>
+            </div>
+          </div>
+          <div class="status-story--item-group">
+            <span class="status-story--label">bounce</span>
+            <div class="status-story status-story--row">
+              <div v-for="color in (['neutral', 'primary', 'secondary', 'accent', 'info', 'success', 'warning', 'error'])" :key="color" class="status-story--item">
+                <Status :color="color" animation="bounce" />
+                <span class="status-story--label">{{ color }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Variant>
+
+      <Variant title="Composition">
+        <div class="status-story status-story--col">
+          <div class="status-story--item-row">
+            <Status color="error" animation="ping" />
+            <span class="text-sm">Server is down</span>
+          </div>
+          <div class="status-story--item-row">
+            <Status color="success" />
+            <span class="text-sm">All systems operational</span>
+          </div>
+          <div class="status-story--item-row">
+            <Status color="warning" animation="ping" />
+            <span class="text-sm">Degraded performance</span>
+          </div>
+          <div class="status-story--item-row">
+            <Status color="info" animation="bounce" size="sm" />
+            <span class="text-sm">Unread messages</span>
+          </div>
+          <div class="status-story--item-row">
+            <Status color="neutral" />
+            <span class="text-sm">Unknown</span>
+          </div>
+        </div>
+      </Variant>
+
+    </template>
+  </Story>
+</template>
+
+<style scoped>
+.status-story {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.status-story--row {
+  align-items: center;
+}
+
+.status-story--col {
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.status-story--item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+.status-story--item-row {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.status-story--item-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.status-story--label {
+  font-size: 0.7rem;
+  color: #9ca3af;
+  font-family: monospace;
+}
+</style>
+
+<docs lang="md">
+# Status
+
+## Description
+
+A small visual indicator used to represent the current state of an element — online, offline, error, etc.
+Built on DaisyUI's `status` class system. Supports colors, sizes, and animations for active states.
+
+## Props
+
+| Prop        | Type              | Default     | Required | Configurable       | Description                                                                        |
+|-------------|-------------------|-------------|----------|--------------------|------------------------------------------------------------------------------------|
+| `color`     | `StatusColor`     | `undefined` | :x:      | :white_check_mark: | Color theme based on the DaisyUI palette.                                          |
+| `size`      | `StatusSize`      | `'md'`      | :x:      | :white_check_mark: | Size of the indicator. `xs` / `sm` / `md` / `lg` / `xl`.                           |
+| `animation` | `StatusAnimation` | `undefined` | :x:      | :white_check_mark: | `'ping'` renders two overlapping elements for urgency. `'bounce'` draws attention. |
+| `label`     | `string`          | `undefined` | :x:      | :x:                | Accessible label set as `aria-label` on the root element.                          |
+
+> **Configurable** props can be set globally via the Poppy UI plugin (`components.status` option). See [Plugin Configuration](../../../stories/Configuration.story.md) for more information.
+
+## Usage
+
+```vue
+<!-- Basic -->
+<Status color="success" />
+
+<!-- Ping animation -->
+<Status color="error" animation="ping" />
+
+<!-- Bounce animation -->
+<Status color="info" animation="bounce" />
+
+<!-- Inline with text -->
+<div class="flex items-center gap-2">
+  <Status color="success" size="sm" />
+  <span>Online</span>
+</div>
+```
+</docs>

package/src/components/display/status/Status.vue

@@ -0,0 +1,70 @@
+<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 { STATUS_CONFIG } from './status.context'
+import type { StatusProps } from './status.props'
+import type { StatusColor, StatusSize } from './status.types'
+
+const statusColors: ComponentClass<'status', StatusColor> = {
+  neutral: 'status-neutral',
+  primary: 'status-primary',
+  secondary: 'status-secondary',
+  accent: 'status-accent',
+  info: 'status-info',
+  success: 'status-success',
+  warning: 'status-warning',
+  error: 'status-error',
+}
+
+const statusSizes: ComponentClass<'status', StatusSize> = {
+  xs: 'status-xs',
+  sm: 'status-sm',
+  md: 'status-md',
+  lg: 'status-lg',
+  xl: 'status-xl',
+}
+</script>
+
+<script setup lang="ts">
+const props = defineProps<StatusProps>()
+const config = useComponentConfig(STATUS_CONFIG, props, {
+  size: 'md',
+})
+</script>
+
+<template>
+  <!-- Ping: two overlapping elements via inline-grid -->
+  <div
+    v-if="config.animation === 'ping'"
+    class="inline-grid *:[grid-area:1/1]"
+    :aria-label="label"
+  >
+    <div
+      class="status animate-ping"
+      :class="[
+        getClass(statusColors, config.color),
+        getClass(statusSizes, config.size),
+      ]"
+    />
+    <div
+      class="status"
+      :class="[
+        getClass(statusColors, config.color),
+        getClass(statusSizes, config.size),
+      ]"
+    />
+  </div>
+
+  <!-- Bounce or default -->
+  <div
+    v-else
+    class="status"
+    :aria-label="label"
+    :class="[
+      getClass(statusColors, config.color),
+      getClass(statusSizes, config.size),
+      config.animation === 'bounce' && 'animate-bounce',
+    ]"
+  />
+</template>

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

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

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

@@ -0,0 +1,30 @@
+import type { StatusAnimation, StatusColor, StatusSize } from './status.types'
+
+export interface StatusConfigurableProps {
+  /**
+   * Color theme of the status indicator based on the DaisyUI palette.
+   */
+  color?: StatusColor
+
+  /**
+   * Size of the status indicator.
+   *
+   * @default 'md'
+   */
+  size?: StatusSize
+
+  /**
+   * Animation applied to the status indicator.
+   * - `'ping'`: Renders two overlapping elements — one with `animate-ping` — to indicate urgency.
+   * - `'bounce'`: Adds `animate-bounce` to draw attention.
+   */
+  animation?: StatusAnimation
+}
+
+export interface StatusProps extends StatusConfigurableProps {
+  /**
+   * Accessible label for the status indicator.
+   * Used as `aria-label` on the root element.
+   */
+  label?: string
+}

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

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