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

package/src/composables/use-toast.ts

@@ -0,0 +1,47 @@
+import type { ToastColor } from '@/components/feedback/public.types'
+import { TOAST_CONTEXT_KEY } from '@/components/feedback/toast/toast.context'
+import { inject, ref } from 'vue'
+
+export type ToastItem = {
+  id: number
+  message: string
+  color?: ToastColor
+  duration?: number
+}
+
+/**
+ * Composable to push and dismiss toast notifications.
+ *
+ * Must be used inside a component tree wrapped by `<PoppyApp>`,
+ * which provides the toast context via `provide()`.
+ *
+ * @nuxt-safe — State lives in the component tree via provide/inject,
+ * avoiding module-level singletons that would be shared across SSR requests.
+ *
+ * @example
+ * const { push, dismiss } = useToast()
+ * push('Saved!', { color: 'success' })
+ */
+export function useToast() {
+  const ctx = inject(TOAST_CONTEXT_KEY, null)
+
+  if (!ctx) {
+    // Fallback for usage outside PoppyApp (e.g. unit tests, Storybook variants)
+    const toasts = ref<ToastItem[]>([])
+    let nextId = 0
+
+    function push(message: string, options?: Partial<Omit<ToastItem, 'id' | 'message'>>) {
+      const item: ToastItem = { id: nextId++, message, duration: 3000, ...options }
+      toasts.value.push(item)
+      if (item.duration) setTimeout(() => dismiss(item.id), item.duration)
+    }
+
+    function dismiss(id: number) {
+      toasts.value = toasts.value.filter(t => t.id !== id)
+    }
+
+    return { toasts, push, dismiss }
+  }
+
+  return ctx
+}

package/src/config/config.type.ts

