@cloudron/pankow 3.3.0 → 3.4.0

package/components/SingleSelect.vue

@@ -55,6 +55,7 @@ const menuModel = computed(() => {
     return {
       label: item[props.optionLabel],
       disabled: item.disabled,
+      icon: item.icon,
       action: () => {
         if (selected.value === item) return;
 
@@ -160,7 +161,10 @@ onMounted(() => {
 <template>
   <div class="pankow-singleselect" :class="{ 'pankow-singleselect-disabled': disabled }" ref="elem" tabindex="0" @click="onClick" @keydown.enter="onOpen" @keydown.down.stop.prevent="onSelectNext" @keydown.up.stop.prevent="onSelectPrev" @keydown.esc.stop="onClose" @keydown.stop="onKeyDown($event)">
     <Menu ref="menu" :model="menuModel" :search-threshold="searchThreshold" :close-on-activation="true" @close="onMenuClosed"/>
-    {{ selected ? selected[optionLabel] : placeholder }}
+    <span>
+      <Icon v-if="selected ? selected.icon : false" :icon="selected.icon" style="margin-right: 6px" />
+      {{ selected ? selected[optionLabel] : placeholder }}
+    </span>
     <Icon icon="fa-solid fa-chevron-down" class="pankow-button-icon-right-with-text" />
   </div>
 </template>

package/package.json

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

package/types/utils.d.ts

@@ -35,6 +35,7 @@ export function prettyBinarySize(size: any, fallback: any): any;
 export function prettyDecimalSize(size: any, fallback: any): any;
 export function prettyDate(value: any): any;
 export function prettyShortDate(value: any): string;
+export function formatDate(format: any, value: any): any;
 export function prettyLongDate(value: any): string;
 export function prettyFileSize(value: any): string;
 export function prettyEmailAddresses(addresses: any): any;

package/utils.js

@@ -103,6 +103,35 @@ function prettyDate(value) {
     return fromNow(date);
 }
 
+function formatDate(format, value) {
+    const formatters = {
+        'hh:mm A': new Intl.DateTimeFormat('en', {
+            hour: '2-digit',
+            minute: '2-digit',
+            hour12: true
+        }),
+        'hh:mm:ss A': new Intl.DateTimeFormat('en', {
+            hour: '2-digit',
+            minute: '2-digit',
+            second: '2-digit',
+            hour12: true
+        }),
+        'DD MMM': new Intl.DateTimeFormat('en', {
+            day: '2-digit',
+            month: 'short'
+        }),
+        'DD MMM hh:mm A': new Intl.DateTimeFormat('en', {
+            day: '2-digit',
+            month: 'short',
+            hour: '2-digit',
+            minute: '2-digit',
+            hour12: true
+        })
+    };
+
+    return formatters[format].format(new Date(value));
+}
+
 function prettyShortDate(value) {
     if (!value) return 'unknown';
 
@@ -125,8 +154,11 @@ function prettyLongDate(value) {
     if (isNaN(date.getTime()))  return 'unknown';
 
     const formatter = new Intl.DateTimeFormat(undefined, {
-      dateStyle: 'long',
-      timeStyle: 'medium'
+      day: 'numeric',
+      month: 'short',
+      year: 'numeric',
+      hour: '2-digit',
+      minute: '2-digit',
     });
 
     const formattedDate = formatter.format(date);
@@ -392,6 +424,7 @@ export {
     prettyDecimalSize,
     prettyDate,
     prettyShortDate,
+    formatDate,
     prettyLongDate,
     prettyFileSize,
     prettyEmailAddresses,

package/components/CircleChart.vue

@@ -1,40 +0,0 @@
-<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>