frappe-ui 0.1.278 → 1.0.0-beta.1

package/frappe/DataImport/DataImportList.vue

@@ -41,8 +41,8 @@
                         Status
                     </div>
                 </div>
-                <div 
-                    v-for="dataImport in dataImports.data" 
+                <div
+                    v-for="dataImport in dataImports.data"
                     @click="() => redirectToImport(dataImport.name!)"
                     class="grid grid-cols-[75%,20%] lg:grid-cols-[85%,20%] items-center cursor-pointer py-2.5 px-1 mx-2"
                 >
@@ -84,7 +84,7 @@
         >
             <template #body-content>
                 <div>
-                    <Link 
+                    <Link
                         v-model="doctypeForImport"
                         doctype="DocType"
                         :filters="{
@@ -105,7 +105,7 @@ import { dayjs } from "../../src/utils/dayjs"
 import { getBadgeColor } from "./dataImport"
 import Badge from '../../src/components/Badge/Badge.vue'
 import type { BadgeProps } from '../../src/components/Badge/types'
-import { toast } from "../../src/components/Toast/index"
+import { toast } from "../../src/components/Toast/toast"
 import Button from '../../src/components/Button/Button.vue'
 import Dialog from '../../src/components/Dialog/Dialog.vue'
 import FeatherIcon from '../../src/components/FeatherIcon.vue'

package/frappe/DataImport/MappingStep.vue

@@ -14,7 +14,7 @@
                     Change the mapping of columns from your file to fields in the system
                 </div>
             </div>
-            
+
             <div class="flex flex-col lg:flex-row space-y-2 lg:space-x-2 lg:space-y-0">
                 <Button v-if="mappingUpdated" label="Reset Mapping" @click="resetMapping" />
                 <Button label="Continue" variant="solid" @click="$emit('updateStep', 'preview')" />
@@ -36,7 +36,7 @@
                     <Autocomplete
                         :model-value="columnMappings[columnsFromFile[i - 1]]"
                         :options="columnsFromSystem"
-                        placeholder="Select field" 
+                        placeholder="Select field"
                         @update:model-value="(val: any) => updateColumnMappings(i, val)"
                     />
                 </template>
@@ -48,7 +48,7 @@
 import type { DataImport, DataImports } from './types';
 import { fieldsToIgnore, getBadgeColor, getPreviewData } from './dataImport'
 import { computed, nextTick, onMounted, ref } from 'vue';
-import { toast } from "../../src/components/Toast/index"
+import { toast } from "../../src/components/Toast/toast"
 import Autocomplete from '../../src/components/Autocomplete/Autocomplete.vue';
 import Badge from '../../src/components/Badge/Badge.vue';
 import Button from '../../src/components/Button/Button.vue';
@@ -180,7 +180,7 @@ const resetMapping = () => {
 
 const getChildTableName = (parent: string, child: string) => {
     let parentFields = props.fields.data?.docs.find((doc: any) => doc.name == parent)?.fields || [];
-    
+
     let childField = parentFields.filter((field: any) => field.options == child)[0]
     return childField?.label || child;
 }

package/frappe/DataImport/UploadStep.vue

@@ -10,8 +10,8 @@
                         {{ data?.status }}
                     </Badge>
                 </div>
-                <Button 
-                    variant="solid" 
+                <Button
+                    variant="solid"
                     @click="saveImport"
                     :disabled="disableContinueButton"
                 >
@@ -27,7 +27,7 @@
             <div
                 v-if="showFileSelector && !importFile"
                 @dragover.prevent
-                @drop.prevent="(e) =>  uploadFile(e)" 
+                @drop.prevent="(e) =>  uploadFile(e)"
                 class="h-[300px] flex items-center justify-center bg-surface-gray-1 border border-dashed border-outline-gray-3 rounded-md">
                 <div v-if="showFileSelector && !uploading" class="w-4/5 lg:w-2/5 text-center">
                     <FeatherIcon name="upload-cloud" class="size-6 stroke-1.5 text-ink-gray-6 mx-auto mb-2.5" />
@@ -39,11 +39,11 @@
                         @change="(e) => uploadFile(e)"
                     />
                     <div class="leading-5 text-ink-gray-9">
-                        Drag and drop a CSV file, or upload from your 
-                        <span @click="openFileSelector" class="cursor-pointer font-semibold hover:underline">Device</span> 
-                        or 
-                        <span @click="openSheetSelector" class="cursor-pointer font-semibold hover:underline"> 
-                            Google Sheet 
+                        Drag and drop a CSV file, or upload from your
+                        <span @click="openFileSelector" class="cursor-pointer font-semibold hover:underline">Device</span>
+                        or
+                        <span @click="openSheetSelector" class="cursor-pointer font-semibold hover:underline">
+                            Google Sheet
                         </span>
                     </div>
                 </div>
@@ -57,7 +57,7 @@
                         </div>
                     </div>
                     <div class="w-full bg-surface-gray-1 h-1 rounded-full mt-3">
-                        <div 
+                        <div
                             class="bg-surface-gray-7 h-1 rounded-full transition-all duration-500 ease-in-out"
                             :style="`width: ${uploadProgress}%`"
                         ></div>
@@ -74,8 +74,8 @@
                             {{ convertToKB(importFile.file_size) }}
                         </div>
                     </div>
-                    <FeatherIcon 
-                        name="trash-2" 
+                    <FeatherIcon
+                        name="trash-2"
                         class="size-4 stroke-1.5 text-ink-red-3 cursor-pointer"
                         @click="deleteFile"
                     />
@@ -154,7 +154,7 @@
 import { computed, nextTick, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
 import type { DataImports, DataImport, DocField, DocType } from './types'
-import { toast } from "../../src/components/Toast/index"
+import { toast } from "../../src/components/Toast/toast"
 import { fieldsToIgnore, getChildTableName, getBadgeColor } from './dataImport'
 import Badge from '../../src/components/Badge/Badge.vue'
 import Button from '../../src/components/Button/Button.vue'
@@ -199,7 +199,7 @@ const extractFile = (e: Event): File | null => {
 const uploadFile = (e: Event) => {
     const file = extractFile(e)
     if (!file) return;
-    
+
     if (file.type !== 'text/csv') {
         toast.error('Please upload a valid CSV file.')
         console.error('Please upload a valid CSV file.')
@@ -309,7 +309,7 @@ const exportTemplate = async (type: 'mandatory' | 'all') => {
 const getExportURL = (type: 'mandatory' | 'all') => {
     if (!props.doctype && !props.data?.reference_doctype) return ''
     let exportFields = getExportFields(type)
-    
+
     return `/api/method/frappe.core.doctype.data_import.data_import.download_template
         ?doctype=${encodeURIComponent(props.doctype || props.data?.reference_doctype as string)}
         &export_fields=${encodeURIComponent(JSON.stringify(exportFields))}

package/frappe/DataImport/dataImport.ts

@@ -1,4 +1,4 @@
-import { toast } from "../../src/components/Toast/index"
+import { toast } from "../../src/components/Toast/toast"
 import type { DataImportStatus } from './types'
 import call from '../../src/utils/call';
 

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 -->