@antfu/design 0.1.0

package/components/Display/DisplayFilePath.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { vTooltip } from 'floating-vue'
+import { computed } from 'vue'
+import { getFileIcon } from '../../utils/icon'
+import { parseReadablePath } from '../../utils/path'
+
+const props = withDefaults(
+  defineProps<{
+    path: string
+    /** Project root, trimmed from the display path. */
+    root?: string
+    /** Show a leading file icon. */
+    icon?: boolean
+    /** Link target. */
+    href?: string
+    /** Trailing line number (rendered `:line`). */
+    line?: number
+    /** Trailing column number (rendered `:line:col`, needs `line`). */
+    column?: number
+    /** Dim the directory portion of the path. */
+    dim?: boolean
+    /** Style as interactive (cursor + hover) for `@click` usage even without `href`. */
+    clickable?: boolean
+    /** Prefix substituted for a `.pnpm` store chunk (passed to the path parser). */
+    pnpmCollapse?: string
+  }>(),
+  { root: '', icon: true, dim: true },
+)
+
+const parsed = computed(() => parseReadablePath(props.path, props.root, { pnpmCollapse: props.pnpmCollapse }))
+
+/** Split the display path into directory / base / query(+hash) for distinct styling. */
+const segments = computed(() => {
+  const full = parsed.value.path
+  const q = full.search(/[?#]/)
+  const clean = q === -1 ? full : full.slice(0, q)
+  const query = q === -1 ? '' : full.slice(q)
+  const idx = clean.lastIndexOf('/')
+  const dir = idx === -1 ? '' : clean.slice(0, idx + 1)
+  const base = idx === -1 ? clean : clean.slice(idx + 1)
+  return { dir, base, query }
+})
+
+const interactive = computed(() => props.href != null || props.clickable)
+</script>
+
+<template>
+  <component
+    :is="href ? 'a' : 'span'"
+    v-tooltip="path"
+    :href="href"
+    class="text-sm font-mono inline-flex gap-1 max-w-full min-w-0 items-center"
+    :class="{ 'hover:color-active transition': interactive, 'cursor-pointer': clickable && !href }"
+  >
+    <span v-if="icon" :class="getFileIcon(segments.base)" class="op-fade shrink-0" aria-hidden="true" />
+    <span class="truncate">
+      <span v-if="segments.dir" :class="dim ? 'op-mute' : 'color-base'">{{ segments.dir }}</span><span class="color-base">{{ segments.base }}</span><span v-if="segments.query" class="op-mute italic">{{ segments.query }}</span><span v-if="line != null" class="op-mute">:{{ line }}<template v-if="column != null">:{{ column }}</template></span>
+    </span>
+    <span v-if="parsed.moduleName" class="text-xs op-mute shrink-0">({{ parsed.moduleName }})</span>
+  </component>
+</template>

package/components/Display/DisplayKbd.stories.ts

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import DisplayKbd from './DisplayKbd.vue'
+
+const meta = {
+  title: 'Display/DisplayKbd',
+  component: DisplayKbd,
+  tags: ['autodocs'],
+  args: { keys: 'mod+k' },
+} satisfies Meta<typeof DisplayKbd>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = { args: { keys: 'mod+k' } }
+export const Chord: Story = { args: { keys: 'g g' } }
+
+export const Bindings: Story = {
+  render: () => ({
+    components: { DisplayKbd },
+    template: `<div class="flex items-center gap-3">
+      <DisplayKbd keys="mod+k" />
+      <DisplayKbd keys="shift+?" />
+      <DisplayKbd keys="g g" />
+    </div>`,
+  }),
+}

package/components/Display/DisplayKbd.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { bindingDisplay } from '../../utils/keybinding'
+
+const props = defineProps<{
+  /** A chord/binding string, e.g. `mod+k` or `g g`, rendered as platform glyphs. */
+  keys?: string
+}>()
+
+const tokens = computed(() => (props.keys ? bindingDisplay(props.keys) : []))
+</script>
+
+<template>
+  <span class="inline-flex gap-0.5 items-center">
+    <template v-if="keys">
+      <kbd
+        v-for="(token, i) in tokens"
+        :key="i"
+        class="text-micro color-muted leading-none font-mono px-1 border border-base rounded bg-secondary inline-flex h-5 min-w-5 items-center justify-center"
+      >{{ token }}</kbd>
+    </template>
+    <kbd
+      v-else
+      class="text-micro color-muted leading-none font-mono px-1.5 border border-base rounded bg-secondary inline-flex h-5 min-w-5 items-center justify-center"
+    ><slot /></kbd>
+  </span>
+</template>

package/components/Display/DisplayKeyValue.stories.ts

@@ -0,0 +1,56 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import DisplayKeyValue from './DisplayKeyValue.vue'
+
+const meta = {
+  title: 'Display/DisplayKeyValue',
+  component: DisplayKeyValue,
+  tags: ['autodocs'],
+  args: { label: 'Version', value: '1.4.0' },
+} satisfies Meta<typeof DisplayKeyValue>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Inline: Story = { args: { label: 'Version', value: '1.4.0' } }
+export const Stacked: Story = { args: { label: 'Total size', value: '204 kB', orientation: 'stacked' } }
+
+export const DetailRows: Story = {
+  render: () => ({
+    components: { DisplayKeyValue },
+    template: `<div class="w-72 flex flex-col gap-1">
+      <DisplayKeyValue label="Name" value="@antfu/design" />
+      <DisplayKeyValue label="Version" value="1.4.0" />
+      <DisplayKeyValue label="License" value="MIT" :mono="false" />
+      <DisplayKeyValue label="Downloads" value="1,204,558" />
+    </div>`,
+  }),
+}
+
+export const StatStrip: Story = {
+  render: () => ({
+    components: { DisplayKeyValue },
+    template: `<div class="flex gap-6">
+      <DisplayKeyValue label="Files" value="128" orientation="stacked" />
+      <DisplayKeyValue label="Size" value="204 kB" orientation="stacked" />
+      <DisplayKeyValue label="Modules" value="42" orientation="stacked" />
+    </div>`,
+  }),
+}
+
+export const WithBadge: Story = {
+  render: () => ({
+    components: { DisplayKeyValue },
+    template: `<div class="w-72 flex flex-col gap-3">
+      <DisplayKeyValue label="Status" value="passing">
+        <template #badge>
+          <span class="badge-color-green">ok</span>
+        </template>
+      </DisplayKeyValue>
+      <DisplayKeyValue label="Coverage" value="98%" orientation="stacked">
+        <template #badge>
+          <span class="badge-color-blue">+2%</span>
+        </template>
+      </DisplayKeyValue>
+    </div>`,
+  }),
+}

package/components/Display/DisplayKeyValue.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
+    /** The label text (falls back slot: `#label`). */
+    label?: string
+    /** The value (falls back slot: `#default`). */
+    value?: string | number
+    /** Inline row or stacked stat. */
+    orientation?: 'inline' | 'stacked'
+    /** Render the value with `font-mono tabular-nums`. */
+    mono?: boolean
+  }>(),
+  { orientation: 'inline', mono: true },
+)
+
+defineSlots<{
+  /** The value content; falls back to the `value` prop. */
+  default?: () => any
+  /** The label content; falls back to the `label` prop. */
+  label?: () => any
+  /** Trailing badge / adornment. */
+  badge?: () => any
+}>()
+</script>
+
+<template>
+  <div
+    v-if="orientation === 'stacked'"
+    class="flex flex-col gap-0.5"
+  >
+    <span class="text-micro color-faint tracking-wide uppercase">
+      <slot name="label">{{ label }}</slot>
+    </span>
+    <span class="text-lg color-base flex gap-2 items-center" :class="{ 'font-mono tabular-nums': mono }">
+      <slot>{{ value }}</slot>
+      <slot name="badge" />
+    </span>
+  </div>
+  <div
+    v-else
+    class="flex gap-2 items-center justify-between"
+  >
+    <span class="text-sm color-muted">
+      <slot name="label">{{ label }}</slot>
+    </span>
+    <span class="text-sm color-base flex gap-2 items-center" :class="{ 'font-mono tabular-nums': mono }">
+      <slot>{{ value }}</slot>
+      <slot name="badge" />
+    </span>
+  </div>
+</template>

