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

package/src/components/navigation/menu/Menu.story.vue

@@ -0,0 +1,284 @@
+<script setup lang="ts">
+import { BarChart, Home, Inbox, Info, Settings } from '@lucide/vue'
+import Menu from './Menu.vue'
+import MenuItem from './MenuItem.vue'
+</script>
+
+<template>
+  <Story group="components" title="Navigation/Menu" auto-props-disabled>
+ 
+    <Variant title="Default">
+      <template #source>
+        <textarea v-pre>
+          <Menu class="bg-base-200 w-56">
+            <MenuItem to="/">Home</MenuItem>
+            <MenuItem to="/inbox">Inbox</MenuItem>
+            <MenuItem to="/settings">Settings</MenuItem>
+          </Menu>
+        </textarea>
+      </template>
+      <Menu class="bg-base-200 w-56">
+        <MenuItem to="#">Home</MenuItem>
+        <MenuItem to="#">Inbox</MenuItem>
+        <MenuItem to="#">Settings</MenuItem>
+      </Menu>
+    </Variant>
+ 
+    <Variant title="With icons">
+      <template #source>
+        <textarea v-pre>
+          <Menu class="bg-base-200 w-56">
+            <MenuItem :icon="Home" to="/">Home</MenuItem>
+            <MenuItem :icon="Inbox" to="/inbox">Inbox</MenuItem>
+            <MenuItem :icon="Settings" to="/settings">Settings</MenuItem>
+          </Menu>
+        </textarea>
+      </template>
+      <Menu class="bg-base-200 w-56">
+        <MenuItem :icon="Home" to="#">Home</MenuItem>
+        <MenuItem :icon="Inbox" to="#">Inbox</MenuItem>
+        <MenuItem :icon="Settings" to="#">Settings</MenuItem>
+      </Menu>
+    </Variant>
+ 
+    <Variant title="With title">
+      <template #source>
+        <textarea v-pre>
+          <Menu class="bg-base-200 w-56">
+            <MenuItem title>Navigation</MenuItem>
+            <MenuItem :icon="Home" to="/">Home</MenuItem>
+            <MenuItem :icon="Inbox" to="/inbox">Inbox</MenuItem>
+            <MenuItem title>Account</MenuItem>
+            <MenuItem :icon="Settings" to="/settings">Settings</MenuItem>
+          </Menu>
+        </textarea>
+      </template>
+      <Menu class="bg-base-200 w-56">
+        <MenuItem title>Navigation</MenuItem>
+        <MenuItem :icon="Home" to="#">Home</MenuItem>
+        <MenuItem :icon="Inbox" to="#">Inbox</MenuItem>
+        <MenuItem title>Account</MenuItem>
+        <MenuItem :icon="Settings" to="#">Settings</MenuItem>
+      </Menu>
+    </Variant>
+ 
+    <Variant title="With badge">
+      <template #source>
+        <textarea v-pre>
+          <Menu class="bg-base-200 w-56">
+            <MenuItem :icon="Home" to="/">Home</MenuItem>
+            <MenuItem :icon="Inbox" to="/inbox">
+              Inbox
+              <template #badge>
+                <span class="badge badge-xs badge-warning">99+</span>
+              </template>
+            </MenuItem>
+            <MenuItem :icon="BarChart" to="/stats">
+              Stats
+              <template #badge>
+                <span class="badge badge-xs badge-info" />
+              </template>
+            </MenuItem>
+          </Menu>
+        </textarea>
+      </template>
+      <Menu class="bg-base-200 w-56">
+        <MenuItem :icon="Home" to="#">Home</MenuItem>
+        <MenuItem :icon="Inbox" to="#">
+          Inbox
+          <template #badge>
+            <span class="badge badge-xs badge-warning">99+</span>
+          </template>
+        </MenuItem>
+        <MenuItem :icon="BarChart" to="#">
+          Stats
+          <template #badge>
+            <span class="badge badge-xs badge-info" />
+          </template>
+        </MenuItem>
+      </Menu>
+    </Variant>
+ 
+    <Variant title="With static submenu">
+      <template #source>
+        <textarea v-pre>
+          <Menu class="bg-base-200 w-56">
+            <MenuItem to="/">Home</MenuItem>
+            <MenuItem to="/parent">
+              Parent
+              <template #submenu>
+                <MenuItem to="/parent/sub-1">Submenu 1</MenuItem>
+                <MenuItem to="/parent/sub-2">Submenu 2</MenuItem>
+              </template>
+            </MenuItem>
+            <MenuItem to="/other">Other</MenuItem>
+          </Menu>
+        </textarea>
+      </template>
+      <Menu class="bg-base-200 w-56">
+        <MenuItem to="#">Home</MenuItem>
+        <MenuItem to="#">
+          Parent
+          <template #submenu>
+            <MenuItem to="#">Submenu 1</MenuItem>
+            <MenuItem to="#">Submenu 2</MenuItem>
+          </template>
+        </MenuItem>
+        <MenuItem to="#">Other</MenuItem>
+      </Menu>
+    </Variant>
+ 
+    <Variant title="With collapsible submenu">
+      <template #source>
+        <textarea v-pre>
+          <Menu class="bg-base-200 w-56">
+            <MenuItem to="/">Home</MenuItem>
+            <MenuItem collapsible>
+              Parent
+              <template #submenu>
+                <MenuItem to="/parent/sub-1">Submenu 1</MenuItem>
+                <MenuItem to="/parent/sub-2">Submenu 2</MenuItem>
+                <MenuItem collapsible>
+                  Nested parent
+                  <template #submenu>
+                    <MenuItem to="/parent/sub-2/a">Submenu A</MenuItem>
+                    <MenuItem to="/parent/sub-2/b">Submenu B</MenuItem>
+                  </template>
+                </MenuItem>
+              </template>
+            </MenuItem>
+            <MenuItem to="/other">Other</MenuItem>
+          </Menu>
+        </textarea>
+      </template>
+      <Menu class="bg-base-200 w-56">
+        <MenuItem to="#">Home</MenuItem>
+        <MenuItem collapsible>
+          Parent
+          <template #submenu>
+            <MenuItem to="#">Submenu 1</MenuItem>
+            <MenuItem to="#">Submenu 2</MenuItem>
+            <MenuItem collapsible>
+              Nested parent
+              <template #submenu>
+                <MenuItem to="#">Submenu A</MenuItem>
+                <MenuItem to="#">Submenu B</MenuItem>
+              </template>
+            </MenuItem>
+          </template>
+        </MenuItem>
+        <MenuItem to="#">Other</MenuItem>
+      </Menu>
+    </Variant>
+ 
+    <Variant title="With disabled items">
+      <Menu class="bg-base-200 w-56">
+        <MenuItem to="#">Enabled</MenuItem>
+        <MenuItem disabled>Disabled</MenuItem>
+        <MenuItem to="#">Enabled</MenuItem>
+      </Menu>
+    </Variant>
+ 
+    <Variant title="Horizontal">
+      <template #source>
+        <textarea v-pre>
+          <Menu direction="horizontal" class="bg-base-200">
+            <MenuItem :icon="Home" to="/">Home</MenuItem>
+            <MenuItem :icon="Inbox" to="/inbox">Inbox</MenuItem>
+            <MenuItem :icon="Info" to="/about">About</MenuItem>
+          </Menu>
+        </textarea>
+      </template>
+      <Menu direction="horizontal" class="bg-base-200">
+        <MenuItem :icon="Home" to="#">Home</MenuItem>
+        <MenuItem :icon="Inbox" to="#">Inbox</MenuItem>
+        <MenuItem :icon="Info" to="#">About</MenuItem>
+      </Menu>
+    </Variant>
+ 
+    <Variant title="Sizes">
+      <div class="flex flex-col gap-4">
+        <Menu v-for="size in ['xs', 'sm', 'md', 'lg', 'xl']" :key="size" :size="size" class="bg-base-200 w-56">
+          <MenuItem to="#">Item 1</MenuItem>
+          <MenuItem to="#">Item 2</MenuItem>
+        </Menu>
+      </div>
+    </Variant>
+ 
+  </Story>
+</template>
+
+<docs lang="md">
+# Menu
+
+## Description
+
+Displays a list of navigation links vertically or horizontally.
+Supports icons, badges, titles, static submenus, and collapsible submenus.
+
+## API
+
+<details>
+<summary>Menu</summary>
+
+### Props
+
+| Prop        | Type            | Default      | Required | Configurable       | Description           |
+|-------------|-----------------|--------------|----------|--------------------|-----------------------|
+| `size`      | `MenuSize`      | `'md'`       | :x:      | :white_check_mark: | Size of the menu      |
+| `direction` | `MenuDirection` | `'vertical'` | :x:      | :white_check_mark: | Direction of the menu |
+
+</details>
+
+<details>
+<summary>MenuItem</summary>
+
+### Props
+
+| Prop          | Type               | Default     | Required | Configurable | Description                                                            |
+|---------------|--------------------|-------------|----------|--------------|------------------------------------------------------------------------|
+| `icon`        | `Component`        | `undefined` | :x:      | :x:          | Icon component (e.g. Lucide icon)                                      |
+| `to`          | `RouteLocationRaw` | `undefined` | :x:      | :x:          | Vue Router location. Absent = renders as `<a />`                       |
+| `title`       | `boolean`          | `false`     | :x:      | :x:          | Renders the item as a non-interactive section title                    |
+| `active`      | `boolean`          | `false`     | :x:      | :x:          | Forces the active state (auto-detected via `useLink` when `to` is set) |
+| `disabled`    | `boolean`          | `false`     | :x:      | :x:          | Disables the item                                                      |
+| `collapsible` | `boolean`          | `false`     | :x:      | :x:          | Wraps `submenu` slot in `<details />` when true                        |
+
+### Slots
+
+| Slot      | Bindings | Description                              |
+|-----------|----------|------------------------------------------|
+| `default` | -        | Item label                               |
+| `badge`   | -        | Optional badge displayed after the label |
+| `submenu` | -        | Nested `MenuItem` components             |
+
+</details>
+
+## Notes
+
+- `active` state is automatically detected via `useLink` (Vue Router) when `to` is provided.
+- Without `to`, the item renders as a plain `<a />` tag.
+- `collapsible` only takes effect when the `submenu` slot is populated.
+- `<details />` collapsible is CSS-only, no JS required.
+
+## Usage
+```vue
+<Menu size="md">
+  <MenuItem title>Navigation</MenuItem>
+  <MenuItem :icon="Home" to="/">Home</MenuItem>
+  <MenuItem :icon="Inbox" to="/inbox">
+    Inbox
+    <template #badge>
+      <span class="badge badge-xs badge-warning">99+</span>
+    </template>
+  </MenuItem>
+  <MenuItem collapsible>
+    Settings
+    <template #submenu>
+      <MenuItem to="/settings/profile">Profile</MenuItem>
+      <MenuItem to="/settings/security">Security</MenuItem>
+    </template>
+  </MenuItem>
+</Menu>
+```
+</docs>

