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

package/src/components/feedback/alert/Alert.story.vue

@@ -0,0 +1,243 @@
+<script lang="ts" setup>
+import { CheckCircleIcon, InfoIcon, TriangleAlertIcon, XCircleIcon } from '@lucide/vue'
+import { reactive } from 'vue'
+import Alert from './Alert.vue'
+import type { AlertProps } from './alert.props'
+
+const state = reactive<AlertProps>({
+  color: undefined,
+  variant: undefined,
+  direction: undefined,
+})
+</script>
+
+<template>
+  <Story group="components" title="Feedback/Alert" auto-props-disabled>
+    <template #default>
+
+      <Variant title="Default">
+        <template #controls>
+          <HstSelect title="Color" v-model="state.color" :options="[{ label: '-- default --', value: undefined}, 'info', 'success', 'warning', 'error']" />
+          <HstSelect title="Variant" v-model="state.variant" :options="[{ label: '-- default --', value: undefined}, 'outline', 'dash', 'soft']" />
+          <HstSelect title="Direction" v-model="state.direction" :options="[{ label: '-- default --', value: undefined}, 'horizontal', 'vertical']" />
+        </template>
+
+        <Alert v-bind="state" class="max-w-lg">
+          <template #icon><InfoIcon class="size-5" /></template>
+          <div>
+            <div class="font-semibold">Heads up!</div>
+            <div class="text-sm">This is an alert message with some useful information.</div>
+          </div>
+        </Alert>
+      </Variant>
+
+      <Variant title="Colors">
+        <div class="alert-story alert-story--col">
+          <Alert color="info" class="max-w-lg">
+            <template #icon><InfoIcon class="size-5" /></template>
+            <div>
+              <div class="font-semibold">Info</div>
+              <div class="text-sm">Here is some useful information for you.</div>
+            </div>
+          </Alert>
+          <Alert color="success" class="max-w-lg">
+            <template #icon><CheckCircleIcon class="size-5" /></template>
+            <div>
+              <div class="font-semibold">Success</div>
+              <div class="text-sm">Your changes have been saved successfully.</div>
+            </div>
+          </Alert>
+          <Alert color="warning" class="max-w-lg">
+            <template #icon><TriangleAlertIcon class="size-5" /></template>
+            <div>
+              <div class="font-semibold">Warning</div>
+              <div class="text-sm">Please review your settings before continuing.</div>
+            </div>
+          </Alert>
+          <Alert color="error" class="max-w-lg">
+            <template #icon><XCircleIcon class="size-5" /></template>
+            <div>
+              <div class="font-semibold">Error</div>
+              <div class="text-sm">Something went wrong. Please try again.</div>
+            </div>
+          </Alert>
+        </div>
+      </Variant>
+
+      <Variant title="Variants">
+        <div class="alert-story alert-story--col">
+          <div v-for="variant in ([undefined, 'outline', 'dash', 'soft'])" :key="variant ?? 'default'" class="alert-story--item">
+            <span class="alert-story--label">{{ variant ?? 'default' }}</span>
+            <Alert color="info" :variant="variant" class="max-w-lg">
+              <template #icon><InfoIcon class="size-5" /></template>
+              <div>
+                <div class="font-semibold">Variant: {{ variant ?? 'default' }}</div>
+                <div class="text-sm">Alert with <code>variant="{{ variant ?? 'default' }}"</code>.</div>
+              </div>
+            </Alert>
+          </div>
+        </div>
+      </Variant>
+
+      <Variant title="Directions">
+        <div class="alert-story alert-story--col">
+          <div class="alert-story--item">
+            <span class="alert-story--label">horizontal</span>
+            <Alert color="info" direction="horizontal" class="max-w-lg">
+              <template #icon><InfoIcon class="size-5" /></template>
+              <div>
+                <div class="font-semibold">Horizontal</div>
+                <div class="text-sm">Icon and content displayed side by side.</div>
+              </div>
+            </Alert>
+          </div>
+          <div class="alert-story--item">
+            <span class="alert-story--label">vertical</span>
+            <Alert color="info" direction="vertical" class="max-w-lg">
+              <template #icon><InfoIcon class="size-5 mx-auto" /></template>
+              <div class="text-center">
+                <div class="font-semibold">Vertical</div>
+                <div class="text-sm">Icon and content stacked vertically.</div>
+              </div>
+            </Alert>
+          </div>
+        </div>
+      </Variant>
+
+      <Variant title="Colors x Variants">
+        <div class="alert-story alert-story--col">
+          <div v-for="variant in ([undefined, 'outline', 'dash', 'soft'])" :key="variant ?? 'default'" class="alert-story--matrix-row">
+            <span class="alert-story--label">{{ variant ?? 'default' }}</span>
+            <div class="alert-story alert-story--col">
+              <Alert v-for="color in (['info', 'success', 'warning', 'error'])" :key="color" :color="color" :variant="variant" class="max-w-lg">
+                <template #icon>
+                  <InfoIcon v-if="color === 'info'" class="size-5" />
+                  <CheckCircleIcon v-else-if="color === 'success'" class="size-5" />
+                  <TriangleAlertIcon v-else-if="color === 'warning'" class="size-5" />
+                  <XCircleIcon v-else class="size-5" />
+                </template>
+                <span>{{ color }} — {{ variant ?? 'default' }}</span>
+              </Alert>
+            </div>
+          </div>
+        </div>
+      </Variant>
+
+      <Variant title="No icon">
+        <div class="alert-story alert-story--col">
+          <Alert color="info" class="max-w-lg">
+            A simple informational alert without an icon.
+          </Alert>
+          <Alert color="success" variant="soft" class="max-w-lg">
+            Your profile has been updated.
+          </Alert>
+          <Alert color="error" variant="outline" class="max-w-lg">
+            Failed to connect to the server.
+          </Alert>
+        </div>
+      </Variant>
+
+    </template>
+  </Story>
+</template>
+
+<style scoped>
+.alert-story {
+  display: flex;
+  gap: 0.75rem;
+  flex-wrap: wrap;
+}
+
+.alert-story--col {
+  flex-direction: column;
+}
+
+.alert-story--item {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+}
+
+.alert-story--label {
+  font-size: 0.7rem;
+  color: #9ca3af;
+  font-family: monospace;
+}
+
+.alert-story--matrix-row {
+  display: flex;
+  flex-direction: column;
+  gap: 0.375rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 0.5px solid #e5e7eb;
+}
+
+.alert-story--matrix-row:last-child {
+  border-bottom: none;
+}
+</style>
+
+<docs lang="md">
+# Alert
+
+## Description
+
+A contextual feedback component used to display informational, success, warning, or error messages.
+Built on DaisyUI's `alert` class system with support for colors, variants, and layout directions.
+Supports an optional icon via the `icon` slot.
+
+## API
+
+### Props
+
+| Prop        | Type             | Default     | Required | Configurable       | Description                                                           |
+|-------------|------------------|-------------|----------|--------------------|-----------------------------------------------------------------------|
+| `color`     | `AlertColor`     | `undefined` | :x:      | :white_check_mark: | Color theme of the alert. `info` / `success` / `warning` / `error`.   |
+| `variant`   | `AlertVariant`   | `undefined` | :x:      | :white_check_mark: | Visual style. `outline` / `dash` / `soft`.                            |
+| `direction` | `AlertDirection` | `undefined` | :x:      | :white_check_mark: | Layout direction. `horizontal` (side by side) / `vertical` (stacked). |
+
+> **Configurable** props can be set globally via the Poppy UI plugin (`components.alert` option). See [Plugin Configuration](../../../stories/Configuration.story.md) for more information.
+
+### Slots
+
+| Slot      | Description                                                  |
+|-----------|--------------------------------------------------------------|
+| `icon`    | Optional icon displayed before the main content.             |
+| `default` | Main content of the alert (text, title + description, etc.). |
+
+## Usage
+
+```vue
+<!-- Basic -->
+<Alert color="info">
+  Here is some useful information.
+</Alert>
+
+<!-- With icon and structured content -->
+<Alert color="success">
+  <template #icon>
+    <CheckCircleIcon class="size-5" />
+  </template>
+  <div>
+    <div class="font-semibold">Success</div>
+    <div class="text-sm">Your changes have been saved.</div>
+  </div>
+</Alert>
+
+<!-- Soft variant -->
+<Alert color="warning" variant="soft">
+  <template #icon>
+    <TriangleAlertIcon class="size-5" />
+  </template>
+  Please review before continuing.
+</Alert>
+
+<!-- Vertical direction -->
+<Alert color="error" direction="vertical">
+  <template #icon>
+    <XCircleIcon class="size-5 mx-auto" />
+  </template>
+  <div class="text-center">Something went wrong.</div>
+</Alert>
+```
+</docs>