package/components/Display/DisplayLabel.stories.ts

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import DisplayLabel from './DisplayLabel.vue'
+
+const meta = {
+  title: 'Display/DisplayLabel',
+  component: DisplayLabel,
+  tags: ['autodocs'],
+  args: { text: 'bug', color: '#d73a4a' },
+} satisfies Meta<typeof DisplayLabel>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Colored: Story = { args: { text: 'bug', color: '#d73a4a' } }
+export const Muted: Story = { args: { text: 'wontfix' } }
+
+export const GitHubLabels: Story = {
+  render: () => ({
+    components: { DisplayLabel },
+    template: `<div class="flex flex-wrap gap-2">
+      <DisplayLabel text="bug" color="#d73a4a" />
+      <DisplayLabel text="enhancement" color="#a2eeef" />
+      <DisplayLabel text="docs" color="#0075ca" />
+      <DisplayLabel text="wontfix" />
+    </div>`,
+  }),
+}

package/components/Display/DisplayLabel.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useColorScheme } from '../../composables/colorScheme'
+import { labelStyle } from '../../utils/color'
+
+const props = defineProps<{
+  /** Display text. */
+  text?: string
+  /** Base hex color; a contrast-aware tinted chip is derived from it. */
+  color?: string
+  /** The app's current color scheme. Falls back to context, then `'light'`. */
+  colorScheme?: 'light' | 'dark'
+}>()
+
+const scheme = useColorScheme(() => props.colorScheme)
+
+const style = computed(() => {
+  if (!props.color)
+    return undefined
+  const s = labelStyle(props.color, scheme.value === 'dark')
+  return { color: s.color, background: s.background, borderColor: s.borderColor }
+})
+</script>
+
+<template>
+  <span
+    class="text-xs leading-none font-medium px-1.5 py-0.5 border rounded-full inline-flex gap-1 items-center"
+    :class="{ 'badge-muted border-transparent': !color }"
+    :style="style"
+  >
+    <slot>{{ text }}</slot>
+  </span>
+</template>

