@cloudron/pankow 3.5.6 → 3.5.9

package/components/Dialog.vue

@@ -64,7 +64,7 @@ async function open() {
 
   // try to focus some form elements else just the dialog
   await nextTick();
-  const focusElement = dialogBody.value.querySelector('input:not([disabled]):not([style*="display:none"]):not([style*="display: none"])') || dialog.value;
+  const focusElement = dialogBody.value.querySelector('input:not([disabled]):not([readonly]):not([style*="display:none"]):not([style*="display: none"])') || dialog.value;
   focusElement.focus();
 }
 

package/components/MaskedInput.vue

@@ -36,8 +36,12 @@ const isValid = computed(() => {
 </script>
 
 <template>
-  <input v-if="!multiline" class="pankow-masked-input" :value="displayValue" :required="isValid" @input="displayValue = $event.target.value" @focus="$event.target.select()" />
-  <textarea v-else :rows="rows" :cols="cols" :required="isValid" :value="displayValue" @input="displayValue = $event.target.value" @focus="$event.target.select()"></textarea>
+  <template v-if="!multiline">
+    <input class="pankow-masked-input" :value="displayValue" :required="isValid" @input="displayValue = $event.target.value" @focus="$event.target.select()" />
+  </template>
+  <template v-else>
+    <textarea :required="isValid" :value="displayValue" @input="displayValue = $event.target.value" @focus="$event.target.select()"></textarea>
+  </template>
 </template>
 
 <style>

package/components/SingleSelect.vue

@@ -1,6 +1,6 @@
 <script setup>
 
-import { ref, useTemplateRef, onMounted, computed, watch } from 'vue';
+import { ref, useTemplateRef, computed, watch, watchEffect } from 'vue';
 import Button from './Button.vue';
 import Menu from './Menu.vue';
 import Icon from './Icon.vue';
@@ -155,14 +155,16 @@ function onKeyDown(event) {
   if (found !== -1) selectIndex(found);
 }
 
-onMounted(() => {
+function handleDefaultSelect() {
   if (props.optionKey) {
     selectedKey.value = model.value;
     selected.value = props.options.find((o) => o[props.optionKey] === selectedKey.value);
   } else {
     selected.value = model.value;
   }
-});
+}
+
+watchEffect(handleDefaultSelect);
 
 </script>
 

package/components/Switch.vue

@@ -14,8 +14,8 @@ const internalId = uuidv4();
 
 const emit = defineEmits(['change']);
 
-function onChange() {
-  emit('change', model.value);
+function onChange(event) {
+  emit('change', model.value); // this contains the value after the checkbox has already toggled
 }
 
 </script>

package/components/TextInput.vue

@@ -54,13 +54,14 @@ defineExpose({ focus });
   outline: none;
 }
 
+.pankow-text-input[disabled],
 .pankow-text-input[readonly] {
   cursor: not-allowed;
+  background-color: var(--pankow-input-readonly-background-color);
 }
 
-.pankow-text-input:disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
+.pankow-text-input[disabled]:hover {
+  border-color: var(--pankow-input-border-color);
 }
 
 </style>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudron/pankow",
   "private": false,
-  "version": "3.5.6",
+  "version": "3.5.9",
   "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.12",
-    "vue": "^3.5.22"
+    "vite": "^7.2.2",
+    "vue": "^3.5.24"
   }
 }

package/style.css

@@ -49,6 +49,7 @@
   --pankow-input-vertial-padding: 6px;
   --pankow-input-horizontal-padding: max(7px, var(--pankow-border-radius));
   --pankow-input-background-color: white;
+  --pankow-input-readonly-background-color: #f5f5f5;
   --pankow-input-border-color: #ced4da;
   --pankow-input-border-color-hover: var(--pankow-color-dark);
   --pankow-input-border-color-focus: var(--pankow-color-primary-hover);
@@ -92,6 +93,7 @@ input {
     --pankow-input-background-color: #1b1e21;
     --pankow-input-border-color: #1b1e21;
     --pankow-input-border-color-hover: #ced4da;
+    --pankow-input-readonly-background-color: #000000;
 
     --pankow-color-background: #1b1e21;
     --pankow-color-background-hover: #1f2326;

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>