frappe-ui 1.0.0-beta.2 → 1.0.0-beta.21

package/src/components/SettingsDialog/SettingsPanel.vue

@@ -0,0 +1,26 @@
+<template>
+  <!--
+    One tab's content column (role="tabpanel"). Compose a SettingsHeader (fixed)
+    and a SettingsBody (scrolls) inside so the header stays pinned while the body
+    scrolls — search inputs, filters, and table column-headers stay visible.
+
+    `data-[state=inactive]:hidden` is required: reka-ui hides inactive panels via
+    the `hidden` attribute, but our `flex` utility has equal specificity and would
+    otherwise win and reveal them.
+  -->
+  <TabsContent
+    :value="value"
+    class="flex min-h-0 flex-1 flex-col focus-visible:outline-none data-[state=inactive]:hidden"
+  >
+    <slot />
+  </TabsContent>
+</template>
+
+<script setup lang="ts">
+import { TabsContent } from 'reka-ui'
+
+defineProps<{
+  /** Unique tab id — must match the SettingsNavItem `value` that controls it. */
+  value: string | number
+}>()
+</script>

package/src/components/SettingsDialog/SettingsRow.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="flex items-center gap-8 py-3.5">
+    <div class="min-w-0 flex-1">
+      <component
+        :is="resolvedFor ? 'label' : 'div'"
+        :for="resolvedFor"
+        class="text-base-medium block text-ink-gray-8"
+        :class="{ 'cursor-pointer': resolvedFor }"
+      >
+        {{ title }}
+      </component>
+      <div v-if="description" class="mt-1 text-base leading-5 text-ink-gray-6">
+        {{ description }}
+      </div>
+    </div>
+    <div ref="control" class="flex shrink-0 items-start justify-end">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, onMounted, onUpdated, ref } from 'vue'
+
+const props = defineProps<{
+  /** Setting name, rendered on the left. */
+  title: string
+  /** Optional helper text under the title. */
+  description?: string
+  /** Explicit id to associate the title label with. Overrides auto-detection. */
+  labelFor?: string
+}>()
+
+// frappe-ui form controls (Switch, Checkbox, …) render their interactive
+// element with `data-slot="control"` and an auto-generated id. Detect it so the
+// title acts as a clickable <label> without the caller wiring up an id.
+const CONTROL_SELECTOR =
+  '[data-slot="control"], [role="switch"], [role="checkbox"], input, select, textarea'
+
+const control = ref<HTMLElement | null>(null)
+const detectedFor = ref<string | undefined>()
+const resolvedFor = computed(() => props.labelFor ?? detectedFor.value)
+
+function syncControlId() {
+  if (props.labelFor) return
+  detectedFor.value =
+    control.value?.querySelector<HTMLElement>(CONTROL_SELECTOR)?.id || undefined
+}
+
+onMounted(syncControlId)
+onUpdated(syncControlId)
+</script>

package/src/components/SettingsDialog/SettingsSidebar.vue

@@ -0,0 +1,16 @@
+<template>
+  <!-- role="tablist" + vertical roving focus, applied to the styled sidebar. -->
+  <TabsList as-child>
+    <div
+      class="flex max-h-[38vh] w-full shrink-0 flex-col overflow-y-auto border-b border-outline-gray-1 bg-surface-sidebar p-2 sm:max-h-none sm:w-[220px] sm:border-b-0 sm:border-r"
+    >
+      <div class="space-y-4">
+        <slot />
+      </div>
+    </div>
+  </TabsList>
+</template>
+
+<script setup lang="ts">
+import { TabsList } from 'reka-ui'
+</script>

package/src/components/SettingsDialog/index.ts

@@ -0,0 +1,10 @@
+export { default as SettingsDialog } from './SettingsDialog.vue'
+export { default as SettingsSidebar } from './SettingsSidebar.vue'
+export { default as SettingsNavGroup } from './SettingsNavGroup.vue'
+export { default as SettingsNavItem } from './SettingsNavItem.vue'
+export { default as SettingsContent } from './SettingsContent.vue'
+export { default as SettingsPanel } from './SettingsPanel.vue'
+export { default as SettingsHeader } from './SettingsHeader.vue'
+export { default as SettingsBody } from './SettingsBody.vue'
+export { default as SettingsRow } from './SettingsRow.vue'
+export type { SettingsDialogProps } from './types'

