@cloudron/pankow 3.5.11 → 3.5.13

package/components/Dialog.vue

@@ -43,6 +43,10 @@ const props = defineProps({
     type: Boolean,
     default: false
   },
+  dismissable: {
+    type: Boolean,
+    default: true
+  },
   confirmLabel: String,
   rejectLabel: String,
   alternateLabel: String,
@@ -81,6 +85,7 @@ function onConfirm() {
 }
 
 function onDismiss() {
+  if (!props.dismissable) return;
   onReject();
 }
 

package/components/TableView.vue

@@ -22,6 +22,10 @@ const props = defineProps({
     validator(value, props) {
       return [ 'asc', 'desc' ].includes(value);
     }
+  },
+  fixedLayout: {
+    type: Boolean,
+    default: false,
   }
 });
 
@@ -92,13 +96,13 @@ onMounted(() => {
 <template>
   <div class="pankow-table-scroll-wrapper">
     <div class="pankow-table-wrapper">
-      <table class="pankow-table">
+      <table class="pankow-table" :class="{ 'pankow-table-layout-fixed': fixedLayout }">
         <thead class="pankow-table-header" v-if="sortedItems.length !== 0">
           <tr>
             <th v-for="column in Object.keys(columns)"
               class="pankow-table-header-column"
               :class="{ 'pankow-table-header-column-sortable': columns[column].sort, 'pankow-table-cell-hide-mobile': columns[column].hideMobile }"
-              :style="{ 'text-align': columns[column].align || null }"
+              :style="{ 'text-align': columns[column].align || null, width: typeof columns[column].width === 'string' ? columns[column].width : 'auto' }"
               @click="toggleSort(column)"
             >
               <Icon v-if="columns[column].icon" :icon="columns[column].icon" />
@@ -154,6 +158,10 @@ onMounted(() => {
   border-spacing: 0px;
 }
 
+.pankow-table-layout-fixed {
+  table-layout: fixed;
+}
+
 .pankow-table-header {
   top: 0;
   position: sticky;
@@ -186,6 +194,7 @@ onMounted(() => {
 .pankow-table-cell {
   padding: 5px;
   height: 100%;
+  overflow: hidden;
 }
 
 .pankow-table-row-with-hover:hover {
@@ -199,6 +208,7 @@ onMounted(() => {
 
 .pankow-table-cell-nowrap {
   white-space: nowrap;
+  text-overflow: ellipsis;
 }
 
 @media (max-width: 576px) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudron/pankow",
   "private": false,
-  "version": "3.5.11",
+  "version": "3.5.13",
   "description": "",
   "main": "index.js",
   "types": "types/index.d.ts",

package/style.css

@@ -23,7 +23,7 @@
 
   --pankow-color-light-dark: #ced4da;
 
-  --pankow-tooltip-background-color: rgba(0,0,0,0.5);
+  --pankow-tooltip-background-color: #333;
   --pankow-tooltip-text-color: white;
 
   --pankow-color-primary: #1a76bf;
@@ -100,9 +100,6 @@ input {
 
     --pankow-dialog-background-color: #32383e;
     --pankow-dialog-backdrop-color: rgba(0,0,0,.7);
-
-    --pankow-tooltip-background-color: rgba(255,255,255,0.5);
-    --pankow-tooltip-text-color: black;
   }
 }
 

package/tooltip.js

@@ -55,7 +55,7 @@ function update(target, value, modifiers, tooltip) {
     tooltip.innerText = value;
 
     // BOTTOM is default
-    const pos = modifiers.top ? TOP : (modifiers.left ? LEFT : (modifiers.RIGHT ? RIGHT : BOTTOM));
+    const pos = modifiers.top ? TOP : (modifiers.left ? LEFT : (modifiers.right ? RIGHT : BOTTOM));
 
     const targetRect = target.getBoundingClientRect();
     const tooltipRect = tooltip.getBoundingClientRect();