@poppy-ui/vue 0.0.0-dev.36.93ba5b2

package/src/components/layout/divider/Divider.vue

@@ -0,0 +1,48 @@
+<script lang="ts">
+import { useComponentConfig } from '@/composables/use-component-config'
+import type { ComponentClass } from '@/types/utils.type'
+import { clsx, getClass } from '@/utils/build-class.util'
+import { DIVIDER_CONFIG } from './divider.context'
+import type { DividerProps } from './divider.props'
+import type { DividerColor, DividerOrientation, DividerPlacement } from './divider.types'
+
+const dividerOrientations: ComponentClass<'divider', DividerOrientation> = {
+  horizontal: 'divider-horizontal',
+  vertical: 'divider-vertical',
+}
+
+const dividerColors: ComponentClass<'divider', DividerColor> = {
+  neutral: 'divider-neutral',
+  primary: 'divider-primary',
+  secondary: 'divider-secondary',
+  accent: 'divider-accent',
+  info: 'divider-info',
+  success: 'divider-success',
+  warning: 'divider-warning',
+  error: 'divider-error',
+}
+
+const dividerPlacements: ComponentClass<'divider', DividerPlacement> = {
+  start: 'divider-start',
+  end: 'divider-end',
+}
+</script>
+
+<script setup lang="ts">
+const props = defineProps<DividerProps>()
+const config = useComponentConfig(DIVIDER_CONFIG, props)
+</script>
+
+<template>
+  <div
+    class="divider"
+    :class="clsx([
+      'w-full',
+      getClass(dividerOrientations, config.orientation),
+      getClass(dividerColors, config.color),
+      getClass(dividerPlacements, config.placement),
+    ])"
+  >
+    <slot />
+  </div>
+</template>

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

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

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

@@ -0,0 +1,28 @@
+import type { DividerColor, DividerOrientation, DividerPlacement } from './divider.types'
+
+export interface DividerConfigurableProps {
+  /**
+   * Orientation of the divider line.
+   * - `'horizontal'`: Horizontal line.
+   * - `'vertical'`: Vertical line.
+   *
+   * @default 'horizontal'
+   */
+  orientation?: DividerOrientation
+
+  /**
+   * Color of the divider line based on DaisyUI palette.
+   */
+  color?: DividerColor
+
+  /**
+   * Placement of the divider text/content.
+   * - `'start'`: Aligned to the start.
+   * - `'end'`: Aligned to the end.
+   * - `'middle'`: Centered.
+   * - `'none'`: No text placement (text not shown).
+   */
+  placement?: DividerPlacement
+}
+
+export interface DividerProps extends DividerConfigurableProps {}

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

@@ -0,0 +1,3 @@
+export type DividerOrientation = 'horizontal' | 'vertical'
+export type DividerPlacement = 'start' | 'end'
+export type DividerColor = 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'

package/src/components/layout/drawer/Drawer.story.vue

