@cloudron/pankow 3.2.3 → 3.2.4

package/components/CircleChart.vue

@@ -0,0 +1,40 @@
+<script setup>
+
+import { computed } from 'vue';
+
+const props = defineProps({
+  values: Array,
+});
+
+// const normalizedValue = computed(() => {
+//   if (props.value < 0) return 0;
+//   if (props.value > 100) return 100;
+//   return props.value;
+// });
+
+// we want 100 to be the circumverence so we can neatly use percentage: radius = 100 / ( 3,14159 * 2 ) = 15,9155
+const radius = 15.9155;
+const stroke = 10;
+
+function calculateViewbox() {
+  return `0 0 ${radius*2+stroke} ${radius*2+stroke}`;
+}
+
+function calculateArcPath() {
+  return `M${radius+stroke/2} ${stroke/2} a ${radius} ${radius} 0 0 1 0 ${radius*2} a ${radius} ${radius} 0 0 1 0 -${radius*2}`;
+}
+
+</script>
+
+<template>
+  <div class="pankow-circle-chart">
+    <svg :viewBox="calculateViewbox()" xmlns="http://www.w3.org/2000/svg">
+      <path :d="calculateArcPath()" fill="none" stroke="red" :stroke-width="stroke" stroke-dasharray="75, 100" @click.stop="onClick('red')" />
+      <path :d="calculateArcPath()" fill="none" stroke="green" :stroke-width="stroke" stroke-dasharray="30, 100" @click.stop="onClick('green') "/>
+    </svg>
+  </div>
+</template>
+
+<style>
+
+</style>

package/components/TableView.vue

@@ -15,7 +15,7 @@
           <tr v-if="busy"><td :colspan="Object.keys(columns).length" style="text-align: center; padding: 20px;"><ProgressBar mode="indeterminate" :show-label="false" :slim="true"/></td></tr>
           <tr v-else-if="!busy && sortedItems.length === 0"><td :colspan="Object.keys(columns).length" class="pankow-table-placeholder">{{ placeholder }}</td></tr>
           <tr v-else class="pankow-table-row" :class="{ 'pankow-table-row-with-hover': hover }" v-for="item in sortedItems" @click="onRowClick(item)">
-            <td class="pankow-table-cell" v-for="column in Object.keys(columns)" :style="{ width: typeof columns[column].width === 'string' ? columns[column].width : 'auto' }" :class="{ 'pankow-table-cell-hide-mobile': columns[column].hideMobile }">
+            <td class="pankow-table-cell" v-for="column in Object.keys(columns)" :style="{ width: typeof columns[column].width === 'string' ? columns[column].width : 'auto' }" :class="{ 'pankow-table-cell-hide-mobile': columns[column].hideMobile, 'pankow-table-cell-nowrap': columns[column].nowrap }">
               <slot :name="column" v-if="$slots[column]" v-bind="item"/>
               <span v-if="!$slots[column]">{{ (column in item) ? (item[column].label || item[column]) : `TableView Error: item has no property '${column}' nor a template with that name` }}</span>
             </td>
@@ -178,6 +178,10 @@ export default {
   height: 50px;
 }
 
+.pankow-table-cell-nowrap {
+  white-space: nowrap;
+}
+
 @media (max-width: 576px) {
   .pankow-table-cell-hide-mobile {
     display: none;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudron/pankow",
   "private": false,
-  "version": "3.2.3",
+  "version": "3.2.4",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -19,7 +19,7 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.0",
-    "vite": "^7.0.4",
+    "vite": "^7.0.5",
     "vue": "^3.5.17"
   }
 }

package/utils.js

@@ -103,6 +103,21 @@ function prettyDate(value) {
     return fromNow(date);
 }
 
+function prettyShortDate(value) {
+    if (!value) return 'unknown';
+
+    const date = new Date(value);
+    if (isNaN(date.getTime()))  return 'unknown';
+
+    const formatter = new Intl.DateTimeFormat(undefined, {
+      timeStyle: 'medium'
+    });
+
+    const formattedDate = formatter.format(date);
+
+    return formattedDate;
+}
+
 function prettyLongDate(value) {
     if (!value) return 'unknown';
 
@@ -376,6 +391,7 @@ export {
     prettyBinarySize,
     prettyDecimalSize,
     prettyDate,
+    prettyShortDate,
     prettyLongDate,
     prettyFileSize,
     prettyEmailAddresses,
@@ -403,6 +419,7 @@ export default {
     prettyBinarySize,
     prettyDecimalSize,
     prettyDate,
+    prettyShortDate,
     prettyLongDate,
     prettyFileSize,
     prettyEmailAddresses,