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

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

@@ -0,0 +1,53 @@
+<script lang="ts">
+import { useComponentConfig } from '@/composables/use-component-config'
+import { RouterLink } from 'vue-router'
+import { BREADCRUMBS_CONFIG } from './breadcrumbs.context'
+import type { BreadcrumbsProps } from './breadcrumbs.props'
+</script>
+
+<script setup lang="ts">
+const props = defineProps<BreadcrumbsProps>()
+const config = useComponentConfig(BREADCRUMBS_CONFIG, props, {})
+
+function isLast(index: number) {
+  return index === props.items.length - 1
+}
+</script>
+
+<template>
+  <div
+    class="breadcrumbs text-sm"
+    :class="config.maxWidth"
+  >
+    <ul>
+      <li
+        v-for="(item, index) in items"
+        :key="index"
+      >
+        <!-- Clickable item (not the last) -->
+        <component
+          :is="item.to ? item.to === '#' ? 'a' : RouterLink : 'a'"
+          v-if="!isLast(index)"
+          v-bind="{
+            to: item.to && item.to !== '#',
+            href: item.to && item.to === '#',
+          }"
+          :to="item.to"
+          class="inline-flex items-center gap-2"
+        >
+          <component :is="item.icon" v-if="item.icon" :size="16" />
+          {{ item.label }}
+        </component>
+
+        <!-- Last item (current page, non-clickable) -->
+        <span
+          v-else
+          class="inline-flex items-center gap-2"
+        >
+          <component :is="item.icon" v-if="item.icon" :size="16" />
+          {{ item.label }}
+        </span>
+      </li>
+    </ul>
+  </div>
+</template>

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

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

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

@@ -0,0 +1,18 @@
+import type { BreadcrumbItem } from './breadcrumbs.types'
+
+export interface BreadcrumbsConfigurableProps {
+  /**
+   * Maximum width of the breadcrumb container.
+   * Enables horizontal scrolling when items overflow.
+   * @example 'max-w-xs'
+   */
+  maxWidth?: string
+}
+
+export interface BreadcrumbsProps extends BreadcrumbsConfigurableProps {
+  /**
+   * List of breadcrumb items to render.
+   * The last item is treated as the current page (non-clickable).
+   */
+  items: BreadcrumbItem[]
+}

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

@@ -0,0 +1,13 @@
+import type { Component } from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
+
+export interface BreadcrumbItem {
+  /** Label displayed for this breadcrumb. */
+  label: string
+
+  /** Navigation target (Vue Router location). */
+  to?: RouteLocationRaw
+
+  /** Optional icon component (e.g. Lucide icon) to prepend. */
+  icon?: Component
+}