@@ -0,0 +1,301 @@
+<script lang="ts">
+import Button from '@/components/actions/button/Button.vue'
+import { logEvent } from 'histoire/client'
+import { reactive, shallowRef, useTemplateRef } from 'vue'
+import Drawer from './Drawer.vue'
+import type { DrawerProps } from './drawer.props'
+</script>
+
+<script setup lang="ts">
+const state = reactive<DrawerProps>({
+  side: 'start',
+  overlay: true,
+})
+
+const drawerRef = useTemplateRef('drawer-ref')
+
+const isOpen = shallowRef(false)
+</script>
+
+<template>
+  <Story group="components" title="Layout/Drawer" auto-props-disabled>
+    <template #default>
+
+      <Variant title="Default">
+        <template #controls>
+          <HstSelect title="Side" v-model="state.side" :options="['start', 'end']" />
+          <HstCheckbox title="Overlay" v-model="(state.overlay as boolean)" />
+        </template>
+
+        <template #source>
+          <textarea v-pre>
+            <Drawer v-model="isOpen">
+              <Button @click="isOpen = true">Open drawer</Button>
+
+              <template #sidebar>
+                <div class="p-4 w-80 bg-base-100 h-full">
+                  <h2 class="text-xl font-bold">Drawer content</h2>
+                  <p>Some content here...</p>
+                </div>
+              </template>
+            </Drawer>
+          </textarea>
+        </template>
+
+        <div class="p-4">
+          <Drawer v-model="isOpen" v-bind="state">
+            <Button @click="isOpen = true">Open drawer</Button>
+
+            <template #sidebar>
+              <div class="p-4 w-80 bg-base-100 h-full">
+                <h2 class="text-xl font-bold">Drawer content</h2>
+                <p class="mt-4">This is the drawer sidebar content.</p>
+                <Button class="mt-4" @click="isOpen = false">Close</Button>
+              </div>
+            </template>
+          </Drawer>
+        </div>
+      </Variant>
+
+      <Variant title="End side">
+        <template #source>
+          <textarea v-pre>
+            <Drawer v-model="isOpen" side="end">
+              <Button @click="isOpen = true">Open from end</Button>
+
+              <template #sidebar>
+                <div class="p-4 w-80 bg-base-100 h-full">
+                  <p>Drawer opens from the right</p>
+                </div>
+              </template>
+            </Drawer>
+          </textarea>
+        </template>
+
+        <div class="p-4">
+          <Drawer v-model="isOpen" side="end">
+            <Button @click="isOpen = true">Open from end</Button>
+
+            <template #sidebar>
+              <div class="p-4 w-80 bg-base-100 h-full">
+                <h2 class="text-xl font-bold">End Drawer</h2>
+                <p class="mt-4">This drawer opens from the right side.</p>
+              </div>
+            </template>
+          </Drawer>
+        </div>
+      </Variant>
+
+      <Variant title="Without overlay">
+        <template #source>
+          <textarea v-pre>
+            <Drawer v-model="isOpen" :overlay="false">
+              <Button @click="isOpen = true">Open (no overlay)</Button>
+              
+              <template #sidebar>
+                <div class="p-4 w-80 bg-base-100 h-full">
+                  <p>No overlay to close</p>
+                </div>
+              </template>
+            </Drawer>
+          </textarea>
+        </template>
+
+        <div class="p-4">
+          <Drawer v-model="isOpen" :overlay="false">
+            <Button @click="isOpen = true">Open (no overlay)</Button>
+
+            <template #sidebar>
+              <div class="p-4 w-80 bg-base-100 h-full">
+                <h2 class="text-xl font-bold">No Overlay</h2>
+                <p class="mt-4">Click the button to close.</p>
+                <Button class="mt-4" @click="isOpen = false">Close</Button>
+              </div>
+            </template>
+          </Drawer>
+        </div>
+      </Variant>
+
+      <Variant title="Nested Drawers">
+        <template #source>
+          <textarea v-pre>
+            <Drawer v-model="isOpen1">
+              <Button @click="isOpen1 = true">Open first</Button>
+              
+              <Drawer v-model="isOpen2">
+                <Button @click="isOpen2 = true">Open second</Button>
+                
+                <template #sidebar>
+                  <div class="p-4 w-80 bg-base-100 h-full">
+                    <p>Second drawer (nested)</p>
+                  </div>
+                </template>
+              </Drawer>
+              
+              <template #sidebar>
+                <div class="p-4 w-80 bg-base-100 h-full">
+                  <p>First drawer</p>
+                </div>
+              </template>
+            </Drawer>
+          </textarea>
+        </template>
+
+        <div class="p-4">
+          <Drawer v-model="isOpen">
+            <Button @click="isOpen = true">Open first</Button>
+
+            <Drawer>
+              <Button @click="isOpen = true">Open second</Button>
+
+              <template #sidebar>
+                <div class="p-4 w-80 bg-base-100 h-full">
+                  <h2 class="text-xl font-bold">Nested Drawer</h2>
+                  <p class="mt-4">This is a nested drawer with higher z-index.</p>
+                </div>
+              </template>
+            </Drawer>
+
+            <template #sidebar>
+              <div class="p-4 w-80 bg-base-100 h-full">
+                <h2 class="text-xl font-bold">First Drawer</h2>
+                <p class="mt-4">Open the second drawer from here.</p>
+              </div>
+            </template>
+          </Drawer>
+        </div>
+      </Variant>
+
+      <Variant title="Events">
+        <Drawer
+          v-model="isOpen"
+          @open="logEvent('open', $event)"
+          @close="logEvent('close', $event)"
+        >
+          <Button @click="isOpen = true">Open — watch the event log</Button>
+
+          <template #sidebar>
+            <div class="p-4 w-80 bg-base-100 h-full">
+              <h2 class="text-xl font-bold">Events</h2>
+              <p class="mt-4">Check the event log for @open and @close.</p>
+              <Button class="mt-4" @click="isOpen = false">Close</Button>
+            </div>
+          </template>
+        </Drawer>
+      </Variant>
+
+      <Variant title="Expose — open / close">
+        <template #source>
+          <textarea v-pre>
+            <Drawer ref="drawerRef">
+              <Button @click="drawerRef?.open()">Open programmatically</Button>
+
+              <template #sidebar>
+                <div class="p-4 w-80 bg-base-100 h-full">
+                  <Button @click="drawerRef?.close()">Close</Button>
+                </div>
+              </template>
+            </Drawer>
+          </textarea>
+        </template>
+
+        <Drawer ref="drawer-ref" v-model="isOpen">
+          <div class="flex gap-2">
+            <Button @click="drawerRef?.open()">open()</Button>
+            <Button @click="drawerRef?.close()">close()</Button>
+          </div>
+
+          <template #sidebar>
+            <div class="p-4 w-80 bg-base-100 h-full">
+              <h2 class="text-xl font-bold">Programmatic control</h2>
+              <p class="mt-4">Use the exposed methods to control the drawer.</p>
+            </div>
+          </template>
+        </Drawer>
+      </Variant>
+
+    </template>
+  </Story>
+</template>
+
+<docs lang="md">
+# Drawer
+
+## Description
+
+A sidebar that can be toggled open or closed, typically used for mobile navigation menus.
+Built on DaisyUI's `drawer` component. Supports nested drawers with automatic z-index management.
+
+## Props
+
+| Prop           | Type         | Default     | Required | Configurable       | Description                                     |
+|----------------|--------------|-------------|----------|--------------------|-------------------------------------------------|
+| `side`         | `DrawerSide` | `'start'`   | :x:      | :white_check_mark: | Side where drawer opens: `'start'` or `'end'`.  |
+| `overlay`      | `boolean`    | `true`      | :x:      | :white_check_mark: | When `true`, shows overlay to close the drawer. |
+| `contentClass` | `ClassValue` | `undefined` | :x:      | :white_check_mark: | Additional classes for the drawer content.      |
+| `sidebarClass` | `ClassValue` | `undefined` | :x:      | :white_check_mark: | Additional classes for the drawer sidebar.      |
+
+## Events
+
+| Event    | Payload | Description                     |
+|----------|---------|---------------------------------|
+| `@open`  | -       | Emitted when the drawer opens.  |
+| `@close` | -       | Emitted when the drawer closes. |
+
+## Slots
+
+| Slot      | Description                                                               |
+|-----------|---------------------------------------------------------------------------|
+| `default` | Main content area. Receives `drawer-id`, `is-open`, `open`, `close`.      |
+| `sidebar` | Drawer sidebar content. Receives `drawer-id`, `is-open`, `open`, `close`. |
+
+## Exposed
+
+These methods are accessible via a template ref on the component instance.
+
+| Method    | Signature    | Description        |
+|-----------|--------------|--------------------|
+| `open()`  | `() => void` | Opens the drawer.  |
+| `close()` | `() => void` | Closes the drawer. |
+
+## Usage
+
+```vue
+<!-- Basic drawer -->
+<Drawer v-model="isOpen">
+  <Button @click="isOpen = true">Open drawer</Button>
+  
+  <template #sidebar>
+    <div class="p-4 w-80 bg-base-100 h-full">
+      <h2>Drawer content</h2>
+    </div>
+  </template>
+</Drawer>
+
+<!-- Drawer opening from end -->
+<Drawer v-model="isOpen" side="end">
+  <Button @click="isOpen = true">Open</Button>
+  <template #sidebar>
+    <div>Content</div>
+  </template>
+</Drawer>
+
+<!-- With events -->
+<Drawer
+  v-model="isOpen"
+  @open="console.log('opened')"
+  @close="console.log('closed')"
+/>
+
+<!-- Without overlay -->
+<Drawer v-model="isOpen" :overlay="false">
+  <!-- User must provide their own close mechanism -->
+</Drawer>
+
+<!-- Programmatic control -->
+const drawerRef = useTemplateRef('drawer')
+
+drawerRef.value?.open()   // Open
+drawerRef.value?.close()  // Close
+```
+</docs>

