frappe-ui 1.0.0-beta.61 → 1.0.0-beta.63

package/experimental/CodeEditor/CodeEditor.api.md

@@ -41,7 +41,7 @@
   },
   {
     name: 'size',
-    description: 'Size token, mirroring frappe-ui inputs. Scales the editor\'s font size and\nminimum height (`sm | md | lg | xl`). Defaults to `md`.',
+    description: 'Size token, mirroring frappe-ui inputs. Scales the editor\'s font size and\nminimum height (`xs | sm | md | lg`). Defaults to `md`.',
     required: false,
     type: 'InputSize',
     default: '"md"'

package/experimental/CodeEditor/CodeEditor.md

@@ -40,7 +40,7 @@ and loses the affordance that it's an editable field.
 
 ## Sizes
 
-`size` mirrors the frappe-ui input sizes (`sm | md | lg | xl`, default `md`),
+`size` mirrors the frappe-ui input sizes (`xs | sm | md | lg`, default `md`),
 scaling the editor's font size and minimum height.
 
 <ComponentPreview name="CodeEditor-Sizes" />

package/experimental/CodeEditor/CodeEditor.playground.vue

@@ -43,10 +43,10 @@ const knobs: Knob[] = [
     type: 'tabs',
     default: 'md',
     options: [
+      { label: 'xs', value: 'xs' },
       { label: 'sm', value: 'sm' },
       { label: 'md', value: 'md' },
       { label: 'lg', value: 'lg' },
-      { label: 'xl', value: 'xl' },
     ],
   },
   { name: 'placeholder', type: 'text', default: '', width: '12rem' },

package/experimental/CodeEditor/CodeEditor.vue

@@ -288,17 +288,17 @@ function buildVariant(v?: string, disabled?: boolean): Extension {
   return cmView.EditorView.theme(fragments[v ?? 'subtle'] ?? fragments.subtle)
 }
 
-// Per-size font scale + content min-height, mirroring frappe-ui's `sm|md|lg|xl`
+// Per-size font scale + content min-height, mirroring frappe-ui's `xs|sm|md|lg`
 // input sizes. This compartment is the SOLE source of `&` font size and
 // `.cm-content` min-height — the base `theme` deliberately omits both so there's
 // no equal-specificity fight whose winner depends on StyleModule order.
 function buildSize(s?: string): Extension {
   if (!cmView) return []
   const sizes: Record<string, { fontSize: string; minHeight: string }> = {
+    xs: { fontSize: '11px', minHeight: '2.5rem' },
     sm: { fontSize: '12px', minHeight: '3.5rem' },
     md: { fontSize: '13px', minHeight: '4.5rem' },
     lg: { fontSize: '14px', minHeight: '6rem' },
-    xl: { fontSize: '16px', minHeight: '7.5rem' },
   }
   const cfg = sizes[s ?? 'md'] ?? sizes.md
   return cmView.EditorView.theme({

package/experimental/CodeEditor/stories/Sizes.vue

@@ -7,9 +7,9 @@ const code = ref(`const sum = (a, b) => a + b`)
 
 <template>
   <div class="w-full max-w-xl space-y-4">
+    <CodeEditor v-model="code" language="javascript" size="xs" />
     <CodeEditor v-model="code" language="javascript" size="sm" />
     <CodeEditor v-model="code" language="javascript" size="md" />
     <CodeEditor v-model="code" language="javascript" size="lg" />
-    <CodeEditor v-model="code" language="javascript" size="xl" />
   </div>
 </template>

package/experimental/CodeEditor/types.ts

@@ -42,7 +42,7 @@ export interface CodeEditorProps extends InputLabelingProps {
   variant?: Exclude<InputVariant, 'ghost'>
   /**
    * Size token, mirroring frappe-ui inputs. Scales the editor's font size and
-   * minimum height (`sm | md | lg | xl`). Defaults to `md`.
+   * minimum height (`xs | sm | md | lg`). Defaults to `md`.
    */
   size?: InputSize
 }

package/experimental/MultiEmailInput/MultiEmailInput.cy.ts

@@ -17,6 +17,7 @@ function host(
     required?: boolean
     error?: string
     disabled?: boolean
+    size?: 'xs' | 'sm' | 'md' | 'lg'
   } = {},
 ) {
   return defineComponent({
@@ -46,6 +47,7 @@ function host(
           required: options.required,
           error: options.error,
           disabled: options.disabled,
+          size: options.size,
           placeholder: 'Add email…',
         }),
       ]
@@ -152,4 +154,29 @@ describe('MultiEmailInput', () => {
     cy.mount(host({ disabled: true }))
     cy.get('[data-slot="input"]').should('have.attr', 'disabled')
   })
+
+  // The option-row avatar has to shrink with the row. `md` (24px) is the whole
+  // height of an `xs` row before its padding, so a size-invariant avatar makes
+  // the smallest control draw the biggest picture.
+  const rowAvatarHeights: Array<[size: 'xs' | 'sm' | 'md' | 'lg', px: number]> =
+    [
+      ['xs', 16],
+      ['sm', 20],
+      ['md', 24],
+      ['lg', 24],
+    ]
+
+  for (const [size, px] of rowAvatarHeights) {
+    it(`draws a ${px}px option-row avatar at size="${size}"`, () => {
+      cy.mount(host({ size }))
+      cy.get('[data-slot="input"]').click()
+      cy.get('[data-slot="item"]')
+        .first()
+        .find('[data-slot="item-prefix"] > div')
+        .first()
+        .then(($avatar) => {
+          expect($avatar[0].getBoundingClientRect().height).to.equal(px)
+        })
+    })
+  }
 })

package/experimental/MultiEmailInput/MultiEmailInput.vue

@@ -166,7 +166,15 @@ const showEmpty = computed(
   () => !props.loading && !suggestions.value.length && !showCreateOption.value,
 )
 
-const rowAvatarSize = computed(() => (props.size === 'sm' ? 'sm' : 'md'))
+// Avatar has its own scale (`xs` 16px, `sm` 20px, `md` 24px), and the option
+// row is `min-h-6`/`min-h-7`/`min-h-8`/`min-h-10` plus `ItemListRow`'s own
+// padding. Step the avatar down with the row for the two small sizes rather
+// than forwarding a size the row cannot draw — a `md` avatar is 24px, the
+// whole height of an `xs` row before its `py-1`. `md` and `lg` rows both fit
+// `md`; a 28px `lg` avatar would leave no room in a 32px `md` row.
+const rowAvatarSize = computed(() =>
+  props.size === 'xs' ? 'xs' : props.size === 'sm' ? 'sm' : 'md',
+)
 
 const boxClasses = computed(() => [
   'flex flex-wrap items-center gap-1.5 rounded-4 bg-surface-gray-2 px-1.5 py-1 transition-colors focus-within:ring-2 focus-within:ring-outline-gray-3',

package/package.json

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

package/src/charts/AreaChart.vue

@@ -40,6 +40,7 @@
         :y="tooltip.y"
         :label="tooltip.label"
         :items="tooltip.items"
+        :row="tooltip.row"
         :dir="dir"
       >
         <template v-if="$slots.tooltip" #default="slotProps">
@@ -49,10 +50,7 @@
     </template>
 
     <template v-if="legendItems.length > 1" #legend>
-      <ChartLegend
-        :items="legendItems"
-        @change="toggleSeries"
-      />
+      <ChartLegend :items="legendItems" @change="toggleSeries" />
     </template>
   </ChartContainer>
 </template>
@@ -130,6 +128,7 @@ const {
   format: () => normalized.value.format,
   buildOption: buildAxisChartOption,
   stackShares: () => buildStackShares(config.value, hiddenSeries.value),
+  tooltipColumns: () => normalized.value.tooltipColumns,
   hiddenSeries,
   onSelect: (event) => emit('select', event),
 })

package/src/charts/BarChart.cy.ts

@@ -98,6 +98,56 @@ describe('BarChart', () => {
         .and('contain.text', 'Sales')
         .and('contain.text', '10')
     })
+
+    // `tooltipColumns` is the context in another unit — the count behind a
+    // rate. It reaches the tooltip and nothing else.
+    describe('a tooltip-only column', () => {
+      const withOrders = data.map((row, index) => ({
+        ...row,
+        orders: (index + 1) * 1000,
+      }))
+
+      const mountWithExtra = (props: Record<string, any> = {}) =>
+        mountChart({
+          data: withOrders,
+          tooltipColumns: [{ name: 'orders', label: 'Orders' }],
+          ...props,
+        })
+
+      it('prints in the tooltip', () => {
+        mountWithExtra()
+        cy.get('[data-slot="chart-plot"]').trigger('mousemove', 100, 150)
+        cy.get('[data-slot="chart-tooltip"]')
+          .should('contain.text', 'Orders')
+          .and('contain.text', '1,000')
+      })
+
+      it('carries no swatch, which would claim a mark on the plot', () => {
+        mountWithExtra()
+        cy.get('[data-slot="chart-plot"]').trigger('mousemove', 100, 150)
+        // Two series, and the column adds no third.
+        cy.get('[data-slot="chart-tooltip"] .size-2').should('have.length', 2)
+      })
+
+      it('draws no mark and takes no legend entry', () => {
+        mountWithExtra()
+        bars().should('have.length', data.length * 2)
+        cy.get('[data-slot="chart-legend"] button').should('have.length', 2)
+        cy.get('[data-slot="chart-legend"]').should(
+          'not.contain.text',
+          'Orders',
+        )
+      })
+
+      it('stays in the tooltip when the legend hides a series', () => {
+        mountWithExtra()
+        cy.get('[aria-label="Hide Sales"]').click()
+        cy.get('[data-slot="chart-plot"]').trigger('mousemove', 100, 150)
+        cy.get('[data-slot="chart-tooltip"]')
+          .should('not.contain.text', 'Sales')
+          .and('contain.text', 'Orders')
+      })
+    })
   })
 
   describe('legend', () => {
@@ -492,6 +542,94 @@ describe('BarChart', () => {
         .should('contain.text', 'at Jan: 2')
         .and('not.contain.text', 'Sales')
     })
+
+    describe('dismissal', () => {
+      function openTooltip() {
+        mountChart()
+        bars().should('have.length', data.length * 2)
+        plot().trigger('mousemove', 100, 150)
+        cy.get('[data-slot="chart-tooltip"]').should('exist')
+      }
+
+      it('closes when the page scrolls', () => {
+        openTooltip()
+        // Dispatched on the plot, not the window: a scroll event does not
+        // bubble, so this reaches the listener only through the capture phase.
+        // That is how a scroll inside a nested container arrives.
+        plot().then(($el) => $el[0].dispatchEvent(new Event('scroll')))
+        cy.get('[data-slot="chart-tooltip"]').should('not.exist')
+      })
+
+      it('closes when the window resizes', () => {
+        openTooltip()
+        cy.window().then((win) => win.dispatchEvent(new Event('resize')))
+        cy.get('[data-slot="chart-tooltip"]').should('not.exist')
+      })
+
+      it('closes when the pointer leaves the plot', () => {
+        openTooltip()
+        plot().trigger('pointerleave')
+        cy.get('[data-slot="chart-tooltip"]').should('not.exist')
+      })
+
+      it('closes when the window goes away', () => {
+        openTooltip()
+        cy.window().then((win) => win.dispatchEvent(new Event('blur')))
+        cy.get('[data-slot="chart-tooltip"]').should('not.exist')
+      })
+
+      it('closes when the tab is hidden', () => {
+        openTooltip()
+        cy.document().then((doc) => {
+          Object.defineProperty(doc, 'hidden', {
+            value: true,
+            configurable: true,
+          })
+          doc.dispatchEvent(new Event('visibilitychange'))
+        })
+        cy.get('[data-slot="chart-tooltip"]').should('not.exist')
+      })
+
+      it('closes when the rows behind it change', () => {
+        const rows = ref(data)
+        cy.mount(
+          defineComponent({
+            setup() {
+              return () =>
+                h('div', { style: 'width: 480px; height: 300px' }, [
+                  h(BarChart, {
+                    data: rows.value,
+                    x: 'month',
+                    y: ['sales', 'refunds'],
+                    echartOptions: { animation: false },
+                  }),
+                ])
+            },
+          }),
+        )
+        bars().should('have.length', data.length * 2)
+        plot().trigger('mousemove', 100, 150)
+        cy.get('[data-slot="chart-tooltip"]').should('exist')
+        cy.then(() => {
+          rows.value = data.map((row) => ({ ...row, sales: row.sales * 2 }))
+        })
+        cy.get('[data-slot="chart-tooltip"]').should('not.exist')
+      })
+    })
+
+    it('hands the plotted row to the tooltip slot', () => {
+      // 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`),
+      } as any)
+      bars().should('have.length', data.length * 2)
+      plot().focus()
+      cy.get('[data-slot="chart-tooltip"]').should(
+        'contain.text',
+        '1000 orders',
+      )
+    })
   })
 
   // echarts draws into one element, so the plot takes a single tab stop and the

