@cloudron/pankow 3.1.8

package/components/ProgressBar.vue

@@ -0,0 +1,75 @@
+<script setup>
+
+import { computed } from 'vue';
+
+const props = defineProps({
+  value: {
+    type: Number,
+    default: 0
+  },
+  showLabel: {
+    type: Boolean,
+    default: true,
+  },
+  mode: String // only really "indeterminate" is supported
+});
+
+const normalizedValue = computed(() => {
+  if (props.value < 0) return 0;
+  if (props.value > 100) return 100;
+  return props.value;
+});
+
+</script>
+
+<template>
+  <div class="pankow-progress-bar">
+    <div class="pankow-progress-bar-label" v-show="showLabel"><slot>{{ value + ' %' }}</slot></div>
+    <div v-show="mode !== 'indeterminate'" class="pankow-progress-bar-filled" :style="{ width: normalizedValue+'%' }">
+    </div>
+    <div v-show="mode === 'indeterminate'" class="pankow-progress-bar-indeterminate" :style="{ 'min-width': '30%' }"></div>
+  </div>
+</template>
+
+<style>
+
+.pankow-progress-bar {
+  font-weight: 700;
+  min-height: 12px;
+  user-select: none;
+  border-radius: var(--pankow-border-radius);
+  display: block;
+}
+
+.pankow-progress-bar-label {
+  padding-bottom: 3px;
+}
+
+.pankow-progress-bar-filled {
+  background-color: var(--pankow-color-primary);
+  transition: width 250ms;
+  white-space: nowrap;
+  border-radius: calc(var(--pankow-border-radius) / 1.5);
+  height: 6px;
+}
+
+.pankow-progress-bar-indeterminate {
+  background-color: var(--pankow-color-primary);
+  height: 6px;
+  width: 100%;
+  background-image: linear-gradient(45deg,rgba(255,255,255,.35) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.35) 50%,rgba(255,255,255,.35) 75%,transparent 75%,transparent);
+  background-size: 30px 30px;
+  animation: progress-bar-stripes 1s linear infinite;
+  border-radius: calc(var(--pankow-border-radius) / 1.5);
+}
+
+@keyframes progress-bar-stripes {
+  from {
+    background-position: 30px 0;
+  }
+  to {
+    background-position: 0 0;
+  }
+}
+
+</style>

package/components/Radiobutton.vue

