frappe-ui 1.0.0-rc.2 → 1.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "1.0.0-rc.2",
+  "version": "1.0.0",
   "description": "A set of components and utilities for rapid UI development",
   "engines": {
     "node": ">=20.19.0"
@@ -50,7 +50,7 @@
     "test": "vitest --run",
     "test:coverage": "vitest --run --coverage",
     "test:cypress": "cypress run --component",
-    "test:cypress:coverage": "cross-env COVERAGE=true cypress run --component",
+    "test:cypress:coverage": "cross-env COVERAGE=true cypress run --component && nyc report",
     "coverage": "yarn test:coverage && yarn test:cypress:coverage && yarn coverage:merge",
     "coverage:merge": "tsx .github/scripts/merge-coverage.ts",
     "type-check": "vue-tsc --noEmit -p tsconfig.app.json && vue-tsc --noEmit -p tsconfig.node.json",
@@ -310,7 +310,6 @@
     "@codemirror/lang-xml": "^6.1.0",
     "@codemirror/lang-yaml": "^6.1.3",
     "@codemirror/lint": "^6.0.0",
-    "@cypress/code-coverage": "^3.13.10",
     "@shikijs/transformers": "^3.15.0",
     "@vitejs/plugin-vue": "^6.0.7",
     "@vitest/coverage-v8": "^3.2.4",

package/readme.md

@@ -4,7 +4,7 @@
 
 # Frappe UI
 
-**Vue 3 components, design tokens and data composables for Frappe apps**
+**The all-in-one toolkit for modern frontends. High-quality components, app recipes and AI-ready docs.**
 
 <a href="https://www.npmjs.com/package/frappe-ui"><img alt="npm version" src="https://img.shields.io/npm/v/frappe-ui.svg?style=flat" /></a>
 <a href="https://www.npmjs.com/package/frappe-ui"><img alt="npm downloads" src="https://img.shields.io/npm/dm/frappe-ui.svg?style=flat" /></a>

package/src/charts/FunnelChart.vue

@@ -121,10 +121,9 @@
         :dir="dir"
       >
         <template #default="slotProps">
+          <!-- The value item carries the stage's name, so a header would print
+               it twice. -->
           <slot name="tooltip" v-bind="slotProps">
-            <div class="mb-2 text-p-sm text-ink-gray-5">
-              {{ slotProps.label }}
-            </div>
             <div class="flex flex-col gap-1.5 text-p-sm">
               <div
                 v-for="item in slotProps.items.filter(
@@ -170,7 +169,7 @@
 
 <script setup lang="ts">
 import { computed, reactive, ref } from 'vue'
-import { formatLabel, formatPercent, formatValue } from './format'
+import { formatPercent, formatValue } from './format'
 import { buildFunnelStages, funnelShapes } from './funnelGeometry'
 import { useTooltipDismiss } from './core/useTooltipDismiss'
 import { paletteColors, useChartTokens } from './tokens'
@@ -290,7 +289,9 @@ function readStage(stage: FunnelStage) {
   tooltip.items = [
     {
       name: String(stage.index),
-      label: formatLabel(props.value),
+      // `value` is a row key, often one the caller named when reshaping its
+      // rows, so it says nothing to the reader.
+      label: stage.label,
       color: colors.value[stage.index],
       value: stage.value,
       formattedValue: formatMeasure(stage.value),

package/src/charts/axisChartCommon.ts

@@ -12,6 +12,7 @@ import {
 } from './format'
 import { CHART_FONT_FAMILY } from './measureText'
 import { paletteColors, type ChartTokens } from './tokens'
+import type { AxisChartFormatters } from './seriesData'
 import { mergeDeep } from './utils'
 import type {
   AxisChartBaseConfig,
@@ -29,6 +30,8 @@ export type AxisChartOptionContext = {
   hiddenSeries?: string[]
   /** Plot width in pixels, once measured. Unset leaves pixel sizes to echarts. */
   width?: number
+  /** What a data label prints in when its series has no `format` of its own. */
+  format?: AxisChartFormatters
 }
 
 export const AXIS_LABEL_FONT_SIZE = 11

package/src/charts/axisChartOptions.ts

@@ -18,12 +18,14 @@ import {
   MARK_Z,
   type AxisChartOptionContext,
 } from './axisChartCommon'
+import { seriesFormatter } from './axisFormat'
 import { buildReferenceLineSeries } from './referenceLines'
 import { mergeDeep } from './utils'
 import type {
   AxisChartConfig,
   AxisChartSeriesConfig,
   ChartMark,
+  ChartValueFormatter,
   ChartYAxisConfig,
 } from './types'
 
@@ -73,6 +75,8 @@ type SeriesContext = {
   carriesTip: (entry: PlottedSeries, rowIndex: number, value: number) => boolean
   /** Whether this area stacks onto another, i.e. reads as a band. */
   banded: boolean
+  /** Prints this series' values: its own format, or its axis'. */
+  format?: ChartValueFormatter
   /**
    * This series' share of its stack, row by row, on a normalized chart. Set
    * means the plot draws the share and prints it as a percentage; unset means
@@ -95,7 +99,7 @@ export type StackShares = Map<string, (number | null)[]>
  */
 export function buildAxisChartOption(
   config: AxisChartConfig,
-  { tokens, hiddenSeries = [], width }: AxisChartOptionContext,
+  { tokens, hiddenSeries = [], width, format = {} }: AxisChartOptionContext,
 ): EChartsCoreOption {
   const isRTL = config.dir === 'rtl'
   const horizontal = Boolean(config.horizontal)
@@ -163,6 +167,7 @@ export function buildAxisChartOption(
           isRTL,
           color: colors[entry.series.name],
           yAxisIndex: valueAxisIndex(entry.series, hasSecondary),
+          format: seriesFormatter(entry.series, format, horizontal),
           xValue,
           carriesTip,
           banded: isBanded(entry, plotted),
@@ -477,11 +482,7 @@ function buildBarSeries(entry: PlottedSeries, ctx: SeriesContext) {
           : tokens.dataLabel,
       fontSize: DATA_LABEL_FONT_SIZE,
       formatter: (params: any) =>
-        plottedLabel(
-          horizontal ? params.value?.[0] : params.value?.[1],
-          series,
-          Boolean(ctx.share),
-        ),
+        plottedLabel(horizontal ? params.value?.[0] : params.value?.[1], ctx),
     },
     labelLayout: { hideOverlap: true },
   }
@@ -532,8 +533,7 @@ function buildLineSeries(
       position: 'top',
       color: tokens.dataLabel,
       fontSize: DATA_LABEL_FONT_SIZE,
-      formatter: (params: any) =>
-        plottedLabel(params.value?.[1], series, Boolean(ctx.share)),
+      formatter: (params: any) => plottedLabel(params.value?.[1], ctx),
     },
     labelLayout: { hideOverlap: true },
   }
@@ -550,14 +550,10 @@ function buildLineSeries(
  * What a data label prints. A normalized series plots a share, so printing it
  * as a number would read as a count of something.
  */
-function plottedLabel(
-  value: any,
-  series: AxisChartSeriesConfig,
-  normalized: boolean,
-) {
+function plottedLabel(value: any, ctx: SeriesContext) {
   if (value === null || value === undefined || isNaN(value)) return ''
-  if (normalized) return formatPercent(value)
-  return series.format ? series.format(value) : formatValue(value, 1, true)
+  if (ctx.share) return formatPercent(value)
+  return ctx.format ? ctx.format(value) : formatValue(value, 1, true)
 }
 
 /**

package/src/charts/axisFormat.ts

@@ -1,5 +1,10 @@
 import type { AxisChartFormatters } from './seriesData'
-import type { AxisChartBaseConfig, EchartOptionsOverride } from './types'
+import type {
+  AxisChartBaseConfig,
+  AxisChartSeriesConfig,
+  ChartValueFormatter,
+  EchartOptionsOverride,
+} from './types'
 import { mergeDeep } from './utils'
 
 /**
@@ -48,3 +53,18 @@ function withFormatter(
     echartOptions,
   )
 }
+
+/**
+ * How a series prints its values. Without its own format, a series reads in the
+ * units of the axis it is actually drawn against, so `y2` series never fall back
+ * to the primary formatter — except on a horizontal chart, which has no second
+ * axis to put them on.
+ */
+export function seriesFormatter(
+  series: AxisChartSeriesConfig,
+  format: AxisChartFormatters,
+  horizontal: boolean,
+): ChartValueFormatter | undefined {
+  const secondary = series.axis === 'y2' && !horizontal
+  return series.format ?? (secondary ? format.y2 : format.y)
+}

package/src/charts/core/useAxisChart.ts

@@ -11,7 +11,7 @@ import {
   resolveXAxis,
   toNumber,
 } from '../axisChartCommon'
-import { applyAxisFormatters } from '../axisFormat'
+import { applyAxisFormatters, seriesFormatter } from '../axisFormat'
 import { pruneHiddenSeries, toggleHiddenSeries } from '../hiddenSeries'
 import { buildTooltipItems } from '../tooltipItems'
 import {
@@ -136,6 +136,7 @@ export function useAxisChart<C extends AxisChartConfig>(
             tokens: tokens.value,
             hiddenSeries: hiddenSeries.value,
             width: plotWidth.value,
+            format: format.value,
           },
         ),
         error: null as string | null,
@@ -172,14 +173,8 @@ export function useAxisChart<C extends AxisChartConfig>(
     })),
   )
 
-  // Without its own format, a series reads in the units of the axis it is
-  // actually drawn against, so `y2` series never fall back to the primary
-  // formatter — except on a horizontal chart, which has no second axis to put
-  // them on.
   function formatSeriesValue(series: AxisChartSeriesConfig, value: number) {
-    const secondary = series.axis === 'y2' && !horizontal.value
-    const formatter =
-      series.format ?? (secondary ? format.value.y2 : format.value.y)
+    const formatter = seriesFormatter(series, format.value, horizontal.value)
     return formatter ? formatter(value) : formatValue(value)
   }
 

package/src/charts/types.ts

@@ -88,9 +88,9 @@ export type AxisChartSeriesConfig = {
   axis?: 'y' | 'y2'
   /**
    * Prints this series' values in the tooltip and its data labels, for a series
-   * whose unit differs from the others on its axis. Without one, the tooltip
-   * uses its axis' `format` and a label prints a compact number. A label on a
-   * normalized stack prints the series' share either way.
+   * whose unit differs from the others on its axis. Without one, both use its
+   * axis' `format`. A label on a normalized stack prints the series' share
+   * either way.
    */
   format?: ChartValueFormatter
   showDataLabels?: boolean
@@ -734,9 +734,9 @@ export type SeriesStyle = {
   type?: ChartMark
   /**
    * Prints this series' values in the tooltip and its data labels, for a series
-   * whose unit differs from the others on its axis. Without one, the tooltip
-   * uses its axis' `format` and a label prints a compact number. A label on a
-   * normalized stack prints the series' share either way.
+   * whose unit differs from the others on its axis. Without one, both use its
+   * axis' `format`. A label on a normalized stack prints the series' share
+   * either way.
    */
   format?: ChartValueFormatter
   /** Prints this series' value beside each of its marks. */

package/vitepress/components/SiteActions.vue

@@ -31,7 +31,7 @@ const themeIcon = computed(
     <Button
       v-if="githubUrl"
       variant="ghost"
-      :link="githubUrl"
+      :href="githubUrl"
       aria-label="GitHub repository"
     >
       <template #icon>