frappe-ui 1.0.0-beta.39 → 1.0.0-beta.40

package/frappe/DataImport/DataImportList.vue

@@ -71,18 +71,16 @@
         </div>
         <Dialog
             v-model="showModal"
-            :options="{
-                title: 'New Data Import',
-                actions: [{
-                    label: 'Continue',
-                    variant: 'solid',
-                    onClick({ close }) {
-                        createDataImport(close)
-                    }
-                }]
-            }"
+            title="New Data Import"
+            :actions="[{
+                label: 'Continue',
+                variant: 'solid',
+                onClick({ close }) {
+                    createDataImport(close)
+                }
+            }]"
         >
-            <template #body-content>
+            <template #default>
                 <div>
                     <Link
                         v-model="doctypeForImport"

package/frappe/DataImport/TemplateModal.vue

@@ -1,9 +1,6 @@
 <template>
-    <Dialog v-model="show" :options="{
-        title: 'Export Data',
-        size: '2xl',
-    }">
-        <template #body-content>
+    <Dialog v-model="show" title="Export Data" size="2xl">
+        <template #default>
             <div class="text-base space-y-5">
                 <div class="grid grid-cols-2 gap-5">
                     <FormControl

package/frappe/Onboarding/IntermediateStepModal.vue

@@ -1,9 +1,6 @@
 <template>
-  <Dialog v-model="show" :options="options">
-    <template #boday-header>
-      <slot name="body-header"></slot>
-    </template>
-    <template #body-content>
+  <Dialog v-model="show" :title="options.title" :size="options.size" :actions="options.actions">
+    <template #default>
       <slot>
         <div class="flex flex-col gap-2 text-ink-gray-9 text-base">
           <div v-if="currentStep.message">{{ currentStep.message }}</div>

package/frappe/drive/components/InfoDialog.vue

@@ -1,11 +1,11 @@
 <template>
   <Dialog v-model="open" @close="dialogType = ''">
-    <template #body-title>
+    <template #title>
       <h3 class="text-xl font-semibold leading-6 text-ink-gray-9 cursor-pointer pr-2" @click="emitter.emit('rename')">
         {{ entity.title }}
       </h3>
     </template>
-    <template #body-content>
+    <template #default>
       <ul class="space-y-3 text-sm mb-4 text-ink-gray-8">
         <span class="text-base font-semibold">Information</span>
         <li>

package/frappe/drive/components/MoveDialog.vue

@@ -1,6 +1,6 @@
 <template>
-  <Dialog v-model="open" :options="{ size: 'lg' }" @close="dialogType = ''">
-    <template #body-main>
+  <Dialog v-model="open" size="lg" bare @close="dialogType = ''">
+    <template #default>
       <div class="p-4 sm:px-6">
         <div class="flex w-full justify-between gap-x-15 mb-4">
           <div class="font-semibold text-xl flex text-nowrap overflow-hidden">

package/frappe/drive/components/RenameDialog.vue

@@ -1,21 +1,19 @@
 <template>
   <Dialog
     v-model="open"
-    :options="{
-      title: 'Rename',
-      size: 'xs',
-      actions: [
-        {
-          label: 'Confirm',
-          variant: 'solid',
-          disabled: !newTitle || newTitle === entity.title || rename.loading,
-          onClick: submit,
-        },
-      ],
-    }"
+    title="Rename"
+    size="xs"
+    :actions="[
+      {
+        label: 'Confirm',
+        variant: 'solid',
+        disabled: !newTitle || newTitle === entity.title || rename.loading,
+        onClick: submit,
+      },
+    ]"
     @close="dialogType = ''"
   >
-    <template #body-content>
+    <template #default>
       <div class="flex gap-3">
         <FormControl
           v-model="newTitle"

package/frappe/drive/components/ShareDialog.vue

@@ -1,6 +1,6 @@
 <template>
-  <Dialog v-model="open" :options="{ size: 'lg' }">
-    <template #body-main>
+  <Dialog v-model="open" size="lg" bare>
+    <template #default>
       <div class="p-4">
         <!-- Header -->
         <div class="flex w-full justify-between gap-x-2 mb-4">

package/package.json

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

package/src/components/Calendar/NewEventModal.vue

@@ -1,18 +1,10 @@
 <template>
   <Dialog
     v-model="show"
