frappe-ui 1.0.0-beta.64 → 1.0.0-beta.65

package/experimental.ts

@@ -35,12 +35,35 @@ export * from './experimental/Charts'
 // rebuilt here as seven composable parts. Unstable: the parts stay here until
 // gameplan, helpdesk and this repo's docs site all run on them.
 export * from './experimental/CommandPalette'
+// Date calendars. `DateCalendar` and `DateRangeCalendar` are the calendars
+// inside the date pickers, as standalone components. Incubating while their
+// props and events settle.
+export { default as DateCalendar } from './src/components/DatePicker/DateCalendar.vue'
+export { default as DateRangeCalendar } from './src/components/DatePicker/DateRangeCalendar.vue'
+export type {
+  DateCalendarProps,
+  DateCalendarEmits,
+  DateCalendarExposed,
+  DateRangeCalendarProps,
+  DateRangeCalendarEmits,
+  DateRangeCalendarExposed,
+} from './src/components/DatePicker/calendarTypes'
 // ListView family. Moved out of root (#985) — `frappe-ui/list` is
 // composition-based by design (P3) and doesn't replicate ListView's
 // config-driven columns (resizable widths, per-column getLabel/prefix
 // functions, tooltips, disabled-row exclusion, the select banner), so this
 // stays here, unstable, until `frappe-ui/list` reaches parity.
 export * from './experimental/ListView'
