@antfu/design 0.1.0

package/components/Display/DisplaySafeImage.stories.ts

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import DisplaySafeImage from './DisplaySafeImage.vue'
+
+const meta = {
+  title: 'Display/DisplaySafeImage',
+  component: DisplaySafeImage,
+  tags: ['autodocs'],
+  args: { alt: 'avatar' },
+  decorators: [() => ({ template: '<div class="w-16 h-16 border border-base rounded overflow-hidden"><story /></div>' })],
+} satisfies Meta<typeof DisplaySafeImage>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Loaded: Story = {
+  args: { src: 'https://github.com/antfu.png' },
+}
+
+export const BrokenSrc: Story = {
+  render: () => ({
+    components: { DisplaySafeImage },
+    template: `<DisplaySafeImage src="https://example.com/does-not-exist.png" alt="broken">
+      <template #fallback>
+        <div class="w-full h-full bg-secondary color-muted text-xs inline-flex items-center justify-center">
+          fallback
+        </div>
+      </template>
+    </DisplaySafeImage>`,
+  }),
+}
+
+export const NoSrc: Story = {
+  render: () => ({
+    components: { DisplaySafeImage },
+    template: `<DisplaySafeImage>
+      <template #fallback>
+        <div class="w-full h-full bg-secondary color-muted text-xs inline-flex items-center justify-center">
+          no src
+        </div>
+      </template>
+    </DisplaySafeImage>`,
+  }),
+}

package/components/Display/DisplaySafeImage.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    /** Image source. When absent or failed, the `#fallback` slot is shown instead. */
+    src?: string
+    /** Alternative text, forwarded to the `<img>`. */
+    alt?: string
+  }>(),
+  {},
+)
+
+const errored = ref(false)
+
+watch(() => props.src, () => {
+  errored.value = false
+})
+</script>
+
+<template>
+  <img
+    v-if="src && !errored"
+    :src="src"
+    :alt="alt"
+    class="h-full w-full block object-cover"
+    @error="errored = true"
+  >
+  <slot v-else name="fallback" />
+</template>

package/components/Display/DisplayStatusPill.stories.ts

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import DisplayStatusPill from './DisplayStatusPill.vue'
+
+const meta = {
+  title: 'Display/DisplayStatusPill',
+  component: DisplayStatusPill,
+  tags: ['autodocs'],
+  argTypes: {
+    status: {
+      control: 'select',
+      options: ['neutral', 'low', 'medium', 'high', 'critical', 'success', 'error', 'warning', 'info'],
+    },
+  },
+  args: { status: 'success', label: 'Online' },
+} satisfies Meta<typeof DisplayStatusPill>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Success: Story = { args: { status: 'success', label: 'Online' } }
+export const Pulsing: Story = { args: { status: 'high', label: 'Degraded', pulse: true } }
+
+export const Statuses: Story = {
+  render: () => ({
+    components: { DisplayStatusPill },
+    template: `<div class="flex flex-wrap gap-4">
+      <DisplayStatusPill status="success" label="Online" />
+      <DisplayStatusPill status="high" label="Degraded" pulse />
+      <DisplayStatusPill status="critical" label="Down" />
+      <DisplayStatusPill status="info" label="Info" />
+      <DisplayStatusPill status="neutral" label="Idle" />
+    </div>`,
+  }),
+}

package/components/Display/DisplayStatusPill.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    status?: 'neutral' | 'low' | 'medium' | 'high' | 'critical' | 'success' | 'error' | 'warning' | 'info'
+    label?: string
+    /** Override the dot color with any CSS color (wins over `status`). */
+    color?: string
+    /** Animate the dot (e.g. live/running). */
+    pulse?: boolean
+  }>(),
+  { status: 'neutral' },
+)
+
+// Severity statuses follow the themeable `color-scale-*` tokens (dark-aware) via
+// `bg-current`; semantic statuses use fixed palette colors.
+const DOT: Record<NonNullable<typeof props.status>, string> = {
+  neutral: 'color-scale-neutral bg-current',
+  low: 'color-scale-low bg-current',
+  medium: 'color-scale-medium bg-current',
+  high: 'color-scale-high bg-current',
+  critical: 'color-scale-critical bg-current',
+  success: 'text-green-500 bg-current',
+  error: 'text-red-500 bg-current',
+  warning: 'text-amber-500 bg-current',
+  info: 'text-blue-500 bg-current',
+}
+
+const dotClass = computed(() => (props.color ? '' : DOT[props.status]))
+const dotStyle = computed(() => (props.color ? { background: props.color } : undefined))
+</script>
+
+<template>
+  <span class="text-sm inline-flex gap-1.5 items-center">
+    <span class="flex h-2 w-2 relative">
+      <span v-if="pulse" class="rounded-full opacity-75 inline-flex h-full w-full absolute animate-ping" :class="dotClass" :style="dotStyle" />
+      <span class="rounded-full inline-flex h-2 w-2 relative" :class="dotClass" :style="dotStyle" />
+    </span>
+    <slot>{{ label }}</slot>
+  </span>
+</template>

