@antfu/design 0.1.0

package/components/Layout/LayoutDataTable.vue

@@ -0,0 +1,145 @@
+<script setup lang="ts" generic="T">
+import { computed } from 'vue'
+
+export interface Column {
+  /** Property key on the row used for value lookup and sorting. */
+  key: string
+  /** Header label; falls back to `key`. */
+  label?: string
+  /** Cell + header text alignment. */
+  align?: 'left' | 'right' | 'center'
+  /** Allow clicking the header to sort by this column. */
+  sortable?: boolean
+  /** Fixed column width (any CSS length). */
+  width?: string
+}
+
+const props = withDefaults(
+  defineProps<{
+    columns: Column[]
+    rows: T[]
+    /** Stable key per row; defaults to the row index. */
+    rowKey?: (row: T, index: number) => string | number
+    /** Emit `sort` only and leave row ordering to the parent. */
+    manualSort?: boolean
+    /** Pin the header to the top while the body scrolls. */
+    stickyHeader?: boolean
+  }>(),
+  { manualSort: false, stickyHeader: true },
+)
+
+const emit = defineEmits<{
+  sort: [payload: { key: string, dir: 'asc' | 'desc' }]
+}>()
+
+defineSlots<{
+  cell?: (props: { row: T, column: Column, value: unknown }) => any
+  header?: (props: { column: Column }) => any
+}>()
+
+const sortBy = defineModel<string | undefined>('sortBy')
+const sortDir = defineModel<'asc' | 'desc'>('sortDir', { default: 'asc' })
+
+const alignClass = { left: 'text-left', right: 'text-right', center: 'text-center' }
+
+function valueOf(row: T, key: string): unknown {
+  return (row as Record<string, unknown>)[key]
+}
+
+const sortedRows = computed<T[]>(() => {
+  const key = sortBy.value
+  if (props.manualSort || !key)
+    return props.rows
+  const dir = sortDir.value === 'desc' ? -1 : 1
+  return [...props.rows].sort((a, b) => {
+    const av = valueOf(a, key)
+    const bv = valueOf(b, key)
+    if (av == null && bv == null)
+      return 0
+    if (av == null)
+      return -1 * dir
+    if (bv == null)
+      return 1 * dir
+    if (typeof av === 'number' && typeof bv === 'number')
+      return (av - bv) * dir
+    return String(av).localeCompare(String(bv)) * dir
+  })
+})
+
+function toggleSort(col: Column): void {
+  if (!col.sortable)
+    return
+  if (sortBy.value === col.key) {
+    sortDir.value = sortDir.value === 'asc' ? 'desc' : 'asc'
+  }
+  else {
+    sortBy.value = col.key
+    sortDir.value = 'asc'
+  }
+  emit('sort', { key: col.key, dir: sortDir.value })
+}
+
+function rowKeyOf(row: T, index: number): string | number {
+  return props.rowKey ? props.rowKey(row, index) : index
+}
+</script>
+
+<template>
+  <table class="text-sm w-full border-collapse">
+    <thead :class="stickyHeader ? 'sticky top-0 z-nav bg-secondary' : ''">
+      <tr>
+        <th
+          v-for="col in columns"
+          :key="col.key"
+          scope="col"
+          class="color-muted font-medium px-3 py-2 border-b border-base"
+          :class="alignClass[col.align ?? 'left']"
+          :style="col.width ? { width: col.width } : undefined"
+          :aria-sort="sortBy === col.key ? (sortDir === 'asc' ? 'ascending' : 'descending') : undefined"
+        >
+          <slot name="header" :column="col">
+            <button
+              v-if="col.sortable"
+              type="button"
+              class="outline-none rounded inline-flex gap-1 max-w-full items-center hover:color-base focus-visible:ring-2 focus-visible:ring-primary-500/40"
+              :class="[alignClass[col.align ?? 'left'], col.align === 'right' ? 'justify-end' : col.align === 'center' ? 'justify-center' : '']"
+              @click="toggleSort(col)"
+            >
+              <span class="truncate">{{ col.label ?? col.key }}</span>
+              <svg
+                viewBox="0 0 16 16"
+                width="12"
+                height="12"
+                aria-hidden="true"
+                class="shrink-0 transition"
+                :class="sortBy === col.key ? 'color-active' : 'op-mute'"
+                :style="sortBy === col.key && sortDir === 'desc' ? 'transform: rotate(180deg)' : undefined"
+              >
+                <path fill="currentColor" d="M8 4l3.5 5h-7z" />
+              </svg>
+            </button>
+            <span v-else class="max-w-full inline-block truncate">{{ col.label ?? col.key }}</span>
+          </slot>
+        </th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr
+        v-for="(row, i) in sortedRows"
+        :key="rowKeyOf(row, i)"
+        class="border-b border-mute hover:bg-active"
+      >
+        <td
+          v-for="col in columns"
+          :key="col.key"
+          class="px-3 py-1.5"
+          :class="alignClass[col.align ?? 'left']"
+        >
+          <slot name="cell" :row="row" :column="col" :value="valueOf(row, col.key)">
+            {{ String(valueOf(row, col.key)) }}
+          </slot>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>

