frappe-ui 0.1.262 → 0.1.263

package/frappe/drive/js/resources.js

@@ -68,7 +68,7 @@ export const usersWithAccess = createResource({
 })
 
 export const updateAccess = createResource({
-  url: 'drive.api.files.call_controller_method',
+  url: 'drive.api.files.update_access',
   makeParams: (params) => ({ ...params, method: params.method || 'share' }),
   onError: (error) => toast.error(error.messages[0]),
 })
@@ -96,11 +96,10 @@ export const getTeam = createResource({
 })
 
 export const rename = createResource({
-  url: 'drive.api.files.call_controller_method',
+  url: 'drive.api.files.rename',
   method: 'POST',
   makeParams: (data) => {
     return {
-      method: 'rename',
       ...data,
     }
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frappe-ui",
-  "version": "0.1.262",
+  "version": "0.1.263",
   "description": "A set of components and utilities for rapid UI development",
   "type": "module",
   "sideEffects": false,

package/src/components/Checkbox/Checkbox.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="inline-flex space-x-2 rounded transition"
+    class="inline-flex gap-2 rounded transition"
     :class="{
       'px-2.5 py-1.5': padding && size === 'sm',
       'px-3 py-2': padding && size === 'md',

package/src/components/ListFilter/ListFilter.vue

@@ -26,7 +26,7 @@
           >
             <div class="flex flex-1 items-center gap-2">
               <div
-                class="w-13 flex-shrink-0 pl-2 text-end text-base text-ink-gray-5"
+                class="w-13 flex-shrink-0 ps-2 text-end text-base text-ink-gray-5"
               >
                 {{ i == 0 ? 'Where' : 'And' }}
               </div>

package/src/components/ListView/ListGroupHeader.vue

@@ -2,7 +2,7 @@
   <div class="flex items-center">
     <button
       @click="toggleGroup"
-      class="ml-[3px] mr-[11px] rounded p-1 hover:bg-surface-gray-2"
+      class="ms-[3px] me-[11px] rounded p-1 hover:bg-surface-gray-2"
     >
       <DownSolid
         class="h-4 w-4 text-ink-gray-6 transition-transform duration-200"
@@ -10,7 +10,7 @@
       />
     </button>
     <slot>
-      <div class="w-full py-1.5 pr-2">
+      <div class="w-full py-1.5 pe-2">
         <component
           v-if="list.slots['group-header']"
           :is="list.slots['group-header']"

package/src/components/ListView/ListHeader.vue

@@ -1,6 +1,6 @@
 <template>
   <div
-    class="mb-2 grid items-center space-x-4 rounded bg-surface-gray-2 p-2"
+    class="mb-2 grid items-center gap-4 rounded bg-surface-gray-2 p-2"
     :style="{
       gridTemplateColumns: getGridTemplateColumns(
         list.columns,

package/src/components/ListView/ListHeaderItem.vue

@@ -5,7 +5,7 @@
     :class="item.align ? alignmentMap[item.align] : 'justify-between'"
   >
     <div
-      class="flex items-center space-x-2 truncate text-sm text-ink-gray-5"
+      class="flex items-center gap-2 truncate text-sm text-ink-gray-5"
       :class="$attrs.class"
     >
       <slot name="prefix" v-bind="{ item }" />

package/src/components/ListView/ListRow.vue

@@ -22,7 +22,7 @@
       class="[all:unset] hover:[all:unset]"
     >
       <div
-        class="grid items-center space-x-4 px-2"
+        class="grid items-center gap-4 px-2"
         :style="{
           height: rowHeight,
           gridTemplateColumns: getGridTemplateColumns(
@@ -33,7 +33,7 @@
       >
         <div
           v-if="list.options.selectable"
-          class="w-fit pr-2 py-3 flex"
+          class="w-fit pe-2 py-3 flex"
           @click.stop.prevent
           @dblclick.stop
         >

package/src/components/ListView/ListRowItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex items-center space-x-2" :class="alignmentMap[align]">
+  <div class="flex items-center gap-2" :class="alignmentMap[align]">
     <slot name="prefix">
       <component
         v-if="column.prefix"

package/src/components/ListView/ListSelectBanner.vue

@@ -12,7 +12,7 @@
       class="absolute inset-x-0 bottom-6 mx-auto w-max text-base"
     >
       <div
-        class="flex min-w-[596px] items-center space-x-3 rounded-lg bg-surface-white px-4 py-2 shadow-2xl"
+        class="flex min-w-[596px] items-center gap-3 rounded-lg bg-surface-white px-4 py-2 shadow-2xl"
         :class="$attrs.class"
       >
         <slot
@@ -26,7 +26,7 @@
           <div
             class="flex flex-1 justify-between border-r border-outline-gray-2 text-ink-gray-9"
           >
-            <div class="flex items-center space-x-3">
+            <div class="flex items-center gap-3">
               <Checkbox
                 :modelValue="true"
                 :disabled="true"
@@ -34,7 +34,7 @@
               />
               <div>{{ selectedText }}</div>
             </div>
-            <div class="mr-3">
+            <div class="me-3">
               <slot
                 name="actions"
                 v-bind="{
@@ -46,7 +46,7 @@
               />
             </div>
           </div>
-          <div class="flex items-center space-x-1">
+          <div class="flex items-center gap-1">
             <Button
               class="w- text-ink-gray-7"
               :disabled="list.allRowsSelected"

package/src/components/Tabs/Tabs.vue

@@ -16,7 +16,7 @@ const model = defineModel<string | number>({ default: 0 })
 const indicatorXCss = `left-0 bottom-0 h-[2px] w-[--reka-tabs-indicator-size] transition-[width,transform]
                           translate-x-[--reka-tabs-indicator-position] translate-y-[1px]`
 
-const indicatorYCss = `right-0 top-0 w-[2px] h-[--reka-tabs-indicator-size]
+const indicatorYCss = `end-0 top-0 w-[2px] h-[--reka-tabs-indicator-size]
                        translate-y-[--reka-tabs-indicator-position] transition-[height,transform]`
 
 // Using a plain <button> element via `h('button')` to avoid picking up
@@ -41,7 +41,7 @@ defineSlots<{
     v-model="model"
   >
     <TabsList
-      class="relative min-h-fit flex data-[orientation=vertical]:flex-col p-1 border-b data-[orientation=vertical]:border-r gap-5"
+      class="relative min-h-fit flex data-[orientation=vertical]:flex-col p-1 border-b data-[orientation=vertical]:border-e gap-5"
       :class="{
         'overflow-x-auto overflow-y-hidden px-5': !props.vertical,
         'py-3': props.vertical,

package/src/components/TextEditor/components/MediaNodeView.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted, computed } from 'vue'
+import { ref, onMounted, onUnmounted, computed, h } from 'vue'
 import { NodeViewWrapper, nodeViewProps } from '@tiptap/vue-3'
 import LoadingIndicator from '../../LoadingIndicator.vue'
 import Tooltip from '../../Tooltip/Tooltip.vue'
+import { localFileMap } from '../extensions/image/image-extension'
 import { ErrorMessage } from '../../ErrorMessage'
 import LucideAlignLeft from '~icons/lucide/align-left'
 import LucideAlignCenter from '~icons/lucide/align-center'
@@ -13,6 +14,7 @@ import LucideFloatRight from '~icons/lucide/align-horizontal-justify-end'
 import LucideNoFloat from '~icons/lucide/align-vertical-space-around'
 import LucideCaptions from '~icons/lucide/captions'
 import LucideMoveDiagonal2 from '~icons/lucide/move-diagonal-2'
+import LucideRotateCw from '~icons/lucide/rotate-cw'
 
 const props = defineProps(nodeViewProps)
 
@@ -30,6 +32,8 @@ const floatButtonRef = ref<HTMLElement | null>(null)
 
 const showCaption = ref(props.node.attrs.alt ? true : false)
 const isVideo = computed(() => props.node.type.name === 'video')
+const isUploaded = computed(() => Boolean(props.node.attrs.src))
+const fileContent = computed(() => localFileMap.get(props.node.attrs.uploadId)?.b64)
 
 const currentAlignIcon = computed(() => {
   return (
@@ -273,14 +277,16 @@ const wrapperClasses = (float: string) => [
     ]" :style="{
       width: node.attrs.width ? `${node.attrs.width}px` : 'auto',
     }">
-      <div v-if="node.attrs.src" class="relative">
-        <img v-if="!isVideo" ref="mediaRef" class="rounded-[2px]" :src="node.attrs.src" :alt="node.attrs.alt || ''"
-          :width="node.attrs.width" :height="node.attrs.height" @click.stop="selectMedia" @load="handleMediaLoaded" />
-        <video v-else ref="mediaRef" class="rounded-[2px]" :src="node.attrs.src" :width="node.attrs.width"
-          :height="node.attrs.height" :autoplay="node.attrs.autoplay" :loop="node.attrs.loop" :muted="node.attrs.muted"
-          controls @click.stop="selectMedia" @loadedmetadata="handleMediaLoaded" />
-
-        <div class="absolute top-2 right-2 items-center bg-black/65 px-1.5 py-1 gap-2 rounded group-hover:flex"
+      <div v-if="isUploaded || fileContent" class="relative">
+        <img v-if="!isVideo" ref="mediaRef" class="rounded-[2px]" :class="!isUploaded && 'opacity-40'" :src="node.attrs.src || fileContent"
+          :alt="node.attrs.alt || ''" :width="node.attrs.width" :height="node.attrs.height"
+          @click.stop="selectMedia" @load="handleMediaLoaded" />
+        <video v-else ref="mediaRef" class="rounded-[2px]" :class="!isUploaded && 'opacity-40'" :src="node.attrs.src || fileContent"
+          :width="node.attrs.width" :height="node.attrs.height" :autoplay="node.attrs.autoplay"
+          :loop="node.attrs.loop" :muted="node.attrs.muted" :controls="isUploaded" @click.stop="selectMedia"
+          @loadedmetadata="handleMediaLoaded" />
+
+        <div v-if="isUploaded" class="absolute top-2 right-2 items-center bg-black/65 px-1.5 py-1 gap-2 rounded group-hover:flex"
           :class="selected && isEditable ? 'flex' : 'hidden'">
           <button>
             <LucideCaptions @click="toggleCaptions" class="size-4"
@@ -350,7 +356,16 @@ const wrapperClasses = (float: string) => [
           </div>
         </div>
 
-        <button v-if="selected && isEditable" class="absolute bottom-2 right-2 cursor-nw-resize bg-black/65 rounded p-1"
+        <Button
+          v-else
+          variant="solid"
+          class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2"
+          :icon-left="h(LucideRotateCw, { class: 'size-4' })"
+          label="Try again"
+          @click="isVideo ? editor.commands.reuploadVideo(node.attrs.uploadId) : editor.commands.reuploadImage(node.attrs.uploadId)"
+        />
+
+        <button v-if="selected && isEditable && isUploaded" class="absolute bottom-2 right-2 cursor-nw-resize bg-black/65 rounded p-1"
           @mousedown.prevent="startResize">
           <LucideMoveDiagonal2 class="text-white size-4" />
         </button>
@@ -364,14 +379,18 @@ const wrapperClasses = (float: string) => [
           </div>
         </div>
       </div>
+      <div v-else class="flex flex-col items-center justify-center gap-2 border rounded text-ink-gray-6 text-sm py-5 max-w-full" :class="{ 'border-none': selected }" :style="{ width: node.attrs.width + 'px', aspectRatio: node.attrs.width && node.attrs.height ? `${node.attrs.width} / ${node.attrs.height}` : undefined,}">
+        <div class="text-ink-gray-8 text-base">This {{ isVideo ? 'video' : 'image' }} hasn't yet been uploaded.</div>
+        <div v-if="node.attrs.error" class="text-sm text-ink-red-4">Upload failed: {{ node.attrs.error }}</div>
+      </div>
 
       <input v-if="(node.attrs.alt || showCaption) && !node.attrs.error" v-model="caption"
         class="w-full text-center bg-transparent text-sm text-ink-gray-6 h-7 border-none focus:ring-0 placeholder-ink-gray-4"
         placeholder="Add caption" :disabled="!isEditable" @change="updateCaption" @keydown="handleKeydown" />
 
-      <div v-if="node.attrs.error" class="w-full py-1.5">
-        <ErrorMessage :message="`Upload Failed: ${node.attrs.error}`" />
+      <div v-if="node.attrs.error && fileContent" class="w-full py-1.5 text-center">
+        <ErrorMessage :message="`Upload failed: ${node.attrs.error}`" />
       </div>
     </div>
   </NodeViewWrapper>
-</template>
+</template>

package/src/components/TextEditor/extensions/image/image-extension.ts

@@ -11,6 +11,8 @@ import { Node } from '@tiptap/pm/model'
 import { fileToBase64 } from '../../../../index'
 import { UploadedFile } from '../../../../utils/useFileUpload'
 
+export const localFileMap = new Map()
+
 export interface ImageExtensionOptions {
   /**
    * Function to handle image uploads
@@ -58,6 +60,10 @@ declare module '@tiptap/core' {
        * Set image float for text wrapping
        */
       setImageFloat: (float: 'left' | 'right' | null) => ReturnType
+      /**
+       * Re-upload a failed image using the file stored in localFileMap
+       */
+      reuploadImage: (uploadId: string) => ReturnType
     }
   }
 }
@@ -218,6 +224,45 @@ export const ImageExtension = NodeExtension.create<ImageExtensionOptions>({
           input.click()
           return true
         },
+
+      reuploadImage:
+        (uploadId: string) =>
+        ({ editor }) => {
+          const fileData = localFileMap.get(uploadId)
+          if (!fileData) {
+            console.error('reuploadImage: no file with uploadId', uploadId)
+            return false
+          }
+
+          // Find the node position
+          let nodePos: number | null = null
+          editor.view.state.doc.descendants((node, pos) => {
+            if (
+              node.type.name === 'image' &&
+              node.attrs.uploadId === uploadId
+            ) {
+              nodePos = pos
+              return false
+            }
+          })
+
+          if (nodePos === null) {
+            console.error(
+              'reuploadImage: could not find node with uploadId',
+              uploadId,
+            )
+            return false
+          }
+
+          // Re-run the upload using the stored file, replacing the node at its position
+          return uploadImageBase(
+            fileData.file,
+            editor.view,
+            nodePos,
+            this.options,
+            'replace',
+          )
+        },
     }
   },
 
@@ -369,6 +414,7 @@ function findInsertPosition(
 }
 
 // Base upload function shared by all image upload methods
+type ImageDimensions = { width: number | null; height: number | null }
 function uploadImageBase(
   file: File,
   view: EditorView,
@@ -387,10 +433,19 @@ function uploadImageBase(
 
   fileToBase64(file)
     .then((base64Result: string) => {
+      localFileMap.set(uploadId, { b64: base64Result, file })
+
+      return getImageDimensions(base64Result)
+        .catch(() => ({ width: null, height: null }))
+        .then((dimensions) => dimensions)
+    })
+    .then((dimensions: ImageDimensions) => {
       const node = view.state.schema.nodes.image.create({
         loading: true,
         uploadId,
-        src: base64Result,
+        src: null,
+        width: dimensions.width,
+        height: dimensions.height,
       })
 
       const tr = view.state.tr
@@ -438,22 +493,6 @@ function uploadImageBase(
 
       return options.uploadFunction(file)
     })
-    .then((uploadedImage: UploadedFile) => {
-      return getImageDimensions(uploadedImage.file_url)
-        .then((dimensions) => {
-          return {
-            ...uploadedImage,
-            width: dimensions.width,
-            height: dimensions.height,
-          } as UploadedFile & { width: number; height: number }
-        })
-        .catch(() => {
-          return uploadedImage as UploadedFile & {
-            width: number
-            height: number
-          }
-        })
-    })
     .then((uploadedImage) => {
       const transaction = view.state.tr
 
@@ -466,6 +505,7 @@ function uploadImageBase(
             height: uploadedImage.height || node.attrs.height,
             loading: false,
           })
+          localFileMap.delete(node.attrs.uploadId)
           return false
         }
       })

package/src/components/TextEditor/extensions/video-extension.ts

@@ -10,6 +10,7 @@ import { EditorView } from '@tiptap/pm/view'
 import { Node } from '@tiptap/pm/model'
 import { fileToBase64 } from '../../../index'
 import { UploadedFile } from '../../../utils/useFileUpload'
+import { localFileMap } from './image/image-extension'
 
 export interface VideoExtensionOptions {
   /**
@@ -58,6 +59,11 @@ declare module '@tiptap/core' {
        * Set video floating
        */
       setVideoFloat: (float: 'left' | 'right' | null) => ReturnType
+
+      /**
+       * Re-upload a failed video using the file stored in localFileMap
+       */
+      reuploadVideo: (uploadId: string) => ReturnType
     }
   }
 }
@@ -206,6 +212,48 @@ export const VideoExtension = NodeExtension.create<VideoExtensionOptions>({
           input.click()
           return true
         },
+
+      reuploadVideo:
+        (uploadId: string) =>
+        ({ editor }) => {
+          const fileData = localFileMap.get(uploadId)
+          if (!fileData) {
+            console.error(
+              'reuploadVideo: no file found in localFileMap for uploadId',
+              uploadId,
+            )
+            return false
+          }
+
+          // Find the node position
+          let nodePos: number | null = null
+          editor.view.state.doc.descendants((node, pos) => {
+            if (
+              node.type.name === 'video' &&
+              node.attrs.uploadId === uploadId
+            ) {
+              nodePos = pos
+              return false
+            }
+          })
+
+          if (nodePos === null) {
+            console.error(
+              'reuploadVideo: could not find node with uploadId',
+              uploadId,
+            )
+            return false
+          }
+
+          // Re-run the upload using the stored file, replacing the node at its position
+          return uploadVideoBase(
+            fileData.file,
+            editor.view,
+            nodePos,
+            this.options,
+            'replace',
+          )
+        },
     }
   },
 
@@ -353,6 +401,8 @@ function findInsertPosition(
 }
 
 // Base upload function shared by all video upload methods
+type VideoDimensions = { width: number | null; height: number | null }
+
 function uploadVideoBase(
   file: File,
   view: EditorView,
@@ -371,10 +421,23 @@ function uploadVideoBase(
 
   fileToBase64(file)
     .then((base64Result: string) => {
+      localFileMap.set(uploadId, { b64: base64Result, file })
+
+      const objectUrl = URL.createObjectURL(file)
+      return getVideoDimensions(objectUrl)
+        .catch((): VideoDimensions => ({ width: null, height: null }))
+        .then((dimensions: VideoDimensions) => {
+          URL.revokeObjectURL(objectUrl)
+          return dimensions
+        })
+    })
+    .then((dimensions: VideoDimensions) => {
       const node = view.state.schema.nodes.video.create({
         loading: true,
         uploadId,
-        src: base64Result,
+        src: null,
+        width: dimensions.width,
+        height: dimensions.height,
       })
 
       const tr = view.state.tr
@@ -422,22 +485,6 @@ function uploadVideoBase(
 
       return options.uploadFunction(file)
     })
-    .then((uploadedVideo: UploadedFile) => {
-      return getVideoDimensions(uploadedVideo.file_url)
-        .then((dimensions) => {
-          return {
-            ...uploadedVideo,
-            width: dimensions.width,
-            height: dimensions.height,
-          } as UploadedFile & { width: number; height: number }
-        })
-        .catch(() => {
-          return uploadedVideo as UploadedFile & {
-            width: number
-            height: number
-          }
-        })
-    })
     .then((uploadedVideo) => {
       const transaction = view.state.tr
 
@@ -450,6 +497,7 @@ function uploadVideoBase(
             height: uploadedVideo.height || node.attrs.height,
             loading: false,
           })
+          localFileMap.delete(node.attrs.uploadId)
           return false
         }
       })
@@ -466,6 +514,7 @@ function uploadVideoBase(
 
         view.state.doc.descendants((node, pos) => {
           if (node.type.name === 'video' && node.attrs.uploadId === uploadId) {
+            // width/height are preserved from ...node.attrs (pre-fetched from local file)
             transaction.setNodeMarkup(pos, undefined, {
               ...node.attrs,
               loading: false,
@@ -541,7 +590,7 @@ function updateNodeWithDimensions(
       }
     })
     .catch((error) => {
-      console.error('Could not upload video', error)
+      console.error('Could not get video dimensions', error)
     })
 }
 

package/src/resources/resources.js

@@ -98,6 +98,7 @@ export function createResource(options, vm) {
     try {
       out.promise = resourceFetcher({
         ...options,
+        onError: undefined,
         params: params || options.params,
       })
       let data = await out.promise