@cloudron/pankow 3.2.3 → 3.2.5

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/MenuItem.vue

@@ -54,7 +54,7 @@ function onActivated() {
   display: flex;
   align-items: center;
   user-select: none;
-  padding: 6px 10px;
+  padding: 8px 10px;
   cursor: pointer;
   font-size: 14px; /* this also defines the overall widget size as all sizes are in rem */
   font-family: var(--font-family);

package/components/ProgressBar.vue

@@ -15,6 +15,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  busy: {
+    type: Boolean,
+    default: false,
+  },
   mode: String // only really "indeterminate" is supported
 });
 
@@ -29,7 +33,9 @@ const normalizedValue = computed(() => {
 <template>
   <div class="pankow-progress-bar">
     <div class="pankow-progress-bar-label" v-show="showLabel"><slot>{{ value + ' %' }}</slot></div>
-    <div v-if="mode !== 'indeterminate'" class="pankow-progress-bar-filled" :style="{ width: normalizedValue+'%', height: slim ? '2px' : '6px' }"></div>
+    <div v-if="mode !== 'indeterminate'" class="pankow-progress-bar-filled" :style="{ width: normalizedValue+'%', height: slim ? '2px' : '6px' }">
+      <div v-if="busy" class="pankow-progress-bar-glow" :style="{ height: slim ? '2px' : '6px' }"></div>
+    </div>
     <div v-else class="pankow-progress-bar-indeterminate" :style="{ height: slim ? '2px' : '6px' }"></div>
   </div>
 </template>
@@ -37,6 +43,7 @@ const normalizedValue = computed(() => {
 <style>
 
 .pankow-progress-bar {
+  position: relative;
   font-weight: 700;
   min-height: 12px;
   user-select: none;
@@ -56,6 +63,28 @@ const normalizedValue = computed(() => {
   height: 6px;
 }
 
+.pankow-progress-bar-glow {
+  width: 100%;
+  height: 6px;
+  display: inline-block;
+  position: absolute;
+  overflow: hidden;
+  border-radius: var(--pankow-border-radius);
+}
+
+.pankow-progress-bar-glow::after {
+  content: '';
+  width: 30%;
+  height: 100%;
+  background: linear-gradient(to right, transparent, rgba(255,255,255,0.7));
+  position: absolute;
+  top: 0;
+  left: 0;
+  box-sizing: border-box;
+  animation: pankow-progress-bar-indeterminate-animation 1.5s ease-in-out infinite;
+  border-radius: var(--pankow-border-radius);
+}
+
 .pankow-progress-bar-indeterminate {
   width: 100%;
   height: 6px;
@@ -70,7 +99,7 @@ const normalizedValue = computed(() => {
   content: '';
   width: 90%;
   height: 100%;
-  background: var(--pankow-color-primary);
+  background: linear-gradient(to right, transparent, var(--pankow-color-primary));
   position: absolute;
   top: 0;
   left: 0;

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/gallery/Index.vue

@@ -656,6 +656,8 @@ onMounted(async () => {
             <br/><br/>
             <ProgressBar :value="progressValue" />
             <br/>
+            <ProgressBar :value="progressValue" :busy="true" />
+            <br/>
             <ProgressBar :value="progressValue">Custom label with {{ progressValue }}</ProgressBar>
             <br/>
             <ProgressBar mode="indeterminate" :show-label="false"/>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudron/pankow",
   "private": false,
-  "version": "3.2.3",
+  "version": "3.2.5",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -13,13 +13,13 @@
   "license": "ISC",
   "dependencies": {
     "@fontsource/inter": "^5.2.6",
-    "@fortawesome/fontawesome-free": "^6.7.2",
+    "@fortawesome/fontawesome-free": "^7.0.0",
     "filesize": "^11.0.2",
     "monaco-editor": "^0.52.2"
   },
   "devDependencies": {
-    "@vitejs/plugin-vue": "^6.0.0",
-    "vite": "^7.0.4",
-    "vue": "^3.5.17"
+    "@vitejs/plugin-vue": "^6.0.1",
+    "vite": "^7.0.6",
+    "vue": "^3.5.18"
   }
 }

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,