@@ -0,0 +1,109 @@
+import type { ButtonConfigurableProps } from '@/components/actions/button/button.props'
+import type { DropdownConfigurableProps } from '@/components/actions/dropdown/dropdown.props'
+import type { FabConfigurableProps } from '@/components/actions/fab/fab.props'
+import type { ModalConfigurableProps } from '@/components/actions/modal/modal.props'
+import type { SwapConfigurableProps } from '@/components/actions/swap/swap.props'
+import type { CheckboxConfigurableProps } from '@/components/data/checkbox/checkbox.props'
+import type { FormConfigurableProps } from '@/components/data/form/form.props'
+import type { FormFieldConfigurableProps } from '@/components/data/form-field/form-field.props'
+import type { InputConfigurableProps } from '@/components/data/input/input.props'
+import type { RadioConfigurableProps } from '@/components/data/radio/radio.props'
+import type { RatingConfigurableProps } from '@/components/data/rating/rating.props'
+import type { SelectConfigurableProps } from '@/components/data/select/select.props'
+import type { SliderConfigurableProps } from '@/components/data/slider/slider.props'
+import type { TextareaConfigurableProps } from '@/components/data/textarea/textarea.props'
+import type { ToggleConfigurableProps } from '@/components/data/toggle/toggle.props'
+import type { AccordionItemConfigurableProps } from '@/components/display/accordion/accordion-item.props'
+import type { AvatarConfigurableProps } from '@/components/display/avatar/avatar.props'
+import type { BadgeConfigurableProps } from '@/components/display/badge/badge.props'
+import type { CardConfigurableProps } from '@/components/display/card/card.props'
+import type { CardActionsConfigurableProps } from '@/components/display/card/card-actions.props'
+import type { CarouselConfigurableProps } from '@/components/display/carousel/carousel.props'
+import type { ChatConfigurableProps } from '@/components/display/chat/chat.props'
+import type { CountdownConfigurableProps } from '@/components/display/countdown/countdown.props'
+import type { KbdConfigurableProps } from '@/components/display/kbd/kbd.props'
+import type { StatConfigurableProps } from '@/components/display/stat/stat.props'
+import type { StatsConfigurableProps } from '@/components/display/stat/stats.props'
+import type { StatusConfigurableProps } from '@/components/display/status/status.props'
+import type { AlertConfigurableProps } from '@/components/feedback/alert/alert.props'
+import type { LoadingConfigurableProps } from '@/components/feedback/loading/loading.props'
+import type { ProgressConfigurableProps } from '@/components/feedback/progress/progress.props'
+import type { RadialProgressConfigurableProps } from '@/components/feedback/radial-progress/radial-progress.props'
+import type { ToastConfigurableProps } from '@/components/feedback/toast/toast.props'
+import type { TooltipConfigurableProps } from '@/components/feedback/tooltip/tooltip.props'
+import type { DividerConfigurableProps } from '@/components/layout/divider/divider.props'
+import type { DrawerConfigurableProps } from '@/components/layout/drawer/drawer.props'
+import type { IndicatorConfigurableProps } from '@/components/layout/indicator/indicator.props'
+import type { JoinConfigurableProps } from '@/components/layout/join/join.props'
+import type { MaskConfigurableProps } from '@/components/layout/mask/mask.props'
+import type { StackConfigurableProps } from '@/components/layout/stack/stack.props'
+import type { ImgConfigurableProps } from '@/components/media/img/img.props'
+import type { BreadcrumbsConfigurableProps } from '@/components/navigation/breadcrumbs/breadcrumbs.props'
+import type { DockConfigurableProps, DockItemConfigurableProps } from '@/components/navigation/dock/dock.props'
+import type { LinkConfigurableProps } from '@/components/navigation/link/link.props'
+import type { MenuConfigurableProps, MenuItemConfigurableProps } from '@/components/navigation/menu/menu.props'
+import type { TabConfigurableProps, TabsConfigurableProps } from '@/components/navigation/tab/tab.props'
+
+export interface PoppyComponentConfig {
+  // Actions
+  button: ButtonConfigurableProps
+  dropdown: DropdownConfigurableProps
+  fab: FabConfigurableProps
+  modal: ModalConfigurableProps
+  swap: SwapConfigurableProps
+
+  // Data
+  checkbox: CheckboxConfigurableProps
+  form: FormConfigurableProps
+  formField: FormFieldConfigurableProps
+  radio: RadioConfigurableProps
+  rating: RatingConfigurableProps
+  input: InputConfigurableProps
+  select: SelectConfigurableProps
+  slider: SliderConfigurableProps
+  textarea: TextareaConfigurableProps
+  toggle: ToggleConfigurableProps
+
+  // Display
+  accordionItem: AccordionItemConfigurableProps
+  avatar: AvatarConfigurableProps
+  badge: BadgeConfigurableProps
+  card: CardConfigurableProps
+  cardActions: CardActionsConfigurableProps
+  carousel: CarouselConfigurableProps
+  chat: ChatConfigurableProps
+  countdown: CountdownConfigurableProps
+  kbd: KbdConfigurableProps
+  stat: StatConfigurableProps
+  stats: StatsConfigurableProps
+  status: StatusConfigurableProps
+
+  // Feedback
+  alert: AlertConfigurableProps
+  loading: LoadingConfigurableProps
+  progress: ProgressConfigurableProps
+  radialProgress: RadialProgressConfigurableProps
+  toast: ToastConfigurableProps
+  tooltip: TooltipConfigurableProps
+
+  // Layout
+  divider: DividerConfigurableProps
+  drawer: DrawerConfigurableProps
+  indicator: IndicatorConfigurableProps
+  join: JoinConfigurableProps
+  mask: MaskConfigurableProps
+  stack: StackConfigurableProps
+
+  // Navigation
+  breadcrumbs: BreadcrumbsConfigurableProps
+  dock: DockConfigurableProps
+  dockItem: DockItemConfigurableProps
+  link: LinkConfigurableProps
+  menu: MenuConfigurableProps
+  menuItem: MenuItemConfigurableProps
+  tab: TabConfigurableProps
+  tabs: TabsConfigurableProps
+
+  // Media
+  img: ImgConfigurableProps
+}

package/src/config/public.ts

@@ -0,0 +1,2 @@
+export * from './size.context'
+export * from './symbol'

package/src/config/public.types.ts

@@ -0,0 +1 @@
+export * from './config.type'

package/src/config/size.context.ts

@@ -0,0 +1,4 @@
+import type { ComponentSize } from '@/types/size.type'
+import type { InjectionKey } from 'vue'
+
+export const COMPONENT_SIZE = Symbol('pop-component--size') as InjectionKey<ComponentSize>

package/src/config/symbol.ts

@@ -0,0 +1,15 @@
+import type { PoppyComponentConfig } from '@/config/config.type'
+import type { InjectionKey } from 'vue'
+
+const knownComponentConfigKeys = new Map<keyof PoppyComponentConfig, InjectionKey<unknown>>()
+
+export function createComponentConfigKey<K extends keyof PoppyComponentConfig>(name: K) {
+  type Key = InjectionKey<Partial<PoppyComponentConfig[K]>>
+
+  if (!knownComponentConfigKeys.has(name)) {
+    const key = Symbol(`config-${String(name)}`) as Key
+    knownComponentConfigKeys.set(name, key)
+  }
+
+  return knownComponentConfigKeys.get(name) as Key
+}