package/components/Layout/LayoutExpandableList.stories.ts

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import LayoutExpandableList from './LayoutExpandableList.vue'
+
+// `component` is omitted: this is a generic SFC, which doesn't fit Storybook's
+// `Meta<typeof Component>` typing. The render below uses it directly.
+const meta = {
+  title: 'Layout/LayoutExpandableList',
+  tags: ['autodocs'],
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+export const Default: Story = {
+  render: () => ({
+    components: { LayoutExpandableList },
+    setup() {
+      return { items: Array.from({ length: 12 }, (_, i) => `Item ${i + 1}`) }
+    },
+    template: `<div class="w-64">
+      <LayoutExpandableList :items="items" :max="4">
+        <template #default="{ item }">
+          <div class="text-sm py-1 border-b border-base">{{ item }}</div>
+        </template>
+      </LayoutExpandableList>
+    </div>`,
+  }),
+}

package/components/Layout/LayoutExpandableList.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts" generic="T">
+import { computed, ref } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    items: T[]
+    /** How many to show before collapsing. */
+    max?: number
+    /** Reveal this many more per "Show more" click; omit to reveal all at once. */
+    step?: number
+    /** Show a control to reverse the list order. */
+    reversible?: boolean
+  }>(),
+  { max: 5 },
+)
+
+const slots = defineSlots<{
+  default?: (props: { item: T, index: number }) => any
+  title?: () => any
+}>()
+
+const shown = ref(props.max)
+const reversed = ref(false)
+
+const ordered = computed(() => (reversed.value ? [...props.items].reverse() : props.items))
+const visible = computed(() => ordered.value.slice(0, shown.value))
+const hidden = computed(() => Math.max(0, props.items.length - shown.value))
+const expanded = computed(() => shown.value >= props.items.length)
+const hasHeader = computed(() => props.reversible || !!slots.title)
+
+function more(): void {
+  shown.value = props.step ? Math.min(props.items.length, shown.value + props.step) : props.items.length
+}
+function showAll(): void {
+  shown.value = props.items.length
+}
+function collapse(): void {
+  shown.value = props.max
+}
+</script>
+
+<template>
+  <div>
+    <div v-if="hasHeader" class="text-sm mb-1 flex items-center justify-between">
+      <slot name="title" />
+      <button
+        v-if="reversible"
+        type="button"
+        class="btn-action-sm"
+        :aria-pressed="reversed"
+        @click="reversed = !reversed"
+      >
+        <span aria-hidden="true">⇅</span>
+        Reverse
+      </button>
+    </div>
+    <div class="relative">
+      <template v-for="(item, i) in visible" :key="i">
+        <slot :item="item" :index="i" />
+      </template>
+      <div
+        v-if="!expanded"
+        class="h-8 pointer-events-none inset-x-0 bottom-0 absolute bg-gradient-more"
+      />
+    </div>
+    <div v-if="hidden > 0 || expanded" class="text-sm mt-1 flex gap-3 items-center">
+      <button
+        v-if="hidden > 0"
+        type="button"
+        class="color-active outline-none rounded inline-flex gap-1 items-center hover:underline focus-visible:ring-2 focus-visible:ring-primary-500/40"
+        @click="more()"
+      >
+        Show more
+        <span class="text-micro px-1.5 rounded-full bg-active inline-flex h-4 items-center tabular-nums">+{{ hidden }}</span>
+      </button>
+      <button
+        v-if="step && hidden > step"
+        type="button"
+        class="outline-none rounded op-fade hover:op100 hover:underline focus-visible:ring-2 focus-visible:ring-primary-500/40"
+        @click="showAll()"
+      >
+        Show all
+      </button>
+      <button
+        v-if="expanded && items.length > max"
+        type="button"
+        class="outline-none rounded op-fade hover:op100 hover:underline focus-visible:ring-2 focus-visible:ring-primary-500/40"
+        @click="collapse()"
+      >
+        Show less
+      </button>
+    </div>
+  </div>
+</template>

