frappe-ui 0.0.12 → 0.0.16

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "0.0.12",
+  "version": "0.0.16",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.js",
   "scripts": {
@@ -17,7 +17,7 @@
   "author": "Frappe Technologies Pvt. Ltd.",
   "license": "MIT",
   "dependencies": {
-    "@headlessui/vue": "^1.4.3",
+    "@headlessui/vue": "^1.5.0",
     "@popperjs/core": "^2.11.2",
     "@tailwindcss/forms": "^0.4.0",
     "@tailwindcss/typography": "^0.5.0",

package/src/components/Avatar.vue

@@ -44,7 +44,7 @@ export default {
   computed: {
     styleClasses() {
       const sizeClasses = {
-        sm: 'w-4 h-4',
+        sm: 'w-5 h-5',
         md: 'w-8 h-8',
         lg: 'w-12 h-12',
       }[this.size]

package/src/components/Dropdown.vue

@@ -86,25 +86,25 @@ export default {
         onClick,
       }
     },
-  },
-  computed: {
-    dropdownItems() {
-      return (this.options || [])
+    filterOptions(options) {
+      return (options || [])
         .filter(Boolean)
         .filter((option) => (option.condition ? option.condition() : true))
         .map((option) => this.normalizeDropdownItem(option))
     },
+  },
+  computed: {
     groups() {
       let groups = this.options[0]?.group
         ? this.options
-        : [{ group: '', items: this.options }]
+        : [{ group: '', items: this.filterOptions(this.options) }]
 
       return groups.map((group, i) => {
         return {
           key: i,
           group: group.group,
           hideLabel: group.hideLabel || false,
-          items: group.items.map((item) => this.normalizeDropdownItem(item)),
+          items: this.filterOptions(group.items),
         }
       })
     },

package/src/components/Input.vue

@@ -1,5 +1,5 @@
 <template>
-  <label :class="type == 'checkbox' ? 'flex' : 'block'">
+  <label :class="[type == 'checkbox' ? 'flex' : 'block', $attrs.class]">
     <span
       v-if="label && type != 'checkbox'"
       class="block mb-2 text-sm leading-4 text-gray-700"
@@ -68,6 +68,7 @@ import { debounce } from 'frappe-ui'
 export default {
   name: 'Input',
   inheritAttrs: false,
+  expose: ['getInputValue'],
   props: {
     label: {
       type: String,
@@ -122,9 +123,10 @@ export default {
       this.$refs.input.blur()
     },
     getInputValue(e) {
-      let value = e.target.value
+      let $input = e ? e.target : this.$refs.input
+      let value = $input.value
       if (this.type == 'checkbox') {
-        value = e.target.checked
+        value = $input.checked
       }
       return value
     },
@@ -134,7 +136,7 @@ export default {
       if ('value' in this.$attrs) {
         return this.$attrs.value
       }
-      return this.modelValue
+      return this.modelValue || null
     },
     inputAttributes() {
       let onInput = (e) => {

package/src/components/Popover.vue

@@ -1,17 +1,29 @@
 <template>
   <div ref="reference">
-    <div class="h-full">
-      <slot name="target" :togglePopover="togglePopover"></slot>
+    <div
+      class="h-full"
+      ref="target"
+      @click="updatePosition"
+      @focusin="updatePosition"
+      @keydown="updatePosition"
+    >
+      <slot
+        name="target"
+        v-bind="{ togglePopover, updatePosition, open, close }"
+      ></slot>
     </div>
-    <teleport to="#popovers">
+    <teleport to="#frappeui-popper-root">
       <div
         ref="popover"
         :class="popoverClass"
-        class="bg-white rounded-md border shadow-md popover-container relative"
-        v-show="isOpen"
+        class="relative z-[100] popover-container"
+        :style="{ minWidth: targetWidth ? targetWidth + 'px' : null }"
       >
         <div v-if="!hideArrow" class="popover-arrow" ref="popover-arrow"></div>
-        <slot name="content" :togglePopover="togglePopover"></slot>
+        <slot
+          name="content"
+          v-bind="{ togglePopover, updatePosition, open, close }"
+        ></slot>
       </div>
     </teleport>
   </div>
@@ -25,9 +37,9 @@ export default {
   props: {
     hideArrow: {
       type: Boolean,
-      default: false,
+      default: true,
     },
-    showPopup: {
+    show: {
       default: null,
     },
     right: Boolean,
@@ -39,18 +51,28 @@ export default {
   },
   emits: ['init', 'open', 'close'],
   watch: {
-    showPopup(value) {
-      if (value === true) {
-        this.open()
-      }
-      if (value === false) {
-        this.close()
-      }
+    show: {
+      immediate: true,
+      handler(val) {
+        if (val) {
+          this.open()
+        } else {
+          this.close()
+        }
+      },
     },
   },
   data() {
     return {
       isOpen: false,
+      targetWidth: null,
+    }
+  },
+  created() {
+    if (!document.getElementById('frappeui-popper-root')) {
+      const root = document.createElement('div')
+      root.id = 'frappeui-popper-root'
+      document.body.appendChild(root)
     }
   },
   mounted() {
@@ -67,6 +89,9 @@ export default {
     if (this.show == null) {
       document.addEventListener('click', this.listener)
     }
+    this.$nextTick(() => {
+      this.targetWidth = this.$refs['target'].clientWidth
+    })
   },
   beforeDestroy() {
     this.popper && this.popper.destroy()
@@ -95,10 +120,13 @@ export default {
             : [],
         })
       } else {
-        this.popper.update()
+        this.updatePosition()
       }
       this.$emit('init')
     },
+    updatePosition() {
+      this.popper && this.popper.update()
+    },
     togglePopover(flag) {
       if (flag == null) {
         flag = !this.isOpen
@@ -115,9 +143,7 @@ export default {
         return
       }
       this.isOpen = true
-      this.$nextTick(() => {
-        this.setupPopper()
-      })
+      this.$nextTick(() => this.setupPopper())
       this.$emit('open')
     },
     close() {

package/src/components/TextEditor/Menu.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="inline-flex px-1 py-1 bg-white">
     <div class="inline-flex items-center gap-1">
-      <template v-for="button in menuButtons" :key="button.label">
+      <template v-for="button in buttons" :key="button.label">
         <div
           class="border-l w-[2px] h-4"
           v-if="button.type === 'separator'"
@@ -9,8 +9,8 @@
         <button
           v-else
           class="flex p-1 text-gray-800 transition-colors rounded"
-          :class="button.isActive() ? 'bg-gray-100' : 'hover:bg-gray-100'"
-          @click="button.action"
+          :class="button.isActive(editor) ? 'bg-gray-100' : 'hover:bg-gray-100'"
+          @click="() => button.action(editor)"
           :title="button.label"
         >
           <FeatherIcon v-if="button.icon" :name="button.icon" class="w-4" />
@@ -26,96 +26,7 @@
 import { FeatherIcon } from 'frappe-ui'
 export default {
   name: 'TipTapMenu',
-  props: ['editor'],
+  props: ['editor', 'buttons'],
   components: { FeatherIcon },
-  computed: {
-    menuButtons() {
-      return [
-        {
-          label: 'Paragraph',
-          icon: 'type',
-          action: () => this.editor.chain().focus().setParagraph().run(),
-          isActive: () => this.editor.isActive('paragraph'),
-        },
-        {
-          label: 'Heading 2',
-          text: 'H2',
-          action: () =>
-            this.editor.chain().focus().toggleHeading({ level: 2 }).run(),
-          isActive: () => this.editor.isActive('heading', { level: 2 }),
-        },
-        {
-          label: 'Heading 3',
-          text: 'H3',
-          action: () =>
-            this.editor.chain().focus().toggleHeading({ level: 3 }).run(),
-          isActive: () => this.editor.isActive('heading', { level: 3 }),
-        },
-        {
-          type: 'separator',
-        },
-        {
-          label: 'Bold',
-          icon: 'bold',
-          action: () => this.editor.chain().focus().toggleBold().run(),
-          isActive: () => this.editor.isActive('bold'),
-        },
-        {
-          label: 'Italic',
-          icon: 'italic',
-          action: () => this.editor.chain().focus().toggleItalic().run(),
-          isActive: () => this.editor.isActive('italic'),
-        },
-        {
-          type: 'separator',
-        },
-        {
-          label: 'Bullet List',
-          icon: 'list',
-          action: () => this.editor.chain().focus().toggleBulletList().run(),
-          isActive: () => this.editor.isActive('bulletList'),
-        },
-        {
-          label: 'Numbered List',
-          text: '1.',
-          action: () => this.editor.chain().focus().toggleOrderedList().run(),
-          isActive: () => this.editor.isActive('orderedList'),
-        },
-        {
-          label: 'Blockquote',
-          icon: 'chevron-right',
-          action: () => this.editor.chain().focus().toggleBlockquote().run(),
-          isActive: () => this.editor.isActive('blockquote'),
-        },
-        {
-          label: 'Code',
-          icon: 'code',
-          action: () => this.editor.chain().focus().toggleCodeBlock().run(),
-          isActive: () => this.editor.isActive('codeBlock'),
-        },
-        {
-          label: 'Horizontal Rule',
-          icon: 'minus',
-          action: () => this.editor.chain().focus().setHorizontalRule().run(),
-          isActive: () => false,
-        },
-        {
-          type: 'separator',
-        },
-        {
-          label: 'Undo',
-          icon: 'corner-up-left',
-          action: () => this.editor.chain().focus().undo().run(),
-          isActive: () => false,
-        },
-        {
-          label: 'Redo',
-          icon: 'corner-up-right',
-          action: () => this.editor.chain().focus().redo().run(),
-          isActive: () => false,
-        },
-      ]
-    },
-  },
 }
 </script>

package/src/components/TextEditor/TextEditor.vue

@@ -1,7 +1,7 @@
 <template>
-  <div class="relative w-full" :class="{ 'pt-6': showMenu }" v-if="editor">
+  <div class="relative w-full" :class="$attrs.class" v-if="editor">
     <BubbleMenu
-      v-if="showBubbleMenu"
+      v-if="bubbleMenuButtons"
       class="bubble-menu"
       :tippy-options="{ duration: 100 }"
       :editor="editor"
@@ -9,27 +9,48 @@
       <Menu
         :editor="editor"
         class="border border-gray-100 rounded-md shadow-sm"
+        :buttons="bubbleMenuButtons"
       />
     </BubbleMenu>
 
     <Menu
-      v-if="showMenu"
-      class="absolute top-0 left-0 right-0 border rounded-t-lg border-gray-50 border-b-gray-100"
+      v-if="fixedMenuButtons"
+      class="w-full border rounded-t-lg border-gray-50 border-b-gray-100"
       :editor="editor"
+      :buttons="fixedMenuButtons"
     />
-    <editor-content
+
+    <FloatingMenu
+      v-if="floatingMenuButtons"
+      :tippy-options="{ duration: 100 }"
       :editor="editor"
-      :class="$attrs.class || 'prose-sm prose'"
-    />
+      class="flex"
+    >
+      <button
+        v-for="button in floatingMenuButtons"
+        :key="button.label"
+        class="flex p-1 text-gray-800 transition-colors rounded"
+        :class="button.isActive(editor) ? 'bg-gray-100' : 'hover:bg-gray-100'"
+        @click="() => button.action(editor)"
+        :title="button.label"
+      >
+        <FeatherIcon v-if="button.icon" :name="button.icon" class="w-4" />
+        <span class="inline-block h-4 text-sm leading-4 min-w-[1rem]" v-else>
+          {{ button.text }}
+        </span>
+      </button>
+    </FloatingMenu>
+    <editor-content :editor="editor" />
   </div>
 </template>
 
 <script>
-import { Editor, EditorContent, BubbleMenu } from '@tiptap/vue-3'
+import { Editor, EditorContent, BubbleMenu, FloatingMenu } from '@tiptap/vue-3'
 import StarterKit from '@tiptap/starter-kit'
 import Placeholder from '@tiptap/extension-placeholder'
 import Image from '@tiptap/extension-image'
 import Menu from './Menu.vue'
+import commands from './commands'
 
 export default {
   name: 'TextEditor',
@@ -37,14 +58,17 @@ export default {
   components: {
     EditorContent,
     BubbleMenu,
+    FloatingMenu,
     Menu,
   },
   props: [
     'content',
     'placeholder',
     'editorClass',
-    'showMenu',
-    'showBubbleMenu',
+    'fixedMenu',
+    'bubbleMenu',
+    'floatingMenu',
+    'extensions',
   ],
   emits: ['change'],
   expose: ['editor'],
@@ -58,7 +82,7 @@ export default {
       content: this.content || '<p></p>',
       editorProps: {
         attributes: {
-          class: ['prose-p:my-1', this.editorClass].join(' '),
+          class: ['prose prose-sm prose-p:my-1', this.editorClass].join(' '),
         },
       },
       extensions: [
@@ -67,6 +91,7 @@ export default {
         Placeholder.configure({
           placeholder: this.placeholder || 'Write something...',
         }),
+        ...(this.extensions || []),
       ],
       onUpdate: ({ editor }) => {
         this.$emit('change', editor.getHTML())
@@ -76,6 +101,85 @@ export default {
   beforeUnmount() {
     this.editor.destroy()
   },
+  computed: {
+    fixedMenuButtons() {
+      if (!this.fixedMenu) return false
+
+      let buttons
+      if (Array.isArray(this.fixedMenu)) {
+        buttons = this.fixedMenu
+      } else {
+        buttons = [
+          'Paragraph',
+          'Heading 2',
+          'Heading 3',
+          'Separator',
+          'Bold',
+          'Italic',
+          'Separator',
+          'Bullet List',
+          'Numbered List',
+          'Blockquote',
+          'Code',
+          'Horizontal Rule',
+          'Separator',
+          'Undo',
+          'Redo',
+        ]
+      }
+      return buttons.map(createEditorButton)
+    },
+    bubbleMenuButtons() {
+      if (!this.bubbleMenu) return false
+
+      let buttons
+      if (Array.isArray(this.bubbleMenu)) {
+        buttons = this.bubbleMenu
+      } else {
+        buttons = [
+          'Paragraph',
+          'Heading 2',
+          'Heading 3',
+          'Separator',
+          'Bold',
+          'Italic',
+          'Separator',
+          'Bullet List',
+          'Numbered List',
+          'Blockquote',
+          'Code',
+        ]
+      }
+      return buttons.map(createEditorButton)
+    },
+    floatingMenuButtons() {
+      if (!this.floatingMenu) return false
+
+      let buttons
+      if (Array.isArray(this.floatingMenu)) {
+        buttons = this.floatingMenu
+      } else {
+        buttons = [
+          'Paragraph',
+          'Heading 2',
+          'Heading 3',
+          'Bullet List',
+          'Numbered List',
+          'Blockquote',
+          'Code',
+          'Horizontal Rule',
+        ]
+      }
+      return buttons.map(createEditorButton)
+    },
+  },
+}
+
+function createEditorButton(option) {
+  if (typeof option == 'object') {
+    return option
+  }
+  return commands[option]
 }
 </script>
 <style>

package/src/components/TextEditor/commands.js

@@ -0,0 +1,79 @@
+export default {
+  Paragraph: {
+    label: 'Paragraph',
+    icon: 'type',
+    action: (editor) => editor.chain().focus().setParagraph().run(),
+    isActive: (editor) => editor.isActive('paragraph'),
+  },
+  'Heading 2': {
+    label: 'Heading 2',
+    text: 'H2',
+    action: (editor) =>
+      editor.chain().focus().toggleHeading({ level: 2 }).run(),
+    isActive: (editor) => editor.isActive('heading', { level: 2 }),
+  },
+  'Heading 3': {
+    label: 'Heading 3',
+    text: 'H3',
+    action: (editor) =>
+      editor.chain().focus().toggleHeading({ level: 3 }).run(),
+    isActive: (editor) => editor.isActive('heading', { level: 3 }),
+  },
+  Bold: {
+    label: 'Bold',
+    icon: 'bold',
+    action: (editor) => editor.chain().focus().toggleBold().run(),
+    isActive: (editor) => editor.isActive('bold'),
+  },
+  Italic: {
+    label: 'Italic',
+    icon: 'italic',
+    action: (editor) => editor.chain().focus().toggleItalic().run(),
+    isActive: (editor) => editor.isActive('italic'),
+  },
+  'Bullet List': {
+    label: 'Bullet List',
+    icon: 'list',
+    action: (editor) => editor.chain().focus().toggleBulletList().run(),
+    isActive: (editor) => editor.isActive('bulletList'),
+  },
+  'Numbered List': {
+    label: 'Numbered List',
+    text: '1.',
+    action: (editor) => editor.chain().focus().toggleOrderedList().run(),
+    isActive: (editor) => editor.isActive('orderedList'),
+  },
+  Blockquote: {
+    label: 'Blockquote',
+    icon: 'chevron-right',
+    action: (editor) => editor.chain().focus().toggleBlockquote().run(),
+    isActive: (editor) => editor.isActive('blockquote'),
+  },
+  Code: {
+    label: 'Code',
+    icon: 'code',
+    action: (editor) => editor.chain().focus().toggleCodeBlock().run(),
+    isActive: (editor) => editor.isActive('codeBlock'),
+  },
+  'Horizontal Rule': {
+    label: 'Horizontal Rule',
+    icon: 'minus',
+    action: (editor) => editor.chain().focus().setHorizontalRule().run(),
+    isActive: (editor) => false,
+  },
+  Undo: {
+    label: 'Undo',
+    icon: 'corner-up-left',
+    action: (editor) => editor.chain().focus().undo().run(),
+    isActive: (editor) => false,
+  },
+  Redo: {
+    label: 'Redo',
+    icon: 'corner-up-right',
+    action: (editor) => editor.chain().focus().redo().run(),
+    isActive: (editor) => false,
+  },
+  Separator: {
+    type: 'separator',
+  },
+}

package/src/components/Toast.vue

@@ -0,0 +1,135 @@
+<template>
+  <teleport to="#frappeui-toast-root">
+    <transition :name="position.includes('top') ? 'toast-top' : 'toast-bottom'">
+      <div
+        v-if="shown"
+        :style="style"
+        :class="[
+          'absolute transition duration-200 ease-out m-4 pointer-events-auto',
+          position.includes('center') ? '-translate-x-1/2' : '',
+        ]"
+      >
+        <div
+          class="px-2.5 py-2 bg-white border rounded-lg shadow-md min-w-[15rem]"
+        >
+          <div class="flex items-center justify-between">
+            <div class="text-lg">
+              <slot> Toast Content </slot>
+            </div>
+            <div>
+              <slot name="actions">
+                <Button icon="x" @click="shown = false" />
+              </slot>
+            </div>
+          </div>
+        </div>
+      </div>
+    </transition>
+  </teleport>
+</template>
+<script>
+const positions = [
+  'top-right',
+  'top-center',
+  'top-left',
+  'bottom-right',
+  'bottom-center',
+  'bottom-left',
+]
+
+export default {
+  name: 'Toast',
+  props: {
+    position: {
+      type: String,
+      default: 'top-right',
+    },
+    text: {
+      type: String,
+    },
+  },
+  created() {
+    if (!document.getElementById('frappeui-toast-root')) {
+      const root = document.createElement('div')
+      root.id = 'frappeui-toast-root'
+      root.style.position = 'fixed'
+      root.style.top = '16px'
+      root.style.right = '16px'
+      root.style.bottom = '16px'
+      root.style.left = '16px'
+      root.style.zIndex = '9999'
+      root.style.pointerEvents = 'none'
+      document.body.appendChild(root)
+    }
+  },
+  mounted() {
+    this.shown = true
+    // setTimeout(() => {
+    //   this.shown = false
+    // }, 3000)
+  },
+  data() {
+    return {
+      shown: false,
+    }
+  },
+  computed: {
+    style() {
+      let style = {}
+      if (this.position.includes('top')) {
+        style.top = 0
+      }
+      if (this.position.includes('bottom')) {
+        style.bottom = 0
+      }
+      if (this.position.includes('right')) {
+        style.right = 0
+      }
+      if (this.position.includes('left')) {
+        style.left = 0
+      }
+      if (this.position.includes('center')) {
+        style.left = '50%'
+        // style.transform = 'translateX(-50%)'
+      }
+      return style
+    },
+    transitionProps() {
+      let props = {
+        enterActiveClass: 'transition duration-200 ease-out',
+        enterFromClass: 'opacity-0',
+        enterToClass: 'translate-y-0 opacity-100',
+        leaveActiveClass: 'transition duration-100 ease-in',
+        leaveFromClass: 'scale-100 translate-y-0 opacity-100',
+        leaveToClass: 'scale-75 translate-y-4 opacity-0',
+      }
+
+      if (this.position.includes('top')) {
+        props.enterFromClass += ' -translate-y-12'
+      }
+      if (this.position.includes('bottom')) {
+        props.enterFromClass += ' translate-y-12'
+      }
+      return props
+    },
+  },
+}
+</script>
+<style>
+.toast-top-enter-active,
+.toast-bottom-enter-active {
+  transition: all 200ms ease-out;
+}
+.toast-top-leave-active,
+.toast-bottom-leave-active {
+  transition: all 100ms ease-in;
+}
+.toast-top-enter-from {
+  opacity: 0;
+  transform: translateY(0);
+}
+.toast-top-enter-to {
+  opacity: 1;
+  transform: translateY(0);
+}
+</style>

package/src/utils/resources.js

@@ -41,7 +41,7 @@ export function createResource(options, vm, getResource) {
     setData,
   })
 
-  async function fetch(params) {
+  async function fetch(params, tempOptions = {}) {
     if (params instanceof Event) {
       params = null
     }
@@ -57,18 +57,22 @@ export function createResource(options, vm, getResource) {
       options.onFetch.call(vm, out.params)
     }
 
-    if (options.validate) {
+    let validateFunction = tempOptions.validate || options.validate
+    let errorFunction = tempOptions.onError || options.onError
+    let successFunction = tempOptions.onSuccess || options.onSuccess
+
+    if (validateFunction) {
       let invalidMessage
       try {
-        invalidMessage = await options.validate.call(vm, out.params)
+        invalidMessage = await validateFunction.call(vm, out.params)
         if (invalidMessage && typeof invalidMessage == 'string') {
           let error = new Error(invalidMessage)
-          handleError(error)
+          handleError(error, errorFunction)
           out.loading = false
           return
         }
       } catch (error) {
-        handleError(error)
+        handleError(error, errorFunction)
         out.loading = false
         return
       }
@@ -78,11 +82,11 @@ export function createResource(options, vm, getResource) {
       let data = await resourceFetcher(options.method, params || options.params)
       out.data = data
       out.fetched = true
-      if (options.onSuccess) {
-        options.onSuccess.call(vm, data)
+      if (successFunction) {
+        successFunction.call(vm, data)
       }
     } catch (error) {
-      handleError(error)
+      handleError(error, errorFunction)
     }
     out.loading = false
   }
@@ -109,14 +113,14 @@ export function createResource(options, vm, getResource) {
     out.auto = options.auto
   }
 
-  function handleError(error) {
+  function handleError(error, errorFunction) {
     console.error(error)
     if (out.previousData) {
       out.data = out.previousData
     }
     out.error = error
-    if (options.onError) {
-      options.onError.call(vm, error)
+    if (errorFunction) {
+      errorFunction.call(vm, error)
     }
   }
 
@@ -138,6 +142,8 @@ export function createResource(options, vm, getResource) {
 }
 
 export function createDocumentResource(options, vm) {
+  if (!(options.doctype && options.name)) return
+
   let cacheKey = getCacheKey([options.doctype, options.name])
   if (documentCache[cacheKey]) {
     return documentCache[cacheKey]
@@ -153,7 +159,7 @@ export function createDocumentResource(options, vm) {
       }
     },
     onSuccess(data) {
-      out.doc = data
+      out.doc = postprocess(data)
     },
   }
 
@@ -170,7 +176,7 @@ export function createDocumentResource(options, vm) {
         }
       },
       onSuccess(data) {
-        out.doc = data
+        out.doc = postprocess(data)
       },
     }),
     setValue: createResource(setValueOptions),
@@ -191,14 +197,54 @@ export function createDocumentResource(options, vm) {
       },
     }),
     update,
+    reload,
   })
 
+  for (let method in options.whitelistedMethods) {
+    let methodName = options.whitelistedMethods[method]
+    out[method] = createResource({
+      method: 'run_doc_method',
+      makeParams(values) {
+        return {
+          dt: out.doctype,
+          dn: out.name,
+          method: methodName,
+          args: JSON.stringify(values),
+        }
+      },
+      onSuccess(data) {
+        if (data.docs) {
+          for (let doc of data.docs) {
+            if (doc.doctype === out.doctype && doc.name === out.name) {
+              out.doc = postprocess(doc)
+              break
+            }
+          }
+        }
+      },
+    })
+  }
+
   function update(updatedOptions) {
     out.doctype = updatedOptions.doctype
     out.name = updatedOptions.name
     out.get.fetch()
   }
 
+  function reload() {
+    out.get.fetch()
+  }
+
+  function postprocess(doc) {
+    if (options.postprocess) {
+      let returnValue = options.postprocess(doc)
+      if (typeof returnValue === 'object') {
+        return returnValue
+      }
+    }
+    return doc
+  }
+
   // fetch the doc
   out.get.fetch()
   // cache
@@ -206,10 +252,64 @@ export function createDocumentResource(options, vm) {
   return out
 }
 
+function createListResource(options, vm, getResource) {
+  if (!options.doctype) return
+
+  let out = reactive({
+    doctype: options.doctype,
+    fields: options.fields,
+    filters: options.filters,
+    data: null,
+    list: createResource({
+      method: 'frappe.client.get_list',
+      makeParams() {
+        return {
+          doctype: out.doctype,
+          fields: out.fields,
+          filters: out.filters,
+        }
+      },
+      onSuccess(data) {
+        out.data = data
+      },
+    }),
+    insert: createResource({
+      method: 'frappe.client.insert',
+      makeParams(values) {
+        return {
+          doc: {
+            doctype: out.doctype,
+            ...values,
+          },
+        }
+      },
+      onSuccess() {
+        out.list.fetch()
+      },
+    }),
+    update,
+  })
+
+  function update(updatedOptions) {
+    out.doctype = updatedOptions.doctype
+    out.fields = updatedOptions.fields
+    out.filters = updatedOptions.filters
+    out.list.fetch()
+  }
+
+  // fetch list
+  out.list.fetch()
+
+  return out
+}
+
 function createResourceForOptions(options, vm, getResource) {
   if (options.type === 'document') {
     return createDocumentResource(options, vm, getResource)
   }
+  if (options.type === 'list') {
+    return createListResource(options, vm, getResource)
+  }
   return createResource(options, vm, getResource)
 }
 
@@ -248,7 +348,7 @@ let createMixin = (mixinOptions) => ({
               } else {
                 resource.update(updatedOptions)
               }
-              if (resource.auto) {
+              if (resource && resource.auto) {
                 resource.fetch()
               }
             },