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

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

@@ -0,0 +1,15 @@
+// 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'
+// Tab
+export type { TabProps, TabsProps } from './tab/tab.props'
+export * from './tab/tab.types'

package/src/components/navigation/tab/Tab.story.vue

@@ -0,0 +1,186 @@
+<script setup lang="ts">
+import { Home, Settings, User } from '@lucide/vue'
+import { ref } from 'vue'
+import Tab from './Tab.vue'
+import Tabs from './Tabs.vue'
+
+const activeBottom = ref('tab1')
+</script>
+
+<template>
+  <Story group="components" title="Navigation/Tab" auto-props-disabled>
+
+    <Variant title="Border" id="border">
+      <Tabs variant="border">
+        <Tab value="tab1" title="Tab 1">
+          <p>Content of Tab 1 — Lorem ipsum dolor sit amet.</p>
+        </Tab>
+        <Tab value="tab2" title="Tab 2">
+          <p>Content of Tab 2 — Consectetur adipiscing elit.</p>
+        </Tab>
+        <Tab value="tab3" title="Tab 3">
+          <p>Content of Tab 3 — Sed do eiusmod tempor.</p>
+        </Tab>
+      </Tabs>
+    </Variant>
+
+    <Variant title="Lift" id="lift">
+      <Tabs variant="lift">
+        <Tab value="tab1" title="Tab 1">
+          <p>Content of Tab 1 — Lorem ipsum dolor sit amet.</p>
+        </Tab>
+        <Tab value="tab2" title="Tab 2">
+          <p>Content of Tab 2 — Consectetur adipiscing elit.</p>
+        </Tab>
+        <Tab value="tab3" title="Tab 3">
+          <p>Content of Tab 3 — Sed do eiusmod tempor.</p>
+        </Tab>
+      </Tabs>
+    </Variant>
+
+    <Variant title="Box" id="box">
+      <Tabs variant="box">
+        <Tab value="tab1" title="Tab 1">
+          <p>Content of Tab 1 — Lorem ipsum dolor sit amet.</p>
+        </Tab>
+        <Tab value="tab2" title="Tab 2">
+          <p>Content of Tab 2 — Consectetur adipiscing elit.</p>
+        </Tab>
+        <Tab value="tab3" title="Tab 3">
+          <p>Content of Tab 3 — Sed do eiusmod tempor.</p>
+        </Tab>
+      </Tabs>
+    </Variant>
+
+    <Variant title="With icons" id="with-icons">
+      <Tabs variant="lift">
+        <Tab value="home" :icon="Home">
+          <template #title>Home</template>
+          <p>Welcome to the home page.</p>
+        </Tab>
+        <Tab value="profile" :icon="User">
+          <template #title>Profile</template>
+          <p>Manage your profile here.</p>
+        </Tab>
+        <Tab value="settings" :icon="Settings">
+          <template #title>Settings</template>
+          <p>Configure your settings here.</p>
+        </Tab>
+      </Tabs>
+    </Variant>
+
+    <Variant title="Bottom placement" id="bottom">
+      <Tabs v-model="activeBottom" variant="border" placement="bottom">
+        <Tab value="tab1" title="Tab 1">
+          <p>Content of Tab 1.</p>
+        </Tab>
+        <Tab value="tab2" title="Tab 2">
+          <p>Content of Tab 2.</p>
+        </Tab>
+        <Tab value="tab3" title="Tab 3">
+          <p>Content of Tab 3.</p>
+        </Tab>
+      </Tabs>
+    </Variant>
+
+    <Variant title="Sizes" id="sizes">
+      <div class="flex flex-col gap-4">
+        <Tabs v-for="size in ['xs', 'sm', 'md', 'lg', 'xl']" :key="size" :size="size" variant="lift">
+          <Tab value="a" :title="size" active>Active</Tab>
+          <Tab value="b" title="Tab">Normal</Tab>
+        </Tabs>
+      </div>
+    </Variant>
+
+    <Variant title="Disabled" id="disabled">
+      <Tabs variant="lift">
+        <Tab value="a" title="Active" active>Content</Tab>
+        <Tab value="b" title="Disabled" disabled>Hidden</Tab>
+        <Tab value="c" title="Normal">Content</Tab>
+      </Tabs>
+    </Variant>
+
+    <Variant title="Router mode" id="router">
+      <template #source>
+        <textarea v-pre>
+          <Tabs variant="border">
+            <Tab to="/home" title="Home" />
+            <Tab to="/profile" title="Profile" />
+            <Tab to="/settings" title="Settings" />
+          </Tabs>
+        </textarea>
+      </template>
+      <Tabs variant="border">
+        <Tab to="#" title="Home" />
+        <Tab to="#" title="Profile" />
+        <Tab to="#" title="Settings" />
+      </Tabs>
+    </Variant>
+
+  </Story>
+</template>
+
+<docs lang="md">
+# Tab
+
+## Description
+
+Tabs component for switching between views. Each `<Tab />` renders both the tab button and its content panel as adjacent elements — matching DaisyUI's structure.
+
+Supports two modes:
+- **Controlled mode** (`v-model`): First tab is active by default. Click switches tabs via JS.
+- **Router mode** (`to` prop): Each `Tab` renders as a `RouterLink`. Content is provided by `<RouterView />`.
+
+## API
+
+### Tabs (container)
+
+| Prop        | Type           | Default     | Configurable       | Description                                                           |
+|-------------|----------------|-------------|--------------------|-----------------------------------------------------------------------|
+| `v-model`   | `string`       | `undefined` | :x:                | Active tab value. When omitted, first tab with `active` prop is used. |
+| `variant`   | `TabVariant`   | `undefined` | :white_check_mark: | Visual style: `'border'`, `'lift'`, `'box'`.                          |
+| `size`      | `TabSize`      | `'md'`      | :white_check_mark: | Tab size.                                                             |
+| `placement` | `TabPlacement` | `'top'`     | :white_check_mark: | Tabs position: `'top'`, `'bottom'`.                                   |
+
+### Tab (item)
+
+| Prop       | Type         | Default     | Description                                                     |
+|------------|--------------|-------------|-----------------------------------------------------------------|
+| `value`    | `string`     | `undefined` | Tab identifier — matches `v-model` on parent `<Tabs />`.        |
+| `title`    | `string`     | `undefined` | Tab header label. Use `#title` slot for rich content.           |
+| `active`   | `boolean`    | `false`     | Initial active state hint (ignored once context is set).        |
+| `disabled` | `boolean`    | `false`     | Disables the tab.                                               |
+| `icon`     | `Component`  | `undefined` | Icon displayed before the label.                                |
+| `to`       | `string`     | `undefined` | Router target. Renders as `RouterLink`; no content panel shown. |
+
+### Slots
+
+| Slot      | Component | Description                                              |
+|-----------|-----------|----------------------------------------------------------|
+| `default` | `Tabs`    | `Tab` items.                                             |
+| `default` | `Tab`     | Content panel shown when tab is active.                  |
+| `title`   | `Tab`     | Tab header label (overrides `title` prop, rich content). |
+| `icon`    | `Tab`     | Icon content (overrides `icon` prop).                    |
+
+## Usage
+
+```vue
+<!-- Controlled mode (v-model) -->
+<Tabs v-model="activeTab" variant="lift">
+  <Tab value="home" title="Home">
+    Home content here
+  </Tab>
+  <Tab value="profile">
+    <template #title>Profile <span class="badge">New</span></template>
+    Profile content here
+  </Tab>
+</Tabs>
+
+<!-- Router mode -->
+<Tabs variant="border">
+  <Tab to="/home" title="Home" />
+  <Tab to="/profile" title="Profile" />
+</Tabs>
+<RouterView />
+```
+</docs>