package/components/Display/DisplayTree.stories.ts

@@ -0,0 +1,76 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import DisplayTree from './DisplayTree.vue'
+
+// `component` is omitted: this is a generic SFC, which doesn't fit Storybook's
+// `Meta<typeof Component>` typing. The renders below use it directly.
+const meta = {
+  title: 'Display/DisplayTree',
+  tags: ['autodocs'],
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+const files = [
+  'src/main.ts',
+  'src/App.vue',
+  'src/components/Button.vue',
+  'src/components/Input.vue',
+  'src/utils/format.ts',
+  'src/utils/tree.ts',
+  'package.json',
+  'README.md',
+]
+
+export const Default: Story = {
+  render: () => ({
+    components: { DisplayTree },
+    setup() {
+      return { items: files, getPath: (f: string) => f }
+    },
+    template: `<div class="w-72">
+      <DisplayTree :items="items" :get-path="getPath" />
+    </div>`,
+  }),
+}
+
+export const WithFileIcons: Story = {
+  render: () => ({
+    components: { DisplayTree },
+    setup() {
+      return { items: files, getPath: (f: string) => f }
+    },
+    template: `<div class="w-72">
+      <DisplayTree :items="items" :get-path="getPath" file-icons />
+    </div>`,
+  }),
+}
+
+export const Collapsed: Story = {
+  render: () => ({
+    components: { DisplayTree },
+    setup() {
+      return { items: files, getPath: (f: string) => f }
+    },
+    template: `<div class="w-72">
+      <DisplayTree :items="items" :get-path="getPath" :default-expanded="false" file-icons />
+    </div>`,
+  }),
+}
+
+export const CustomLeaf: Story = {
+  render: () => ({
+    components: { DisplayTree },
+    setup() {
+      return { items: files, getPath: (f: string) => f }
+    },
+    template: `<div class="w-72">
+      <DisplayTree :items="items" :get-path="getPath" file-icons>
+        <template #leaf="{ node }">
+          <span class="color-base">{{ node.name }}</span>
+          <span class="text-micro color-faint">leaf</span>
+        </template>
+      </DisplayTree>
+    </div>`,
+  }),
+}

package/components/Display/DisplayTree.vue

@@ -0,0 +1,102 @@
+<script setup lang="ts" generic="T">
+import type { TreeNode } from '../../utils/tree'
+import { computed, ref } from 'vue'
+import { getFileIcon, getFolderIcon } from '../../utils/icon'
+import { toTree } from '../../utils/tree'
+
+defineOptions({ name: 'DisplayTree' })
+
+const props = withDefaults(
+  defineProps<{
+    /** Flat list of items to nest into a tree (top-level usage). */
+    items?: T[]
+    /** Maps an item to its `separator`-delimited path. */
+    getPath?: (item: T) => string
+    /** Pre-built nodes (used internally for recursion; pass `items`+`getPath` instead). */
+    nodes?: TreeNode<T>[]
+    /** Segment separator passed to `toTree`. Defaults to `/`. */
+    separator?: string
+    /** Collapse single-child chains into one node. */
+    flatten?: boolean
+    /** Whether branches start expanded. */
+    defaultExpanded?: boolean
+    /** Show a `getFileIcon` glyph on leaf nodes. */
+    fileIcons?: boolean
+  }>(),
+  { flatten: true, defaultExpanded: true, fileIcons: false },
+)
+
+defineSlots<{
+  /** Fully customize any node's label. */
+  default?: (props: { node: TreeNode<T> }) => any
+  /** Customize a leaf node's label (falls back to `default`, then `node.name`). */
+  leaf?: (props: { node: TreeNode<T> }) => any
+}>()
+
+const tree = computed<TreeNode<T>[]>(() =>
+  props.nodes
+  ?? (props.items && props.getPath
+    ? toTree(props.items, props.getPath, { separator: props.separator, flatten: props.flatten })
+    : []),
+)
+
+// Per-node expansion state, defaulting to `defaultExpanded`.
+const openState = ref<Record<string, boolean>>({})
+function isOpen(path: string): boolean {
+  return openState.value[path] ?? props.defaultExpanded
+}
+function toggle(path: string): void {
+  openState.value[path] = !isOpen(path)
+}
+</script>
+
+<template>
+  <ul class="text-sm">
+    <li v-for="node in tree" :key="node.path">
+      <button
+        v-if="node.children.length"
+        type="button"
+        class="px-1 py-0.5 text-left outline-none rounded flex gap-1 w-full transition items-center hover:bg-active focus-visible:ring-2 focus-visible:ring-primary-500/40"
+        :aria-expanded="isOpen(node.path)"
+        @click="toggle(node.path)"
+      >
+        <svg
+          width="1em" height="1em" viewBox="0 0 24 24"
+          class="op-fade shrink-0 transition-transform"
+          :class="{ 'rotate-90': isOpen(node.path) }"
+          aria-hidden="true"
+        >
+          <path fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" d="m9 6l6 6l-6 6" />
+        </svg>
+        <span v-if="fileIcons" :class="getFolderIcon(node.name.split('/').pop(), isOpen(node.path))" class="op-fade shrink-0" aria-hidden="true" />
+        <span class="truncate"><slot :node="node">{{ node.name }}</slot></span>
+      </button>
+
+      <div v-else class="px-1 py-0.5 pl-5 rounded flex gap-1 items-center hover:bg-active">
+        <span v-if="fileIcons" :class="getFileIcon(node.path)" class="op-fade shrink-0" aria-hidden="true" />
+        <span class="truncate">
+          <slot name="leaf" :node="node">
+            <slot :node="node">{{ node.name }}</slot>
+          </slot>
+        </span>
+      </div>
+
+      <DisplayTree
+        v-if="node.children.length && isOpen(node.path)"
+        :nodes="node.children"
+        :separator="separator"
+        :flatten="flatten"
+        :default-expanded="defaultExpanded"
+        :file-icons="fileIcons"
+        class="ml-1.5 pl-4 border-l border-base"
+      >
+        <template v-if="$slots.default" #default="{ node: n }">
+          <slot :node="n" />
+        </template>
+        <template v-if="$slots.leaf" #leaf="{ node: n }">
+          <slot name="leaf" :node="n" />
+        </template>
+      </DisplayTree>
+    </li>
+  </ul>
+</template>

package/components/Display/DisplayVersion.stories.ts

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import DisplayVersion from './DisplayVersion.vue'
+
+const meta = {
+  title: 'Display/DisplayVersion',
+  component: DisplayVersion,
+  tags: ['autodocs'],
+  args: { version: '1.2.3' },
+} satisfies Meta<typeof DisplayVersion>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const WithPrefix: Story = { args: { version: '1.2.3' } }
+export const NoPrefix: Story = { args: { version: 'v0.1.0', prefix: false } }
+
+export const Examples: Story = {
+  render: () => ({
+    components: { DisplayVersion },
+    template: `<div class="flex gap-3">
+      <DisplayVersion version="1.2.3" />
+      <DisplayVersion version="v0.1.0" :prefix="false" />
+    </div>`,
+  }),
+}

package/components/Display/DisplayVersion.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    version: string
+    /** Render with a leading `v`. */
+    prefix?: boolean
+  }>(),
+  { prefix: true },
+)
+
+const display = computed(() => {
+  const v = props.version.replace(/^v/i, '')
+  return props.prefix ? `v${v}` : v
+})
+</script>
+
+<template>
+  <span class="font-mono tabular-nums">{{ display }}</span>
+</template>

