frappe-ui 1.0.0-beta.12 → 1.0.0-beta.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "1.0.0-beta.12",
+  "version": "1.0.0-beta.13",
   "description": "A set of components and utilities for rapid UI development",
   "type": "module",
   "sideEffects": [

package/src/components/DatePicker/CalendarPanel.vue

@@ -12,11 +12,7 @@
         @click="emit('prev')"
       />
       <span class="text-sm-medium text-ink-gray-7">
-        <span v-if="view === 'date'">
-          {{ months[currentMonth] }} {{ currentYear }}
-        </span>
-        <span v-else-if="view === 'month'">{{ currentYear }}</span>
-        <span v-else>{{ yearRangeStart }} - {{ yearRangeStart + 11 }}</span>
+        {{ months[currentMonth] }} {{ currentYear }}
       </span>
       <Button
         :class="{ invisible: hideNext }"
@@ -34,13 +30,9 @@
         label="cycle-calendar-view"
         @click="emit('cycleView')"
       >
-        <span v-if="view === 'date'">
-          {{ months[currentMonth] }} {{ currentYear }}
-        </span>
-        <span v-else-if="view === 'month'">{{ currentYear }}</span>
-        <span v-else>{{ yearRangeStart }} - {{ yearRangeStart + 11 }}</span>
+        {{ months[currentMonth] }} {{ currentYear }}
       </Button>
-      <div class="flex items-center">
+      <div v-if="view === 'date'" class="flex items-center">
         <Button
           v-if="!hidePrev"
           label="previous"
@@ -99,7 +91,7 @@
               <button
                 v-else
                 type="button"
-                class="flex size-7 items-center justify-center text-sm transition-colors duration-100 focus:outline-none focus:ring-2 focus:ring-outline-gray-2"
+                class="flex size-7 items-center justify-center text-sm transition-colors duration-100"
                 :class="cellClass(cell)"
                 role="gridcell"
                 :aria-selected="ariaSelected(cell)"
@@ -112,9 +104,13 @@
                 :tabindex="isFocusedCell(cell) ? 0 : -1"
                 @mouseenter="emit('hoverCell', cell.date)"
                 @click="!cell.isUnavailable && emit('selectDate', cell.date)"
-                @keydown.left.prevent="shiftFocus(cell.date.subtract(1, 'day'), -1)"
+                @keydown.left.prevent="
+                  shiftFocus(cell.date.subtract(1, 'day'), -1)
+                "
                 @keydown.right.prevent="shiftFocus(cell.date.add(1, 'day'), 1)"
-                @keydown.up.prevent="shiftFocus(cell.date.subtract(7, 'day'), -1)"
+                @keydown.up.prevent="
+                  shiftFocus(cell.date.subtract(7, 'day'), -1)
+                "
                 @keydown.down.prevent="shiftFocus(cell.date.add(7, 'day'), 1)"
                 @keydown.home.prevent="
                   shiftFocus(cell.date.subtract(cell.date.day(), 'day'), -1)
@@ -151,54 +147,60 @@
           </div>
         </div>
       </div>
-      <div
-        v-else-if="view === 'month'"
-        class="grid grid-cols-3 gap-1"
-        role="grid"
-        aria-label="Select month"
-      >
-        <button
-          v-for="(m, i) in months"
-          type="button"
-          :key="m"
-          class="py-2 text-sm rounded cursor-pointer text-center hover:bg-surface-gray-2 focus:outline-none focus:ring-2 focus:ring-brand-6"
-          :class="{
-            'bg-surface-gray-9 text-ink-base hover:bg-surface-gray-9':
-              i === currentMonth,
-          }"
-          :aria-selected="i === currentMonth ? 'true' : 'false'"
-          @click="emit('selectMonth', i)"
+      <div v-else class="flex h-52 w-52" aria-label="Select month and year">
+        <div
+          ref="yearListRef"
+          class="relative flex w-1/2 flex-col gap-0.5 overflow-y-auto"
+          role="listbox"
+          aria-label="Select year"
         >
