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

package/src/components/layout/join/join.types.ts

@@ -0,0 +1 @@
+export type JoinDirection = 'horizontal' | 'vertical'

package/src/components/layout/mask/Mask.story.vue

@@ -0,0 +1,181 @@
+<script lang="ts">
+import { reactive } from 'vue'
+import Mask from './Mask.vue'
+import type { MaskProps } from './mask.props'
+
+const imageSrc = 'https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp'
+</script>
+
+<script setup lang="ts">
+const state = reactive<MaskProps>({
+  variant: 'squircle',
+  half: undefined,
+  inline: false,
+})
+</script>
+
+<template>
+  <Story group="components" title="Layout/Mask" auto-props-disabled>
+    <template #default>
+
+      <Variant title="Default">
+        <template #controls>
+          <HstSelect title="Variant" v-model="state.variant" :options="[
+            'squircle', 'heart', 'hexagon', 'hexagon-2', 'decagon', 'pentagon', 
+            'diamond', 'square', 'circle', 'star', 'star-2', 'triangle', 
+            'triangle-2', 'triangle-3', 'triangle-4'
+          ]" />
+          <HstSelect title="Half" v-model="state.half" :options="[
+            { label: '-- default --', value: undefined },
+            'half-1', 'half-2'
+          ]" />
+          <HstCheckbox title="Inline" v-model="(state.inline as boolean)" />
+        </template>
+
+        <template #source>
+          <textarea v-pre>
+            <Mask variant="squircle">
+              <img src="https://img.daisyui.com/images/stock/photo-1567653418876-5bb0e566e1c2.webp" />
+            </Mask>
+          </textarea>
+        </template>
+
+        <Mask v-bind="state" class="w-48 h-48">
+          <img :src="imageSrc" class="w-full h-full object-cover" />
+        </Mask>
+      </Variant>
+
+      <Variant title="Variants">
+        <div class="mask-story mask-story--row">
+          <div v-for="variant in [
+            'squircle', 'heart', 'hexagon', 'hexagon-2', 'decagon', 'pentagon',
+            'diamond', 'square', 'circle', 'star', 'star-2', 'triangle',
+            'triangle-2', 'triangle-3', 'triangle-4'
+          ]" :key="variant" class="mask-story--item">
+            <Mask :variant="variant" inline class="w-32 h-32">
+              <img :src="imageSrc" class="w-full h-full object-cover" />
+            </Mask>
+            <span class="mask-story--label">{{ variant }}</span>
+          </div>
+        </div>
+      </Variant>
+
+      <Variant title="Half Masks">
+        <div class="mask-story mask-story--row">
+          <div v-for="half in ['half-1', 'half-2']" :key="half" class="mask-story--item">
+            <Mask variant="squircle" :half="half" inline class="w-32 h-32">
+              <img :src="imageSrc" class="w-full h-full object-cover" />
+            </Mask>
+            <span class="mask-story--label">{{ half }}</span>
+          </div>
+        </div>
+      </Variant>
+
+      <Variant title="Composition">
+        <template #source>
+          <textarea v-pre>
+            <div class="flex gap-4">
+              <Mask variant="heart" inline>
+                <img src="..." class="w-24 h-24 object-cover" />
+              </Mask>
+              <Mask variant="star" inline>
+                <img src="..." class="w-24 h-24 object-cover" />
+              </Mask>
+              <Mask variant="hexagon" inline>
+                <img src="..." class="w-24 h-24 object-cover" />
+              </Mask>
+            </div>
+          </textarea>
+        </template>
+
+        <div class="flex gap-4">
+          <Mask variant="heart" inline class="w-24 h-24">
+            <img :src="imageSrc" class="w-full h-full object-cover" />
+          </Mask>
+          <Mask variant="star" inline class="w-24 h-24">
+            <img :src="imageSrc" class="w-full h-full object-cover" />
+          </Mask>
+          <Mask variant="hexagon" inline class="w-24 h-24">
+            <img :src="imageSrc" class="w-full h-full object-cover" />
+          </Mask>
+          <Mask variant="circle" inline class="w-24 h-24">
+            <img :src="imageSrc" class="w-full h-full object-cover" />
+          </Mask>
+        </div>
+      </Variant>
+
+    </template>
+  </Story>
+</template>
+
+<style scoped>
+.mask-story {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.mask-story--row {
+  align-items: center;
+}
+
+.mask-story--item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.mask-story--label {
+  font-size: 0.7rem;
+  color: #9ca3af;
+  font-family: monospace;
+}
+</style>
+
+<docs lang="md">
+# Mask
+
+## Description
+
+Applies CSS mask shapes to crop content into common geometric forms.
+Built on DaisyUI's `mask` class system. Use it to create visually interesting image shapes,
+icons, or any content that needs non-rectangular clipping.
+
+## Props
+
+| Prop      | Type          | Default     | Required | Configurable       | Description                                                                                                                                                     |
+|-----------|---------------|-------------|----------|--------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `variant` | `MaskVariant` | `undefined` | :x:      | :white_check_mark: | Shape of the mask: squircle, heart, hexagon, hexagon-2, decagon, pentagon, diamond, square, circle, star, star-2, triangle, triangle-2, triangle-3, triangle-4. |
+| `half`    | `MaskHalf`    | `undefined` | :x:      | :white_check_mark: | When set, only masks half of the content: `'half-1'` or `'half-2'`.                                                                                             |
+| `inline`  | `Booleanish`  | `false`     | :x:      | :x:                | When `true`, renders the mask as inline-block element.                                                                                                          |
+
+> **Configurable** props can be set globally via the Poppy UI plugin (`components.mask` option). See [Plugin Configuration](../../../stories/Configuration.story.md) for more information.
+
+## Usage
+
+```vue
+<!-- Basic squircle mask -->
+<Mask variant="squircle">
+  <img src="path/to/image.jpg" />
+</Mask>
+
+<!-- Heart-shaped image -->
+<Mask variant="heart" inline class="w-32 h-32">
+  <img src="path/to/image.jpg" class="w-full h-full object-cover" />
+</Mask>
+
+<!-- Half mask effect -->
+<Mask variant="circle" half="half-1" class="w-40 h-40">
+  <img src="path/to/image.jpg" class="w-full h-full object-cover" />
+</Mask>
+
+<!-- Inline mask in text -->
+<div class="flex items-center gap-2">
+  <Mask variant="star" inline class="w-8 h-8">
+    <img src="path/to/icon.png" class="w-full h-full object-cover" />
+  </Mask>
+  <span>Premium Feature</span>
+</div>
+```
+</docs>

package/src/components/layout/mask/Mask.vue

@@ -0,0 +1,50 @@
+<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 { MASK_CONFIG } from './mask.context'
+import type { MaskProps } from './mask.props'
+import type { MaskHalf, MaskVariant } from './mask.types'
+
+const maskVariants: ComponentClass<'mask', MaskVariant> = {
+  squircle: 'mask-squircle',
+  heart: 'mask-heart',
+  hexagon: 'mask-hexagon',
+  'hexagon-2': 'mask-hexagon-2',
+  decagon: 'mask-decagon',
+  pentagon: 'mask-pentagon',
+  diamond: 'mask-diamond',
+  square: 'mask-square',
+  circle: 'mask-circle',
+  star: 'mask-star',
+  'star-2': 'mask-star-2',
+  triangle: 'mask-triangle',
+  'triangle-2': 'mask-triangle-2',
+  'triangle-3': 'mask-triangle-3',
+  'triangle-4': 'mask-triangle-4',
+}
+
+const maskHalfs: ComponentClass<'mask', MaskHalf> = {
+  'half-1': 'mask-half-1',
+  'half-2': 'mask-half-2',
+}
+</script>
+
+<script setup lang="ts">
+const props = defineProps<MaskProps>()
+const config = useComponentConfig(MASK_CONFIG, props)
+</script>
+
+<template>
+  <div
+    class="mask"
+    :class="[
+      getClass(maskVariants, config.variant),
+      isTrue(config.inline) && 'inline-block',
+      getClass(maskHalfs, config.half),
+    ]"
+  >
+    <slot />
+  </div>
+</template>

