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

package/src/components/actions/dropdown/dropdown.props.ts

@@ -0,0 +1,67 @@
+import type { Booleanish } from '@/types/utils.type'
+import type { ClassValue } from 'vue'
+import type { DropdownAlign, DropdownSide, DropdownTriggerAction } from './dropdown.types'
+
+export interface DropdownConfigurableProps {
+  /**
+   * Describes how the dropdown has to be alined
+   * - `"start"`: Align to the left in LTR and to the right in RTL.
+   * - `"center"`: Align to the left in LTR and to the right in RTL.
+   * - `"end"`: Align to the right in LTR and to the left in RTL.
+   *
+   * @default "start"
+   */
+  align?: DropdownAlign
+
+  /**
+   * Describe where the content is displayed relatively to the trigger element
+   * - `"left"`: Open on left
+   * - `"right"`: Open on right
+   * - `"top"`: Open on top
+   * - `"bottom"`: Open on bottom
+   *
+   * @default "bottom"
+   */
+  side?: DropdownSide
+
+  /**
+   * Describes what kind of intertion with the trigger (sloted element) that should cause the dropdown to open.
+   * - `"click"`: the dropdown will be presented when the trigger is left clicked.
+   * - `"hover"`: the dropdown will be presented when a pointer hovers over the trigger.
+   * - `"context-menu"`: the dropdown will be presented when the trigger is right clicked on desktop and long pressed on mobile. This will also prevent your device's normal context menu from appearing.
+   *
+   * @default "click"
+   */
+  triggerAction?: DropdownTriggerAction
+
+  /**
+   * Set the amount of time, in **milliseconds** after the user no longer hover the trigger or dropdown, will dismiss.
+   * Only apply on `triggerAction=hover`
+   *
+   * @default 500
+   */
+  debounce?: number
+}
+
+export interface DropdownProps extends DropdownConfigurableProps {
+  /**
+   * Force the dropdown to be shown
+   *
+   * @default false
+   */
+  open?: Booleanish
+
+  /**
+   * CSS class to apply to the trigger element.
+   *
+   * @default ''
+   */
+  triggerClass?: ClassValue
+
+  /**
+   * CSS class to apply to the content element.
+   *
+   * @default ''
+   */
+  contentClass?: ClassValue
+}

package/src/components/actions/dropdown/dropdown.types.ts

@@ -0,0 +1,4 @@
+export type DropdownSide = 'left' | 'right' | 'top' | 'bottom'
+export type DropdownAlign = 'start' | 'center' | 'end'
+
+export type DropdownTriggerAction = 'click' | 'hover' | 'context-menu'

package/src/components/actions/fab/Fab.story.vue

