@cloudron/pankow 3.1.8

package/style.css

@@ -0,0 +1,351 @@
+[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);
+  }
+}
+

package/tooltip.js

@@ -0,0 +1,83 @@
+/*
+
+Tooltip Directive
+
+```
+import tooltip from 'pankow/tooltip';
+
+app.directive('tooltip', tooltip);
+
+...
+
+<div v-tooltip.top="'hello'"></div>
+
+```
+
+*/
+
+const TOP = 1;
+const BOTTOM = 2;
+const LEFT = 3;
+const RIGHT = 4;
+
+const padding = 10;
+
+const tooltips = {};
+
+function remove(key) {
+    if (tooltips[key]) tooltips[key].remove();
+    delete tooltips[key];
+}
+
+function update(target, value, modifiers, tooltip) {
+    if (!tooltip) return;
+
+    tooltip.innerText = value;
+
+    // BOTTOM is default
+    const pos = modifiers.top ? TOP : (modifiers.left ? LEFT : (modifiers.RIGHT ? RIGHT : BOTTOM));
+
+    const targetRect = target.getBoundingClientRect();
+    const tooltipRect = tooltip.getBoundingClientRect();
+
+    if (pos === TOP || pos === BOTTOM) tooltip.style.left = (targetRect.left + targetRect.width/2) - (tooltipRect.width/2) + 'px';
+    else if (pos === LEFT) tooltip.style.left = (targetRect.left - tooltipRect.width - padding) + 'px';
+    else tooltip.style.left = (targetRect.left + targetRect.width + padding) + 'px';
+
+    if (pos === LEFT || pos === RIGHT) tooltip.style.top = (targetRect.top + targetRect.height/2) - (tooltipRect.height/2) + 'px';
+    else if (pos === TOP) tooltip.style.top = (targetRect.top - tooltipRect.height - padding) + 'px';
+    else tooltip.style.top = (targetRect.bottom + padding) + 'px';
+}
+
+function mounted(el, binding, vnode) {
+    el.addEventListener('mouseenter', () => {
+        if (!binding.value) return remove(vnode.ctx.uid);
+
+        tooltips[vnode.ctx.uid] = document.createElement('div');
+        tooltips[vnode.ctx.uid].classList.add('pankow-tooltip');
+        window.document.body.appendChild(tooltips[vnode.ctx.uid]);
+
+        update(el, binding.value, binding.modifiers, tooltips[vnode.ctx.uid]);
+    });
+
+    el.addEventListener('mouseleave', () => {
+        remove(vnode.ctx.uid);
+    });
+}
+
+function updated(el, binding, vnode) {
+    if (!binding.value) return remove(vnode.ctx.uid);
+    update(el, binding.value, binding.modifiers, tooltips[vnode.ctx.uid]);
+}
+
+function beforeUnmount(el, binding, vnode) {
+    remove(vnode.ctx.uid);
+}
+
+const tooltip = {
+    mounted,
+    updated,
+    beforeUnmount
+};
+
+export default tooltip;