package/components/Layout/LayoutPanelGrids.stories.ts

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import LayoutPanelGrids from './LayoutPanelGrids.vue'
+
+const meta = {
+  title: 'Layout/LayoutPanelGrids',
+  component: LayoutPanelGrids,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: { control: 'inline-radio', options: ['dots', 'grid'] },
+  },
+  args: { variant: 'dots', size: 16 },
+} satisfies Meta<typeof LayoutPanelGrids>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Dots: Story = {
+  render: args => ({
+    components: { LayoutPanelGrids },
+    setup: () => ({ args }),
+    template: `<LayoutPanelGrids v-bind="args" class="rounded-lg border border-base">
+      <span class="text-sm color-muted">No data yet</span>
+    </LayoutPanelGrids>`,
+  }),
+}
+
+export const Grid: Story = { ...Dots, args: { variant: 'grid' } }
+export const LargeCells: Story = { ...Dots, args: { variant: 'grid', size: 32 } }

package/components/Layout/LayoutPanelGrids.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+const props = withDefaults(
+  defineProps<{
+    /** Background pattern style. */
+    variant?: 'dots' | 'grid'
+    /** Pattern cell size in px. */
+    size?: number
+  }>(),
+  { variant: 'dots', size: 16 },
+)
+
+// Use the static `bg-dots` / `bg-grid` classes (statically extractable by
+// UnoCSS) for the pattern, and override the cell size via inline
+// `background-size` — a runtime-built `bg-grid-${size}` class would not be
+// generated, so the pattern wouldn't render.
+const patternClass = computed(() => (props.variant === 'grid' ? 'bg-grid' : 'bg-dots'))
+const sizeStyle = computed(() => ({ backgroundSize: `${props.size}px ${props.size}px` }))
+</script>
+
+<template>
+  <div class="flex min-h-40 items-center justify-center relative" :class="patternClass" :style="sizeStyle">
+    <slot />
+  </div>
+</template>

package/components/Layout/LayoutSectionBlock.stories.ts

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import LayoutSectionBlock from './LayoutSectionBlock.vue'
+
+const meta = {
+  title: 'Layout/LayoutSectionBlock',
+  component: LayoutSectionBlock,
+  tags: ['autodocs'],
+  args: { title: 'Section', icon: 'i-ph:folder' },
+} satisfies Meta<typeof LayoutSectionBlock>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Open: Story = {
+  render: () => ({
+    components: { LayoutSectionBlock },
+    template: `<div class="w-80">
+      <LayoutSectionBlock title="Open by default" icon="i-ph:folder">
+        <p class="text-sm color-muted">Collapsible content.</p>
+      </LayoutSectionBlock>
+    </div>`,
+  }),
+}
+
+export const Collapsed: Story = {
+  render: () => ({
+    components: { LayoutSectionBlock },
+    template: `<div class="w-80 flex flex-col gap-2">
+      <LayoutSectionBlock title="Open by default" icon="i-ph:folder">
+        <p class="text-sm color-muted">Collapsible content.</p>
+      </LayoutSectionBlock>
+      <LayoutSectionBlock title="Collapsed" :open="false">
+        <p class="text-sm color-muted">Hidden until expanded.</p>
+      </LayoutSectionBlock>
+    </div>`,
+  }),
+}

package/components/Layout/LayoutSectionBlock.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { CollapsibleContent, CollapsibleRoot, CollapsibleTrigger } from 'reka-ui'
+
+defineProps<{
+  title?: string
+  icon?: string
+}>()
+
+const open = defineModel<boolean>('open', { default: true })
+</script>
+
+<template>
+  <CollapsibleRoot v-model:open="open" class="border border-base rounded-lg overflow-hidden">
+    <CollapsibleTrigger
+      class="group text-sm font-medium px-3 py-2 outline-none bg-secondary flex gap-2 w-full transition items-center hover:bg-active focus-visible:ring-2 focus-visible:ring-primary-500/40"
+    >
+      <svg
+        width="1em"
+        height="1em"
+        viewBox="0 0 24 24"
+        class="op-fade transition-transform group-data-[state=open]:rotate-90"
+        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="icon" :class="icon" aria-hidden="true" />
+      <slot name="title">
+        {{ title }}
+      </slot>
+    </CollapsibleTrigger>
+    <CollapsibleContent>
+      <div class="p-3">
+        <slot />
+      </div>
+    </CollapsibleContent>
+  </CollapsibleRoot>
+</template>