package/components/Display/DisplayNumber.stories.ts

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import DisplayNumber from './DisplayNumber.vue'
+
+const meta = {
+  title: 'Display/DisplayNumber',
+  component: DisplayNumber,
+  tags: ['autodocs'],
+  args: { value: 1234567 },
+} satisfies Meta<typeof DisplayNumber>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = { args: { value: 1234567 } }
+export const WithSuffix: Story = { args: { value: 42, suffix: 'ms' } }
+export const Percent: Story = { args: { value: 0.42, options: { style: 'percent' } } }
+
+export const Formats: Story = {
+  render: () => ({
+    components: { DisplayNumber },
+    template: `<div class="flex flex-col gap-2">
+      <DisplayNumber :value="1234567" />
+      <DisplayNumber :value="42" suffix="ms" />
+      <DisplayNumber :value="0.42" :options="{ style: 'percent' }" />
+    </div>`,
+  }),
+}

package/components/Display/DisplayNumber.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { formatNumber } from '../../utils/format'
+
+const props = withDefaults(
+  defineProps<{
+    value: number
+    prefix?: string
+    suffix?: string
+    /** Forwarded to `Intl.NumberFormat`. */
+    options?: Intl.NumberFormatOptions
+    mono?: boolean
+  }>(),
+  { mono: true },
+)
+
+const formatted = computed(() => formatNumber(props.value, props.options))
+</script>
+
+<template>
+  <span :class="{ 'font-mono tabular-nums': mono }">
+    <span v-if="prefix" class="op-fade">{{ prefix }}</span>{{ formatted }}<span v-if="suffix" class="text-xs ml-0.5 op-fade">{{ suffix }}</span>
+  </span>
+</template>

package/components/Display/DisplayNumberBadge.stories.ts

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import DisplayNumberBadge from './DisplayNumberBadge.vue'
+
+const meta = {
+  title: 'Display/DisplayNumberBadge',
+  component: DisplayNumberBadge,
+  tags: ['autodocs'],
+  args: { value: 128, prefix: '×' },
+} satisfies Meta<typeof DisplayNumberBadge>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = { args: { value: 128, prefix: '×' } }
+export const Colored: Story = { args: { value: 42, color: 'green' } }
+
+export const Examples: Story = {
+  render: () => ({
+    components: { DisplayNumberBadge },
+    template: `<div class="flex items-center gap-2">
+      <DisplayNumberBadge :value="128" prefix="×" />
+      <DisplayNumberBadge :value="42" color="green" />
+      <DisplayNumberBadge :value="0.42" :options="{ style: 'percent' }" color="blue" />
+    </div>`,
+  }),
+}

package/components/Display/DisplayNumberBadge.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import DisplayBadge from './DisplayBadge.vue'
+import DisplayNumber from './DisplayNumber.vue'
+
+withDefaults(
+  defineProps<{
+    value: number
+    prefix?: string
+    suffix?: string
+    options?: Intl.NumberFormatOptions
+    /** DisplayBadge color (palette name, hue, css color); defaults to muted. */
+    color?: boolean | number | string
+  }>(),
+  { color: false },
+)
+</script>
+
+<template>
+  <DisplayBadge :color="color" size="sm">
+    <DisplayNumber :value="value" :prefix="prefix" :suffix="suffix" :options="options" />
+  </DisplayBadge>
+</template>

