Multi-line buttons look bad - ellipsis is better

frappe-ui includes a preset config file to align tailwindcss's defaults to the frappe design language. That's great. At present, however, the logic of the file is a bit strange. It extends the defaults for some classes (spacing, width, height, minWidth, minHeight, borderColor, typography) but replaces them for others (colors, borderRadius, boxShadow, container, fontSize, screens).

It is not clear whether this was deliberate, but it can lead to a very confusing experience for users. Some tailwind classes are blocked, while others pass through. The fix is easy, and I'm happy to submit a PR, but I am posting an issue first in case the maintainers have any opinions.

Firefox

Chrome

I'm trying to pass list attribute to Input component but cannot because the component does not allow inherit attributes.

Is this by design?

when use v-model with Input ui component its not work.
only when blur input
but in normal input its works fine

1. Create a document resource, set auto: false
2. Check index db for the cached document
3. Update the document by setting some value
4. Reload the page, and check the index db, it will have the older doc

For a webshop remake, according to https://frappeui.com/story/docs-resources-document-resource-story-js , it appears that we need a local state proxy for frappe resources.

It should:

• Set all mutations into a localstate representation
• quietly sync those mutation to the backend doctype in the background, being tolerant to network interruptions, potentially accumulating mutations locally
• instantly fetch from local state (quite like probably how cache is already implemented), while updating the state in the background from the current backend version, being tolerant to network interactions, and only on a diff "re-draw" the component in question
• option to persist localstate across site visits (default?)

For a v1 of that functionality, I don't think we need to deal with sync conflict resolution as the doctypes involved would be specific and exclusively frontend driven.

Lot of people build components in React.
We should export frappe ui as web components

Is there any kit on figma or any free software?

Best Regards

I followed the installation guide from https://frappeui.com/getting-started.html, but when I tried to access the URL todo.test:8080/frontend, I encountered an error message that said:

Failed to resolve import '@tiptap/pm/state'
Failed to resolve import 'prosemirror-model'

However, I was able to fix the issue by installing @tiptap/pm and then reloading the /frontend URL, which resolved the problem.

Drop downs don't get marked as clickable with vimium
Having role attribute on the html element might be what's needed

Ref: https://stackoverflow.com/questions/53918093/how-can-i-make-my-element-clickable-for-vimium

As far as I can tell:

• Frappe UI currently doesn't support form structure understood by most browsers.
• Inputs can't be marked as required, these validations need to added separately

The variable declared in the snippet under the section https://jsonplaceholder.typicode.com/posts/1 is not used.

Here instead of showing the entire dropdown items, it would be better if there is a limit, and the overflow would be scrollable

When loading for the first time it throws the following error in my browser console: "Uncaught SyntaxError: The requested module '/node_modules/feather-icons/dist/feather.js?v=849b2485' does not provide an export named 'default'"

Any idea what is happening and could you help me fix this ?

Components like Autocomplete and Date Picker are styled to blend with the default Input component. This creates a nice user experience, but at present only the input component has a label property. It would be more semantically robust if other similar components had this property too.

I am happy to submit a PR if this is consistent with the maintainers' vision.

after logging in, the system redirects us to the desk and there is no configuration available to redirect them to the desired url.

Error occurred when updating from: 0.0.2 -> 0.0.89
using template: https://github.com/netchampfaris/frappe-ui-starter

Right now, the $resources utility uses component mixins to expose Frappe resource apis. As of Vue 3, mixins are no longer the recommended approach for code reuse.

No Longer Recommended
In Vue 2, mixins were the primary mechanism for creating reusable chunks of component logic. While mixins continue to be supported in Vue 3, Composition API is now the preferred approach for code reuse between components.

https://vuejs.org/api/options-composition.html#mixins

I would propose that this library introduce a composables interface, exposing an importable method such as useResources() that would be available in Vue's composition API.

I believe it is possible for the library to offer both interfaces simultaneously, and I believe doing so would provide more flexibility in design patterning.

There is significant inconsistency in how various components apply class attributes. For example, consider the following code:

<div class="grid grid-12 gap-2">
  <Input label="Input" class="col-span-12" />
  <Input label="Input 2" class="col-span-6" />
  <Input label="Input 3" class="col-span-6" />
  <Autocomplete
    label="Autocomplete"
    :options="[
      { label: 'One', value: '1' },
      { label: 'Two', value: '2' },
    ]"
    class="col-span-6"
  />
  <DatePicker label="Date Picker" :formatValue="(val) => val" class="col-span-6" />
</div>

This produces a layout that looks like this:

