frappe-ui 0.0.43 → 0.0.46

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "frappe-ui",
-  "version": "0.0.43",
+  "version": "0.0.46",
   "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"
@@ -32,5 +33,13 @@
     "postcss": "^8.4.5",
     "socket.io-client": "^4.5.1",
     "tailwindcss": "^3.0.12"
+  },
+  "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/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/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/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

@@ -43,7 +43,7 @@
     <editor-content :editor="editor" />
     <span
       v-if="!content"
-      class="absolute inset-y-0 text-base text-gray-500 pointer-events-none"
+      class="absolute top-0 text-base text-gray-500 pointer-events-none"
     >
       {{ placeholder }}
     </span>
@@ -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/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-start',
+    },
+    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/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

@@ -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',
@@ -212,6 +213,7 @@ export function createDocumentResource(options, vm) {
         },
         onSuccess(data) {
           out.doc = transform(data)
+          options.onSuccess?.call(vm, out.doc)
         },
         onError: options.onError,
       },
@@ -237,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,
       },
@@ -294,8 +298,6 @@ export function createDocumentResource(options, vm) {
     return doc
   }
 
-  // fetch the doc
-  out.get.fetch()
   // cache
   documentCache[cacheKey] = out
   return out
@@ -322,6 +324,7 @@ export function createListResource(options, vm, getResource) {
     data: null,
     next,
     hasNextPage: true,
+    auto: true,
     list: createResource(
       {
         method: 'frappe.client.get_list',
@@ -450,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) {
@@ -480,9 +482,6 @@ export function createListResource(options, vm, getResource) {
     out.list.fetch()
   }
 
-  // fetch list
-  out.list.fetch()
-
   if (cacheKey) {
     // cache
     listCache[cacheKey] = out
@@ -495,7 +494,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) {
@@ -514,8 +513,20 @@ 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]
+  let resources = listResources[doctype] || []
   for (let resource of resources) {
     if (resource.originalData) {
       for (let row of resource.originalData) {
@@ -592,7 +603,7 @@ let createMixin = (mixinOptions) => ({
                 resource.update(updatedOptions)
               }
               if (resource && resource.auto) {
-                resource.fetch()
+                resource.reload()
               }
             },
             {
@@ -606,8 +617,8 @@ let createMixin = (mixinOptions) => ({
             mixinOptions.getResource
           )
           this._resources[key] = resource
-          if (resource.auto) {
-            resource.fetch()
+          if (resource && resource.auto) {
+            resource.reload()
           }
         }
       }

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