package/src/components/SettingsDialog/stories/Default.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import { markRaw, ref } from 'vue'
+import {
+  Avatar,
+  Button,
+  SettingsContent,
+  SettingsDialog,
+  SettingsNavGroup,
+  SettingsNavItem,
+  SettingsPanel,
+  SettingsSidebar,
+} from 'frappe-ui'
+import ProfilePanel from './panels/ProfilePanel.vue'
+import PreferencesPanel from './panels/PreferencesPanel.vue'
+import NotificationsPanel from './panels/NotificationsPanel.vue'
+import UsersPanel from './panels/UsersPanel.vue'
+
+const open = ref(false)
+
+// Modeled on Gameplan's settings: grouped tabs, an avatar on the Profile tab,
+// and panels that range from simple forms to a long, searchable user table.
+const groups = [
+  {
+    label: 'User settings',
+    tabs: [
+      {
+        label: 'Profile',
+        value: 'profile',
+        avatar: true,
+        component: markRaw(ProfilePanel),
+      },
+      {
+        label: 'Preferences',
+        value: 'preferences',
+        icon: 'lucide-sliders-horizontal',
+        component: markRaw(PreferencesPanel),
+      },
+      {
+        label: 'Notifications',
+        value: 'notifications',
+        icon: 'lucide-bell',
+        component: markRaw(NotificationsPanel),
+      },
+    ],
+  },
+  {
+    label: 'Administration',
+    tabs: [
+      {
+        label: 'Users',
+        value: 'users',
+        icon: 'lucide-users',
+        component: markRaw(UsersPanel),
+      },
+    ],
+  },
+]
+
+const tabs = groups.flatMap((group) => group.tabs)
+const activeTab = ref(tabs[0].value)
+</script>
+
+<template>
+  <Button @click="open = true">Open settings</Button>
+  <SettingsDialog v-model="open" v-model:tab="activeTab">
+    <SettingsSidebar>
+      <SettingsNavGroup
+        v-for="group in groups"
+        :key="group.label"
+        :label="group.label"
+      >
+        <SettingsNavItem
+          v-for="tab in group.tabs"
+          :key="tab.value"
+          :value="tab.value"
+        >
+          <template #prefix>
+            <Avatar
+              v-if="tab.avatar"
+              size="xs"
+              label="Alex Rivera"
+              class="shrink-0"
+            />
+            <span
+              v-else
+              :class="[tab.icon, 'size-4 shrink-0 text-ink-gray-6']"
+            />
+          </template>
+          {{ tab.label }}
+        </SettingsNavItem>
+      </SettingsNavGroup>
+    </SettingsSidebar>
+    <SettingsContent>
+      <SettingsPanel v-for="tab in tabs" :key="tab.value" :value="tab.value">
+        <component :is="tab.component" />
+      </SettingsPanel>
+    </SettingsContent>
+  </SettingsDialog>
+</template>

package/src/components/SettingsDialog/stories/PanelBasic.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { TabsRoot } from 'reka-ui'
+import {
+  Select,
+  SettingsBody,
+  SettingsHeader,
+  SettingsPanel,
+  SettingsRow,
+  Switch,
+} from 'frappe-ui'
+
+const digestEnabled = ref(true)
+const frequency = ref('Weekly')
+const frequencyOptions = [
+  { label: 'Weekly', value: 'Weekly' },
+  { label: 'Fortnightly', value: 'Fortnightly' },
+  { label: 'Monthly', value: 'Monthly' },
+]
+</script>
+
+<template>
+  <!--
+    SettingsPanel is a reka-ui tabpanel, so it needs a TabsRoot ancestor. In the
+    full dialog SettingsDialog provides it; here we add a minimal one to show a
+    single panel in isolation.
+  -->
+  <div class="h-96 w-full overflow-hidden rounded border border-outline-gray-2">
+    <TabsRoot default-value="notifications" class="flex h-full">
+      <SettingsPanel value="notifications">
+        <SettingsHeader title="Notifications" />
+        <SettingsBody>
+          <div class="divide-y divide-outline-gray-1">
+            <SettingsRow
+              title="Enable email digests"
+              description="Send a summary of missed activity."
+            >
+              <Switch v-model="digestEnabled" />
+            </SettingsRow>
+            <SettingsRow
+              v-if="digestEnabled"
+              title="Digest frequency"
+              description="Choose how often you receive your digest."
+            >
+              <Select :options="frequencyOptions" v-model="frequency" />
+            </SettingsRow>
+          </div>
+        </SettingsBody>
+      </SettingsPanel>
+    </TabsRoot>
+  </div>
+</template>

