@cloudron/pankow 3.2.2 → 3.2.3

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/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.3",
   "description": "",
   "main": "index.js",
   "scripts": {
@@ -14,7 +14,7 @@
   "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": {