The expected behavior would be for the Autocomplete and DatePicker components to behave the same way that Input components do.

Hello,

I am encountering a build failure when attempting to use the Resource component. Using exactly the code displayed here:
https://frappeui.com/components/resource.html

I get the following error:

[Vue warn]: Property "$resources" was accessed during render but is not defined on instance.                                                            15:22:29
[Vue warn]: Unhandled error during execution of render function                                                                                         15:22:29
  at <Resource options= { url: 'https://jsonplaceholder.typicode.com/users/1' } >
[nitro] [dev] [unhandledRejection] TypeError: Cannot read properties of undefined (reading 'resource')                                                  15:22:29
    at Proxy.render (/Users/petergraif/Sites/oi2/node_modules/frappe-ui/src/components/Resource.vue:12:33)
    at renderComponentRoot (/Users/petergraif/Sites/oi2/node_modules/@vue/runtime-core/dist/runtime-core.cjs.js:891:44)
    at renderComponentSubTree (/Users/petergraif/Sites/oi2/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:263:51)
    at renderComponentVNode (/Users/petergraif/Sites/oi2/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:188:16)
    at Module.ssrRenderComponent (/Users/petergraif/Sites/oi2/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:624:12)
    at _sfc_ssrRender (/Users/petergraif/Sites/oi2/pages/index2.vue:22:31)
    at renderComponentSubTree (/Users/petergraif/Sites/oi2/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:254:17)
    at renderComponentVNode (/Users/petergraif/Sites/oi2/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:188:16)
    at renderVNode (/Users/petergraif/Sites/oi2/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:299:22)
    at renderComponentSubTree (/Users/petergraif/Sites/oi2/node_modules/@vue/server-renderer/dist/server-renderer.cjs.js:263:13)

frappeui.com is just showing the storybook instead of the actual website. It was working fine a few hours ago.

• clicking should autofocus on searchbox so I can type. Reduces 1 extra click.
• Some keybinds should be there for switching options

Currently Alert component has only one default type i.e Warning. It would be better to have more Alert types such as Danger.

Is there a standard way to define resource requests that depend on prior resource requests for parameters? I may be thinking about this the wrong way, but I find myself writing a lot of code that looks like this:

<template>
  <ul>
    <li v-for="invoice in invoices.data">{{ invoice.name }}</li>
  </ul>
</template>

<script setup>
import { createResource, createListResource } from 'frappe-ui'

const user = createResource({
  url: 'frappe.auth.get_logged_user',
})
const invoices = createListResource({
  doctype: 'Sales Invoice',
  filters: { owner: user.data },
  auto: true,
})
</script>

The problem is that the user is still undefined when the createListResource is called, and the invoices object isn't responsive to changes in user.data. I know I can accomplish this with onMounted hooks, but I'm hoping there's a more declarative approach out there.

the button remains selected after the action:

See https://frappeui.com/story/docs-resources-resource-story-js#basic-example
The request to https://jsonplaceholder.typicode.com/posts/1 fails

Imagine a comment thread with multiple comments with rich-text content, if you are scrolling to the bottom, scroll jump happens because images are still loading asynchronously. Adding height attribute should solve this.

I'm using the TextEditor, added a photo to it but can't center the photo

Hi there,

I believe there's a bug in the documentation. In the following section:

<Button>Default</Button>
<Button type="primary">Primary</Button>
<Button type="danger">Danger</Button>
<Button type="white">White</Button>
<Button icon="x" />
<Button icon-left="menu">Menu</Button>
<Button icon-right="external-link">Link</Button>
<Button :loading="true">Loading</Button>

All instances of <Button type= should perhaps be <Button appearance=?

The v-model property is currently not working correctly on the Autocomplete component. Instead of binding to the value of the label/value object, it binds to the entire object.

See the following example, taken directly from the documentation:

<template>
  <div class="max-w-screen-md m-auto p-12">
    <Autocomplete
      :options="[
        { label: 'Apple', value: 'apple' },
        { label: 'Banana', value: 'banana' },
        { label: 'Orange', value: 'orange' },
      ]"
      v-model="fruit"
      placeholder="Select a fruit"
    />
    <pre>{{ fruit }}</pre>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { Autocomplete } from 'frappe-ui'
const fruit = ref('')
</script>

The following output is produced:

Hi,

When the arg is an array, only the first element is present in server side method.

Exemple of call in vue component :

resources: {
     todos: {
            method: 'custom_app.getStock',
            params: {
                fruits: ['Apple', 'Banana']
            },
            auto: true,
        }
  },