package/components/Feedback/FeedbackEmptyState.stories.ts

@@ -0,0 +1,38 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import ActionButton from '../Action/ActionButton.vue'
+import FeedbackEmptyState from './FeedbackEmptyState.vue'
+
+const meta = {
+  title: 'Feedback/FeedbackEmptyState',
+  component: FeedbackEmptyState,
+  tags: ['autodocs'],
+  args: { title: 'No results', icon: 'i-ph:folder' },
+} satisfies Meta<typeof FeedbackEmptyState>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  render: () => ({
+    components: { FeedbackEmptyState },
+    template: `<div class="border border-base rounded-lg w-96">
+      <FeedbackEmptyState title="No results" icon="i-ph:folder">
+        <template #hint>Try a different search term.</template>
+      </FeedbackEmptyState>
+    </div>`,
+  }),
+}
+
+export const WithActions: Story = {
+  render: () => ({
+    components: { FeedbackEmptyState, ActionButton },
+    template: `<div class="border border-base rounded-lg w-96">
+      <FeedbackEmptyState title="No projects yet" icon="i-ph:folder">
+        <template #hint>Create your first project to get started.</template>
+        <template #actions>
+          <ActionButton variant="primary" icon="i-ph:folder">New project</ActionButton>
+        </template>
+      </FeedbackEmptyState>
+    </div>`,
+  }),
+}