package/src/components/feedback/alert/Alert.vue

@@ -0,0 +1,46 @@
+<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 { ALERT_CONFIG } from './alert.context'
+import type { AlertProps } from './alert.props'
+import type { AlertColor, AlertDirection, AlertVariant } from './alert.types'
+
+const alertColors: ComponentClass<'alert', AlertColor> = {
+  info: 'alert-info',
+  success: 'alert-success',
+  warning: 'alert-warning',
+  error: 'alert-error',
+}
+
+const alertVariants: ComponentClass<'alert', AlertVariant> = {
+  outline: 'alert-outline',
+  dash: 'alert-dash',
+  soft: 'alert-soft',
+}
+
+const alertDirections: ComponentClass<'alert', AlertDirection> = {
+  horizontal: 'alert-horizontal',
+  vertical: 'alert-vertical',
+}
+</script>
+
+<script setup lang="ts">
+const props = defineProps<AlertProps>()
+const config = useComponentConfig(ALERT_CONFIG, props, {})
+</script>
+
+<template>
+  <div
+    role="alert"
+    class="alert"
+    :class="[
+      getClass(alertColors, config.color),
+      getClass(alertVariants, config.variant),
+      getClass(alertDirections, config.direction),
+    ]"
+  >
+    <slot name="icon" />
+    <slot />
+  </div>
+</template>

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

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

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

