frappe-ui 0.0.45 → 0.0.48

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "frappe-ui",
-  "version": "0.0.45",
+  "version": "0.0.48",
   "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"
+    "prettier": "npx prettier -w ./src",
+    "prepare": "husky install"
   },
   "files": [
     "src"
@@ -21,16 +22,26 @@
     "@popperjs/core": "^2.11.2",
     "@tailwindcss/forms": "^0.4.0",
     "@tailwindcss/typography": "^0.5.0",
-    "@tiptap/extension-image": "^2.0.0-beta.27",
-    "@tiptap/extension-link": "^2.0.0-beta.37",
-    "@tiptap/extension-placeholder": "^2.0.0-beta.48",
+    "@tiptap/extension-image": "^2.0.0-beta.30",
+    "@tiptap/extension-link": "^2.0.0-beta.43",
+    "@tiptap/extension-mention": "^2.0.0-beta.102",
+    "@tiptap/extension-placeholder": "^2.0.0-beta.53",
     "@tiptap/extension-text-align": "^2.0.0-beta.31",
-    "@tiptap/starter-kit": "^2.0.0-beta.183",
-    "@tiptap/vue-3": "^2.0.0-beta.90",
+    "@tiptap/starter-kit": "^2.0.0-beta.191",
+    "@tiptap/vue-3": "^2.0.0-beta.96",
     "autoprefixer": "^10.4.2",
     "feather-icons": "^4.28.0",
     "postcss": "^8.4.5",
     "socket.io-client": "^4.5.1",
-    "tailwindcss": "^3.0.12"
+    "tailwindcss": "^3.0.12",
+    "tippy.js": "^6.3.7"
+  },
+  "devDependencies": {
+    "husky": ">=6",
+    "lint-staged": ">=10",
+    "prettier": "2.7.1"
+  },
+  "lint-staged": {
+    "*.{js,css,md,vue}": "prettier --write"
   }
 }

package/src/components/Autocomplete.vue

@@ -1,31 +1,23 @@
 <template>
-  <Combobox v-model="selectedValue" nullable>
+  <Combobox v-model="selectedValue" nullable v-slot="{ open: isComboboxOpen }">
     <Popover class="w-full">
       <template #target="{ open: openPopover }">
-        <div class="relative w-full">
-          <ComboboxInput
-            :displayValue="displayValue"
-            class="w-full placeholder-gray-500 form-input"
-            type="text"
-            @change="
-              (e) => {
-                query = e.target.value
-                openPopover()
-              }
-            "
-            @focus="
+        <div class="w-full">
+          <ComboboxButton
+            class="flex items-center justify-between w-full py-1.5 pl-3 pr-2 rounded-md bg-gray-100"
+            :class="{ 'rounded-b-none': isComboboxOpen }"
+            @click="
               () => {
                 openPopover()
-                toggleCombobox(true)
               }
             "
-            @keydown="toggleCombobox(true)"
-            autocomplete="off"
-            v-bind="$attrs"
-          />
-          <ComboboxButton
-            class="absolute inset-y-0 right-0 flex items-center pr-2"
           >
+            <span class="text-base" v-if="selectedValue">
+              {{ displayValue(selectedValue) }}
+            </span>
+            <span class="text-base text-gray-500" v-else>
+              {{ placeholder || '' }}
+            </span>
             <FeatherIcon
               name="chevron-down"
               class="w-4 h-4 text-gray-500"
@@ -36,12 +28,27 @@
       </template>
       <template #body>
         <ComboboxOptions
-          :class="[
-            'p-1.5 bg-white rounded-md shadow-md rounded-t-none max-h-[11rem] overflow-y-auto',
-            { hidden: !showCombobox },
-          ]"
-          :static="true"
+          class="px-1.5 pb-1.5 bg-white rounded-md shadow-md rounded-t-none max-h-[11rem] overflow-y-auto"
+          static
+          v-show="isComboboxOpen"
         >
+          <div
+            class="flex items-st items-stretch space-x-1.5 sticky top-0 pt-1.5 mb-1.5 bg-white"
+          >
+            <ComboboxInput
+              class="w-full placeholder-gray-500 form-input"
+              type="text"
+              @change="
+                (e) => {
+                  query = e.target.value
+                }
+              "
+              :value="query"
+              autocomplete="off"
+              placeholder="Search by keyword"
+            />
+            <Button icon="x" @click="selectedValue = null" />
+          </div>
           <ComboboxOption
             as="template"
             v-for="option in filteredOptions"