package/src/histoire.css

@@ -0,0 +1,8 @@
+@import "tailwindcss";
+
+@plugin "daisyui" {
+  logs: false;
+  themes:
+    light --default,
+    dark;
+}

package/src/plugin-vue.ts

@@ -0,0 +1,54 @@
+import type { App } from 'vue'
+import type { PoppyComponentConfig } from './config/config.type'
+import { COMPONENT_SIZE } from './config/size.context'
+import { createComponentConfigKey } from './config/symbol'
+import type { ComponentSize } from './types/size.type'
+
+type Plugin<T> = import('vue').Plugin<T>
+
+declare global {
+  export interface Window {
+    /**
+     * Poppy UI plugin options for debugging purposes. This is only set if the `debug` option is enabled when installing the plugin.
+     *
+     * @since 0.0.0
+     */
+    __POPPY_UI_PLUGIN_OPTIONS__?: PluginOptions
+  }
+}
+
+export interface PluginOptions {
+  /**
+   * Default size for all components. This will be used as the default size for any component that doesn't have a specific size prop set. You can override this default size on a per-component basis by providing specific configurations in the `components` option or by passing the `size` prop directly to individual components.
+   * @since 0.0.0
+   */
+  size?: ComponentSize
+
+  /**
+   * Component-specific default configurations. You can specify default props for each component here, which will be merged with the props passed directly to the component. This allows you to set global defaults for your components while still allowing individual instances to override them as needed.
+   * @since 0.0.0
+   */
+  components?: Partial<PoppyComponentConfig>
+
+  /**
+   * Allows you to enable debug mode, which will log the plugin options to the console and expose them on the `window` object for easier debugging.
+   * @since 0.0.0
+   */
+  debug?: true
+}
+
+export const PoppyUi = {
+  install(app: App, options: PluginOptions = {}) {
+    app.provide(COMPONENT_SIZE, options?.size || 'md')
+
+    for (const [componentName, componentConfig] of Object.entries(options?.components || {})) {
+      const key = createComponentConfigKey(componentName as keyof PoppyComponentConfig)
+      app.provide(key, componentConfig as never)
+    }
+
+    if (options?.debug) {
+      window.__POPPY_UI_PLUGIN_OPTIONS__ = options
+      console.log('Poppy UI Plugin Options:', options)
+    }
+  },
+} as Plugin<[PluginOptions?]>

package/src/public.ts

@@ -0,0 +1,12 @@
+import { PoppyUi } from './plugin-vue'
+
+export default PoppyUi
+export * from './components/actions/public.types'
+export * from './components/data/public.types'
+export * from './components/display/public.types'
+export * from './components/feedback/public.types'
+export * from './components/layout/public.types'
+export * from './components/media/public.types'
+export * from './components/navigation/public.types'
+export * from './config/public.types'
+export type { PluginOptions } from './plugin-vue'

package/src/stories/Configuration.story.md

@@ -0,0 +1,55 @@
+---
+group: 'top'
+title: 'Configuration'
+icon: 'lucide:settings'
+---
+
+# Plugin Configuration
+
+## Overview
+
+The `PoppyUi` plugin is installed once in `main.ts` and lets you define global defaults
+for every component. This avoids prop-drilling and keeps your design tokens consistent
+across the entire application.
+
+```ts
+// main.ts
+import { createApp } from 'vue'
+import { PoppyUi } from '@poppy-ui/vue'
+import App from './App.vue'
+
+createApp(App)
+  .use(PoppyUi, {
+    size: 'md',
+    components: {
+      button: {
+        color: 'primary',
+        variant: 'solid',
+      },
+    },
+  })
+  .mount('#app')
+```
+
+## Options
+
+| Option       | Type                   | Default     | Description                                                                       |
+|--------------|------------------------|-------------|-----------------------------------------------------------------------------------|
+| `size`       | `ComponentSize`        | `'md'`      | Global size fallback for all components.                                          |
+| `components` | `PoppyComponentConfig` | `{}`        | Per-component default configurable props.                                         |
+| `debug`      | `true`                 | `undefined` | Logs options to console and exposes them on `window.__POPPY_UI_PLUGIN_OPTIONS__`. |
+
+## Priority order
+
+When resolving a prop value, the following priority applies (highest to lowest):
+
+1. Prop passed directly to the component instance
+2. `components.[name]` in plugin options
+3. Global `size` in plugin options
+4. Component's own internal default
+
+## Configurable props
+
+Only props marked **Configurable :white_check_mark:** in each component's documentation can be set
+via the plugin. Non-configurable props (e.g. `disabled`, `loading`, `type`) must always
+be passed directly to the component instance.

