@cloudron/pankow 3.2.7 → 3.2.9

package/components/Menu.vue

@@ -146,6 +146,8 @@ async function open(event, element = null) {
 
   if (element) container.value.style.minWidth = element.getBoundingClientRect().width + 'px';
 
+  await nextTick();
+
   position();
 
   openEventTimeStamp.value = event.timeStamp;
@@ -208,7 +210,6 @@ function close() {
   container.value.style.maxHeight = 'unset';
   container.value.style.bottom = 'unset';
   container.value.style.top = 'unset';
-  container.value = null;
   emit('close');
 }
 

package/components/SingleSelect.vue

@@ -159,7 +159,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)">
-    <Menu ref="menu" :model="menuModel" :search-threshold="searchThreshold" :close-on-activation="true" @close="onMenuClosed"></Menu>
+    <Menu ref="menu" :model="menuModel" :search-threshold="searchThreshold" :close-on-activation="true" @close="onMenuClosed"/>
     {{ selected ? selected[optionLabel] : placeholder }}
     <Icon icon="fa-solid fa-chevron-down" class="pankow-button-icon-right-with-text" />
   </div>

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@cloudron/pankow",
   "private": false,
-  "version": "3.2.7",
+  "version": "3.2.9",
   "description": "",
   "main": "index.js",
   "types": "types/index.d.ts",
-  "files": ["*.js", "components", "viewers", "types"],
+  "files": ["*.css", "*.js", "components", "viewers", "types"],
   "scripts": {
     "gallery": "cd gallery && vite",
     "build": "cd gallery && vite build",
@@ -24,7 +24,7 @@
   "devDependencies": {
     "@vitejs/plugin-vue": "^6.0.1",
     "typescript": "^5.9.2",
-    "vite": "^7.1.1",
+    "vite": "^7.1.2",
     "vue": "^3.5.18"
   }
 }

package/style.css

