@cloudron/pankow 3.5.4 → 3.5.6

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

@@ -287,7 +287,7 @@ defineExpose({
     <div class="pankow-menu-backdrop" @click="onBackdrop($event)" @contextmenu="onBackdrop($event)" v-show="isOpen"></div>
     <Transition :name="rollUp ? 'pankow-roll-up' : 'pankow-roll-down'">
       <div class="pankow-menu" v-show="isOpen" ref="container" tabindex="0" @keydown.up.stop="selectUp()" @keydown.down.stop="selectDown()" @keydown.esc.stop="close()" @keydown="onKeyDown">
-        <TextInput placeholder="Filter ..." @keydown.up.stop="selectUp()" @keydown.down.stop="selectDown()" @keydown.stop @keydown.esc.stop="close()" @click.stop style="width: 100%; border: 0; padding: 8px 12px;" v-model="searchString" v-if="searchThreshold < model.length"/>
+        <TextInput placeholder="Filter ..." autocomplete="off" @keydown.up.stop="selectUp()" @keydown.down.stop="selectDown()" @keydown.stop @keydown.esc.stop="close()" @click.stop style="width: 100%; border: 0; padding: 8px 12px;" v-model="searchString" v-if="searchThreshold < model.length"/>
         <component v-for="item in visibleItems" ref="itemElements" :is="item.type || (item.href ? MenuItemLink : MenuItem)" @activated="onItemActivated(item)" :item="item" :has-icons="hasIcons" />
         <MenuItem v-if="model.length === 0" :item="emptyItem"/>
       </div>

package/components/Popover.vue

@@ -134,7 +134,8 @@ defineExpose({
     openEventTimeStamp.value = event.timeStamp;
 
     event.preventDefault();
-  }
+  },
+  close,
 });
 
 </script>

package/components/Radiobutton.vue

@@ -1,6 +1,6 @@
 <template>
   <span class="pankow-radio">
-    <input :name="name" :id="id || internalId" class="pankow-radio-input" type="radio" v-model="internalValue" :value="value" :disabled="disabled"/>
+    <input :name="name" :id="id || internalId" class="pankow-radio-input" type="radio" v-model="internalValue" :value="value" :disabled="disabled" :required="$attrs['required']"/>
     <slot>
       <label :for="id || internalId" class="pankow-radio-input-label">{{ label }}</label>
     </slot>

package/components/SingleSelect.vue

@@ -74,6 +74,7 @@ const menuModel = computed(() => {
   });
 });
 
+const nativeSelect = useTemplateRef('nativeSelect');
 function selectIndex(index) {
   const item = props.options[index];
 
@@ -84,6 +85,11 @@ function selectIndex(index) {
 
   model.value = newValue;
   emits('select', newValue);
+
+  // let the browser know about the changes
+  nativeSelect.value.value = newValue;
+  nativeSelect.value.dispatchEvent(new Event('input', { bubbles: true }));
+  nativeSelect.value.dispatchEvent(new Event('change', { bubbles: true }));
 }
 
 function onMenuClosed() {
@@ -163,7 +169,7 @@ 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)">
     <!-- native select for required and accessibility handling -->
-    <select v-model="selectedKey" :required="$attrs['required']" style="display: none">
+    <select v-model="selectedKey" ref="nativeSelect" :required="$attrs['required']" style="display: none">
       <option value=""></option>
       <option v-for="item in options" :value="optionKey ? item[optionKey] : item">{{ item[optionLabel] }}</option>
     </select>

package/components/TableView.vue

@@ -95,7 +95,12 @@ onMounted(() => {
       <table class="pankow-table">
         <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 }" @click="toggleSort(column)">
+            <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 }"
+              @click="toggleSort(column)"
+            >
               <Icon v-if="columns[column].icon" :icon="columns[column].icon" />
               {{ columns[column].label }}
               <i v-show="sortBy === column" class="fa-solid" :class="{ 'fa-arrow-up': sortOrder === SORT_ORDER.DESC, 'fa-arrow-down': sortOrder === SORT_ORDER.ASC }"></i>
@@ -103,10 +108,20 @@ onMounted(() => {
           </tr>
         </thead>
         <tbody>
-          <tr v-if="busy"><td :colspan="Object.keys(columns).length" style="text-align: center; padding: 20px;"><ProgressBar mode="indeterminate" :show-label="false" :slim="true" v-show="finalBusy"/></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-if="busy">
+            <td :colspan="Object.keys(columns).length" style="text-align: center; padding: 20px;">
+              <ProgressBar mode="indeterminate" :show-label="false" :slim="true" v-show="finalBusy"/>
+            </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, 'pankow-table-cell-nowrap': columns[column].nowrap }">
+            <td v-for="column in Object.keys(columns)"
+              class="pankow-table-cell"
+              :style="{ 'text-align': columns[column].align || null, 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>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudron/pankow",
   "private": false,
-  "version": "3.5.4",
+  "version": "3.5.6",
   "description": "",
   "main": "index.js",
   "types": "types/index.d.ts",
@@ -24,7 +24,7 @@
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.1",
     "typescript": "^5.9.3",
-    "vite": "^7.1.10",
+    "vite": "^7.1.12",
     "vue": "^3.5.22"
   }
 }