@@ -0,0 +1,227 @@
+<script lang="ts">
+import { reactive } from 'vue'
+import Fab from './Fab.vue'
+import type { FabProps } from './fab.props'
+</script>
+
+<script setup lang="ts">
+const state = reactive<FabProps>({
+  mode: undefined,
+})
+</script>
+
+<template>
+  <Story group="components" title="Actions/Fab" auto-props-disabled>
+    <template #default>
+
+      <Variant title="Default">
+        <template #controls>
+          <HstSelect title="Mode" v-model="state.mode" :options="[{ label: '-- default --', value: undefined }, 'flower']" />
+        </template>
+
+        <template #source>
+          <textarea v-pre>
+            <Fab>
+              <button class="btn btn-circle btn-primary">+</button>
+              <button class="btn btn-circle btn-accent">1</button>
+              <button class="btn btn-circle">2</button>
+              <button class="btn btn-circle">3</button>
+              <template #close>
+                <button class="btn btn-circle fab-close">×</button>
+              </template>
+            </Fab>
+          </textarea>
+        </template>
+
+        <div class="p-28">
+          <Fab v-bind="state">
+            <button class="btn btn-circle btn-primary">+</button>
+            <button class="btn btn-circle btn-accent">1</button>
+            <button class="btn btn-circle">2</button>
+            <button class="btn btn-circle">3</button>
+            <template #close>
+              <button class="btn btn-circle fab-close">×</button>
+            </template>
+          </Fab>
+        </div>
+      </Variant>
+
+      <Variant title="Flower mode">
+        <template #source>
+          <textarea v-pre>
+            <Fab mode="flower">
+              <button class="btn btn-circle btn-primary">+</button>
+              <button class="btn btn-circle btn-accent">1</button>
+              <button class="btn btn-circle">2</button>
+              <button class="btn btn-circle">3</button>
+              <template #close>
+                <button class="btn btn-circle fab-close">×</button>
+              </template>
+            </Fab>
+          </textarea>
+        </template>
+
+        <div class="p-28">
+          <Fab mode="flower">
+            <button class="btn btn-circle btn-primary">+</button>
+            <button class="btn btn-circle btn-accent">1</button>
+            <button class="btn btn-circle">2</button>
+            <button class="btn btn-circle">3</button>
+            <template #close>
+              <button class="btn btn-circle fab-close">×</button>
+            </template>
+          </Fab>
+        </div>
+      </Variant>
+
+      <Variant title="With main-action">
+        <template #source>
+          <textarea v-pre>
+            <Fab mode="flower">
+              <button class="btn btn-circle btn-primary">+</button>
+              <button class="btn btn-circle btn-accent">1</button>
+              <button class="btn btn-circle">2</button>
+              <template #main-action>
+                <button class="btn btn-circle btn-success">✓</button>
+              </template>
+              <template #close>
+                <button class="btn btn-circle fab-close">×</button>
+              </template>
+            </Fab>
+          </textarea>
+        </template>
+
+        <div class="p-28">
+          <Fab mode="flower">
+            <button class="btn btn-circle btn-primary">+</button>
+            <button class="btn btn-circle btn-accent">1</button>
+            <button class="btn btn-circle">2</button>
+            <template #main-action>
+              <button class="btn btn-circle btn-success">✓</button>
+            </template>
+            <template #close>
+              <button class="btn btn-circle fab-close">×</button>
+            </template>
+          </Fab>
+        </div>
+      </Variant>
+
+      <Variant title="With all slots">
+        <template #source>
+          <textarea v-pre>
+            <Fab>
+              <button class="btn btn-circle btn-primary">Menu</button>
+              <button class="btn btn-circle btn-accent">Edit</button>
+              <button class="btn btn-circle">Copy</button>
+              <template #main-action>
+                <button class="btn btn-circle btn-success">Save</button>
+              </template>
+              <template #close>
+                <button class="btn btn-circle btn-error fab-close">Close</button>
+              </template>
+            </Fab>
+          </textarea>
+        </template>
+
+        <div class="p-28">
+          <Fab>
+            <button class="btn btn-circle btn-primary">Menu</button>
+            <button class="btn btn-circle btn-accent">Edit</button>
+            <button class="btn btn-circle">Copy</button>
+            <template #main-action>
+              <button class="btn btn-circle btn-success">Save</button>
+            </template>
+            <template #close>
+              <button class="btn btn-circle btn-error fab-close">Close</button>
+            </template>
+          </Fab>
+        </div>
+      </Variant>
+
+      <Variant title="Composition">
+        <div class="flex gap-4 p-4">
+          <Fab mode="flower">
+            <button class="btn btn-circle btn-primary">+</button>
+            <button class="btn btn-circle btn-sm btn-accent">Edit</button>
+            <button class="btn btn-circle btn-sm">Copy</button>
+            <template #close>
+              <button class="btn btn-circle btn-sm fab-close">×</button>
+            </template>
+          </Fab>
+          <Fab>
+            <button class="btn btn-circle btn-primary">✓</button>
+            <button class="btn btn-circle btn-sm btn-success">Save</button>
+            <button class="btn btn-circle btn-sm">Preview</button>
+            <template #close>
+              <button class="btn btn-circle btn-sm fab-close">×</button>
+            </template>
+          </Fab>
+        </div>
+      </Variant>
+
+    </template>
+  </Story>
+</template>
+
+<docs lang="md">
+# Fab (Speed Dial)
+
+## Description
+
+A floating action button with a dial of related actions that appear around it.
+Built on DaisyUI's `fab` component. All direct children are treated as action buttons,
+with the first one being the main trigger button.
+
+## Props
+
+| Prop   | Type      | Default     | Required | Configurable       | Description                                         |
+|--------|-----------|-------------|----------|--------------------|-----------------------------------------------------|
+| `mode` | `FabMode` | `undefined` | :x:      | :white_check_mark: | Visual mode: `'flower'` for radial opening pattern. |
+
+## Slots
+
+| Slot          | Description                                                                |
+|---------------|----------------------------------------------------------------------------|
+| `default`     | All action buttons, including the main trigger button.                     |
+| `main-action` | Replaces the main action button content when the FAB is in its open state. |
+| `close`       | A button with `fab-close` class that closes the FAB when clicked.          |
+
+## Usage
+
+```vue
+<!-- Basic FAB -->
+<Fab>
+  <button class="btn btn-circle btn-primary">+</button>
+  <button class="btn btn-circle btn-accent">Action 1</button>
+  <button class="btn btn-circle">Action 2</button>
+  <button class="btn btn-circle">Action 3</button>
+  <template #close>
+    <button class="btn btn-circle fab-close">×</button>
+  </template>
+</Fab>
+
+<!-- Flower mode (radial opening) -->
+<Fab mode="flower">
+  <button class="btn btn-circle btn-primary">+</button>
+  <button class="btn btn-circle">1</button>
+  <button class="btn btn-circle">2</button>
+  <button class="btn btn-circle">3</button>
+  <template #close>
+    <button class="btn btn-circle fab-close">×</button>
+  </template>
+</Fab>
+
+<!-- With main-action slot -->
+<Fab mode="flower">
+  <button class="btn btn-circle btn-primary">+</button>
+  <button class="btn btn-circle">1</button>
+  <button class="btn btn-circle">2</button>
+  <template #main-action>
+    <button class="btn btn-circle btn-success">✓</button>
+  </template>
+  <template #close>
+    <button class="btn btn-circle fab-close">×</button>
+  </template>
+</Fab>
+```
+</docs>

