@cloudron/pankow 4.3.5 → 4.4.0

package/components/DirectoryView.vue

@@ -56,8 +56,8 @@
             :show-size="showSize"
             :show-star="showStar"
             :show-modified="showModified"
-            :rename-handler="renameHandler"
             :share-indicator-property="shareIndicatorProperty"
+            :file-drop-indicator-property="fileDropIndicatorProperty"
             :select-handler="onSelectAndFocus"
             :drop-handler="onDrop"
             :can-drop-handler="onCanDropHandler"
@@ -75,8 +75,8 @@
             :fallbackIcon="fallbackIcon"
             :item="item"
             :show-star="showStar"
-            :rename-handler="renameHandler"
             :share-indicator-property="shareIndicatorProperty"
+            :file-drop-indicator-property="fileDropIndicatorProperty"
             :select-handler="onSelectAndFocus"
             :drop-handler="onDrop"
             :can-drop-handler="onCanDropHandler"
@@ -198,6 +198,10 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  fileDropIndicatorProperty: {
+    type: String,
+    default: '',
+  },
   editable: {
     type: Boolean,
     default: true,
@@ -256,12 +260,6 @@ const props = defineProps({
       console.warn('Missing deleteHandler for DirectoryView');
     },
   },
-  renameHandler: {
-    type: Function,
-    default() {
-      console.warn('Missing renameHandler for DirectoryView');
-    },
-  },
   changeOwnerHandler: {
     type: Function,
     default() {
@@ -334,7 +332,7 @@ const props = defineProps({
   },
 });
 
-const emit = defineEmits(['selectionChanged', 'item-activated']);
+const emit = defineEmits(['selectionChanged', 'item-activated', 'rename-requested']);
 
 const gridBody = useTemplateRef('gridBody');
 const contextMenu = useTemplateRef('contextMenu');
@@ -604,12 +602,6 @@ function onItemShare() {
   props.shareHandler(focusItem.value);
 }
 
-function onItemRenameBegin() {
-  if (selectedCount.value !== 1) return console.warn('onItemRenameBegin should only be triggered if one item is selected');
-
-  elements[focusItem.value.id]?.onRenameBegin();
-}
-
 async function onChangeOwnerDialogSubmit(items, newOwnerUid) {
   changeOwnerDialog.busy = true;
   await props.changeOwnerHandler(items, newOwnerUid);
@@ -694,8 +686,9 @@ function onSelectAndFocus(item, event, keepSelected = false) {
   invalidateSelected();
 }
 
-const contextMenuBodyModel = [
+const contextMenuBodyModel = ref([
   {
+    id: 'paste-body',
     label: props.tr('filemanager.list.menu.paste'),
     icon: 'fa-regular fa-paste',
     disabled: () => !clipboard.files || !clipboard.files.length,
@@ -704,56 +697,66 @@ const contextMenuBodyModel = [
     },
   },
   {
+    id: 'select-all-body',
     label: props.tr('filemanager.list.menu.selectAll'),
     icon: 'fa-solid fa-check-double',
     action: onSelectAll,
   },
   {
+    id: 'sep-body1',
     separator: true,
     visible: () => typeof props.refreshHandler === 'function',
   },
   {
+    id: 'refresh-body',
     label: props.tr('filemanager.toolbar.refresh'),
     icon: 'fa-solid fa-arrow-rotate-right',
     visible: () => typeof props.refreshHandler === 'function',
     action: props.refreshHandler,
   },
   {
+    id: 'sep-body2',
     separator: true,
     visible: () => props.showNewFile || props.showNewFolder,
   },
   {
+    id: 'new-file-body',
     label: props.tr('filemanager.toolbar.newFile'),
     icon: 'fa-solid fa-file-circle-plus',
     action: props.newFileHandler,
     visible: () => props.showNewFile,
   },
   {
+    id: 'new-folder-body',
     label: props.tr('filemanager.toolbar.newFolder'),
     icon: 'fa-solid fa-folder-plus',
     action: props.newFolderHandler,
     visible: () => props.showNewFolder,
   },
   {
+    id: 'sep-body3',
     separator: true,
     visible: () => props.showUploadFile || props.showUploadFolder,
   },
   {
+    id: 'upload-file-body',
     label: props.tr('filemanager.toolbar.uploadFile'),
     icon: 'fa-solid fa-file-arrow-up',
     action: props.uploadFileHandler,
     visible: () => props.showUploadFile,
   },
   {
+    id: 'upload-folder-body',
     label: props.tr('filemanager.toolbar.uploadFolder'),
     icon: 'fa-regular fa-folder-open',
     action: props.uploadFolderHandler,
     visible: () => props.showUploadFolder,
   },
-];
+]);
 
-const contextMenuModel = [
+const contextMenuModel = ref([
   {
+    id: 'open',
     label: props.tr('filemanager.list.menu.open'),
     icon: 'fa-regular fa-folder-open',
     disabled: () => selectedCount.value > 1,
@@ -762,6 +765,7 @@ const contextMenuModel = [
     },
   },
   {
+    id: 'sep-actions-top',
     separator: true,
     visible: () =>
       props.showDownload ||
@@ -772,6 +776,7 @@ const contextMenuModel = [
       props.showSelectAll,
   },
   {
+    id: 'download',
     label: props.tr('filemanager.list.menu.download'),
     icon: 'fa-solid fa-download',
     action: onItemDownload,
@@ -779,6 +784,7 @@ const contextMenuModel = [
     disabled: () => (props.multiDownload ? selectedCount.value === 0 : selectedCount.value !== 1),
   },
   {
+    id: 'share',
     label: props.tr('filemanager.list.menu.share'),
     icon: 'fa-solid fa-share-nodes',
     action: onItemShare,
@@ -786,18 +792,21 @@ const contextMenuModel = [
     visible: () => props.showShare,
   },
   {
+    id: 'copy',
     label: props.tr('filemanager.list.menu.copy'),
     icon: 'fa-regular fa-copy',
     action: onItemsCopy,
     visible: () => props.showCopy,
   },
   {
+    id: 'cut',
     label: props.tr('filemanager.list.menu.cut'),
     icon: 'fa-solid fa-scissors',
     action: onItemsCut,
     visible: () => props.showCut,
   },
   {
+    id: 'paste',
     label: props.tr('filemanager.list.menu.paste'),
     icon: 'fa-regular fa-paste',
     visible: () => props.showPaste,
@@ -811,25 +820,29 @@ const contextMenuModel = [
     },
   },
   {
+    id: 'select-all',
     label: props.tr('filemanager.list.menu.selectAll'),
     icon: 'fa-solid fa-check-double',
     visible: () => props.showSelectAll,
     action: onSelectAll,
   },
   {
+    id: 'rename',
     label: props.tr('filemanager.list.menu.rename'),
     icon: 'fa-regular fa-pen-to-square',
-    action: onItemRenameBegin,
+    action: () => emit('rename-requested', focusItem.value),
     visible: () => props.showRename,
     disabled: () => !props.editable || selectedCount.value > 1,
   },
   {
+    id: 'chown',
     label: props.tr('filemanager.list.menu.chown'),
     icon: 'fa-solid fa-user-pen',
     action: onItemsChangeOwner,
     visible: () => props.showOwner,
   },
   {
+    id: 'extract',
     label: props.tr('filemanager.list.menu.extract'),
     action: onItemExtract,
     visible: () => {
@@ -852,10 +865,12 @@ const contextMenuModel = [
     },
   },
   {
+    id: 'sep-actions-bottom',
     separator: true,
     visible: () => props.showDelete,
   },
   {
+    id: 'delete',
     label: props.tr('filemanager.list.menu.delete'),
     icon: 'fa-regular fa-trash-can',
     action: () => {
@@ -863,7 +878,7 @@ const contextMenuModel = [
     },
     visible: () => props.showDelete,
   },
-];
+]);
 
 const filteredSortedItems = computed(() => {
   invalidateSelected();
@@ -902,6 +917,9 @@ const filteredSortedItems = computed(() => {
 });
 
 defineExpose({
+  contextMenuModel,
+  contextMenuBodyModel,
+  focusItem,
   highlight,
   highlightByName,
 });

package/components/DirectoryViewGridItem.vue

@@ -1,6 +1,5 @@
 <template>
   <div ref="rowWrapper" class="grid-item-wrapper"
-    :draggable="!rename"
     @mouseup="onSelect($event)"
     @drop="onDrop($event)"
     @dragover="onDragOver($event)"
@@ -19,6 +18,7 @@
         <template v-if="visible">
           <img :src="item.previewUrl || item.icon" ref="iconImage" @error="iconError($event)"/>
           <i v-show="shareIndicatorProperty !== '' && !!item[shareIndicatorProperty]" class="fa-solid fa-share-nodes is-shared"></i>
+          <i v-show="fileDropIndicatorProperty !== '' && !!item[fileDropIndicatorProperty]" class="fa-solid fa-cloud-arrow-up is-filedrop"></i>
         </template>
       </div>
 
@@ -26,21 +26,10 @@
       <div v-if="!visible">
         {{ item.name }}
       </div>
-      <div v-else-if="visible && !rename" class="grid-item-label" :title="item.name + (item.target ? ` → ${item.target}` : '')">
+      <div v-else-if="visible" class="grid-item-label" :title="item.name + (item.target ? ` → ${item.target}` : '')">
         <a v-if="item.href" class="open-action" @dblclick.stop @click="onOpen($event)" :href="item.href">{{ item.name }}</a>
         <span v-else>{{ item.name }}</span>
       </div>
-      <div v-else-if="visible && rename" ref="renameCell" class="grid-item-label grid-item-rename">
-        <TextInput
-          v-model="newName"
-          :disabled="renameBusy"
-          @blur="onRenameEnd"
-          @dblclick.stop
-          @keydown.enter.stop="onRenameSubmit"
-          @keydown.esc.stop="onRenameEnd"
-          @keydown.stop
-          />
-      </div>
     </div>
   </div>
 </template>
@@ -50,7 +39,6 @@
 import { ref, onMounted } from 'vue';
 
 import Icon from './Icon.vue';
-import TextInput from './TextInput.vue';
 
 const props = defineProps({
   item: Object,
@@ -62,13 +50,11 @@ const props = defineProps({
     type: String,
     default: '',
   },
-  fallbackIcon: String,
-  renameHandler: {
-    type: Function,
-    default() {
-      console.warn('Missing renameHandler for DirectoryViewGridItem');
-    },
+  fileDropIndicatorProperty: {
+    type: String,
+    default: '',
   },
+  fallbackIcon: String,
   starHandler: {
     type: Function,
     default() {
@@ -98,12 +84,8 @@ const props = defineProps({
 const emit = defineEmits(['activated', 'action-menu']);
 
 const rowWrapper = ref(null);
-const renameCell = ref(null);
 
 const visible = ref(false);
-const rename = ref(false);
-const renameBusy = ref(false);
-const newName = ref('');
 const dropTargetActive = ref(false);
 const previewRetries = ref(0);
 
@@ -123,37 +105,6 @@ function onActionMenu(event) {
   emit('action-menu', props.item, event);
 }
 
-function onRenameBegin() {
-  rename.value = true;
-  newName.value = props.item.name;
-
-  setTimeout(() => {
-    const elem = renameCell.value?.querySelector('input.pankow-text-input');
-    if (!elem) return;
-
-    elem.focus();
-
-    if (typeof elem.selectionStart !== 'undefined') {
-      elem.selectionStart = 0;
-      elem.selectionEnd = props.item.name.lastIndexOf('.');
-    }
-  }, 0);
-}
-
-function onRenameEnd() {
-  rename.value = false;
-  renameBusy.value = false;
-  newName.value = '';
-}
-
-async function onRenameSubmit() {
-  if (!newName.value) return;
-
-  renameBusy.value = true;
-  await props.renameHandler(props.item, newName.value);
-  onRenameEnd();
-}
-
 function onOpen(event) {
   if (event.ctrlKey || event.metaKey) return;
 
@@ -223,7 +174,6 @@ onMounted(() => {
 
 defineExpose({
   highlight,
-  onRenameBegin,
   get $el() {
     return rowWrapper.value;
   },
@@ -323,6 +273,13 @@ defineExpose({
   font-size: 1rem;
 }
 
+.is-filedrop {
+  position: absolute;
+  left: 2px;
+  bottom: 2px;
+  font-size: 1rem;
+}
+
 .grid-item-label {
   width: 100%;
   text-align: center;
@@ -334,18 +291,6 @@ defineExpose({
   padding: 0 2px;
 }
 
-.grid-item-rename {
-  overflow: hidden;
-}
-
-.grid-item-rename :deep(input) {
-  width: 100%;
-  box-sizing: border-box;
-  text-align: center;
-  font-size: 0.85rem;
-  padding: 1px 4px;
-}
-
 .grid-item-star {
   position: absolute;
   top: 4px;

package/components/DirectoryViewListItem.vue

@@ -1,6 +1,5 @@
 <template>
   <div ref="rowWrapper" class="row-wrapper"
-    :draggable="!rename"
     @mouseup="onSelect($event)"
     @drop="onDrop($event)"
     @dragover="onDragOver($event)"
@@ -14,28 +13,17 @@
       <div v-if="visible" class="col icon">
         <img :src="item.previewUrl || item.icon" ref="iconImage" @error="iconError($event)"/>
         <i v-show="shareIndicatorProperty !== '' && !!item[shareIndicatorProperty]" class="fa-solid fa-share-nodes is-shared"></i>
+        <i v-show="fileDropIndicatorProperty !== '' && !!item[fileDropIndicatorProperty]" class="fa-solid fa-cloud-arrow-up is-filedrop"></i>
       </div>
 
       <!-- this is just a placeholder label to allow the native browser search to work -->
       <div v-if="!visible">
         {{ item.name }}
       </div>
-      <div v-else-if="visible && !rename" class="col label">
+      <div v-else-if="visible" class="col label">
         <a v-show="item.href" class="open-action" @dblclick.stop @click="onOpen($event)" :href="item.href">{{ item.name }} {{ item.target ? `-> ${item.target}` : '' }}</a>
         <span v-show="!item.href">{{ item.name }} {{ item.target ? `→ ${item.target}` : '' }}</span>
       </div>
-      <div v-else-if="visible && rename" ref="renameCell" class="col label rename">
-        <TextInput
-          ref="renameInput"
-          v-model="newName"
-          :disabled="renameBusy"
-          @blur="onRenameEnd"
-          @dblclick.stop
-          @keydown.enter.stop="onRenameSubmit"
-          @keydown.esc.stop="onRenameEnd"
-          @keydown.stop
-          />
-      </div>
 
       <div v-if="visible && showStar" class="col star">
         <Icon :icon="`${item.star ? 'fa-solid' : 'fa-regular'} fa-star`" class="star-icon" :class="{ 'star-visible': item.star }" @dblclick.stop.prevent @click.stop.prevent="onToggleStar" />
@@ -57,7 +45,6 @@ import { ref, onMounted } from 'vue';
 import { prettyDate, prettyFileSize } from '../utils.js';
 
 import Icon from './Icon.vue';
-import TextInput from './TextInput.vue';
 
 const props = defineProps({
   item: Object,
@@ -81,13 +68,11 @@ const props = defineProps({
     type: String,
     default: '',
   },
-  fallbackIcon: String,
-  renameHandler: {
-    type: Function,
-    default() {
-      console.warn('Missing renameHandler for DirectoryViewItem');
-    },
+  fileDropIndicatorProperty: {
+    type: String,
+    default: '',
   },
+  fallbackIcon: String,
   starHandler: {
     type: Function,
     default() {
@@ -117,12 +102,8 @@ const props = defineProps({
 const emit = defineEmits(['activated', 'action-menu']);
 
 const rowWrapper = ref(null);
-const renameCell = ref(null);
 
 const visible = ref(false);
-const rename = ref(false);
-const renameBusy = ref(false);
-const newName = ref('');
 const dropTargetActive = ref(false);
 const previewRetries = ref(0);
 
@@ -142,37 +123,6 @@ function onActionMenu(event) {
   emit('action-menu', props.item, event);
 }
 
-function onRenameBegin() {
-  rename.value = true;
-  newName.value = props.item.name;
-
-  setTimeout(() => {
-    const elem = renameCell.value?.querySelector('input.pankow-text-input');
-    if (!elem) return;
-
-    elem.focus();
-
-    if (typeof elem.selectionStart !== 'undefined') {
-      elem.selectionStart = 0;
-      elem.selectionEnd = props.item.name.lastIndexOf('.');
-    }
-  }, 0);
-}
-
-function onRenameEnd() {
-  rename.value = false;
-  renameBusy.value = false;
-  newName.value = '';
-}
-
-async function onRenameSubmit() {
-  if (!newName.value) return;
-
-  renameBusy.value = true;
-  await props.renameHandler(props.item, newName.value);
-  onRenameEnd();
-}
-
 function onOpen(event) {
   if (event.ctrlKey || event.metaKey) return;
 
@@ -242,7 +192,6 @@ onMounted(() => {
 
 defineExpose({
   highlight,
-  onRenameBegin,
   get $el() {
     return rowWrapper.value;
   },
@@ -305,6 +254,7 @@ defineExpose({
   height: 45px;
   width: 45px;
   padding: 5px;
+  position: relative;
 }
 
 .icon > img {
@@ -341,6 +291,13 @@ defineExpose({
   font-size: 1.2rem
 }
 
+.is-filedrop {
+  position: absolute;
+  left: 2px;
+  bottom: 0;
+  font-size: 1.2rem
+}
+
 .label {
   padding-left: 5px;
   flex-grow: 1;
@@ -359,10 +316,6 @@ defineExpose({
   display: block;
 }
 
-.label.rename > button {
-  display: block;
-}
-
 .size {
   width: 100px;
   margin: auto;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudron/pankow",
   "private": false,
-  "version": "4.3.5",
+  "version": "4.4.0",
   "description": "Vue 3 UI component library for Cloudron apps",
   "main": "index.js",
   "types": "types/index.d.ts",
@@ -37,10 +37,10 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@fontsource/inter": "^5.2.8",
+    "@fontsource/inter": "^5.3.0",
     "@fortawesome/fontawesome-free": "^7.3.1",
     "filesize": "^11.0.22",
-    "monaco-editor": "^0.55.1",
+    "monaco-editor": "^0.56.0",
     "online-3d-viewer": "^0.18.0"
   },
   "peerDependencies": {
@@ -48,7 +48,7 @@
   },
   "devDependencies": {
     "@highlightjs/vue-plugin": "^2.1.0",
-    "@unhead/vue": "^3.1.8",
+    "@unhead/vue": "^3.2.3",
     "@vitejs/plugin-vue": "^6.0.8",
     "highlight.js": "^11.11.1",
     "typescript": "^7.0.2",
@@ -56,5 +56,8 @@
     "vite-ssg": "^28.3.0",
     "vue": "^3.5.40",
     "vue-router": "^5.2.0"
+  },
+  "allowScripts": {
+    "core-js": false
   }
 }

package/vite-plugin.js

@@ -1,5 +1,6 @@
-import { dirname } from 'node:path';
+import { dirname, resolve } from 'node:path';
 import { fileURLToPath } from 'node:url';
+import { existsSync } from 'node:fs';
 
 const __dirname = dirname(fileURLToPath(import.meta.url));
 
@@ -25,6 +26,15 @@ export default function pankowPlugin() {
             if (Array.isArray(allow) && !allow.includes(__dirname)) {
                 allow.push(__dirname);
             }
-        }
+        },
+        resolveId(source) {
+            if (source.includes('?worker') && source.startsWith('monaco-editor/esm/vs/')) {
+                const cleanId = source.replace(/\?worker$/, '');
+                const filePath = resolve(__dirname, 'node_modules/', cleanId + '.js');
+                if (existsSync(filePath)) {
+                    return filePath + '?worker';
+                }
+            }
+        },
     };
 }