frappe-ui 1.0.0-beta.0 → 1.0.0-beta.10

package/frappe/Billing/SignupBanner.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="!isSidebarCollapsed"
-    class="flex flex-col gap-3 shadow-sm rounded-lg py-2.5 px-3 bg-surface-white text-base"
+    class="flex flex-col gap-3 shadow-sm rounded-lg py-2.5 px-3 bg-surface-base text-base"
   >
     <div class="flex flex-col gap-1">
       <slot>

package/frappe/Billing/TrialBanner.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-if="!isSidebarCollapsed && showBanner"
-    class="flex flex-col gap-3 shadow-sm rounded-lg py-2.5 px-3 bg-surface-modal text-base"
+    class="flex flex-col gap-3 shadow-sm rounded-lg py-2.5 px-3 bg-surface-elevation-2 text-base"
   >
     <div class="flex flex-col gap-1">
       <div class="inline-flex text-ink-gray-9 gap-2 items-center font-medium">

package/frappe/DataImport/DataImport.vue

@@ -1,6 +1,6 @@
 <template>
   <header
-		class="sticky flex items-center justify-between space-x-28 top-0 z-10 border-b bg-surface-white px-3 py-2.5 sm:px-5"
+		class="sticky flex items-center justify-between space-x-28 top-0 z-10 border-b bg-surface-base px-3 py-2.5 sm:px-5"
     >
       <Breadcrumbs :items="breadcrumbs" />
       <ImportSteps class="flex-1 hidden lg:flex" v-if="step != 'list'" :data="data" :step="step" @updateStep="updateStep" />

package/frappe/DataImport/ImportSteps.vue

@@ -7,10 +7,10 @@
         @click="emit('updateStep', 'upload', { ...data })"
         >
             <FeatherIcon v-if="uploadStepCompleted" name="check" class="size-5 text-sm border rounded-[5px] p-0.5" :class="{
-                'text-ink-white bg-surface-gray-7': onUploadStep,
+                'text-ink-base bg-surface-gray-10': onUploadStep,
             }"/>
             <div v-else class="text-sm border rounded-[5px] px-1.5 py-0.5" :class="{
-                'text-ink-white bg-surface-gray-7': onUploadStep,
+                'text-ink-base bg-surface-gray-10': onUploadStep,
             }">
                 <span>
                     1
@@ -28,10 +28,10 @@
         @click="moveToMapStep()"
         >
             <FeatherIcon v-if="mapStepCompleted" name="check" class="size-5 text-sm border rounded-[5px] p-0.5" :class="{
-                'text-ink-white bg-surface-gray-7': onMapStep,
+                'text-ink-base bg-surface-gray-10': onMapStep,
             }"/>
             <div v-else class="text-sm border rounded-[5px] px-1.5 py-0.5" :class="{
-                'text-ink-white bg-surface-gray-7': onMapStep,
+                'text-ink-base bg-surface-gray-10': onMapStep,
             }">
                 <span>
                     2
@@ -49,10 +49,10 @@
         @click="moveToPreviewStep()"
         >
             <FeatherIcon v-if="previewStepCompleted" name="check" class="size-5 text-sm border rounded-[5px] p-0.5" :class="{
-                'text-ink-white bg-surface-gray-7': onPreviewStep,
+                'text-ink-base bg-surface-gray-10': onPreviewStep,
             }"/>
             <div v-else class="text-sm border rounded-[5px] px-1.5 py-0.5" :class="{
-                'text-ink-white bg-surface-gray-7': onPreviewStep,
+                'text-ink-base bg-surface-gray-10': onPreviewStep,
             }">
                 <span>
                     3

package/frappe/DataImport/PreviewStep.vue

@@ -47,8 +47,8 @@
             </div>
             <div class="rounded-md bg-surface-amber-2 p-2 space-y-2 text-xs">
                 <div v-for="warning in warnings" class="flex items-center space-x-2">
-                    <FeatherIcon name="alert-circle" class="size-3 text-ink-amber-3" />
-                    <div v-html="warning.message" class="text-ink-amber-3"></div>
+                    <FeatherIcon name="alert-circle" class="size-3 text-ink-amber-6" />
+                    <div v-html="warning.message" class="text-ink-amber-6"></div>
                 </div>
             </div>
         </div>
@@ -71,7 +71,7 @@
                         </th>
                     </tr>
                 </thead>
-                <tbody class="bg-surface-white divide-y divide-surface-gray-2">
+                <tbody class="bg-surface-base divide-y divide-surface-gray-2">
                     <tr v-for="(row, rowIndex) in previewData" :key="rowIndex">
                         <td
                             v-for="column in previewColumns"