package/src/charts/BarChart.vue

@@ -41,6 +41,7 @@
         :y="tooltip.y"
         :label="tooltip.label"
         :items="tooltip.items"
+        :row="tooltip.row"
         :dir="dir"
       >
         <template v-if="$slots.tooltip" #default="slotProps">
@@ -50,10 +51,7 @@
     </template>
 
     <template v-if="legendItems.length > 1" #legend>
-      <ChartLegend
-        :items="legendItems"
-        @change="toggleSeries"
-      />
+      <ChartLegend :items="legendItems" @change="toggleSeries" />
     </template>
   </ChartContainer>
 </template>
@@ -133,6 +131,7 @@ const {
   format: () => normalized.value.format,
   buildOption: buildAxisChartOption,
   stackShares: () => buildStackShares(config.value, hiddenSeries.value),
+  tooltipColumns: () => normalized.value.tooltipColumns,
   horizontal: () => Boolean(props.horizontal),
   hiddenSeries,
   onSelect: (event) => emit('select', event),

package/src/charts/DonutChart.vue

@@ -105,6 +105,7 @@
 import { computed, reactive, ref, watch } from 'vue'
 import { PieChart as PieSeries } from 'echarts/charts'
 import { registerChartModules, useChart } from './core/useChart'
+import { useTooltipDismiss } from './core/useTooltipDismiss'
 import { usePlotKeyboard } from './core/usePlotKeyboard'
 import {
   buildDonutChartOption,
@@ -227,6 +228,14 @@ const tooltip = reactive({
   items: [] as ChartTooltipItem[],
 })
 
+useTooltipDismiss({
+  plot: plotEl,
+  data: () => visibleSlices.value,
+  close: () => {
+    tooltip.open = false
+  },
+})
+
 /** Slice under the pointer, or under the hovered legend entry. */
 const hovered = ref<string | null>(null)
 

package/src/charts/FunnelChart.vue

@@ -38,14 +38,14 @@
           />
         </div>
 
-        <div class="relative mb-4 grid" :style="gridStyle">
+        <div class="relative mb-6 grid" :style="gridStyle">
           <div
             v-for="stage in stages"
             :key="stage.index"
-            class="min-w-0"
+            class="flex min-w-0 flex-col gap-1"
             :class="stage.index === 0 ? 'pe-3' : 'px-3'"
           >
-            <div class="truncate text-p-sm text-ink-gray-5">
+            <div class="truncate text-sm text-ink-gray-5">
               {{ stage.label }}
             </div>
             <div
@@ -164,6 +164,7 @@
 import { computed, reactive, ref } from 'vue'
 import { formatLabel, formatPercent, formatValue } from './format'
 import { buildFunnelStages, funnelShapes } from './funnelGeometry'
+import { useTooltipDismiss } from './core/useTooltipDismiss'
 import { chartColors, useChartTokens } from './tokens'
 import { documentDir } from './utils'
 import ChartContainer from './components/ChartContainer.vue'
@@ -248,6 +249,14 @@ const tooltip = reactive({
   rates: [] as { label: string; value: string }[],
 })
 
+useTooltipDismiss({
+  plot: root,
+  data: () => stages.value,
+  close: () => {
+    tooltip.open = false
+  },
+})
+
 function hover(stage: FunnelStage, event: MouseEvent) {
   readStage(stage)
   track(event)

package/src/charts/HeatmapChart.vue

@@ -93,6 +93,7 @@ import { GridComponent, VisualMapContinuousComponent } from 'echarts/components'
 import { LabelLayout } from 'echarts/features'
 import { registerChartModules, useChart } from './core/useChart'
 import { usePlotKeyboard } from './core/usePlotKeyboard'
+import { useTooltipDismiss } from './core/useTooltipDismiss'
 import { AXIS_LABEL_MARGIN } from './axisChartCommon'
 import {
   buildHeatmapMatrix,
@@ -188,6 +189,14 @@ const tooltip = reactive({
   items: [] as ChartTooltipItem[],
 })
 
+useTooltipDismiss({
+  plot: plotEl,
+  data: () => matrix.value.cells,
+  close: () => {
+    tooltip.open = false
+  },
+})
+
 /**
  * How much of the plot box sits below the axis line: the row echarts reserved
  * for the x-axis labels, in px.
@@ -335,8 +344,10 @@ function downplayCell(index: number | null) {
 const keyboard = usePlotKeyboard({
   marks: () => matrix.value.cells,
   // The pair of categories names the cell, whatever order the grid ends up in
-  // and whichever refetch built the rows.
-  key: (cell) => `${cell.y}${cell.x}`,
+  // and whichever refetch built the rows. NUL joins them because no category
+  // can hold one, so no pair of values can collide on the seam. Written as an
+  // escape: a literal NUL makes every text tool read this file as binary.
+  key: (cell) => `${cell.y}\u0000${cell.x}`,
   move: (index, previous) => {
     downplayCell(previous)
     readCell(index)

package/src/charts/LineChart.vue

@@ -40,6 +40,7 @@
         :y="tooltip.y"
         :label="tooltip.label"
         :items="tooltip.items"
+        :row="tooltip.row"
         :dir="dir"
       >
         <template v-if="$slots.tooltip" #default="slotProps">
@@ -49,10 +50,7 @@
     </template>
 
     <template v-if="legendItems.length > 1" #legend>
-      <ChartLegend
-        :items="legendItems"
-        @change="toggleSeries"
-      />
+      <ChartLegend :items="legendItems" @change="toggleSeries" />
     </template>
   </ChartContainer>
 </template>
@@ -130,6 +128,7 @@ const {
   format: () => normalized.value.format,
   buildOption: buildAxisChartOption,
   stackShares: () => buildStackShares(config.value, hiddenSeries.value),
+  tooltipColumns: () => normalized.value.tooltipColumns,
   hiddenSeries,
   onSelect: (event) => emit('select', event),
 })

package/src/charts/SankeyChart.vue

@@ -53,6 +53,7 @@ import { computed, reactive, ref } from 'vue'
 import { SankeyChart as SankeySeries } from 'echarts/charts'
 import { registerChartModules, useChart } from './core/useChart'
 import { usePlotKeyboard } from './core/usePlotKeyboard'
+import { useTooltipDismiss } from './core/useTooltipDismiss'
 import { buildSankeyGraph, buildSankeyOption } from './sankeyOptions'
 import { formatLabel, formatValue } from './format'
 import { useChartTokens } from './tokens'
@@ -143,6 +144,14 @@ const tooltip = reactive({
   items: [] as ChartTooltipItem[],
 })
 
+useTooltipDismiss({
+  plot: plotEl,
+  data: () => graph.value.links,
+  close: () => {
+    tooltip.open = false
+  },
+})
+
 const { chart, dispatch } = useChart({
   container: plotEl,
   option: () => built.value.option,

package/src/charts/ScatterChart.vue

@@ -64,6 +64,7 @@ import { GridComponent, MarkLineComponent } from 'echarts/components'
 import { LabelLayout } from 'echarts/features'
 import { registerChartModules, useChart } from './core/useChart'
 import { usePlotKeyboard } from './core/usePlotKeyboard'
+import { useTooltipDismiss } from './core/useTooltipDismiss'
 import { buildScatterOption, buildScatterSeries } from './scatterOptions'
 import { formatLabel, formatValue } from './format'
 import { pruneHiddenSeries, toggleHiddenSeries } from './hiddenSeries'
@@ -382,6 +383,14 @@ function downplayPoint(index: number | null) {
   })
 }
 
+useTooltipDismiss({
+  plot: plotEl,
+  data: () => walk.value,
+  close: () => {
+    tooltip.open = false
+  },
+})
+
 const keyboard = usePlotKeyboard({
   marks: () => walk.value,
   // A point is its group and its place on the axes. Two points that sit on top

package/src/charts/areaChartOptions.test.ts

@@ -17,7 +17,7 @@ const tokens: ChartTokens = {
   splitLine: 'outline-1',
   dataLabel: 'ink-6',
   insideLabel: 'ink-8',
-  cellGap: '#ffffff',
+  backdrop: '#ffffff',
 }
 
 /** What `AreaChart` hands the builder: the shared config, marked `'area'`. */