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

package/src/components/Sidebar/Sidebar.vue

@@ -1,76 +1,84 @@
 <template>
   <div
-    class="flex h-full flex-col flex-shrink-0 overflow-y-auto overflow-x-hidden border-r border-outline-gray-1 bg-surface-menu-bar transition-all duration-300 ease-in-out p-2"
-    :class="shouldCollapse ? 'w-12' : 'w-60'"
+    data-slot="sidebar"
+    :data-state="shouldCollapse ? 'collapsed' : 'expanded'"
+    class="flex h-full flex-shrink-0 flex-col overflow-x-hidden bg-surface-sidebar transition-[width] duration-300 ease-in-out"
+    :class="{ 'border-r border-outline-gray-1': isLegacy }"
+    :style="{ width: shouldCollapse ? collapsedWidth : width }"
   >
-    <slot name="header" v-bind="{ isCollapsed: shouldCollapse, isMobile }">
-      <SidebarHeader
-        v-if="props.header"
-        :isCollapsed="shouldCollapse"
-        :title="props.header.title"
-        :subtitle="props.header.subtitle"
-        :logo="props.header.logo"
-        :menu-items="props.header.menuItems"
-      >
-        <template #logo>
-          <slot name="header-logo"></slot>
-        </template>
-      </SidebarHeader>
-    </slot>
+    <!-- Composition: the app owns the entire body (header, scroll, footer). -->
+    <slot v-if="!isLegacy" />
 
-    <SidebarSection
-      v-for="section in props.sections"
-      :key="section.label"
-      :label="section.label"
-      :items="section.items"
-      :collapsible="section.collapsible"
-    >
-      <template #sidebar-item="{ item, isCollapsed }">
-        <slot name="sidebar-item" :item :isCollapsed></slot>
-      </template>
-    </SidebarSection>
+    <!--
+      Legacy config-object layout, kept for one release. Rendered only when no
+      default slot is supplied and `header`/`sections` are passed.
+    -->
+    <template v-else>
+      <div class="flex h-full flex-col p-2">
+        <SidebarHeader
+          v-if="header"
+          :title="header.title"
+          :subtitle="header.subtitle"
+          :logo="header.logo"
+          :menu-items="header.menuItems"
+        >
+          <template v-if="slots['header-logo']" #logo>
+            <slot name="header-logo" />
+          </template>
+        </SidebarHeader>
 
-    <div class="mt-auto flex flex-col gap-2">
-      <slot
-        name="footer-items"
-        v-bind="{ isCollapsed: shouldCollapse, isMobile }"
-      />
-      <SidebarItem
-        v-if="!props.disableCollapse"
-        :label="shouldCollapse ? 'Expand' : 'Collapse'"
-        @click="isCollapsed = !isCollapsed"
-      >
-        <template #icon>
-          <span
-            class="lucide-panel-right-open size-4 text-ink-gray-6 duration-300 ease-in-out"
-            :class="{ 'rotate-180': shouldCollapse }"
+        <div class="flex-1 overflow-y-auto overflow-x-hidden">
+          <SidebarSection
+            v-for="section in sections"
+            :key="section.label"
+            :label="section.label"
+            :items="section.items"
+            :collapsible="section.collapsible"
           />
-        </template>
-      </SidebarItem>
-    </div>
+        </div>
+
+        <div class="mt-auto">
+          <slot name="footer-items" />
+          <SidebarCollapseToggle v-if="!disableCollapse" />
+        </div>
+      </div>
+    </template>
   </div>
 </template>
 
 <script setup lang="ts">
 import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
-import { provide, computed } from 'vue'
+import { computed, provide, useSlots } from 'vue'
 import SidebarHeader from './SidebarHeader.vue'
-import SidebarItem from './SidebarItem.vue'
-import { SidebarProps, sidebarCollapsedKey } from './types'
-
 import SidebarSection from './SidebarSection.vue'
