@cloudron/pankow 4.3.6 → 4.4.0

package/components/DirectoryView.vue

@@ -56,7 +56,6 @@
             :show-size="showSize"
             :show-star="showStar"
             :show-modified="showModified"
-            :rename-handler="renameHandler"
             :share-indicator-property="shareIndicatorProperty"
             :file-drop-indicator-property="fileDropIndicatorProperty"
             :select-handler="onSelectAndFocus"
@@ -76,7 +75,6 @@
             :fallbackIcon="fallbackIcon"
             :item="item"
             :show-star="showStar"
-            :rename-handler="renameHandler"
             :share-indicator-property="shareIndicatorProperty"
             :file-drop-indicator-property="fileDropIndicatorProperty"
             :select-handler="onSelectAndFocus"
@@ -262,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() {
@@ -340,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');
@@ -610,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);
@@ -844,7 +830,7 @@ const contextMenuModel = ref([
     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,
   },

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)"
@@ -27,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>
@@ -51,7 +39,6 @@
 import { ref, onMounted } from 'vue';
 
 import Icon from './Icon.vue';
-import TextInput from './TextInput.vue';
 
 const props = defineProps({
   item: Object,
@@ -68,12 +55,6 @@ const props = defineProps({
     default: '',
   },
   fallbackIcon: String,
-  renameHandler: {
-    type: Function,
-    default() {
-      console.warn('Missing renameHandler for DirectoryViewGridItem');
-    },
-  },
   starHandler: {
     type: Function,
     default() {
@@ -103,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);
 
@@ -128,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;
 
@@ -228,7 +174,6 @@ onMounted(() => {
 
 defineExpose({
   highlight,
-  onRenameBegin,
   get $el() {
     return rowWrapper.value;
   },
@@ -346,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)"
@@ -21,22 +20,10 @@
       <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" />
@@ -58,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,
@@ -87,12 +73,6 @@ const props = defineProps({
     default: '',
   },
   fallbackIcon: String,
-  renameHandler: {
-    type: Function,
-    default() {
-      console.warn('Missing renameHandler for DirectoryViewItem');
-    },
-  },
   starHandler: {
     type: Function,
     default() {
@@ -122,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);
 
@@ -147,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;
 
@@ -247,7 +192,6 @@ onMounted(() => {
 
 defineExpose({
   highlight,
-  onRenameBegin,
   get $el() {
     return rowWrapper.value;
   },
@@ -372,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.6",
+  "version": "4.4.0",
   "description": "Vue 3 UI component library for Cloudron apps",
   "main": "index.js",
   "types": "types/index.d.ts",
@@ -48,7 +48,7 @@
   },
   "devDependencies": {
     "@highlightjs/vue-plugin": "^2.1.0",
-    "@unhead/vue": "^3.2.1",
+    "@unhead/vue": "^3.2.3",
     "@vitejs/plugin-vue": "^6.0.8",
     "highlight.js": "^11.11.1",
     "typescript": "^7.0.2",

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';
+                }
+            }
+        },
     };
 }