frappe-ui 0.0.78 → 0.0.80

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "0.0.78",
+  "version": "0.0.80",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.js",
   "scripts": {

package/src/components/TextEditor/InsertImage.vue

@@ -1,9 +1,9 @@
 <template>
-  <slot v-bind="{ openDialog, resetAddImage }"></slot>
+  <slot v-bind="{ onClick: openDialog }"></slot>
   <Dialog
     :options="{ title: 'Add Image' }"
     v-model="addImageDialog.show"
-    @after-leave="resetAddImage"
+    @after-leave="reset"
   >
     <template #body-content>
       <label
@@ -29,12 +29,14 @@
       <Button appearance="primary" @click="addImage(addImageDialog.url)">
         Insert Image
       </Button>
+      <Button @click="reset"> Cancel </Button>
     </template>
   </Dialog>
 </template>
 <script>
 import fileToBase64 from '../../utils/file-to-base64'
 import Dialog from '../Dialog.vue'
+import Button from '../Button.vue'
 
 export default {
   name: 'InsertImage',
@@ -45,7 +47,7 @@ export default {
       addImageDialog: { url: '', file: null, show: false },
     }
   },
-  components: { Dialog },
+  components: { Button, Dialog },
   methods: {
     openDialog() {
       this.addImageDialog.show = true
@@ -62,10 +64,10 @@ export default {
     },
     addImage(src) {
       this.editor.chain().focus().setImage({ src }).run()
-      this.resetAddImage()
+      this.reset()
     },
-    resetAddImage() {
-      this.addImageDialog = { show: false, url: null, file: null }
+    reset() {
+      this.addImageDialog = this.$options.data().addImageDialog
     },
   },
 }

package/src/components/TextEditor/InsertLink.vue

@@ -0,0 +1,67 @@
+<template>
+  <slot v-bind="{ onClick: openDialog }"></slot>
+  <Dialog
+    :options="{ title: 'Set Link' }"
+    v-model="setLinkDialog.show"
+    @after-leave="reset"
+  >
+    <template #body-content>
+      <Input
+        type="text"
+        label="URL"
+        v-model="setLinkDialog.url"
+        @keydown.enter="(e) => setLink(e.target.value)"
+      />
+    </template>
+    <template #actions>
+      <Button appearance="primary" @click="setLink(setLinkDialog.url)">
+        Save
+      </Button>
+    </template>
+  </Dialog>
+</template>
+<script>
+import Dialog from '../Dialog.vue'
+import Button from '../Button.vue'
+import Input from '../Input.vue'
+
+export default {
+  name: 'InsertLink',
+  props: ['editor'],
+  components: { Button, Input, Dialog },
+  data() {
+    return {
+      setLinkDialog: { url: '', show: false },
+    }
+  },
+  methods: {
+    openDialog() {
+      let existingURL = this.editor.getAttributes('link').href
+      if (existingURL) {
+        this.setLinkDialog.url = existingURL
+      }
+      this.setLinkDialog.show = true
+    },
+    setLink(url) {
+      // empty
+      if (url === '') {
+        this.editor.chain().focus().extendMarkRange('link').unsetLink().run()
+      } else {
+        // update link
+        this.editor
+          .chain()
+          .focus()
+          .extendMarkRange('link')
+          .setLink({ href: url })
+          .run()
+      }
+
+      this.setLinkDialog.show = false
+      this.setLinkDialog.url = ''
+    },
+    reset() {
+      this.setLinkDialog = this.$options.data().setLinkDialog
+    },
+  },
+}
+</script>

package/src/components/TextEditor/InsertVideo.vue

@@ -0,0 +1,94 @@
+<template>
+  <slot v-bind="{ onClick: openDialog }"></slot>
+  <Dialog
+    :options="{ title: 'Add Video' }"
+    v-model="addVideoDialog.show"
+    @after-leave="reset"
+  >
+    <template #body-content>
+      <FileUploader
+        file-types="video/*"
+        @success="(file) => (addVideoDialog.url = file.file_url)"
+      >
+        <template v-slot="{ file, progress, uploading, openFileSelector }">
+          <div class="flex items-center space-x-2">
+            <Button @click="openFileSelector">
+              {{
+                uploading
+                  ? `Uploading ${progress}%`
+                  : addVideoDialog.url
+                  ? 'Change Video'
+                  : 'Upload Video'
+              }}
+            </Button>
+            <Button
+              v-if="addVideoDialog.url"
+              @click="
+                () => {
+                  addVideoDialog.url = null
+                  addVideoDialog.file = null
+                }
+              "
+            >
+              Remove
+            </Button>
+          </div>
+        </template>
+      </FileUploader>
+      <video
+        v-if="addVideoDialog.url"
+        :src="addVideoDialog.url"
+        class="mt-2 w-full rounded-lg"
+        type="video/mp4"
+        controls
+      />
+    </template>
+    <template #actions>
+      <Button appearance="primary" @click="addVideo(addVideoDialog.url)">
+        Insert Video
+      </Button>
+      <Button @click="reset">Cancel</Button>
+    </template>
+  </Dialog>
+</template>
+<script>
+import Button from '../Button.vue'
+import Dialog from '../Dialog.vue'
+import FileUploader from '../FileUploader.vue'
+
+export default {
+  name: 'InsertImage',
+  props: ['editor'],
+  expose: ['openDialog'],
+  data() {
+    return {
+      addVideoDialog: { url: '', file: null, show: false },
+    }
+  },
+  components: { Button, Dialog, FileUploader },
+  methods: {
+    openDialog() {
+      this.addVideoDialog.show = true
+    },
+    onVideoSelect(e) {
+      let file = e.target.files[0]
+      if (!file) {
+        return
+      }
+      this.addVideoDialog.file = file
+    },
+
+    addVideo(src) {
+      this.editor
+        .chain()
+        .focus()
+        .insertContent(`<video src="${src}"></video>`)
+        .run()
+      this.reset()
+    },
+    reset() {
+      this.addVideoDialog = this.$options.data().addVideoDialog
+    },
+  },
+}
+</script>

package/src/components/TextEditor/Menu.vue

@@ -50,88 +50,47 @@
             </template>
           </Popover>
         </div>
-        <button
-          v-else
-          class="flex rounded p-1 text-gray-800 transition-colors"
-          :class="button.isActive(editor) ? 'bg-gray-100' : 'hover:bg-gray-100'"
-          @click="onClick(button)"
-          :title="button.label"
-        >
-          <component v-if="button.icon" :is="button.icon" class="h-4 w-4" />
-          <span class="inline-block h-4 min-w-[1rem] text-sm leading-4" v-else>
-            {{ button.text }}
-          </span>
-        </button>
+        <component v-else :is="button.component || 'div'" v-bind="{ editor }">
+          <template v-slot="componentSlotProps">
+            <button
+              class="flex rounded p-1 text-gray-800 transition-colors"
+              :class="
+                button.isActive(editor) ? 'bg-gray-100' : 'hover:bg-gray-100'
+              "
+              @click="
+                componentSlotProps?.onClick
+                  ? componentSlotProps.onClick(button)
+                  : onButtonClick(button)
+              "
+              :title="button.label"
+            >
+              <component v-if="button.icon" :is="button.icon" class="h-4 w-4" />
+              <span
+                class="inline-block h-4 min-w-[1rem] text-sm leading-4"
+                v-else
+              >
+                {{ button.text }}
+              </span>
+            </button>
+          </template>
+        </component>
       </template>
     </div>
-
-    <Dialog :options="{ title: 'Set Link' }" v-model="setLinkDialog.show">
-      <template #body-content>
-        <Input
-          type="text"
-          label="URL"
-          v-model="setLinkDialog.url"
-          @keydown.enter="(e) => setLink(e.target.value)"
-        />
-      </template>
-      <template #actions>
-        <Button appearance="primary" @click="setLink(setLinkDialog.url)">
-          Save
-        </Button>
-      </template>
-    </Dialog>
-    <InsertImage ref="insertImage" :editor="editor" />
   </div>
 </template>
 <script>
-import { Popover, Dialog, Input, Button } from 'frappe-ui'
-import InsertImage from './InsertImage.vue'
+import { Popover } from 'frappe-ui'
+
 export default {
   name: 'TipTapMenu',
   props: ['buttons'],
   inject: ['editor'],
   components: {
     Popover,
-    Dialog,
-    Input,
-    Button,
-    InsertImage,
-  },
-  data() {
-    return {
-      setLinkDialog: { url: '', show: false },
-    }
   },
   methods: {
-    onClick(button) {
-      if (button.label === 'Link') {
-        this.setLinkDialog.show = true
-        let existingURL = this.editor.getAttributes('link').href
-        if (existingURL) {
-          this.setLinkDialog.url = existingURL
-        }
-      } else if (button.label === 'Image') {
-        this.$refs.insertImage.openDialog()
-      } else {
-        button.action(this.editor)
-      }
-    },
-    setLink(url) {
-      // empty
-      if (url === '') {
-        this.editor.chain().focus().extendMarkRange('link').unsetLink().run()
-      } else {
-        // update link
-        this.editor
-          .chain()
-          .focus()
-          .extendMarkRange('link')
-          .setLink({ href: url })
-          .run()
-      }
-
-      this.setLinkDialog.show = false
-      this.setLinkDialog.url = ''
+    onButtonClick(button) {
+      button.action(this.editor)
     },
   },
 }

package/src/components/TextEditor/TextEditor.vue

@@ -24,6 +24,7 @@ import TableCell from '@tiptap/extension-table-cell'
 import TableHeader from '@tiptap/extension-table-header'
 import TableRow from '@tiptap/extension-table-row'
 import Image from './image-extension'
+import Video from './video-extension'
 import Link from '@tiptap/extension-link'
 import configureMention from './mention'
 import TextEditorFixedMenu from './TextEditorFixedMenu.vue'
@@ -135,6 +136,7 @@ export default {
           types: ['heading', 'paragraph'],
         }),
         Image,
+        Video,
         Link,
         Placeholder.configure({
           showOnlyWhenEditable: false,
@@ -209,6 +211,11 @@ export default {
   height: 0;
 }
 
+.ProseMirror-selectednode video,
+img.ProseMirror-selectednode {
+  border: 2px solid theme('colors.blue.300');
+}
+
 /* Mentions */
 .mention {
   font-weight: 600;

package/src/components/TextEditor/TextEditorBubbleMenu.vue

@@ -42,6 +42,7 @@ export default {
           'Numbered List',
           'Separator',
           'Image',
+          'Video',
           'Blockquote',
           'Code',
           [

package/src/components/TextEditor/TextEditorFixedMenu.vue

@@ -39,6 +39,7 @@ export default {
           'Align Right',
           'Separator',
           'Image',
+          'Video',
           'Link',
           'Blockquote',
           'Code',

package/src/components/TextEditor/commands.js

@@ -1,3 +1,4 @@
+import { defineAsyncComponent } from 'vue'
 import H1 from './icons/h-1.vue'
 import H2 from './icons/h-2.vue'
 import H3 from './icons/h-3.vue'
@@ -17,6 +18,7 @@ import DoubleQuotes from './icons/double-quotes-r.vue'
 import CodeView from './icons/code-view.vue'
 import Link from './icons/link.vue'
 import Image from './icons/image-add-line.vue'
+import Video from './icons/video-add-line.vue'
 import ArrowGoBack from './icons/arrow-go-back-line.vue'
 import ArrowGoForward from './icons/arrow-go-forward-line.vue'
 import Separator from './icons/separator.vue'
@@ -147,11 +149,19 @@ export default {
     label: 'Link',
     icon: Link,
     isActive: (editor) => editor.isActive('link'),
+    component: defineAsyncComponent(() => import('./InsertLink.vue')),
   },
   Image: {
     label: 'Image',
     icon: Image,
     isActive: (editor) => false,
+    component: defineAsyncComponent(() => import('./InsertImage.vue')),
+  },
+  Video: {
+    label: 'Video',
+    icon: Video,
+    isActive: (editor) => false,
+    component: defineAsyncComponent(() => import('./InsertVideo.vue')),
   },
   Undo: {
     label: 'Undo',

package/src/components/TextEditor/icons/video-add-line.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    width="24"
+    height="24"
+  >
+    <path fill="none" d="M0 0H24V24H0z" />
+    <path
+      d="M16 4c.552 0 1 .448 1 1v4.2l5.213-3.65c.226-.158.538-.103.697.124.058.084.09.184.09.286v12.08c0 .276-.224.5-.5.5-.103 0-.203-.032-.287-.09L17 14.8V19c0 .552-.448 1-1 1H2c-.552 0-1-.448-1-1V5c0-.552.448-1 1-1h14zm-1 2H3v12h12V6zM8 8h2v3h3v2H9.999L10 16H8l-.001-3H5v-2h3V8zm13 .841l-4 2.8v.718l4 2.8V8.84z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

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

@@ -0,0 +1,60 @@
+import { Node, mergeAttributes } from '@tiptap/core'
+// Inspired by this blog: https://www.codemzy.com/blog/tiptap-video-embed-extension
+
+const Video = Node.create({
+  name: 'video',
+  group: 'block',
+  selectable: true,
+  draggable: true,
+  atom: true,
+
+  addAttributes() {
+    return {
+      src: {
+        default: null,
+      },
+    }
+  },
+
+  parseHTML() {
+    return [
+      {
+        tag: 'video',
+      },
+    ]
+  },
+
+  renderHTML({ HTMLAttributes }) {
+    return ['video', mergeAttributes(HTMLAttributes)]
+  },
+
+  addNodeView() {
+    return ({ editor, node }) => {
+      const div = document.createElement('div')
+      div.className =
+        'relative aspect-w-16 aspect-h-9' +
+        (editor.isEditable ? ' cursor-pointer' : '')
+
+      const video = document.createElement('video')
+      if (editor.isEditable) {
+        video.className = 'pointer-events-none'
+      }
+      video.src = node.attrs.src
+      if (!editor.isEditable) {
+        video.setAttribute('controls', '')
+      } else {
+        let videoPill = document.createElement('div')
+        videoPill.className =
+          'absolute top-0 right-0 text-xs m-2 bg-gray-800 text-white px-2 py-1 rounded-md'
+        videoPill.innerHTML = 'Video'
+        div.append(videoPill)
+      }
+      div.append(video)
+      return {
+        dom: div,
+      }
+    }
+  },
+})
+
+export default Video

package/src/resources/listResource.js

@@ -118,9 +118,9 @@ export function createListResource(options, vm, getResource) {
             fieldname: values,
           }
         },
-        onSuccess(data) {
-          out.list.fetch()
-          options.setValue?.onSuccess?.call(vm, data)
+        onSuccess(doc) {
+          updateRowInListResource(out.doctype, doc)
+          options.setValue?.onSuccess?.call(vm, doc)
         },
         onError: options.setValue?.onError,
       },
@@ -182,7 +182,7 @@ export function createListResource(options, vm, getResource) {
   function transform(data) {
     if (options.transform) {
       let returnValue = options.transform.call(vm, data)
-      if (typeof returnValue != null) {
+      if (returnValue != null) {
         return returnValue
       }
     }

package/src/resources/resources.js

@@ -155,7 +155,7 @@ export function createResource(options, vm, getResource) {
   function transform(data) {
     if (options.transform) {
       let returnValue = options.transform.call(vm, data)
-      if (typeof returnValue != null) {
+      if (returnValue != null) {
         return returnValue
       }
     }