package/src/components/navigation/menu/Menu.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 { MENU_CONFIG } from './menu.context'
+import type { MenuProps } from './menu.props'
+import type { MenuDirection, MenuSize } from './menu.types'
+
+const sizes: ComponentClass<'menu', MenuSize> = {
+  xs: 'menu-xs',
+  sm: 'menu-sm',
+  md: 'menu-md',
+  lg: 'menu-lg',
+  xl: 'menu-xl',
+}
+
+const directions: ComponentClass<'menu', MenuDirection> = {
+  vertical: 'menu-vertical',
+  horizontal: 'menu-horizontal',
+}
+</script>
+
+<script setup lang="ts">
+const props = defineProps<MenuProps>()
+const config = useComponentConfig(MENU_CONFIG, props, {
+  size: 'md',
+  direction: 'vertical'
+})
+</script>
+
+<template>
+  <ul
+    class="menu"
+    :class="[
+      getClass(sizes, config.size),
+      getClass(directions, config.direction),
+    ]"
+  >
+    <slot />
+  </ul>
+</template>

package/src/components/navigation/menu/MenuItem.vue

@@ -0,0 +1,106 @@
+<script lang="ts">
+import { useComponentConfig } from '@/composables/use-component-config'
+import { computed, useSlots } from 'vue'
+import { RouterLink, useLink } from 'vue-router'
+import { MENU_ITEM_CONFIG } from './menu.context'
+import type { MenuItemProps } from './menu.props'
+</script>
+
+<script setup lang="ts">
+const props = defineProps<MenuItemProps>()
+const emit = defineEmits<{ click: [event: MouseEvent] }>()
+const config = useComponentConfig(MENU_ITEM_CONFIG, props, {})
+
+const slots = useSlots()
+
+const hasSubmenu = computed(() => !!slots.submenu)
+const isTitle = computed(() => props.title)
+
+const tag = computed(() => {
+  if (!props.to) return 'a'
+  return props.to === '#' ? 'a' : RouterLink
+})
+
+const attr = computed(() => {
+  if (tag.value === 'a') return { href: props.to }
+  return { to: props.to }
+})
+
+const isActive = computed(() => {
+  if (props.active) return true
+  if (!props.to || props.to === '#') return false
+  const { isActive } = useLink({ to: computed(() => props.to!) })
+  return isActive.value
+})
+</script>
+
+<template>
+  <!-- Title item (standalone) -->
+  <li v-if="isTitle && !hasSubmenu" class="menu-title inline-flex items-center gap-2">
+    <component :is="props.icon" v-if="props.icon" :size="14" />
+    <slot />
+  </li>
+
+  <!-- Title item as parent (with submenu): uses <h2> per DaisyUI spec -->
+  <template v-else-if="isTitle && hasSubmenu">
+    <h2 class="menu-title inline-flex items-center gap-2">
+      <component :is="props.icon" v-if="props.icon" :size="14" />
+      <slot />
+    </h2>
+    <ul>
+      <slot name="submenu" />
+    </ul>
+  </template>
+
+  <!-- Regular item -->
+  <li v-else :class="{
+    'menu-disabled': config.disabled
+  }">
+
+    <!-- With submenu + collapsible: <details>/<summary> -->
+    <template v-if="hasSubmenu && config.collapsible">
+      <details>
+        <summary>
+          <component :is="config.icon" v-if="config.icon" :size="16" />
+          <slot />
+          <slot name="badge" />
+        </summary>
+        <ul>
+          <slot name="submenu" />
+        </ul>
+      </details>
+    </template>
+
+    <!-- With submenu, static: label + nested <ul> -->
+    <template v-else-if="hasSubmenu">
+      <component
+        :is="tag"
+        v-bind="attr"
+        :class="isActive && 'menu-active'"
+        @click="emit('click', $event)"
+      >
+        <component :is="config.icon" v-if="config.icon" :size="16" />
+        <slot />
+        <slot name="badge" />
+      </component>
+      <ul>
+        <slot name="submenu" />
+      </ul>
+    </template>
+
+    <!-- Leaf item -->
+    <template v-else>
+      <component
+        :is="tag"
+        v-bind="attr"
+        :class="isActive && 'menu-active'"
+        @click="emit('click', $event)"
+      >
+        <component :is="config.icon" v-if="config.icon" :size="16" />
+        <slot />
+        <slot name="badge" />
+      </component>
+    </template>
+
+  </li>
+</template>