-    :options="{
-      title: props.event.hasOwnProperty('id') ? 'Edit Event' : 'New Event',
-      actions: [
-        {
-          label: 'Submit',
-          variant: 'solid',
-        },
-      ],
-    }"
+    :title="props.event.hasOwnProperty('id') ? 'Edit Event' : 'New Event'"
     class="z-50"
   >
-    <template #body-content>
+    <template #default>
       <div>
         <div class="grid grid-cols-1 gap-4">
           <FormControl

package/src/components/Checkbox/Checkbox.api.md

@@ -25,14 +25,6 @@
     required: false,
     type: 'boolean'
   },
-  {
-    name: 'padding',
-    description: 'Adds padding around the checkbox.',
-    required: false,
-    type: 'boolean',
-    default: 'false',
-    deprecated: 'Use `padded` instead.'
-  },
   {
     name: 'indeterminate',
     description: 'Renders the mixed "—" state (e.g. a select-all that\'s partially selected).\nPurely visual — the native `indeterminate` DOM property is not reflected as\nan attribute, so it must be set via this prop, not markup.',

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

@@ -1,11 +1,7 @@
+import { h } from 'vue'
 import Checkbox from './Checkbox.vue'
-import { _resetWarnDeprecated } from '../../utils/warnDeprecated'
 
 describe('Checkbox', () => {
-  beforeEach(() => {
-    _resetWarnDeprecated()
-  })
-
   it('renders', () => {
     cy.mount(Checkbox, { props: { label: 'abc' } })
 
@@ -36,6 +32,31 @@ describe('Checkbox', () => {
       .and('not.have.class', 'text-ink-gray-5')
   })
 
+  it('toggles with the space key', () => {
+    cy.mount(Checkbox, {
+      props: {
+        label: 'Accept',
+        'onUpdate:modelValue': cy.spy().as('onUpdate'),
+      },
+    })
+
+    cy.get('input[type="checkbox"]').focus().type(' ')
+    cy.get('@onUpdate').should('have.been.calledWith', true)
+  })
+
+  it('renders the label and description slots', () => {
+    cy.mount(Checkbox, {
+      props: { label: 'prop label', description: 'prop description' },
+      slots: {
+        label: () => h('span', 'slot label'),
+        description: () => h('span', 'slot description'),
+      },
+    })
+
+    cy.contains('slot label').should('exist')
+    cy.contains('slot description').should('exist')
+  })
+
   it('test v-model', () => {
     cy.mount(Checkbox, {
       props: {
@@ -99,17 +120,6 @@ describe('Checkbox', () => {
       })
       cy.get('input').should('have.attr', 'data-disabled', 'true')
     })
-
-    it('warns once when the deprecated `padding` prop is used', () => {
-      cy.window().then((win) => {
-        cy.spy(win.console, 'warn').as('consoleWarn')
-      })
-      cy.mount(Checkbox, { props: { label: 'abc', padding: true } })
-      cy.get('@consoleWarn').should(
-        'have.been.calledWithMatch',
-        /Checkbox\.padding is deprecated/,
-      )
-    })
   })
 
   describe('padded', () => {

package/src/components/Checkbox/Checkbox.vue

@@ -4,10 +4,7 @@
     :class="[props.padded ? 'flex' : 'inline-flex', containerClasses]"
     @click="onContainerClick"
   >
-    <div
-      class="inline-flex items-center gap-2 rounded transition"
-      :class="rowClasses"
-    >
+    <div class="inline-flex items-center gap-2 rounded transition">
       <input
         ref="inputRef"
         class="rounded-sm mt-[1px]"
@@ -58,7 +55,6 @@
 <script lang="ts" setup>
 import { computed, ref, useAttrs, watchEffect } from 'vue'
 import { useInputLabeling } from '../../composables/useInputLabeling'
-import { warnDeprecated } from '../../utils/warnDeprecated'
 import InputLabel from '../InputLabeling/InputLabel.vue'
 import InputDescription from '../InputLabeling/InputDescription.vue'
 import InputError from '../InputLabeling/InputError.vue'
@@ -67,19 +63,12 @@ import type { CheckboxBaseProps } from './types'
 const props = withDefaults(defineProps<CheckboxBaseProps>(), {
   size: 'sm',
   padded: false,
-  padding: false,
   indeterminate: false,
 })
 
 const model = defineModel<boolean | 1 | 0>()
 const attrs = useAttrs()
 
-watchEffect(() => {
-  if (props.padding) {
-    warnDeprecated('Checkbox.padding', 'padded')
-  }
-})
-
 const checked = computed(() => Boolean(model.value))
 
 // The `indeterminate` state can only be set via the DOM property, not HTML attribute.
@@ -129,15 +118,6 @@ const labelClasses = computed(() => {
   ]
 })
 
-const rowClasses = computed(() => {
-  return {
-    'px-2.5 py-1.5': props.padding && props.size === 'sm',
-    'px-3 py-2': props.padding && props.size === 'md',
-    'focus-within:bg-surface-gray-2 focus-within:ring-2 focus-within:ring-outline-gray-3 hover:bg-surface-gray-3 active:bg-surface-gray-4':
-      props.padding && !props.disabled,
-  }
-})
-
 // When padded, the whole row is a clickable surface. Mirrors Switch's padded
 // rows: fixed-height compact rows (24/28/32px) with hover,
 // active and keyboard-only focus states wrapping the control and label.
@@ -201,7 +181,7 @@ const inputClasses = computed(() => {
   }
 
   // When padded the row drives hover; otherwise the control does.
-  const padded = props.padding || props.padded
+  const padded = props.padded
   return [
     sizeClasses,
     'cursor-pointer transition focus:ring-0 focus:ring-offset-0',

package/src/components/Checkbox/types.ts

@@ -11,12 +11,6 @@ export interface CheckboxBaseProps extends InputLabelingProps {
   /** Disables the checkbox interaction */
   disabled?: boolean
 
-  /**
-   * Adds padding around the checkbox.
-   * @deprecated Use `padded` instead.
-   */
-  padding?: boolean
-
   /**
    * Renders the mixed "—" state (e.g. a select-all that's partially selected).
    * Purely visual — the native `indeterminate` DOM property is not reflected as

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

@@ -42,13 +42,13 @@ const emojis = [
   <Button @click="open = true">Open dialog</Button>
 
   <Dialog v-model="open">
-    <template #body-title>
+    <template #title>
       <h3 class="text-3xl-semibold text-ink-gray-9">
         Combobox inside Dialog
       </h3>
     </template>
 
-    <template #body-content>
+    <template #default>
       <div class="space-y-4">
         <div class="flex flex-col gap-1">
           <label class="text-sm text-ink-gray-7">Repository</label>

package/src/components/CommandPalette/CommandPalette.vue

@@ -2,10 +2,12 @@
   <template>
     <Dialog
       v-model="show"
-      :options="{ size: 'xl', position: 'top' }"
+      size="xl"
+      position="top"
+      bare
       @after-leave="searchQuery = ''"
     >
-      <template #body>
+      <template #default>
         <div>
           <Combobox nullable @update:model-value="select">
             <div class="relative">

package/src/components/ContextMenu/ContextMenu.cy.ts

@@ -204,4 +204,65 @@ describe('ContextMenu', () => {
       expect(event.defaultPrevented).to.be.false
     })
   })
+
+  it('disabled items do not fire onClick', () => {
+    const onClick = cy.stub().as('onClick')
+
+    cy.mount(ContextMenu, {
+      props: { options: [{ label: 'Delete', disabled: true, onClick }] },
+      slots: { default: trigger },
+    })
+
+    cy.get('[data-cy=trigger]').rightclick()
+    cy.get('[role=menuitem]').should('have.attr', 'data-disabled')
+    cy.get('[role=menuitem]').click({ force: true })
+    cy.get('@onClick').should('not.have.been.called')
+  })
+
+  it('supports arrow keys, Enter, and Escape', () => {
+    const onClick = cy.stub().as('onClick')
+
+    cy.mount(ContextMenu, {
+      props: {
+        options: [
+          { label: 'Open', onClick: () => {} },
+          { label: 'Rename', onClick },
+        ],
+      },
+      slots: { default: trigger },
+    })
+
+    cy.get('[data-cy=trigger]').rightclick()
+    cy.get('[role=menu]').type('{downarrow}{downarrow}')
+    cy.contains('[role=menuitem]', 'Rename').should(
+      'have.attr',
+      'data-highlighted',
+    )
+    cy.focused().type('{enter}')
+    cy.get('@onClick').should('have.been.called')
+    cy.get('[role=menu]').should('not.exist')
+
+    cy.get('[data-cy=trigger]').rightclick()
+    cy.get('[role=menu]').type('{esc}')
+    cy.get('[role=menu]').should('not.exist')
+  })
+
+  it('renders the empty state, and #empty replaces it', () => {
+    cy.mount(ContextMenu, {
+      props: { options: [] },
+      slots: { default: trigger },
+    })
+    cy.get('[data-cy=trigger]').rightclick()
+    cy.get('[data-slot=empty]').should('contain.text', 'No options')
+
+    cy.mount(ContextMenu, {
+      props: { options: [] },
+      slots: {
+        default: trigger,
+        empty: () => h('span', {}, 'Nothing here'),
+      },
+    })
+    cy.get('[data-cy=trigger]').rightclick()
+    cy.get('[data-slot=empty]').should('contain.text', 'Nothing here')
+  })
 })

package/src/components/ContextMenu/index.ts

@@ -1,2 +1,20 @@
 export { default as ContextMenu } from './ContextMenu.vue'
-export * from './types'
+export type {
+  ContextMenuActionOption,
+  ContextMenuBaseOption,
+  ContextMenuGroupOption,
+  ContextMenuGroupSlotProps,
+  ContextMenuItem,
+  ContextMenuItemSlotProps,
+  ContextMenuItemSlots,
+  ContextMenuOption,
+  ContextMenuOptions,
+  ContextMenuProps,
+  ContextMenuSlotFn,
+  ContextMenuSlotProps,
+  ContextMenuSlots,
+  ContextMenuSubmenuOption,
+  ContextMenuSwitchOption,
+  ContextMenuTheme,
+  ContextMenuTriggerSlotProps,
+} from './types'

package/src/components/ContextMenu/types.ts

@@ -8,7 +8,6 @@ export type {
   MenuActionOption as ContextMenuActionOption,
   MenuSwitchOption as ContextMenuSwitchOption,
   MenuSubmenuOption as ContextMenuSubmenuOption,
-  MenuComponentOption as ContextMenuComponentOption,
   MenuGroupOption as ContextMenuGroupOption,
   MenuOption as ContextMenuOption,
   MenuItem as ContextMenuItem,

package/src/components/Dialog/Dialog.api.md

@@ -39,13 +39,15 @@
     name: 'size',
     description: 'Max-width size of the dialog. Default `\'lg\'`.',
     required: false,
-    type: 'DialogSize'
+    type: 'DialogSize',
+    default: '"lg"'
   },
   {
     name: 'position',
     description: 'Vertical placement. Default `\'center\'`.',
     required: false,
-    type: 'DialogPosition'
+    type: 'DialogPosition',
+    default: '"center"'
   },
   {
     name: 'paddingTop',
@@ -79,20 +81,6 @@
     required: false,
     type: 'boolean',
     default: 'false'
-  },
-  {
-    name: 'disableOutsideClickToClose',
-    description: '',
-    required: false,
-    type: 'boolean',
-    deprecated: 'Use `dismissible` (inverted) instead.'
-  },
-  {
-    name: 'options',
-    description: '',
-    required: false,
-    type: 'DialogOptions',
-    deprecated: 'Use flat top-level props instead.'
   }
 ]
 
@@ -111,36 +99,6 @@
     name: 'actions',
     description: 'Footer override; exposes `{ close, actions }`.',
     type: 'DialogActionsSlotProps'
-  },
-  {
-    name: 'body',
-    description: '',
-    type: 'any',
-    deprecated: 'Use `#default` + `bare` prop.'
-  },
-  {
-    name: 'body-main',
-    description: '',
-    type: 'any',
-    deprecated: 'Use `#default`.'
-  },
-  {
-    name: 'body-header',
-    description: '',
-    type: 'any',
-    deprecated: 'Use `#title` for extras (no direct replacement).'
-  },
-  {
-    name: 'body-title',
-    description: '',
-    type: 'any',
-    deprecated: 'Use `#title`.'
-  },
-  {
-    name: 'body-content',
-    description: '',
-    type: 'any',
-    deprecated: 'Use `#default`.'
   }
 ]