frappe-ui 0.0.39 → 0.0.44

package/package.json

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

package/src/components/Avatar.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="overflow-hidden" :class="styleClasses">
+  <div class="overflow-hidden shrink-0" :class="styleClasses">
     <img
       v-if="imageURL"
       :src="imageURL"

package/src/components/Dialog.vue

@@ -1,5 +1,9 @@
 <template>
-  <TransitionRoot as="template" :show="open">
+  <TransitionRoot
+    as="template"
+    :show="open"
+    @after-leave="$emit('after-leave')"
+  >
     <HDialog
       as="div"
       class="fixed inset-0 z-10 overflow-y-auto"
@@ -137,7 +141,7 @@ export default {
       },
     },
   },
-  emits: ['update:modelValue', 'close'],
+  emits: ['update:modelValue', 'close', 'after-leave'],
   components: {
     HDialog,
     DialogOverlay,

package/src/components/TextEditor/Menu.vue

@@ -67,18 +67,56 @@
         </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>
   </div>
 </template>
 <script>
-import { Popover } from 'frappe-ui'
-
+import { Popover, Dialog, Input, Button } from 'frappe-ui'
 export default {
   name: 'TipTapMenu',
   props: ['editor', 'buttons'],
-  components: { Popover },
+  components: {
+    Popover,
+    Dialog,
+    Input,
+    Button,
+  },
   data() {
     return {
       setLinkDialog: { url: '', show: false },
+      addImageDialog: { url: '', file: null, show: false },
     }
   },
   methods: {
@@ -89,6 +127,8 @@ export default {
         if (existingURL) {
           this.setLinkDialog.url = existingURL
         }
+      } else if (button.label === 'Image') {
+        this.addImageDialog.show = true
       } else {
         button.action(this.editor)
       }
@@ -110,6 +150,26 @@ 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,6 +41,12 @@
       </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>
 
@@ -113,7 +119,9 @@ export default {
         TextAlign.configure({
           types: ['heading', 'paragraph'],
         }),
-        Image,
+        Image.configure({
+          allowBase64: true,
+        }),
         Link,
         Placeholder.configure({
           placeholder: this.placeholder || 'Write something...',
@@ -157,6 +165,7 @@ export default {
           'Align Center',
           'Align Right',
           'Separator',
+          'Image',
           'Blockquote',
           'Code',
           'Horizontal Rule',

package/src/components/TextEditor/commands.js

@@ -16,6 +16,7 @@ import ListUnordered from './icons/list-unordered.vue'
 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 ArrowGoBack from './icons/arrow-go-back-line.vue'
 import ArrowGoForward from './icons/arrow-go-forward-line.vue'
 import Separator from './icons/separator.vue'
@@ -146,6 +147,11 @@ export default {
     icon: Link,
     isActive: (editor) => editor.isActive('link'),
   },
+  Image: {
+    label: 'Image',
+    icon: Image,
+    isActive: (editor) => false,
+  },
   Undo: {
     label: 'Undo',
     icon: ArrowGoBack,

package/src/components/TextEditor/icons/image-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="M21 15v3h3v2h-3v3h-2v-3h-3v-2h3v-3h2zm.008-12c.548 0 .992.445.992.993V13h-2V5H4v13.999L14 9l3 3v2.829l-3-3L6.827 19H14v2H2.992A.993.993 0 0 1 2 20.007V3.993A1 1 0 0 1 2.992 3h18.016zM8 7a2 2 0 1 1 0 4 2 2 0 0 1 0-4z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/utils/resources.js

@@ -212,6 +212,7 @@ export function createDocumentResource(options, vm) {
         },
         onSuccess(data) {
           out.doc = transform(data)
+          options.onSuccess?.call(vm, out.doc)
         },
         onError: options.onError,
       },
@@ -316,10 +317,12 @@ export function createListResource(options, vm, getResource) {
     fields: options.fields,
     filters: options.filters,
     order_by: options.order_by,
-    start: options.start,
-    limit: options.limit,
+    start: options.start || 0,
+    limit: options.limit || 20,
     originalData: null,
     data: null,
+    next,
+    hasNextPage: true,
     list: createResource(
       {
         method: 'frappe.client.get_list',
@@ -334,8 +337,15 @@ export function createListResource(options, vm, getResource) {
           }
         },
         onSuccess(data) {
-          out.originalData = data
-          out.data = transform(data)
+          if (data.length < out.limit) {
+            out.hasNextPage = false
+          }
+          if (!out.start || out.start == 0) {
+            out.originalData = data
+          } else if (out.start > 0) {
+            out.originalData = out.originalData.concat(data)
+          }
+          out.data = transform(out.originalData)
           options.onSuccess?.call(vm, out.data)
         },
         onError: options.onError,
@@ -455,6 +465,7 @@ export function createListResource(options, vm, getResource) {
   }
 
   function reload() {
+    out.start = 0
     return out.list.fetch()
   }
 
@@ -465,6 +476,11 @@ export function createListResource(options, vm, getResource) {
     out.data = data
   }
 
+  function next() {
+    out.start = out.start + out.limit
+    out.list.fetch()
+  }
+
   // fetch list
   out.list.fetch()
 
@@ -480,7 +496,7 @@ export function createListResource(options, vm, getResource) {
 }
 
 function updateRowInListResource(doctype, doc) {
-  let resources = listResources[doctype]
+  let resources = listResources[doctype] || []
   for (let resource of resources) {
     if (resource.originalData) {
       for (let row of resource.originalData) {
@@ -500,7 +516,7 @@ function updateRowInListResource(doctype, doc) {
 }
 
 function revertRowInListResource(doctype, doc) {
-  let resources = listResources[doctype]
+  let resources = listResources[doctype] || []
   for (let resource of resources) {
     if (resource.originalData) {
       for (let row of resource.originalData) {