package/components/Feedback/FeedbackEmptyState.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+defineProps<{
+  title?: string
+  icon?: string
+}>()
+</script>
+
+<template>
+  <div class="px-6 py-10 text-center op-fade flex flex-col gap-2 items-center justify-center">
+    <span v-if="icon" :class="icon" class="text-3xl op-mute" aria-hidden="true" />
+    <div v-if="title || $slots.default" class="text-sm color-base font-medium">
+      <slot>{{ title }}</slot>
+    </div>
+    <div v-if="$slots.hint" class="text-xs op-mute max-w-prose">
+      <slot name="hint" />
+    </div>
+    <div v-if="$slots.actions" class="mt-2 flex gap-2 items-center">
+      <slot name="actions" />
+    </div>
+  </div>
+</template>

package/components/Feedback/FeedbackLoading.stories.ts

@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import FeedbackLoading from './FeedbackLoading.vue'
+
+const meta = {
+  title: 'Feedback/FeedbackLoading',
+  component: FeedbackLoading,
+  tags: ['autodocs'],
+  args: { text: 'Loading data…' },
+} satisfies Meta<typeof FeedbackLoading>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = { args: { text: 'Loading data…' } }
+
+export const Panel: Story = {
+  render: () => ({
+    components: { FeedbackLoading },
+    template: `<div class="border border-base rounded-lg h-40 w-72">
+      <FeedbackLoading text="Loading…" panel />
+    </div>`,
+  }),
+}

package/components/Feedback/FeedbackLoading.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import FeedbackSpinner from './FeedbackSpinner.vue'
+
+defineProps<{
+  text?: string
+  /** Fill and center within the parent. */
+  panel?: boolean
+}>()
+</script>
+
+<template>
+  <div
+    class="op-fade flex gap-2 items-center justify-center"
+    :class="panel ? 'h-full w-full py-12' : 'py-4'"
+  >
+    <FeedbackSpinner />
+    <span v-if="text || $slots.default" class="text-sm">
+      <slot>{{ text }}</slot>
+    </span>
+  </div>
+</template>

package/components/Feedback/FeedbackSpinner.stories.ts

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import FeedbackSpinner from './FeedbackSpinner.vue'
+
+const meta = {
+  title: 'Feedback/FeedbackSpinner',
+  component: FeedbackSpinner,
+  tags: ['autodocs'],
+  args: { size: '1.5em' },
+} satisfies Meta<typeof FeedbackSpinner>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = { args: { size: '1.5em' } }
+
+export const Sizes: Story = {
+  render: () => ({
+    components: { FeedbackSpinner },
+    template: `<div class="flex items-center gap-6">
+      <FeedbackSpinner />
+      <FeedbackSpinner size="24" />
+      <FeedbackSpinner size="2em" />
+    </div>`,
+  }),
+}