package/src/types/public.ts

@@ -0,0 +1,2 @@
+export * from './size.type'
+export * from './utils.type'

package/src/types/size.type.ts

@@ -0,0 +1 @@
+export type ComponentSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'

package/src/types/utils.type.ts

@@ -0,0 +1,5 @@
+export type ComponentClass<Prefix extends string, Keys extends string> = {
+  [K in Keys]: `${Prefix}-${K}`
+}
+
+export type CounterFn = (current: number, min?: number, max?: number) => string

package/src/utils/build-class.util.ts

@@ -0,0 +1,38 @@
+import { twMerge } from 'tailwind-merge'
+import type { ClassValue } from 'vue'
+
+export function getClass<T extends string = string>(values: Record<T, string>, key: T | undefined) {
+  if (key === undefined) {
+    return undefined
+  }
+  return values[key]
+}
+
+function normalize(input: ClassValue): string {
+  if (!input) return ''
+
+  if (typeof input === 'string') return input
+
+  if (Array.isArray(input)) {
+    return input.map(normalize).filter(Boolean).join(' ')
+  }
+
+  if (typeof input === 'object') {
+    return Object.entries(input)
+      .filter(([, value]) => Boolean(value))
+      .map(([key]) => key)
+      .join(' ')
+  }
+
+  return ''
+}
+
+function dedupe(classStr: string): string {
+  return [...new Set(classStr.split(/\s+/))].join(' ')
+}
+
+export function clsx(...inputs: ClassValue[]) {
+  const merged = twMerge(inputs.map(normalize).filter(Boolean).join(' '))
+
+  return dedupe(merged)
+}

package/src/utils/get-validation-message.ts

@@ -0,0 +1,61 @@
+type ValidationElement = HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement
+type ValidationAnyElement = HTMLElement & {
+  validity: ValidityState
+  checkValidity: () => boolean
+  value: string
+  getAttribute: (name: string) => string | null
+  validationMessage: string
+}
+
+/**
+ * Reads element's validity state and returns a localized validation message.
+ * Returns null when element is valid.
+ *
+ * This is a factory function that takes a translation function (t) from vue-i18n.
+ * The consumer is responsible for providing the translation function.
+ *
+ * @param el - The input/textarea/select element to check
+ * @param t - Translation function from vue-i18n's useI18n()
+ * @returns Localized error message or null if valid
+ */
+export function getValidationMessage(
+  el: ValidationElement | ValidationAnyElement,
+  t: (key: string, params?: Record<string, string | number>, fallback?: string) => string,
+): string | null {
+  if (el.validity.valid) return null
+
+  const validity = el.validity
+
+  if (validity.valueMissing) return t('common.validation.required')
+  if (validity.typeMismatch) {
+    const type = el.getAttribute('type') || 'default'
+    return t(`common.validation.format.${type}`, {}, t('common.validation.format.default'))
+  }
+  if (validity.tooShort) {
+    const min = el.getAttribute('minLength')
+    return t('common.validation.minLength', { min: min || '0' })
+  }
+  if (validity.tooLong) {
+    const max = el.getAttribute('maxLength')
+    return t('common.validation.maxLength', { max: max || '0' })
+  }
+  if (validity.rangeUnderflow) {
+    const min = el.getAttribute('min')
+    return t('common.validation.min', { min: min || '0' })
+  }
+  if (validity.rangeOverflow) {
+    const max = el.getAttribute('max')
+    return t('common.validation.max', { max: max || '0' })
+  }
+  if (validity.patternMismatch) {
+    const title = el.getAttribute('title')
+    if (title) return title
+    return t('common.validation.pattern')
+  }
+  if (validity.stepMismatch) return t('common.validation.stepMismatch')
+  if (validity.badInput) return t('common.validation.badInput')
+  if (validity.customError) return el.validationMessage || t('common.validation.customError')
+
+  // Fallback to browser's validation message
+  return el.validationMessage || null
+}

package/src/utils/path.ts