package/src/components/layout/mask/mask.context.ts

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

package/src/components/layout/mask/mask.props.ts

@@ -0,0 +1,40 @@
+import type { Booleanish } from '@/types/utils.type'
+import type { MaskHalf, MaskVariant } from './mask.types'
+
+export interface MaskConfigurableProps {
+  /**
+   * Shape of the mask to apply to the content.
+   * - `'squircle'`: Smooth squircle shape.
+   * - `'heart'`: Heart shape.
+   * - `'hexagon'`: Vertical hexagon.
+   * - `'hexagon-2'`: Horizontal hexagon.
+   * - `'decagon'`: 10-sided polygon.
+   * - `'pentagon'`: 5-sided polygon.
+   * - `'diamond'`: Diamond shape.
+   * - `'square'`: Square with hard edges.
+   * - `'circle'`: Perfect circle.
+   * - `'star'`: Star shape.
+   * - `'star-2'`: Bold star shape.
+   * - `'triangle'`: Triangle pointing up.
+   * - `'triangle-2'`: Triangle pointing down.
+   * - `'triangle-3'`: Triangle pointing left.
+   * - `'triangle-4'`: Triangle pointing right.
+   */
+  variant?: MaskVariant
+
+  /**
+   * When set, only masks half of the content.
+   * - `'half-1'`: Masks the first half.
+   * - `'half-2'`: Masks the second half.
+   */
+  half?: MaskHalf
+}
+
+export interface MaskProps extends MaskConfigurableProps {
+  /**
+   * When `true`, renders the mask as inline element.
+   *
+   * @default false
+   */
+  inline?: Booleanish
+}