@@ -0,0 +1,370 @@
+[v-cloak] {
+  display: none;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+:root {
+  --font-family: 'Inter';
+
+  --pankow-body-background-color: white;
+
+  --pankow-text-color: #333;
+  --pankow-text-color-alt: #333;
+  --pankow-text-color-white: white;
+
+  --pankow-color-dark: #495057;
+  --pankow-color-dark-secondary: #495057;
+
+  --pankow-color-background: #f8f8f8;
+  --pankow-color-background-hover: #e9ecef;
+
+  --pankow-color-light-dark: #ced4da;
+
+  --pankow-tooltip-background-color: rgba(0,0,0,0.5);
+  --pankow-tooltip-text-color: white;
+
+  --pankow-color-primary: #1a76bf;
+  --pankow-color-primary-hover: #0d89ec;
+  --pankow-color-primary-active: #0b7ad1;
+
+  --pankow-color-danger: #ca3636;
+  --pankow-color-danger-hover: #e24949;
+  --pankow-color-danger-active: #970d0d;
+
+  --pankow-color-success: #0e893b;
+  --pankow-color-success-hover: #1d9b4c;
+  --pankow-color-success-active: #17773b;
+
+  --pankow-color-secondary: #607D8B;
+  --pankow-color-secondary-hover: #889ba3;
+  --pankow-color-secondary-active: #324650;
+
+  --pankow-box-shadow: 0 2px 5px rgba(0,0,0,.1);
+  --pankow-menu-shadow: 0 2px 4px -1px #0003,0 4px 5px #00000024,0 1px 10px #0000001f;
+  --pankow-notification-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;
+
+  --pankow-input-vertial-padding: 6px;
+  --pankow-input-horizontal-padding: max(7px, var(--pankow-border-radius));
+  --pankow-input-background-color: white;
+  --pankow-input-border-color: #ced4da;
+  --pankow-input-border-color-hover: var(--pankow-color-dark);
+  --pankow-input-border-color-focus: var(--pankow-color-primary-hover);
+
+  --pankow-dialog-background-color: white;
+  --pankow-dialog-backdrop-color: rgba(0,0,0,.4);
+
+  --pankow-border-radius: 4px;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+html, body {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  font-size: 14px; /* this also defines the overall widget size as all sizes are in rem */
+  font-family: var(--font-family);
+  font-weight: 400;
+  color: var(--pankow-text-color);
+  overflow: hidden;
+}
+
+input {
+  accent-color: var(--pankow-color-primary);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --pankow-body-background-color: black;
+
+    --pankow-text-color: #ced4da;
+    --pankow-text-color-alt: #495057;
+    --pankow-text-color-white: #ced4da;
+
+    --pankow-input-background-color: #1b1e21;
+    --pankow-input-border-color: #1b1e21;
+    --pankow-input-border-color-hover: #ced4da;
+
+    --pankow-color-background: #1b1e21;
+    --pankow-color-background-hover: var(--pankow-color-dark);
+
+    --pankow-dialog-background-color: #32383e;
+    --pankow-dialog-backdrop-color: rgba(0,0,0,.7);
+
+    --pankow-tooltip-background-color: rgba(255,255,255,0.5);
+    --pankow-tooltip-text-color: black;
+  }
+}
+
+a {
+  color: var(--pankow-color-dark);
+  text-decoration: none;
+}
+
+@media (prefers-color-scheme: dark) {
+  a {
+    color: var(--pankow-color-light-dark);
+  }
+}
+
+a:hover {
+  color: var(--pankow-color-primary-hover);
+}
+
+code {
+  background-color: var(--pankow-color-light-dark);
+  border-radius: 2px;
+  padding: 0 5px;
+}
+
+@media (prefers-color-scheme: dark) {
+  code {
+    background-color: var(--pankow-color-dark);
+  }
+}
+
+label {
+  display: block;
+  font-weight: bold;
+  margin-top: 10px;
+  margin-bottom: 6px;
+}
+
+select {
+  font-size: 14px;
+  color: var(--pankow-text-color);
+  margin: 4px 0;
+  margin-inline: 4px;
+  background-color: var(--pankow-input-background-color);
+  padding: 7px 18px;
+  border-radius: var(--pankow-border-radius);
+  display: inline-block;
+  border: 1px solid var(--pankow-input-border-color);
+  transition: border-color 250ms;
+  cursor: pointer;
+}
+
+select:hover {
+  border: 1px solid var(--pankow-color-dark);
+}
+
+select:focus {
+  border: 1px solid var(--pankow-color-primary-hover);
+  outline: none;
+}
+
+textarea {
+  font-size: 14px;
+  color: var(--pankow-text-color);
+  margin: 6px 0;
+  background-color: var(--pankow-input-background-color);
+  padding: 6px;
+  border-radius: var(--pankow-border-radius);
+  display: inline-block;
+  border: 1px solid var(--pankow-input-border-color);
+  transition: border-color 250ms;
+}
+
+textarea:hover {
+  border: 1px solid var(--pankow-color-dark);
+}
+
+textarea:focus {
+  border: 1px solid var(--pankow-color-primary-hover);
+  outline: none;
+}
+
+@media (max-width: 576px) {
+  .pankow-no-mobile {
+    display: none !important;
+  }
+}
+
+@media (min-width: 575px) {
+  .pankow-no-desktop {
+    display: none !important;
+  }
+}
+
+.pankow-tooltip {
+  position: absolute;
+  border-radius: var(--pankow-border-radius);
+  background-color: var(--pankow-tooltip-background-color);
+  backdrop-filter: blur(10px);
+  color: var(--pankow-tooltip-text-color);
+  padding: 4px 7px;
+  font-size: 12px;
+  z-index: 6000;
+  text-align: center;
+}
+
+.has-error {
+  color: var(--pankow-color-danger);
+}
+
+.pankow-fade-enter-active,
+.pankow-fade-leave-active {
+  transition: opacity 0.5s ease;
+}
+
+.pankow-fade-enter-from,
+.pankow-fade-leave-to {
+  opacity: 0;
+}
+
+.pankow-scale-enter-active,
+.pankow-scale-leave-active {
+  transition: transform 0.2s ease;
+}
+
+.pankow-scale-enter-from,
+.pankow-scale-leave-to {
+  transform: scale(0);
+}
+
+.pankow-fade-fast-enter-active,
+.pankow-fade-fast-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.pankow-fade-fast-enter-from,
+.pankow-fade-fast-leave-to {
+  opacity: 0;
+}
+
+.pankow-roll-down-enter-active {
+  transform-origin: center top;
+  animation: pankow-roll-down-in 0.1s;
+}
+
+.pankow-roll-down-leave-active {
+  transform-origin: center top;
+  animation: pankow-roll-down-in 0.1s reverse;
+}
+
+@keyframes pankow-roll-down-in {
+  0% {
+    opacity: 0;
+    transform: scaleY(0.7);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scaleY(1);
+  }
+}
+
+.pankow-roll-up-enter-active {
+  transform-origin: center bottom;
+  animation: pankow-roll-up-in 0.1s;
+}
+
+.pankow-roll-up-leave-active {
+  transform-origin: center bottom;
+  animation: pankow-roll-up-in 0.1s reverse;
+}
+
+@keyframes pankow-roll-up-in {
+  0% {
+    opacity: 0;
+    transform: scaleY(0.7);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scaleY(1);
+  }
+}
+
+
+.pankow-animation-pop-down-enter-active {
+  transform-origin: center top;
+  animation: pankow-animation-pop-down-in 0.1s;
+}
+
+.pankow-animation-pop-down-leave-active {
+  transform-origin: center top;
+  animation: pankow-animation-pop-down-in 0.1s reverse;
+}
+
+@keyframes pankow-animation-pop-down-in {
+  0% {
+    opacity: 0;
+    transform: scale(0.7);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.pankow-animation-pop-up-enter-active {
+  transform-origin: center bottom;
+  animation: pankow-animation-pop-up-in 0.1s;
+}
+
+.pankow-animation-pop-up-leave-active {
+  transform-origin: center bottom;
+  animation: pankow-animation-pop-up-in 0.1s reverse;
+}
+
+@keyframes pankow-animation-pop-up-in {
+  0% {
+    opacity: 0;
+    transform: scale(0.7);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.pankow-bounce-center-enter-active {
+  animation: pankow-bounce-center-in 0.2s;
+}
+
+.pankow-bounce-center-leave-active {
+  animation: pankow-bounce-center-in 0.2s reverse;
+}
+
+@keyframes pankow-bounce-center-in {
+  0% {
+    opacity: 0;
+    transform: translateX(-50%) translateY(-50%) scale(0.9);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateX(-50%) translateY(-50%) scale(1);
+  }
+}
+
+.pankow-bounce-center-top-enter-active {
+  animation: pankow-bounce-center-top-in 0.2s;
+}
+
+.pankow-bounce-center-top-leave-active {
+  animation: pankow-bounce-center-top-in 0.2s reverse;
+}
+
+@keyframes pankow-bounce-center-top-in {
+  0% {
+    opacity: 0;
+    transform: translateX(-50%) scale(0.9);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateX(-50%) scale(1);
+  }
+}