package/components/Display/DisplayPackageName.stories.ts

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import DisplayPackageName from './DisplayPackageName.vue'
+
+const meta = {
+  title: 'Display/DisplayPackageName',
+  component: DisplayPackageName,
+  tags: ['autodocs'],
+  args: { name: '@antfu/design' },
+} satisfies Meta<typeof DisplayPackageName>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Scoped: Story = { args: { name: '@antfu/design' } }
+export const Unscoped: Story = { args: { name: 'unocss' } }
+
+export const Examples: Story = {
+  render: () => ({
+    components: { DisplayPackageName },
+    template: `<div class="flex gap-3">
+      <DisplayPackageName name="@antfu/design" />
+      <DisplayPackageName name="@vueuse/core" />
+      <DisplayPackageName name="unocss" />
+    </div>`,
+  }),
+}

package/components/Display/DisplayPackageName.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useColorScheme } from '../../composables/colorScheme'
+import { getHashColorFromString, getPluginColor, stripPluginPrefix } from '../../utils/color'
+
+const props = withDefaults(
+  defineProps<{
+    name: string
+    /** The app's current color scheme. Falls back to context, then `'light'`. */
+    colorScheme?: 'light' | 'dark'
+    /** Strip plugin prefixes (`vite-plugin-`, `unplugin-`, `vite:`, …) from the displayed name. */
+    strip?: boolean
+    /** Color the scope by ecosystem brand hue (vs a plain string hash). */
+    brand?: boolean
+    /** Extra brand hues merged over the defaults (see `getPluginColor`). */
+    brandHues?: Record<string, number>
+  }>(),
+  { brand: true },
+)
+
+const scheme = useColorScheme(() => props.colorScheme)
+const dark = computed(() => scheme.value === 'dark')
+
+const display = computed(() => (props.strip ? stripPluginPrefix(props.name) : props.name))
+
+const parts = computed(() => {
+  const n = display.value
+  if (n.startsWith('@')) {
+    const slash = n.indexOf('/')
+    if (slash !== -1)
+      return { scope: n.slice(0, slash + 1), rest: n.slice(slash + 1) }
+  }
+  return { scope: '', rest: n }
+})
+
+const scopeColor = computed(() => {
+  if (!parts.value.scope)
+    return undefined
+  return props.brand
+    ? getPluginColor(props.name, 1, dark.value, props.brandHues)
+    : getHashColorFromString(parts.value.scope, 1, dark.value)
+})
+</script>
+
+<template>
+  <span class="text-sm font-mono">
+    <span v-if="parts.scope" :style="{ color: scopeColor }">{{ parts.scope }}</span><span class="color-base">{{ parts.rest }}</span>
+  </span>
+</template>

package/components/Display/DisplayProgressBar.stories.ts

@@ -0,0 +1,29 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import DisplayProgressBar from './DisplayProgressBar.vue'
+
+const meta = {
+  title: 'Display/DisplayProgressBar',
+  component: DisplayProgressBar,
+  tags: ['autodocs'],
+  args: { value: 0.6, height: 6, rounded: true, label: 'Progress' },
+  decorators: [() => ({ template: '<div class="w-80"><story /></div>' })],
+} satisfies Meta<typeof DisplayProgressBar>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Determinate: Story = {
+  args: { value: 0.6 },
+}
+
+export const Indeterminate: Story = {
+  args: { value: undefined },
+}
+
+export const CustomColor: Story = {
+  args: { value: 0.75, color: 'hsl(153, 65%, 40%)' },
+}
+
+export const Tall: Story = {
+  args: { value: 0.4, height: 12 },
+}