package/src/components/layout/mask/mask.types.ts

@@ -0,0 +1,18 @@
+export type MaskVariant =
+  | 'squircle'
+  | 'heart'
+  | 'hexagon'
+  | 'hexagon-2'
+  | 'decagon'
+  | 'pentagon'
+  | 'diamond'
+  | 'square'
+  | 'circle'
+  | 'star'
+  | 'star-2'
+  | 'triangle'
+  | 'triangle-2'
+  | 'triangle-3'
+  | 'triangle-4'
+
+export type MaskHalf = 'half-1' | 'half-2'

package/src/components/layout/public.ts

@@ -0,0 +1,6 @@
+export { default as Divider } from './divider/Divider.vue'
+export { default as Drawer } from './drawer/Drawer.vue'
+export { default as Indicator } from './indicator/Indicator.vue'
+export { default as Join } from './join/Join.vue'
+export { default as Mask } from './mask/Mask.vue'
+export { default as Stack } from './stack/Stack.vue'

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

@@ -0,0 +1,18 @@
+// Divider
+export type { DividerProps } from './divider/divider.props'
+export * from './divider/divider.types'
+// Drawer
+export type { DrawerProps } from './drawer/drawer.props'
+export * from './drawer/drawer.types'
+// Indicator
+export type { IndicatorProps } from './indicator/indicator.props'
+export * from './indicator/indicator.types'
+// Join
+export type { JoinProps } from './join/join.props'
+export * from './join/join.types'
+// Mask
+export type { MaskProps } from './mask/mask.props'
+export * from './mask/mask.types'
+// Stack
+export type { StackProps } from './stack/stack.props'
+export * from './stack/stack.types'

package/src/components/layout/stack/Stack.story.vue