+// PickerShell. The input half of the date pickers: a `TextInput`, a manual
+// `Popover` and the focus wiring between them. Incubating while its props and
+// slots settle.
+export { default as PickerShell } from './src/components/shared/picker/PickerShell.vue'
+export type {
+  PickerShellProps,
+  PickerShellTriggerSlotProps,
+  PickerShellSlots,
+  PickerShellExposed,
+} from './src/components/shared/picker/types'
 // v0 TextEditor family. Moved out of root (#974) — `frappe-ui/editor` is the
 // composition-based replacement. Parked here (#1007), unstable, as an interim
 // import path while apps migrate. Deletion stays human-gated (spec/editor.md

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "1.0.0-beta.64",
+  "version": "1.0.0-beta.65",
   "description": "A set of components and utilities for rapid UI development",
   "engines": {
     "node": ">=20.19.0"

package/src/charts/AreaChart.cy.ts

@@ -210,8 +210,7 @@ describe('AreaChart', () => {
       reading().should('contain.text', 'Refunds')
       plot().type('{enter}')
       cy.get('@onSelect').should('have.been.calledWithMatch', {
-        seriesName: 'refunds',
-        dataIndex: 0,
+        name: 'refunds',
         value: 4,
         row: { month: 'Jan', refunds: 4 },
       })
@@ -224,8 +223,7 @@ describe('AreaChart', () => {
       plot().type('{rightarrow}')
       plot().type('{enter}')
       cy.get('@onSelect').should('have.been.calledWithMatch', {
-        seriesName: 'sales',
-        dataIndex: 1,
+        name: 'sales',
         value: 20,
         row: { month: 'Feb', sales: 20 },
       })

package/src/charts/AreaChart.vue

@@ -2,8 +2,8 @@
   <ChartContainer
     :title="title"
     :subtitle="subtitle"
-    :plot-label="plotLabel"
-    :plot-label-secondary="plotLabelSecondary"
+    :y-axis-title="yAxisTitle"
+    :y2-axis-title="y2AxisTitle"
     :loading="loading"
     :error="error || renderError"
     :empty="isEmpty"
@@ -40,7 +40,7 @@
         :y="tooltip.y"
         :label="tooltip.label"
         :items="tooltip.items"
-        :row="tooltip.row"
+        :rows="tooltip.rows"
         :dir="dir"
       >
         <template v-if="$slots.tooltip" #default="slotProps">
@@ -79,7 +79,7 @@ import type {
   AreaChartProps,
   AreaChartSlots,
   AxisChartConfig,
-  ChartExposed,
+  ChartExposedRefs,
 } from './types'
 
 registerChartModules([
@@ -107,7 +107,6 @@ const config = computed<AxisChartConfig>(() => ({
   type: 'area',
   stacked: props.stacked,
   connectNulls: props.connectNulls,
-  fillOpacity: props.fillOpacity,
 }))
 
 const {
@@ -115,8 +114,8 @@ const {
   chart,
   dir,
   isEmpty,
-  plotLabel,
-  plotLabelSecondary,
+  yAxisTitle,
+  y2AxisTitle,
   renderError,
   tooltip,
   legendItems,
@@ -133,5 +132,5 @@ const {
   onSelect: (event) => emit('select', event),
 })
 
-defineExpose<ChartExposed>({ chart: computed(() => chart.value) })
+defineExpose<ChartExposedRefs>({ chart: computed(() => chart.value) })
 </script>

package/src/charts/BarChart.cy.ts

@@ -81,8 +81,7 @@ describe('BarChart', () => {
       mountChart({ onSelect: cy.spy().as('onSelect') })
       bars().first().click()
       cy.get('@onSelect').should('have.been.calledWithMatch', {
-        seriesName: 'sales',
-        dataIndex: 0,
+        name: 'sales',
         value: 10,
         row: { month: 'Jan', sales: 10 },
       })
@@ -476,6 +475,18 @@ describe('BarChart', () => {
       container().should('have.attr', 'data-state', 'empty')
     })
 
+    it('says so when no row carries a number for a series', () => {
+      mountChart({ y: ['typo'] })
+      cy.contains('No data to show').should('be.visible')
+      container().should('have.attr', 'data-state', 'empty')
+    })
+
+    it('says so once the legend has switched every series off', () => {
+      mountChart({ hiddenSeries: ['sales', 'refunds'] })
+      cy.contains('No data to show').should('be.visible')
+      container().should('have.attr', 'data-state', 'empty')
+    })
+
     it('reads as ready once the bars are drawn', () => {
       mountChart()
       bars().should('have.length', data.length * 2)
@@ -621,7 +632,7 @@ describe('BarChart', () => {
       // The row carries every column, `tooltipColumns` or not: a tooltip the
       // app draws itself needs no prop to reach one.
       mountChart({ data: data.map((row) => ({ ...row, orders: 1000 })) }, {
-        tooltip: ({ row }: any) => h('span', `${row.orders} orders`),
+        tooltip: ({ rows }: any) => h('span', `${rows[0].orders} orders`),
       } as any)
       bars().should('have.length', data.length * 2)
       plot().focus()
@@ -658,8 +669,7 @@ describe('BarChart', () => {
       plot().focus()
       plot().type('{rightarrow}{enter}')
       cy.get('@onSelect').should('have.been.calledWithMatch', {
-        seriesName: 'sales',
-        dataIndex: 1,
+        name: 'sales',
         value: 20,
         row: { month: 'Feb', sales: 20 },
       })
@@ -673,8 +683,7 @@ describe('BarChart', () => {
       plot().focus()
       plot().type('{downarrow}{enter}')
       cy.get('@onSelect').should('have.been.calledWithMatch', {
-        seriesName: 'refunds',
-        dataIndex: 0,
+        name: 'refunds',
         value: 4,
       })
     })
@@ -685,8 +694,7 @@ describe('BarChart', () => {
       plot().focus()
       plot().type('{downarrow}{uparrow}{enter}')
       cy.get('@onSelect').should('have.been.calledWithMatch', {
-        seriesName: 'sales',
-        dataIndex: 0,
+        name: 'sales',
         value: 10,
       })
     })

package/src/charts/BarChart.vue

@@ -2,9 +2,9 @@
   <ChartContainer
     :title="title"
     :subtitle="subtitle"
-    :plot-label="plotLabel"
-    :plot-label-secondary="plotLabelSecondary"
-    :plot-label-placement="plotLabelPlacement"
+    :y-axis-title="yAxisTitle"
+    :y2-axis-title="y2AxisTitle"
+    :axis-title-placement="axisTitlePlacement"
     :loading="loading"
     :error="error || renderError"
     :empty="isEmpty"
@@ -41,7 +41,7 @@
         :y="tooltip.y"
         :label="tooltip.label"
         :items="tooltip.items"
-        :row="tooltip.row"
+        :rows="tooltip.rows"
         :dir="dir"
       >
         <template v-if="$slots.tooltip" #default="slotProps">
@@ -80,7 +80,7 @@ import type {
   BarChartEmits,
   BarChartProps,
   BarChartSlots,
-  ChartExposed,
+  ChartExposedRefs,
 } from './types'
 
 registerChartModules([
@@ -109,7 +109,6 @@ const config = computed<AxisChartConfig>(() => ({
   stacked: props.stacked,
   horizontal: props.horizontal,
   connectNulls: props.connectNulls,
-  fillOpacity: props.fillOpacity,
 }))
 
 const {
@@ -117,9 +116,9 @@ const {
   chart,
   dir,
   isEmpty,
-  plotLabel,
-  plotLabelSecondary,
-  plotLabelPlacement,
+  yAxisTitle,
+  y2AxisTitle,
+  axisTitlePlacement,
   renderError,
   tooltip,
   legendItems,
@@ -137,5 +136,5 @@ const {
   onSelect: (event) => emit('select', event),
 })
 
-defineExpose<ChartExposed>({ chart: computed(() => chart.value) })
+defineExpose<ChartExposedRefs>({ chart: computed(() => chart.value) })
 </script>

package/src/charts/DonutChart.cy.ts

@@ -1,5 +1,6 @@
-import { defineComponent, h } from 'vue'
+import { defineComponent, h, ref } from 'vue'
 import DonutChart from './DonutChart.vue'
+import { OTHERS_KEY } from './utils'
 import './style.css'
 
 const data = [
@@ -73,6 +74,7 @@ describe('DonutChart', () => {
     cy.get('@onSelect')
       .should('have.been.calledWithMatch', {
         name: 'Search',
+        label: 'Search',
         value: 50,
         percent: 50,
       })
@@ -96,8 +98,47 @@ describe('DonutChart', () => {
     cy.get('[data-slot="chart-legend"]').should('contain.text', '60%')
   })
 
+  it('round-trips v-model:hiddenSeries', () => {
+    const hidden = ref<string[]>([])
+    cy.mount(
+      defineComponent({
+        setup() {
+          return () =>
+            h('div', { style: 'width: 480px; height: 300px' }, [
+              h(DonutChart, {
+                data,
+                category: 'source',
+                value: 'visits',
+                echartOptions: { animation: false },
+                hiddenSeries: hidden.value,
+                'onUpdate:hiddenSeries': (v: string[]) => (hidden.value = v),
+              }),
+            ])
+        },
+      }),
+    )
+
+    cy.get('[aria-label="Hide Search"]')
+      .click()
+      .then(() => expect(hidden.value).to.deep.equal(['Search']))
+    slices().should('have.length', 2)
+  })
+
+  // An empty ring reads as a bug, so the last entry left showing does nothing.
+  it('refuses to hide the last slice left on the ring', () => {
+    mountChart()
+    cy.get('[aria-label="Hide Search"]').click()
+    cy.get('[aria-label="Hide Direct"]').click()
+    cy.get('[aria-label="Hide Email"]').click()
+    cy.get('[aria-label="Hide Email"]').should(
+      'have.attr',
+      'aria-pressed',
+      'true',
+    )
+  })
+
   it('gives up the readout when the labels move onto the ring', () => {
-    mountChart({ showInlineLabels: true })
+    mountChart({ showDataLabels: true })
     cy.get('[data-slot="chart-plot"]').should('not.contain.text', 'Visits')
     cy.get('[data-slot="chart-plot"] svg text').should('contain.text', 'Search')
   })
@@ -114,6 +155,25 @@ describe('DonutChart', () => {
     cy.get('[data-slot="chart-legend"]').should('contain.text', 'Others')
   })
 
+  // The tail is identified by the reserved key, not by what it prints, so a
+  // caller can tell it apart from a category that happens to read "Others".
+  it('names the tail slice by the reserved key', () => {
+    mountChart({ maxSlices: 2, onSelect: cy.spy().as('onSelect') })
+    slices().should('have.length', 2)
+    cy.get('[data-slot="chart-plot"] [role="img"]')
+      .focus()
+      .type('{rightarrow}{enter}')
+    cy.get('@onSelect').should('have.been.calledWithMatch', {
+      name: OTHERS_KEY,
+      label: 'Others',
+      value: 50,
+      rows: [
+        { source: 'Direct', visits: 30 },
+        { source: 'Email', visits: 20 },
+      ],
+    })
+  })
+
   describe('states', () => {
     /** The state an app styles the card from, without tracking it itself. */
     const container = () => cy.get('[data-slot="chart-container"]')
@@ -172,7 +232,8 @@ describe('DonutChart', () => {
       mountChart(
         {},
         {
-          center: ({ value, label }: any) => h('span', `${value} of ${label}`),
+          center: ({ formattedValue, label }: any) =>
+            h('span', `${formattedValue} of ${label}`),
         },
       )
       cy.get('[data-slot="chart-plot"]').should('contain.text', '100 of Visits')
@@ -182,8 +243,8 @@ describe('DonutChart', () => {
       mountChart(
         {},
         {
-          center: ({ label, percent }: any) =>
-            h('span', `${label} ${percent ?? ''}`),
+          center: ({ label, value, percent }: any) =>
+            h('span', `${label} ${value} ${Math.round(percent)}%`),
         },
       )
       slices().should('have.length', data.length)
@@ -194,7 +255,7 @@ describe('DonutChart', () => {
         350,
         135,
       )
-      cy.get('[data-slot="chart-plot"]').should('contain.text', 'Search 50%')
+      cy.get('[data-slot="chart-plot"]').should('contain.text', 'Search 50 50%')
     })
 
     it('takes an app’s own tooltip body', () => {
@@ -244,6 +305,7 @@ describe('DonutChart', () => {
       plot().type('{enter}')
       cy.get('@onSelect').should('have.been.calledWithMatch', {
         name: 'Direct',
+        label: 'Direct',
         value: 30,
         percent: 30,
         rows: [{ source: 'Direct', visits: 30 }],

package/src/charts/DonutChart.vue

@@ -36,7 +36,7 @@
         <!-- HTML rather than an echarts graphic: swapping the readout on hover
              costs two spans instead of a `setOption` on the ring. -->
         <div
-          v-if="!showInlineLabels"
+          v-if="!showDataLabels"
           class="pointer-events-none absolute inset-0 flex items-center justify-center"
           :dir="dir"
         >
@@ -60,7 +60,7 @@
                 <div
                   class="truncate text-center text-xl font-semibold tabular-nums text-ink-gray-8"
                 >
-                  {{ center.value }}
+                  {{ center.formattedValue }}
                 </div>
                 <!-- The share is the point of the readout, so only the name
                      gives way when the hole is too narrow for both. -->
@@ -68,8 +68,8 @@
                   class="flex items-baseline justify-center gap-1 text-xs text-ink-gray-5"
                 >
                   <span class="min-w-0 truncate">{{ center.label }}</span>
-                  <span v-if="center.percent" class="shrink-0">
-                    {{ center.percent }}
+                  <span v-if="center.percent !== undefined" class="shrink-0">
+                    {{ formatPercent(center.percent) }}
                   </span>
                 </div>
               </slot>
@@ -83,6 +83,7 @@
         :x="tooltip.x"
         :y="tooltip.y"
         :items="tooltip.items"
+        :rows="tooltip.rows"
         :dir="dir"
       >
         <template v-if="$slots.tooltip" #default="slotProps">
@@ -105,6 +106,7 @@
 import { computed, reactive, ref, watch } from 'vue'
 import { PieChart as PieSeries } from 'echarts/charts'
 import { registerChartModules, useChart } from './core/useChart'
+import { pruneHiddenSeries, toggleHiddenSeries } from './hiddenSeries'
 import { useTooltipDismiss } from './core/useTooltipDismiss'
 import { usePlotKeyboard } from './core/usePlotKeyboard'
 import {
@@ -124,7 +126,7 @@ import ChartContainer from './components/ChartContainer.vue'
 import ChartLegend from './components/ChartLegend.vue'
 import ChartTooltip from './components/ChartTooltip.vue'
 import type {
-  ChartExposed,
+  ChartExposedRefs,
   ChartLegendItem,
   ChartTooltipItem,
   DonutChartConfig,
@@ -139,12 +141,15 @@ registerChartModules([PieSeries])
 
 const props = defineProps<DonutChartProps>()
 
+const hiddenSlices = defineModel<string[]>('hiddenSeries', {
+  default: () => [],
+})
+
 const emit = defineEmits<DonutChartEmits>()
 
 defineSlots<DonutChartSlots>()
 
 const plotEl = ref<HTMLElement>()
-const hiddenSlices = ref<string[]>([])
 
 const dir = computed(() => props.dir ?? documentDir())
 const isHalf = computed(() => props.variant === 'half')
@@ -154,7 +159,7 @@ const config = computed<DonutChartConfig>(() => ({
   categoryColumn: props.category,
   valueColumn: props.value,
   maxSlices: props.maxSlices,
-  showInlineLabels: props.showInlineLabels,
+  showDataLabels: props.showDataLabels,
   centerLabel: props.centerLabel,
   variant: props.variant,
   palette: props.palette,
@@ -226,6 +231,8 @@ const tooltip = reactive({
   x: 0,
   y: 0,
   items: [] as ChartTooltipItem[],
+  /** Plural: a slice groups, and "Others" groups the whole tail. */
+  rows: [] as Record<string, any>[],
 })
 
 useTooltipDismiss({
@@ -255,7 +262,8 @@ const { chart, dispatch } = useChart({
       const slice = sliceByName.value.get(params.name)
       if (!slice) return
       emit('select', {
-        name: slice.label,
+        name: slice.name,
+        label: slice.label,
         value: slice.value,
         percent: slice.percent,
         rows: slice.rows,
@@ -302,8 +310,10 @@ function showTooltip(name: string) {
       value: slice.value,
       formattedValue: formatMeasure(slice.value),
       percent: slice.percent,
+      kind: 'series',
     },
   ]
+  tooltip.rows = slice.rows
   tooltip.x = pointer.x
   tooltip.y = pointer.y
   tooltip.open = true
@@ -351,7 +361,8 @@ const { attrs: plotAttrs } = usePlotKeyboard({
     const slice = visibleSlices.value[index]
     if (!slice) return
     emit('select', {
-      name: slice.label,
+      name: slice.name,
+      label: slice.label,
       value: slice.value,
       percent: slice.percent,
       rows: slice.rows,
@@ -365,14 +376,11 @@ const { attrs: plotAttrs } = usePlotKeyboard({
 })
 
 function toggleSlice(name: string) {
-  const hidden = hiddenSlices.value
-  // Refuse to hide the last visible slice — an empty ring reads as a bug.
-  if (!hidden.includes(name)) {
-    if (visibleSlices.value.length === 1) return
-    hiddenSlices.value = [...hidden, name]
-  } else {
-    hiddenSlices.value = hidden.filter((n) => n !== name)
-  }
+  hiddenSlices.value = toggleHiddenSeries(
+    hiddenSlices.value,
+    name,
+    slices.value.length,
+  )
 }
 
 function hoverSlice(name: string | null) {
@@ -387,14 +395,16 @@ const center = computed(() => {
   const slice = hovered.value ? sliceByName.value.get(hovered.value) : undefined
   if (slice && !slice.hidden) {
     return {
-      value: shorten(slice.value),
       label: slice.label,
-      percent: formatPercent(slice.percent),
+      value: slice.value,
+      formattedValue: shorten(slice.value),
+      percent: slice.percent,
     }
   }
   return {
-    value: shorten(visibleTotal.value),
     label: props.centerLabel ?? formatLabel(props.value),
+    value: visibleTotal.value,
+    formattedValue: shorten(visibleTotal.value),
     percent: undefined,
   }
 })
@@ -414,12 +424,9 @@ function shorten(value: number) {
 watch(
   () => slices.value.map((slice) => slice.name),
   (names) => {
-    if (hiddenSlices.value.every((name) => names.includes(name))) return
-    hiddenSlices.value = hiddenSlices.value.filter((name) =>
-      names.includes(name),
-    )
+    hiddenSlices.value = pruneHiddenSeries(hiddenSlices.value, names)
   },
 )
 
-defineExpose<ChartExposed>({ chart: computed(() => chart.value) })
+defineExpose<ChartExposedRefs>({ chart: computed(() => chart.value) })
 </script>

package/src/charts/FunnelChart.cy.ts

@@ -50,6 +50,18 @@ describe('FunnelChart', () => {
     columns().should('have.length', data.length)
   })
 
+  it('leaves out a stage whose count it cannot read', () => {
+    mountChart({
+      data: [
+        { stage: 'Visited', deals: 50 },
+        { stage: 'Demoed', deals: 'n/a' },
+        { stage: 'Won', deals: 20 },
+      ],
+    })
+    columns().should('have.length', 2)
+    cy.get('[data-slot="chart-container"]').should('not.contain.text', 'Demoed')
+  })
+
   it('prints each stage against the first, and nothing against the first', () => {
     mountChart()
     cy.get('[data-slot="chart-container"]')
@@ -58,11 +70,6 @@ describe('FunnelChart', () => {
       .and('not.contain.text', '100%')
   })
 
-  it('drops the percentages on request', () => {
-    mountChart({ showPercentages: false })
-    cy.get('[data-slot="chart-container"]').should('not.contain.text', '60%')
-  })
-
   it('gives every stage a hit area that names it', () => {
     mountChart()
     hitAreas().should('have.length', data.length)
@@ -73,9 +80,9 @@ describe('FunnelChart', () => {
     mountChart({ onSelect: cy.spy().as('onSelect') })
     cy.get('[aria-label="Demoed, 30"]').click()
     cy.get('@onSelect').should('have.been.calledWithMatch', {
+      name: 'Demoed',
       label: 'Demoed',
       value: 30,
-      index: 1,
       row: { stage: 'Demoed', deals: 30 },
     })
   })
@@ -88,6 +95,16 @@ describe('FunnelChart', () => {
       .and('contain.text', 'Won')
   })
 
+  it('reads both conversion rates in the tooltip, against the first stage and the one before', () => {
+    mountChart()
+    cy.get('[aria-label="Won, 20"]').trigger('mouseenter')
+    cy.get('[data-slot="chart-tooltip"]')
+      .should('contain.text', 'of Visited')
+      .and('contain.text', '40%')
+      .and('contain.text', 'of Demoed')
+      .and('contain.text', '67%')
+  })
+
   describe('keyboard', () => {
     // The funnel draws its own HTML, so each stage is a tab stop of its own —
     // no arrow-key cursor, unlike the echarts plots.
@@ -122,7 +139,6 @@ describe('FunnelChart', () => {
       cy.get('@onSelect').should('have.been.calledWithMatch', {
         label: 'Won',
         value: 20,
-        index: 2,
         row: { stage: 'Won', deals: 20 },
       })
     })
@@ -160,6 +176,12 @@ describe('FunnelChart', () => {
       cy.contains('No data to show').should('be.visible')
     })
 
+    it('says so when no row carries a count', () => {
+      mountChart({ data: [{ stage: 'Visited', deals: null }] })
+      container().should('have.attr', 'data-state', 'empty')
+      cy.contains('No data to show').should('be.visible')
+    })
+
     it('takes an app’s own placeholder in place of the skeleton', () => {
       mountChart({ loading: true }, { loading: () => h('div', { id: 'own' }) })
       cy.get('#own').should('exist')
@@ -191,12 +213,18 @@ describe('FunnelChart', () => {
       cy.get('[data-slot="chart-header"]').should('contain.text', 'Export')
     })
 
-    it('takes an app’s own tooltip body, with the stage behind it', () => {
+    it('takes an app’s own tooltip body, with the rates among the items', () => {
       mountChart(
         {},
         {
-          tooltip: ({ label, stage }: any) =>
-            h('span', `${label} at ${Math.round(stage.percentOfPrevious)}%`),
+          tooltip: ({ items, rows }: any) =>
+            h(
+              'span',
+              `${rows[0].stage} at ${
+                items.find((item: any) => item.name === 'ofPrevious')
+                  .formattedValue
+              }`,
+            ),
         },
       )
       cy.get('[aria-label="Won, 20"]').focus()