package/src/components/navigation/tab/Tab.vue

@@ -0,0 +1,106 @@
+<script lang="ts">
+import { useComponentConfig } from '@/composables/use-component-config'
+import { computed, inject, useSlots, useTemplateRef } from 'vue'
+import { RouterLink, useLink } from 'vue-router'
+import { TAB_CONFIG, TABS_CONTEXT } from './tab.context'
+import type { TabProps } from './tab.props'
+</script>
+
+<script setup lang="ts">
+const props = defineProps<TabProps>()
+const config = useComponentConfig(TAB_CONFIG, props, {})
+const tabsContext = inject(TABS_CONTEXT, null)
+const slots = useSlots()
+
+if (tabsContext && props.value !== undefined) {
+  tabsContext.register(props.value, !!props.active)
+}
+
+const tag = computed(() => {
+  if (!props.to) {
+    return 'button'
+  }
+
+  if (props.to.startsWith('#')) {
+    return 'a'
+  }
+
+  return RouterLink
+})
+
+const attr = computed(() => {
+  if (tag.value === 'button') {
+    return {}
+  }
+
+  if (tag.value === 'a') {
+    return { href: props.to }
+  }
+
+  return { to: props.to }
+})
+
+const isRouterActive = computed(() => {
+  if (!props.to || props.to === '#') {
+    return false
+  }
+
+  const { isExactActive } = useLink({ to: computed(() => props.to!) })
+  return isExactActive.value
+})
+
+const isActive = computed(() => {
+  if (tabsContext && props.value !== undefined) {
+    return tabsContext.activeValue.value === props.value
+  }
+
+  if (props.to) {
+    return isRouterActive.value
+  }
+
+  return config.value.active
+})
+
+const hasContent = computed(() => !!slots.default)
+
+function onClick() {
+  if (!props.to && tabsContext && props.value !== undefined) {
+    tabsContext.setActive(props.value)
+  }
+}
+
+const tabEl = useTemplateRef('tab-el')
+
+defineExpose({
+  $el: tabEl,
+  focus: () => tabEl.value?.focus(),
+})
+</script>
+
+<template>
+  <component
+    ref="tab-el"
+    :is="tag"
+    v-bind="attr"
+    role="tab"
+    class="tab"
+    :class="{
+      'tab-active': isActive,
+      'tab-disabled': config.disabled
+    }"
+    :disabled="!props.to && config.disabled"
+    @click="onClick"
+  >
+    <slot name="icon">
+      <component v-if="config.icon" :is="config.icon" :size="16" class="me-2" />
+    </slot>
+    <slot name="title">{{ config.title }}</slot>
+  </component>
+  <div
+    v-if="hasContent"
+    class="tab-content bg-base-100 border-base-300 p-6"
+    :style="{ display: isActive ? 'block' : 'none' }"
+  >
+    <slot />
+  </div>
+</template>

