frappe-ui 0.0.88 → 0.0.90

package/package.json

@@ -1,13 +1,16 @@
 {
   "name": "frappe-ui",
-  "version": "0.0.88",
+  "version": "0.0.90",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.js",
   "scripts": {
     "test": "npx prettier --check ./src",
     "prettier": "npx prettier -w ./src",
     "prepare": "husky install",
-    "bump-and-release": "git pull --rebase origin main && yarn version --patch && git push && git push --tags"
+    "bump-and-release": "git pull --rebase origin main && yarn version --patch && git push && git push --tags",
+    "docs:dev": "vitepress dev docs",
+    "docs:build": "vitepress build docs",
+    "docs:serve": "vitepress serve docs"
   },
   "files": [
     "src"
@@ -35,6 +38,7 @@
     "@tiptap/extension-table-row": "^2.0.0-beta.22",
     "@tiptap/extension-text-align": "^2.0.0-beta.31",
     "@tiptap/extension-text-style": "^2.0.0-beta.202",
+    "@tiptap/extension-typography": "^2.0.0-beta.202",
     "@tiptap/starter-kit": "^2.0.0-beta.191",
     "@tiptap/suggestion": "^2.0.0-beta.195",
     "@tiptap/vue-3": "^2.0.0-beta.96",
@@ -48,10 +52,13 @@
     "tippy.js": "^6.3.7"
   },
   "devDependencies": {
+    "cross-fetch": "^3.1.5",
     "husky": ">=6",
     "lint-staged": ">=10",
     "prettier": "2.7.1",
-    "prettier-plugin-tailwindcss": "^0.1.13"
+    "prettier-plugin-tailwindcss": "^0.1.13",
+    "vitepress": "^1.0.0-alpha.29",
+    "vue": "^3.2.45"
   },
   "lint-staged": {
     "*.{js,css,md,vue}": "prettier --write"

package/readme.md

@@ -1,16 +1,27 @@
-# Frappe UI
+<p align="center">
+  <a href="https://github.com/frappe/frappe-ui">
+    <img src="./docs/public/frappe-ui-logo.svg" width="250" />
+  </a>
+</p>
+<h1 style="font-size: 24px" align="center">Rapidly build modern frontends for Frappe apps</h1>
 
-A set of components and utilities for rapid UI development.
+<p align="center">
+  <img alt="MIT License" src="https://img.shields.io/github/license/frappe/frappe-ui"/>
+  <img alt="NPM Downloads" src="https://img.shields.io/npm/dm/frappe-ui.svg?style=flat"/>
+</p>
 
-Frappe UI components are built using Vue 3 and Tailwind. Along with components,
-it also ships with directives and utilities that make UI development easier.
+Frappe UI provides a set of components and utilities for rapid UI development.
+Components are built using Vue 3 and Tailwind. Along with components, there are
+directives and utilities that make UI development easier.
 
-<details>
-  <summary>Show components</summary>
-  <img src="https://user-images.githubusercontent.com/9355208/152111395-a62e1599-112c-450f-a32a-5debc791eb2e.png" width="80%" />
-</details>
+## Links
+
+- [Documentation](https://frappeui.com)
+- [Frappe UI Starter Boilerplate](https://github.com/netchampfaris/frappe-ui-starter)
+- [Community](https://github.com/frappe/frappe-ui/discussions)
 
 ## Installation
+
 ```sh
 npm install frappe-ui
 # or
@@ -20,15 +31,14 @@ yarn add frappe-ui
 Now, import the FrappeUI plugin and components in your Vue app's `main.js`:
 
 ```js
-import { createApp } from "vue";
-import { FrappeUI, Button } from "frappe-ui";
-import App from "./App.vue";
-import "./index.css";
+import { createApp } from 'vue'
+import { FrappeUI } from 'frappe-ui'
+import App from './App.vue'
+import './index.css'
 
-let app = createApp(App);
-app.use(FrappeUI);
-app.component("Button", Button);
-app.mount("#app");
+let app = createApp(App)
+app.use(FrappeUI)
+app.mount('#app')
 ```
 
 In your `tailwind.config.js` file, include the frappe-ui preset:
@@ -42,277 +52,31 @@ module.exports = {
 }
 ```
 
-## Components
-
-Frappe UI ships with a bunch of components. To use a component, you can import it directly from `frappe-ui`:
 ```html
 <template>
-    <Button>Click me</Button>
+  <button>Click me</button>
 </template>
 <script>
-import { Button } from 'frappe-ui';
-export default {
+  import { Button } from 'frappe-ui'
+  export default {
     components: {
-        Button
-    }
-}
-</script>
-```
-
-You can also register components on the root `app` so that you don't have to import them in every component.
-
-`main.js`
-```js
-import { createApp } from "vue";
-import { Button, Input } from "frappe-ui";
-
-let app = createApp(App);
-app.component("Button", Button);
-app.component("Input", Input);
-app.mount("#app");
-```
-
-### Alert
-```html
-<Alert title="Info">Your account has been created.</Alert>
-```
-
-### Avatar
-```html
-<Avatar label="John Doe" />
-<Avatar label="John Doe" imageURL="https://picsum.photos/200" />
-```
-
-### Badge
-```html
-<Badge>Open</Badge>
-<Badge color="green">Completed</Badge>
-<Badge color="red">Error</Badge>
-<Badge color="yellow">Closed</Badge>
-<Badge color="blue">Running</Badge>
-```
-
-### Button
-```html
-<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>
-```
-
-### Card
-```html
-<Card title="Heading" subtitle="Sub text">
-    <div class="text-base">Card content</div>
-</Card>
-```
-
-### Dialog
-The Dialog component uses `teleport` feature and requires `#modals` to exist.
-Make sure you add a `<div id="modals"></div>` before the end of your body tag.
-
-```html
-<Button @click="dialogOpen = true">Open Dialog</Button>
-<Dialog title="This is Dialog" v-model="dialogOpen">
-    <div class="text-base">Dialog content</div>
-</Dialog>
-```
-
-### Dropdown
-The Dropdown component uses `teleport` feature and requires `#popovers` to exist.
-Make sure you add a `<div id="popovers"></div>` before the end of your body tag.
-
-```html
-<Dropdown :items="[{ label: 'Option 1' }, { label: 'Option 2' }]">
-    <template v-slot="{ toggleDropdown }">
-        <Button @click="toggleDropdown()">Open Dropdown</Button>
-    </template>
-</Dropdown>
-```
-
-### ErrorMessage
-```html
-<ErrorMessage message="There was an error" />
-```
-
-### FeatherIcon
-Uses [`feather-icons`](https://github.com/feathericons/feather) under the hood.
-
-```html
-<FeatherIcon class="w-4 h-4" name="menu" />
-<FeatherIcon class="w-4 h-4" name="circle" />
-<FeatherIcon class="w-4 h-4" name="arrow-left" />
-<FeatherIcon class="w-4 h-4" name="arrow-right" />
-```
-
-### GreenCheckIcon
-```html
-<GreenCheckIcon class="w-4 h-4" />
-```
-
-### Input
-```html
-<Input label="Text" type="text" value="" placeholder="Text" />
-<Input label="Long Text" type="textarea" value="" placeholder="Textarea" />
-<Input
-    label="Select"
-    type="select"
-    value=""
-    :options="['Option 1', 'Option 2']"
-/>
-<Input label="Check" type="checkbox" value="" />
-```
-
-### ListItem
-```html
-<ListItem title="List Item 1" subtitle="Sub text 1">
-    <template #actions>
-        <Button icon="more-horizontal" />
-    </template>
-</ListItem>
-<ListItem title="List Item 2" subtitle="Sub text 2" />
-```
-
-### LoadingIndicator
-```html
-<LoadingIndicator />
-```
-
-### LoadingText
-```html
-<LoadingText />
-```
-
-### Spinner
-```html
-<Spinner class="w-5" />
-```
-
-### SuccessMessage
-```html
-<SuccessMessage message="Completed successfully" />
-```
-
-## Directives
-
-### onOutsideClick
-This directive is used when you want to execute a function when the user clicks outside of a target element. For e.g., when user clicks outside a dropdown, the dropdown should close.
-
-```html
-<button v-on-outside-click="handleOutsideClick">Click me</button>
-```
-
-## Utilities
-
-### call
-This function wraps `fetch` API. It is built for making web requests to a Frappe server.
-
-```js
-call('frappe.client.get_value', {
-    doctype: 'ToDo',
-    filters: {name: 'adsfasdf'},
-    fieldname: 'description'
-})
-```
-
-### resources
-This is a helper for managing async data fetching in Vue apps that work with a Frappe backend.
-
-```html
-<template>
-    <div>
-        <LoadingText v-if="$resources.todos.loading" />
-        <div
-            v-for="todo in $resources.todos.data || []"
-            :key="todo.name"
-        >
-            <div>{{ todo.description }}</div>
-            <Badge>{{ todo.status }}</Badge>
-        </div>
-        <ErrorMessage message="$resources.todos.error" />
-    </div>
-</template>
-<script>
-import { Badge, LoadingText, ErrorMessage } from 'frappe-ui';
-
-export default {
-    name: 'ToDos',
-    resources: {
-        todos: {
-            method: 'frappe.client.get_list',
-            params: {
-                doctype: 'ToDo',
-                fields: ['*']
-            }
-        }
+      Button,
     },
-    components: {
-        Badge,
-        LoadingText,
-        ErrorMessage
-    }
-}
+  }
 </script>
 ```
 
-### socketio
-
-This module pre-configures a socketio instance on the port 9000. If you install the FrappeUI plugin, `this.$socket` will be available in all Vue components.
-
-Usage:
-```js
-this.$socket.on('list_update', (data) => {
-    // handle list update event
-});
-```
-
-### tailwind.config
-This is a [tailwind preset](https://tailwindcss.com/docs/presets) that customizes the standard tailwind config to include Frappe design tokens.
-
-Usage:
-```js
-module.exports = {
-  presets: [
-    require('frappe-ui/src/utils/tailwind.config')
-  ],
-  ...
-}
-```
-
-## Vue Plugin
-Vue plugin that installs call, resources and socketio in your Vue app
+## Used By
 
-`main.js`
-```js
-import { createApp } from "vue";
-import { FrappeUI } from "frappe-ui";
-import App from "./App.vue";
+Frappe UI is being used in a lot of products by
+[Frappe](https://github.com/frappe).
 
-let app = createApp(App);
-app.use(FrappeUI);
-app.mount("#app");
-```
-
-You can now use these features in your Vue components.
-```html
-<script>
-export default {
-    resources: {
-        ping: 'frappe.handler.ping'
-    },
-    mounted() {
-        this.$call('ping');
-        this.$socket.on('list_update', (data) => {
-            // handle list update event
-        });
-    }
-}
-</script>
-```
+- [Frappe Cloud](https://frappecloud.com)
+- [Gameplan](https://github.com/frappe/gameplan)
+- [Frappe Desk](https://frappedesk.com)
+- [Frappe Insights](https://github.com/frappe/insights)
+- [Frappe Drive](https://github.com/frappe/drive)
 
 ## License
+
 MIT

package/src/components/Autocomplete.vue

@@ -6,11 +6,7 @@
           <ComboboxButton
             class="flex w-full items-center justify-between rounded-md bg-gray-100 py-1.5 pl-3 pr-2"
             :class="{ 'rounded-b-none': isComboboxOpen }"
-            @click="
-              () => {
-                openPopover()
-              }
-            "
+            @click="() => openPopover()"
           >
             <span
               class="overflow-hidden text-ellipsis text-base"
@@ -100,6 +96,8 @@ import {
   ComboboxButton,
 } from '@headlessui/vue'
 import Popover from './Popover.vue'
+import Button from './Button.vue'
+import FeatherIcon from './FeatherIcon.vue'
 
 export default {
   name: 'Autocomplete',
@@ -107,6 +105,8 @@ export default {
   emits: ['update:modelValue', 'change'],
   components: {
     Popover,
+    Button,
+    FeatherIcon,
     Combobox,
     ComboboxInput,
     ComboboxOptions,

package/src/components/Badge.vue

@@ -3,26 +3,14 @@
     class="inline-block cursor-default rounded-md px-3 py-1 text-xs font-medium"
     :class="classes"
   >
-    <slot>{{ status }}</slot>
+    <slot>{{ label }}</slot>
   </span>
 </template>
 <script>
-const DEFAULT_COLOR_MAP = {
-  Pending: 'yellow',
-  Running: 'yellow',
-  Success: 'green',
-  Failure: 'red',
-  Active: 'green',
-  Broken: 'red',
-  Updating: 'blue',
-  Rejected: 'red',
-  Published: 'green',
-  Approved: 'green',
-}
-
+let validColors = ['gray', 'red', 'yellow', 'green', 'blue']
 export default {
   name: 'Badge',
-  props: ['color', 'status', 'colorMap'],
+  props: ['color', 'label', 'colorMap'],
   computed: {
     classes() {
       let color = this.getBadgeColor()
@@ -41,13 +29,12 @@ export default {
   methods: {
     getBadgeColor() {
       let color = this.color
-      if (color) {
-        return color
+      if (this.colorMap) {
+        color = this.colorMap[this.label]
+      }
+      if (!color || !validColors.includes(color)) {
+        color = 'gray'
       }
-
-      let statusColorMap = Object.assign(DEFAULT_COLOR_MAP, this.colorMap || {})
-      color = statusColorMap[this.status] || 'gray'
-
       return color
     },
   },

package/src/components/DatePicker.vue

@@ -3,6 +3,7 @@
     <template #target="{ togglePopover }">
       <Input
         type="text"
+        icon-left="calendar"
         :class="inputClass"
         :value="
           modelValue && formatValue ? formatValue(modelValue) : modelValue || ''
@@ -92,6 +93,8 @@
 </template>
 
 <script>
+import Input from './Input.vue'
+import FeatherIcon from './FeatherIcon.vue'
 import Popover from './Popover.vue'
 
 export default {
@@ -99,6 +102,8 @@ export default {
   props: ['modelValue', 'placeholder', 'readonly', 'formatValue', 'inputClass'],
   emits: ['update:modelValue'],
   components: {
+    Input,
+    FeatherIcon,
     Popover,
   },
   data() {

package/src/components/Dialog.vue

@@ -46,8 +46,8 @@
               'max-w-3xl': options.size === '3xl',
               'max-w-2xl': options.size === '2xl',
               'max-w-xl': options.size === 'xl',
-              'max-w-md': options.size === 'md',
               'max-w-lg': options.size === 'lg' || !options.size,
+              'max-w-md': options.size === 'md',
               'max-w-sm': options.size === 'sm',
               'max-w-xs': options.size === 'xs',
             }"
@@ -60,6 +60,7 @@
                       v-if="icon"
                       class="mx-auto mb-3 flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full sm:mx-0 sm:mb-0 sm:mr-4 sm:h-9 sm:w-9"
                       :class="{
+                        'bg-gray-100': !icon.appearance,
                         'bg-yellow-100': icon.appearance === 'warning',
                         'bg-blue-100': icon.appearance === 'info',
                         'bg-red-100': icon.appearance === 'danger',
@@ -68,8 +69,9 @@
                     >
                       <FeatherIcon
                         :name="icon.name"
-                        class="h-6 w-6 text-red-600 sm:h-5 sm:w-5"
+                        class="h-6 w-6 sm:h-5 sm:w-5"
                         :class="{
+                          'text-gray-600': !icon.appearance,
                           'text-yellow-600': icon.appearance === 'warning',
                           'text-blue-600': icon.appearance === 'info',
                           'text-red-600': icon.appearance === 'danger',
@@ -198,10 +200,7 @@ export default {
 
       let icon = this.options.icon
       if (typeof icon === 'string') {
-        icon = {
-          name: icon,
-          type: 'info',
-        }
+        icon = { name: icon }
       }
       return icon
     },

package/src/components/Dropdown.vue

@@ -64,16 +64,31 @@
 
 <script>
 import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue'
+import Button from './Button.vue'
 import FeatherIcon from './FeatherIcon.vue'
 
 export default {
   name: 'NewDropdown',
-  props: ['button', 'options', 'placement'],
+  props: {
+    button: {
+      type: Object,
+      default: null,
+    },
+    options: {
+      type: Array,
+      default: () => [],
+    },
+    placement: {
+      type: String,
+      default: 'left',
+    },
+  },
   components: {
     Menu,
     MenuButton,
     MenuItems,
     MenuItem,
+    Button,
     FeatherIcon,
   },
   methods: {

package/src/components/FileUploader.vue

@@ -130,7 +130,7 @@ class FileUploader {
 
 export default {
   name: 'FileUploader',
-  props: ['fileTypes', 'uploadArgs', 'type', 'validateFile'],
+  props: ['fileTypes', 'uploadArgs', 'validateFile'],
   data() {
     return {
       uploader: null,
@@ -204,11 +204,11 @@ export default {
         .catch((error) => {
           this.uploading = false
           let errorMessage = 'Error Uploading File'
-          if (error._server_messages) {
+          if (error?._server_messages) {
             errorMessage = JSON.parse(
               JSON.parse(error._server_messages)[0]
             ).message
-          } else if (error.exc) {
+          } else if (error?.exc) {
             errorMessage = JSON.parse(error.exc)[0].split('\n').slice(-2, -1)[0]
           }
           this.error = errorMessage

package/src/components/Input.vue

@@ -49,7 +49,7 @@
         ref="input"
         :value="passedInputValue"
         :disabled="disabled"
-        :rows="rows || 3"
+        :rows="rows"
       ></textarea>
       <select
         v-if="type === 'select'"
@@ -129,6 +129,7 @@ export default {
     },
     rows: {
       type: Number,
+      default: 3,
     },
     placeholder: {
       type: String,

package/src/components/LoadingIndicator.vue

@@ -1,12 +1,27 @@
 <template>
-  <Spinner class="max-w-xs" />
+  <svg
+    class="max-w-xs animate-spin"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+  >
+    <circle
+      class="opacity-25"
+      cx="12"
+      cy="12"
+      r="10"
+      stroke="currentColor"
+      stroke-width="4"
+    ></circle>
+    <path
+      class="opacity-75"
+      fill="currentColor"
+      d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+    ></path>
+  </svg>
 </template>
 <script>
-import Spinner from './Spinner.vue'
 export default {
   name: 'LoadingIndicator',
-  components: {
-    Spinner,
-  },
 }
 </script>