package/src/components/layout/drawer/Drawer.vue

@@ -0,0 +1,88 @@
+<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 { inject, provide, useId, watch } from 'vue'
+import { DRAWER_CONFIG } from './drawer.context'
+import type { DrawerProps } from './drawer.props'
+import type { DrawerSide } from './drawer.types'
+
+const drawerSides: ComponentClass<'drawer', DrawerSide> = {
+  start: 'drawer-start',
+  end: 'drawer-end',
+}
+
+const BASE = 20
+</script>
+
+<script setup lang="ts">
+const props = defineProps<DrawerProps>()
+const isOpen = defineModel<boolean>({ default: false })
+
+const emit = defineEmits<{
+  open: []
+  close: []
+}>()
+
+const config = useComponentConfig(DRAWER_CONFIG, props, {
+  side: 'start',
+  overlay: true,
+})
+
+const parentLevel = inject('drawer-level', 0)
+const level = parentLevel + 1
+provide('drawer-level', level)
+
+const zIndex = BASE + level * 10 + 1
+const drawerId = `drawer-${useId()}`
+
+watch(isOpen, state => {
+  state ? emit('open') : emit('close')
+})
+
+function open() {
+  isOpen.value = true
+}
+
+function close() {
+  isOpen.value = false
+}
+
+defineExpose({
+  open,
+  close,
+})
+</script>
+
+<template>
+  <div
+    class="drawer"
+    :class="getClass(drawerSides, config.side)"
+  >
+    <input
+      :id="drawerId"
+      v-model="isOpen"
+      type="checkbox"
+      class="drawer-toggle"
+    />
+
+    <div class="drawer-content" :class="config.contentClass">
+      <slot :drawer-id="drawerId" :is-open="isOpen" :open="open" :close="close" />
+    </div>
+
+    <aside
+      class="drawer-side"
+      :class="config.sidebarClass"
+      :style="{ zIndex }"
+    >
+      <label
+        v-if="config.overlay"
+        :for="drawerId"
+        aria-label="close"
+        class="drawer-overlay"
+      />
+
+      <slot name="sidebar" :drawer-id="drawerId" :is-open="isOpen" :open="open" :close="close" />
+    </aside>
+  </div>
+</template>

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

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

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

@@ -0,0 +1,25 @@
+import type { ClassValue } from 'vue'
+import type { DrawerSide } from './drawer.types'
+export interface DrawerConfigurableProps {
+  /**
+   * Side from which the drawer opens.
+   * - `'start'`: Opens from the left (default).
+   * - `'end'`: Opens from the right.
+   */
+  side?: DrawerSide
+  /**
+   * When `true`, clicking the overlay closes the drawer.
+   *
+   * @default true
+   */
+  overlay?: boolean
+  /**
+   * Additional classes to apply to the drawer content container.
+   */
+  contentClass?: ClassValue
+  /**
+   * Additional classes to apply to the drawer sidebar container.
+   */
+  sidebarClass?: ClassValue
+}
+export interface DrawerProps extends DrawerConfigurableProps {}

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

@@ -0,0 +1,6 @@
+export type DrawerSide = 'start' | 'end'
+
+export type DrawerEmits = {
+  present: []
+  close: []
+}