package/components/Layout/LayoutSideNav.stories.ts

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+import LayoutSideNav from './LayoutSideNav.vue'
+
+// `component`/`typeof` omitted: the `v-model` + header/footer slots don't fit
+// Storybook's args typing for a render-based story. The render uses it directly.
+const meta = {
+  title: 'Layout/LayoutSideNav',
+  tags: ['autodocs'],
+} satisfies Meta
+
+export default meta
+type Story = StoryObj
+
+const items = [
+  { value: 'modules', label: 'Modules', icon: 'i-catppuccin:folder' },
+  { value: 'graph', label: 'Graph', icon: 'i-catppuccin:typescript' },
+  { value: 'issues', label: 'Issues', icon: 'i-catppuccin:json', badge: 12 },
+  { value: 'settings', label: 'Settings', icon: 'i-catppuccin:toml', disabled: true },
+]
+
+export const Default: Story = {
+  render: () => ({
+    components: { LayoutSideNav },
+    setup() {
+      const active = ref('modules')
+      return { active, items }
+    },
+    template: `<div class="w-56 border border-base rounded-lg">
+      <LayoutSideNav v-model="active" :items="items" />
+    </div>`,
+  }),
+}

package/components/Layout/LayoutSideNav.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+export interface NavItem {
+  value: string
+  label?: string
+  /** Leading icon class (e.g. `i-catppuccin:folder`). */
+  icon?: string
+  /** Render the row as a link instead of a button. */
+  href?: string
+  /** Optional trailing count/label chip. */
+  badge?: string | number
+  disabled?: boolean
+}
+
+defineProps<{
+  items: NavItem[]
+}>()
+
+/** Currently active item `value`. */
+const model = defineModel<string>()
+</script>
+
+<template>
+  <nav class="p-2 flex flex-col gap-0.5">
+    <slot name="header" />
+    <component
+      :is="item.href ? 'a' : 'button'"
+      v-for="item in items"
+      :key="item.value"
+      :href="item.href"
+      :type="item.href ? undefined : 'button'"
+      :aria-current="item.value === model ? 'page' : undefined"
+      class="text-sm px-2 py-1.5 text-left outline-none rounded-md flex gap-2 w-full transition items-center focus-visible:ring-2 focus-visible:ring-primary-500/40"
+      :class="[
+        item.value === model ? 'bg-active color-active font-medium' : 'color-muted hover:bg-active hover:color-base',
+        item.disabled ? 'op50 pointer-events-none' : '',
+      ]"
+      @click="!item.href && (model = item.value)"
+    >
+      <span v-if="item.icon" :class="item.icon" aria-hidden="true" />
+      <span class="flex-1 truncate">{{ item.label ?? item.value }}</span>
+      <span
+        v-if="item.badge != null"
+        class="text-micro px-1.5 rounded-full bg-active"
+      >{{ item.badge }}</span>
+    </component>
+    <slot name="footer" />
+  </nav>
+</template>

package/components/Layout/LayoutSplitPane.stories.ts

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { Pane } from 'splitpanes'
+import LayoutSplitPane from './LayoutSplitPane.vue'
+
+const meta = {
+  title: 'Layout/LayoutSplitPane',
+  component: LayoutSplitPane,
+  tags: ['autodocs'],
+} satisfies Meta<typeof LayoutSplitPane>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Horizontal: Story = {
+  render: () => ({
+    components: { LayoutSplitPane, Pane },
+    template: `<div class="border border-base rounded-lg h-64 w-full overflow-hidden">
+      <LayoutSplitPane>
+        <Pane :size="40">
+          <div class="text-sm color-muted h-full p-3">Left pane</div>
+        </Pane>
+        <Pane :size="60">
+          <div class="text-sm color-muted h-full p-3">Right pane</div>
+        </Pane>
+      </LayoutSplitPane>
+    </div>`,
+  }),
+}
+
+export const Vertical: Story = {
+  render: () => ({
+    components: { LayoutSplitPane, Pane },
+    template: `<div class="border border-base rounded-lg h-64 w-full overflow-hidden">
+      <LayoutSplitPane horizontal>
+        <Pane>
+          <div class="text-sm color-muted h-full p-3">Top pane</div>
+        </Pane>
+        <Pane>
+          <div class="text-sm color-muted h-full p-3">Bottom pane</div>
+        </Pane>
+      </LayoutSplitPane>
+    </div>`,
+  }),
+}