package/src/components/navigation/dock/Dock.story.vue

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import { HomeIcon, InboxIcon, SettingsIcon } from '@lucide/vue'
+import Dock from './Dock.vue'
+import DockItem from './DockItem.vue'
+</script>
+
+<template>
+  <Story group="components" title="Navigation/Dock" auto-props-disabled>
+
+    <Variant title="Default">
+      <template #source>
+        <textarea v-pre>
+          <Dock>
+            <DockItem :icon="HomeIcon" label="Home" to="/" />
+            <DockItem :icon="InboxIcon" label="Inbox" to="/inbox" />
+            <DockItem :icon="SettingsIcon" label="Settings" to="/settings" />
+          </Dock>
+        </textarea>
+      </template>
+      <Dock>
+        <DockItem :icon="HomeIcon" label="Home" to="#" />
+        <DockItem :icon="InboxIcon" label="Inbox" to="#" />
+        <DockItem :icon="SettingsIcon" label="Settings" to="#" />
+      </Dock>
+    </Variant>
+
+    <Variant title="Without labels">
+      <template #source>
+        <textarea v-pre>
+          <Dock>
+            <DockItem :icon="HomeIcon" to="/" />
+            <DockItem :icon="InboxIcon" to="/inbox" />
+            <DockItem :icon="SettingsIcon" to="/settings" />
+          </Dock>
+        </textarea>
+      </template>
+      <Dock>
+        <DockItem :icon="HomeIcon" to="#" />
+        <DockItem :icon="InboxIcon" to="#" />
+        <DockItem :icon="SettingsIcon" to="#" />
+      </Dock>
+    </Variant>
+
+    <Variant title="Without router (buttons)">
+      <template #source>
+        <textarea v-pre>
+          <Dock>
+            <DockItem :icon="HomeIcon" label="Home" />
+            <DockItem :icon="InboxIcon" label="Inbox" />
+            <DockItem :icon="SettingsIcon" label="Settings" />
+          </Dock>
+        </textarea>
+      </template>
+      <Dock>
+        <DockItem :icon="HomeIcon" label="Home" />
+        <DockItem :icon="InboxIcon" label="Inbox" />
+        <DockItem :icon="SettingsIcon" label="Settings" />
+      </Dock>
+    </Variant>
+
+    <Variant title="Sizes">
+      <div class="flex flex-col gap-4 h-full">
+        <div v-for="size in ['xs', 'sm', 'md', 'lg', 'xl']" :key="size" class="relative">
+          <Dock :size="size" class="static">
+            <DockItem :icon="HomeIcon" to="#" />
+            <DockItem :icon="InboxIcon" to="#" />
+            <DockItem :icon="SettingsIcon" to="#" />
+          </Dock>
+        </div>
+      </div>
+    </Variant>
+
+  </Story>
+</template>
+
+<docs lang="md">
+# Dock
+
+## Description
+Bottom navigation bar fixed to the bottom of the screen.
+Use `DockItem` for each navigation element.
+
+> Add `<meta name="viewport" content="viewport-fit=cover" />` for iOS support.
+
+## Dock Props
+| Prop   | Type       | Default | Required | Configurable       | Description      |
+|--------|------------|---------|----------|--------------------|------------------|
+| `size` | `DockSize` | `'md'`  | :x:      | :white_check_mark: | Size of the dock |
+
+## DockItem Props
+| Prop    | Type               | Default     | Required           | Configurable | Description                                           |
+|---------|--------------------|-------------|--------------------|--------------|-------------------------------------------------------|
+| `icon`  | `Component`        | `undefined` | :white_check_mark: | :x:          | Icon component (e.g. Lucide icon)                     |
+| `label` | `string`           | `undefined` | :x:                | :x:          | Text label displayed below the icon                   |
+| `to`    | `RouteLocationRaw` | `undefined` | :x:                | :x:          | Vue Router location. Absent = renders as `<button />` |
+
+## Notes
+- The `active` state is automatically detected via `useLink` (Vue Router).
+- Without `to`, the item renders as a native `<button />`.
+
+## Usage
+```vue
+<Dock size="md">
+  <DockItem :icon="HomeIcon" label="Home" to="/" />
+  <DockItem :icon="InboxIcon" label="Inbox" to="/inbox" />
+  <DockItem :icon="SettingsIcon" label="Settings" to="/settings" />
+</Dock>
+```
+</docs>

package/src/components/navigation/dock/Dock.vue

@@ -0,0 +1,32 @@
+<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 { DOCK_CONFIG } from './dock.context'
+import type { DockProps } from './dock.props'
+import type { DockSize } from './dock.types'
+
+const sizes: ComponentClass<'dock', DockSize> = {
+  xs: 'dock-xs',
+  sm: 'dock-sm',
+  md: 'dock-md',
+  lg: 'dock-lg',
+  xl: 'dock-xl',
+}
+</script>
+
+<script setup lang="ts">
+const props = defineProps<DockProps>()
+const config = useComponentConfig(DOCK_CONFIG, props, {
+  size: 'md',
+})
+</script>
+
+<template>
+  <div
+    class="dock"
+    :class="getClass(sizes, config.size)"
+  >
+    <slot />
+  </div>
+</template>

package/src/components/navigation/dock/DockItem.vue