package/src/components/actions/fab/Fab.vue

@@ -0,0 +1,33 @@
+<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 { FAB_CONFIG } from './fab.context'
+import type { FabProps } from './fab.props'
+import type { FabMode } from './fab.types'
+
+const fabModes: ComponentClass<'fab', FabMode> = {
+  flower: 'fab-flower',
+}
+</script>
+
+<script setup lang="ts">
+const props = defineProps<FabProps>()
+const config = useComponentConfig(FAB_CONFIG, props)
+</script>
+
+<template>
+  <div
+    class="fab"
+    :class="getClass(fabModes, config.mode)"
+  >
+    <div v-if="$slots.close" class="fab-close">
+      <slot name="close"></slot>
+    </div>
+    <div v-if="$slots.mainAction" class="fab-main-action">
+      <slot name="main-action"></slot>
+    </div>
+
+    <slot />
+  </div>
+</template>

package/src/components/actions/fab/fab.context.ts

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

package/src/components/actions/fab/fab.props.ts

@@ -0,0 +1,11 @@
+import type { FabMode } from './fab.types'
+
+export interface FabConfigurableProps {
+  /**
+   * Visual style for FAB opening animation.
+   * - `'flower'`: Actions open in a flower/radial pattern.
+   */
+  mode?: FabMode
+}
+
+export interface FabProps extends FabConfigurableProps {}

package/src/components/actions/fab/fab.types.ts

@@ -0,0 +1 @@
+export type FabMode = 'flower'

package/src/components/actions/modal/Modal.story.vue