package/components/Layout/LayoutSplitPane.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { SplitpanesResizedPayload } from 'splitpanes'
+import { useLocalStorage } from '@vueuse/core'
+import { Splitpanes } from 'splitpanes'
+import { ref } from 'vue'
+// Base layout + theming ship together in `@antfu/design/styles/splitpanes.css`.
+
+const props = withDefaults(
+  defineProps<{
+    horizontal?: boolean
+    /** Persist pane sizes under this localStorage key (via VueUse). */
+    storageKey?: string
+  }>(),
+  {},
+)
+
+const sizes = props.storageKey
+  ? useLocalStorage<number[]>(props.storageKey, [])
+  : ref<number[]>([])
+
+function onResized(payload: SplitpanesResizedPayload): void {
+  sizes.value = payload.panes.map(p => p.size)
+}
+</script>
+
+<template>
+  <Splitpanes :horizontal="horizontal" @resized="onResized">
+    <slot :sizes="sizes" />
+  </Splitpanes>
+</template>

package/components/Layout/LayoutTabs.stories.ts

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite'
+import { ref } from 'vue'
+import LayoutTabs from './LayoutTabs.vue'
+
+const meta = {
+  title: 'Layout/LayoutTabs',
+  component: LayoutTabs,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: { control: 'inline-radio', options: ['underline', 'segment'] },
+  },
+  args: { tabs: [] }, // required prop; each story supplies real tabs via render
+} satisfies Meta<typeof LayoutTabs>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Underline: Story = {
+  render: () => ({
+    components: { LayoutTabs },
+    setup() {
+      return {
+        tab: ref('overview'),
+        tabs: [
+          { value: 'overview', label: 'Overview', count: 12 },
+          { value: 'deps', label: 'Dependencies', count: 48 },
+          { value: 'settings', label: 'Settings' },
+        ],
+      }
+    },
+    template: `<LayoutTabs v-model="tab" :tabs="tabs" class="w-96" />`,
+  }),
+}
+
+export const Segment: Story = {
+  render: () => ({
+    components: { LayoutTabs },
+    setup() {
+      return { tab: ref('list'), tabs: [{ value: 'list', label: 'List' }, { value: 'grid', label: 'Grid' }] }
+    },
+    template: `<LayoutTabs v-model="tab" :tabs="tabs" variant="segment" />`,
+  }),
+}

package/components/Layout/LayoutTabs.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { TabsIndicator, TabsList, TabsRoot, TabsTrigger } from 'reka-ui'
+
+export interface TabItem {
+  value: string
+  label?: string
+  icon?: string
+  /** Optional count chip. */
+  count?: number
+  /** Render this trigger as a link (nav-style tabs). */
+  href?: string
+  disabled?: boolean
+}
+
+withDefaults(
+  defineProps<{
+    tabs: TabItem[]
+    /** `underline` (default) or `segment` (pill switcher). */
+    variant?: 'underline' | 'segment'
+  }>(),
+  { variant: 'underline' },
+)
+
+const model = defineModel<string>()
+</script>
+
+<template>
+  <TabsRoot v-model="model" :class="variant === 'segment' ? '' : 'border-b border-base'">
+    <TabsList
+      class="flex items-center relative"
+      :class="variant === 'segment' ? 'gap-1 p-1 rounded-lg bg-secondary w-max' : 'gap-1'"
+    >
+      <TabsTrigger
+        v-for="tab in tabs"
+        :key="tab.value"
+        :value="tab.value"
+        :as="tab.href ? 'a' : 'button'"
+        :href="tab.href"
+        :disabled="tab.disabled"
+        class="text-sm color-muted outline-none flex gap-1.5 transition items-center relative disabled:op50 focus-visible:ring-2 focus-visible:ring-primary-500/40"
+        :class="variant === 'segment'
+          ? 'px-3 py-1 rounded-md data-[state=active]:bg-base data-[state=active]:color-base data-[state=active]:shadow-sm'
+          : 'px-3 py-2 -mb-px border-b-2 border-transparent hover:color-base data-[state=active]:color-active data-[state=active]:border-primary-500 dark:data-[state=active]:border-primary-400'"
+      >
+        <span v-if="tab.icon" :class="tab.icon" aria-hidden="true" />
+        {{ tab.label ?? tab.value }}
+        <span
+          v-if="tab.count != null"
+          class="text-micro font-mono px-1.5 rounded-full bg-active inline-flex h-5 min-w-5 items-center justify-center tabular-nums"
+        >{{ tab.count }}</span>
+      </TabsTrigger>
+      <TabsIndicator v-if="variant === 'underline'" class="rounded-full bg-primary-500 h-0.5 w-[--reka-tabs-indicator-size] translate-x-[--reka-tabs-indicator-position] transition-all duration-200 bottom-0 left-0 absolute" />
+    </TabsList>
+    <slot />
+  </TabsRoot>
+</template>