package/src/components/SettingsDialog/stories/panels/NotificationsPanel.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  SettingsBody,
+  SettingsHeader,
+  SettingsRow,
+  Select,
+  Switch,
+} from 'frappe-ui'
+
+// A digest can be turned off entirely; the frequency / day rows only make sense
+// when it's on, so they appear conditionally — a common settings pattern.
+const digestEnabled = ref(true)
+
+const frequency = ref('Weekly')
+const frequencyOptions = [
+  { label: 'Weekly', value: 'Weekly' },
+  { label: 'Fortnightly', value: 'Fortnightly' },
+  { label: 'Monthly', value: 'Monthly' },
+]
+
+const day = ref('Monday')
+const dayOptions = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'].map(
+  (d) => ({
+    label: d,
+    value: d,
+  }),
+)
+</script>
+
+<template>
+  <SettingsHeader title="Notifications" />
+  <SettingsBody>
+    <div class="divide-y divide-outline-gray-1">
+      <SettingsRow
+        title="Enable email digests"
+        description="Send a summary of missed activity."
+      >
+        <Switch v-model="digestEnabled" />
+      </SettingsRow>
+      <SettingsRow
+        v-if="digestEnabled"
+        title="Digest frequency"
+        description="Choose how often you receive your digest."
+      >
+        <Select :options="frequencyOptions" v-model="frequency" />
+      </SettingsRow>
+      <SettingsRow
+        v-if="digestEnabled"
+        title="Send on"
+        description="Choose the weekday for your digest."
+      >
+        <Select :options="dayOptions" v-model="day" />
+      </SettingsRow>
+    </div>
+  </SettingsBody>
+</template>

package/src/components/SettingsDialog/stories/panels/PreferencesPanel.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  SettingsBody,
+  SettingsHeader,
+  SettingsRow,
+  Select,
+  Switch,
+} from 'frappe-ui'
+
+const theme = ref('system')
+const themeOptions = [
+  { label: 'System', value: 'system' },
+  { label: 'Light', value: 'light' },
+  { label: 'Dark', value: 'dark' },
+]
+
+const badgeStyle = ref('count')
+const badgeStyleOptions = [
+  { label: 'Dot', value: 'dot' },
+  { label: 'Count', value: 'count' },
+]
+
+const hideInactiveSpaces = ref(false)
+</script>
+
+<template>
+  <SettingsHeader title="Preferences" />
+  <SettingsBody>
+    <div class="flex flex-col gap-8">
+      <SettingsRow
+        title="Appearance"
+        description="Choose a light, dark, or system-matched interface."
+      >
+        <Select :options="themeOptions" v-model="theme" />
+      </SettingsRow>
+
+      <section>
+        <h3 class="text-base font-semibold text-ink-gray-8">Sidebar</h3>
+        <div class="mt-2 divide-y divide-outline-gray-1">
+          <SettingsRow
+            title="Unread badge"
+            description="Show unread activity as a dot or a count."
+          >
+            <Select :options="badgeStyleOptions" v-model="badgeStyle" />
+          </SettingsRow>
+          <SettingsRow
+            title="Inactive spaces"
+            description="Hide spaces with no activity for the last 2 months."
+          >
+            <Switch v-model="hideInactiveSpaces" />
+          </SettingsRow>
+        </div>
+      </section>
+    </div>
+  </SettingsBody>
+</template>

