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

package/src/components/feedback/toast/Toast.vue

@@ -0,0 +1,40 @@
+<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 { TOAST_CONFIG } from './toast.context'
+import type { ToastProps } from './toast.props'
+import type { ToastAlign, ToastSide } from './toast.types'
+
+const toastAligns: ComponentClass<'toast', ToastAlign> = {
+  start: 'toast-start',
+  center: 'toast-center',
+  end: 'toast-end',
+}
+
+const toastSides: ComponentClass<'toast', ToastSide> = {
+  top: 'toast-top',
+  middle: 'toast-middle',
+  bottom: 'toast-bottom',
+}
+</script>
+
+<script setup lang="ts">
+const props = defineProps<ToastProps>()
+const config = useComponentConfig(TOAST_CONFIG, props, {
+  align: 'end',
+  side: 'bottom',
+})
+</script>
+
+<template>
+  <div
+    class="toast"
+    :class="[
+      getClass(toastAligns, config.align),
+      getClass(toastSides, config.side),
+    ]"
+  >
+    <slot />
+  </div>
+</template>

package/src/components/feedback/toast/toast.context.ts

@@ -0,0 +1,12 @@
+import type { ToastItem } from '@/composables/use-toast'
+import { createComponentConfigKey } from '@/symbol'
+import type { InjectionKey } from 'vue'
+
+export const TOAST_CONFIG = createComponentConfigKey('toast')
+
+export type ToastContext = {
+  push: (message: string, options?: Partial<Omit<ToastItem, 'id' | 'message'>>) => void
+  dismiss: (id: number) => void
+}
+
+export const TOAST_CONTEXT_KEY = Symbol('toast') as InjectionKey<ToastContext>

package/src/components/feedback/toast/toast.props.ts

@@ -0,0 +1,33 @@
+import type { ToastAlign, ToastSide } from './toast.types'
+
+export interface ToastConfigurableProps {
+  /**
+   * Horizontal position of the toast container.
+   * - `'start'`: Left in LTR, right in RTL.
+   * - `'center'`: Centered horizontally.
+   * - `'end'`: Right in LTR, left in RTL.
+   *
+   * @default 'end'
+   */
+  align?: ToastAlign
+
+  /**
+   * Vertical position of the toast container.
+   * - `'top'`: Anchored to the top of the viewport.
+   * - `'middle'`: Centered vertically.
+   * - `'bottom'`: Anchored to the bottom of the viewport.
+   *
+   * @default 'bottom'
+   */
+  side?: ToastSide
+
+  /**
+   * Default duration in milliseconds before a toast is automatically dismissed.
+   * Set to `0` to disable auto-dismiss.
+   *
+   * @default 3000
+   */
+  duration?: number
+}
+
+export interface ToastProps extends ToastConfigurableProps {}

package/src/components/feedback/toast/toast.types.ts

@@ -0,0 +1,5 @@
+import type { AlertColor } from '@/components/feedback/alert/alert.types'
+
+export type ToastAlign = 'start' | 'center' | 'end'
+export type ToastSide = 'top' | 'middle' | 'bottom'
+export type ToastColor = AlertColor

package/src/components/feedback/tooltip/Tooltip.story.vue