@@ -0,0 +1,50 @@
+<script lang="ts">
+import { useComponentConfig } from '@/composables/use-component-config'
+import { computed } from 'vue'
+import { RouterLink, useLink } from 'vue-router'
+import { DOCK_ITEM_CONFIG } from './dock.context'
+import type { DockItemProps } from './dock.props'
+</script>
+
+<script setup lang="ts">
+const props = defineProps<DockItemProps>()
+const config = useComponentConfig(DOCK_ITEM_CONFIG, props, {})
+
+const tag = computed(() => {
+  return props.to ? props.to === '#' ? 'a' : RouterLink : 'button'
+})
+const attr = computed(() => {
+  if (tag.value === 'a') {
+    return {
+      href: props.to,
+    }
+  }
+  if (tag.value === 'button') {
+    return {}
+  }
+
+  return {
+    to: props.to,
+  }
+})
+
+const isActive = computed(() => {
+  if (!props.to || props.to === '#') {
+    return false
+  }
+
+  const link = useLink({ to: props.to })
+  return link.isActive.value
+})
+</script>
+
+<template>
+  <component
+    :is="tag"
+    v-binf="attr"
+    :class="isActive && 'dock-active'"
+  >
+    <component :is="config.icon" :size="20" />
+    <span v-if="config.label" class="dock-label">{{ config.label }}</span>
+  </component>
+</template>

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

@@ -0,0 +1,4 @@
+import { createComponentConfigKey } from '@/symbol'
+
+export const DOCK_CONFIG = createComponentConfigKey('dock')
+export const DOCK_ITEM_CONFIG = createComponentConfigKey('dockItem')

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

@@ -0,0 +1,34 @@
+import type { Component } from 'vue'
+import type { RouteLocationRaw } from 'vue-router'
+import type { DockSize } from './dock.types'
+
+export interface DockConfigurableProps {
+  /**
+   * Size of the dock.
+   *
+   * @default 'md'
+   */
+  size?: DockSize
+}
+
+export interface DockProps extends DockConfigurableProps {}
+
+// biome-ignore lint/suspicious/noEmptyInterface: placeholder for now
+export interface DockItemConfigurableProps {}
+
+export interface DockItemProps extends DockItemConfigurableProps {
+  /**
+   * Icon component to display (e.g. Lucide icon).
+   */
+  icon: Component
+
+  /**
+   * Optional text label displayed below the icon.
+   */
+  label?: string
+
+  /**
+   * Navigation target (Vue Router location). When provided, the item renders as a RouterLink.
+   */
+  to?: RouteLocationRaw
+}

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

@@ -0,0 +1,3 @@
+import type { ComponentSize } from '@/types/size.type'
+
+export type DockSize = ComponentSize

package/src/components/navigation/link/Link.story.vue

@@ -0,0 +1,129 @@
+<script lang="ts">
+import { reactive } from 'vue'
+import Link from './Link.vue'
+import type { LinkProps } from './link.props'
+</script>
+
+<script setup lang="ts">
+const state = reactive<LinkProps>({
+  color: undefined,
+  hover: false,
+  to: '#',
+})
+</script>
+
+<template>
+  <Story group="components" title="Navigation/Link" auto-props-disabled>
+
+    <Variant title="Default">
+      <template #controls>
+        <HstSelect
+          v-model="state.color"
+          title="Color"
+          :options="[
+            { label: '-- default --', value: undefined },
+            'neutral', 'primary', 'secondary', 'accent',
+            'info', 'success', 'warning', 'error',
+          ]"
+        />
+        <HstCheckbox v-model="(state.hover as boolean)" title="Hover only" />
+      </template>
+      <template #default>
+        <Link v-bind="state">Click me</Link>
+      </template>
+      <template #source>
+        <textarea v-pre>
+          <Link to="/home" color="primary">Click me</Link>
+        </textarea>
+      </template>
+    </Variant>
+
+    <Variant title="Colors">
+      <template #default>
+        <div class="flex flex-wrap gap-4">
+          <Link to="#" color="neutral">Neutral</Link>
+          <Link to="#" color="primary">Primary</Link>
+          <Link to="#" color="secondary">Secondary</Link>
+          <Link to="#" color="accent">Accent</Link>
+          <Link to="#" color="info">Info</Link>
+          <Link to="#" color="success">Success</Link>
+          <Link to="#" color="warning">Warning</Link>
+          <Link to="#" color="error">Error</Link>
+        </div>
+      </template>
+      <template #source>
+        <textarea v-pre>
+          <Link to="/home" color="primary">Primary</Link>
+        </textarea>
+      </template>
+    </Variant>
+
+    <Variant title="Hover only">
+      <template #source>
+        <textarea v-pre>
+          <Link to="/home" hover>
+            Underline on hover only
+          </Link>
+        </textarea>
+      </template>
+
+      <template #default>
+        <Link to="#" :hover="true">Underline on hover only</Link>
+      </template>
+    </Variant>
+
+    <Variant title="Inline in text">
+      <template #default>
+        <p>
+          Tailwind CSS resets the style of links by default.
+          Add the "link" class to make it look like a
+          <Link to="#">normal link</Link>
+          again.
+        </p>
+      </template>
+      <template #source>
+        <textarea v-pre>
+          <p>
+            Tailwind CSS resets the style of links by default.
+            Add the "link" class to make it look like a
+            <Link to="/home">normal link</Link>
+            again.
+          </p>
+        </textarea>
+      </template>
+    </Variant>
+
+  </Story>
+</template>
+
+<docs lang="md">
+# Link
+
+## Description
+Adds the missing underline style to links.
+Supports Vue Router navigation, or native anchors (`#`, `#section`) for in-page links.
+
+## Props
+| Prop    | Type               | Default     | Required | Configurable       | Description                                                        |
+|---------|--------------------|-------------|----------|--------------------|--------------------------------------------------------------------|
+| `color` | `LinkColor`        | `undefined` | :x:      | :white_check_mark: | Color theme of the link                                            |
+| `hover` | `Booleanish`       | `false`     | :x:      | :white_check_mark: | Only shows underline on hover                                      |
+| `to`    | `RouteLocationRaw` | `undefined` | :x:      | :x:                | Vue Router location or anchor (`#`). Renders as `<a />` when `'#'` |
+
+## Slots
+| Slot      | Description  |
+|-----------|--------------|
+| `default` | Link content |
+
+## Usage
+```vue
+<!-- Vue Router link -->
+<Link to="/dashboard" color="primary">Dashboard</Link>
+
+<!-- Native anchor -->
+<Link to="#section">Jump to section</Link>
+
+<!-- Hover only underline -->
+<Link to="#" hover>Hover me</Link>
+```
+</docs>