@@ -0,0 +1,170 @@
+<script lang="ts">
+import { reactive } from 'vue'
+import Stack from './Stack.vue'
+import type { StackProps } from './stack.props'
+import type { StackDirection } from './stack.types.ts'
+</script>
+
+<script setup lang="ts">
+const state = reactive<StackProps>({
+  direction: undefined,
+})
+
+const directions = ['start', 'end', 'top', 'bottom'] as StackDirection[]
+</script>
+
+<template>
+  <Story group="components" title="Layout/Stack" auto-props-disabled>
+    <template #default>
+
+      <Variant title="Default">
+        <template #controls>
+          <HstSelect title="Direction" v-model="state.direction" :options="[{ label: '-- default --', value: undefined }, ...directions]" />
+        </template>
+
+        <template #source>
+          <textarea v-pre>
+            <Stack class="size-28">
+              <div class="bg-primary text-primary-content grid place-content-center rounded-box">1</div>
+              <div class="bg-accent text-accent-content grid place-content-center rounded-box">2</div>
+              <div class="bg-secondary text-secondary-content grid place-content-center rounded-box">3</div>
+            </Stack>
+          </textarea>
+        </template>
+
+        <Stack v-bind="state" class="size-28 p-4">
+          <div class="bg-primary text-primary-content grid place-content-center rounded-box">1</div>
+          <div class="bg-accent text-accent-content grid place-content-center rounded-box">2</div>
+          <div class="bg-secondary text-secondary-content grid place-content-center rounded-box">3</div>
+        </Stack>
+      </Variant>
+
+      <Variant title="Start">
+        <template #source>
+          <textarea v-pre>
+            <Stack direction="start" class="size-28">
+              <div class="bg-primary text-primary-content grid place-content-center rounded-box">1</div>
+              <div class="bg-accent text-accent-content grid place-content-center rounded-box">2</div>
+              <div class="bg-secondary text-secondary-content grid place-content-center rounded-box">3</div>
+            </Stack>
+          </textarea>
+        </template>
+
+        <Stack direction="start" class="size-28 p-4">
+          <div class="bg-primary text-primary-content grid place-content-center rounded-box">1</div>
+          <div class="bg-accent text-accent-content grid place-content-center rounded-box">2</div>
+          <div class="bg-secondary text-secondary-content grid place-content-center rounded-box">3</div>
+        </Stack>
+      </Variant>
+
+      <Variant title="End">
+        <template #source>
+          <textarea v-pre>
+            <Stack direction="end" class="size-28">
+              <div class="bg-primary text-primary-content grid place-content-center rounded-box">1</div>
+              <div class="bg-accent text-accent-content grid place-content-center rounded-box">2</div>
+              <div class="bg-secondary text-secondary-content grid place-content-center rounded-box">3</div>
+            </Stack>
+          </textarea>
+        </template>
+
+        <Stack direction="end" class="size-28 p-4">
+          <div class="bg-primary text-primary-content grid place-content-center rounded-box">1</div>
+          <div class="bg-accent text-accent-content grid place-content-center rounded-box">2</div>
+          <div class="bg-secondary text-secondary-content grid place-content-center rounded-box">3</div>
+        </Stack>
+      </Variant>
+
+      <Variant title="Top">
+        <template #source>
+          <textarea v-pre>
+            <Stack direction="top" class="size-28">
+              <div class="bg-primary text-primary-content grid place-content-center rounded-box">1</div>
+              <div class="bg-accent text-accent-content grid place-content-center rounded-box">2</div>
+              <div class="bg-secondary text-secondary-content grid place-content-center rounded-box">3</div>
+            </Stack>
+          </textarea>
+        </template>
+
+        <Stack direction="top" class="size-28 p-4">
+          <div class="bg-primary text-primary-content grid place-content-center rounded-box">1</div>
+          <div class="bg-accent text-accent-content grid place-content-center rounded-box">2</div>
+          <div class="bg-secondary text-secondary-content grid place-content-center rounded-box">3</div>
+        </Stack>
+      </Variant>
+
+      <Variant title="Bottom">
+        <template #source>
+          <textarea v-pre>
+            <Stack direction="bottom" class="size-28">
+              <div class="bg-primary text-primary-content grid place-content-center rounded-box">1</div>
+              <div class="bg-accent text-accent-content grid place-content-center rounded-box">2</div>
+              <div class="bg-secondary text-secondary-content grid place-content-center rounded-box">3</div>
+            </Stack>
+          </textarea>
+        </template>
+
+        <Stack direction="bottom" class="size-28 p-4">
+          <div class="bg-primary text-primary-content grid place-content-center rounded-box">1</div>
+          <div class="bg-accent text-accent-content grid place-content-center rounded-box">2</div>
+          <div class="bg-secondary text-secondary-content grid place-content-center rounded-box">3</div>
+        </Stack>
+      </Variant>
+
+      <Variant title="All Directions">
+        <div class="flex flex-col gap-4 p-4">
+          <div v-for="direction in directions" :key="direction">
+            <span class="text-sm text-base-content/60 mb-1 block">{{ direction }}</span>
+            <Stack :direction="direction" class="size-28">
+              <div class="bg-primary text-primary-content grid place-content-center rounded-box">1</div>
+              <div class="bg-accent text-accent-content grid place-content-center rounded-box">2</div>
+              <div class="bg-secondary text-secondary-content grid place-content-center rounded-box">3</div>
+            </Stack>
+          </div>
+        </div>
+      </Variant>
+
+    </template>
+  </Story>
+</template>
+
+<docs lang="md">
+# Stack
+
+## Description
+
+Stacks items together with automatic spacing. Built on DaisyUI's `stack` component.
+Use it to group elements that should appear connected.
+
+## Props
+
+| Prop       | Type             | Default     | Required | Configurable       | Description                                                |
+|------------|------------------|-------------|----------|--------------------|------------------------------------------------------------|
+| `direction`| `StackDirection` | `undefined` | :x:      | :white_check_mark: | Layout direction: `'start'`, `'end'`, `'top'`, `'bottom'`. |
+
+> **Configurable** props can be set globally via the Poppy UI plugin (`components.stack` option). See [Plugin Configuration](../../../stories/Configuration.story.md) for more information.
+
+## Usage
+
+```vue
+<!-- Basic stack -->
+<Stack>
+  <div>Item 1</div>
+  <div>Item 2</div>
+  <div>Item 3</div>
+</Stack>
+
+<!-- With direction -->
+<Stack direction="start">
+  <div>Item 1</div>
+  <div>Item 2</div>
+</Stack>
+
+<!-- With custom content -->
+<Stack direction="end">
+  <div class="bg-primary text-primary-content grid place-content-center rounded-box">1</div>
+  <div class="bg-accent text-accent-content grid place-content-center rounded-box">2</div>
+  <div class="bg-secondary text-secondary-content grid place-content-center rounded-box">3</div>
+</Stack>
+```
+</docs>