The payload is well sent :
{"fruits":["Apple","Banana"]}

But in server side function getStock(fruits), print(fruits) gives :
Apple

If I change the arg to dict {fruit1: 'Apple', fruit2: 'Banana'}, it works and fruits arg is fully transmitted server side.

Thanks

Hi ,
we have developed an UI from scratch from our but currently not using socket functionality and want to disable the calls from the client. Is there a flag by which we can disable it ?

Add hot reload in windows with the following code in ./vite.js for Users developing on Windows.

I've added the watch:{usePolling:true}, after this, hot reload on windows (Docker on WSL2) works.

return {
    name: 'frappeui-vite-plugin',
    config: () => ({
      server: {
        watch: {
          usePolling: true
        },
        port: port,
        proxy: {
          '^/(app|login|api|assets|files)': {
            target: `http://127.0.0.1:${webserver_port}`,
            ws: true,
            router: function (req) {
              const site_name = req.headers.host.split(':')[0]
              return `http://${site_name}:${webserver_port}`
            },
          },
        },
      },
    }),
  }

Is it possible to add this to the code?

In the absence of project-wide usage of TypeScript, type declaration files would be nice.

(was about to use this for a thing, but for now I'll be resorting to shamelessly copying blocks of required code, adding types and using it)

Before updating

Now

I cannot find a way to make the FormControl elements be marked as required.
It would be nice if there was a way to pass a prop to make the field as required, with cosmetics of red asterisk.

{ "doctype": "Fees", "start": 0, "pageLength": 20, "debug": 0, "originalData": null, "data": null, "hasPreviousPage": false, "hasNextPage": true, "list": { "url": "frappe.client.get_list", "data": null, "previousData": null, "loading": false, "fetched": false, "error": "Error: /api/method/frappe.client.get_list Insufficient Permission for Fees", "promise": "[object Promise]", "params": { "doctype": "Fees", "start": 0, "limit": 20, "limit_start": 0, "limit_page_length": 20, "debug": 0 } }, "fetchOne": { "url": "frappe.client.get_list", "data": null, "previousData": null, "loading": false, "fetched": false, "error": null, "promise": null, "params": null }, "insert": { "url": "frappe.client.insert", "data": null, "previousData": null, "loading": false, "fetched": false, "error": null, "promise": null, "params": null }, "setValue": { "url": "frappe.client.set_value", "data": null, "previousData": null, "loading": false, "fetched": false, "error": null, "promise": null, "params": null }, "delete": { "url": "frappe.client.delete", "data": null, "previousData": null, "loading": false, "fetched": false, "error": null, "promise": null, "params": null }, "runDocMethod": { "url": "run_doc_method", "data": null, "previousData": null, "loading": false, "fetched": false, "error": null, "promise": null, "params": null } }

I use dark reader but not everyone uses extensions also auto-generated dark color palettes aren't generally "great" 😬

Sample code

createResource({
  url: "https://example.com",
  auto: true,
  validate() {
    return "Sample error";
  },
  onError(error) {
    alert(error);
  },
});

Expected

One alert with 'Sample error'

Result

Gets two alerts with 'Sample error'

Possible cause

handleError is getting called twice from here. The second call might be due to error thrown from handleError

Possible fix

Remove error thrown from handleError?

can I use ant design with frappe ui?

Describe the bug
When trying to use the frappeRequest export from the frappe-ui package in my Vue 3 project, Vite throws a SyntaxError stating that the requested module does not provide an export named 'frappeRequest'.

To Reproduce
Steps to reproduce the behavior:

1. Install frappe-ui package in a Vue 3 project.
2. Import frappeRequest from the frappe-ui package in main.js: import { frappeRequest } from 'frappe-ui';
3. Run the project using npm run dev or yarn dev.
4. See the following error in the console:
   SyntaxError: The requested module '/node_modules/.vite/frappe-ui.js?v=7a3651e8' does not provide an export named 'frappeRequest'

Expected behavior
I expect the frappeRequest export to be available for use in my project without any errors.

Environment:

OS: [Linux]
Browser: [Chrome ]
Node.js version: [v16.19.1]
frappe-ui version: [0.0.89]
Vite version: [2.7.2]

Additional context
Please let me know if there is a workaround or if I am missing something in my setup.

We have hasNextPage and next() to navigate between pages. It makes sense to have same functionality for previous page

MacOS has this weird issue where if you are using a mouse it will show these block scrollbars - it can be handled with CSS - I see this everywhere in our new products.

Only appears when using a mouse, not trackpad.