@@ -0,0 +1,256 @@
+<script lang="ts">
+import Button from '@/components/actions/button/Button.vue'
+import Tooltip from './Tooltip.vue'
+import type { TooltipProps } from './tooltip.props'
+</script>
+
+<script lang="ts" setup>
+import { reactive } from 'vue'
+
+const state = reactive<TooltipProps>({
+  tip: 'Hello, I am a tooltip!',
+  placement: 'top',
+  color: undefined,
+  open: false,
+  disabled: false,
+  as: 'div',
+})
+</script>
+
+<template>
+  <Story group="components" title="Feedback/Tooltip" auto-props-disabled>
+    <template #default>
+
+      <Variant title="Default">
+        <template #controls>
+          <HstText title="Tip" v-model="state.tip" />
+          <HstSelect title="Placement" v-model="state.placement" :options="['top', 'bottom', 'left', 'right']" />
+          <HstSelect title="Color" v-model="state.color" :options="[undefined, 'neutral', 'primary', 'secondary', 'accent', 'info', 'success', 'warning', 'error']" />
+          <HstSelect title="As" v-model="state.as" :options="['div', 'span', 'button']" />
+          <HstCheckbox title="Open" v-model="state.open" />
+          <HstCheckbox title="Disabled" v-model="state.disabled" />
+        </template>
+
+        <template #source>
+          <textarea v-pre>
+            <Tooltip tip="Hello, I am a tooltip!" placement="top">
+              <Button>Hover me</Button>
+            </Tooltip>
+          </textarea>
+        </template>
+
+        <div class="tooltip-story tooltip-story--center">
+          <Tooltip v-bind="state">
+            <Button>Hover me</Button>
+          </Tooltip>
+        </div>
+      </Variant>
+
+      <Variant title="Placements">
+        <div class="tooltip-story tooltip-story--placements">
+          <div v-for="placement in (['top', 'bottom', 'left', 'right'])" :key="placement" class="tooltip-story--item">
+            <span class="tooltip-story--label">{{ placement }}</span>
+            <Tooltip :placement="placement" :tip="`Tooltip ${placement}`">
+              <Button variant="outline" size="sm">{{ placement }}</Button>
+            </Tooltip>
+          </div>
+        </div>
+      </Variant>
+
+      <Variant title="Colors">
+        <div class="tooltip-story tooltip-story--placements">
+          <div v-for="color in (['neutral', 'primary', 'secondary', 'accent', 'info', 'success', 'warning', 'error'])" :key="color" class="tooltip-story--item">
+            <Tooltip :color="color" :tip="color">
+              <Button :color="color" size="sm">Hover</Button>
+            </Tooltip>
+            <span class="tooltip-story--label">{{ color }}</span>
+          </div>
+        </div>
+      </Variant>
+
+      <Variant title="Always open">
+        <template #source>
+          <textarea v-pre>
+            <Tooltip tip="Always visible" :open="true">
+              <Button>Trigger</Button>
+            </Tooltip>
+          </textarea>
+        </template>
+
+        <div class="tooltip-story tooltip-story--center">
+          <Tooltip tip="Always visible" :open="true">
+            <Button>Trigger</Button>
+          </Tooltip>
+        </div>
+      </Variant>
+
+      <Variant title="Disabled">
+        <template #source>
+          <textarea v-pre>
+            <Tooltip tip="You won't see me" :disabled="true">
+              <Button>Hover me — no tooltip</Button>
+            </Tooltip>
+          </textarea>
+        </template>
+
+        <div class="tooltip-story tooltip-story--center">
+          <Tooltip tip="You won't see me" :disabled="true">
+            <Button>Hover me — no tooltip</Button>
+          </Tooltip>
+        </div>
+      </Variant>
+
+      <Variant title="Content slot">
+        <template #source>
+          <textarea v-pre>
+            <Tooltip color="primary">
+              <template #content>
+                <strong>Rich content</strong> with <em>HTML</em>
+              </template>
+              <Button>Hover for rich tooltip</Button>
+            </Tooltip>
+          </textarea>
+        </template>
+
+        <div class="tooltip-story tooltip-story--center">
+          <Tooltip color="primary">
+            <template #content>
+              <strong>Rich content</strong> with <em>HTML</em>
+            </template>
+            <Button>Hover for rich tooltip</Button>
+          </Tooltip>
+        </div>
+      </Variant>
+
+      <Variant title="As prop">
+        <template #source>
+          <textarea v-pre>
+            <!-- Wrap a span instead of a div -->
+            <Tooltip tip="Wrapped in a span" as="span">
+              <Badge color="primary">Hover me</Badge>
+            </Tooltip>
+          </textarea>
+        </template>
+
+        <div class="tooltip-story tooltip-story--placements">
+          <div class="tooltip-story--item">
+            <Tooltip tip="Wrapped in a div" as="div">
+              <Button size="sm">Hover me</Button>
+            </Tooltip>
+            <span class="tooltip-story--label">as="div" (default)</span>
+          </div>
+          <div class="tooltip-story--item">
+            <Tooltip tip="Wrapped in a span" as="span">
+              <Button size="sm">Hover me</Button>
+            </Tooltip>
+            <span class="tooltip-story--label">as="span"</span>
+          </div>
+        </div>
+      </Variant>
+
+    </template>
+  </Story>
+</template>
+
+<style scoped>
+.tooltip-story {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1.5rem;
+}
+
+.tooltip-story--center {
+  justify-content: center;
+  padding: 3rem;
+}
+
+.tooltip-story--row {
+  align-items: flex-end;
+}
+
+.tooltip-story--placements {
+  justify-content: center;
+  padding: 3rem;
+  gap: 2rem;
+}
+
+.tooltip-story--item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+.tooltip-story--label {
+  font-size: 0.7rem;
+  color: #9ca3af;
+  font-family: monospace;
+}
+</style>
+
+<docs lang="md">
+# Tooltip
+
+## Description
+
+A floating label that appears on hover, anchored to a trigger element.
+Built on the native Popover API with CSS anchor positioning — the tooltip is teleported to `<body />`
+to avoid overflow/clipping issues regardless of the trigger's position in the DOM.
+
+## Props
+
+| Prop        | Type               | Default     | Required | Configurable       | Description                                                                  |
+|-------------|--------------------|-------------|----------|--------------------|------------------------------------------------------------------------------|
+| `tip`       | `string`           | `undefined` | :x:      | :x:                | Text content of the tooltip. Can be overridden by the `content` slot.        |
+| `placement` | `TooltipPlacement` | `'top'`     | :x:      | :white_check_mark: | Placement relative to the anchor. `top` / `bottom` / `left` / `right`.       |
+| `color`     | `TooltipColor`     | `undefined` | :x:      | :white_check_mark: | Color theme based on the DaisyUI palette.                                    |
+| `as`        | `string`           | `'div'`     | :x:      | :white_check_mark: | HTML tag used to render the anchor wrapper. Use `'span'` for inline content. |
+| `open`      | `boolean`          | `false`     | :x:      | :x:                | When `true`, the tooltip is always visible regardless of hover state.        |
+| `disabled`  | `boolean`          | `false`     | :x:      | :x:                | When `true`, the tooltip is never shown.                                     |
+
+> **Configurable** props can be set globally via the Poppy UI plugin (`components.tooltip` option). See [Plugin Configuration](../../../stories/Configuration.story.md) for more information.
+
+## Slots
+
+| Slot      | Description                                                                  |
+|-----------|----------------------------------------------------------------------------- |
+| `default` | The anchor element the tooltip is attached to.                               |
+| `content` | Overrides `tip` with rich HTML content. Rendered inside the tooltip popover. |
+
+## Usage
+
+```vue
+<!-- Basic -->
+<Tooltip tip="Save your changes">
+  <Button color="primary">Save</Button>
+</Tooltip>
+
+<!-- Placement -->
+<Tooltip tip="On the right" placement="right">
+  <Button>Hover me</Button>
+</Tooltip>
+
+<!-- With color -->
+<Tooltip tip="Something went wrong" color="error">
+  <Button color="error">Delete</Button>
+</Tooltip>
+
+<!-- Rich content slot -->
+<Tooltip color="primary">
+  <template #content>
+    <strong>Pro tip</strong> — press <kbd>⌘S</kbd> to save
+  </template>
+  <Button>Hover for tip</Button>
+</Tooltip>
+
+<!-- Inline anchor -->
+<Tooltip tip="User profile" as="span">
+  <Badge color="primary">@john</Badge>
+</Tooltip>
+
+<!-- Always open -->
+<Tooltip tip="Always visible" :open="true">
+  <Button>Trigger</Button>
+</Tooltip>
+```
+</docs>

