@cloudron/pankow 3.1.8

package/components/MultiSelect.vue

@@ -0,0 +1,202 @@
+<script setup>
+
+import { ref, useTemplateRef, onMounted, computed, watch } from 'vue';
+import Button from './Button.vue';
+import Menu from './Menu.vue';
+import Icon from './Icon.vue';
+
+const props = defineProps({
+  placeholder: {
+    type: String,
+    default: 'Select'
+  },
+  selectedLabel: {
+    type: String,
+    default: '%n selected'
+  },
+  selectAllLabel: {
+    type: String,
+    default: '',
+  },
+  optionLabel: {
+    type: String,
+    default: 'label'
+  },
+  optionKey: {
+    type: String,
+    default: ''
+  },
+  options: {
+    type: Array,
+    default: []
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  searchThreshold: {
+    type: Number,
+    default: Infinity,
+  },
+});
+
+const emits = defineEmits(['select']);
+
+const model = defineModel();
+
+let selected = ref([]);
+
+const elem = useTemplateRef('elem');
+const menu = useTemplateRef('menu');
+
+watch(model, (newValue, oldValue) => {
+  selected.value = newValue;
+});
+
+const buttonLabel = computed(() => {
+  return props.selectedLabel.replace('%n', selected.value.length);
+});
+
+const allSelected = ref(false);
+
+const menuModel = computed(() => {
+  const ret = props.options.map((item) => {
+    if (item.separator) {
+      return {
+        separator: true,
+        label: '',
+      };
+    } else {
+      return {
+        label: item[props.optionLabel],
+        checkbox: true,
+        checked: selected.value.indexOf(props.optionKey ? item[props.optionKey] : item) !== -1,
+        action: () => {
+          const idx = selected.value.indexOf(props.optionKey ? item[props.optionKey] : item);
+
+          if (idx >= 0) {
+            selected.value.splice(idx, 1);
+            allSelected.value = false;
+          } else {
+            selected.value.push(props.optionKey ? item[props.optionKey] : item);
+          }
+
+          model.value = selected.value;
+          emits('select', selected.value);
+        }
+      };
+    }
+  });
+
+  if (props.selectAllLabel) {
+    ret.unshift({
+      label: props.selectAllLabel || '',
+      checkbox: true,
+      checked: allSelected.value,
+      // checked: props.options.filter((item) => !item.separator).every((item) => item.checked),
+      action: () => {
+        allSelected.value = !allSelected.value;
+
+        if (allSelected.value) {
+          selected.value = props.options.filter((item) => !item.separator).map((item) => props.optionKey ? item[props.optionKey] : item);
+        } else {
+          selected.value = [];
+        }
+
+        model.value = selected.value;
+        emits('select', selected.value);
+      }
+    }, {
+      separator: true,
+      label: '',
+    });
+  }
+
+  return ret;
+});
+
+function onMenuClosed() {
+  elem.value.focus();
+}
+
+function onClick(event) {
+  if (props.disabled) return;
+
+  if (menu.value.isOpen) menu.value.close();
+  else menu.value.open(event, elem.value);
+}
+
+function onOpen(event) {
+  if (props.disabled) return;
+
+  menu.value.open(event, elem.value);
+}
+
+function onClose(event) {
+  menu.value.close();
+}
+
+function onClosed() {
+  // restores the focus
+  elem.value.focus();
+}
+
+onMounted(() => {
+  selected.value = model.value;
+});
+
+</script>
+
+<template>
+  <div class="pankow-multiselect" :class="{ 'pankow-multiselect-disabled': disabled }" ref="elem" tabindex="0" @click="onClick" @keydown.enter="onOpen" @keydown.down.stop="onOpen" @keydown.up.stop="onOpen" @keydown.esc.stop="onClose">
+    <Menu ref="menu" :model="menuModel" :close-on-activation="false" @close="onMenuClosed" :search-threshold="searchThreshold"></Menu>
+    {{ buttonLabel }}
+    <Icon icon="fa-solid fa-chevron-down" class="pankow-button-icon-right-with-text" />
+  </div>
+</template>
+
+<style>
+
+.pankow-multiselect {
+  display: inline-flex;
+  justify-content: space-between;
+  align-items: center;
+  font-weight: 400;
+  font-size: 14px;
+  color: var(--pankow-color-dark);
+  user-select: none;
+  text-align: center;
+  border-width: 1px;
+  border-style: solid;
+  border-color: var(--pankow-input-border-color);
+  background-color: var(--pankow-input-background-color);
+  padding: 5px 12px;
+  border-radius: var(--pankow-border-radius);
+  text-decoration: none;
+  cursor: pointer;
+  transition: background-color 250ms;
+  min-width: 100px;
+}
+
+@media (prefers-color-scheme: dark) {
+  .pankow-multiselect {
+    color: var(--pankow-color-light-dark);
+  }
+}
+
+.pankow-multiselect:focus {
+  outline: none;
+  border-color: var(--pankow-color-dark) !important;
+}
+
+.pankow-multiselect:hover {
+  border-color: var(--pankow-color-primary-hover);
+}
+
+.pankow-multiselect-disabled,
+.pankow-multiselect-disabled:hover {
+  cursor: not-allowed;
+  border-color: var(--pankow-input-border-color);
+}
+
+</style>

package/components/Notification.vue

@@ -0,0 +1,163 @@
+<template>
+  <teleport to="#app">
+    <TransitionGroup name="pankow-notification-fade" :class="`pankow-notification-container ${position}`" tag="div">
+      <div v-for="message in messages" key="id">
+        <div class="pankow-notification" :[message.type]="''">
+          {{ message.text }}
+          <Icon @click="onClose(message.id)" icon="fa-solid fa-xmark" class="pankow-notification-close"/>
+        </div>
+      </div>
+    </TransitionGroup>
+  </teleport>
+</template>
+
+<script>
+
+import { uuidv4 } from '../utils.js';
+
+import Icon from './Icon.vue';
+
+export default {
+  name: 'Notification',
+  components: {
+    Icon
+  },
+  props: {
+    position: {
+      type: String,
+      default: 'top-center',
+      validator(value, props) {
+        return [ 'top-left', 'top-center', 'top-right', 'bottom-left', 'bottom-center', 'bottom-right' ].includes(value);
+      }
+    }
+  },
+  data() {
+    return {
+      messages: []
+    }
+  },
+  methods: {
+    raise(options) {
+      const id = uuidv4();
+      const text = typeof options === 'object' && 'text' in options ? options.text : options;
+      const persistent = typeof options === 'object' && 'persistent' in options ? options.persistent : false;
+      const timeout = typeof options === 'object' && 'timeout' in options ? options.timeout : 2000;
+      const type = typeof options === 'object' && 'type' in options ? options.type : null;
+
+      this.messages.push({ id, text, persistent, type });
+
+      if (!persistent) {
+        setTimeout(() => {
+          const index = this.messages.findIndex((value) => value.id === id);
+          if (index > -1) this.messages.splice(index, 1);
+        }, timeout);
+      }
+    },
+    onClose(id) {
+      const index = this.messages.findIndex((value) => value.id === id);
+      if (index > -1) this.messages.splice(index, 1);
+    }
+  },
+  mounted() {
+    if (!window.pankow) window.pankow = {};
+    if (window.pankow.notify) return console.error('Pankow: Notification DOM node already exists! Only ever use a single one.');
+
+    window.pankow.notify = (options) => { this.raise(options); }
+  }
+};
+
+</script>
+
+<style>
+
+.pankow-notification-container {
+  position: absolute;
+  z-index: 30001;
+}
+
+.pankow-notification-container.top-left {
+  top: 0;
+  left: 10px;
+}
+
+.pankow-notification-container.top-center {
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  text-align: center;
+}
+
+.pankow-notification-container.top-right {
+  top: 0;
+  right: 10px;
+  text-align: right;
+}
+
+.pankow-notification-container.bottom-left {
+  left: 10px;
+  bottom: 10px;
+}
+
+.pankow-notification-container.bottom-center {
+  left: 50%;
+  transform: translateX(-50%);
+  text-align: center;
+  bottom: 10px;
+}
+
+.pankow-notification-container.bottom-right {
+  right: 10px;
+  text-align: right;
+  bottom: 10px;
+}
+
+.pankow-notification {
+  display: inline-block;
+  background-color: rgba(255,255,255,0.6);
+  backdrop-filter: blur(10px);
+  opacity: 0.9;
+  padding: 10px 15px;
+  margin-top: 10px;
+  text-align: left;
+  color: black;
+  box-shadow: var(--pankow-notification-shadow);
+  border-radius: var(--pankow-border-radius);
+}
+
+.pankow-notification[danger] {
+  background-color: var(--pankow-color-danger);
+  color: white;
+}
+
+.pankow-notification[success] {
+  background-color: var(--pankow-color-success);
+  color: white;
+}
+
+.pankow-notification[secondary] {
+  background-color: var(--pankow-color-secondary);
+  color: white;
+}
+
+.pankow-notification:hover {
+  opacity: 1;
+}
+
+.pankow-notification-close {
+  padding: 5px;
+  cursor: pointer;
+}
+
+.pankow-notification-fade-move,
+.pankow-notification-fade-enter-active,
+.pankow-notification-fade-leave-active {
+  transition: all 0.25s ease-in-out;
+}
+
+.pankow-notification-fade-enter-from,
+.pankow-notification-fade-leave-to {
+  opacity: 0;
+  transform: scale(0.01);
+}
+
+</style>

package/components/NumberInput.vue

@@ -0,0 +1,31 @@
+<script setup>
+
+const model = defineModel();
+const props = defineProps({
+  placeholder: String,
+  readonly: {
+    type: Boolean,
+    default: false
+  },
+  min: {
+    default: NaN
+  },
+  max: {
+    default: NaN
+  },
+  step: {
+    default: NaN
+  },
+});
+
+</script>
+
+<template>
+  <input class="pankow-text-input" type="number" :step="step" :min="min" :max="max" :placeholder="placeholder" :readonly="readonly" :value="model" @input="$emit('update:modelValue', parseInt($event.target.value))"/>
+</template>
+
+<style>
+
+/* using TextInput styles */
+
+</style>

package/components/OfflineBanner.vue

@@ -0,0 +1,47 @@
+<script setup>
+
+const props = defineProps({
+  active: {
+    type: Boolean,
+    default: false
+  },
+  href: {
+    type: String,
+    default: ''
+  },
+  label: {
+    type: String,
+    default: ''
+  },
+});
+
+</script>
+
+<template>
+  <Transition name="pankow-roll-down">
+    <a class="pankow-offline-banner" v-show="active" :href="href" target="_blank">
+      <i class="fa fa-solid fa-spin fa-circle-notch"/> {{ label }}
+    </a>
+  </Transition>
+</template>
+
+<style>
+
+.pankow-offline-banner {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 30000;
+  background-color: #ff4c4c;
+  width: 100%;
+  padding: 2px;
+  text-align: center;
+  color: white;
+}
+
+.pankow-offline-banner:hover, .pankow-offline-banner:focus {
+  color: white;
+  text-decoration: none;
+}
+
+</style>

package/components/PasswordInput.vue

@@ -0,0 +1,86 @@
+<script setup>
+
+import { ref } from 'vue';
+
+const svgEye = '<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="eye" class="svg-inline--fa fa-eye fa-w-18" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512"><path fill="currentColor" d="M572.52 241.4C518.29 135.59 410.93 64 288 64S57.68 135.64 3.48 241.41a32.35 32.35 0 0 0 0 29.19C57.71 376.41 165.07 448 288 448s230.32-71.64 284.52-177.41a32.35 32.35 0 0 0 0-29.19zM288 400a144 144 0 1 1 144-144 143.93 143.93 0 0 1-144 144zm0-240a95.31 95.31 0 0 0-25.31 3.79 47.85 47.85 0 0 1-66.9 66.9A95.78 95.78 0 1 0 288 160z"></path></svg>';
+const svgEyeSlash = '<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="eye-slash" class="svg-inline--fa fa-eye-slash fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path fill="currentColor" d="M320 400c-75.85 0-137.25-58.71-142.9-133.11L72.2 185.82c-13.79 17.3-26.48 35.59-36.72 55.59a32.35 32.35 0 0 0 0 29.19C89.71 376.41 197.07 448 320 448c26.91 0 52.87-4 77.89-10.46L346 397.39a144.13 144.13 0 0 1-26 2.61zm313.82 58.1l-110.55-85.44a331.25 331.25 0 0 0 81.25-102.07 32.35 32.35 0 0 0 0-29.19C550.29 135.59 442.93 64 320 64a308.15 308.15 0 0 0-147.32 37.7L45.46 3.37A16 16 0 0 0 23 6.18L3.37 31.45A16 16 0 0 0 6.18 53.9l588.36 454.73a16 16 0 0 0 22.46-2.81l19.64-25.27a16 16 0 0 0-2.82-22.45zm-183.72-142l-39.3-30.38A94.75 94.75 0 0 0 416 256a94.76 94.76 0 0 0-121.31-92.21A47.65 47.65 0 0 1 304 192a46.64 46.64 0 0 1-1.54 10l-73.61-56.89A142.31 142.31 0 0 1 320 112a143.92 143.92 0 0 1 144 144c0 21.63-5.29 41.79-13.9 60.11z"></path></svg>';
+
+const emit = defineEmits([ 'update:modelValue' ]);
+const props = defineProps({
+  placeholder: String,
+  modelValue: String,
+  id: String,
+  disabled: {
+    type: Boolean,
+    default: false
+  }
+});
+
+const revealed =ref(false);
+const revealIcon = ref(svgEye);
+
+function toggleReveal() {
+  revealed.value = !revealed.value;
+  revealIcon.value = revealed.value ? svgEyeSlash : svgEye;
+}
+
+</script>
+
+<template>
+  <div class="pankow-password">
+    <input class="pankow-password-input" :id="id" :type="revealed ? 'text' : 'password'" :disabled="disabled ? true : undefined" :placeholder="placeholder" :autofocus="$attrs['autofocus']" :required="$attrs['required']" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)"/>
+    <i class="pankow-password-reveal" v-html="revealIcon" @click="toggleReveal"></i>
+  </div>
+</template>
+
+<style>
+
+.pankow-password {
+  display: flex;
+  white-space: nowrap;
+  position: relative;
+}
+
+.pankow-password-input {
+  flex-grow: 1;
+  font-size: 14px;
+  color: var(--pankow-text-color);
+  background-color: var(--pankow-input-background-color);
+  border: none;
+  padding: var(--pankow-input-vertial-padding) var(--pankow-input-horizontal-padding);
+  border-radius: var(--pankow-border-radius);
+  display: inline-block;
+  border: 1px solid var(--pankow-input-border-color);
+  transition: border-color 250ms;
+}
+
+.pankow-password.has-error > .pankow-password-input {
+  border: 1px solid var(--pankow-color-danger) !important;
+}
+
+.pankow-password-input:hover {
+  border: 1px solid var(--pankow-color-dark);
+}
+
+.pankow-password-input:focus {
+  border: 1px solid var(--pankow-color-primary-hover);
+  outline: none;
+}
+
+.pankow-password-input:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.pankow-password-reveal {
+  display: inline-block;
+  position: absolute;
+  padding: 6px;
+  width: 30px;
+  height: 30px;
+  right: 5px;
+  top: 1px;
+  cursor: pointer;
+}
+
+</style>