package/src/components/SettingsDialog/stories/panels/ProfilePanel.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  Avatar,
+  Button,
+  FormControl,
+  SettingsBody,
+  SettingsHeader,
+  Textarea,
+} from 'frappe-ui'
+
+const fullName = ref('Alex Rivera')
+const bio = ref(
+  'Product designer. Writing things down so we talk less and ship more.',
+)
+const email = ref('alex@example.com')
+</script>
+
+<template>
+  <SettingsHeader
+    title="Profile"
+    description="How you appear across the community."
+  />
+  <SettingsBody>
+    <div class="flex flex-col gap-6">
+      <div class="flex items-center gap-4">
+        <Avatar size="3xl" label="Alex Rivera" />
+        <div class="flex gap-2">
+          <Button>Upload photo</Button>
+          <Button variant="ghost">Remove</Button>
+        </div>
+      </div>
+      <FormControl label="Full name" v-model="fullName" />
+      <Textarea label="Bio" v-model="bio" :rows="3" />
+      <FormControl label="Email" type="email" v-model="email" disabled />
+    </div>
+  </SettingsBody>
+</template>

package/src/components/SettingsDialog/stories/panels/UsersPanel.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import {
+  Avatar,
+  Badge,
+  Button,
+  SettingsBody,
+  SettingsHeader,
+  TextInput,
+} from 'frappe-ui'
+
+// Demonstrates the fixed header: the title, search box and column header stay
+// pinned while the (long) user list scrolls underneath.
+const names = [
+  'Alex Rivera',
+  'Priya Nair',
+  'Sam Okafor',
+  'Mei Chen',
+  'Diego Santos',
+  'Lena Fischer',
+]
+const search = ref('')
+const users = Array.from({ length: 28 }, (_, i) => {
+  const name = names[i % names.length]
+  return {
+    name,
+    email: `${name.split(' ')[0].toLowerCase()}${i + 1}@example.com`,
+    role: i === 0 ? 'Admin' : 'Member',
+  }
+})
+const filtered = computed(() =>
+  users.filter((u) =>
+    u.name.toLowerCase().includes(search.value.toLowerCase()),
+  ),
+)
+</script>
+
+<template>
+  <SettingsHeader>
+    <div class="flex flex-col gap-4">
+      <div class="flex items-center justify-between gap-3">
+        <h2 class="text-lg font-semibold text-ink-gray-8">Users</h2>
+        <Button variant="solid" icon-left="lucide-plus">Invite</Button>
+      </div>
+      <TextInput v-model="search" placeholder="Search by name or email">
+        <template #prefix>
+          <span class="lucide-search size-4 text-ink-gray-4" />
+        </template>
+      </TextInput>
+      <div
+        class="grid h-8 grid-cols-[1fr_8rem] items-center border-b text-sm text-ink-gray-5"
+      >
+        <div>User</div>
+        <div>Role</div>
+      </div>
+    </div>
+  </SettingsHeader>
+  <SettingsBody>
+    <div class="divide-y divide-outline-gray-1">
+      <div
+        v-for="user in filtered"
+        :key="user.email"
+        class="grid grid-cols-[1fr_8rem] items-center py-2.5"
+      >
+        <div class="flex min-w-0 items-center gap-3">
+          <Avatar size="lg" :label="user.name" />
+          <div class="min-w-0">
+            <div class="truncate text-base text-ink-gray-8">
+              {{ user.name }}
+            </div>
+            <div class="truncate text-sm text-ink-gray-5">{{ user.email }}</div>
+          </div>
+        </div>
+        <Badge
+          theme="gray"
+          :variant="user.role === 'Admin' ? 'solid' : 'subtle'"
+        >
+          {{ user.role }}
+        </Badge>
+      </div>
+    </div>
+  </SettingsBody>
+</template>

package/src/components/SettingsDialog/types.ts

@@ -0,0 +1,21 @@
+import type { DialogSize } from '../Dialog/types'
+
+export interface SettingsDialogProps {
+  /** Max-width size of the dialog. */
+  size?: DialogSize
+
+  /** Enable the Cmd/Ctrl+Shift+, shortcut that toggles the dialog. */
+  shortcut?: boolean
+
+  /**
+   * Unmount a panel's content when its tab is inactive (reka-ui default: true).
+   * Set false to keep visited panels mounted (hidden) — preserves their state
+   * and scroll position across tab switches at the cost of memory.
+   */
+  unmountOnHide?: boolean
+}
+
+export interface SettingsDialogEmits {
+  /** Fired when the dialog is opened or closed. */
+  'update:modelValue': [value: boolean]
+}