@@ -0,0 +1,29 @@
+import type { AlertColor, AlertDirection, AlertVariant } from './alert.types'
+
+export interface AlertConfigurableProps {
+  /**
+   * Color theme of the alert.
+   * - `'info'`: Informational message.
+   * - `'success'`: Success message.
+   * - `'warning'`: Warning message.
+   * - `'error'`: Error message.
+   */
+  color?: AlertColor
+
+  /**
+   * Visual style of the alert.
+   * - `'outline'`: Border only.
+   * - `'dash'`: Dashed border.
+   * - `'soft'`: Soft background tint.
+   */
+  variant?: AlertVariant
+
+  /**
+   * Layout direction of the alert content.
+   * - `'horizontal'`: Icon and content side by side.
+   * - `'vertical'`: Icon and content stacked.
+   */
+  direction?: AlertDirection
+}
+
+export interface AlertProps extends AlertConfigurableProps {}

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

@@ -0,0 +1,3 @@
+export type AlertColor = 'info' | 'success' | 'warning' | 'error'
+export type AlertVariant = 'outline' | 'dash' | 'soft'
+export type AlertDirection = 'horizontal' | 'vertical'

package/src/components/feedback/loading/Loading.story.vue

@@ -0,0 +1,156 @@
+<script lang="ts" setup>
+import { reactive } from 'vue'
+import Loading from './Loading.vue'
+import type { LoadingProps } from './loading.props'
+
+const state = reactive<LoadingProps>({
+  variant: 'spinner',
+  size: 'md',
+  color: undefined,
+})
+</script>
+
+<template>
+  <Story group="components" title="Feedback/Loading" auto-props-disabled>
+    <template #default>
+
+      <Variant title="Default">
+        <template #controls>
+          <HstSelect title="Variant" v-model="state.variant" :options="['spinner', 'dots', 'ring', 'ball', 'bars', 'infinity']" />
+          <HstSelect title="Size" v-model="state.size" :options="['xs', 'sm', 'md', 'lg', 'xl']" />
+          <HstSelect title="Color" v-model="state.color" :options="[{ label: '-- default --', value: undefined }, 'primary', 'secondary', 'accent', 'neutral', 'info', 'success', 'warning', 'error']" />
+        </template>
+
+        <Loading v-bind="state" />
+      </Variant>
+
+      <Variant title="Variants">
+        <div class="loading-story loading-story--row">
+          <div v-for="variant in (['spinner', 'dots', 'ring', 'ball', 'bars', 'infinity'])" :key="variant" class="loading-story--item">
+            <Loading :variant="variant" size="md" />
+            <span class="loading-story--label">{{ variant }}</span>
+          </div>
+        </div>
+      </Variant>
+
+      <Variant title="Sizes">
+        <div class="loading-story loading-story--row">
+          <div v-for="size in (['xs', 'sm', 'md', 'lg', 'xl'])" :key="size" class="loading-story--item">
+            <Loading variant="spinner" :size="size" />
+            <span class="loading-story--label">{{ size }}</span>
+          </div>
+        </div>
+      </Variant>
+
+      <Variant title="Colors">
+        <div class="loading-story loading-story--row">
+          <div v-for="color in (['primary', 'secondary', 'accent', 'neutral', 'info', 'success', 'warning', 'error'])" :key="color" class="loading-story--item">
+            <Loading variant="spinner" size="md" :color="color" />
+            <span class="loading-story--label">{{ color }}</span>
+          </div>
+        </div>
+      </Variant>
+
+      <Variant title="Variants × Sizes">
+        <div class="loading-story loading-story--col">
+          <div v-for="variant in (['spinner', 'dots', 'ring', 'ball', 'bars', 'infinity'])" :key="variant" class="loading-story--matrix-row">
+            <span class="loading-story--label loading-story--label-wide">{{ variant }}</span>
+            <div class="loading-story loading-story--row">
+              <div v-for="size in (['xs', 'sm', 'md', 'lg', 'xl'])" :key="size" class="loading-story--item">
+                <Loading :variant="variant" :size="size" />
+                <span class="loading-story--label">{{ size }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </Variant>
+
+    </template>
+  </Story>
+</template>
+
+<style scoped>
+.loading-story {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+}
+
+.loading-story--row {
+  align-items: flex-end;
+}
+
+.loading-story--col {
+  flex-direction: column;
+  gap: 0.75rem;
+}
+
+.loading-story--item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.375rem;
+}
+
+.loading-story--label {
+  font-size: 0.7rem;
+  color: #9ca3af;
+  font-family: monospace;
+}
+
+.loading-story--label-wide {
+  min-width: 5rem;
+}
+
+.loading-story--matrix-row {
+  display: flex;
+  align-items: flex-end;
+  gap: 1rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 0.5px solid #e5e7eb;
+}
+
+.loading-story--matrix-row:last-child {
+  border-bottom: none;
+}
+</style>
+
+<docs lang="md">
+# Loading
+
+## Description
+
+An animated loading indicator built on DaisyUI's `loading` class system.
+Supports multiple visual styles, sizes, and colors. Use it inline, inside buttons, or as a full-page overlay.
+
+## Props
+
+| Prop      | Type             | Default     | Required | Configurable       | Description                                                                                                                                                |
+|-----------|------------------|-------------|----------|--------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------|
+| `variant` | `LoadingVariant` | `'spinner'` | :x:      | :white_check_mark: | Visual style. `spinner` / `dots` / `ring` / `ball` / `bars` / `infinity`.                                                                                  |
+| `size`    | `LoadingSize`    | `'md'`      | :x:      | :white_check_mark: | Size of the indicator. `xs` / `sm` / `md` / `lg` / `xl`.                                                                                                   |
+| `color`   | `LoadingColor`   | `undefined` | :x:      | :white_check_mark: | Color of the indicator. Applied as a Tailwind `text-*` utility. `primary` / `secondary` / `accent` / `neutral` / `info` / `success` / `warning` / `error`. |
+
+> **Configurable** props can be set globally via the Poppy UI plugin (`components.loading` option). See [Plugin Configuration](../../../stories/Configuration.story.md) for more information.
+
+## Usage
+
+```vue
+<!-- Basic -->
+<Loading />
+
+<!-- With variant and size -->
+<Loading variant="dots" size="lg" />
+
+<!-- With color -->
+<Loading variant="spinner" color="primary" />
+
+<!-- Inside a button -->
+<Button :loading="true">
+  <template #loading>
+    <Loading variant="spinner" size="sm" />
+  </template>
+  Saving…
+</Button>
+```
+</docs>