package/components/Feedback/FeedbackSpinner.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    /** Diameter; a number is treated as px. */
+    size?: string | number
+  }>(),
+  { size: '1em' },
+)
+
+const dim = computed(() => (typeof props.size === 'number' ? `${props.size}px` : props.size))
+</script>
+
+<template>
+  <span
+    class="border-2 border-current border-t-transparent rounded-full inline-block animate-spin"
+    :style="{ width: dim, height: dim }"
+    role="status"
+    aria-label="Loading"
+  />
+</template>

package/components/Feedback/FeedbackTip.stories.ts

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import FeedbackTip from './FeedbackTip.vue'
+
+const meta = {
+  title: 'Feedback/FeedbackTip',
+  component: FeedbackTip,
+  tags: ['autodocs'],
+  argTypes: {
+    type: { control: 'inline-radio', options: ['info', 'success', 'warning', 'error'] },
+  },
+  args: { type: 'info' },
+} satisfies Meta<typeof FeedbackTip>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Info: Story = {
+  render: () => ({
+    components: { FeedbackTip },
+    template: `<FeedbackTip type="info" class="w-96">An informational note.</FeedbackTip>`,
+  }),
+}
+
+export const Types: Story = {
+  render: () => ({
+    components: { FeedbackTip },
+    template: `<div class="flex flex-col gap-3 w-96">
+      <FeedbackTip type="info" icon="i-ph:folder">An informational note.</FeedbackTip>
+      <FeedbackTip type="success">Saved successfully.</FeedbackTip>
+      <FeedbackTip type="warning">Careful with this setting.</FeedbackTip>
+      <FeedbackTip type="error">Something went wrong.</FeedbackTip>
+    </div>`,
+  }),
+}

package/components/Feedback/FeedbackTip.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    type?: 'info' | 'success' | 'warning' | 'error'
+    icon?: string
+  }>(),
+  { type: 'info' },
+)
+
+const COLORS = {
+  info: 'bg-blue-400/10 border-blue-500/20 text-blue-700 dark:text-blue-300',
+  success: 'bg-green-400/10 border-green-500/20 text-green-700 dark:text-green-300',
+  warning: 'bg-amber-400/10 border-amber-500/20 text-amber-700 dark:text-amber-300',
+  error: 'bg-red-400/10 border-red-500/20 text-red-700 dark:text-red-300',
+} as const
+
+const cls = computed(() => COLORS[props.type])
+</script>
+
+<template>
+  <div class="text-sm p-3 border rounded-lg flex gap-2" :class="cls" role="note">
+    <span v-if="icon" :class="icon" class="mt-0.5 shrink-0" aria-hidden="true" />
+    <div class="min-w-0">
+      <slot />
+    </div>
+  </div>
+</template>

package/components/Feedback/FeedbackToasts.stories.ts

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import type { ToastItem } from './FeedbackToasts.vue'
+import { ref } from 'vue'
+import ActionButton from '../Action/ActionButton.vue'
+import FeedbackToasts from './FeedbackToasts.vue'
+
+const meta = {
+  title: 'Feedback/FeedbackToasts',
+  component: FeedbackToasts,
+  tags: ['autodocs'],
+  args: { items: [] }, // required prop; the story drives a live list via render
+} satisfies Meta<typeof FeedbackToasts>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// Toasts are controlled: the app owns the list (here a local ref) and removes
+// items on `dismiss` — the package holds no queue state.
+export const Default: Story = {
+  render: () => ({
+    components: { ActionButton, FeedbackToasts },
+    setup() {
+      const items = ref<ToastItem[]>([])
+      let counter = 0
+      function dismiss(id: string | number): void {
+        items.value = items.value.filter(i => i.id !== id)
+      }
+      function show(): void {
+        const id = ++counter
+        items.value.push({ id, title: 'Saved', message: 'Your changes were saved.', type: 'success', icon: 'i-ph:folder' })
+        setTimeout(dismiss, 4000, id)
+      }
+      return { items, show, dismiss }
+    },
+    template: `<div>
+      <ActionButton @click="show">Show toast</ActionButton>
+      <FeedbackToasts :items="items" position="bottom-right" @dismiss="dismiss" />
+    </div>`,
+  }),
+}