frappe-ui 0.0.38 → 0.0.43

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "0.0.38",
+  "version": "0.0.43",
   "description": "A set of components and utilities for rapid UI development",
   "main": "./src/index.js",
   "scripts": {
@@ -30,7 +30,7 @@
     "autoprefixer": "^10.4.2",
     "feather-icons": "^4.28.0",
     "postcss": "^8.4.5",
-    "socket.io-client": "^2.4.0",
+    "socket.io-client": "^4.5.1",
     "tailwindcss": "^3.0.12"
   }
 }

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/Dropdown.vue

@@ -17,11 +17,11 @@
     >
       <MenuItems
         class="absolute z-10 mt-2 bg-white divide-y divide-gray-100 rounded-md shadow-lg min-w-40 ring-1 ring-black ring-opacity-5 focus:outline-none"
-        :class="
-          placement === 'left'
-            ? 'left-0 origin-top-left'
-            : 'right-0 origin-top-right'
-        "
+        :class="{
+          'left-0 origin-top-left': placement == 'left',
+          'right-0 origin-top-right': placement == 'right',
+          'inset-x-0 origin-top': placement == 'center',
+        }"
       >
         <div v-for="group in groups" :key="group.key" class="px-1 py-1">
           <div

package/src/components/TextEditor/Menu.vue

@@ -70,12 +70,16 @@
   </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 },

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>
 

package/src/utils/resources.js

@@ -4,6 +4,7 @@ import { reactive, watch } from 'vue'
 let cached = {}
 let documentCache = reactive({})
 let listCache = reactive({})
+let listResources = {}
 
 export function createResource(options, vm, getResource) {
   let cacheKey = null
@@ -181,6 +182,8 @@ export function createDocumentResource(options, vm) {
     beforeSubmit(params) {
       out.previousDoc = JSON.stringify(out.doc)
       Object.assign(out.doc, params.fieldname || {})
+      // update data in list resources
+      updateRowInListResource(out.doctype, out.doc)
     },
     onSuccess(data) {
       out.doc = transform(data)
@@ -189,6 +192,8 @@ export function createDocumentResource(options, vm) {
     onError(error) {
       out.doc = JSON.parse(out.previousDoc)
       options.setValue?.onError?.call(vm, error)
+      // revert data in list resource
+      revertRowInListResource(out.doctype, out.doc)
     },
   }
 
@@ -311,10 +316,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',
@@ -329,8 +336,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,
@@ -426,6 +440,7 @@ export function createListResource(options, vm, getResource) {
     update,
     reload,
     setData,
+    transform,
   })
 
   function update(updatedOptions) {
@@ -449,6 +464,7 @@ export function createListResource(options, vm, getResource) {
   }
 
   function reload() {
+    out.start = 0
     return out.list.fetch()
   }
 
@@ -459,6 +475,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()
 
@@ -467,9 +488,50 @@ export function createListResource(options, vm, getResource) {
     listCache[cacheKey] = out
   }
 
+  listResources[out.doctype] = listResources[out.doctype] || []
+  listResources[out.doctype].push(out)
+
   return out
 }
 
+function updateRowInListResource(doctype, doc) {
+  let resources = listResources[doctype]
+  for (let resource of resources) {
+    if (resource.originalData) {
+      for (let row of resource.originalData) {
+        if (row.name && row.name == doc.name) {
+          let previousRowData = JSON.stringify(row)
+          for (let key in row) {
+            if (key in doc) {
+              row[key] = doc[key]
+            }
+          }
+          row._previousData = previousRowData
+        }
+      }
+      resource.data = resource.transform(resource.originalData)
+    }
+  }
+}
+
+function revertRowInListResource(doctype, doc) {
+  let resources = listResources[doctype]
+  for (let resource of resources) {
+    if (resource.originalData) {
+      for (let row of resource.originalData) {
+        if (row.name && row.name == doc.name) {
+          let previousRowData = JSON.parse(row._previousData)
+          for (let key in row) {
+            row[key] = previousRowData[key]
+          }
+          delete row._previousData
+        }
+      }
+      resource.data = resource.transform(resource.originalData)
+    }
+  }
+}
+
 function createResourceForOptions(options, vm, getResource) {
   if (options.type === 'document') {
     return createDocumentResource(options, vm, getResource)

package/src/utils/socketio.js

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