package/src/components/navigation/link/Link.vue

@@ -0,0 +1,58 @@
+<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 { computed } from 'vue'
+import { RouterLink } from 'vue-router'
+import { LINK_CONFIG } from './link.context'
+import type { LinkProps } from './link.props'
+import type { LinkColor } from './link.types'
+
+const colors: ComponentClass<'link', LinkColor> = {
+  neutral: 'link-neutral',
+  primary: 'link-primary',
+  secondary: 'link-secondary',
+  accent: 'link-accent',
+  info: 'link-info',
+  success: 'link-success',
+  warning: 'link-warning',
+  error: 'link-error',
+}
+</script>
+
+<script setup lang="ts">
+const props = defineProps<LinkProps>()
+const config = useComponentConfig(LINK_CONFIG, props, {
+  hover: false,
+})
+
+const tag = computed(() => {
+  return props.to ? props.to === '#' ? 'a' : RouterLink : 'a'
+})
+
+const attr = computed(() => {
+  if (tag.value === 'a') {
+    return {
+      href: props.to,
+    }
+  }
+  return {
+    to: props.to,
+  }
+})
+</script>
+
+<template>
+  <component
+    :is="tag"
+    v-bind="attr"
+    class="link"
+    :class="[
+      getClass(colors, config.color),
+      isTrue(config.hover) && 'link-hover',
+    ]"
+  >
+    <slot />
+  </component>
+</template>

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

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

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

@@ -0,0 +1,24 @@
+import type { Booleanish } from '@/types/utils.type'
+import type { RouteLocationRaw } from 'vue-router'
+import type { LinkColor } from './link.types'
+
+export interface LinkConfigurableProps {
+  /**
+   * Color theme of the link.
+   */
+  color?: LinkColor
+
+  /**
+   * Only shows underline on hover instead of always.
+   */
+  hover?: Booleanish
+}
+
+export interface LinkProps extends LinkConfigurableProps {
+  /**
+   * Navigation target. Accepts a Vue Router location or a native anchor (`#`, `#section`).
+   * - Vue Router location → renders as `<RouterLink>`
+   * - `#` or anchor → renders as `<a href="#">`
+   */
+  to?: RouteLocationRaw
+}

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

@@ -0,0 +1 @@
+export type LinkColor = 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'