+import SidebarCollapseToggle from './SidebarCollapseToggle.vue'
+import { SidebarProps, sidebarCollapsedKey, sidebarToggleKey } from './types'
 
-const props = defineProps<SidebarProps>()
-
-const isCollapsed = defineModel('collapsed', {
-  type: Boolean,
-  default: null,
+const props = withDefaults(defineProps<SidebarProps>(), {
+  width: '15rem',
+  collapsedWidth: '3rem',
 })
-const shouldCollapse = computed(
-  () => (isCollapsed.value ?? isMobile.value) && !props.disableCollapse,
+
+const slots = useSlots()
+// Composition wins whenever the consumer supplies default-slot content.
+const isLegacy = computed(
+  () => !slots.default && (Boolean(props.header) || Boolean(props.sections)),
 )
-provide(sidebarCollapsedKey, shouldCollapse)
+
+const isCollapsed = defineModel<boolean | null>('collapsed', { default: null })
 
 const breakpoints = useBreakpoints(breakpointsTailwind)
 const isMobile = breakpoints.smaller('sm')
+
+// Unset (`null`) falls back to collapsing on mobile; `disableCollapse` pins open.
+const shouldCollapse = computed(
+  () => (isCollapsed.value ?? isMobile.value) && !props.disableCollapse,
+)
+
+function toggle() {
+  isCollapsed.value = !shouldCollapse.value
+}
+
+provide(sidebarCollapsedKey, shouldCollapse)
+provide(sidebarToggleKey, toggle)
 </script>

package/src/components/Sidebar/SidebarCollapseToggle.vue

@@ -0,0 +1,23 @@
+<template>
+  <SidebarItem :label="isCollapsed ? 'Expand' : 'Collapse'" @click="toggle">
+    <template #prefix>
+      <span
+        class="lucide-panel-right-open size-4 text-ink-gray-6 transition-transform duration-300 ease-in-out"
+        :class="{ 'rotate-180': isCollapsed }"
+      />
+    </template>
+  </SidebarItem>
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from 'vue'
+import SidebarItem from './SidebarItem.vue'
+import { sidebarCollapsedKey, sidebarToggleKey } from './types'
+
+const isCollapsed = inject(
+  sidebarCollapsedKey,
+  computed(() => false),
+)
+// No-op fallback keeps a standalone toggle from throwing outside a Sidebar.
+const toggle = inject(sidebarToggleKey, () => {})
+</script>

package/src/components/Sidebar/SidebarHeader.vue

@@ -1,61 +1,79 @@
 <template>
-  <Dropdown :options="props.menuItems">
-    <template v-slot="{ open }">
-      <button
-        class="flex h-12 items-center rounded-md py-2 duration-300 ease-in-out w-[14rem]"
-        :class="
-          isCollapsed
-            ? 'w-auto px-0'
-            : open
-              ? 'bg-surface-white px-2 shadow-sm'
-              : 'px-2 hover:bg-surface-gray-3'
-        "
-      >
-        <div class="w-8 h-8 rounded overflow-hidden">
-          <slot name="logo">
-            <img
-              v-if="typeof props.logo === 'string'"
-              :src="props.logo"
-              class="w-full h-full object-cover"
-              alt="Logo"
-            />
-            <div
-              v-else-if="!props.logo"
-              class="w-full h-full bg-surface-gray-4 flex items-center justify-center text-ink-gray-7"
-            >
-              {{ props.title.charAt(0).toUpperCase() }}
-            </div>
-            <component v-else :is="props.logo" class="w-full h-full" />
-          </slot>
-        </div>
-        <div
-          class="flex flex-1 flex-col text-left duration-300 ease-in-out truncate"
+  <!-- Fixed 48px region so the sidebar header lines up with PageHeader
+       (min-h-12). The trigger sits 40px tall, centered in that region, and owns
+       the sidebar gutter (px-2) itself — so consumers drop it straight into
+       <Sidebar> without a wrapping padding div. -->
+  <div
+    class="flex h-12 shrink-0 items-center"
+    :class="isCollapsed ? 'justify-center' : 'px-1'"
+  >
+    <Dropdown :options="props.menuItems" match-trigger-width>
+      <template v-slot="{ open }">
+        <button
+          class="flex h-10 items-center rounded px-1.5 duration-300 ease-in-out"
           :class="
             isCollapsed
-              ? 'ml-0 w-0 overflow-hidden opacity-0'
-              : 'ml-2 w-auto opacity-100'
+              ? 'w-auto'
+              : open
+                ? 'w-full bg-surface-elevation-2 shadow-sm'
+                : 'w-full hover:bg-surface-gray-3'
           "
         >
-          <div class="text-base font-medium text-ink-gray-8 leading-none">
-            {{ props.title }}
+          <div
+            v-if="showLogo"
+            class="size-7 shrink-0 rounded-[6px] overflow-hidden"
+          >
+            <slot name="logo">
+              <img
+                v-if="typeof props.logo === 'string'"
+                :src="props.logo"
+                class="w-full h-full object-cover"
+                alt="Logo"
+              />
+              <div
+                v-else-if="!props.logo"
+                class="w-full h-full bg-surface-gray-4 flex items-center justify-center text-ink-gray-7"
+              >
+                {{ props.title.charAt(0).toUpperCase() }}
+              </div>
+              <component v-else :is="props.logo" class="w-full h-full" />
+            </slot>
           </div>
-          <div class="mt-1 text-sm text-ink-gray-6 leading-none">
-            {{ props.subtitle }}
+          <div
+            class="flex flex-1 flex-col text-left duration-300 ease-in-out truncate"
+            :class="
+              isCollapsed
+                ? 'ml-0 w-0 overflow-hidden opacity-0'
+                : showLogo
+                  ? 'ml-2 w-auto opacity-100'
+                  : 'ml-0 w-auto opacity-100'
+            "
+          >
+            <div class="leading-none">
+              <span class="text-base-medium text-ink-gray-8">
+                {{ props.title }}
+              </span>
+            </div>
+            <div class="mt-0.5 leading-none">
+              <span class="text-sm text-ink-gray-6">
+                {{ props.subtitle }}
+              </span>
+            </div>
           </div>
-        </div>
-        <div
-          class="duration-300 ease-in-out"
-          :class="
-            isCollapsed
-              ? 'ml-0 w-0 overflow-hidden opacity-0'
-              : 'ml-2 w-auto opacity-100'
-          "
-        >
-          <span class="lucide-chevron-down size-4 text-ink-gray-7" />
-        </div>
-      </button>
-    </template>
-  </Dropdown>
+          <div
+            class="duration-300 ease-in-out"
+            :class="
+              isCollapsed
+                ? 'ml-0 w-0 overflow-hidden opacity-0'
+                : 'ml-2 w-auto opacity-100'
+            "
+          >
+            <span class="lucide-chevron-down size-4 text-ink-gray-7" />
+          </div>
+        </button>
+      </template>
+    </Dropdown>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -63,9 +81,15 @@ import { computed, inject } from 'vue'
 import Dropdown from '../Dropdown/Dropdown.vue'
 import { SidebarHeaderProps, sidebarCollapsedKey } from './types'
 
-const props = defineProps<SidebarHeaderProps>()
+// `showLogo` must default to `true` (see SidebarHeaderProps). A bare
+// `defineProps<{ showLogo?: boolean }>()` would let Vue's Boolean-prop casting
+// coerce an absent value to `false`, so the default is set explicitly here.
+const props = withDefaults(defineProps<SidebarHeaderProps>(), {
+  showLogo: true,
+})
 const isCollapsed = inject(
   sidebarCollapsedKey,
   computed(() => false),
 )
+const showLogo = computed(() => props.showLogo !== false)
 </script>

package/src/components/Sidebar/SidebarItem.vue

@@ -1,121 +1,185 @@
 <template>
-  <Button
-    :label="props.label"
-    :route="buttonRoute"
-    @click="handleClick"
-    class="!w-full focus-visible:ring-0 focus:outline-none"
+  <div
+    data-slot="sidebar-item"
+    :data-state="resolvedActive ? 'active' : 'inactive'"
+    class="group/sidebar-item flex h-7 items-center rounded transition"
     :class="
-      isActive
-        ? '!bg-surface-selected shadow-sm'
-        : 'hover:bg-surface-gray-2'
+      resolvedActive
+        ? 'bg-surface-elevation-3 text-ink-gray-8 shadow-sm'
+        : 'text-ink-gray-6 hover:bg-surface-gray-2'
     "
-    variant="ghost"
-    :accesskey="props.accessKey"
   >
-    <template #icon>
-      <div
-        class="flex w-full items-center justify-between transition-all ease-in-out px-2 py-1"
+    <!--
+      Link vs. button are split with v-if/v-else. The link uses <component :is>
+      because it swaps between vue-router's RouterLink (real app) and a plain
+      <a> when no router is installed (docs, tests, embedded use) — passing the
+      RouterLink component object or the 'a' string is safe; only a raw 'button'
+      string collides with the globally-registered <Button>, so that stays a
+      literal <button v-else>. The inner content is identical in both branches.
+    -->
+    <component
+      :is="linkComponent"
+      v-if="to"
+      v-bind="linkAttrs"
+      :accesskey="accessKey"
+      :aria-label="tooltipText || undefined"
+      :aria-current="resolvedActive ? 'page' : undefined"
+      class="flex h-full min-w-0 flex-1 items-center focus:outline-none focus-visible:ring-0"
+      :class="isCollapsed ? 'justify-center' : 'pl-2'"
+      @click="handleClick"
+    >
+      <Tooltip
+        :text="tooltipText"
+        placement="right"
+        :disabled="!isCollapsed || !tooltipText"
       >
-        <div class="flex items-center truncate">
-          <Tooltip
-            :text="props.label"
-            placement="right"
-            :disabled="!isCollapsed"
-          >
-            <span class="grid flex-shrink-0 place-items-center">
-              <slot name="icon">
-                <span
-                  v-if="props.icon && typeof props.icon === 'string' && props.icon.startsWith('lucide-')"
-                  class="size-4 text-ink-gray-6"
-                  :class="props.icon"
-                />
-                <span
-                  v-else-if="props.icon && typeof props.icon === 'string'"
-                  class="size-4 text-ink-gray-6"
-                >
-                  {{ props.icon }}
-                </span>
-                <component
-                  v-else
-                  :is="props.icon"
-                  class="size-4 text-ink-gray-6"
-                />
-              </slot>
-            </span>
-          </Tooltip>
-          <Tooltip
-            :text="props.label"
-            placement="right"
-            :disabled="isCollapsed"
-            :hoverDelay="1.5"
+        <!-- Collapsed: the icon sits in a 28px square (matches the row height)
+             so it reads as a centered rail button, not a left-hugged glyph. -->
+        <span
+          class="grid shrink-0 place-items-center"
+          :class="isCollapsed && 'size-7'"
+        >
+          <slot name="prefix">
+            <SidebarItemIcon :icon="icon" />
+          </slot>
+        </span>
+      </Tooltip>
+      <span
+        class="min-w-0 flex-1 transition-all ease-in-out"
+        :class="
+          isCollapsed
+            ? 'ml-0 w-0 overflow-hidden opacity-0'
+            : 'ml-2 w-auto opacity-100'
+        "
+      >
+        <span ref="labelEl" class="flex min-w-0 items-center">
+          <slot
+            ><span class="truncate text-sm">{{ label }}</span></slot
           >
-            <span
-              class="flex-1 flex-shrink-0 truncate text-sm transition-all ease-in-out"
-              :class="
-                isCollapsed
-                  ? 'ml-0 w-0 overflow-hidden opacity-0'
-                  : 'ml-2 w-auto opacity-100'
-              "
-            >
-              {{ props.label }}
-            </span>
-          </Tooltip>
-        </div>
-        <div
-          class="transition-all ease-in-out"
-          :class="
-            isCollapsed
-              ? 'ml-0 w-0 overflow-hidden opacity-0'
-              : 'ml-auto w-auto opacity-100'
-          "
+        </span>
+      </span>
+    </component>
+
+    <button
+      v-else
+      type="button"
+      :accesskey="accessKey"
+      :aria-label="tooltipText || undefined"
+      class="flex h-full text-left min-w-0 flex-1 items-center focus:outline-none focus-visible:ring-0"
+      :class="isCollapsed ? 'justify-center' : 'pl-2'"
+      @click="handleClick"
+    >
+      <Tooltip
+        :text="tooltipText"
+        placement="right"
+        :disabled="!isCollapsed || !tooltipText"
+      >
+        <!-- Collapsed: the icon sits in a 28px square (matches the row height)
+             so it reads as a centered rail button, not a left-hugged glyph. -->
+        <span
+          class="grid shrink-0 place-items-center"
+          :class="isCollapsed && 'size-7'"
         >
-          <slot name="suffix">
-            <span v-if="props.suffix" class="text-sm text-ink-gray-4">
-              {{ props.suffix }}
-            </span>
+          <slot name="prefix">
+            <SidebarItemIcon :icon="icon" />
           </slot>
-        </div>
-      </div>
-    </template>
-  </Button>
+        </span>
+      </Tooltip>
+      <span
+        class="min-w-0 flex-1 transition-all ease-in-out"
+        :class="
+          isCollapsed
+            ? 'ml-0 w-0 overflow-hidden opacity-0'
+            : 'ml-2 w-auto opacity-100'
+        "
+      >
+        <span ref="labelEl" class="flex min-w-0 items-center">
+          <slot
+            ><span class="truncate text-sm">{{ label }}</span></slot
+          >
+        </span>
+      </span>
+    </button>
+
+    <!--
+      Trailing zone is a SIBLING of the link/button — not nested inside it — so a
+      consumer can place an interactive options menu here (you cannot nest a
+      Dropdown/Button inside an anchor or button). Hidden when collapsed.
+    -->
+    <div
+      data-slot="sidebar-item-suffix"
+      class="flex shrink-0 items-center transition-all ease-in-out"
+      :class="isCollapsed ? 'w-0 overflow-hidden opacity-0' : 'opacity-100'"
+    >
+      <slot name="suffix">
+        <span v-if="suffix" class="mr-2 text-sm text-ink-gray-4">{{
+          suffix
+        }}</span>
+      </slot>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { computed, inject } from 'vue'
+import { computed, getCurrentInstance, inject, onMounted, ref, useTemplateRef } from 'vue'
+import { RouterLink } from 'vue-router'
 import Tooltip from '../Tooltip/Tooltip.vue'
-import Button from '../Button/Button.vue'
-import { useRoute, useRouter } from 'vue-router'
+import SidebarItemIcon from './SidebarItemIcon.vue'
 import { SidebarItemProps, sidebarCollapsedKey } from './types'
 
 const props = defineProps<SidebarItemProps>()
-const isCollapsed = inject(sidebarCollapsedKey, computed(() => false))
-
-const route = useRoute()
-const router = useRouter()
 
-const buttonRoute = computed(() => (props.onClick ? undefined : props.to))
+const isCollapsed = inject(
+  sidebarCollapsedKey,
+  computed(() => false),
+)
 
-const resolvedRoute = computed(() => {
-  if (!props.to) return null
-  return router.resolve(props.to)
+// Collapsed items show a tooltip with their name. Prefer the explicit `label`;
+// otherwise fall back to the rendered default-slot text so slot-only items (the
+// common composition path) still get a tooltip and an accessible name without
+// the caller repeating the label as a prop.
+const labelEl = useTemplateRef<HTMLElement>('labelEl')
+const slotLabel = ref('')
+onMounted(() => {
+  slotLabel.value = labelEl.value?.textContent?.trim() ?? ''
 })
+const tooltipText = computed(() => props.label || slotLabel.value)
 
-const isActive = computed(() => {
-  if (props.isActive !== undefined) return props.isActive
+// Read the router/route off global properties instead of useRouter()/useRoute()
+// so this component works — without warnings or crashes — when mounted outside a
+// vue-router app (docs, tests, embedded use). vue-router installs $router/$route
+// here; the $route getter stays reactive when read inside a computed.
+const globals = getCurrentInstance()?.appContext.config.globalProperties
+const hasRouter = computed(() => Boolean(globals?.$router))
+
+// With a router, render RouterLink; without one, degrade to a plain <a> (with an
+// href only when `to` is a string — we can't resolve a route-location object).
+const linkComponent = computed(() => (hasRouter.value ? RouterLink : 'a'))
+const linkAttrs = computed(() =>
+  hasRouter.value
+    ? { to: props.to }
+    : { href: typeof props.to === 'string' ? props.to : undefined },
+)
 
-  const targetRoute = resolvedRoute.value
-  if (!targetRoute) return false
+const resolvedRoute = computed(() =>
+  props.to && globals?.$router ? globals.$router.resolve(props.to) : null,
+)
 
-  if (targetRoute.name) {
-    return route.name === targetRoute.name
-  }
+// Explicit `active` (or the deprecated `isActive`) wins; otherwise infer from
+// the current route so config-driven items light up without extra wiring.
+const resolvedActive = computed(() => {
+  if (props.active !== undefined) return props.active
+  if (props.isActive !== undefined) return props.isActive
 
-  return route.path === targetRoute.path
+  const target = resolvedRoute.value
+  const current = globals?.$route
+  if (!target || !current) return false
+  return target.name
+    ? current.name === target.name
+    : current.path === target.path
 })
 
-function handleClick() {
-  if (props.onClick) {
-    props.onClick()
-  }
+function handleClick(event: MouseEvent) {
+  props.onClick?.(event)
 }
 </script>

package/src/components/Sidebar/SidebarItemIcon.vue

@@ -0,0 +1,25 @@
+<template>
+  <!-- Icon fallback used when no #prefix slot is supplied: a lucide CSS class,
+       plain text, or a component. -->
+  <span
+    v-if="isLucideClass"
+    class="size-4 text-ink-gray-6"
+    :class="icon as string"
+    aria-hidden="true"
+  />
+  <span v-else-if="typeof icon === 'string'" class="size-4 text-ink-gray-6">
+    {{ icon }}
+  </span>
+  <component v-else-if="icon" :is="icon" class="size-4 text-ink-gray-6" />
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { Component } from 'vue'
+
+const props = defineProps<{ icon?: string | Component }>()
+
+const isLucideClass = computed(
+  () => typeof props.icon === 'string' && props.icon.startsWith('lucide-'),
+)
+</script>

package/src/components/Sidebar/SidebarLabel.vue

@@ -0,0 +1,34 @@
+<template>
+  <div data-slot="sidebar-label" class="relative flex h-7 items-center pl-2">
+    <h3
+      class="text-base text-ink-gray-5 transition-all duration-300 ease-in-out"
+      :class="
+        isCollapsed ? 'w-0 overflow-hidden opacity-0' : 'w-auto opacity-100'
+      "
+    >
+      <slot />
+    </h3>
+
+    <!-- While collapsed, a section label has no room; show a divider instead so
+         groups stay visually separated. Opt in with `divider`. -->
+    <div
+      v-if="divider && isCollapsed"
+      aria-hidden="true"
+      class="absolute inset-0 flex items-center"
+    >
+      <hr class="w-full border-t border-ink-gray-3" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, inject } from 'vue'
+import { SidebarLabelProps, sidebarCollapsedKey } from './types'
+
+defineProps<SidebarLabelProps>()
+
+const isCollapsed = inject(
+  sidebarCollapsedKey,
+  computed(() => false),
+)
+</script>