frappe-ui 0.0.42 → 0.0.45

package/package.json

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

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,6 +67,39 @@
         </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>
@@ -83,6 +116,7 @@ export default {
   data() {
     return {
       setLinkDialog: { url: '', show: false },
+      addImageDialog: { url: '', file: null, show: false },
     }
   },
   methods: {
@@ -93,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)
       }
@@ -114,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

@@ -119,7 +119,9 @@ export default {
         TextAlign.configure({
           types: ['heading', 'paragraph'],
         }),
-        Image,
+        Image.configure({
+          allowBase64: true,
+        }),
         Link,
         Placeholder.configure({
           placeholder: this.placeholder || 'Write something...',
@@ -163,6 +165,7 @@ export default {
           'Align Center',
           'Align Right',
           'Separator',
+          'Image',
           'Blockquote',
           'Code',
           'Horizontal Rule',
@@ -220,10 +223,7 @@ export default {
     editorProps() {
       return {
         attributes: {
-          class: normalizeClass([
-            'prose prose-sm prose-p:my-1',
-            this.editorClass,
-          ]),
+          class: normalizeClass(['prose prose-p:my-1', this.editorClass]),
         },
       }
     },

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/plugin.js

@@ -1,6 +1,6 @@
 import resources from './resources'
 import call from './call'
-import socket from './socketio'
+import initSocket from './socketio'
 
 let defaultOptions = {
   resources: true,
@@ -18,7 +18,7 @@ export default {
       app.config.globalProperties.$call = callFunction
     }
     if (options.socketio) {
-      app.config.globalProperties.$socket = socket
+      app.config.globalProperties.$socket = initSocket(options.socketio)
     }
   },
 }

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) {

package/src/utils/socketio.js

@@ -1,13 +1,11 @@
 import { io } from 'socket.io-client'
 
-function initSocket() {
+export default function initSocket(options = {}) {
   let host = window.location.hostname
-  let port = window.location.port ? ':9000' : ''
+  let socketio_port = options.port || 9000
+  let port = window.location.port ? `:${socketio_port}` : ''
   let protocol = port ? 'http' : 'https'
   let url = `${protocol}://${host}${port}`
-  return io(url)
+  let socket = io(url)
+  return socket
 }
-
-let socket = initSocket()
-
-export default socket