frappe-ui 1.0.0-beta.62 → 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.62",
+  "version": "1.0.0-beta.63",
   "description": "A set of components and utilities for rapid UI development",
   "engines": {
     "node": ">=20.19.0"

package/src/components/Checkbox/Checkbox.cy.ts

@@ -17,7 +17,7 @@ describe('Checkbox', () => {
     cy.get('input[type="checkbox"]').should('be.disabled')
     // A disabled control dims its label — `disabled` outranks `color="gray-7"`.
     cy.get('label')
-      .should('have.class', 'text-base')
+      .should('have.class', 'text-sm')
       .and('have.class', 'text-ink-gray-4')
       .and('not.have.class', 'text-ink-gray-7')
   })
@@ -28,8 +28,8 @@ describe('Checkbox', () => {
     })
 
     cy.get('[data-slot="description"]')
-      .should('have.class', 'text-ink-gray-3')
-      .and('not.have.class', 'text-ink-gray-5')
+      .should('have.class', 'text-ink-gray-4')
+      .and('not.have.class', 'text-ink-gray-6')
   })
 
   it('toggles with the space key', () => {

package/src/components/Combobox/Combobox.api.md

@@ -30,14 +30,14 @@
     name: 'variant',
     description: 'Visual style of the combobox.',
     required: false,
-    type: 'ComboboxVariant',
+    type: 'InputVariant',
     default: '"subtle"'
   },
   {
     name: 'size',
     description: 'Size of the trigger and option rows.',
     required: false,
-    type: 'ComboboxSize',
+    type: 'InputSize',
     default: '"sm"'
   },
   {

package/src/components/Combobox/Combobox.playground.vue

@@ -35,10 +35,10 @@ const knobs: Knob[] = [
     type: 'tabs',
     default: 'sm',
     options: [
+      { label: 'xs', value: 'xs' },
       { label: 'sm', value: 'sm' },
       { label: 'md', value: 'md' },
       { label: 'lg', value: 'lg' },
-      { label: 'xl', value: 'xl' },
     ],
   },
   {

package/src/components/Combobox/Combobox.vue

@@ -88,7 +88,12 @@ const slots = useReactiveSlots<ComboboxSlots>()
 const slotFns = slots as Record<string, ((props?: any) => any) | undefined>
 
 const model = defineModel<ComboboxOptionValue | null>({ default: null })
+// Documented on `open` in `./types.ts`. A JSDoc block here would be appended
+// to that description by `propsgen`, not replace it.
 const open = defineModel<boolean>('open', { default: false })
+// Optional outside-in control of the search box. Unbound, `defineModel` keeps
+// the value local, so `v-model:query` is never required. Documented on `query`
+// in `./types.ts`.
 const query = defineModel<string>('query', { default: '' })
 // Bound, the query is the consumer's — the component never resets it on its
 // own (see `skipInitialDisplaySync` and the open watcher below).

package/src/components/Combobox/stories/Clearable.vue

@@ -11,7 +11,7 @@ const fields: Field[] = [
     label: 'colour',
     options: ['gray', 'blue', 'green', 'red'],
   },
-  { key: 'size', label: 'size', options: ['sm', 'md', 'lg', 'xl'] },
+  { key: 'size', label: 'size', options: ['xs', 'sm', 'md', 'lg'] },
   { key: 'style', label: 'style', options: ['subtle', 'outline', 'ghost'] },
   {
     key: 'fontSize',
@@ -41,10 +41,10 @@ const colourSwatch: Record<string, string> = {
 }
 
 const sizeDot: Record<string, string> = {
-  sm: 'size-1.5',
-  md: 'size-2',
-  lg: 'size-2.5',
-  xl: 'size-3',
+  xs: 'size-1.5',
+  sm: 'size-2',
+  md: 'size-2.5',
+  lg: 'size-3',
 }
 
 const fontSizePx: Record<string, number> = {

package/src/components/Combobox/types.ts

@@ -1,9 +1,16 @@
 import type { Component, VNodeChild } from 'vue'
+import type { InputSize, InputVariant } from '../../composables/inputTypes'
 import type { InputLabelingProps } from '../../composables/useInputLabeling'
 import type { PortalTarget } from '../../composables/usePortalTarget'
 
-export type ComboboxVariant = 'subtle' | 'outline' | 'ghost'
-export type ComboboxSize = 'sm' | 'md' | 'lg' | 'xl'
+/**
+ * Combobox renders the same trigger geometry and surfaces as every other text
+ * input, so these are the input scales under the component's own names. They
+ * stay aliases, not copies — a Combobox-only scale would have to come with a
+ * Combobox-only renderer.
+ */
+export type ComboboxVariant = InputVariant
+export type ComboboxSize = InputSize
 
 import type { PopoverSide, PopoverAlign } from '../shared/selection/types'
 export type { PopoverSide, PopoverAlign }
@@ -312,12 +319,6 @@ export interface ComboboxEmits {
   /** Fired when the committed value changes. */
   'update:modelValue': [value: ComboboxOptionValue | null]
 
-  /** Fired when the open state changes. */
-  'update:open': [value: boolean]
-
-  /** Fired when the query changes. */
-  'update:query': [value: string]
-
   /** Fired when the resolved selected option changes. */
   'update:selectedOption': [
     option: ComboboxSelectableOption | ComboboxCustomOption | null,

package/src/components/ContextMenu/index.ts

@@ -2,6 +2,7 @@ export { default as ContextMenu } from './ContextMenu.vue'
 export type {
   ContextMenuActionOption,
   ContextMenuBaseOption,
+  ContextMenuEmits,
   ContextMenuGroupOption,
   ContextMenuGroupSlotProps,
   ContextMenuItem,

package/src/components/ContextMenu/types.ts

@@ -30,6 +30,22 @@ export interface ContextMenuProps {
   open?: boolean
 }
 
+// Exported for consumers to import, and deliberately **not** passed to
+// `defineEmits`. `update:open` is declared by `defineModel('open')` in the SFC;
+// declaring it a second time through `defineEmits` makes Vue's generated
+// `__VLS_ModelEmit & __VLS_Emit` an intersection of two tuples, which collapses
+// `$emit` and every listener to `(...args: unknown[]) => any` — the defect
+// #1098 removed from `Combobox` and `MultiSelect`.
+//
+// Those two are wired because they carry events no model declares (`focus`,
+// `blur`, `update:selectedOption`); this component has none, so `defineEmits`
+// would add nothing and cost the typed listener. `DropdownEmits`, `SelectEmits`,
+// `SettingsDialogEmits`, `RatingEmits`, `DurationEmits` and `RadioGroupEmits`
+// are unwired for the same reason.
+export interface ContextMenuEmits {
+  'update:open': [open: boolean]
+}
+
 export type ContextMenuSlots = Omit<MenuSlots, 'default' | 'trigger'> & {
   /** The right-clickable region that opens the menu. */
   default?: (props: ContextMenuTriggerSlotProps) => any

package/src/components/DesktopShell/DesktopShell.api.md

@@ -17,7 +17,7 @@
   const slotsData = [
   {
     name: 'rail',
-    description: 'The icon column — usually a `Rail`. Omit it on shells that don\'t use one.',
+    description: 'The icon column — usually a `SidebarRail`. Omit it on shells that don\'t use one.',
     type: 'any'
   },
   {

package/src/components/DesktopShell/DesktopShell.md

@@ -1,10 +1,11 @@
 # DesktopShell
 
-The desktop app frame. `DesktopShell` arranges an app's `Rail` and `Sidebar`
-alongside the main content, and owns the skeleton the content needs: a pinned
-`PageHeaderTarget` and a registered scroll region. Its mobile counterpart is a
-separate family — [`MobileShell`](/docs/components/mobileshell) — because the
-two are different navigation models, not one responsive component.
+The desktop app frame. `DesktopShell` arranges an app's `SidebarRail` and
+`Sidebar` alongside the main content, and owns the skeleton the content needs:
+a pinned `PageHeaderTarget` and a registered scroll region. Its mobile
+counterpart is a separate family —
+[`MobileShell`](/docs/components/mobileshell) — because the two are different
+navigation models, not one responsive component.
 
 <ComponentPreview name="DesktopShell-Default" />
 

package/src/components/DesktopShell/DesktopShell.vue

@@ -55,7 +55,7 @@ withDefaults(
 )
 
 defineSlots<{
-  /** The icon column — usually a `Rail`. Omit it on shells that don't use one. */
+  /** The icon column — usually a `SidebarRail`. Omit it on shells that don't use one. */
   rail?: () => any
   /** The navigation panel — usually a `Sidebar`. Render it conditionally to hide it on routes that don't need it. */
   sidebar?: () => any

package/src/components/DesktopShell/stories/Default.vue

@@ -2,8 +2,8 @@
 import { ref } from 'vue'
 import {
   DesktopShell,
-  Rail,
-  RailItem,
+  SidebarRail,
+  SidebarRailItem,
   Sidebar,
   SidebarItem,
   SidebarLabel,
@@ -65,8 +65,8 @@ const posts = (
   >
     <DesktopShell>
       <template #rail>
-        <Rail class="border-r">
-          <RailItem
+        <SidebarRail class="border-r">
+          <SidebarRailItem
             label="Home"
             variant="ghost"
             icon="lucide-house"
@@ -74,7 +74,7 @@ const posts = (
             @click="community = ''"
           />
           <div class="flex w-full flex-1 flex-col items-center gap-3 pt-3">
-            <RailItem
+            <SidebarRailItem
               v-for="c in communities"
               :key="c.id"
               :label="c.id"
@@ -84,10 +84,10 @@ const posts = (
               <span class="text-2xs-medium uppercase text-ink-gray-5">{{
                 c.initials
               }}</span>
-            </RailItem>
+            </SidebarRailItem>
           </div>
-          <RailItem label="Search" variant="ghost" icon="lucide-search" />
-        </Rail>
+          <SidebarRailItem label="Search" variant="ghost" icon="lucide-search" />
+        </SidebarRail>
       </template>
 
       <template #sidebar>

package/src/components/Divider/Divider.api.md

@@ -7,27 +7,27 @@
   const propsData = [
   {
     name: 'orientation',
-    description: '',
+    description: 'Which way the rule runs.',
     required: false,
     type: '"horizontal" | "vertical"',
     default: '"horizontal"'
   },
   {
     name: 'position',
-    description: '',
+    description: 'Where the action sits along the rule. Ignored without an `action`, since a\nplain rule has nothing to place.',
     required: false,
     type: '"start" | "center" | "end"',
     default: '"center"'
   },
   {
     name: 'flexItem',
-    description: '',
+    description: 'Stretches the divider to the cross-axis size of its flex parent\n(`align-self: stretch`) instead of taking the full height of its own box.\nUse it for a vertical divider between flex items of differing heights.',
     required: false,
     type: 'boolean'
   },
   {
     name: 'action',
-    description: '',
+    description: 'Renders a button on the rule instead of a bare `<hr>`. The rule is drawn\nbehind the button and runs the full length of the divider.',
     required: false,
     type: 'DividerAction'
   }

package/src/components/Divider/index.ts

@@ -1,2 +1,2 @@
 export { default as Divider } from './Divider.vue'
-export type { DividerProps } from './types'
+export type { DividerAction, DividerProps } from './types'

package/src/components/Divider/types.ts

@@ -1,12 +1,35 @@
-interface DividerAction {
+/** The inline action a `Divider` can host on its rule. */
+export interface DividerAction {
+  /** Text of the action button. */
   label: string
+
+  /** Called when the action button is clicked. */
   onClick?: () => any
+
+  /** Shows a spinner in the action button and blocks further clicks. */
   loading?: boolean
 }
 
 export interface DividerProps {
+  /** Which way the rule runs. */
   orientation?: 'horizontal' | 'vertical'
+
+  /**
+   * Where the action sits along the rule. Ignored without an `action`, since a
+   * plain rule has nothing to place.
+   */
   position?: 'start' | 'center' | 'end'
+
+  /**
+   * Stretches the divider to the cross-axis size of its flex parent
+   * (`align-self: stretch`) instead of taking the full height of its own box.
+   * Use it for a vertical divider between flex items of differing heights.
+   */
   flexItem?: boolean
+
+  /**
+   * Renders a button on the rule instead of a bare `<hr>`. The rule is drawn
+   * behind the button and runs the full length of the divider.
+   */
   action?: DividerAction
 }

package/src/components/Duration/Duration.playground.vue

@@ -32,10 +32,10 @@ const knobs: Knob[] = [
     type: 'tabs',
     default: 'sm',
     options: [
+      { label: 'xs', value: 'xs' },
       { label: 'sm', value: 'sm' },
       { label: 'md', value: 'md' },
       { label: 'lg', value: 'lg' },
-      { label: 'xl', value: 'xl' },
     ],
   },
   {

package/src/components/Duration/stories/Sizes.vue

@@ -7,9 +7,9 @@ const value = ref<number | null>(5445)
 
 <template>
   <div class="flex flex-col gap-4 items-start">
+    <Duration v-model="value" size="xs" />
     <Duration v-model="value" size="sm" />
     <Duration v-model="value" size="md" />
     <Duration v-model="value" size="lg" />
-    <Duration v-model="value" size="xl" />
   </div>
 </template>

package/src/components/FormControl/FormControl.api.md

@@ -32,9 +32,9 @@
   },
   {
     name: 'size',
-    description: 'Size of the input',
+    description: 'Size of the input. The full input scale — `xs` 24px, `sm` 28px, `md` 32px,\n`lg` 40px. `type="checkbox"` renders on the narrower toggle scale, so `lg`\nis clamped to that scale\'s largest value there.',
     required: false,
-    type: '"sm" | "md"',
+    type: 'InputSize',
     default: '"sm"'
   },
   {

package/src/components/FormControl/FormControl.cy.ts

@@ -247,4 +247,44 @@ describe('FormControl', () => {
       })
     })
   })
+  describe('size scale', () => {
+    const heights = { xs: 24, sm: 28, md: 32, lg: 40 } as const
+
+    for (const [size, height] of Object.entries(heights)) {
+      it(`forwards size="${size}" to a text input as ${height}px`, () => {
+        cy.mount(FormControl, { props: { type: 'text', size, label: 'Email' } })
+        cy.get('input')
+          .should('have.attr', 'data-size', size)
+          .and('have.css', 'height', `${height}px`)
+        cy.get('label').should('have.css', 'font-size', '13px')
+      })
+
+      it(`forwards size="${size}" to a textarea`, () => {
+        cy.mount(FormControl, {
+          props: { type: 'textarea', size, label: 'Notes' },
+        })
+        cy.get('textarea')
+          .should('have.attr', 'data-size', size)
+          .and('have.css', 'font-size', '13px')
+      })
+    }
+
+    it('clamps lg to md for a checkbox, which has no lg', () => {
+      // Checkbox renders on `ToggleSize` (`xs | sm | md`). Forwarding `lg`
+      // would fall off the end of its size chain and draw an `xs` control.
+      cy.mount(FormControl, {
+        props: { type: 'checkbox', size: 'lg', label: 'Subscribe' },
+      })
+      cy.get('input[type="checkbox"]').should('have.attr', 'data-size', 'md')
+    })
+
+    it('forwards the narrower sizes to a checkbox unchanged', () => {
+      for (const size of ['xs', 'sm', 'md'] as const) {
+        cy.mount(FormControl, {
+          props: { type: 'checkbox', size, label: 'Subscribe' },
+        })
+        cy.get('input[type="checkbox"]').should('have.attr', 'data-size', size)
+      }
+    })
+  })
 })

package/src/components/FormControl/FormControl.playground.vue

@@ -32,8 +32,10 @@ const knobs: Knob[] = [
     type: 'tabs',
     default: 'sm',
     options: [
+      { label: 'xs', value: 'xs' },
       { label: 'sm', value: 'sm' },
       { label: 'md', value: 'md' },
+      { label: 'lg', value: 'lg' },
     ],
   },
   {

package/src/components/FormControl/FormControl.vue

@@ -105,7 +105,12 @@ const forwardedAttrs = computed(() => {
     if (key !== 'class' && key !== 'style') out[key] = attrs[key]
   }
 
-  out.size = props.size
+  // Checkbox is a toggle, not a text input: it renders on `ToggleSize`
+  // (`xs | sm | md`), which has no `lg`. Clamp rather than forward a value the
+  // control cannot draw — `FormControl` advertises the whole input scale, so
+  // `size="lg"` has to mean something for every type it dispatches to.
+  out.size =
+    props.type === 'checkbox' && props.size === 'lg' ? 'md' : props.size
   out.variant = props.variant
 
   if (props.label !== undefined) out.label = props.label

package/src/components/FormControl/types.ts

@@ -1,4 +1,5 @@
 import type { TextInputTypes } from '../types/TextInput'
+import type { InputSize } from '../../composables/inputTypes'
 import type { FrappeUIError } from '../../composables/useInputLabeling'
 
 export interface FormControlProps {
@@ -29,8 +30,12 @@ export interface FormControlProps {
     | 'daterange'
     | 'datetime'
     | 'time'
-  /** Size of the input */
-  size?: 'sm' | 'md'
+  /**
+   * Size of the input. The full input scale — `xs` 24px, `sm` 28px, `md` 32px,
+   * `lg` 40px. `type="checkbox"` renders on the narrower toggle scale, so `lg`
+   * is clamped to that scale's largest value there.
+   */
+  size?: InputSize
   /** Visual variant of the input */
   variant?: 'subtle' | 'outline'
   /** Whether the input is required */

package/src/components/FormLabel/FormLabel.api.md

@@ -11,13 +11,6 @@
     required: true,
     type: 'string'
   },
-  {
-    name: 'size',
-    description: 'Size of the label text.',
-    required: false,
-    type: '"sm" | "md"',
-    default: '"sm"'
-  },
   {
     name: 'id',
     description: 'id of the form control this label is for; wired to the `for` attribute.',