@@ -81,8 +88,7 @@ import Popover from './Popover.vue'
 
 export default {
   name: 'Autocomplete',
-  inheritAttrs: false,
-  props: ['modelValue', 'options'],
+  props: ['modelValue', 'options', 'placeholder'],
   emits: ['update:modelValue', 'change'],
   components: {
     Popover,
@@ -94,7 +100,6 @@ export default {
   },
   data() {
     return {
-      showCombobox: false,
       query: '',
     }
   },
@@ -107,7 +112,7 @@ export default {
         return this.valuePropPassed ? this.$attrs.value : this.modelValue
       },
       set(val) {
-        setTimeout(() => this.toggleCombobox(false), 0)
+        this.query = ''
         this.$emit(this.valuePropPassed ? 'change' : 'update:modelValue', val)
       },
     },
@@ -130,12 +135,6 @@ export default {
       }
       return option?.label
     },
-    toggleCombobox(value) {
-      value = Boolean(value)
-      if (this.showCombobox !== value) {
-        this.showCombobox = value
-      }
-    },
   },
 }
 </script>

package/src/components/FeatherIcon.vue

@@ -48,7 +48,7 @@ export default {
           'stroke-width': this.strokeWidth,
           width: null,
           height: null,
-          class: [icon.attrs.class],
+          class: [icon.attrs.class, 'shrink-0'],
           innerHTML: icon.contents,
         },
         this.$attrs

package/src/components/Popover.vue

@@ -208,10 +208,13 @@ export default {
       this.isOpen = false
     },
     onMouseover() {
+      this.mouseover = true
       if (this.trigger === 'hover') {
         if (this.hoverDelay) {
           this.hoverTimer = setTimeout(() => {
-            this.open()
+            if (this.mouseover) {
+              this.open()
+            }
           }, Number(this.hoverDelay) * 1000)
         } else {
           this.open()
@@ -219,6 +222,7 @@ export default {
       }
     },
     onMouseleave() {
+      this.mouseover = false
       if (this.hoverTimer) {
         clearTimeout(this.hoverTimer)
       }

package/src/components/TextEditor/InsertImage.vue

@@ -0,0 +1,72 @@
+<template>
+  <slot v-bind="{ openDialog, resetAddImage }"></slot>
+  <Dialog
+    :options="{ title: 'Add Image' }"
+    v-model="addImageDialog.show"
+    @after-leave="resetAddImage"
+  >
+    <template #body-content>
+      <label
+        class="relative py-1 bg-gray-100 rounded-lg cursor-pointer focus-within:bg-gray-200 hover:bg-gray-200"
+      >
+        <input
+          type="file"
+          class="w-full opacity-0"
+          @change="onImageSelect"
+          accept="image/*"
+        />
+        <span class="absolute inset-0 px-2 py-1 text-base select-none">
+          {{ addImageDialog.file ? 'Select another image' : 'Select an image' }}
+        </span>
+      </label>
+      <img
+        v-if="addImageDialog.url"
+        :src="addImageDialog.url"
+        class="w-full mt-2 rounded-lg"
+      />
+    </template>
+    <template #actions>
+      <Button appearance="primary" @click="addImage(addImageDialog.url)">
+        Insert Image
+      </Button>
+    </template>
+  </Dialog>
+</template>
+<script>
+import fileToBase64 from '../../utils/file-to-base64'
+import Dialog from '../Dialog.vue'
+
+export default {
+  name: 'InsertImage',
+  props: ['editor'],
+  expose: ['openDialog'],
+  data() {
+    return {
+      addImageDialog: { url: '', file: null, show: false },
+    }
+  },
+  components: { Dialog },
+  methods: {
+    openDialog() {
+      this.addImageDialog.show = true
+    },
+    onImageSelect(e) {
+      let file = e.target.files[0]
+      if (!file) {
+        return
+      }
+      this.addImageDialog.file = file
+      fileToBase64(file).then((base64) => {
+        this.addImageDialog.url = base64
+      })
+    },
+    addImage(src) {
+      this.editor.chain().focus().setImage({ src }).run()
+      this.resetAddImage()
+    },
+    resetAddImage() {
+      this.addImageDialog = { show: false, url: null, file: null }
+    },
+  },
+}
+</script>

package/src/components/TextEditor/MentionList.vue

@@ -0,0 +1,93 @@
+<template>
+  <div
+    v-if="items.length"
+    class="p-1 text-base bg-white border rounded-lg shadow-lg min-w-40"
+  >
+    <button
+      :class="[
+        index === selectedIndex ? 'bg-gray-100' : 'text-gray-900',
+        'whitespace-nowrap flex rounded-md items-center w-full px-2 py-2 text-sm',
+      ]"
+      v-for="(item, index) in items"
+      :key="index"
+      @click="selectItem(index)"
+      @mouseover="selectedIndex = index"
+    >
+      {{ item.label }}
+    </button>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    items: {
+      type: Array,
+      required: true,
+    },
+    command: {
+      type: Function,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      selectedIndex: 0,
+    }
+  },
+  watch: {
+    items() {
+      this.selectedIndex = 0
+    },
+  },
+  methods: {
+    onKeyDown({ event }) {
+      if (event.key === 'ArrowUp') {
+        this.upHandler()
+        return true
+      }
+      if (event.key === 'ArrowDown') {
+        this.downHandler()
+        return true
+      }
+      if (event.key === 'Enter') {
+        this.enterHandler()
+        return true
+      }
+      return false
+    },
+    upHandler() {
+      this.selectedIndex =
+        (this.selectedIndex + this.items.length - 1) % this.items.length
+    },
+    downHandler() {
+      this.selectedIndex = (this.selectedIndex + 1) % this.items.length
+    },
+    enterHandler() {
+      this.selectItem(this.selectedIndex)
+    },
+    selectItem(index) {
+      const item = this.items[index]
+      if (item) {
+        this.command({ id: item.value, label: item.label })
+      }
+    },
+  },
+}
+</script>
+
+<style>
+.item {
+  display: block;
+  margin: 0;
+  width: 100%;
+  text-align: left;
+  background: transparent;
+  border-radius: 0.4rem;
+  border: 1px solid transparent;
+  padding: 0.2rem 0.4rem;
+}
+.item.is-selected {
+  border-color: #000;
+}
+</style>