package/src/components/layout/stack/Stack.vue

@@ -0,0 +1,29 @@
+<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 { STACK_CONFIG } from './stack.context'
+import type { StackProps } from './stack.props'
+import type { StackDirection } from './stack.types'
+
+const stackDirections: ComponentClass<'stack', StackDirection> = {
+  start: 'stack-start',
+  end: 'stack-end',
+  top: 'stack-top',
+  bottom: 'stack-bottom',
+}
+</script>
+
+<script setup lang="ts">
+const props = defineProps<StackProps>()
+const config = useComponentConfig(STACK_CONFIG, props)
+</script>
+
+<template>
+  <div
+    class="stack"
+    :class="getClass(stackDirections, config.direction)"
+  >
+    <slot />
+  </div>
+</template>

package/src/components/layout/stack/stack.context.ts

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

package/src/components/layout/stack/stack.props.ts

@@ -0,0 +1,12 @@
+import type { StackDirection } from './stack.types'
+
+export interface StackConfigurableProps {
+  /**
+   * Direction in which stacked items are laid out.
+   * - `'horizontal'`: Items are stacked horizontally (default).
+   * - `'vertical'`: Items are stacked vertically.
+   */
+  direction?: StackDirection
+}
+
+export interface StackProps extends StackConfigurableProps {}