package/src/components/navigation/tab/Tabs.vue

@@ -0,0 +1,76 @@
+<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 { onMounted, provide } from 'vue'
+import { TABS_CONFIG, TABS_CONTEXT } from './tab.context'
+import type { TabsProps } from './tab.props'
+import type { TabPlacement, TabSize, TabVariant } from './tab.types'
+
+const variants: ComponentClass<'tabs', TabVariant> = {
+  box: 'tabs-box',
+  border: 'tabs-border',
+  lift: 'tabs-lift',
+}
+
+const sizes: ComponentClass<'tabs', TabSize> = {
+  xs: 'tabs-xs',
+  sm: 'tabs-sm',
+  md: 'tabs-md',
+  lg: 'tabs-lg',
+  xl: 'tabs-xl',
+}
+
+const placements: ComponentClass<'tabs', TabPlacement> = {
+  top: 'tabs-top',
+  bottom: 'tabs-bottom',
+}
+</script>
+
+<script setup lang="ts">
+const model = defineModel<string>()
+const props = defineProps<TabsProps>()
+const config = useComponentConfig(TABS_CONFIG, props, {
+  size: 'md',
+  placement: 'top',
+})
+
+const registeredTabs: Array<{ value: string; initiallyActive: boolean }> = []
+
+provide(TABS_CONTEXT, {
+  activeValue: model,
+  setActive: (value) => { model.value = value },
+  register: (value, initiallyActive) => { registeredTabs.push({ value, initiallyActive }) },
+})
+
+onMounted(() => {
+  if (model.value !== undefined) {
+    return
+  }
+
+  const preSelected = registeredTabs.find(t => t.initiallyActive)
+
+  if (preSelected) {
+    model.value = preSelected.value
+    return
+  }
+
+  if (registeredTabs.length > 0) {
+    model.value = registeredTabs[0].value
+  }
+})
+</script>
+
+<template>
+  <div
+    role="tablist"
+    class="tabs"
+    :class="[
+      getClass(variants, config.variant),
+      getClass(sizes, config.size),
+      getClass(placements, config.placement),
+    ]"
+  >
+    <slot />
+  </div>
+</template>

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

@@ -0,0 +1,13 @@
+import { createComponentConfigKey } from '@/config/symbol'
+import type { InjectionKey, Ref } from 'vue'
+
+export const TABS_CONFIG = createComponentConfigKey('tabs')
+export const TAB_CONFIG = createComponentConfigKey('tab')
+
+export interface TabsContext {
+  activeValue: Ref<string | undefined>
+  setActive: (value: string) => void
+  register: (value: string, initiallyActive: boolean) => void
+}
+
+export const TABS_CONTEXT: InjectionKey<TabsContext> = Symbol('tabs')

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