package/src/components/feedback/tooltip/Tooltip.vue

@@ -0,0 +1,123 @@
+<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 { TOOLTIP_CONFIG } from './tooltip.context'
+import type { TooltipProps } from './tooltip.props'
+import type { TooltipColor, TooltipPlacement } from './tooltip.types'
+
+const tooltipColors: ComponentClass<'tooltip', TooltipColor> = {
+  neutral: 'tooltip-neutral',
+  primary: 'tooltip-primary',
+  secondary: 'tooltip-secondary',
+  accent: 'tooltip-accent',
+  info: 'tooltip-info',
+  success: 'tooltip-success',
+  warning: 'tooltip-warning',
+  error: 'tooltip-error',
+}
+
+const tooltipPlacements: ComponentClass<'tooltip', TooltipPlacement> = {
+  top: 'tooltip-top',
+  bottom: 'tooltip-bottom',
+  left: 'tooltip-left',
+  right: 'tooltip-right',
+}
+</script>
+
+<script setup lang="ts">
+import { onMounted, useId, useTemplateRef } from 'vue'
+
+const props = defineProps<TooltipProps>()
+const config = useComponentConfig(TOOLTIP_CONFIG, props, {
+  as: 'div',
+  placement: 'top',
+})
+
+const id = useId()
+const tooltipId = `tooltip-${id}`
+const anchorName = `--anchor-${id}`
+
+const tooltip = useTemplateRef('tooltip')
+
+onMounted(() => {
+  if (config.value.open && !config.value.disabled) {
+    tooltip.value?.showPopover()
+  }
+})
+</script>
+
+<template>
+  <component
+    :is="config.as"
+    class="tooltip-anchor"
+    @mouseenter="!config.disabled && !config.open && tooltip?.showPopover()"
+    @mouseleave="!config.disabled && !config.open && tooltip?.hidePopover()"
+  >
+    <slot />
+
+    <Teleport to="body">
+      <div
+        v-show="!config.disabled && (config.tip || $slots.content)"
+        ref="tooltip"
+        popover="manual"
+        :id="tooltipId"
+        class="tooltip-popover"
+        :class="[
+          getClass(tooltipColors, config.color),
+          getClass(tooltipPlacements, config.placement),
+          { 'tooltip-open': config.open },
+        ]"
+      >
+        <slot name="content">{{ config.tip }}</slot>
+      </div>
+    </Teleport>
+  </component>
+</template>
+
+<style scoped lang="scss">
+.tooltip-anchor {
+  anchor-name: v-bind(anchorName);
+  display: inline-block;
+}
+
+.tooltip-popover {
+  position: fixed;
+  position-anchor: v-bind(anchorName);
+  margin: 0;
+  padding: 0.25rem 0.5rem;
+  border: none;
+  border-radius: 0.25rem;
+  background: var(--color-base-300);
+  color: var(--color-base-content);
+  font-size: 0.875rem;
+  white-space: nowrap;
+  inset: unset;
+
+  &.tooltip-top {
+    bottom: calc(anchor(top) + 0.5rem);
+    justify-self: anchor-center;
+  }
+  &.tooltip-bottom {
+    top: calc(anchor(bottom) + 0.5rem);
+    justify-self: anchor-center;
+  }
+  &.tooltip-left {
+    right: calc(anchor(left) + 0.5rem);
+    align-self: anchor-center;
+  }
+  &.tooltip-right {
+    left: calc(anchor(right) + 0.5rem);
+    align-self: anchor-center;
+  }
+
+  $tooltip-colors: "neutral", "primary", "secondary", "accent", "info", "success", "warning", "error";
+
+  @each $name in $tooltip-colors {
+    &.tooltip-#{$name} {
+      background: var(--color-#{$name});
+      color: var(--color-#{$name}-content);
+    }
+  }
+}
+</style>

package/src/components/feedback/tooltip/tooltip.context.ts

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

package/src/components/feedback/tooltip/tooltip.props.ts

@@ -0,0 +1,44 @@
+import type { TooltipColor, TooltipPlacement } from './tooltip.types'
+
+export interface TooltipConfigurableProps {
+  /**
+   * Placement of the tooltip relative to the anchor element.
+   *
+   * @default 'top'
+   */
+  placement?: TooltipPlacement
+
+  /**
+   * Color theme of the tooltip based on the DaisyUI palette.
+   */
+  color?: TooltipColor
+
+  /**
+   * HTML tag or component used to render the anchor wrapper.
+   *
+   * @default 'div'
+   */
+  as?: string
+}
+
+export interface TooltipProps extends TooltipConfigurableProps {
+  /**
+   * Text content of the tooltip.
+   * Can be overridden by the `content` slot.
+   */
+  tip?: string
+
+  /**
+   * When `true`, the tooltip is always visible regardless of hover state.
+   *
+   * @default false
+   */
+  open?: boolean
+
+  /**
+   * When `true`, the tooltip is never shown.
+   *
+   * @default false
+   */
+  disabled?: boolean
+}

package/src/components/feedback/tooltip/tooltip.types.ts

@@ -0,0 +1,2 @@
+export type TooltipPlacement = 'top' | 'bottom' | 'left' | 'right'
+export type TooltipColor = 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'