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

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.66",
   "description": "A set of components and utilities for rapid UI development",
   "engines": {
     "node": ">=20.19.0"
@@ -20,7 +20,8 @@
   },
   "bin": {
     "tokens-v2": "./tailwind/migrate-tokens-v2.js",
-    "shortcuts-v1": "./scripts/migrate-shortcuts-v1.js"
+    "shortcuts-v1": "./scripts/migrate-shortcuts-v1.js",
+    "destinations-v1": "./scripts/migrate-destinations-v1.js"
   },
   "scripts": {
     "test": "vitest --run",

package/scripts/migrate-destinations-v1.js

@@ -0,0 +1,229 @@
+#!/usr/bin/env node
+/** Rename pre-v1 navigation props to the v1 destination vocabulary.
+ * Usage: destinations-v1 [--dry-run] <dir-or-file...>
+ */
+import fs from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const USAGE = 'Usage: destinations-v1 [--dry-run] <dir-or-file...>'
+const EXTENSIONS = new Set(['.vue', '.md'])
+const PROP_RENAMES = {
+  Button: { link: 'href' },
+  PageHeaderBackButton: { to: 'fallback-route' },
+  ListRow: { to: 'route' },
+  SidebarItem: { to: 'route' },
+  SidebarRailItem: { to: 'route' },
+  MobileNavItem: { to: 'route' },
+}
+const kebab = (name) =>
+  name.replace(/([a-z0-9])([A-Z])/g, '$1-$2').toLowerCase()
+
+function componentAliases(source) {
+  const aliases = new Map()
+  const imports =
+    /import\s*\{([^}]+)\}\s*from\s*['"]frappe-ui(?:\/[^'"]*)?['"]/g
+  for (const match of source.matchAll(imports)) {
+    for (const binding of match[1].split(',')) {
+      const [imported, local] = binding
+        .trim()
+        .replace(/^type\s+/, '')
+        .split(/\s+as\s+/)
+      if (PROP_RENAMES[imported]) {
+        const binding = local || imported
+        aliases.set(binding, imported)
+        aliases.set(kebab(binding), imported)
+      }
+    }
+  }
+  // Local template bindings shadow imports with the same local name.
+  const localImports =
+    /import\s+([^'";]+?)\s+from\s*['"](?!frappe-ui(?:\/|['"]))[^'"]+['"]/g
+  for (const match of source.matchAll(localImports)) {
+    const clause = match[1].trim()
+    const bindings = []
+    if (!clause.startsWith('{') && !clause.startsWith('*')) {
+      bindings.push(clause.split(',')[0].trim())
+    }
+    const named = clause.match(/\{([^}]+)\}/)?.[1]
+    if (named) {
+      for (const binding of named.split(',')) {
+        bindings.push(
+          binding
+            .trim()
+            .split(/\s+as\s+/)
+            .at(-1),
+        )
+      }
+    }
+    for (const name of bindings) {
+      if (!PROP_RENAMES[name]) continue
+      aliases.delete(name)
+      aliases.delete(kebab(name))
+    }
+  }
+  return aliases
+}
+
+function renameAttributes(tag, renames) {
+  let migrated = ''
+  let cursor = 0
+  let quote
+  while (cursor < tag.length) {
+    const character = tag[cursor]
+    if (quote) {
+      migrated += character
+      if (character === quote && tag[cursor - 1] !== '\\') quote = undefined
+      cursor += 1
+      continue
+    }
+    if (character === '"' || character === "'") {
+      quote = character
+      migrated += character
+      cursor += 1
+      continue
+    }
+    if (!/\s/.test(character)) {
+      migrated += character
+      cursor += 1
+      continue
+    }
+    migrated += character
+    cursor += 1
+    const match = tag
+      .slice(cursor)
+      .match(
+        /^(v-bind:|[:.]?)([A-Za-z][\w-]*)((?:\.[A-Za-z][\w-]*)*)(?=[\s=/>])/,
+      )
+    if (!match) continue
+    const replacement = renames[match[2]]
+    if (replacement) {
+      const isShorthandBinding =
+        match[1] && tag[cursor + match[0].length] !== '='
+      migrated += `${match[1]}${replacement}${match[3]}`
+      if (isShorthandBinding) migrated += `="${match[2]}"`
+    } else {
+      migrated += match[0]
+    }
+    cursor += match[0].length
+  }
+  return migrated
+}
+
+function migrateMarkup(source, aliases) {
+  let migrated = ''
+  let cursor = 0
+  while (cursor < source.length) {
+    const start = source.indexOf('<', cursor)
+    if (start === -1) return migrated + source.slice(cursor)
+    migrated += source.slice(cursor, start)
+    if (source.startsWith('<!--', start)) {
+      const commentEnd = source.indexOf('-->', start + 4)
+      const next = commentEnd === -1 ? source.length : commentEnd + 3
+      migrated += source.slice(start, next)
+      cursor = next
+      continue
+    }
+    const nameMatch = source.slice(start + 1).match(/^([A-Za-z][\w.-]*)/)
+    if (!nameMatch) {
+      migrated += '<'
+      cursor = start + 1
+      continue
+    }
+    let end = start + 1 + nameMatch[1].length
+    let quote
+    for (; end < source.length; end += 1) {
+      const character = source[end]
+      if (quote) {
+        if (character === quote && source[end - 1] !== '\\') quote = undefined
+      } else if (character === '"' || character === "'") {
+        quote = character
+      } else if (character === '>') {
+        break
+      }
+    }
+    if (end === source.length) return migrated + source.slice(start)
+    const tag = source.slice(start, end + 1)
+    const component = aliases.get(nameMatch[1])
+    if (!component) {
+      migrated += tag
+      cursor = end + 1
+      continue
+    }
+    migrated += renameAttributes(tag, PROP_RENAMES[component])
+    cursor = end + 1
+  }
+  return migrated
+}
+
+/**
+ * Rename destination attributes on template components explicitly imported
+ * from frappe-ui, leaving scripts and ambiguous global components unchanged.
+ */
+export function migrateDestinations(source) {
+  const aliases = componentAliases(source)
+  const templateStart = source.indexOf('<template')
+  const templateEnd = source.lastIndexOf('</template>')
+  if (templateStart === -1 || templateEnd < templateStart)
+    return migrateMarkup(source, aliases)
+  const end = templateEnd + '</template>'.length
+  return (
+    source.slice(0, templateStart) +
+    migrateMarkup(source.slice(templateStart, end), aliases) +
+    source.slice(end)
+  )
+}
+
+function filesIn(target, seen = new Set()) {
+  const stat = fs.lstatSync(target)
+  if (stat.isSymbolicLink()) return []
+  if (stat.isFile()) return EXTENSIONS.has(path.extname(target)) ? [target] : []
+  const real = fs.realpathSync(target)
+  if (seen.has(real)) return []
+  seen.add(real)
+  return fs
+    .readdirSync(target, { withFileTypes: true })
+    .sort((a, b) => a.name.localeCompare(b.name))
+    .flatMap((entry) => {
+      if (['node_modules', '.git', 'dist', 'build'].includes(entry.name))
+        return []
+      return filesIn(path.join(target, entry.name), seen)
+    })
+}
+
+/** Run the destinations-v1 CLI and return its process exit code. */
+export function run(argv) {
+  const dryRun = argv.includes('--dry-run')
+  const unknown = argv.find((arg) => arg.startsWith('-') && arg !== '--dry-run')
+  if (unknown) {
+    console.error(`Unknown option: ${unknown}\n${USAGE}`)
+    return 1
+  }
+  const targets = argv.filter((arg) => arg !== '--dry-run')
+  if (!targets.length) {
+    console.error(USAGE)
+    return 1
+  }
+  let changed = 0
+  const files = [
+    ...new Set(targets.flatMap((target) => filesIn(path.resolve(target)))),
+  ]
+  for (const file of files) {
+    const source = fs.readFileSync(file, 'utf8')
+    const migrated = migrateDestinations(source)
+    if (migrated === source) continue
+    changed += 1
+    if (!dryRun) fs.writeFileSync(file, migrated)
+    console.log(`${dryRun ? 'Would migrate' : 'Migrated'} ${file}`)
+  }
+  console.log(
+    `${dryRun ? 'Would migrate' : 'Migrated'} ${changed} file${changed === 1 ? '' : 's'}.`,
+  )
+  return 0
+}
+
+const script = fileURLToPath(import.meta.url)
+const isMain =
+  process.argv[1] &&
+  fs.realpathSync(process.argv[1]) === fs.realpathSync(script)
+if (isMain) process.exitCode = run(process.argv.slice(2))

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 }],