package/src/components/feedback/loading/Loading.vue

@@ -0,0 +1,55 @@
+<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 { LOADING_CONFIG } from './loading.context'
+import type { LoadingProps } from './loading.props'
+import type { LoadingColor, LoadingSize, LoadingVariant } from './loading.types'
+
+const loadingVariants: ComponentClass<'loading', LoadingVariant> = {
+  spinner: 'loading-spinner',
+  dots: 'loading-dots',
+  ring: 'loading-ring',
+  ball: 'loading-ball',
+  bars: 'loading-bars',
+  infinity: 'loading-infinity',
+}
+
+const loadingSizes: ComponentClass<'loading', LoadingSize> = {
+  xs: 'loading-xs',
+  sm: 'loading-sm',
+  md: 'loading-md',
+  lg: 'loading-lg',
+  xl: 'loading-xl',
+}
+
+const loadingColors: ComponentClass<'text', LoadingColor> = {
+  primary: 'text-primary',
+  secondary: 'text-secondary',
+  accent: 'text-accent',
+  neutral: 'text-neutral',
+  info: 'text-info',
+  success: 'text-success',
+  warning: 'text-warning',
+  error: 'text-error',
+}
+</script>
+
+<script setup lang="ts">
+const props = defineProps<LoadingProps>()
+const config = useComponentConfig(LOADING_CONFIG, props, {
+  variant: 'spinner',
+  size: 'md',
+})
+</script>
+
+<template>
+  <span
+    class="loading"
+    :class="[
+      getClass(loadingVariants, config.variant),
+      getClass(loadingSizes, config.size),
+      getClass(loadingColors, config.color),
+    ]"
+  />
+</template>

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

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

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

