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

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`       | `Booleanish`       | `false`     | :x:      | :x:          | Renders the item as a non-interactive section title                    |
+| `active`      | `Booleanish`       | `false`     | :x:      | :x:          | Forces the active state (auto-detected via `useLink` when `to` is set) |
+| `disabled`    | `Booleanish`       | `false`     | :x:      | :x:          | Disables the item                                                      |
+| `collapsible` | `Booleanish`       | `false`     | :x:      | :x:          | Wraps `submenu` slot in `<details />` when true                        |
+
+### Slots
+
+| Slot      | 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,104 @@
+<script lang="ts">
+import { useComponentConfig } from '@/composables/use-component-config'
+import { isTrue } from '@/utils/is-true'
+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 config = useComponentConfig(MENU_ITEM_CONFIG, props, {})
+
+const slots = useSlots()
+
+const hasSubmenu = computed(() => !!slots.submenu)
+const isTitle = computed(() => isTrue(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 (isTrue(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': isTrue(config.disabled)
+  }">
+
+    <!-- With submenu + collapsible: <details>/<summary> -->
+    <template v-if="hasSubmenu && isTrue(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'"
+      >
+        <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'"
+      >
+        <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 '@/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,70 @@
+import type { Booleanish } from '@/types/utils.type'
+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?: Booleanish
+
+  /**
+   * Disables the item.
+   *
+   * @default false
+   */
+  disabled?: Booleanish
+
+  /**
+   * 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?: Booleanish
+
+  /**
+   * When true and a `submenu` slot is provided, wraps the submenu
+   * in a `<details>/<summary>` for native collapsible behavior.
+   *
+   * @default false
+   */
+  collapsible?: Booleanish
+}

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/public.ts

@@ -0,0 +1,5 @@
+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'

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

@@ -0,0 +1,12 @@
+// Breadcrumbs
+export type { BreadcrumbsProps } from './breadcrumbs/breadcrumbs.props'
+export * from './breadcrumbs/breadcrumbs.types'
+// Dock
+export type { DockItemProps, DockProps } from './dock/dock.props'
+export * from './dock/dock.types'
+// Link
+export type { LinkProps } from './link/link.props'
+export * from './link/link.types'
+// Menu
+export type { MenuItemProps, MenuProps } from './menu/menu.props'
+export * from './menu/menu.types'

package/src/composables/public.ts

@@ -0,0 +1,3 @@
+export * from './use-component-config'
+export * from './use-config'
+export * from './use-form-field'

package/src/composables/use-component-config.ts

@@ -0,0 +1,44 @@
+import { COMPONENT_SIZE } from '@/symbol'
+import { type ComputedRef, computed, type InjectionKey, inject } from 'vue'
+
+/**
+ * Merges objects while ignoring `undefined` values, allowing lower-priority
+ * configuration to remain in effect.
+ *
+ * Priority order (rightmost wins):
+ *   defaults → pluginConfig → contextOverrides (Form → FormField) → local props
+ */
+export function mergeProps<T extends Record<string, any>[]>(...objects: T): any {
+  return objects.reduce((acc, curr) => {
+    const cleanCurr = Object.fromEntries(Object.entries(curr).filter(([_, v]) => v !== undefined))
+    return { ...acc, ...cleanCurr }
+  }, {})
+}
+
+/**
+ * Resolves the final config of a component by merging in the following order:
+ *
+ * 1. `defaults`          — hardcoded component defaults (e.g. `{ size: 'md', counter: false }`)
+ * 2. `pluginConfig`      — inject(key) — global config provided via PoppyPlugin
+ * 3. `contextOverrides`  — values inherited from Form / FormField (passed explicitly)
+ * 4. `props`             — local props declared on the instance (highest priority)
+ *
+ * `undefined` values are ignored at each level, which allows `false` to correctly
+ * override a parent value without `undefined` inadvertently clearing it.
+ *
+ * @param key              - InjectionKey for the component's pluginConfig
+ * @param props            - Instance props (defineProps)
+ * @param defaults         - Hardcoded default values
+ * @param contextOverrides - Values inherited from the Form/FormField context (optional)
+ */
+export function useComponentConfig<T extends Record<string, any>, P extends Record<string, any>>(
+  key: InjectionKey<T>,
+  props: P,
+  defaults?: Partial<P & T>,
+  contextOverrides?: Record<string, any>,
+): ComputedRef<P & T> {
+  const pluginConfig = inject(key, {} as T)
+  const globalSize = inject(COMPONENT_SIZE, 'md')
+
+  return computed(() => mergeProps({ size: globalSize }, defaults ?? {}, pluginConfig, contextOverrides ?? {}, props))
+}

package/src/composables/use-config.ts

@@ -0,0 +1,6 @@
+import { COMPONENT_SIZE } from '@/symbol'
+import { inject } from 'vue'
+
+export function useSizeConfig() {
+  return inject(COMPONENT_SIZE, 'md')
+}

package/src/composables/use-form-field.ts

@@ -0,0 +1,84 @@
+import type { FormFieldContext } from '@/components/data/form-field/form-field.context'
+import { FORM_FIELD_CONTEXT_KEY } from '@/components/data/form-field/form-field.context'
+import { getValidationMessage } from '@/utils/get-validation-message'
+import { type ComputedRef, computed, inject, onMounted, type Ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+
+export interface UseFormFieldOptions {
+  required: ComputedRef<boolean>
+  inputEl?: Ref<HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | null>
+}
+
+export interface UseFormFieldReturn<T> {
+  /** The FormFieldContext when inside a <FormField>, null otherwise. */
+  field: FormFieldContext<T> | null
+  /** The current field value typed as T, or undefined when not in a FormField. */
+  fieldValue: ComputedRef<T | undefined>
+  /** True when the field has a server-side error set via setErrors(). */
+  hasServerError: ComputedRef<boolean>
+  /** Triggers HTML5 constraint validation on the input element. */
+  validate: () => boolean
+  /** To be called on the input's blur event — marks the field as touched. */
+  onBlur: () => void
+  /** Clears the current field error. */
+  clearError: () => void
+  /** Sets a custom validation message (delegates to el.setCustomValidity). */
+  setDelegateMessage: (msg: string) => void
+}
+
+export function useFormField<T = unknown>(options: UseFormFieldOptions): UseFormFieldReturn<T> {
+  const { t } = useI18n()
+
+  const field = inject(FORM_FIELD_CONTEXT_KEY, null) as FormFieldContext<T> | null
+
+  // Signal required state to FormField on mount and on change
+  onMounted(() => {
+    field?.setRequired(options.required.value)
+  })
+
+  watch(options.required, val => {
+    field?.setRequired(val)
+  })
+
+  const fieldValue = computed<T | undefined>(() => field?.value.value as T | undefined)
+
+  const hasServerError = computed<boolean>(() => {
+    if (!field) return false
+    const state = field.state.value
+    return state.hasError && !state.isDirty
+  })
+
+  function validate(): boolean {
+    const el = options.inputEl?.value
+    if (!el || !field) return true
+
+    const message = getValidationMessage(el, t)
+    field.setError(message ?? undefined)
+    return !message
+  }
+
+  function onBlur(): void {
+    field?.setTouched(true)
+    validate()
+  }
+
+  function clearError(): void {
+    field?.setError(undefined)
+  }
+
+  function setDelegateMessage(msg: string): void {
+    const el = options.inputEl?.value
+    if (!el) return
+    el.setCustomValidity(msg)
+  }
+
+  return {
+    field,
+    fieldValue,
+    hasServerError,
+    validate,
+    onBlur,
+    clearError,
+    setDelegateMessage,
+  }
+}