@@ -117,12 +117,12 @@
                             </th>
                         </tr>
                     </thead>
-                    <tbody class="bg-surface-white divide-y divide-surface-gray-2">
+                    <tbody class="bg-surface-base divide-y divide-surface-gray-2">
                         <tr v-for="(row, rowIndex) in filteredLogs" :key="rowIndex" class="group">
                             <td class="px-3 py-2 text-sm text-ink-gray-7 border-r">
                                 <div class="flex items-center justify-center space-x-2">
                                     <div v-if="row.success" class="size-1.5 bg-surface-green-3 rounded"></div>
-                                    <div v-else class="size-1.5 bg-surface-red-5 rounded"></div>
+                                    <div v-else class="size-1.5 bg-surface-red-7 rounded"></div>
                                     <div>
                                         {{ JSON.parse(row["row_indexes"])[0] - 1 }}
                                     </div>
@@ -312,11 +312,11 @@ const importErrorCount = computed(() => {
 
 const importBannerClass = computed(() => {
     if (importErrorCount.value == 0) {
-        return 'bg-surface-green-2 text-ink-green-3'
+        return 'bg-surface-green-2 text-ink-green-6'
     } else if (importSuccessCount.value == 0) {
-        return 'bg-surface-red-2 text-ink-red-3'
+        return 'bg-surface-red-2 text-ink-red-6'
     } else {
-        return 'bg-surface-amber-2 text-ink-amber-3'
+        return 'bg-surface-amber-2 text-ink-amber-6'
     }
 })
 

package/frappe/DataImport/TemplateModal.vue

@@ -37,7 +37,7 @@
                                     <label
                                         :for="`checkbox-${doctype}-${field.fieldname}`"
                                         :class="{
-                                            'text-ink-red-3': field.reqd
+                                            'text-ink-red-6': field.reqd
                                         }">
                                         {{ field.label || field.fieldname }}
                                     </label>

package/frappe/DataImport/UploadStep.vue

@@ -47,7 +47,7 @@
                         </span>
                     </div>
                 </div>
-                <div v-else-if="showFileSelector && uploading" class="w-4/5 lg:w-2/5 bg-surface-white border rounded-md p-2">
+                <div v-else-if="showFileSelector && uploading" class="w-4/5 lg:w-2/5 bg-surface-base border rounded-md p-2">
                     <div class="space-y-2">
                         <div class="font-medium">
                             {{ uploadingdFile.name }}
@@ -58,14 +58,14 @@
                     </div>
                     <div class="w-full bg-surface-gray-1 h-1 rounded-full mt-3">
                         <div
-                            class="bg-surface-gray-7 h-1 rounded-full transition-all duration-500 ease-in-out"
+                            class="bg-surface-gray-10 h-1 rounded-full transition-all duration-500 ease-in-out"
                             :style="`width: ${uploadProgress}%`"
                         ></div>
                     </div>
                 </div>
             </div>
             <div v-else-if="importFile" class="h-[300px] flex items-center justify-center bg-surface-gray-1 border border-dashed border-outline-gray-3 rounded-md">
-                <div class="w-4/5 lg:w-2/5 bg-surface-white border rounded-md p-2 flex items-center justify-between items-center">
+                <div class="w-4/5 lg:w-2/5 bg-surface-base border rounded-md p-2 flex items-center justify-between items-center">
                     <div class="space-y-2">
                         <div class="font-medium leading-5 text-ink-gray-9">
                             {{ importFile.file_name || importFile.split("/").pop() }}
@@ -76,7 +76,7 @@
                     </div>
                     <FeatherIcon
                         name="trash-2"
-                        class="size-4 stroke-1.5 text-ink-red-3 cursor-pointer"
+                        class="size-4 stroke-1.5 text-ink-red-6 cursor-pointer"
                         @click="deleteFile"
                     />
                 </div>

package/frappe/Filter/Filter.vue

@@ -133,7 +133,7 @@ const filterCount = computed(() =>
 
 <template>
   <Popover
-    popover-class="mt-2 p-2 rounded-lg border bg-surface-modal shadow-xl max-w-xl"
+    popover-class="mt-2 p-2 rounded-lg border bg-surface-elevation-2 shadow-xl max-w-xl"
     placement="bottom-end"
     :matchTargetWidth="true"
   >

package/frappe/Help/HelpModal.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     v-show="show"
-    class="fixed z-50 right-0 w-80 h-[calc(100%_-_80px)] text-ink-gray-9 m-5 mt-[62px] p-3 flex gap-2 flex-col justify-between rounded-lg bg-surface-modal shadow-2xl"
+    class="fixed z-50 right-0 w-80 h-[calc(100%_-_80px)] text-ink-gray-9 m-5 mt-[62px] p-3 flex gap-2 flex-col justify-between rounded-lg bg-surface-elevation-2 shadow-2xl"
     :class="{ 'top-[calc(100%_-_120px)] border': minimize }"
     @click.stop
   >

package/frappe/Link/Link.api.md

@@ -0,0 +1,114 @@
+<!-- Auto Generated by scripts/propsgen.ts -->
+<script setup>
+  import PropsTable from '@/components/Docs/PropsTable.vue'
+  import SlotsTable from '@/components/Docs/SlotsTable.vue'
+  import EmitsTable from '@/components/Docs/EmitsTable.vue'
+
+  const propsData = [
+  {
+    name: 'doctype',
+    description: '',
+    required: true,
+    type: 'string'
+  },
+  {
+    name: 'filters',
+    description: '',
+    required: false,
+    type: 'Record<string, unknown>',
+    default: '{}'
+  },
+  {
+    name: 'creatable',
+    description: '',
+    required: false,
+    type: 'boolean',
+    default: 'false'
+  },
+  {
+    name: 'disabled',
+    description: '',
+    required: false,
+    type: 'boolean',
+    default: 'false'
+  },
+  {
+    name: 'label',
+    description: 'Label rendered above (or beside, for binary controls) the input.',
+    required: false,
+    type: 'string'
+  },
+  {
+    name: 'description',
+    description: 'Helper text rendered below the input.\nHidden when `error` is set.',
+    required: false,
+    type: 'string'
+  },
+  {
+    name: 'error',
+    description: 'Error message rendered below the input. When set, the control receives\n`aria-invalid="true"` and `data-state="invalid"`. May be either a string\nor an `Error` object whose `messages?: string[]` is rendered as stacked\nlines (with `Error.message` as the fallback).',
+    required: false,
+    type: 'string | FrappeUIError'
+  },
+  {
+    name: 'required',
+    description: 'Marks the field as required. Renders an asterisk next to the label and\nforwards `required` / `aria-required` to the underlying control.',
+    required: false,
+    type: 'boolean'
+  },
+  {
+    name: 'id',
+    description: 'HTML id of the underlying control. Auto-generated via `useId()` if omitted.',
+    required: false,
+    type: 'string'
+  },
+  {
+    name: 'modelValue',
+    description: '',
+    required: false,
+    type: 'string | null',
+    default: 'null'
+  },
+  {
+    name: 'open',
+    description: '',
+    required: false,
+    type: 'boolean',
+    default: 'false'
+  }
+]
+
+  const slotsData = [
+  {
+    name: 'suffix',
+    description: '',
+    type: '{ open: boolean; disabled: boolean; query: string; selectedOption: ComboboxSelectableOption | null; '
+  }
+]
+
+  const emitsData = [
+  {
+    name: 'update:modelValue',
+    description: 'Fired when the model value changes.',
+    type: 'unknown[]'
+  },
+  {
+    name: 'update:open',
+    description: 'Fired when the open state changes.',
+    type: 'unknown[]'
+  },
+  {
+    name: 'create',
+    description: '',
+    type: '[query: string]'
+  }
+]
+</script>
+## API Reference
+
+<PropsTable name="Link" :data="propsData"/> 
+
+<SlotsTable :data="slotsData"/> 
+
+<EmitsTable :data="emitsData"/> 
+

package/frappe/Link/Link.cy.ts

@@ -0,0 +1,215 @@
+import { defineComponent, h, ref } from 'vue'
+import Link from './Link.vue'
+
+const users = [
+  { value: 'alice', label: 'Alice' },
+  { value: 'bob', label: 'Bob' },
+  { value: 'carol', label: 'Carol' },
+]
+
+function stubSearchLink(rows = users) {
+  cy.intercept('POST', '/api/method/frappe.desk.search.search_link', {
+    statusCode: 200,
+    body: { message: rows },
+  }).as('searchLink')
+}
+
+describe('Link', () => {
+  beforeEach(() => {
+    stubSearchLink()
+  })
+
+  describe('rendering', () => {
+    it('emits data-slot="link" on the root wrapper', () => {
+      cy.mount(Link, { props: { doctype: 'User' } })
+      cy.get('[data-slot="link"]').should('exist')
+    })
+
+    it('forwards id/label/description/required to the underlying Combobox (P5)', () => {
+      cy.mount(Link, {
+        props: {
+          doctype: 'User',
+          id: 'user-picker',
+          label: 'User',
+          description: 'Pick a user',
+          required: true,
+        },
+      })
+
+      cy.get('label[for="user-picker"]').should('contain.text', 'User')
+      cy.get('[role="combobox"]#user-picker').should(
+        'have.attr',
+        'aria-required',
+        'true',
+      )
+      cy.contains('Pick a user').should('exist')
+    })
+
+    it('forwards `error` and wires aria-invalid', () => {
+      cy.mount(Link, {
+        props: {
+          doctype: 'User',
+          id: 'user-picker',
+          error: 'Boom',
+        },
+      })
+      cy.get('[role="combobox"]#user-picker').should(
+        'have.attr',
+        'aria-invalid',
+        'true',
+      )
+      cy.contains('Boom').should('exist')
+    })
+  })
+
+  describe('v-model', () => {
+    it('round-trips a selection', () => {
+      cy.mount(Link, {
+        props: {
+          doctype: 'User',
+          'onUpdate:modelValue': cy.spy().as('onUpdate'),
+        },
+      })
+
+      cy.wait('@searchLink')
+      cy.get('[role="combobox"]').click()
+      cy.contains('[role="option"]', 'Alice').click()
+      cy.get('@onUpdate').should('have.been.calledWith', 'alice')
+    })
+
+    it('clear sets the model to null (never the empty string)', () => {
+      const Host = defineComponent({
+        setup() {
+          const value = ref<string | null>('alice')
+          return { value }
+        },
+        render() {
+          return h(Link, {
+            doctype: 'User',
+            modelValue: this.value,
+            'onUpdate:modelValue': (v: string | null) => (this.value = v),
+          })
+        },
+      })
+
+      cy.mount(Host).then(({ component }) => {
+        const host = component as unknown as { value: string | null }
+        cy.get('[data-slot="clear"]').click({ force: true })
+        cy.then(() => expect(host.value).to.equal(null))
+      })
+    })
+  })
+
+  describe('default clear', () => {
+    it('renders a clear button when value is set and not required', () => {
+      cy.mount(Link, {
+        props: {
+          doctype: 'User',
+          modelValue: 'alice',
+          'onUpdate:modelValue': cy.spy().as('onUpdate'),
+        },
+      })
+      cy.get('[data-slot="clear"]').should('exist').click({ force: true })
+      cy.get('@onUpdate').should('have.been.calledWith', null)
+    })
+
+    it('suppresses the clear button when required is true', () => {
+      cy.mount(Link, {
+        props: { doctype: 'User', modelValue: 'alice', required: true },
+      })
+      cy.get('[data-slot="clear"]').should('not.exist')
+    })
+
+    it('suppresses the clear button when modelValue is empty', () => {
+      cy.mount(Link, { props: { doctype: 'User' } })
+      cy.get('[data-slot="clear"]').should('not.exist')
+    })
+  })
+
+  describe('creatable', () => {
+    it('does not render the Create row by default', () => {
+      cy.mount(Link, { props: { doctype: 'User' } })
+      cy.get('[role="combobox"]').click().type('zed')
+      cy.contains('[role="option"]', 'Create').should('not.exist')
+    })
+
+    it('shows the Create row only when query is non-empty', () => {
+      cy.mount(Link, { props: { doctype: 'User', creatable: true } })
+      cy.get('[role="combobox"]').click()
+      cy.contains('[role="option"]', 'Create').should('not.exist')
+      cy.get('[role="combobox"]').type('zed')
+      cy.contains('[role="option"]', 'Create').should('contain.text', 'zed')
+    })
+
+    it('emits @create with just the query (one argument)', () => {
+      cy.mount(Link, {
+        props: {
+          doctype: 'User',
+          creatable: true,
+          onCreate: cy.spy().as('onCreate'),
+        },
+      })
+      cy.get('[role="combobox"]').click().type('zed')
+      cy.contains('[role="option"]', 'Create').click()
+      cy.get('@onCreate').should('have.been.calledOnce')
+      cy.get('@onCreate').should('have.been.calledWith', 'zed')
+      cy.get('@onCreate').then((spy) => {
+        // Spec: @create is one-arg. Guard against the old (query, close) shape.
+        const callArgs = (spy as unknown as sinon.SinonSpy).getCall(0).args
+        expect(callArgs).to.have.length(1)
+      })
+    })
+  })
+
+  describe('v-model:open', () => {
+    it('emits update:open when the popover toggles', () => {
+      cy.mount(Link, {
+        props: {
+          doctype: 'User',
+          'onUpdate:open': cy.spy().as('onOpen'),
+        },
+      })
+      cy.get('[role="combobox"]').click()
+      cy.get('@onOpen').should('have.been.calledWith', true)
+    })
+  })
+
+  describe('exposed API', () => {
+    it('exposes a zero-arg reload() that re-fetches options', () => {
+      const Host = defineComponent({
+        setup() {
+          const link = ref<{ reload: () => void } | null>(null)
+          return { link }
+        },
+        render() {
+          return h(Link, { doctype: 'User', ref: 'link' })
+        },
+      })
+
+      cy.mount(Host).then(({ component }) => {
+        cy.wait('@searchLink')
+        cy.then(() => {
+          const exposed = (component as unknown as { link: { reload: () => void } }).link
+          expect(exposed.reload).to.be.a('function')
+          expect(exposed.reload.length).to.equal(0)
+          exposed.reload()
+        })
+        cy.wait('@searchLink')
+      })
+    })
+  })
+
+  describe('#suffix slot', () => {
+    it('replaces the default clear button', () => {
+      cy.mount(Link, {
+        props: { doctype: 'User', modelValue: 'alice' },
+        slots: {
+          suffix: () =>
+            h('button', { 'data-slot': 'redirect', type: 'button' }, 'Go'),
+        },
+      })
+      cy.get('[data-slot="clear"]').should('not.exist')
+      cy.get('[data-slot="redirect"]').should('exist')
+    })
+  })
+})

package/frappe/Link/Link.md

@@ -0,0 +1,38 @@
+# Link
+
+A single-record picker for a Frappe doctype. Composes `Combobox` and fetches its options directly from `frappe.desk.search.search_link` — pick a doctype, and the rest works.
+
+## Simple
+A bare picker. `v-model` carries the selected record's primary key (a string), or `null` when nothing is selected.
+
+<ComponentPreview csr="true" name="Link-Simple" layout="stacked" />
+
+## Labeling, Description, Error, Required
+`Link` accepts the standard input labeling props — `label`, `description`, `error`, `required` — and forwards them to the underlying `Combobox`, so ARIA wiring (`aria-required`, `aria-invalid`, `aria-errormessage`) and the InputLabel chrome render identically to a standalone `Combobox`.
+
+<ComponentPreview csr="true" name="Link-Labeling" />
+
+## Filters
+The `filters` prop is a `Record<string, unknown>` passed straight through to `search_link`. Frappe's underlying endpoint also accepts list-form and SQL-string filters, but the component boundary intentionally narrows to the dict form — it covers every CRM call site without leaking backend serialization into the public API. Reactive — changing `filters` triggers a refetch. The `#footer` slot is the canonical home for a filter-status row (or any non-selectable popover affordance) and renders below both the options list and the `creatable` create-new row.
+
+<ComponentPreview csr="true" name="Link-Filters" />
+
+## Creatable
+`creatable: true` injects a "Create" row at the bottom of the popover, visible only when the user has typed. Clicking it emits `@create` with the typed query — the consumer owns the create flow (typically a dialog) and assigns the freshly-created record back to `v-model` on success. To replace the default create row markup (icon, helper text, copy), supply the `#item-create` slot — scope is `{ query }`.
+
+<ComponentPreview csr="true" name="Link-Creatable" />
+
+## Suffix
+By default, Link renders a clear button in the suffix slot when `modelValue` is non-null and `required: false`. To replace it with your own affordance — an "Open record" link, an "Edit" button — supply `#suffix`. The slot fully takes over; if you still want a clear button alongside your action, render one yourself. To dismiss the options dropdown when your action takes over (e.g. opens a dialog), bind `v-model:open` and set it to `false`.
+
+<ComponentPreview csr="true" name="Link-Suffix" />
+
+## Member Picker
+`Link` forwards every `Combobox` per-row slot — `#item-prefix`, `#item-label`, `#item-suffix`, `#item` — so a doctype picker can render an avatar, role, or any other contextual chrome without dropping down to `<Combobox>` directly.
+
+<ComponentPreview csr="true" name="Link-MemberPicker" />
+
+## Combobox passthrough
+Link composes `Combobox` and forwards unrecognized props via `$attrs` and all non-overridden slots. Anything in the [`Combobox` API](../../docs/components/combobox) that Link doesn't claim itself (`options`, `loading`, and the `#suffix` / `#item-create` slots which have Link-specific defaults) reaches the underlying component unchanged.
+
+<!-- @include: ./Link.api.md -->