repository·main·Indexed 21 days ago
https://github.com/frappe/frappe-uiA library of Vue 3 components and utilities for rapid frontend development of Frappe applications. Built with Tailwind CSS, Headless UI, and TipTap, it provides a modern design system featuring a composition model for editors, a unified Dialog component, and a set of Vite plugins for proxying backend requests, auto-generating TypeScript types from DocTypes, and integrating Lucide icons.
Frappe UI is a library of Vue 3 components and utilities designed for building frontend applications that integrate with the Frappe Framework. It provides generic UI components (e.g., Button, Link, Dialog) and specialized utilities for server-side data fetching, directives, and other frontend tasks.
Key dependencies include:
The frappe-ui picker family consists of four main components used for date and time selection:
DatePicker: For selecting a single date.DateRangePicker: For selecting a start and end date range.DateTimePicker: A combined component for selecting both date and time.TimePicker: A standalone component for time selection (also used internally by DateTimePicker).Note: The DateRangePicker emits values as an array of strings [fromDate, toDate] in YYYY-MM-DD format, or an empty array [] when cleared.
Tabs component is used to organize content into separate panels that users can switch between. It is designed to make navigating related sections of an interface quick and intuitive. It supports different orientations and the use of icons within the tab headers.The Progress component is used to visually represent the completion of a task or a consumption meter. It can be configured to be a continuous bar or a segmented step indicator using the intervals prop.
<Progress :value="70" />Frappe UI provides a suite of picker components designed for smooth and intuitive date selection. Depending on your requirements, you can use:
These components are designed to make choosing and adjusting values quick and precise within your application interfaces.
The plan.md file serves as the main source of truth for the v1 release. It covers:
The frappe-ui v1 release focuses on API stability rather than feature completeness. The primary goal is to freeze the core component APIs and the recommended data API path to support a long-lived 1.x version line.
Key v1 characteristics:
<script setup>.v3 data APIs are the recommended path for new work (especially for Frappe v16+).v1 resource APIs and v2 composables are deprecated but remain available for migration.ListView component is used to display data in a structured, scrollable list. It is designed to handle large sets of information and supports features like columns, row grouping, custom cell content via slots, and row disabling.The Slider component is a slider input used to select a single value or a range of values within a specified min and max boundary. It supports different sizes, range selection (two thumbs), and bidirectional filling when handling negative values.
<Slider v-model="value" :min="0" :max="100" />TimePicker component allows users to select a specific time from a list or enter a custom value. It supports 12/24-hour formats, custom intervals, and optional time ranges (min/max).TextInput component is a flexible input field for text, numbers, and other string-based data. It supports various visual styles (variants), sizes, and input types. It also allows for custom content via prefix and suffix slots, and integrates with a labeling contract for error handling and descriptions.