@@ -0,0 +1,128 @@
+<template>
+  <span class="pankow-radio">
+    <input :name="name" :id="id || internalId" class="pankow-radio-input" type="radio" v-model="internalValue" :value="value" :disabled="disabled"/>
+    <slot>
+      <label :for="id || internalId" class="pankow-radio-input-label">{{ label }}</label>
+    </slot>
+  </span>
+</template>
+
+<script>
+
+import { uuidv4 } from '../utils.js';
+
+export default {
+  name: 'Radiobutton',
+  props: {
+    modelValue: String,
+    value: String,
+    label: String,
+    id: String,
+    name: String,
+    disabled: null
+  },
+  emits: ['update:modelValue'],
+  computed: {
+    internalValue: {
+      get() {
+        return this.modelValue
+      },
+      set(internalValue) {
+        this.$emit('update:modelValue', internalValue)
+      }
+    }
+  },
+  data () {
+    return {
+      internalId: uuidv4()
+    }
+  }
+};
+
+</script>
+
+<style>
+
+.pankow-radio {
+  display: flex;
+  white-space: nowrap;
+  align-items: center;
+  margin: 4px 0;
+}
+
+.pankow-radio-input-label {
+  display: inline-block;
+  cursor: pointer;
+  user-select: none;
+  margin: 0;
+  margin-left: 6px;
+}
+
+.pankow-radio-input {
+  appearance: none;
+  height: 19px;
+  width: 19px;
+  outline: none;
+  display: inline-block;
+  position: relative;
+  margin: 0;
+  cursor: pointer;
+  border: 1px solid #ced4da;
+  background: var(--state-background, white);
+  transition: background 0.25s, border-color 0.25s, box-shadow 0.25s;
+  border-radius: 20px;
+}
+
+@media (prefers-color-scheme: dark) {
+  .pankow-radio-input {
+    color: var(--pankow-color-light-dark);
+    background: var(--pankow-color-dark);
+    border: 1px solid var(--pankow-color-dark);
+  }
+}
+
+.pankow-radio-input:after {
+  content: "";
+  display: block;
+  position: absolute;
+  opacity: var(--state-opacity, 0);
+  width: 9px;
+  height: 9px;
+  background: white;
+  border-radius: 20px;
+  left: 4px;
+  top: 4px;
+  transform: rotate(43deg);
+}
+
+.pankow-radio-input:checked {
+  --state-background: var(--pankow-color-primary);
+  --state-opacity: 1;
+  border: 1px solid transparent;
+}
+
+.pankow-radio-input:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.pankow-radio-input:disabled + label {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.pankow-radio-input:hover {
+  border: 1px solid var(--pankow-color-dark);
+}
+
+@media (prefers-color-scheme: dark) {
+  .pankow-radio-input:hover {
+    border: 1px solid var(--pankow-color-light-dark);
+  }
+}
+
+.pankow-radio-input:focus {
+  border: 1px solid var(--pankow-color-primary);
+}
+
+</style>

package/components/SideBar.vue

@@ -0,0 +1,104 @@
+<script setup>
+
+import { ref, useTemplateRef, onMounted } from 'vue';
+import { onSwipe } from '../gestures.js';
+
+const sideBar = useTemplateRef('sideBar');
+const isVisible = ref(false);
+
+function open() {
+  isVisible.value = true;
+}
+
+function close() {
+  isVisible.value = false;
+}
+
+onMounted(() => {
+  onSwipe(sideBar.value, (direction) => {
+    if (direction === 'left') close();
+  });
+});
+
+defineExpose({ open, close });
+
+</script>
+
+<template>
+  <div class="pankow-sidebar" ref="sideBar" :class="{ 'pankow-sidebar-closed': !isVisible }">
+    <Transition name="pankow-scale">
+      <div class="pankow-sidebar-close-action" v-if="isVisible" @click="close()"><i class="fa-solid fa-xmark"></i></div>
+      <div class="pankow-sidebar-open-action" v-else @click="open()"><i class="fa-solid fa-bars"></i></div>
+    </Transition>
+    <div class="pankow-sidebar-inner">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<style>
+
+.pankow-sidebar {
+  display: block;
+  height: 100%;
+  min-width: 220px;
+  overflow: auto;
+}
+
+.pankow-sidebar-inner {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.pankow-sidebar-open-action {
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  font-size: 24px;
+  padding: 8px 14px;
+  cursor: pointer;
+  color: var(--pankow-color-dark);
+}
+
+.pankow-sidebar-close-action {
+  display: none;
+  position: fixed;
+  top: 0;
+  right: 0;
+  font-size: 32px;
+  padding: 8px 20px;
+  cursor: pointer;
+}
+
+@media (max-width: 576px) {
+  .pankow-sidebar {
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 2000;
+    transition: left 250ms ease-in-out;
+  }
+
+  .pankow-sidebar-closed {
+    position: fixed;
+    left: -600px;  /* depends on media query */
+  }
+
+  .pankow-sidebar-open-action {
+    display: block;
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 2000;
+  }
+
+  .pankow-sidebar-close-action {
+    display: block;
+  }
+}
+
+</style>

package/components/SingleSelect.vue

@@ -0,0 +1,190 @@
+<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'
+  },
+  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();
+const selected = ref(null);
+const selectedKey = ref(null);
+const elem = useTemplateRef('elem');
+const menu = useTemplateRef('menu');
+
+watch(model, (newValue, oldValue) => {
+  if (props.optionKey) {
+    selectedKey.value = newValue;
+    selected.value = props.options.find((o) => o[props.optionKey] === newValue);
+  } else {
+    selectedKey.value = null;
+    selected.value = newValue;
+  }
+});
+
+const menuModel = computed(() => {
+  return props.options.map((item) => {
+    return {
+      label: item[props.optionLabel],
+      disabled: item.disabled,
+      action: () => {
+        if (selected.value === item) return;
+
+        let index;
+        if (props.optionKey) {
+          index = props.options.findIndex((o) => o[props.optionKey] === item[props.optionKey]);
+        } else {
+          index = props.options.indexOf(item);
+        }
+
+        selectIndex(index);
+      }
+    };
+  });
+});
+
+function selectIndex(index) {
+  const item = props.options[index];
+
+  selected.value = item;
+  selectedKey.value = props.optionKey ? item[props.optionKey] : null;
+
+  const newValue = props.optionKey ? item[props.optionKey] : item;
+
+  model.value = newValue;
+  emits('select', newValue);
+}
+
+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();
+}
+
+function onSelectNext() {
+  if (props.disabled) return;
+
+  let index = props.optionKey ? props.options.findIndex((o) => o[props.optionKey] === selectedKey.value) : props.options.indexOf(selected.value);
+  selectIndex(index+1 >= props.options.length ? 0 : index+1);
+}
+
+function onSelectPrev() {
+  if (props.disabled) return;
+
+  let index = props.optionKey ? props.options.findIndex((o) => o[props.optionKey] === selectedKey.value) : props.options.indexOf(selected.value);
+  selectIndex(index <= 0 ? props.options.length-1 : index-1);
+}
+
+onMounted(() => {
+  if (props.optionKey) {
+    selectedKey.value = model.value;
+    selected.value = props.options.find((o) => o[props.optionKey] === selectedKey.value);
+  } else {
+    selected.value = model.value;
+  }
+});
+
+</script>
+
+<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">
+    <Menu ref="menu" :model="menuModel" :search-threshold="searchThreshold" :close-on-activation="true" @close="onMenuClosed"></Menu>
+    {{ selected ? selected[optionLabel] : placeholder }}
+    <Icon icon="fa-solid fa-chevron-down" class="pankow-button-icon-right-with-text" />
+  </div>
+</template>
+
+<style>
+
+.pankow-singleselect {
+  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);
+  padding: 5px 12px;
+  border-radius: var(--pankow-border-radius);
+  background-color: var(--pankow-input-background-color);
+  text-decoration: none;
+  cursor: pointer;
+  transition: background-color 250ms;
+  min-width: 100px;
+  white-space: nowrap;
+}
+
+@media (prefers-color-scheme: dark) {
+  .pankow-singleselect {
+    color: var(--pankow-color-light-dark);
+  }
+}
+
+.pankow-singleselect:focus {
+  outline: none;
+  border-color: var(--pankow-color-dark) !important;
+}
+
+.pankow-singleselect:hover {
+  border-color: var(--pankow-color-primary-hover);
+}
+
+.pankow-singleselect-disabled,
+.pankow-singleselect-disabled:hover {
+  cursor: not-allowed;
+  border-color: var(--pankow-input-border-color);
+}
+
+</style>

