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

package/src/components/display/badge/Badge.story.vue

@@ -0,0 +1,156 @@
+<script lang="ts">
+import { reactive } from 'vue'
+import Badge from './Badge.vue'
+import type { BadgeProps } from './badge.props'
+</script>
+
+<script setup lang="ts">
+const state = reactive<BadgeProps>({
+  color: undefined,
+  variant: undefined,
+  size: 'md',
+})
+</script>
+
+<template>
+  <Story group="components" title="Display/Badge" 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="Variant" v-model="state.variant" :options="[{ label: '-- default --', value: undefined }, 'outline', 'soft', 'dash']" />
+          <HstSelect title="Size" v-model="state.size" :options="['xs', 'sm', 'md', 'lg', 'xl']" />
+        </template>
+
+        <Badge v-bind="state">Badge</Badge>
+      </Variant>
+
+      <Variant title="Colors">
+        <div class="badge-story badge-story--colors">
+          <Badge>default</Badge>
+          <Badge color="neutral">neutral</Badge>
+          <Badge color="primary">primary</Badge>
+          <Badge color="secondary">secondary</Badge>
+          <Badge color="accent">accent</Badge>
+          <Badge color="info">info</Badge>
+          <Badge color="success">success</Badge>
+          <Badge color="warning">warning</Badge>
+          <Badge color="error">error</Badge>
+        </div>
+      </Variant>
+
+      <Variant title="Variants">
+        <div class="badge-story badge-story--variants">
+          <Badge>default</Badge>
+          <Badge variant="outline">outline</Badge>
+          <Badge variant="soft">soft</Badge>
+          <Badge variant="dash">dash</Badge>
+        </div>
+      </Variant>
+
+      <Variant title="Sizes">
+        <div class="badge-story badge-story--sizes">
+          <Badge size="xs">xs</Badge>
+          <Badge size="sm">sm</Badge>
+          <Badge size="md">md</Badge>
+          <Badge size="lg">lg</Badge>
+          <Badge size="xl">xl</Badge>
+        </div>
+      </Variant>
+
+      <Variant title="Colors × Variants">
+        <div class="badge-story badge-story--matrix">
+          <div v-for="variant in ([undefined, 'outline', 'soft', 'dash'])" :key="variant ?? 'default'" class="badge-story--matrix-row">
+            <span class="badge-story--label">{{ variant ?? 'default' }}</span>
+            <div class="badge-story--matrix-cells">
+              <Badge :variant="variant" color="primary">primary</Badge>
+              <Badge :variant="variant" color="secondary">secondary</Badge>
+              <Badge :variant="variant" color="accent">accent</Badge>
+              <Badge :variant="variant" color="info">info</Badge>
+              <Badge :variant="variant" color="success">success</Badge>
+              <Badge :variant="variant" color="warning">warning</Badge>
+              <Badge :variant="variant" color="error">error</Badge>
+            </div>
+          </div>
+        </div>
+      </Variant>
+
+    </template>
+  </Story>
+</template>
+
+<style scoped>
+.badge-story {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.badge-story--matrix {
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.badge-story--matrix-row {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+
+.badge-story--matrix-cells {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.badge-story--label {
+  font-size: 0.7rem;
+  color: #9ca3af;
+  font-family: monospace;
+  min-width: 4rem;
+}
+</style>
+
+<docs lang="md">
+# Badge
+
+## Description
+
+A small inline label used to highlight status, categories, counts, or metadata.
+Built on DaisyUI's `badge` class system with support for colors, variants, and sizes.
+
+## API
+
+### Props
+
+| Prop      | Type           | Default     | Required | Configurable       | Description                                             |
+|-----------|----------------|-------------|----------|--------------------|-------------------------------------------------------- |
+| `color`   | `BadgeColor`   | `undefined` | :x:      | :white_check_mark: | Color theme of the badge based on the DaisyUI palette.  |
+| `variant` | `BadgeVariant` | `undefined` | :x:      | :white_check_mark: | Visual style of the badge. `outline` / `soft` / `dash`. |
+| `size`    | `BadgeSize`    | `'md'`      | :x:      | :white_check_mark: | Size of the badge. `xs` / `sm` / `md` / `lg` / `xl`.    |
+
+> **Configurable** props can be set globally via the Poppy UI plugin (`components.badge` option). See [Plugin Configuration](../../../stories/Configuration.story.md) for more information.
+
+### Slots
+| Slot      | Description                       |
+|-----------|-----------------------------------|
+| `default` | Text or content inside the badge. |
+
+## Usage
+
+```vue
+<!-- Basic -->
+<Badge>New</Badge>
+
+<!-- With color -->
+<Badge color="success">Active</Badge>
+
+<!-- With variant -->
+<Badge color="primary" variant="outline">Draft</Badge>
+
+<!-- Small -->
+<Badge color="error" size="sm">3</Badge>
+```
+</docs>

package/src/components/display/badge/Badge.vue

@@ -0,0 +1,51 @@
+<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 { BADGE_CONFIG } from './badge.context'
+import type { BadgeProps } from './badge.props'
+import type { BadgeColor, BadgeSize, BadgeVariant } from './badge.types'
+
+const badgeColors: ComponentClass<'badge', BadgeColor> = {
+  neutral: 'badge-neutral',
+  primary: 'badge-primary',
+  secondary: 'badge-secondary',
+  accent: 'badge-accent',
+  info: 'badge-info',
+  success: 'badge-success',
+  warning: 'badge-warning',
+  error: 'badge-error',
+}
+
+const badgeVariants: ComponentClass<'badge', BadgeVariant> = {
+  outline: 'badge-outline',
+  soft: 'badge-soft',
+  dash: 'badge-dash',
+}
+
+const badgeSizes: ComponentClass<'badge', BadgeSize> = {
+  xs: 'badge-xs',
+  sm: 'badge-sm',
+  md: 'badge-md',
+  lg: 'badge-lg',
+  xl: 'badge-xl',
+}
+</script>
+
+<script setup lang="ts">
+const props = defineProps<BadgeProps>()
+const config = useComponentConfig(BADGE_CONFIG, props, {})
+</script>
+
+<template>
+  <span
+    class="badge"
+    :class="[
+      getClass(badgeColors, config.color),
+      getClass(badgeVariants, config.variant),
+      getClass(badgeSizes, config.size),
+    ]"
+  >
+    <slot />
+  </span>
+</template>

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

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

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

@@ -0,0 +1,22 @@
+import type { BadgeColor, BadgeSize, BadgeVariant } from './badge.types'
+
+export interface BadgeConfigurableProps {
+  /**
+   * Color theme of the badge based on the DaisyUI palette.
+   */
+  color?: BadgeColor
+
+  /**
+   * Visual style of the badge.
+   */
+  variant?: BadgeVariant
+
+  /**
+   * Size of the badge.
+   *
+   * @default 'md'
+   */
+  size?: BadgeSize
+}
+
+export interface BadgeProps extends BadgeConfigurableProps {}

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

@@ -0,0 +1,5 @@
+import type { ComponentSize } from '@/types/size.type'
+
+export type BadgeColor = 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'
+export type BadgeVariant = 'outline' | 'soft' | 'dash'
+export type BadgeSize = ComponentSize

package/src/components/display/card/Card.story.vue

@@ -0,0 +1,308 @@
+<script lang="ts">
+import Button from '@/components/actions/button/Button.vue'
+import { reactive } from 'vue'
+import Card from './Card.vue'
+import CardActions from './CardActions.vue'
+import CardBody from './CardBody.vue'
+import CardTitle from './CardTitle.vue'
+import type { CardProps } from './card.props'
+</script>
+
+<script setup lang="ts">
+const state = reactive<CardProps>({
+  variant: undefined,
+  size: undefined,
+  side: false,
+  imageFull: false,
+})
+</script>
+
+<template>
+  <Story group="components" title="Display/Card" auto-props-disabled>
+    <template #default>
+
+      <Variant title="Default">
+        <template #controls>
+          <HstSelect title="Variant" v-model="state.variant" :options="[{ label: '-- default --', value: undefined }, 'border', 'dash']" />
+          <HstSelect title="Size" v-model="state.size" :options="[{ label: '-- default --', value: undefined }, 'xs', 'sm', 'md', 'lg', 'xl']" />
+          <HstCheckbox title="Side" v-model="(state.side as boolean)" />
+          <HstCheckbox title="Image full" v-model="(state.imageFull as boolean)" />
+        </template>
+
+        <Card v-bind="state" class="w-80">
+          <figure>
+            <img src="https://picsum.photos/seed/card/400/200" alt="Card image" />
+          </figure>
+          <CardBody>
+            <CardTitle>Card title</CardTitle>
+            <p>A short description of the card content goes here.</p>
+            <CardActions>
+              <Button color="primary">Action</Button>
+            </CardActions>
+          </CardBody>
+        </Card>
+      </Variant>
+
+      <Variant title="Variants">
+        <div class="card-story card-story--row">
+          <div class="card-story--item">
+            <span class="card-story--label">default</span>
+            <Card class="w-64">
+              <CardBody>
+                <CardTitle>Default</CardTitle>
+                <p>No variant applied.</p>
+              </CardBody>
+            </Card>
+          </div>
+          <div class="card-story--item">
+            <span class="card-story--label">border</span>
+            <Card variant="border" class="w-64">
+              <CardBody>
+                <CardTitle>Border</CardTitle>
+                <p>Solid border around the card.</p>
+              </CardBody>
+            </Card>
+          </div>
+          <div class="card-story--item">
+            <span class="card-story--label">dash</span>
+            <Card variant="dash" class="w-64">
+              <CardBody>
+                <CardTitle>Dash</CardTitle>
+                <p>Dashed border around the card.</p>
+              </CardBody>
+            </Card>
+          </div>
+        </div>
+      </Variant>
+
+      <Variant title="Sizes">
+        <div class="card-story card-story--col">
+          <div v-for="size in (['xs', 'sm', 'md', 'lg', 'xl'])" :key="size" class="card-story--item">
+            <span class="card-story--label">{{ size }}</span>
+            <Card :size="size" variant="border" class="w-64">
+              <CardBody>
+                <CardTitle>Size {{ size }}</CardTitle>
+                <p>Card with size <code>{{ size }}</code>.</p>
+              </CardBody>
+            </Card>
+          </div>
+        </div>
+      </Variant>
+
+      <Variant title="Side">
+        <Card side variant="border" class="w-96">
+          <figure class="shrink-0">
+            <img src="https://picsum.photos/seed/side/160/160" alt="Side image" class="h-full object-cover" />
+          </figure>
+          <CardBody>
+            <CardTitle>Side layout</CardTitle>
+            <p>Image and content are displayed side by side.</p>
+            <CardActions>
+              <Button color="primary" size="sm">Action</Button>
+            </CardActions>
+          </CardBody>
+        </Card>
+      </Variant>
+
+      <Variant title="Image full">
+        <Card image-full class="w-80">
+          <figure>
+            <img src="https://picsum.photos/seed/full/400/300" alt="Background image" />
+          </figure>
+          <CardBody>
+            <CardTitle class="text-white">Image full</CardTitle>
+            <p class="text-white/80">The image covers the full card background.</p>
+            <CardActions>
+              <Button color="primary" size="sm">Action</Button>
+            </CardActions>
+          </CardBody>
+        </Card>
+      </Variant>
+
+      <Variant title="CardActions align">
+        <div class="card-story card-story--col">
+          <div v-for="align in (['start', 'center', 'end'])" :key="align" class="card-story--item">
+            <span class="card-story--label">align: {{ align }}</span>
+            <Card variant="border" class="w-80">
+              <CardBody>
+                <CardTitle>Actions {{ align }}</CardTitle>
+                <p>CardActions with <code>align="{{ align }}"</code>.</p>
+                <CardActions :align="align">
+                  <Button color="primary" size="sm">Confirm</Button>
+                  <Button variant="ghost" size="sm">Cancel</Button>
+                </CardActions>
+              </CardBody>
+            </Card>
+          </div>
+        </div>
+      </Variant>
+
+      <Variant title="Composition">
+        <div class="card-story card-story--row">
+          <Card variant="border" class="w-72">
+            <CardBody>
+              <CardTitle>Text only</CardTitle>
+              <p>A simple card with just text content and actions.</p>
+              <CardActions>
+                <Button color="primary" size="sm">Read more</Button>
+              </CardActions>
+            </CardBody>
+          </Card>
+
+          <Card class="w-72">
+            <figure>
+              <img src="https://picsum.photos/seed/comp1/400/200" alt="Card image" />
+            </figure>
+            <CardBody>
+              <CardTitle>With image</CardTitle>
+              <p>Card with an image on top.</p>
+              <CardActions>
+                <Button color="primary" size="sm">Buy</Button>
+                <Button variant="ghost" size="sm">Details</Button>
+              </CardActions>
+            </CardBody>
+          </Card>
+
+          <Card variant="dash" class="w-72">
+            <CardBody>
+              <CardTitle>No actions</CardTitle>
+              <p>A card without a CardActions section.</p>
+            </CardBody>
+          </Card>
+        </div>
+      </Variant>
+
+    </template>
+  </Story>
+</template>
+
+<style scoped>
+.card-story {
+  display: flex;
+  gap: 1rem;
+  flex-wrap: wrap;
+}
+
+.card-story--row {
+  align-items: flex-start;
+}
+
+.card-story--col {
+  flex-direction: column;
+}
+
+.card-story--item {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.card-story--label {
+  font-size: 0.7rem;
+  color: #9ca3af;
+  font-family: monospace;
+}
+</style>
+
+<docs lang="md">
+# Card
+
+## Description
+
+A flexible content container built on DaisyUI's `card` class system.
+Composed of four sub-components — `Card`, `CardBody`, `CardTitle`, and `CardActions` —
+that can be combined freely to build any card layout.
+
+## API
+
+<details>
+<summary>Card</summary>
+
+### Props
+
+| Prop        | Type          | Default     | Required | Configurable       | Description                                                |
+|-------------|---------------|-------------|----------|--------------------|------------------------------------------------------------|
+| `variant`   | `CardVariant` | `undefined` | :x:      | :white_check_mark: | Visual style of the card. `border` / `dash`.               |
+| `size`      | `CardSize`    | `undefined` | :x:      | :white_check_mark: | Size of the card. `xs` / `sm` / `md` / `lg` / `xl`.        |
+| `side`      | `Booleanish`  | `false`     | :x:      | :x:                | When `true`, switches to a horizontal side-by-side layout. |
+| `imageFull` | `Booleanish`  | `false`     | :x:      | :x:                | When `true`, the image covers the full card background.    |
+
+> **Configurable** props can be set globally via the Poppy UI plugin (`components.card` option). See [Plugin Configuration](../../../stories/Configuration.story.md) for more information.
+
+</details>
+
+<details>
+<summary>CardActions</summary>
+
+### Props
+
+| Prop    | Type               | Default   | Required | Configurable       | Description                                                  |
+|---------|--------------------|-----------|----------|--------------------|--------------------------------------------------------------|
+| `align` | `CardActionsAlign` | `'start'` | :x:      | :white_check_mark: | Horizontal alignment of actions. `start` / `center` / `end`. |
+
+> **Configurable** props can be set globally via the Poppy UI plugin (`components.cardActions` option). See [Plugin Configuration](../../../stories/Configuration.story.md) for more information.
+
+</details>
+
+<details>
+<summary>CardBody</summary>
+
+No props. Renders a `<div class="card-body" />` wrapper around its slot content.
+
+</details>
+
+<details>
+<summary>CardTitle</summary>
+
+No props. Renders an `<h2 class="card-title" />` around its slot content.
+
+</details>
+
+### Slots
+
+All four components expose a single `default` slot for their content.
+
+## Usage
+
+```vue
+<!-- Basic -->
+<Card variant="border">
+  <CardBody>
+    <CardTitle>Hello</CardTitle>
+    <p>Some content here.</p>
+    <CardActions>
+      <Button color="primary">Action</Button>
+    </CardActions>
+  </CardBody>
+</Card>
+
+<!-- With image -->
+<Card>
+  <figure>
+    <img src="..." alt="..." />
+  </figure>
+  <CardBody>
+    <CardTitle>With image</CardTitle>
+    <p>Content below the image.</p>
+  </CardBody>
+</Card>
+
+<!-- Side layout -->
+<Card side>
+  <figure><img src="..." alt="..." /></figure>
+  <CardBody>
+    <CardTitle>Side</CardTitle>
+    <p>Image and content side by side.</p>
+  </CardBody>
+</Card>
+
+<!-- Image full -->
+<Card image-full>
+  <figure><img src="..." alt="..." /></figure>
+  <CardBody>
+    <CardTitle class="text-white">Overlay</CardTitle>
+    <p class="text-white/80">Text over the image.</p>
+  </CardBody>
+</Card>
+```
+</docs>

package/src/components/display/card/Card.vue

@@ -0,0 +1,41 @@
+<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 { CARD_CONFIG } from './card.context'
+import type { CardProps } from './card.props'
+import type { CardSize, CardVariant } from './card.types'
+
+const cardVariants: ComponentClass<'card', CardVariant> = {
+  border: 'card-border',
+  dash: 'card-dash',
+}
+
+const cardSizes: ComponentClass<'card', CardSize> = {
+  xs: 'card-xs',
+  sm: 'card-sm',
+  md: 'card-md',
+  lg: 'card-lg',
+  xl: 'card-xl',
+}
+</script>
+
+<script setup lang="ts">
+const props = defineProps<CardProps>()
+const config = useComponentConfig(CARD_CONFIG, props, {})
+</script>
+
+<template>
+  <div
+    class="card bg-base-100"
+    :class="[
+      getClass(cardVariants, config.variant),
+      getClass(cardSizes, config.size),
+      isTrue(config.side) && 'card-side',
+      isTrue(config.imageFull) && 'image-full',
+    ]"
+  >
+    <slot />
+  </div>
+</template>

package/src/components/display/card/CardActions.vue

@@ -0,0 +1,30 @@
+<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 { CARD_ACTIONS_CONFIG } from './card-actions.context'
+import type { CardActionsProps } from './card-actions.props'
+import type { CardActionsAlign } from './card-actions.types'
+
+const cardActionsAligns: ComponentClass<'justify', CardActionsAlign> = {
+  start: 'justify-start',
+  center: 'justify-center',
+  end: 'justify-end',
+}
+</script>
+
+<script setup lang="ts">
+const props = defineProps<CardActionsProps>()
+const config = useComponentConfig(CARD_ACTIONS_CONFIG, props, {
+  align: 'start',
+})
+</script>
+
+<template>
+  <div
+    class="card-actions"
+    :class="getClass(cardActionsAligns, config.align)"
+  >
+    <slot />
+  </div>
+</template>

package/src/components/display/card/CardBody.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="card-body">
+    <slot />
+  </div>
+</template>

package/src/components/display/card/CardTitle.vue

@@ -0,0 +1,5 @@
+<template>
+  <h2 class="card-title">
+    <slot />
+  </h2>
+</template>

package/src/components/display/card/card-actions.context.ts

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

package/src/components/display/card/card-actions.props.ts

@@ -0,0 +1,15 @@
+import type { CardActionsAlign } from './card-actions.types'
+
+export interface CardActionsConfigurableProps {
+  /**
+   * Horizontal alignment of the actions.
+   * - `'start'`: Align to the left.
+   * - `'center'`: Align to the center.
+   * - `'end'`: Align to the right.
+   *
+   * @default 'start'
+   */
+  align?: CardActionsAlign
+}
+
+export interface CardActionsProps extends CardActionsConfigurableProps {}

package/src/components/display/card/card-actions.types.ts

@@ -0,0 +1 @@
+export type CardActionsAlign = 'start' | 'center' | 'end'

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

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