@@ -0,0 +1,25 @@
+import type { LoadingColor, LoadingSize, LoadingVariant } from './loading.types'
+
+export interface LoadingConfigurableProps {
+  /**
+   * Visual style of the loading indicator.
+   *
+   * @default 'spinner'
+   */
+  variant?: LoadingVariant
+
+  /**
+   * Size of the loading indicator.
+   *
+   * @default 'md'
+   */
+  size?: LoadingSize
+
+  /**
+   * Color of the loading indicator based on the DaisyUI palette.
+   * Applied as a Tailwind `text-*` utility class.
+   */
+  color?: LoadingColor
+}
+
+export interface LoadingProps extends LoadingConfigurableProps {}

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

@@ -0,0 +1,5 @@
+import type { ComponentSize } from '@/types/size.type'
+
+export type LoadingVariant = 'spinner' | 'dots' | 'ring' | 'ball' | 'bars' | 'infinity'
+export type LoadingSize = ComponentSize
+export type LoadingColor = 'primary' | 'secondary' | 'accent' | 'neutral' | 'info' | 'success' | 'warning' | 'error'

package/src/components/feedback/progress/Progress.story.vue

@@ -0,0 +1,96 @@
+<script lang="ts">
+import { reactive } from 'vue'
+import Progress from './Progress.vue'
+import type { ProgressProps } from './progress.props'
+</script>
+
+<script setup lang="ts">
+const state = reactive<ProgressProps>({
+  value: 40,
+  max: 100,
+  color: undefined,
+  indeterminate: false,
+})
+</script>
+
+<template>
+  <Story group="components" title="Feedback/Progress" 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',
+          ]"
+        />
+        <HstSlider v-model="state.value" title="Value" :min="0" :max="100" />
+        <HstCheckbox v-model="(state.indeterminate as boolean)" title="Indeterminate" />
+      </template>
+      <Progress v-bind="state" class="w-56" />
+    </Variant>
+
+    <Variant title="Colors">
+      <div class="flex flex-col gap-2">
+        <Progress color="neutral" :value="70" class="w-56" />
+        <Progress color="primary" :value="70" class="w-56" />
+        <Progress color="secondary" :value="70" class="w-56" />
+        <Progress color="accent" :value="70" class="w-56" />
+        <Progress color="info" :value="70" class="w-56" />
+        <Progress color="success" :value="70" class="w-56" />
+        <Progress color="warning" :value="70" class="w-56" />
+        <Progress color="error" :value="70" class="w-56" />
+      </div>
+    </Variant>
+
+    <Variant title="Values">
+      <div class="flex flex-col gap-2">
+        <Progress color="primary" :value="0" class="w-56" />
+        <Progress color="primary" :value="25" class="w-56" />
+        <Progress color="primary" :value="50" class="w-56" />
+        <Progress color="primary" :value="75" class="w-56" />
+        <Progress color="primary" :value="100" class="w-56" />
+      </div>
+    </Variant>
+
+    <Variant title="Indeterminate">
+      <div class="flex flex-col gap-2">
+        <Progress class="w-56" />
+        <Progress color="primary" indeterminate class="w-56" />
+        <Progress color="success" indeterminate class="w-56" />
+      </div>
+    </Variant>
+
+  </Story>
+</template>
+
+<docs lang="md">
+# Progress
+
+## Description
+Progress bar used to show the completion of a task or the passing of time.
+Omitting `value` or setting `indeterminate` renders an animated indeterminate state.
+
+## Props
+| Prop            | Type            | Default     | Required | Configurable       | Description                                                          |
+|-----------------|-----------------|-------------|----------|--------------------|----------------------------------------------------------------------|
+| `color`         | `ProgressColor` | `undefined` | :x:      | :white_check_mark: | Color of the progress bar                                            |
+| `value`         | `number`        | `undefined` | :x:      | :x:                | Current value. Omit for indeterminate state                          |
+| `max`           | `number`        | `100`       | :x:      | :white_check_mark: | Maximum value                                                        |
+| `indeterminate` | `Booleanish`    | `false`     | :x:      | :x:                | Forces indeterminate (animated) state, takes precedence over `value` |
+
+## Usage
+```vue
+<!-- Determinate -->
+<Progress color="primary" :value="40" :max="100" />
+
+<!-- Indeterminate -->
+<Progress color="primary" indeterminate />
+
+<!-- Indeterminate (no value) -->
+<Progress color="primary" />
+```
+</docs>