package/src/components/navigation/menu/menu.context.ts

@@ -0,0 +1,4 @@
+import { createComponentConfigKey } from '@/config/symbol'
+
+export const MENU_CONFIG = createComponentConfigKey('menu')
+export const MENU_ITEM_CONFIG = createComponentConfigKey('menuItem')

package/src/components/navigation/menu/menu.props.ts

@@ -0,0 +1,59 @@
+import type { Component } from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
+import type { MenuDirection, MenuSize } from './menu.types'
+export interface MenuConfigurableProps {
+  /**
+   * Size of the menu.
+   *
+   * @default 'md'
+   */
+  size?: MenuSize
+  /**
+   * Direction of the menu.
+   *
+   * @default 'vertical'
+   */
+  direction?: MenuDirection
+}
+export interface MenuProps extends MenuConfigurableProps {}
+// biome-ignore lint/suspicious/noEmptyInterface: Intentionally empty to allow future configurable props and global plugin configuration
+export interface MenuItemConfigurableProps {}
+export interface MenuItemProps extends MenuItemConfigurableProps {
+  /**
+   * Optional icon component to display before the label (e.g. Lucide icon).
+   */
+  icon?: Component
+  /**
+   * Navigation target (Vue Router location).
+   * When provided, renders as RouterLink.
+   */
+  to?: RouteLocationRaw
+  /**
+   * Renders the item as a section title (non-interactive).
+   * Renders the item as a non-interactive section title (`menu-title`).
+   *
+   * @default false
+   */
+  title?: boolean
+  /**
+   * Disables the item.
+   *
+   * @default false
+   */
+  disabled?: boolean
+  /**
+   * Forces the active state on the item.
+   * When `to` is provided, the active state is automatically detected via `useLink`.
+   * Use this prop to manually control the active state when no `to` is provided.
+   *
+   * @default false
+   */
+  active?: boolean
+  /**
+   * When true and a `submenu` slot is provided, wraps the submenu
+   * in a `<details>/<summary>` for native collapsible behavior.
+   *
+   * @default false
+   */
+  collapsible?: boolean
+}

