@cloudron/pankow 4.3.4 → 4.3.6

package/components/Button.vue

@@ -77,6 +77,7 @@ function onClick(event) {
   align-items: center;
   justify-content: center;
   display: inline-flex;
+  line-height: 1.2;
   cursor: pointer;
   border: 1px solid transparent;
   transition: background 250ms, border-color 250ms;
@@ -101,6 +102,12 @@ a.pankow-button:visited {
   margin-right: 7px;
 }
 
+.pankow-button [class^="fa-"],
+.pankow-button [class*=" fa-"],
+.pankow-button .fa {
+  line-height: inherit;
+}
+
 .pankow-button-icon-right-with-text {
   padding-left: 7px;
 }

package/components/CheckBox.vue

@@ -1,6 +1,7 @@
 <script setup>
 
 import { uuidv4 } from '../utils.js';
+import textOverflow from '../text-overflow.js';
 
 const props = defineProps({
   label: String,
@@ -13,13 +14,15 @@ const model = defineModel({ type: Boolean });
 
 const internalId = uuidv4();
 
+const vTextOverflow = textOverflow;
+
 </script>
 
 <template>
   <span class="pankow-checkbox">
     <input :id="id || internalId" class="pankow-checkbox-input" type="checkbox" v-model="model" :disabled="disabled" :required="$attrs['required']" @input="$emit('update:modelValue', $event.target.checked)"/>
     <slot>
-      <label :for="id || internalId" class="pankow-checkbox-input-label">
+      <label :for="id || internalId" class="pankow-checkbox-input-label" v-text-overflow>
         {{ label }}
         <sup v-if="helpUrl"><a :href="helpUrl" target="_blank" tabindex="-1"><i class="fa fa-question-circle"></i></a></sup>
       </label>

package/components/DirectoryView.vue

@@ -58,6 +58,7 @@
             :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"
@@ -77,6 +78,7 @@
             :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 +200,10 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  fileDropIndicatorProperty: {
+    type: String,
+    default: '',
+  },
   editable: {
     type: Boolean,
     default: true,
@@ -694,8 +700,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 +711,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 +779,7 @@ const contextMenuModel = [
     },
   },
   {
+    id: 'sep-actions-top',
     separator: true,
     visible: () =>
       props.showDownload ||
@@ -772,6 +790,7 @@ const contextMenuModel = [
       props.showSelectAll,
   },
   {
+    id: 'download',
     label: props.tr('filemanager.list.menu.download'),
     icon: 'fa-solid fa-download',
     action: onItemDownload,
@@ -779,6 +798,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 +806,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,12 +834,14 @@ 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,
@@ -824,12 +849,14 @@ const contextMenuModel = [
     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 +879,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 +892,7 @@ const contextMenuModel = [
     },
     visible: () => props.showDelete,
   },
-];
+]);
 
 const filteredSortedItems = computed(() => {
   invalidateSelected();
@@ -902,6 +931,9 @@ const filteredSortedItems = computed(() => {
 });
 
 defineExpose({
+  contextMenuModel,
+  contextMenuBodyModel,
+  focusItem,
   highlight,
   highlightByName,
 });

package/components/DirectoryViewGridItem.vue

@@ -19,6 +19,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>
 
@@ -62,6 +63,10 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  fileDropIndicatorProperty: {
+    type: String,
+    default: '',
+  },
   fallbackIcon: String,
   renameHandler: {
     type: Function,
@@ -323,6 +328,13 @@ defineExpose({
   font-size: 1rem;
 }
 
+.is-filedrop {
+  position: absolute;
+  left: 2px;
+  bottom: 2px;
+  font-size: 1rem;
+}
+
 .grid-item-label {
   width: 100%;
   text-align: center;

package/components/DirectoryViewListItem.vue

@@ -14,6 +14,7 @@
       <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 -->
@@ -81,6 +82,10 @@ const props = defineProps({
     type: String,
     default: '',
   },
+  fileDropIndicatorProperty: {
+    type: String,
+    default: '',
+  },
   fallbackIcon: String,
   renameHandler: {
     type: Function,
@@ -305,6 +310,7 @@ defineExpose({
   height: 45px;
   width: 45px;
   padding: 5px;
+  position: relative;
 }
 
 .icon > img {
@@ -341,6 +347,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;

package/index.js

@@ -59,6 +59,7 @@ import gestures from './gestures.js';
 import utils from './utils.js';
 import tooltip from './tooltip.js';
 import fallbackImage from './fallbackImage.js';
+import textOverflow from './text-overflow.js';
 
 export {
     BottomBar,
@@ -111,6 +112,7 @@ export {
     gestures,
     tooltip,
     fallbackImage,
+    textOverflow,
     utils,
 };
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudron/pankow",
   "private": false,
-  "version": "4.3.4",
+  "version": "4.3.6",
   "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",
-    "@fortawesome/fontawesome-free": "^7.3.0",
+    "@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,13 +48,16 @@
   },
   "devDependencies": {
     "@highlightjs/vue-plugin": "^2.1.0",
-    "@unhead/vue": "^2.1.15",
+    "@unhead/vue": "^3.2.1",
     "@vitejs/plugin-vue": "^6.0.8",
     "highlight.js": "^11.11.1",
     "typescript": "^7.0.2",
-    "vite": "^8.1.4",
+    "vite": "^8.1.5",
     "vite-ssg": "^28.3.0",
-    "vue": "^3.5.39",
-    "vue-router": "^5.1.0"
+    "vue": "^3.5.40",
+    "vue-router": "^5.2.0"
+  },
+  "allowScripts": {
+    "core-js": false
   }
 }

package/plugin.js

@@ -1,6 +1,7 @@
 import { createApp } from 'vue';
 import tooltip from './tooltip.js';
 import fallbackImage from './fallbackImage.js';
+import textOverflow from './text-overflow.js';
 import fetcher from './fetcher.js';
 import { setNotifyPosition } from './notifyState.js';
 import Notification from './components/Notification.vue';
@@ -11,6 +12,7 @@ export default {
     install(app, options = {}) {
         app.directive('tooltip', tooltip);
         app.directive('fallback-image', fallbackImage);
+        app.directive('text-overflow', textOverflow);
 
         if (options.fetcher) {
             if (options.fetcher.credentials !== undefined) {

package/style.css

@@ -34,6 +34,8 @@
   --pankow-tooltip-background-color: #333;
   --pankow-tooltip-text-color: white;
 
+  --pankow-color-border: #ddd;
+
   --pankow-color-primary: #1a76bf;
   --pankow-color-primary-hover: #0d89ec;
   --pankow-color-primary-active: #0b7ad1;
@@ -111,6 +113,8 @@ input {
     --pankow-color-background: #1b1e21;
     --pankow-color-background-hover: #1f2326;
 
+    --pankow-color-border: #495057;
+
     --pankow-dialog-background-color: #32383e;
     --pankow-dialog-backdrop-color: rgba(0,0,0,.7);
   }
@@ -211,6 +215,33 @@ textarea[disabled]:hover {
   text-align: center;
 }
 
+.pankow-text-overflow-tooltip {
+  position: fixed;
+  background: var(--pankow-color-background);
+  border: 1px solid var(--pankow-color-border);
+  border-radius: var(--pankow-border-radius);
+  padding: 8px 12px;
+  font-size: 13px;
+  z-index: 10000;
+  max-width: 400px;
+  white-space: normal;
+  word-break: break-word;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  pointer-events: none;
+}
+
+@media (prefers-color-scheme: dark) {
+  .pankow-text-overflow-tooltip {
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+  }
+}
+
+@media (hover: none) and (pointer: coarse) {
+  .pankow-text-overflow-tooltip {
+    display: none !important;
+  }
+}
+
 .has-error {
   color: var(--pankow-color-danger);
 }

package/text-overflow.js

@@ -0,0 +1,120 @@
+/**
+ * TextOverflow Directive
+ *
+ * Shows a cursor-following tooltip overlay only when the element's text content
+ * is actually clipped (scrollWidth > clientWidth).
+ *
+ * Usage:
+ * ```
+ * import textOverflow from 'pankow/text-overflow';
+ * app.directive('text-overflow', textOverflow);
+ * // <div v-text-overflow>{{ longText }}</div>
+ * ```
+ */
+
+const tooltips = {};
+let id = 0;
+
+function createOverlay() {
+    const el = document.createElement('div');
+    el.classList.add('pankow-text-overflow-tooltip');
+    el.style.display = 'none';
+    document.body.appendChild(el);
+    return el;
+}
+
+function isOverflowing(el) {
+    return el.scrollWidth > el.clientWidth;
+}
+
+/**
+ * Vue directive `mounted` hook.
+ * @param {HTMLElement} el
+ * @param {import('vue').DirectiveBinding} binding
+ * @param {import('vue').VNode} vnode
+ */
+function mounted(el, binding, vnode) {
+    el.__pankow_to_id = id++;
+
+    tooltips[el.__pankow_to_id] = {
+        overlay: null,
+        text: el.textContent || '',
+    };
+
+    el.addEventListener('mouseenter', onMouseEnter);
+    el.addEventListener('mouseleave', onMouseLeave);
+    el.addEventListener('mousemove', onMouseMove);
+}
+
+/**
+ * Vue directive `updated` hook.
+ * @param {HTMLElement} el
+ * @param {import('vue').DirectiveBinding} binding
+ * @param {import('vue').VNode} vnode
+ */
+function updated(el, binding, vnode) {
+    const state = tooltips[el.__pankow_to_id];
+    if (state) state.text = el.textContent || '';
+}
+
+/**
+ * Vue directive `beforeUnmount` hook.
+ * @param {HTMLElement} el
+ * @param {import('vue').DirectiveBinding} binding
+ * @param {import('vue').VNode} vnode
+ */
+function beforeUnmount(el, binding, vnode) {
+    el.removeEventListener('mouseenter', onMouseEnter);
+    el.removeEventListener('mouseleave', onMouseLeave);
+    el.removeEventListener('mousemove', onMouseMove);
+
+    const state = tooltips[el.__pankow_to_id];
+    if (state) {
+        if (state.overlay) state.overlay.remove();
+        delete tooltips[el.__pankow_to_id];
+    }
+}
+
+function onMouseEnter(event) {
+    const el = event.currentTarget;
+    if (!isOverflowing(el)) return;
+
+    const state = tooltips[el.__pankow_to_id];
+    if (!state) return;
+
+    if (!state.overlay) state.overlay = createOverlay();
+    state.overlay.textContent = state.text;
+    state.overlay.style.display = 'block';
+    updatePosition(event, state);
+}
+
+function onMouseLeave(event) {
+    const el = event.currentTarget;
+    const state = tooltips[el.__pankow_to_id];
+    if (!state || !state.overlay) return;
+    state.overlay.style.display = 'none';
+}
+
+function onMouseMove(event) {
+    const el = event.currentTarget;
+    const state = tooltips[el.__pankow_to_id];
+    updatePosition(event, state);
+}
+
+function updatePosition(event, state) {
+    if (!state || !state.overlay) return;
+    state.overlay.style.left = (event.clientX + 10) + 'px';
+    state.overlay.style.top = (event.clientY + 20) + 'px';
+}
+
+/**
+ * Vue directive for text-overflow tooltips. Register via `app.directive('text-overflow', textOverflow)`.
+ * @type {import('vue').Directive}
+ */
+const textOverflow = {
+    mounted,
+    updated,
+    beforeUnmount
+};
+
+export default textOverflow;

package/types/index.d.ts

@@ -53,7 +53,8 @@ import gestures from './gestures.js';
 import utils from './utils.js';
 import tooltip from './tooltip.js';
 import fallbackImage from './fallbackImage.js';
-export { BottomBar, BreadCrumb, Button, ButtonGroup, ClipboardAction, ClipboardButton, CheckBox, DateTimeInput, Dialog, DirectoryView, EmailInput, FileUploader, FormGroup, InputGroup, Icon, ListItem, InputDialog, LoginView, MainLayout, MaskedInput, Menu, MenuItem, SingleSelect, MultiSelect, Notification, NumberInput, OfflineBanner, PasswordInput, Popover, ProgressBar, RadioButton, SaveIndicator, SectionItem, SideBar, SplitLayout, Spinner, Switch, TableView, TableViewActionBar, TabView, TagInput, TextInput, TextInputRaw, TopBar, TreeView, fetcher, gestures, tooltip, fallbackImage, utils, };
+import textOverflow from './text-overflow.js';
+export { BottomBar, BreadCrumb, Button, ButtonGroup, ClipboardAction, ClipboardButton, CheckBox, DateTimeInput, Dialog, DirectoryView, EmailInput, FileUploader, FormGroup, InputGroup, Icon, ListItem, InputDialog, LoginView, MainLayout, MaskedInput, Menu, MenuItem, SingleSelect, MultiSelect, Notification, NumberInput, OfflineBanner, PasswordInput, Popover, ProgressBar, RadioButton, SaveIndicator, SectionItem, SideBar, SplitLayout, Spinner, Switch, TableView, TableViewActionBar, TabView, TagInput, TextInput, TextInputRaw, TopBar, TreeView, fetcher, gestures, tooltip, fallbackImage, textOverflow, utils, };
 export { CheckBox as Checkbox };
 export { RadioButton as Radiobutton };
 export { BreadCrumb as Breadcrumb };

package/types/text-overflow.d.ts

@@ -0,0 +1,19 @@
+/**
+ * TextOverflow Directive
+ *
+ * Shows a cursor-following tooltip overlay only when the element's text content
+ * is actually clipped (scrollWidth > clientWidth).
+ *
+ * Usage:
+ * ```
+ * import textOverflow from 'pankow/text-overflow';
+ * app.directive('text-overflow', textOverflow);
+ * // <div v-text-overflow>{{ longText }}</div>
+ * ```
+ */
+/**
+ * Vue directive for text-overflow tooltips. Register via `app.directive('text-overflow', textOverflow)`.
+ * @type {import('vue').Directive}
+ */
+declare const textOverflow: import('vue').Directive;
+export default textOverflow;