package/components/Display/DisplayProgressBar.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    /** Progress from 0 to 1. Omit for an indeterminate (animated) bar. */
+    value?: number
+    /** Track height in pixels. */
+    height?: number
+    /**
+     * Bar color. A CSS color (`#…`, `rgb(…)`, `hsl(…)`, `var(…)`) is applied as
+     * a background; any other string is treated as a utility/token class.
+     * Defaults to `bg-primary-500`.
+     */
+    color?: string
+    /** Round the track and bar ends. */
+    rounded?: boolean
+    /** Accessible label, exposed as `aria-label`. */
+    label?: string
+  }>(),
+  { height: 6, rounded: true },
+)
+
+function isCssColor(value: string): boolean {
+  return /^#|^hsl|^rgb|^var\(/.test(value)
+}
+
+const indeterminate = computed(() => props.value == null)
+
+const clamped = computed(() => Math.min(Math.max(props.value ?? 0, 0), 1))
+
+const valueNow = computed(() => (indeterminate.value ? undefined : Math.round(clamped.value * 100)))
+
+const colorClass = computed(() =>
+  props.color == null
+    ? 'bg-primary-500'
+    : isCssColor(props.color)
+      ? ''
+      : props.color,
+)
+
+const colorStyle = computed(() =>
+  props.color != null && isCssColor(props.color) ? { background: props.color } : undefined,
+)
+
+const barStyle = computed(() => ({
+  ...colorStyle.value,
+  ...(indeterminate.value ? {} : { width: `${clamped.value * 100}%` }),
+}))
+</script>
+
+<template>
+  <div
+    class="bg-active w-full overflow-hidden"
+    :class="{ 'rounded-full': rounded }"
+    :style="{ height: `${height}px` }"
+    role="progressbar"
+    :aria-valuenow="valueNow"
+    :aria-valuemin="indeterminate ? undefined : 0"
+    :aria-valuemax="indeterminate ? undefined : 100"
+    :aria-label="label"
+  >
+    <div
+      class="h-full transition-all"
+      :class="[colorClass, { 'rounded-full': rounded, 'af-progress-indeterminate w-2/5': indeterminate }]"
+      :style="barStyle"
+    />
+  </div>
+</template>
+
+<style scoped>
+@keyframes af-progress-slide {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(350%);
+  }
+}
+
+.af-progress-indeterminate {
+  animation: af-progress-slide 1.2s ease-in-out infinite;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .af-progress-indeterminate {
+    animation: none;
+  }
+}
+</style>

package/components/Display/DisplayProportionBar.stories.ts

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import type { ProportionSegment } from './DisplayProportionBar.vue'
+import DisplayProportionBar from './DisplayProportionBar.vue'
+
+const meta = {
+  title: 'Display/DisplayProportionBar',
+  component: DisplayProportionBar,
+  tags: ['autodocs'],
+  args: { segments: [] }, // required prop; stories supply their own via render
+} satisfies Meta<typeof DisplayProportionBar>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const segments: ProportionSegment[] = [
+  { value: 60, label: 'JavaScript', color: '#f1e05a' },
+  { value: 30, label: 'TypeScript', color: '#3178c6' },
+  { value: 10, label: 'CSS', color: '#563d7c' },
+]
+
+export const Default: Story = {
+  args: { segments, height: 12 },
+  decorators: [() => ({ template: '<div class="w-80"><story /></div>' })],
+}
+
+export const HashColored: Story = {
+  render: () => ({
+    components: { DisplayProportionBar },
+    setup() {
+      return {
+        segments: [
+          { value: 5, label: 'vue' },
+          { value: 3, label: 'react' },
+          { value: 2, label: 'svelte' },
+        ] as ProportionSegment[],
+      }
+    },
+    template: `<div class="w-80"><DisplayProportionBar :segments="segments" :height="12" /></div>`,
+  }),
+}

package/components/Display/DisplayProportionBar.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useColorScheme } from '../../composables/colorScheme'
+import { getHashColorFromString } from '../../utils/color'
+
+export interface ProportionSegment {
+  value: number
+  color?: string
+  label?: string
+}
+
+const props = withDefaults(
+  defineProps<{
+    segments: ProportionSegment[]
+    height?: number
+    /** The app's current color scheme. Falls back to context, then `'light'`. */
+    colorScheme?: 'light' | 'dark'
+  }>(),
+  { height: 8 },
+)
+
+const scheme = useColorScheme(() => props.colorScheme)
+const total = computed(() => props.segments.reduce((sum, s) => sum + s.value, 0) || 1)
+
+function segColor(seg: ProportionSegment, i: number): string {
+  return seg.color ?? getHashColorFromString(seg.label ?? String(i), 1, scheme.value === 'dark')
+}
+</script>
+
+<template>
+  <div
+    class="rounded-full bg-active flex w-full overflow-hidden"
+    :style="{ height: `${height}px` }"
+  >
+    <div
+      v-for="(seg, i) in segments"
+      :key="i"
+      class="h-full"
+      :style="{ width: `${(seg.value / total) * 100}%`, background: segColor(seg, i) }"
+      :title="seg.label"
+    />
+  </div>
+</template>