frappe-ui 0.0.2 → 0.0.6

package/package.json

@@ -1,17 +1,23 @@
 {
   "name": "frappe-ui",
-  "version": "0.0.2",
+  "version": "0.0.6",
   "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"
   },
   "files": [
     "src"
   ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/frappe/frappe-ui.git"
+  },
   "author": "Frappe Technologies Pvt. Ltd.",
   "license": "MIT",
   "dependencies": {
+    "@headlessui/vue": "^1.4.3",
     "@popperjs/core": "^2.11.2",
     "@tailwindcss/forms": "^0.4.0",
     "@tailwindcss/typography": "^0.5.0",

package/readme.md

@@ -5,6 +5,11 @@ A set of components and utilities for rapid UI development.
 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.
 
+<details>
+  <summary>Show components</summary>
+  <img src="https://user-images.githubusercontent.com/9355208/152111395-a62e1599-112c-450f-a32a-5debc791eb2e.png" width="80%" />
+</details>
+
 ## Installation
 ```sh
 npm install frappe-ui
@@ -310,4 +315,4 @@ export default {
 ```
 
 ## License
-MIT
+MIT

package/src/components/Avatar.vue

@@ -8,7 +8,7 @@
     />
     <div
       v-else
-      class="flex items-center justify-center w-full h-full text-green-800 uppercase bg-green-200"
+      class="flex items-center justify-center w-full h-full text-gray-600 uppercase bg-gray-200"
       :class="{ sm: 'text-xs', md: 'text-base', lg: 'text-lg' }[size]"
     >
       {{ label && label[0] }}

package/src/components/Button.vue

@@ -8,26 +8,38 @@
     <LoadingIndicator
       v-if="loading"
       :class="{
-        'text-white': type == 'primary',
-        'text-gray-600': type == 'secondary',
-        'text-red-200': type == 'danger',
+        'text-white': appearance == 'primary',
+        'text-gray-600': appearance == 'secondary',
+        'text-red-200': appearance == 'danger',
       }"
     />
-    <FeatherIcon v-else-if="iconLeft" :name="iconLeft" class="w-4 h-4 mr-1.5" />
+    <FeatherIcon
+      v-else-if="iconLeft"
+      :name="iconLeft"
+      class="w-4 h-4 mr-1.5"
+      aria-hidden="true"
+    />
     <template v-if="loading && loadingText">{{ loadingText }}</template>
     <template v-else-if="icon">
-      <FeatherIcon :name="icon" class="w-4 h-4" />
+      <FeatherIcon :name="icon" class="w-4 h-4" :aria-label="label" />
     </template>
     <span :class="icon ? 'sr-only' : ''">
       <slot></slot>
     </span>
-    <FeatherIcon v-if="iconRight" :name="iconRight" class="w-4 h-4 ml-2" />
+    <FeatherIcon
+      v-if="iconRight"
+      :name="iconRight"
+      class="w-4 h-4 ml-2"
+      aria-hidden="true"
+    />
   </button>
 </template>
 <script>
 import FeatherIcon from './FeatherIcon.vue'
 import LoadingIndicator from './LoadingIndicator.vue'
 
