@cloudron/pankow 3.2.2 → 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/Popover.vue

@@ -166,10 +166,9 @@ defineExpose({
   position: fixed;
   box-shadow: var(--pankow-menu-shadow);
   border-radius: var(--pankow-border-radius);
-  background-color: rgba(255,255,255,0.5);
+  background-color: var(--pankow-input-background-color);
   z-index: 3001;
-  color: black;
-  backdrop-filter: blur(10px);
+  color: var(--pankow-color-dark);
   overflow: auto;
   outline: none;
   max-width: min(100%, 800px);
@@ -177,8 +176,7 @@ defineExpose({
 
 @media (prefers-color-scheme: dark) {
   .pankow-popover {
-    background-color: rgba(50,50,50,0.5);
-    color: white;
+    color: var(--pankow-color-light-dark);
   }
 }
 

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/components/TagInput.vue

@@ -52,11 +52,10 @@ function onRemoveIndex(index) {
   display: inline-flex;
   white-space: nowrap;
   position: relative;
-  margin: 4px;
   border: 1px solid var(--pankow-input-border-color);
   color: var(--pankow-text-color);
   background-color: var(--pankow-input-background-color);
-  padding: var(--pankow-input-vertial-padding) var(--pankow-input-horizontal-padding);
+  padding: 4px 4px;
   border-radius: var(--pankow-border-radius);
   transition: border-color 250ms;
   overflow: auto;

package/components/TextInput.vue

@@ -5,14 +5,14 @@ const props = defineProps({
   placeholder: String,
   readonly: {
     type: Boolean,
-    default: false
+    default: false,
   },
 });
 
 </script>
 
 <template>
-  <input class="pankow-text-input" type="text" :placeholder="placeholder" :readonly="readonly" :value="model" @input="$emit('update:modelValue', $event.target.value)"/>
+  <input class="pankow-text-input" type="text" :placeholder="placeholder" :readonly="readonly" v-model.trim="model"/>
 </template>
 
 <style>

package/components/TextInputRaw.vue

@@ -0,0 +1,24 @@
+<script setup>
+
+// For now the only difference to TextInput is that TextInputRaw does not trim the model value
+
+const model = defineModel();
+const props = defineProps({
+  placeholder: String,
+  readonly: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+</script>
+
+<template>
+  <input class="pankow-text-input" type="text" :placeholder="placeholder" :readonly="readonly" v-model="model"/>
+</template>
+
+<style>
+
+/* uses styles from TextInput.vue */
+
+</style>

package/gallery/Index.vue

@@ -511,7 +511,7 @@ onMounted(async () => {
           <h2 id="form">Form</h2>
           <h3 id="form-textinput">Text Input</h3>
           <FormGroup>
-            <label for="textInput">Label: {{ textInputValue }}</label>
+            <label for="textInput">Label: |{{ textInputValue }}| (input gets trimmed)</label>
             <TextInput id="textInput" v-model="textInputValue" placeholder="Some text input" style="width: 600px"/>
           </FormGroup>
           <FormGroup>

package/index.js

@@ -34,6 +34,7 @@ import TableView from './components/TableView.vue';
 import TabView from './components/TabView.vue';
 import TagInput from './components/TagInput.vue';
 import TextInput from './components/TextInput.vue';
+import TextInputRaw from './components/TextInputRaw.vue';
 import TopBar from './components/TopBar.vue';
 import InputGroup from './components/InputGroup.vue'; // must be at the end for border-radius handling
 
@@ -76,6 +77,7 @@ export {
     TabView,
     TagInput,
     TextInput,
+    TextInputRaw,
     TopBar,
 
     fetcher,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudron/pankow",
   "private": false,
-  "version": "3.2.2",
+  "version": "3.2.4",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -14,12 +14,12 @@
   "dependencies": {
     "@fontsource/inter": "^5.2.6",
     "@fortawesome/fontawesome-free": "^6.7.2",
-    "filesize": "^11.0.1",
+    "filesize": "^11.0.2",
     "monaco-editor": "^0.52.2"
   },
   "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,