@@ -0,0 +1,102 @@
+/**
+ * Gets a value from an object using a dot-notation path.
+ * Supports nested objects and array indices.
+ *
+ * @example
+ * getByPath({ a: { b: 1 } }, 'a.b') // returns 1
+ * getByPath({ users: [{ name: 'John' }] }, 'users.0.name') // returns 'John'
+ */
+export function getByPath(obj: Record<string, unknown>, path: string): unknown {
+  if (!obj || !path) return undefined
+
+  const keys = parsePath(path)
+  let current: unknown = obj
+
+  for (const key of keys) {
+    if (current === null || current === undefined) {
+      return undefined
+    }
+
+    if (typeof current !== 'object') {
+      return undefined
+    }
+
+    current = (current as Record<string, unknown>)[key]
+  }
+
+  return current
+}
+
+/**
+ * Sets a value in an object using a dot-notation path.
+ * Creates intermediate objects/arrays as needed.
+ * Supports nested objects and array indices.
+ *
+ * @example
+ * setByPath({}, 'a.b', 1) // returns { a: { b: 1 } }
+ * setByPath({ users: [] }, 'users.0.name', 'John') // returns { users: [{ name: 'John' }] }
+ */
+export function setByPath(obj: Record<string, unknown>, path: string, value: unknown): void {
+  if (!path) return
+
+  const keys = parsePath(path)
+  let current: Record<string, unknown> = obj
+
+  for (let i = 0; i < keys.length - 1; i++) {
+    const key = keys[i]
+    const nextKey = keys[i + 1]
+
+    if (current[key] === undefined) {
+      // Create array if next key is numeric
+      if (isNumericKey(nextKey)) {
+        current[key] = []
+      } else {
+        current[key] = {}
+      }
+    }
+
+    if (typeof current[key] !== 'object' || current[key] === null) {
+      // Overwrite with array if next key is numeric
+      if (isNumericKey(nextKey)) {
+        current[key] = []
+      } else {
+        current[key] = {}
+      }
+    }
+
+    current = current[key] as Record<string, unknown>
+  }
+
+  const lastKey = keys[keys.length - 1]
+  if (isNumericKey(lastKey)) {
+    const arr = current as unknown as unknown[]
+    const index = Number.parseInt(lastKey, 10)
+    // Expand array if needed
+    while (arr.length <= index) {
+      arr.push(undefined)
+    }
+    arr[index] = value
+  } else {
+    current[lastKey] = value
+  }
+}
+
+/**
+ * Parses a dot-notation path into an array of keys.
+ * Handles array indices (e.g., 'users.0.name' -> ['users', '0', 'name'])
+ */
+function parsePath(path: string): string[] {
+  // Handle empty path
+  if (!path.trim()) return []
+
+  // Split by dots, but preserve empty strings for consecutive dots
+  // Then filter out empty strings
+  return path.split('.').filter(key => key !== '')
+}
+
+/**
+ * Checks if a key is a numeric index (for arrays).
+ */
+function isNumericKey(key: string): boolean {
+  return /^\d+$/.test(key)
+}

package/src/utils/props.util.ts

@@ -0,0 +1,11 @@
+export function mergeProps<T extends Record<string, any>, U extends Record<string, any>>(
+  componentProps: T,
+  config: U,
+): T & U {
+  const cleanProps = Object.fromEntries(Object.entries(componentProps).filter(([_, v]) => v !== undefined))
+
+  return {
+    ...config,
+    ...cleanProps,
+  } as T & U
+}

package/src/utils/public.ts

@@ -0,0 +1 @@
+export {}

package/src/vite-env.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="vite/client" />
+/// <reference types="@histoire/plugin-vue/components" />
+/** biome-ignore-all lint/suspicious/noExplicitAny: Define Vue component */
+/** biome-ignore-all lint/complexity/noBannedTypes: Define Vue component */
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

package/src/vue.d.ts

@@ -0,0 +1,15 @@
+import 'vue'
+
+// Patch vue event
+declare module 'vue' {
+  interface InputHTMLAttributes {
+    onChange?: (event: ChangeEvent & { target: HTMLInputElement }) => void
+    onInput?: (event: InputEvent & { target: HTMLInputElement }) => void
+    onFocus?: (event: FocusEvent & { target: HTMLInputElement }) => void
+    onPointerdown?: (event: PointerEvent & { target: HTMLInputElement }) => void
+    onPointerup?: (event: PointerEvent & { target: HTMLInputElement }) => void
+  }
+  interface SelectHTMLAttributes {
+    onChange?: (event: Event & { target: HTMLSelectElement }) => void
+  }
+}