@@ -0,0 +1,57 @@
+import type { Component } from 'vue'
+import type { TabPlacement, TabSize, TabVariant } from './tab.types'
+export interface TabsConfigurableProps {
+  /**
+   * Visual variant of the tabs.
+   * - `'box'`: Boxed variant
+   * - `'border'`: With bottom border
+   * - `'lift'`: Lifted variant
+   */
+  variant?: TabVariant
+  /**
+   * Size of the tabs.
+   *
+   * @default 'md'
+   */
+  size?: TabSize
+  /**
+   * Placement of the tabs relative to content.
+   * - `'top'`: Tabs on top (default)
+   * - `'bottom'`: Tabs on bottom
+   */
+  placement?: TabPlacement
+}
+export interface TabsProps extends TabsConfigurableProps {}
+// biome-ignore lint/suspicious/noEmptyInterface: Intentionally empty to allow future configurable props and global plugin configuration
+export interface TabConfigurableProps {}
+export interface TabProps extends TabConfigurableProps {
+  /**
+   * Unique value identifying this tab. Used with `v-model` on the parent `<Tabs>` for controlled mode.
+   */
+  value?: string
+  /**
+   * Tab header label. Rendered inside the tab button.
+   * Can also be set via the `#title` slot for rich content.
+   */
+  title?: string
+  /**
+   * Whether the tab is active. Auto-computed when `value` is set and a parent `<Tabs v-model>` exists.
+   *
+   * @default false
+   */
+  active?: boolean
+  /**
+   * Whether the tab is disabled.
+   *
+   * @default false
+   */
+  disabled?: boolean
+  /**
+   * Optional icon component displayed before the tab label.
+   */
+  icon?: Component
+  /**
+   * Navigation target (Vue Router location). When provided, renders as RouterLink.
+   */
+  to?: string
+}

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

@@ -0,0 +1,5 @@
+import type { ComponentSize } from '@/types/size.type'
+
+export type TabVariant = 'box' | 'border' | 'lift'
+export type TabPlacement = 'top' | 'bottom'
+export type TabSize = ComponentSize

package/src/composables/public.ts

@@ -0,0 +1,5 @@
+export * from './use-component-config'
+export * from './use-config'
+export * from './use-form-field'
+export * from './use-select-counter'
+export * from './use-toast'

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

@@ -0,0 +1,44 @@
+import { COMPONENT_SIZE } from '@/config/size.context'
+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 '@/config/size.context'
+import { inject } from 'vue'
+
+export function useSizeConfig() {
+  return inject(COMPONENT_SIZE, 'md')
+}

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

@@ -0,0 +1,99 @@
+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, onUnmounted, 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)
+  })
+
+  // Register this input's validator with the parent Form so it runs on submit
+  const validatorKey = Symbol()
+
+  onMounted(() => {
+    if (!field) return
+    field.registerValidator(validatorKey, () => {
+      field.setTouched(true)
+      return validate()
+    })
+  })
+
+  onUnmounted(() => {
+    field?.unregisterValidator(validatorKey)
+  })
+
+  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,
+  }
+}

package/src/composables/use-select-counter.ts

@@ -0,0 +1,58 @@
+import type { CounterFn } from '@/types/utils.type'
+import { computed, type Ref } from 'vue'
+
+export function useSelectCounter(
+  selectedCount: Ref<number>,
+  options: {
+    multiple?: Ref<boolean | undefined>
+    min?: Ref<number | undefined>
+    max?: Ref<number | undefined>
+    formatter?: Ref<CounterFn | undefined>
+  },
+) {
+  const counterText = computed(() => {
+    if (!options.multiple?.value) {
+      return null
+    }
+
+    if (!options.min?.value && !options.max?.value) {
+      return null
+    }
+
+    if (options.formatter?.value) {
+      return options.formatter.value(selectedCount.value, options.min?.value, options.max?.value)
+    }
+
+    if (options.max?.value) {
+      return `${selectedCount.value} / ${options.max.value}`
+    }
+
+    return `${selectedCount.value}`
+  })
+
+  const counterColor = computed(() => {
+    if (options.max?.value && selectedCount.value > options.max.value) {
+      return 'text-error'
+    }
+
+    if (options.min?.value && selectedCount.value < options.min.value) {
+      return 'text-warning'
+    }
+
+    return 'opacity-40'
+  })
+
+  const isAtMax = computed(() => {
+    if (!options.max?.value || !options.multiple?.value) {
+      return false
+    }
+
+    return selectedCount.value >= options.max.value
+  })
+
+  return {
+    counterText,
+    counterColor,
+    isAtMax,
+  }
+}