frappe / frappe-ui

A set of components and utilities for rapid UI development
https://frappeui.com
MIT License
256 stars 109 forks source link

feat: `ListEmptyState` and configurable `ListRowItem` prefix #131

Closed nextchamp-saqib closed 6 months ago

nextchamp-saqib commented 6 months ago

Added empty state for list component.

emptyState: {
    title: 'No Query Created.',
    description: 'Create a new query to get started.',
    button: {
        label: 'New Query',
        variant: 'solid',
        onClick: () => (),
    },
},

Also configurable by slots

<ListView>
    <ListHeader />
    <ListRows />
    <ListEmptyState>
        <p>No pages to display.</p>
        <Button label="New Page" variant="solid" @click="() => {}" />
    </ListEmptyState>
</ListView>

image

Set default row height to 40px.

This ensures that the row height does not change if a row item prefix (like Avatar, or Indicator) is added to the list row item. It can be modified using options.rowHeight

Added configuration to define prefix/suffix and custom label for each column

{
    label: 'Label',
    key: 'label',
    width: 1,
    getLabel: ({ row }) => row.label,
    prefix: ({ row }) => <IndicatorIcon />,
}
netlify[bot] commented 6 months ago

Deploy Preview for frappeui ready!

Name Link
Latest commit 662498a3890169a84fb4b9a65f6bd9f021e1f45a
Latest deploy log https://app.netlify.com/sites/frappeui/deploys/65f2d2e8904d660008939045
Deploy Preview https://deploy-preview-131--frappeui.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

netlify[bot] commented 6 months ago

Deploy Preview for frappeui ready!

Name Link
Latest commit 3214632edded1ab82f906a831a05ae4f4439749c
Latest deploy log https://app.netlify.com/sites/frappeui/deploys/65fbf0c53e1469000879b288
Deploy Preview https://deploy-preview-131--frappeui.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.