@@ -0,0 +1,284 @@
+<script lang="ts">
+import Button from '@/components/actions/button/Button.vue'
+import { logEvent } from 'histoire/client'
+import { reactive, shallowRef, useTemplateRef } from 'vue'
+import Modal from './Modal.vue'
+import type { ModalProps } from './modal.props'
+import type { ModalPlacement } from './modal.types'
+</script>
+
+<script setup lang="ts">
+const state = reactive<ModalProps>({
+  placement: undefined,
+  closeOnBackdrop: false,
+  loadContentWhenClose: false,
+})
+
+// Default
+const defaultOpen = shallowRef(false)
+
+// Placements
+const placementOpen = reactive<Record<ModalPlacement, boolean>>({
+  top: false,
+  middle: false,
+  bottom: false,
+  start: false,
+  end: false,
+})
+
+// Close on backdrop
+const backdropOpen = shallowRef(false)
+
+// Events
+const eventsOpen = shallowRef(false)
+
+// Expose
+const modalExposeRef = useTemplateRef('modal-expose')
+const exposeOpen = shallowRef(false)
+</script>
+
+<template>
+  <Story group="components" title="Actions/Modal" auto-props-disabled>
+    <template #default>
+
+      <Variant title="Default">
+        <template #controls>
+          <HstSelect
+            title="Placement"
+            v-model="state.placement"
+            :options="[{ label: '-- default --', value: undefined }, 'top', 'middle', 'bottom', 'start', 'end']"
+          />
+          <HstCheckbox title="Close on backdrop" v-model="(state.closeOnBackdrop as boolean)" />
+          <HstCheckbox title="Load content when close" v-model="(state.loadContentWhenClose as boolean)" />
+        </template>
+
+        <Button @click="defaultOpen = true">Open modal</Button>
+
+        <Modal
+          v-model="defaultOpen"
+          v-bind="state"
+          @close="logEvent('close', $event)"
+        >
+          <h3>Modal title</h3>
+          <p>This is the modal content. You can put anything here.</p>
+          <template #actions>
+            <Button color="primary" @click="defaultOpen = false">Confirm</Button>
+            <Button variant="ghost" @click="defaultOpen = false">Cancel</Button>
+          </template>
+        </Modal>
+      </Variant>
+
+      <Variant title="Placements">
+        <div class="modal-story modal-story--placements">
+          <div v-for="placement in (['top', 'middle', 'bottom', 'start', 'end'] as ModalPlacement[])" :key="placement">
+            <Button @click="placementOpen[placement] = true">{{ placement }}</Button>
+            <Modal v-model="placementOpen[placement]" :placement="placement">
+              <h3>Placement: {{ placement }}</h3>
+              <p>This modal is anchored to <strong>{{ placement }}</strong>.</p>
+              <template #actions>
+                <Button @click="placementOpen[placement] = false">Close</Button>
+              </template>
+            </Modal>
+          </div>
+        </div>
+      </Variant>
+
+      <Variant title="Close on backdrop">
+        <Button @click="backdropOpen = true">Open — click outside to close</Button>
+        <Modal v-model="backdropOpen" close-on-backdrop>
+          <h3>Close on backdrop</h3>
+          <p>Click outside the modal box to close it.</p>
+          <template #actions>
+            <Button @click="backdropOpen = false">Close</Button>
+          </template>
+        </Modal>
+      </Variant>
+
+      <Variant title="Events">
+        <Button @click="eventsOpen = true">Open — watch the event log</Button>
+        <Modal v-model="eventsOpen" close-on-backdrop @close="logEvent('close', $event)">
+          <h3>Events demo</h3>
+          <p>Close via the backdrop or the button below.</p>
+          <template #actions>
+            <Button @click="eventsOpen = false">Close</Button>
+          </template>
+        </Modal>
+      </Variant>
+
+      <Variant title="Expose — present / dismiss">
+        <div class="modal-story modal-story--expose">
+          <Modal ref="modal-expose" v-model="exposeOpen">
+            <h3>Controlled externally</h3>
+            <p>This modal was opened via <code>present()</code>.</p>
+            <template #actions>
+              <Button @click="modalExposeRef?.dismiss()">dismiss()</Button>
+            </template>
+          </Modal>
+          <div class="modal-story--row">
+            <Button variant="outline" size="sm" @click="modalExposeRef?.present()">present()</Button>
+            <Button variant="outline" size="sm" @click="modalExposeRef?.dismiss()">dismiss()</Button>
+          </div>
+        </div>
+      </Variant>
+
+    </template>
+  </Story>
+</template>
+
+<style scoped>
+.modal-story {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+}
+
+.modal-story--placements {
+  align-items: flex-start;
+}
+
+.modal-story--row {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.modal-story--expose {
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1rem;
+}
+
+.modal-story--lcwc {
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.modal-story--lcwc-item {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.modal-story--hint {
+  font-size: 0.875rem;
+  color: #6b7280;
+  background: #f9fafb;
+  border-left: 3px solid #d1d5db;
+  padding: 0.6rem 0.875rem;
+  border-radius: 0 4px 4px 0;
+  max-width: 560px;
+}
+
+.modal-story--hint code {
+  font-size: 0.8rem;
+  background: #e5e7eb;
+  padding: 1px 4px;
+  border-radius: 3px;
+}
+
+.modal-story--label {
+  font-size: 0.7rem;
+  color: #9ca3af;
+  font-family: monospace;
+}
+</style>
+
+<docs lang="md">
+# Modal
+
+## Description
+
+A dialog component built on the native `dialog` element with `showModal()` / `close()` lifecycle management.
+Content is lazily rendered — it only mounts after the modal has been opened at least once, unless `loadContentWhenClose` is set.
+Controlled via `v-model` or programmatically through exposed methods.
+
+## API
+
+### v-model
+
+| Prop         | Type      | Description              |
+|--------------|-----------|--------------------------|
+| `modelValue` | `boolean` | Open state of the modal. |
+
+### Props
+
+| Prop                   | Type             | Default     | Required | Configurable       | Description                                                                                                      |
+|------------------------|------------------|-------------|----------|--------------------|------------------------------------------------------------------------------------------------------------------|
+| `placement`            | `ModalPlacement` | `undefined` | :x:      | :white_check_mark: | Position of the modal box on screen. `top` / `middle` / `bottom` / `start` / `end`.                              |
+| `closeOnBackdrop`      | `Booleanish`     | `false`     | :x:      | :white_check_mark: | When `true`, clicking the backdrop closes the modal.                                                             |
+| `loadContentWhenClose` | `Booleanish`     | `false`     | :x:      | :white_check_mark: | When `true`, content stays mounted while the modal is closed. Preserves internal component state between cycles. |
+
+> **Configurable** props can be set globally via the Poppy UI plugin (`components.modal` option). See [Plugin Configuration](../../../stories/Configuration.story.md) for more information.
+
+### Events
+
+| Event    | Payload   | Description                                           |
+|----------|-----------|-------------------------------------------------------|
+| `@close` | `-`       | Emitted when the modal closes (native `close` event). |
+
+### Slots
+
+| Slot      | Description                                                                                |
+|-----------|--------------------------------------------------------------------------------------------|
+| `default` | Main content of the modal box.                                                             |
+| `actions` | Rendered inside a `modal-action` wrapper at the bottom of the box. Only mounted when used. |
+
+### Expose
+
+| Method      | Signature    | Description       |
+|-------------|--------------|-------------------|
+| `present()` | `() => void` | Opens the modal.  |
+| `dismiss()` | `() => void` | Closes the modal. |
+
+```vue
+<Modal ref="modalRef">
+  <p>Content</p>
+  <template #actions>
+    <Button @click="modalRef?.dismiss()">Close</Button>
+  </template>
+</Modal>
+
+<Button @click="modalRef?.present()">Open</Button>
+```
+
+## Note
+
+### Content rendering
+
+By default the modal uses **lazy + persistent** rendering:
+- Content is **not rendered** until the modal is opened for the first time.
+- Once opened, the content **stays mounted** even after closing — preserving any internal state (scroll position, form values, counters, etc.).
+
+Set `loadContentWhenClose="true"` to keep the content mounted **from the start**, even before the first open.
+
+| `loadContentWhenClose` | First render  | After close   |
+|------------------------|---------------|---------------|
+| `false` (default)      | On first open | Stays mounted |
+| `true`                 | Immediately   | Stays mounted |
+
+## Usage
+
+```vue
+<!-- Basic -->
+<Button @click="open = true">Open</Button>
+<Modal v-model="open">
+  <h3>Title</h3>
+  <p>Content goes here.</p>
+  <template #actions>
+    <Button color="primary" @click="open = false">Confirm</Button>
+    <Button variant="ghost" @click="open = false">Cancel</Button>
+  </template>
+</Modal>
+
+<!-- Close on backdrop click -->
+<Modal v-model="open" close-on-backdrop>...</Modal>
+
+<!-- Top placement -->
+<Modal v-model="open" placement="top">...</Modal>
+
+<!-- Programmatic control -->
+<Modal ref="modalRef">...</Modal>
+<Button @click="modalRef?.present()">Open</Button>
+```
+</docs>