frappe-ui 0.1.62 → 0.1.64

package/package.json

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

package/src/components/Avatar.vue

@@ -4,10 +4,11 @@
     :class="[sizeClasses, shapeClasses]"
   >
     <img
-      v-if="image"
+      v-if="image && !imgFetchError"
       :src="image"
       :alt="label"
       :class="[shapeClasses, 'h-full w-full object-cover']"
+      @error="(err) => handleImageError(err)"
     />
     <div
       v-else
@@ -36,7 +37,9 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { ref, computed } from 'vue'
+
+const imgFetchError = ref(false)
 
 interface AvatarProps {
   image?: string
@@ -125,4 +128,10 @@ const iconClasses = computed(() => {
     '3xl': 'h-5 w-5',
   }[props.size]
 })
+
+function handleImageError(err) {
+  if (err.type) {
+    imgFetchError.value = true
+  }
+}
 </script>

package/src/components/DateRangePicker.vue

@@ -107,7 +107,14 @@ import FeatherIcon from './FeatherIcon.vue'
 import TextInput from './TextInput.vue'
 export default {
   name: 'DateRangePicker',
-  props: ['modelValue', 'placeholder', 'formatter', 'readonly', 'inputClass'],
+  props: [
+    'value',
+    'modelValue',
+    'placeholder',
+    'formatter',
+    'readonly',
+    'inputClass',
+  ],
   emits: ['update:modelValue', 'change'],
   components: {
     Popover,

package/src/components/FileUploader.vue

@@ -51,11 +51,10 @@ export default {
     },
   },
   methods: {
-    openFileSelector(type) {
-      if (type) {
-        // change inputs filetype to accept the type of file you want to upload
-        this.$refs['input'].accept = type
-      }
+    inputRef() {
+      return this.$refs['input']
+    },
+    openFileSelector() {
       this.$refs['input'].click()
     },
     async onFileAdd(e) {
@@ -118,5 +117,6 @@ export default {
         })
     },
   },
+  expose: ['inputRef'],
 }
 </script>

package/src/components/ListView/ListRow.vue

@@ -1,7 +1,8 @@
 <template>
   <component
     :is="list.options.getRowRoute ? 'router-link' : 'div'"
-    class="flex cursor-pointer flex-col transition-all duration-300 ease-in-out"
+    :class="{ 'cursor-pointer': isHoverable }"
+    class="flex flex-col transition-all duration-300 ease-in-out"
     v-bind="{
       to: list.options.getRowRoute ? list.options.getRowRoute(row) : undefined,
       onClick: list.options.onRowClick
@@ -15,11 +16,14 @@
     >
       <div
         class="grid items-center space-x-4 rounded px-2"
-        :class="
-          list.selections.has(row[list.rowKey])
-            ? 'bg-gray-100 hover:bg-gray-200'
-            : 'hover:bg-gray-50'
-        "
+        :class="[
+          isSelected ? 'bg-gray-100' : '',
+          isHoverable
+            ? isSelected
+              ? 'hover:bg-gray-200'
+              : 'hover:bg-gray-50'
+            : '',
+        ]"
         :style="{
           height: rowHeight,
           gridTemplateColumns: getGridTemplateColumns(
@@ -91,6 +95,14 @@ const isLastRow = computed(() => {
   )
 })
 
+const isSelected = computed(() => {
+  return list.value.selections.has(props.row[list.value.rowKey])
+})
+
+const isHoverable = computed(() => {
+  return list.value.options.getRowRoute || list.value.options.onRowClick
+})
+
 const rowHeight = computed(() => {
   if (typeof list.value.options.rowHeight === 'number') {
     return `${list.value.options.rowHeight}px`

package/src/components/Popover.vue

@@ -144,6 +144,8 @@ export default {
     }
     if (this.hideOnBlur) {
       document.addEventListener('click', this.listener)
+      // https://github.com/tailwindlabs/headlessui/issues/834#issuecomment-1030907894
+      document.addEventListener('mousedown', this.listener)
     }
     this.$nextTick(() => {
       this.targetWidth = this.$refs['target'].clientWidth
@@ -152,6 +154,7 @@ export default {
   beforeDestroy() {
     this.popper && this.popper.destroy()
     document.removeEventListener('click', this.listener)
+    document.removeEventListener('mousedown', this.listener)
   },
   computed: {
     showPropPassed() {

package/src/index.js

@@ -59,6 +59,7 @@ export { default as Tooltip } from './components/Tooltip/Tooltip.vue'
 export { default as CommandPalette } from './components/CommandPalette/CommandPalette.vue'
 export { default as CommandPaletteItem } from './components/CommandPalette/CommandPaletteItem.vue'
 export { default as ListFilter } from './components/ListFilter/ListFilter.vue'
+export { default as NestedPopover } from './components/ListFilter/NestedPopover.vue'
 
 // directives
 export { default as onOutsideClickDirective } from './directives/onOutsideClick.js'

package/src/utils/tailwind.config.js

@@ -63,6 +63,10 @@ module.exports = {
             '> ul > li > *:last-child': {
               marginBottom: '0.5rem',
             },
+            '> ol > li p': {
+              marginTop: '0.5rem',
+              marginBottom: '0.5rem',
+            },
             '> ol > li > *:first-child': {
               marginTop: '0.5rem',
             },