package/src/components/layout/stack/stack.types.ts

@@ -0,0 +1 @@
+export type StackDirection = 'start' | 'end' | 'top' | 'bottom'

package/src/components/navigation/breadcrumbs/Breadcrumbs.story.vue

@@ -0,0 +1,94 @@
+<script lang="ts">
+import { FilePlus, FolderOpen, Home } from '@lucide/vue'
+import { reactive } from 'vue'
+import Breadcrumbs from './Breadcrumbs.vue'
+import type { BreadcrumbsProps } from './breadcrumbs.props'
+</script>
+
+<script setup lang="ts">
+const state = reactive<BreadcrumbsProps>({
+  items: [
+    { label: 'Home', to: '#' },
+    { label: 'Documents', to: '#' },
+    { label: 'Add Document' },
+  ],
+  maxWidth: undefined,
+})
+</script>
+
+<template>
+  <Story group="components" title="Navigation/Breadcrumbs" auto-props-disabled>
+
+    <Variant title="Default">
+      <template #controls>
+        <HstSelect
+          v-model="state.maxWidth"
+          title="Max Width"
+          :options="[
+            { label: '-- none --', value: undefined },
+            'max-w-xs',
+            'max-w-sm',
+            'max-w-md',
+          ]"
+        />
+      </template>
+      <Breadcrumbs v-bind="state" />
+    </Variant>
+
+    <Variant title="With icons">
+      <Breadcrumbs
+        :items="[
+          { label: 'Home', to: '#', icon: Home },
+          { label: 'Documents', to: '#', icon: FolderOpen },
+          { label: 'Add Document', icon: FilePlus },
+        ]"
+      />
+    </Variant>
+
+    <Variant title="With max-width (scroll)">
+      <Breadcrumbs
+        max-width="max-w-xs"
+        :items="[
+          { label: 'Long text 1', to: '#'},
+          { label: 'Long text 2', to: '#' },
+          { label: 'Long text 3', to: '#' },
+          { label: 'Long text 4', to: '#' },
+          { label: 'Long text 5' },
+        ]"
+      />
+    </Variant>
+
+  </Story>
+</template>
+
+<docs lang="md">
+# Breadcrumbs
+
+## Description
+Affiche un fil d'Ariane pour aider les utilisateurs à naviguer dans le site.
+Le dernier item est automatiquement traité comme la page courante (non cliquable).
+
+## Props
+| Prop       | Type               | Default     | Required           | Configurable       | Description                                     |
+|------------|--------------------|-------------|--------------------|--------------------|-------------------------------------------------|
+| `items`    | `BreadcrumbItem[]` | `undefined` | :white_check_mark: | :x:                | Liste des items du fil d'Ariane                 |
+| `maxWidth` | `string`           | `undefined` | :x:                | :white_check_mark: | Classe Tailwind de largeur max (ex: `max-w-xs`) |
+
+## Type `BreadcrumbItem`
+| Prop    | Type               | Description                                   |
+|---------|--------------------|-----------------------------------------------|
+| `label` | `string`           | Texte affiché                                 |
+| `to`    | `RouteLocationRaw` | Route Vue Router. Absent = item non cliquable |
+| `icon`  | `Component`        | SVG inline optionnel                          |
+
+## Usage
+```vue
+<Breadcrumbs
+  :items="[
+    { label: 'Home', to: '/' },
+    { label: 'Documents', to: { name: 'documents' } },
+    { label: 'Add Document' },
+  ]"
+/>
+```
+</docs>