@cloudron/pankow 4.3.4 → 4.3.5

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/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.5",
   "description": "Vue 3 UI component library for Cloudron apps",
   "main": "index.js",
   "types": "types/index.d.ts",
@@ -38,7 +38,7 @@
   "license": "ISC",
   "dependencies": {
     "@fontsource/inter": "^5.2.8",
-    "@fortawesome/fontawesome-free": "^7.3.0",
+    "@fortawesome/fontawesome-free": "^7.3.1",
     "filesize": "^11.0.22",
     "monaco-editor": "^0.55.1",
     "online-3d-viewer": "^0.18.0"
@@ -48,13 +48,13 @@
   },
   "devDependencies": {
     "@highlightjs/vue-plugin": "^2.1.0",
-    "@unhead/vue": "^2.1.15",
+    "@unhead/vue": "^3.1.8",
     "@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"
   }
 }

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;