+const ValidAppearances = ['primary', 'secondary', 'danger', 'white', 'minimal']
+
 export default {
   name: 'Button',
   components: {
@@ -35,9 +47,16 @@ export default {
     LoadingIndicator,
   },
   props: {
-    type: {
+    label: {
+      type: String,
+      default: null,
+    },
+    appearance: {
       type: String,
       default: 'secondary',
+      validator: (value) => {
+        return ValidAppearances.includes(value)
+      },
     },
     disabled: {
       type: Boolean,
@@ -71,20 +90,25 @@ export default {
   },
   computed: {
     buttonClasses() {
+      let appearanceClasses = {
+        primary:
+          'bg-blue-500 hover:bg-blue-600 text-white focus:ring-2 focus:ring-offset-2 focus:ring-blue-500',
+        secondary:
+          'bg-gray-100 hover:bg-gray-200 text-gray-900 focus:ring-2 focus:ring-offset-2 focus:ring-gray-500',
+        danger:
+          'bg-red-500 hover:bg-red-400 text-white focus:ring-2 focus:ring-offset-2 focus:ring-red-500',
+        white:
+          'bg-white text-gray-900 border hover:bg-gray-50 focus:ring-2 focus:ring-offset-2 focus:ring-gray-400',
+        minimal:
+          'bg-transparent hover:bg-gray-200 active:bg-gray-200 text-gray-900',
+      }
       return [
-        'inline-flex items-center justify-center text-base leading-5 rounded-md focus:outline-none',
+        'inline-flex items-center justify-center text-base leading-5 rounded-md transition-colors focus:outline-none',
         this.icon ? 'p-1.5' : 'px-3 py-1',
-        {
-          'opacity-50 cursor-not-allowed pointer-events-none': this.isDisabled,
-          'bg-gradient-blue hover:bg-gradient-none hover:bg-blue-500 text-white focus:shadow-outline-blue':
-            this.type === 'primary',
-          'bg-gray-100 hover:bg-gray-200 text-gray-900 focus:shadow-outline-gray':
-            this.type === 'secondary',
-          'bg-red-500 hover:bg-red-400 text-white focus:shadow-outline-red':
-            this.type === 'danger',
-          'bg-white text-gray-900 shadow focus:ring focus:ring-gray-400':
-            this.type === 'white',
-        },
+        this.isDisabled
+          ? 'opacity-50 cursor-not-allowed pointer-events-none'
+          : '',
+        appearanceClasses[this.appearance],
       ]
     },
     isDisabled() {

package/src/components/Dialog.vue

@@ -1,58 +1,184 @@
 <template>
-  <Modal
-    :show="modelValue"
-    @change="handleChange"
-    :dismissable="dismissable"
-    :full="full"
-  >
-    <div class="px-4 pb-4 bg-white sm:px-6 sm:pb-4">
-      <div class="sm:flex sm:items-start">
-        <div class="relative w-full sm:text-left">
-          <div class="sticky top-0 py-4 bg-white">
-            <h3 class="text-xl font-medium leading-6 text-gray-900">
-              {{ title }}
-            </h3>
-          </div>
-          <button
-            v-if="dismissable"
-            class="absolute top-0 right-0"
-            @click="handleChange(false)"
+  <TransitionRoot as="template" :show="open">
+    <HDialog
+      as="div"
+      class="fixed inset-0 z-10 overflow-y-auto"
+      @close="open = false"
+    >
+      <div
+        class="flex items-end justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0"
+      >
+        <TransitionChild
+          as="template"
+          enter="ease-out duration-300"
+          enter-from="opacity-0"
+          enter-to="opacity-100"
+          leave="ease-in duration-200"
+          leave-from="opacity-100"
+          leave-to="opacity-0"
+        >
+          <DialogOverlay
+            class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-75"
+          />
+        </TransitionChild>
+
+        <!-- This element is to trick the browser into centering the modal contents. -->
+        <span
+          class="hidden sm:inline-block sm:align-middle sm:h-screen"
+          aria-hidden="true"
+        >
+          &#8203;
+        </span>
+        <TransitionChild
+          as="template"
+          enter="ease-out duration-300"
+          enter-from="opacity-0 translate-y-4 sm:-translate-y-12 sm:scale-95"
+          enter-to="opacity-100 translate-y-0 sm:scale-100"
+          leave="ease-in duration-200"
+          leave-from="opacity-100 translate-y-0 sm:scale-100"
+          leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+        >
+          <div
+            class="inline-block overflow-hidden text-left align-bottom transition-all transform bg-white rounded-lg shadow-xl sm:my-8 sm:align-middle sm:max-w-lg sm:w-full"
           >
-            <FeatherIcon name="x" class="w-4 h-4 mt-4" />
-          </button>
-          <div class="leading-5 text-gray-800">
-            <slot></slot>
+            <slot name="body">
+              <slot name="body-main">
+                <div class="px-4 py-5 bg-white sm:p-6">
+                  <div>
+                    <div
+                      v-if="icon"
+                      class="flex items-center justify-center flex-shrink-0 w-12 h-12 mx-auto mb-3 rounded-full sm:mx-0 sm:h-10 sm:w-10 sm:mb-0 sm:mr-4"
+                      :class="{
+                        'bg-yellow-100': icon.type === 'warning',
+                        'bg-blue-100': icon.type === 'info',
+                        'bg-red-100': icon.type === 'danger',
+                        'bg-green-100': icon.type === 'success',
+                      }"
+                    >
+                      <FeatherIcon
+                        :name="icon.name"
+                        class="w-6 h-6 text-red-600"
+                        :class="{
+                          'text-yellow-600': icon.type === 'warning',
+                          'text-blue-600': icon.type === 'info',
+                          'text-red-600': icon.type === 'danger',
+                          'text-green-600': icon.type === 'success',
+                        }"
+                        aria-hidden="true"
+                      />
+                    </div>
+                    <div class="text-center sm:text-left">
+                      <DialogTitle as="header">
+                        <slot name="body-title">
+                          <h3
+                            class="mb-2 text-lg font-medium leading-6 text-gray-900"
+                          >
+                            {{ options.title || 'Untitled' }}
+                          </h3>
+                        </slot>
+                      </DialogTitle>
+
+                      <slot name="body-content">
+                        <p class="text-sm text-gray-500" v-if="options.message">
+                          {{ options.message }}
+                        </p>
+                      </slot>
+                    </div>
+                  </div>
+                </div>
+              </slot>
+              <div
+                class="px-4 py-3 space-y-2 sm:space-x-reverse sm:space-x-3 sm:space-y-0 bg-gray-50 sm:px-6 sm:flex sm:flex-row-reverse"
+                v-if="options?.actions || $slots.actions"
+              >
+                <slot name="actions" v-bind="{ close: () => (open = false) }">
+                  <Button
+                    v-for="action in options.actions"
+                    :key="action.label"
+                    :appearance="action.appearance"
+                    @click="
+                      () => {
+                        if (action.handler && action.handler === 'cancel') {
+                          open = false
+                        } else {
+                          action.handler()
+                        }
+                      }
+                    "
+                  >
+                    {{ action.label }}
+                  </Button>
+                </slot>
+              </div>
+            </slot>
           </div>
-        </div>
+        </TransitionChild>
       </div>
-    </div>
-    <div
-      class="sticky bottom-0 flex items-center justify-end p-4 bg-white sm:px-6 sm:py-4"
-      v-if="$slots.actions"
-    >
-      <slot name="actions"></slot>
-    </div>
-  </Modal>
+    </HDialog>
+  </TransitionRoot>
 </template>
 
 <script>
-import Modal from './Modal.vue'
-import FeatherIcon from './FeatherIcon.vue'
+import { computed } from 'vue'
+import {
+  Dialog as HDialog,
+  DialogOverlay,
+  DialogTitle,
+  TransitionChild,
+  TransitionRoot,
+} from '@headlessui/vue'
+import { Button, FeatherIcon } from 'frappe-ui'
 
 export default {
   name: 'Dialog',
-  props: ['title', 'modelValue', 'dismissable', 'full'],
+  props: {
+    modelValue: {
+      type: Boolean,
+      required: true,
+    },
+    options: {
+      type: Object,
+      default() {
+        return {}
+      },
+    },
+  },
   emits: ['update:modelValue', 'close'],
   components: {
-    Modal,
+    HDialog,
+    DialogOverlay,
+    DialogTitle,
+    TransitionChild,
+    TransitionRoot,
+    Button,
     FeatherIcon,
   },
-  methods: {
-    handleChange(value) {
-      this.$emit('update:modelValue', value)
-      if (value === false) {
-        this.$emit('close')
+  setup(props, { emit }) {
+    let open = computed({
+      get: () => props.modelValue,
+      set: (val) => {
+        emit('update:modelValue', val)
+        if (!val) {
+          emit('close')
+        }
+      },
+    })
+    return {
+      open,
+    }
+  },
+  computed: {
+    icon() {
+      if (!this.options?.icon) return null
+
+      let icon = this.options.icon
+      if (typeof icon === 'string') {
+        icon = {
+          name: icon,
+          type: 'info',
+        }
       }
+      return icon
     },
   },
 }

package/src/components/Dropdown.vue

@@ -1,220 +1,113 @@
 <template>
-  <Popover
-    :show-popup="isShown"
-    :hide-arrow="true"
-    :placement="right ? 'bottom-end' : 'bottom-start'"
-    @init="updateTargetWidth"
-  >
-    <template v-slot:target>
-      <div
-        class="h-full"
-        ref="target"
-        v-on-outside-click="() => (isShown = false)"
-      >
-        <slot
-          :toggleDropdown="toggleDropdown"
-          :highlightItemUp="highlightItemUp"
-          :highlightItemDown="highlightItemDown"
-          :selectHighlightedItem="selectHighlightedItem"
-        ></slot>
-      </div>
-    </template>
-    <template v-slot:content>
-      <div
-        class="z-10 rounded-md w-fullbg-white min-w-40"
-        :style="{ width: dropdownWidthFull ? targetWidth + 'px' : undefined }"
+  <Menu as="div" class="relative inline-block text-left">
+    <MenuButton>
+      <slot v-if="$slots.default"></slot>
+      <Button v-else v-bind="button">
+        {{ button ? button?.label || null : 'Options' }}
+      </Button>
+    </MenuButton>
+
+    <transition
+      enter-active-class="transition duration-100 ease-out"
+      enter-from-class="transform scale-95 opacity-0"
+      enter-to-class="transform scale-100 opacity-100"
+      leave-active-class="transition duration-75 ease-in"
+      leave-from-class="transform scale-100 opacity-100"
+      leave-to-class="transform scale-95 opacity-0"
+    >
+      <MenuItems
+        class="absolute z-10 mt-2 bg-white divide-y divide-gray-100 rounded-md shadow-lg min-w-40 ring-1 ring-black ring-opacity-5 focus:outline-none"
+        :class="
+          placement === 'left'
+            ? 'left-0 origin-top-left'
+            : 'right-0 origin-top-right'
+        "
       >
-        <div class="p-1 overflow-auto text-sm max-h-64">
-          <div v-if="isLoading" class="p-2 text-gray-600">
-            {{ _('Loading...') }}
+        <div v-for="group in groups" :key="group.key" class="px-1 py-1">
+          <div
+            v-if="group.group && !group.hideLabel"
+            class="px-2 py-1 text-xs font-semibold tracking-wider text-gray-500 uppercase"
+          >
+            {{ group.group }}
           </div>
-          <template v-else>
-            <div v-for="d in dropdownItems" :key="d.label">
-              <div
-                v-if="d.isGroup"
-                class="px-2 pt-2 pb-1 text-xs font-semibold tracking-wider text-gray-500 uppercase"
-              >
-                {{ d.label }}
-              </div>
-              <a
-                v-else
-                :ref="setItemRef"
-                class="block p-2 truncate rounded-md cursor-pointer first:mt-0"
-                :class="d.index === highlightedIndex ? 'bg-gray-100' : ''"
-                @mouseenter="highlightedIndex = d.index"
-                @mouseleave="highlightedIndex = -1"
-                @click="selectItem(d)"
-              >
-                <component :is="d.component" v-if="d.component" />
-                <template v-else>{{ d.label }}</template>
-              </a>
-            </div>
-          </template>
+          <MenuItem
+            v-for="item in group.items"
+            :key="item.label"
+            v-slot="{ active }"
+          >
+            <button
+              :class="[
+                active ? 'bg-gray-100' : 'text-gray-900',
+                'group flex rounded-md items-center w-full px-2 py-2 text-sm',
+              ]"
+              :onClick="item.onClick"
+            >
+              <FeatherIcon
+                v-if="item.icon"
+                :name="item.icon"
+                class="flex-shrink-0 w-4 h-4 mr-2 text-gray-500"
+                aria-hidden="true"
+              />
+              <span class="whitespace-nowrap">
+                {{ item.label }}
+              </span>
+            </button>
+          </MenuItem>
         </div>
-      </div>
-    </template>
-  </Popover>
+      </MenuItems>
+    </transition>
+  </Menu>
 </template>
 
 <script>
-import Popover from './Popover.vue'
-import onOutsideClick from '../directives/onOutsideClick'
+import { Menu, MenuButton, MenuItems, MenuItem } from '@headlessui/vue'
+import { FeatherIcon } from 'frappe-ui'
 
 export default {
-  name: 'Dropdown',
-  directives: {
-    onOutsideClick,
-  },
-  props: {
-    items: {
-      type: Array,
-      default: () => [],
-    },
-    groups: {
-      type: Array,
-      default: null,
-    },
-    right: {
-      type: Boolean,
-      default: false,
-    },
-    isLoading: {
-      type: Boolean,
-      default: false,
-    },
-    dropdownWidthFull: {
-      type: Boolean,
-      default: false,
-    },
-  },
+  name: 'NewDropdown',
+  props: ['button', 'options', 'placement'],
   components: {
-    Popover,
+    Menu,
+    MenuButton,
+    MenuItems,
+    MenuItem,
+    FeatherIcon,
   },
-  data() {
-    return {
-      targetWidth: undefined,
-      isShown: false,
-      itemRefs: [],
-      highlightedIndex: -1,
-    }
-  },
-  computed: {
-    sortedGroups() {
-      if (Array.isArray(this.groups)) {
-        return this.groups
+  methods: {
+    normalizeDropdownItem(option) {
+      let onClick = option.handler || null
+      if (!onClick && option.route && this.$router) {
+        onClick = () => this.$router.push(option.route)
       }
-      let groupNames = [
-        ...new Set(
-          this.items
-            .map((d) => d.group)
-            .filter(Boolean)
-            .sort()
-        ),
-      ]
-      if (groupNames.length > 0) {
-        return groupNames
+      return {
+        label: option.label,
+        icon: option.icon,
+        group: option.group,
+        onClick,
       }
-      return null
     },
+  },
+  computed: {
     dropdownItems() {
-      let items = this.items
+      return (this.options || [])
         .filter(Boolean)
-        .filter((d) => (d.condition ? d.condition() : true))
-
-      if (this.sortedGroups) {
-        let itemsByGroup = {}
-
-        for (let item of items) {
-          let group = item.group || ''
-          itemsByGroup[group] = itemsByGroup[group] || []
-          itemsByGroup[group].push(item)
-        }
-
-        let items = []
-        let i = 0
-        for (let group of this.sortedGroups) {
-          let groupItems = itemsByGroup[group]
-          groupItems = groupItems.map((d) => {
-            d.index = i
-            i++
-            return d
-          })
-          items = items.concat(
-            {
-              label: group,
-              isGroup: true,
-            },
-            groupItems
-          )
-        }
-
-        return items
-      }
-
-      return items.filter(Boolean).map((d, i) => {
-        d.index = i
-        return d
-      })
-    },
-  },
-  methods: {
-    selectItem(d) {
-      if (d.action) {
-        d.action()
-      }
+        .filter((option) => (option.condition ? option.condition() : true))
+        .map((option) => this.normalizeDropdownItem(option))
     },
-    toggleDropdown(flag) {
-      if (flag == null) {
-        this.isShown = !this.isShown
-      } else {
-        this.isShown = Boolean(flag)
-      }
-    },
-    selectHighlightedItem() {
-      if (![-1, this.items.length].includes(this.highlightedIndex)) {
-        // valid selection
-        let item = this.items[this.highlightedIndex]
-        this.selectItem(item)
-      }
-    },
-    highlightItemUp() {
-      this.highlightedIndex -= 1
-      if (this.highlightedIndex < 0) {
-        this.highlightedIndex = 0
-      }
-      this.$nextTick(() => {
-        let index = this.highlightedIndex
-        if (index !== 0) {
-          index -= 1
-        }
-        this.scrollToHighlighted()
-      })
-    },
-    highlightItemDown() {
-      this.highlightedIndex += 1
-      if (this.highlightedIndex > this.items.length) {
-        this.highlightedIndex = this.items.length
-      }
+    groups() {
+      let groups = this.options[0]?.group
+        ? this.options
+        : [{ group: '', items: this.options }]
 
-      this.$nextTick(() => {
-        this.scrollToHighlighted()
-      })
-    },
-    scrollToHighlighted() {
-      let highlightedElement = this.$refs.items[this.highlightedIndex]
-      highlightedElement &&
-        highlightedElement.scrollIntoView({ block: 'nearest' })
-    },
-    updateTargetWidth() {
-      this.$nextTick(() => {
-        this.targetWidth = this.$refs.target.clientWidth
+      return groups.map((group, i) => {
+        return {
+          key: i,
+          group: group.group,
+          hideLabel: group.hideLabel || false,
+          items: group.items.map((item) => this.normalizeDropdownItem(item)),
+        }
       })
     },
-    setItemRef(el) {
-      if (el) {
-        this.itemRefs.push(el)
-      }
-    },
   },
 }
 </script>

package/src/components/FileUploader.vue

@@ -0,0 +1,220 @@
+<template>
+  <div>
+    <input
+      ref="input"
+      type="file"
+      :accept="fileTypes"
+      class="hidden"
+      @change="onFileAdd"
+    />
+    <slot
+      v-bind="{
+        file,
+        uploading,
+        progress,
+        uploaded,
+        message,
+        error,
+        total,
+        success,
+        openFileSelector,
+      }"
+    />
+  </div>
+</template>
+
+<script>
+class FileUploader {
+  constructor() {
+    this.listeners = {}
+  }
+
+  on(event, handler) {
+    this.listeners[event] = this.listeners[event] || []
+    this.listeners[event].push(handler)
+  }
+
+  trigger(event, data) {
+    let handlers = this.listeners[event] || []
+    handlers.forEach((handler) => {
+      handler.call(this, data)
+    })
+  }
+
+  upload(file, options) {
+    return new Promise((resolve, reject) => {
+      let xhr = new XMLHttpRequest()
+      xhr.upload.addEventListener('loadstart', () => {
+        this.trigger('start')
+      })
+      xhr.upload.addEventListener('progress', (e) => {
+        if (e.lengthComputable) {
+          this.trigger('progress', {
+            uploaded: e.loaded,
+            total: e.total,
+          })
+        }
+      })
+      xhr.upload.addEventListener('load', () => {
+        this.trigger('finish')
+      })
+      xhr.addEventListener('error', () => {
+        this.trigger('error')
+        reject()
+      })
+      xhr.onreadystatechange = () => {
+        if (xhr.readyState == XMLHttpRequest.DONE) {
+          let error
+          if (xhr.status === 200) {
+            let r = null
+            try {
+              r = JSON.parse(xhr.responseText)
+            } catch (e) {
+              r = xhr.responseText
+            }
+            let out = r.message || r
+            resolve(out)
+          } else if (xhr.status === 403) {
+            error = JSON.parse(xhr.responseText)
+          } else {
+            this.failed = true
+            try {
+              error = JSON.parse(xhr.responseText)
+            } catch (e) {
+              // pass
+            }
+          }
+          if (error && error.exc) {
+            console.error(JSON.parse(error.exc)[0])
+          }
+          reject(error)
+        }
+      }
+      xhr.open('POST', '/api/method/upload_file', true)
+      xhr.setRequestHeader('Accept', 'application/json')
+      if (window.csrf_token && window.csrf_token !== '{{ csrf_token }}') {
+        xhr.setRequestHeader('X-Frappe-CSRF-Token', window.csrf_token)
+      }
+
+      let form_data = new FormData()
+      if (file) {
+        form_data.append('file', file, file.name)
+      }
+      form_data.append('is_private', +(options.private || 0))
+      form_data.append('folder', options.folder || 'Home')
+
+      if (options.file_url) {
+        form_data.append('file_url', options.file_url)
+      }
+
+      if (options.doctype && options.docname) {
+        form_data.append('doctype', options.doctype)
+        form_data.append('docname', options.docname)
+        if (options.fieldname) {
+          form_data.append('fieldname', options.fieldname)
+        }
+      }
+
+      if (options.method) {
+        form_data.append('method', options.method)
+      }
+
+      if (options.type) {
+        form_data.append('type', options.type)
+      }
+
+      xhr.send(form_data)
+    })
+  }
+}
+
+export default {
+  name: 'FileUploader',
+  props: ['fileTypes', 'uploadArgs', 'type', 'validateFile'],
+  data() {
+    return {
+      uploader: null,
+      uploading: false,
+      uploaded: 0,
+      error: null,
+      message: '',
+      total: 0,
+      file: null,
+      finishedUploading: false,
+    }
+  },
+  computed: {
+    progress() {
+      let value = Math.floor((this.uploaded / this.total) * 100)
+      return isNaN(value) ? 0 : value
+    },
+    success() {
+      return this.finishedUploading && !this.error
+    },
+  },
+  methods: {
+    openFileSelector() {
+      this.$refs['input'].click()
+    },
+    async onFileAdd(e) {
+      this.error = null
+      this.file = e.target.files[0]
+
+      if (this.file && this.validateFile) {
+        try {
+          let message = await this.validateFile(this.file)
+          if (message) {
+            this.error = message
+          }
+        } catch (error) {
+          this.error = error
+        }
+      }
+
+      if (!this.error) {
+        this.uploadFile(this.file)
+      }
+    },
+    async uploadFile(file) {
+      this.error = null
+      this.uploaded = 0
+      this.total = 0
+
+      this.uploader = new FileUploader()
+      this.uploader.on('start', () => {
+        this.uploading = true
+      })
+      this.uploader.on('progress', (data) => {
+        this.uploaded = data.uploaded
+        this.total = data.total
+      })
+      this.uploader.on('error', () => {
+        this.uploading = false
+        this.error = 'Error Uploading File'
+      })
+      this.uploader.on('finish', () => {
+        this.uploading = false
+        this.finishedUploading = true
+      })
+      this.uploader
+        .upload(file, this.uploadArgs || {})
+        .then((data) => {
+          this.$emit('success', data)
+        })
+        .catch((error) => {
+          this.uploading = false
+          let errorMessage = 'Error Uploading File'
+          if (error._server_messages) {
+            errorMessage = JSON.parse(
+              JSON.parse(error._server_messages)[0]
+            ).message
+          } else if (error.exc) {
+            errorMessage = JSON.parse(error.exc)[0].split('\n').slice(-2, -1)[0]
+          }
+          this.error = errorMessage
+          this.$emit('failure', error)
+        })
+    },
+  },
+}
+</script>

package/src/index.js

@@ -8,6 +8,7 @@ export { default as Dialog } from './components/Dialog.vue'
 export { default as Dropdown } from './components/Dropdown.vue'
 export { default as ErrorMessage } from './components/ErrorMessage.vue'
 export { default as FeatherIcon } from './components/FeatherIcon.vue'
+export { default as FileUploader } from './components/FileUploader.vue'
 export { default as GreenCheckIcon } from './components/GreenCheckIcon.vue'
 export { default as Input } from './components/Input.vue'
 export { default as Link } from './components/Link.vue'
@@ -23,7 +24,8 @@ export { default as SuccessMessage } from './components/SuccessMessage.vue'
 export { default as onOutsideClickDirective } from './directives/onOutsideClick.js'
 
 // utilities
-export { default as call } from './utils/call.js'
+export { default as call, createCall } from './utils/call.js'
+export { default as debounce } from './utils/debounce.js'
 
 // plugin
 export { default as FrappeUI } from './utils/plugin.js'

package/src/utils/call.js

@@ -1,4 +1,4 @@
-export default async function call(method, args, _headers) {
+export default async function call(method, args, options = {}) {
   if (!args) {
     args = {}
   }
@@ -9,7 +9,7 @@ export default async function call(method, args, _headers) {
       'Content-Type': 'application/json; charset=utf-8',
       'X-Frappe-Site-Name': window.location.hostname,
     },
-    _headers
+    options.headers || {}
   )
 
   if (window.csrf_token && window.csrf_token !== '{{ csrf_token }}') {
@@ -27,6 +27,20 @@ export default async function call(method, args, _headers) {
     if (data.docs || method === 'login') {
       return data
     }
+    if (data.exc) {
+      try {
+        console.groupCollapsed(method)
+        console.log(`method: ${method}`)
+        console.log(`params:`, args)
+        let warning = JSON.parse(data.exc)
+        for (let text of warning) {
+          console.log(text)
+        }
+        console.groupEnd()
+      } catch (e) {
+        console.warn('Error printing debug messages', e)
+      }
+    }
     return data.message
   } else {
     let response = await res.text()
@@ -49,6 +63,7 @@ export default async function call(method, args, _headers) {
     let e = new Error(errorParts.join('\n'))
     e.exc_type = error.exc_type
     e.exc = exception
+    e.status = res.status
     e.messages = error._server_messages
       ? JSON.parse(error._server_messages)
       : []
@@ -67,6 +82,16 @@ export default async function call(method, args, _headers) {
         : ['Internal Server Error']
     }
 
+    if (options.onError) {
+      options.onError({ response: res, status: res.status, error: e })
+    }
+
     throw e
   }
 }
+
+export function createCall(options) {
+  return function customCall(method, args) {
+    return call(method, args, options)
+  }
+}

package/src/utils/debounce.js

@@ -0,0 +1,15 @@
+export default function debounce(func, wait, immediate) {
+  var timeout
+  return function () {
+    var context = this,
+      args = arguments
+    var later = function () {
+      timeout = null
+      if (!immediate) func.apply(context, args)
+    }
+    var callNow = immediate && !timeout
+    clearTimeout(timeout)
+    timeout = setTimeout(later, wait)
+    if (callNow) func.apply(context, args)
+  }
+}

package/src/utils/plugin.js

@@ -11,10 +11,11 @@ let defaultOptions = {
 export default {
   install(app, options = {}) {
     options = Object.assign({}, defaultOptions, options)
-    options.resources && app.use(resources)
+    options.resources && app.use(resources, options.resources)
 
     if (options.call) {
-      app.config.globalProperties.$call = call
+      let callFunction = typeof options.call == 'function' ? options.call : call
+      app.config.globalProperties.$call = callFunction
     }
     if (options.socketio) {
       app.config.globalProperties.$socket = socket

package/src/utils/resources.js

@@ -1,11 +1,19 @@
-import call from './call'
-import { onMounted, reactive, watchEffect } from 'vue'
+import { call, debounce } from 'frappe-ui'
+import { reactive, watch } from 'vue'
 
 let cached = {}
 
-function createResource(options, vm) {
-  if (options.cache && cached[options.cache]) {
-    return cached[options.cache]
+function createResource(options, vm, getResource) {
+  let cacheKey = null
+  if (options.cache) {
+    cacheKey = options.cache
+    if (typeof cacheKey === 'string') {
+      cacheKey = [cacheKey]
+    }
+    cacheKey = JSON.stringify(cacheKey)
+    if (cached[cacheKey]) {
+      return cached[cacheKey]
+    }
   }
 
   if (typeof options == 'string') {
@@ -15,79 +23,149 @@ function createResource(options, vm) {
     }
   }
 
+  let resourceFetcher = getResource || call
+  let fetchFunction = options.debounce
+    ? debounce(fetch, options.debounce)
+    : fetch
+
   let out = reactive({
     data: options.initialData || null,
+    previousData: null,
     loading: false,
     fetched: false,
     error: null,
+    auto: options.auto,
     params: null,
-    fetch,
-    submit,
+    fetch: fetchFunction,
+    submit: fetchFunction,
+    update,
   })
 
-  if (typeof options.params == 'function') {
-    watchEffect(() => {
-      out.params = options.params(vm)
-      if (options.auto) {
-        fetch()
-      }
-    })
-  } else {
-    out.params = options.params
-  }
+  async function fetch(params) {
+    if (params instanceof Event) {
+      params = null
+    }
+    out.params = params || options.params
+    out.previousData = out.data ? JSON.parse(JSON.stringify(out.data)) : null
+    out.loading = true
 
-  onMounted(() => {
-    if (options.auto) {
-      fetch()
+    if (options.onFetch) {
+      options.onFetch.call(vm, out.params)
+    }
+
+    if (options.validate) {
+      let invalidMessage
+      try {
+        invalidMessage = await options.validate.call(vm, out.params)
+        if (invalidMessage && typeof invalidMessage == 'string') {
+          let error = new Error(invalidMessage)
+          handleError(error)
+          out.loading = false
+          return
+        }
+      } catch (error) {
+        handleError(error)
+        out.loading = false
+        return
+      }
     }
-  })
 
-  async function fetch() {
-    out.loading = true
-    out.data = options.initialData || null
     try {
-      let data = await call(options.method, out.params)
+      let data = await resourceFetcher(options.method, params || options.params)
       out.data = data
       out.fetched = true
       if (options.onSuccess) {
         options.onSuccess.call(vm, data)
       }
     } catch (error) {
-      out.error = error
-      if (options.onError) {
-        options.onError.call(vm, error)
-      }
+      handleError(error)
     }
     out.loading = false
   }
 
-  function submit(params) {
-    out.params = params
-    return fetch()
+  function update({ method, params, auto }) {
+    if (method && method !== options.method) {
+      options.method = method
+    }
+    if (params && params !== options.params) {
+      options.params = params
+    }
+    if (auto !== undefined && auto !== out.auto) {
+      out.auto = auto
+    }
+  }
+
+  function handleError(error) {
+    console.error(error)
+    if (out.previousData) {
+      out.data = out.previousData
+    }
+    out.error = error
+    if (options.onError) {
+      options.onError.call(vm, error)
+    }
   }
 
-  if (options.cache && !cached[options.cache]) {
-    cached[options.cache] = out
+  if (cacheKey && !cached[cacheKey]) {
+    cached[cacheKey] = out
   }
 
   return out
 }
 
-let Resources = {
+let createMixin = (mixinOptions) => ({
   created() {
     if (this.$options.resources) {
-      this._resources = {}
+      this._resources = reactive({})
       for (let key in this.$options.resources) {
-        this._resources[key] = createResource(
-          this.$options.resources[key],
-          this
-        )
+        let options = this.$options.resources[key]
+
+        if (typeof options == 'function') {
+          watch(
+            () => options.call(this),
+            (updatedOptions, oldVal) => {
+              let changed =
+                !oldVal ||
+                JSON.stringify(updatedOptions) !== JSON.stringify(oldVal)
+
+              if (!changed) return
+
+              let resource = this._resources[key]
+              if (!resource) {
+                resource = createResource(
+                  updatedOptions,
+                  this,
+                  mixinOptions.getResource
+                )
+                this._resources[key] = resource
+              } else {
+                resource.update(updatedOptions)
+              }
+              if (resource.auto) {
+                resource.fetch()
+              }
+            },
+            {
+              immediate: true,
+            }
+          )
+        } else {
+          let resource = createResource(options, this, mixinOptions.getResource)
+          this._resources[key] = resource
+          if (resource.auto) {
+            resource.fetch()
+          }
+        }
       }
     }
   },
   methods: {
-    $resource(key) {
-      return this._resources[key]
+    $refetchResource(cacheKey) {
+      let key = JSON.stringify(cacheKey)
+      if (cached[key]) {
+        let resource = cached[key]
+        resource.fetch()
+      }
     },
   },
   computed: {
@@ -95,10 +173,11 @@ let Resources = {
       return this._resources
     },
   },
-}
+})
 
 export default {
   install(app, options) {
-    app.mixin(Resources)
+    let resourceMixin = createMixin(options)
+    app.mixin(resourceMixin)
   },
 }

package/src/utils/tailwind.config.js

@@ -1,5 +1,3 @@
-const plugin = require('tailwindcss/plugin')
-
 module.exports = {
   theme: {
     extend: {
@@ -88,7 +86,7 @@ module.exports = {
   plugins: [
     require('@tailwindcss/forms'),
     require('@tailwindcss/typography'),
-    plugin(function ({ addUtilities, theme }) {
+    require('tailwindcss/plugin')(function ({ addUtilities, theme }) {
       addUtilities({
         '.bg-gradient-blue': {
           'background-image': `linear-gradient(180deg,#2c9af1 0%, ${theme(