package/src/components/TextEditor/Menu.vue

@@ -67,43 +67,12 @@
         </Button>
       </template>
     </Dialog>
-    <Dialog
-      :options="{ title: 'Add Image' }"
-      v-model="addImageDialog.show"
-      @after-leave="resetAddImage"
-    >
-      <template #body-content>
-        <label
-          class="relative py-1 bg-gray-100 rounded-lg cursor-pointer focus-within:bg-gray-200 hover:bg-gray-200"
-        >
-          <input
-            type="file"
-            class="w-full opacity-0"
-            @change="onImageSelect"
-            accept="image/*"
-          />
-          <span class="absolute inset-0 px-2 py-1 text-base select-none">
-            {{
-              addImageDialog.file ? 'Select another image' : 'Select an image'
-            }}
-          </span>
-        </label>
-        <img
-          v-if="addImageDialog.url"
-          :src="addImageDialog.url"
-          class="w-full mt-2 rounded-lg"
-        />
-      </template>
-      <template #actions>
-        <Button appearance="primary" @click="addImage(addImageDialog.url)">
-          Insert Image
-        </Button>
-      </template>
-    </Dialog>
+    <InsertImage ref="insertImage" :editor="editor" />
   </div>
 </template>
 <script>
 import { Popover, Dialog, Input, Button } from 'frappe-ui'
+import InsertImage from './InsertImage.vue'
 export default {
   name: 'TipTapMenu',
   props: ['editor', 'buttons'],
@@ -112,11 +81,11 @@ export default {
     Dialog,
     Input,
     Button,
+    InsertImage,
   },
   data() {
     return {
       setLinkDialog: { url: '', show: false },
-      addImageDialog: { url: '', file: null, show: false },
     }
   },
   methods: {
@@ -128,7 +97,7 @@ export default {
           this.setLinkDialog.url = existingURL
         }
       } else if (button.label === 'Image') {
-        this.addImageDialog.show = true
+        this.$refs.insertImage.openDialog()
       } else {
         button.action(this.editor)
       }
@@ -150,26 +119,6 @@ export default {
       this.setLinkDialog.show = false
       this.setLinkDialog.url = ''
     },
-    onImageSelect(e) {
-      let file = e.target.files[0]
-      if (!file) {
-        return
-      }
-      this.addImageDialog.file = file
-      let reader = new FileReader()
-      reader.onloadend = () => {
-        let base64string = reader.result
-        this.addImageDialog.url = base64string
-      }
-      reader.readAsDataURL(file)
-    },
-    addImage(src) {
-      this.editor.chain().focus().setImage({ src }).run()
-      this.resetAddImage()
-    },
-    resetAddImage() {
-      this.addImageDialog = { show: false, url: null, file: null }
-    },
   },
 }
 </script>