package/src/components/navigation/menu/menu.types.ts

@@ -0,0 +1,4 @@
+import type { ComponentSize } from '@/types/size.type'
+
+export type MenuSize = ComponentSize
+export type MenuDirection = 'vertical' | 'horizontal'

package/src/components/navigation/navbar/Navbar.story.vue

@@ -0,0 +1,154 @@
+<script setup lang="ts">
+import { Menu, MenuItem } from '@/components/navigation/public'
+import Navbar from './Navbar.vue'
+</script>
+
+<template>
+  <Story group="components" title="Navigation/Navbar" auto-props-disabled>
+
+    <Variant title="Default">
+      <template #source>
+        <textarea v-pre>
+          <Navbar>
+            <div class="flex-1">
+              <a class="btn btn-ghost text-xl">Brand</a>
+            </div>
+          </Navbar>
+        </textarea>
+      </template>
+      <Navbar>
+        <div class="flex-1">
+          <a class="btn btn-ghost text-xl">Brand</a>
+        </div>
+      </Navbar>
+    </Variant>
+
+    <Variant title="With start/center/end">
+      <template #source>
+        <textarea v-pre>
+          <Navbar>
+            <div class="navbar-start">
+              <a class="btn btn-ghost">Start</a>
+            </div>
+            <div class="navbar-center">
+              <a class="btn btn-ghost text-xl">Center</a>
+            </div>
+            <div class="navbar-end">
+              <a class="btn btn-ghost">End</a>
+            </div>
+          </Navbar>
+        </textarea>
+      </template>
+      <Navbar>
+        <div class="navbar-start">
+          <a class="btn btn-ghost">Start</a>
+        </div>
+        <div class="navbar-center">
+          <a class="btn btn-ghost text-xl">Center</a>
+        </div>
+        <div class="navbar-end">
+          <a class="btn btn-ghost">End</a>
+        </div>
+      </Navbar>
+    </Variant>
+
+    <Variant title="With Menu">
+      <template #source>
+        <textarea v-pre>
+          <Navbar>
+            <div class="flex-1">
+              <a class="btn btn-ghost text-xl">Brand</a>
+            </div>
+            <div class="flex-none">
+              <Menu direction="horizontal" class="px-1">
+                <MenuItem to="#">Item 1</MenuItem>
+                <MenuItem to="#">Item 2</MenuItem>
+              </Menu>
+            </div>
+          </Navbar>
+        </textarea>
+      </template>
+      <Navbar>
+        <div class="flex-1">
+          <a class="btn btn-ghost text-xl">Brand</a>
+        </div>
+        <div class="flex-none">
+          <Menu direction="horizontal" class="px-1">
+            <MenuItem to="#">Item 1</MenuItem>
+            <MenuItem to="#">Item 2</MenuItem>
+          </Menu>
+        </div>
+      </Navbar>
+    </Variant>
+
+    <Variant title="Primary variant">
+      <template #source>
+        <textarea v-pre>
+          <Navbar variant="primary">
+            <div class="flex-1">
+              <a class="btn btn-ghost text-xl">Primary Navbar</a>
+            </div>
+          </Navbar>
+        </textarea>
+      </template>
+      <Navbar variant="primary">
+        <div class="flex-1">
+          <a class="btn btn-ghost text-xl">Primary Navbar</a>
+        </div>
+      </Navbar>
+    </Variant>
+
+    <Variant title="Neutral variant">
+      <template #source>
+        <textarea v-pre>
+          <Navbar variant="neutral">
+            <div class="flex-1">
+              <a class="btn btn-ghost text-xl">Neutral Navbar</a>
+            </div>
+          </Navbar>
+        </textarea>
+      </template>
+      <Navbar variant="neutral">
+        <div class="flex-1">
+          <a class="btn btn-ghost text-xl">Neutral Navbar</a>
+        </div>
+      </Navbar>
+    </Variant>
+
+  </Story>
+</template>
+
+<docs lang="md">
+# Navbar
+
+## Description
+
+A responsive navigation bar component based on DaisyUI.
+
+## API
+
+### Slots
+
+| Slot      | Description         |
+|-----------|---------------------|
+| `default` | Main navbar content |
+
+## Usage
+
+```vue
+<Navbar>
+  <div class="navbar-start">
+    <a class="btn btn-ghost text-xl">Brand</a>
+  </div>
+  <div class="navbar-center">
+    <Menu direction="horizontal">
+      <MenuItem to="/">Home</MenuItem>
+      <MenuItem to="/about">About</MenuItem>
+    </Menu>
+  </div>
+  <div class="navbar-end">
+    <button class="btn btn-ghost">Button</button>
+  </div>
+</Navbar>
+```
+</docs>

package/src/components/navigation/navbar/Navbar.vue

@@ -0,0 +1,8 @@
+<script lang="ts">
+</script>
+
+<template>
+  <div class="navbar">
+    <slot />
+  </div>
+</template>

package/src/components/navigation/public.ts

@@ -0,0 +1,9 @@
+export { default as Breadcrumbs } from './breadcrumbs/Breadcrumbs.vue'
+export { default as Dock } from './dock/Dock.vue'
+export { default as DockItem } from './dock/DockItem.vue'
+export { default as Link } from './link/Link.vue'
+export { default as Menu } from './menu/Menu.vue'
+export { default as MenuItem } from './menu/MenuItem.vue'
+export { default as Navbar } from './navbar/Navbar.vue'
+export { default as Tab } from './tab/Tab.vue'
+export { default as Tabs } from './tab/Tabs.vue'