package/components/Spinner.vue

@@ -0,0 +1,67 @@
+<script setup>
+</script>
+
+<template>
+  <div class="pankow-spinner">
+    <div class="pankow-spinner-inner"></div>
+  </div>
+</template>
+
+<style>
+
+.pankow-spinner {
+  display: inline-block;
+  position: relative;
+  width: 1em;
+  height: 1em;
+}
+
+.pankow-spinner.pankow-button-icon-with-text {
+  margin-right: 6px;
+}
+
+.pankow-spinner-inner {
+  position: absolute;
+  top: 1px;
+  left: 0px;
+  display: inline-block;
+  vertical-align: middle;
+  width: 14px;
+  height: 14px;
+  border: 1.5px solid rgba(255,255,255,.2);
+  border-radius: 50%;
+  border-top-color: var(--pankow-text-color);
+  border-right-color: var(--pankow-text-color);
+  animation: pankow-spinner-animation 0.8s linear infinite;
+}
+
+.pankow-button:not([plain]) .pankow-spinner-inner,
+.pankow-button[plain]:hover .pankow-spinner-inner {
+  border-top-color: white;
+  border-right-color: white;
+}
+
+.pankow-spinner-large {
+  width: 48px;
+  height: 48px;
+}
+
+.pankow-spinner-large .pankow-spinner-inner {
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  width: 40px;
+  height: 40px;
+  border-width: 2px;
+}
+
+@keyframes pankow-spinner-animation {
+  0% {
+    transform: rotateZ(0deg);
+  }
+  100% {
+    transform: rotateZ(360deg)
+  }
+}
+
+</style>

package/components/Switch.vue

@@ -0,0 +1,94 @@
+<script setup>
+
+import { uuidv4 } from '../utils.js';
+
+const props = defineProps({
+  label: String,
+  id: String,
+  disabled: null
+});
+
+const model = defineModel({ type: Boolean });
+
+const internalId = uuidv4();
+
+const emit = defineEmits(['change']);
+
+function onChange() {
+  emit('change', model.value);
+}
+
+</script>
+
+<template>
+  <label :for="id || internalId" class="pankow-switch" :class="{ 'pankow-switch-disabled': disabled }">
+    <input :id="id || internalId" class="pankow-switch-input" type="checkbox" v-model="model" :disabled="disabled" @change="onChange"/>
+    <span></span>
+    <div class="pankow-switch-input-label">
+      <slot>{{ label }}</slot>
+    </div>
+  </label>
+</template>
+
+<style>
+
+.pankow-switch {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  margin-bottom: 0;
+}
+
+.pankow-switch-disabled,
+.pankow-switch-disabled span {
+  cursor: not-allowed !important;
+}
+
+.pankow-switch span {
+  position: relative;
+  background-color: var(--pankow-input-background-color);
+  border-radius: 17px;
+  border-style: solid;
+  border-width: 1px;
+  border-color: var(--pankow-input-border-color);
+  cursor: pointer;
+  width: 40px;
+  height: 20px;
+  transition: all 250ms;
+}
+
+.pankow-switch span::before {
+  background-color: var(--pankow-text-color);
+  border-radius: 50%;
+  content: "";
+  position: absolute;
+  left: 2px;
+  bottom: 2px;
+  height: calc(100% - 4px);
+  aspect-ratio: 1 / 1;
+  transition: all 250ms;
+}
+
+.pankow-switch-input-label {
+  margin-left: 8px;
+  cursor: pointer;
+}
+
+.pankow-switch-disabled .pankow-switch-input-label {
+  cursor: not-allowed;
+}
+
+input:checked + span {
+  background-color: var(--pankow-color-primary);
+}
+
+input:checked + span::before {
+  transform: translateX(20px);
+  background-color: white;
+}
+
+.pankow-switch input {
+  display: none;
+}
+
+</style>