package/src/components/TextEditor/TextEditor.vue

@@ -41,12 +41,6 @@
       </button>
     </FloatingMenu>
     <editor-content :editor="editor" />
-    <span
-      v-if="!content"
-      class="absolute inset-y-0 text-base text-gray-500 pointer-events-none"
-    >
-      {{ placeholder }}
-    </span>
   </div>
 </template>
 
@@ -55,8 +49,9 @@ import { Editor, EditorContent, BubbleMenu, FloatingMenu } from '@tiptap/vue-3'
 import StarterKit from '@tiptap/starter-kit'
 import Placeholder from '@tiptap/extension-placeholder'
 import TextAlign from '@tiptap/extension-text-align'
-import Image from '@tiptap/extension-image'
+import Image from './image-extension'
 import Link from '@tiptap/extension-link'
+import configureMention from './mention'
 import Menu from './Menu.vue'
 import commands from './commands'
 import { normalizeClass } from 'vue'
@@ -70,17 +65,48 @@ export default {
     FloatingMenu,
     Menu,
   },
-  props: [
-    'content',
-    'placeholder',
-    'editorClass',
-    'editable',
-    'fixedMenu',
-    'bubbleMenu',
-    'floatingMenu',
-    'extensions',
-    'starterkitOptions',
-  ],
+  props: {
+    content: {
+      type: String,
+      default: null,
+    },
+    placeholder: {
+      type: String,
+      default: '',
+    },
+    editorClass: {
+      type: [String, Array, Object],
+      default: '',
+    },
+    editable: {
+      type: Boolean,
+      default: true,
+    },
+    bubbleMenu: {
+      type: [Boolean, Array],
+      default: false,
+    },
+    fixedMenu: {
+      type: [Boolean, Array],
+      default: false,
+    },
+    floatingMenu: {
+      type: [Boolean, Array],
+      default: false,
+    },
+    extensions: {
+      type: Array,
+      default: () => [],
+    },
+    starterkitOptions: {
+      type: Object,
+      default: () => ({}),
+    },
+    mentions: {
+      type: Array,
+      default: () => [],
+    },
+  },
   emits: ['change'],
   expose: ['editor'],
   data() {
@@ -119,13 +145,12 @@ export default {
         TextAlign.configure({
           types: ['heading', 'paragraph'],
         }),
-        Image.configure({
-          allowBase64: true,
-        }),
+        Image,
         Link,
         Placeholder.configure({
-          placeholder: this.placeholder || 'Write something...',
+          placeholder: this.placeholder,
         }),
+        configureMention(this.mentions),
         ...(this.extensions || []),
       ],
       onUpdate: ({ editor }) => {
@@ -248,4 +273,8 @@ function createEditorButton(option) {
   pointer-events: none;
   height: 0;
 }
+.mention {
+  font-weight: 600;
+  box-decoration-break: clone;
+}
 </style>

package/src/components/TextEditor/image-extension.js

@@ -0,0 +1,152 @@
+// Plugin adapted from the following examples:
+// - https://github.com/ueberdosis/tiptap/blob/main/packages/extension-image/src/image.ts
+// - https://gist.github.com/slava-vishnyakov/16076dff1a77ddaca93c4bccd4ec4521
+
+import { mergeAttributes, Node, nodeInputRule } from '@tiptap/core'
+import { Plugin } from 'prosemirror-state'
+import fileToBase64 from '../../utils/file-to-base64'
+
+export const inputRegex =
+  /(?:^|\s)(!\[(.+|:?)]\((\S+)(?:(?:\s+)["'](\S+)["'])?\))$/
+
+export default Node.create({
+  name: 'image',
+  addOptions() {
+    return {
+      inline: false,
+      HTMLAttributes: {},
+    }
+  },
+  inline() {
+    return this.options.inline
+  },
+  group() {
+    return this.options.inline ? 'inline' : 'block'
+  },
+  draggable: true,
+  addAttributes() {
+    return {
+      src: {
+        default: null,
+      },
+      alt: {
+        default: null,
+      },
+      title: {
+        default: null,
+      },
+    }
+  },
+  parseHTML() {
+    return [
+      {
+        tag: 'img[src]',
+      },
+    ]
+  },
+  renderHTML({ HTMLAttributes }) {
+    return ['img', mergeAttributes(this.options.HTMLAttributes, HTMLAttributes)]
+  },
+
+  addCommands() {
+    return {
+      setImage:
+        (options) =>
+        ({ commands }) => {
+          return commands.insertContent({
+            type: this.name,
+            attrs: options,
+          })
+        },
+    }
+  },
+
+  addInputRules() {
+    return [
+      nodeInputRule({
+        find: inputRegex,
+        type: this.type,
+        getAttributes: (match) => {
+          const [, , alt, src, title] = match
+
+          return { src, alt, title }
+        },
+      }),
+    ]
+  },
+
+  addProseMirrorPlugins() {
+    return [dropImagePlugin()]
+  },
+})
+
+const dropImagePlugin = () => {
+  return new Plugin({
+    props: {
+      handlePaste(view, event, slice) {
+        const items = Array.from(event.clipboardData?.items || [])
+        const { schema } = view.state
+
+        items.forEach((item) => {
+          const image = item.getAsFile()
+          if (!image) return
+
+          if (item.type.indexOf('image') === 0) {
+            event.preventDefault()
+
+            fileToBase64(image).then((base64) => {
+              const node = schema.nodes.image.create({
+                src: base64,
+              })
+              const transaction = view.state.tr.replaceSelectionWith(node)
+              view.dispatch(transaction)
+            })
+          }
+        })
+
+        return false
+      },
+      handleDOMEvents: {
+        drop: (view, event) => {
+          const hasFiles =
+            event.dataTransfer &&
+            event.dataTransfer.files &&
+            event.dataTransfer.files.length
+
+          if (!hasFiles) {
+            return false
+          }
+
+          const images = Array.from(event.dataTransfer?.files ?? []).filter(
+            (file) => /image/i.test(file.type)
+          )
+
+          if (images.length === 0) {
+            return false
+          }
+
+          event.preventDefault()
+
+          const { schema } = view.state
+          const coordinates = view.posAtCoords({
+            left: event.clientX,
+            top: event.clientY,
+          })
+          if (!coordinates) return false
+
+          images.forEach(async (image) => {
+            fileToBase64(image).then((base64) => {
+              const node = schema.nodes.image.create({
+                src: base64,
+              })
+              const transaction = view.state.tr.insert(coordinates.pos, node)
+              view.dispatch(transaction)
+            })
+          })
+
+          return true
+        },
+      },
+    },
+  })
+}

package/src/components/TextEditor/mention.js

@@ -0,0 +1,72 @@
+import tippy from 'tippy.js'
+import { VueRenderer } from '@tiptap/vue-3'
+import Mention from '@tiptap/extension-mention'
+import MentionList from './MentionList.vue'
+
+export default function configureMention(options) {
+  return Mention.configure({
+    HTMLAttributes: {
+      class: 'mention',
+    },
+    suggestion: getSuggestionOptions(options),
+  })
+}
+
+function getSuggestionOptions(options) {
+  return {
+    items: ({ query }) => {
+      return options
+        .filter((item) =>
+          item.label.toLowerCase().startsWith(query.toLowerCase())
+        )
+        .slice(0, 5)
+    },
+
+    render: () => {
+      let component
+      let popup
+
+      return {
+        onStart: (props) => {
+          component = new VueRenderer(MentionList, {
+            props,
+            editor: props.editor,
+          })
+          if (!props.clientRect) {
+            return
+          }
+          popup = tippy('body', {
+            getReferenceClientRect: props.clientRect,
+            appendTo: () => document.body,
+            content: component.element,
+            showOnCreate: true,
+            interactive: true,
+            trigger: 'manual',
+            placement: 'bottom-start',
+          })
+        },
+        onUpdate(props) {
+          component.updateProps(props)
+          if (!props.clientRect) {
+            return
+          }
+          popup[0].setProps({
+            getReferenceClientRect: props.clientRect,
+          })
+        },
+        onKeyDown(props) {
+          if (props.event.key === 'Escape') {
+            popup[0].hide()
+
+            return true
+          }
+          return component.ref?.onKeyDown(props)
+        },
+        onExit() {
+          popup[0].destroy()
+          component.destroy()
+        },
+      }
+    },
+  }
+}

package/src/components/Tooltip.vue

@@ -0,0 +1,35 @@
+<template>
+  <Popover trigger="hover" :hoverDelay="hoverDelay" :placement="placement">
+    <template #target>
+      <slot />
+    </template>
+    <template #body>
+      <slot name="body">
+        <div
+          class="px-2 py-1 text-xs text-white bg-gray-800 border border-gray-100 rounded-lg shadow-xl"
+        >
+          {{ text }}
+        </div>
+      </slot>
+    </template>
+  </Popover>
+</template>
+<script>
+import Popover from './Popover.vue'
+export default {
+  name: 'Tooltip',
+  components: { Popover },
+  props: {
+    hoverDelay: {
+      default: 0.5,
+    },
+    placement: {
+      default: 'bottom',
+    },
+    text: {
+      type: String,
+      default: '',
+    },
+  },
+}
+</script>

package/src/index.js

@@ -23,6 +23,7 @@ export { default as Resource } from './components/Resource.vue'
 export { default as Spinner } from './components/Spinner.vue'
 export { default as SuccessMessage } from './components/SuccessMessage.vue'
 export { default as TextEditor } from './components/TextEditor'
+export { default as Tooltip } from './components/Tooltip.vue'
 
 // directives
 export { default as onOutsideClickDirective } from './directives/onOutsideClick.js'

package/src/utils/file-to-base64.js

@@ -0,0 +1,9 @@
+export default (file) => {
+  return new Promise((resolve) => {
+    let reader = new FileReader()
+    reader.onloadend = () => {
+      resolve(reader.result)
+    }
+    reader.readAsDataURL(file)
+  })
+}

package/src/utils/resources.js

@@ -201,6 +201,7 @@ export function createDocumentResource(options, vm) {
     doctype: options.doctype,
     name: options.name,
     doc: null,
+    auto: true,
     get: createResource(
       {
         method: 'frappe.client.get',
@@ -238,6 +239,8 @@ export function createDocumentResource(options, vm) {
         onSuccess() {
           out.doc = null
           options.delete?.onSuccess?.call(vm, data)
+          // delete from list resources
+          deleteRowInListResource(out.doctype, out.name)
         },
         onError: options.delete?.onError,
       },
@@ -295,8 +298,6 @@ export function createDocumentResource(options, vm) {
     return doc
   }
 
-  // fetch the doc
-  out.get.fetch()
   // cache
   documentCache[cacheKey] = out
   return out
@@ -323,6 +324,7 @@ export function createListResource(options, vm, getResource) {
     data: null,
     next,
     hasNextPage: true,
+    auto: true,
     list: createResource(
       {
         method: 'frappe.client.get_list',
@@ -451,7 +453,6 @@ export function createListResource(options, vm, getResource) {
     out.order_by = updatedOptions.order_by
     out.start = updatedOptions.start
     out.limit = updatedOptions.limit
-    out.list.fetch()
   }
 
   function transform(data) {
@@ -481,9 +482,6 @@ export function createListResource(options, vm, getResource) {
     out.list.fetch()
   }
 
-  // fetch list
-  out.list.fetch()
-
   if (cacheKey) {
     // cache
     listCache[cacheKey] = out
@@ -515,6 +513,18 @@ function updateRowInListResource(doctype, doc) {
   }
 }
 
+function deleteRowInListResource(doctype, docname) {
+  let resources = listResources[doctype] || []
+  for (let resource of resources) {
+    if (resource.originalData) {
+      resource.originalData = resource.originalData.filter(
+        (row) => row.name !== docname
+      )
+      resource.data = resource.transform(resource.originalData)
+    }
+  }
+}
+
 function revertRowInListResource(doctype, doc) {
   let resources = listResources[doctype] || []
   for (let resource of resources) {
@@ -593,7 +603,7 @@ let createMixin = (mixinOptions) => ({
                 resource.update(updatedOptions)
               }
               if (resource && resource.auto) {
-                resource.fetch()
+                resource.reload()
               }
             },
             {
@@ -607,8 +617,8 @@ let createMixin = (mixinOptions) => ({
             mixinOptions.getResource
           )
           this._resources[key] = resource
-          if (resource.auto) {
-            resource.fetch()
+          if (resource && resource.auto) {
+            resource.reload()
           }
         }
       }