-          {{ m.slice(0, 3) }}
-        </button>
-      </div>
-      <div
-        v-else
-        class="grid grid-cols-3 gap-1"
-        role="grid"
-        aria-label="Select year"
-      >
-        <button
-          v-for="y in yearRange"
-          type="button"
-          :key="y"
-          class="py-2 text-sm rounded cursor-pointer text-center hover:bg-surface-gray-2 focus:outline-none focus:ring-2 focus:ring-brand-6"
-          :class="{
-            'bg-surface-gray-9 text-ink-base hover:bg-surface-gray-9':
-              y === currentYear,
-          }"
-          :aria-selected="y === currentYear ? 'true' : 'false'"
-          @click="emit('selectYear', y)"
+          <button
+            v-for="y in years"
+            type="button"
+            :key="y"
+            class="w-full text-ink-gray-8 h-7 shrink-0 rounded py-1 text-sm text-center cursor-pointer transition-colors duration-100"
+            :class="
+              y === currentYear
+                ? 'bg-surface-gray-2 hover:bg-surface-gray-3'
+                : ' hover:bg-surface-gray-1'
+            "
+            :data-selected="y === currentYear ? '' : undefined"
+            :aria-selected="y === currentYear ? 'true' : 'false'"
+            @click="emit('selectYear', y)"
+          >
+            {{ y }}
+          </button>
+        </div>
+        <div
+          ref="monthListRef"
+          class="relative flex w-1/2 flex-col gap-0.5 overflow-y-auto pl-1.5"
+          role="listbox"
+          aria-label="Select month"
         >
-          {{ y }}
-        </button>
+          <button
+            v-for="(m, i) in months"
+            type="button"
+            :key="m"
+            class="w-full text-ink-gray-8 shrink-0 h-7 rounded py-1 text-sm text-center cursor-pointer transition-colors duration-100"
+            :class="
+              i === currentMonth
+                ? 'bg-surface-gray-2 hover:bg-surface-gray-3'
+                : ' hover:bg-surface-gray-1'
+            "
+            :data-selected="i === currentMonth ? '' : undefined"
+            :aria-selected="i === currentMonth ? 'true' : 'false'"
+            @click="emit('selectMonth', i)"
+          >
+            {{ m }}
+          </button>
+        </div>
       </div>
     </div>
   </div>
 </template>
 
 <script setup lang="ts">
-import { nextTick, ref, watch } from 'vue'
+import { computed, nextTick, ref, watch } from 'vue'
 import type { Dayjs } from 'dayjs/esm'
 import { Button } from '../Button'
 import { months } from './utils'