package/components/Popover.vue

@@ -0,0 +1,185 @@
+<script setup>
+
+import { nextTick, ref, useTemplateRef } from 'vue';
+
+const container = useTemplateRef('container');
+
+function getViewport() {
+  var win = window,
+    d = document,
+    e = d.documentElement,
+    g = d.getElementsByTagName('body')[0],
+    w = win.innerWidth || e.clientWidth || g.clientWidth,
+    h = win.innerHeight || e.clientHeight || g.clientHeight;
+
+  return {
+    width: w,
+    height: h
+  };
+}
+
+function getHiddenElementOuterHeight(element) {
+  if (element) {
+    element.style.visibility = 'hidden';
+    element.style.display = 'block';
+    var elementHeight = element.offsetHeight;
+    element.style.display = 'none';
+    element.style.visibility = 'visible';
+    return elementHeight;
+  }
+  return 0;
+}
+
+function getHiddenElementOuterWidth(element) {
+  if (element) {
+    element.style.visibility = 'hidden';
+    element.style.display = 'block';
+    var elementWidth = element.offsetWidth;
+    element.style.display = 'none';
+    element.style.visibility = 'visible';
+    return elementWidth;
+  }
+  return 0;
+}
+
+function getActiveElement(children) {
+  for (const child of children) {
+    if (child === document.activeElement) return child;
+  }
+  return null;
+}
+
+const emits = defineEmits(['close']);
+const props = defineProps({
+    width: {
+      type: String,
+      default: '',
+    },
+    height: {
+      type: String,
+      default: '',
+    }
+});
+
+const openEventTimeStamp = ref(0);
+const forElement = ref(null);
+const isOpen = ref(false);
+const pageX = ref(0);
+const pageY = ref(0);
+const offsetY = ref(0);
+const offsetX = ref(0);
+const rollUp = ref(false);
+
+function close() {
+  isOpen.value = false;
+  emits('close');
+}
+
+function onBackdrop(event) {
+  close();
+  event.preventDefault();
+}
+
+function position() {
+  let width = container.value.offsetParent ? container.value.offsetWidth : getHiddenElementOuterWidth(container.value);
+  let height = container.value.offsetParent ? container.value.offsetHeight : getHiddenElementOuterHeight(container.value);
+  let left = pageX.value + offsetX.value/2 - width/2;
+  let top = pageY.value + 6;
+  let viewport = getViewport();
+
+  //flip
+  if (left + width - document.body.scrollLeft > viewport.width) {
+    // if this is like a dropdown right align instead of flip
+    if (forElement.value) {
+      left = forElement.value.getBoundingClientRect().left + (forElement.value.getBoundingClientRect().width - width);
+    } else {
+      left -= width;
+    }
+  }
+
+  //flip
+  if (top + height - document.body.scrollTop > viewport.height) {
+    top -= height + offsetY.value + 12;
+    rollUp.value = true;
+  } else {
+    rollUp.value = false;
+  }
+
+  //fit
+  if (left < document.body.scrollLeft) {
+    left = document.body.scrollLeft;
+  }
+
+  //fit
+  if (top < document.body.scrollTop) {
+    top = document.body.scrollTop;
+  }
+
+  container.value.style.left = left + 'px';
+  container.value.style.top = top + 'px';
+}
+
+defineExpose({
+  async open(event, forElem = null) {
+    isOpen.value = true;
+    pageX.value = forElem ? forElem.getBoundingClientRect().left : event.pageX;
+    pageY.value = forElem ? forElem.getBoundingClientRect().bottom : event.pageY;
+    offsetX.value = forElem ? (forElem.getBoundingClientRect().width + 2) : 0;
+    offsetY.value = forElem ? (forElem.getBoundingClientRect().height + 2) : 0; // offset in case we roll up
+    forElement.value = forElem;
+
+    if (forElem) container.value.style.minWidth = forElem.getBoundingClientRect().width + 'px';
+
+    position();
+    openEventTimeStamp.value = event.timeStamp;
+
+    event.preventDefault();
+  }
+});
+
+</script>
+
+<template>
+  <teleport to="#app">
+    <div class="pankow-popover-backdrop" @click="onBackdrop($event)" @contextmenu="onBackdrop($event)" v-show="isOpen"></div>
+    <Transition :name="rollUp ? 'pankow-animation-pop-up' : 'pankow-animation-pop-down'">
+      <div v-show="isOpen" class="pankow-popover" ref="container" :style="{ 'max-width': width || null, 'max-height': height || null }">
+        <slot></slot>
+      </div>
+    </Transition>
+  </teleport>
+</template>
+
+<style>
+
+.pankow-popover-backdrop {
+  position: fixed;
+  height: 100%;
+  width: 100%;
+  left: 0px;
+  top: 0px;
+  z-index: 3001;
+  background-color: transparent;
+}
+
+.pankow-popover {
+  position: fixed;
+  box-shadow: var(--pankow-menu-shadow);
+  border-radius: var(--pankow-border-radius);
+  background-color: rgba(255,255,255,0.5);
+  z-index: 3001;
+  color: black;
+  backdrop-filter: blur(10px);
+  overflow: auto;
+  outline: none;
+  max-width: min(100%, 800px);
+}
+
+@media (prefers-color-scheme: dark) {
+  .pankow-popover {
+    background-color: rgba(50,50,50,0.5);
+    color: white;
+  }
+}
+
+</style>