@@ -220,8 +222,6 @@ interface Props {
   view: ViewMode
   currentYear: number
   currentMonth: number
-  yearRangeStart: number
-  yearRange: number[]
   weeks: CalendarPanelCell[][]
   /** Label for the optional Today/Now action button between prev/next. Empty/undefined hides it. */
   todayLabel?: string
@@ -281,6 +281,44 @@ const emit = defineEmits<{
   (e: 'update:focusedDate', d: Dayjs): void
 }>()
 
+// ── Month-year split view ────────────────────────────────────────────────────
+// The year column is a scrollable list. We bound it to [min, max] when provided
+// (so unreachable years aren't offered) and otherwise fall back to a wide window
+// around the current year. The current year is always included.
+const years = computed<number[]>(() => {
+  const current = props.currentYear
+  const minY = props.min ? Number(props.min.slice(0, 4)) : current - 100
+  const maxY = props.max ? Number(props.max.slice(0, 4)) : current + 10
+  const start = Math.min(minY, current)
+  const end = Math.max(maxY, current)
+  return Array.from({ length: end - start + 1 }, (_, i) => start + i)
+})
+
+const yearListRef = ref<HTMLElement | null>(null)
+const monthListRef = ref<HTMLElement | null>(null)
+
+// Center the active year/month when the split view opens. Manual scrollTop (vs
+// scrollIntoView) keeps the scroll contained to each list and never nudges the
+// popover or page. Relies on the list containers being `relative` so the
+// buttons' `offsetTop` is measured against them.
+function centerSelected(container: HTMLElement | null) {
+  const el = container?.querySelector<HTMLElement>('[data-selected]')
+  if (!container || !el) return
+  container.scrollTop =
+    el.offsetTop - container.clientHeight / 2 + el.clientHeight / 2
+}
+
+watch(
+  () => props.view,
+  (view) => {
+    if (view !== 'monthYear') return
+    nextTick(() => {
+      centerSelected(yearListRef.value)
+      centerSelected(monthListRef.value)
+    })
+  },
+)
+
 // ── Roving tabindex (Reka Calendar pattern) ──────────────────────────────────
 // The focused date is *controlled* — the parent owns the value and feeds it
 // in via `props.focusedDate`. Arrow keys compute a target, emit
@@ -295,9 +333,7 @@ function isFocusedCell(cell: CalendarPanelCell): boolean {
   return !!props.focusedDate && cell.date.isSame(props.focusedDate, 'day')
 }
 
-function pickInitialFocusDate(
-  weeks: CalendarPanelCell[][],
-): Dayjs | null {
+function pickInitialFocusDate(weeks: CalendarPanelCell[][]): Dayjs | null {
   const flat = weeks.flat()
   const selected = flat.find(
     (c) =>
@@ -343,12 +379,7 @@ watch(
 // for an unbounded run of dates would otherwise spin forever.
 const MAX_SKIP_DISABLED_STEPS = 366
 
-function shiftFocus(
-  target: Dayjs,
-  dir: 1 | -1,
-  retried = false,
-  steps = 0,
-) {
+function shiftFocus(target: Dayjs, dir: 1 | -1, retried = false, steps = 0) {
   // Bounds check first — if the target is outside [min, max], the arrow
   // press is a no-op rather than trying to navigate into nothing. Matches
   // Reka's CalendarCellTrigger behavior.
@@ -417,37 +448,48 @@ function ariaLabel(cell: CalendarPanelCell): string {
 }
 
 function cellClass(cell: CalendarPanelCell): Array<string | false> {
-  const inMonthCls = cell.inMonth ? 'text-ink-gray-8' : 'text-ink-gray-3'
-  const todayCls = cell.isToday ? 'font-semibold text-ink-gray-9' : ''
+  // "Today" stays bold whether or not it's selected; its gray text color is kept
+  // separate so it can be dropped on selected cells.
+  const todayFont = cell.isToday ? 'font-semibold' : ''
+  // Resting text color for non-selected cells. Omitted on selected/range cells:
+  // both are `text-*` utilities, so leaving them in would win the CSS source-order
+  // tie against `text-ink-base` and the selected date would render gray.
+  const restingText = [
+    cell.inMonth ? 'text-ink-gray-8' : 'text-ink-gray-3',
+    cell.isToday ? 'text-ink-gray-9' : '',
+  ]
 
   if (cell.isUnavailable) {
-    return [inMonthCls, todayCls, 'rounded opacity-30 cursor-not-allowed']
-  }
-
-  if (cell.isRangeStart || cell.isRangeEnd) {
     return [
-      inMonthCls,
-      todayCls,
-      'rounded bg-surface-gray-9 text-ink-base hover:bg-surface-gray-9 cursor-pointer',
+      'rounded',
+      ...restingText,
+      todayFont,
+      'opacity-30 cursor-not-allowed',
     ]
   }
 
-  if (cell.inRange) {
+  if (cell.isRangeStart || cell.isRangeEnd || cell.isSelected) {
     return [
-      inMonthCls,
-      todayCls,
-      'rounded bg-surface-gray-3 hover:bg-surface-gray-3 cursor-pointer',
+      'rounded',
+      todayFont,
+      'bg-surface-gray-9 text-ink-base hover:bg-surface-gray-9 cursor-pointer',
     ]
   }
 
-  if (cell.isSelected) {
+  if (cell.inRange) {
     return [
-      inMonthCls,
-      todayCls,
-      'rounded bg-surface-gray-9 text-ink-base hover:bg-surface-gray-9 cursor-pointer',
+      'rounded',
+      ...restingText,
+      todayFont,
+      'bg-surface-gray-3 hover:bg-surface-gray-3 cursor-pointer',
     ]
   }
 
-  return [inMonthCls, todayCls, 'rounded hover:bg-surface-gray-2 cursor-pointer']
+  return [
+    'rounded',
+    ...restingText,
+    todayFont,
+    'hover:bg-surface-gray-2 cursor-pointer',
+  ]
 }
 </script>

package/src/components/DatePicker/DatePicker.vue

@@ -59,8 +59,6 @@
           :view="view"
           :current-year="currentYear"
           :current-month="currentMonth"
-          :year-range-start="yearRangeStart"
-          :year-range="yearRange"
           :weeks="weeks"
           today-label="Today"
           :min="props.min"
@@ -223,8 +221,6 @@ const {
   view,
   currentYear,
   currentMonth,
-  yearRangeStart,
-  yearRange,
   prev,
   next,
   cycleView,

package/src/components/DatePicker/DateRangePicker.vue

@@ -65,8 +65,6 @@
             :view="view"
             :current-year="currentYear"
             :current-month="currentMonth"
-            :year-range-start="yearRangeStart"
-            :year-range="yearRange"
             :weeks="weeks"
             :today-label="isDualPaneActive ? '' : 'Today'"
             :hide-next="isDualPaneActive"
@@ -91,8 +89,6 @@
             :view="view"
             :current-year="rightYear"
             :current-month="rightMonth"
-            :year-range-start="yearRangeStart"
-            :year-range="yearRange"
             :weeks="rightWeeks"
             hide-prev
             hide-today
@@ -286,8 +282,6 @@ const {
   view,
   currentYear,
   currentMonth,
-  yearRangeStart,
-  yearRange,
   prev,
   next,
   cycleView,

package/src/components/DatePicker/DateTimePicker.cy.ts

@@ -184,10 +184,12 @@ describe('DateTimePicker', () => {
     })
   })
 
-  it('cycle-calendar-view button switches to month view', () => {
+  it('cycle-calendar-view button opens the month-year split view', () => {
     cy.mount(DateTimePicker)
     cy.get('input').first().dblclick()
     cy.get('[aria-label=cycle-calendar-view]').click()
-    cy.get('[role=grid][aria-label="Select month"]').should('exist')
+    // Split view: scrollable year list beside a scrollable month list.
+    cy.get('[role=listbox][aria-label="Select year"]').should('exist')
+    cy.get('[role=listbox][aria-label="Select month"]').should('exist')
   })
 })

package/src/components/DatePicker/DateTimePicker.vue

@@ -61,8 +61,6 @@
             :view="view"
             :current-year="currentYear"
             :current-month="currentMonth"
-            :year-range-start="yearRangeStart"
-            :year-range="yearRange"
             :weeks="weeks"
             today-label="Now"
             :min="resolvedMin"
@@ -232,8 +230,6 @@ const {
   view,
   currentYear,
   currentMonth,
-  yearRangeStart,
-  yearRange,
   prev,
   next,
   cycleView,

package/src/components/DatePicker/composables.ts

@@ -16,57 +16,37 @@ export function useCalendarView() {
   const currentYear = ref<number>(dayjs().year())
   const currentMonth = ref<number>(dayjs().month())
 
-  const yearRangeStart = computed(
-    () => currentYear.value - (currentYear.value % 12),
-  )
-  const yearRange = computed<number[]>(() =>
-    Array.from({ length: 12 }, (_, i) => yearRangeStart.value + i),
-  )
-
+  // Prev/next only navigate months in the day grid. The month-year split view
+  // scrolls instead of paging, so it has no prev/next controls.
   function prev(): void {
-    if (view.value === 'date') {
-      const m = monthStart(currentYear.value, currentMonth.value).subtract(
-        1,
-        'month',
-      )
-      currentYear.value = m.year()
-      currentMonth.value = m.month()
-    } else if (view.value === 'month') {
-      currentYear.value -= 1
-    } else {
-      currentYear.value -= 12
-    }
+    const m = monthStart(currentYear.value, currentMonth.value).subtract(
+      1,
+      'month',
+    )
+    currentYear.value = m.year()
+    currentMonth.value = m.month()
   }
 
   function next(): void {
-    if (view.value === 'date') {
-      const m = monthStart(currentYear.value, currentMonth.value).add(
-        1,
-        'month',
-      )
-      currentYear.value = m.year()
-      currentMonth.value = m.month()
-    } else if (view.value === 'month') {
-      currentYear.value += 1
-    } else {
-      currentYear.value += 12
-    }
+    const m = monthStart(currentYear.value, currentMonth.value).add(1, 'month')
+    currentYear.value = m.year()
+    currentMonth.value = m.month()
   }
 
+  // Toggle between the day grid and the month-year split view.
   function cycleView(): void {
-    if (view.value === 'date') view.value = 'month'
-    else if (view.value === 'month') view.value = 'year'
-    else view.value = 'date'
+    view.value = view.value === 'date' ? 'monthYear' : 'date'
   }
 
+  // Picking a month commits the choice and returns to the day grid.
   function selectMonth(i: number): void {
     currentMonth.value = i
     view.value = 'date'
   }
 
+  // Picking a year stays in the split view so the user can then pick a month.
   function selectYear(y: number): void {
     currentYear.value = y
-    view.value = 'month'
   }
 
   function focusOn(d: Dayjs): void {
@@ -82,8 +62,6 @@ export function useCalendarView() {
     view,
     currentYear,
     currentMonth,
-    yearRangeStart,
-    yearRange,
     prev,
     next,
     cycleView,

package/src/components/DatePicker/types.ts

@@ -303,7 +303,7 @@ export interface DateTimePickerSlots {
   actions?: (props: DateTimePickerActionsSlotProps) => any
 }
 
-export type DatePickerViewMode = 'date' | 'month' | 'year'
+export type DatePickerViewMode = 'date' | 'monthYear'
 
 export interface DatePickerDateObj {
   date: Dayjs

package/src/components/Popover/Popover.vue

@@ -3,8 +3,8 @@
     <PopoverAnchor asChild>
       <div
         ref="anchorRef"
-        :class="['flex', $attrs.class]"
-        :style="($attrs.style as StyleValue)"
+        v-bind="$attrs"
+        class="flex"
         @mouseover="onMouseover"
         @mouseleave="onMouseleave"
       >
@@ -65,7 +65,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, onUnmounted, type StyleValue } from 'vue'
+import { computed, ref, onUnmounted } from 'vue'
 import {
   PopoverAnchor,
   PopoverContent,

package/src/components/TimePicker/TimePicker.vue

@@ -1,7 +1,7 @@
 <template>
   <PopoverRoot v-model:open="isOpen">
     <PopoverAnchor :reference="anchorEl" as-child>
-      <div>
+      <div v-bind="$attrs">
         <TextInput
           ref="inputRef"
           v-model="displayValue"
@@ -157,6 +157,8 @@ defineSlots<{
   suffix?: (props: { togglePopover: () => void; isOpen: boolean }) => any
 }>()
 
+defineOptions({ inheritAttrs: false })
+
 // ── Prop reconciliation (new wins; legacy aliases preserved with warnings) ──
 
 const resolvedSide = computed<PopoverSide>(

package/src/components/shared/picker/PickerShell.vue

@@ -1,7 +1,7 @@
 <template>
   <PopoverRoot v-model:open="open">
     <PopoverAnchor :reference="anchorEl" as-child>
-      <div @keydown.down.prevent="onArrowDown">
+      <div v-bind="$attrs" @keydown.down.prevent="onArrowDown">
         <slot name="trigger" v-bind="triggerSlotProps">
           <slot name="target" v-bind="triggerSlotProps">
             <TextInput
@@ -145,6 +145,8 @@ const slots = defineSlots<{
   default?: (props: { close: () => void }) => any
 }>()
 
+defineOptions({ inheritAttrs: false })
+
 const open = defineModel<boolean>('open', { default: false })
 const inputValue = defineModel<string>('inputValue', { default: '' })
 const typing = defineModel<boolean>('typing', { default: false })