@cloudron/pankow 4.2.2 → 4.3.0

package/components/ListItem.vue

@@ -0,0 +1,188 @@
+<script setup>
+
+import { computed, useTemplateRef, ref } from 'vue';
+import Menu from './Menu.vue';
+import Button from './Button.vue';
+import ButtonGroup from './ButtonGroup.vue';
+import Icon from './Icon.vue';
+
+const props = defineProps({
+  label: String,
+  subtext: String,
+  href: String,
+  actions: {
+    type: Array,
+    default: () => [],
+  },
+});
+
+const quickActions = computed(() => {
+  if (window.innerWidth <= 576) return [];
+
+  const visibleActions = props.actions.filter(a => !(typeof a.visible !== 'undefined' && !a.visible) && !a.separator);
+  if (visibleActions.length <= 2) return visibleActions;
+
+  return visibleActions.filter(a => a.quickAction);
+});
+
+const visibleActionCount = computed(() => {
+  return props.actions.filter(a => !(typeof a.visible !== 'undefined' && !a.visible) && !a.separator).length;
+});
+
+const isMenuOpen = ref(false);
+
+const menuElement = useTemplateRef('menuElement');
+function onMenu(event) {
+  isMenuOpen.value = true;
+  menuElement.value.open(event, event.currentTarget);
+}
+
+</script>
+
+<template>
+  <component
+    :is="href ? 'a' : 'div'"
+    :href="href"
+    class="pankow-list-item"
+    :class="{ 'pankow-list-item-link': href }"
+  >
+    <div class="pankow-list-item-left">
+      <slot name="left" />
+    </div>
+    <div class="pankow-list-item-center">
+      <div class="pankow-list-item-label">{{ label }}</div>
+      <div v-if="subtext" class="pankow-list-item-subtext">{{ subtext }}</div>
+    </div>
+    <div class="pankow-list-item-right">
+      <Icon v-if="href" icon="fa-solid fa-chevron-right" class="pankow-list-item-chevron" />
+      <div v-else-if="visibleActionCount > 0" class="pankow-list-item-action-bar" :class="{ 'is-menu-open': isMenuOpen }">
+        <Menu ref="menuElement" :model="actions" @close="isMenuOpen = false" />
+        <ButtonGroup class="pankow-list-item-action-bar-quick-actions">
+          <Button tool v-for="quickAction in quickActions" :key="quickAction" :icon="quickAction.icon" @click="quickAction.action && quickAction.action()" :href="quickAction.href || null" :target="quickAction.target || null" v-tooltip.top="quickAction.label"/>
+          <Button tool @click.capture="onMenu($event)" icon="fa-solid fa-ellipsis" v-if="visibleActionCount > 0 && visibleActionCount !== quickActions.length"/>
+        </ButtonGroup>
+        <Button tool :plain="isMenuOpen ? null : true" secondary @click.capture="onMenu($event)" icon="fa-solid fa-ellipsis" v-if="visibleActionCount > 0" class="pankow-list-item-action-bar-menu-trigger"/>
+      </div>
+    </div>
+  </component>
+</template>
+
+<style scoped>
+
+.pankow-list-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 10px;
+  padding: 12px 16px;
+  background: var(--pankow-body-background-color);
+  border-radius: var(--pankow-border-radius);
+  color: inherit;
+  transition: background-color 0.15s;
+}
+
+.pankow-list-item-link {
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.pankow-list-item:hover {
+  background: var(--pankow-color-background-hover);
+}
+
+.pankow-list-item-left {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+
+.pankow-list-item-center {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  flex: 1;
+}
+
+.pankow-list-item-label {
+  font-size: 15px;
+  font-weight: var(--pankow-font-weight-bold);
+}
+
+.pankow-list-item-subtext {
+  font-size: 13px;
+  color: var(--pankow-color-text-secondary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.pankow-list-item-right {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+}
+
+.pankow-list-item-chevron {
+  font-size: 12px;
+  color: #999;
+}
+
+.pankow-list-item-action-bar {
+  display: flex;
+  gap: 5px;
+  justify-content: end;
+  min-height: 31px;
+  align-items: center;
+  min-width: 55px;
+}
+
+.pankow-list-item-action-bar-menu-trigger {
+  display: none;
+}
+
+.pankow-list-item-action-bar-quick-actions {
+  display: flex;
+}
+
+.pankow-list-item-action-bar .pankow-list-item-action-bar-quick-actions .pankow-button {
+  background-color: var(--pankow-input-background-color);
+  color: var(--pankow-color-text);
+  border: 1px solid transparent;
+}
+
+.pankow-list-item-action-bar .pankow-list-item-action-bar-quick-actions .pankow-button:hover {
+  color: var(--pankow-color-primary);
+}
+
+@media (hover: hover) {
+  .pankow-list-item-action-bar-quick-actions {
+    display: none;
+  }
+
+  .pankow-list-item-action-bar-menu-trigger {
+    display: flex;
+  }
+
+  .pankow-list-item:hover .pankow-list-item-action-bar-quick-actions {
+    display: flex;
+  }
+
+  .pankow-list-item:hover .pankow-list-item-action-bar-menu-trigger {
+    display: none;
+  }
+}
+
+@media (hover: none) {
+  .pankow-list-item-action-bar-quick-actions {
+    display: flex;
+  }
+
+  .pankow-list-item-action-bar-menu-trigger {
+    display: none;
+  }
+}
+
+.pankow-list-item-action-bar.is-menu-open .pankow-list-item-action-bar-menu-trigger {
+  display: block !important;
+}
+
+</style>

package/components/MenuItem.vue

@@ -1,7 +1,7 @@
 <script setup>
 
 import { computed } from 'vue';
-import Checkbox from './Checkbox.vue';
+import CheckBox from './CheckBox.vue';
 import Icon from './Icon.vue';
 
 const emit = defineEmits(['activated']);
@@ -43,7 +43,7 @@ function onActivated() {
 
 <template>
   <div class="pankow-menu-item" :class="{'pankow-menu-item-disabled': isDisabled }" @click.stop="onActivated" :separator="item.separator" v-if="isVisible" tabindex="0" @keydown.enter.stop="onActivated" @keydown.space.stop="onActivated">
-    <Checkbox v-model="item.checked" v-if="item.checkbox" style="margin-right: 4px; display: inline-flex;"/>
+    <CheckBox v-model="item.checked" v-if="item.checkbox" style="margin-right: 4px; display: inline-flex;"/>
     <span v-if="!item.separator" :style="{ width: (hasIcons && !item.checkbox) ? '29px' : 0 }"><Icon v-show="hasIcons" :icon="item.icon"/></span>{{ item.label }}
     <div class="pankow-menu-item-separator-line" v-if="item.separator"></div>
   </div>

package/components/MenuItemLink.vue

@@ -1,7 +1,7 @@
 <script setup>
 
 import { computed } from 'vue';
-import Checkbox from './Checkbox.vue';
+import CheckBox from './CheckBox.vue';
 import Icon from './Icon.vue';
 
 const emit = defineEmits(['activated']);

package/components/Notification.vue

@@ -1,71 +1,19 @@
 <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>
+  <TransitionGroup name="pankow-notification-fade" :class="`pankow-notification-container ${position}`" tag="div">
+    <div v-for="message in messages" :key="message.id">
+      <div class="pankow-notification" :[message.type]="''">
+        {{ message.text }}
+        <Icon @click="removeNotify(message.id)" icon="fa-solid fa-xmark" class="pankow-notification-close"/>
       </div>
-    </TransitionGroup>
-  </teleport>
+    </div>
+  </TransitionGroup>
 </template>
 
-<script>
-
-import { uuidv4 } from '../utils.js';
+<script setup>
 
+import { messages, position, removeNotify } from '../notifyState.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>

package/components/{Radiobutton.vue → RadioButton.vue}

@@ -7,37 +7,21 @@
   </span>
 </template>
 
-<script>
+<script setup>
 
 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()
-    }
-  }
-};
+defineProps({
+  value: String,
+  label: String,
+  id: String,
+  name: String,
+  disabled: null
+});
+
+const internalValue = defineModel({ type: String });
+
+const internalId = uuidv4();
 
 </script>
 

package/components/SectionItem.vue

@@ -0,0 +1,113 @@
+<script setup>
+
+import { useTemplateRef, ref, onMounted, onUnmounted } from 'vue';
+
+const mobileFilterBar = useTemplateRef('mobileFilterBar');
+
+const isMobile = ref(false);
+
+defineProps({
+  title: String,
+});
+
+function checkForMobile() {
+  isMobile.value = window.innerWidth <= 576;
+}
+
+onMounted(() => {
+  checkForMobile();
+  window.addEventListener('resize', checkForMobile);
+});
+
+onUnmounted(() => {
+  window.removeEventListener('resize', checkForMobile);
+});
+
+</script>
+
+<template>
+  <div class="pankow-section-item">
+    <h2 class="pankow-section-item-header">
+      <div>
+        <div class="pankow-section-item-header-title-text">
+          <slot name="header-title">{{ title }}</slot>
+          <slot name="header-title-extra"></slot>
+        </div>
+      </div>
+      <div>
+        <Teleport :disabled="!isMobile" :to="mobileFilterBar">
+          <slot name="filter-bar"></slot>
+        </Teleport>
+        <slot name="header-buttons"></slot>
+      </div>
+    </h2>
+    <div class="pankow-section-item-mobile-filter-bar" v-show="isMobile && $slots['filter-bar']" ref="mobileFilterBar"></div>
+    <hr class="pankow-section-item-divider"/>
+    <div class="pankow-section-item-body">
+      <slot></slot>
+    </div>
+  </div>
+</template>
+
+<style>
+
+.pankow-section-item {
+  margin-bottom: 20px;
+  position: relative;
+}
+
+.pankow-section-item-header {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  gap: 5px;
+  padding-left: 15px;
+  padding-right: 15px;
+  padding-top: 5px;
+  margin-top: 0;
+  margin-bottom: 0;
+  font-size: 24px;
+  font-weight: var(--pankow-font-weight-bold);
+}
+
+.pankow-section-item-header > div {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.pankow-section-item-header-title-text {
+  display: flex;
+  gap: 6px;
+  align-items: baseline;
+}
+
+.pankow-section-item-divider {
+  border: 0;
+  border-top: 1px solid #d8dee4;
+  margin-top: 10px;
+  margin-bottom: 5px;
+}
+
+@media (prefers-color-scheme: dark) {
+  .pankow-section-item-divider {
+    border-top-color: #495057;
+  }
+}
+
+.pankow-section-item-body {
+  position: relative;
+  margin-bottom: 15px;
+  padding: 10px 15px 25px;
+}
+
+.pankow-section-item-mobile-filter-bar {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+  margin: 10px 15px;
+}
+
+</style>

package/components/TabView.vue

@@ -14,39 +14,34 @@
   </div>
 </template>
 
-<script>
-
-export default {
-  name: 'TabView',
-  emits: [ 'changed' ],
-  props: {
-    tabs: {
-      type: Object,
-      default: {}
-    },
-    defaultActive: String,
-    tabPosition: {
-      type: String,
-      default: 'top',
-    }
-  },
-  data() {
-    return {
-      active: ''
-    };
-  },
-  mounted() {
-    this.active = this.defaultActive;
-  },
-  methods: {
-    open(key) {
-      if (this.active === key) return;
+<script setup>
 
-      this.active = key;
-      this.$emit('changed', key);
-    }
+import { ref, onMounted } from 'vue';
+
+const emit = defineEmits([ 'changed' ]);
+const props = defineProps({
+  tabs: {
+    type: Object,
+    default: {}
+  },
+  defaultActive: String,
+  tabPosition: {
+    type: String,
+    default: 'top',
   }
-};
+});
+
+const active = ref('');
+
+onMounted(() => {
+  active.value = props.defaultActive;
+});
+
+function open(key) {
+  if (active.value === key) return;
+  active.value = key;
+  emit('changed', key);
+}
 
 </script>
 

package/fallbackImage.js

@@ -1,20 +1,20 @@
-/*
-
-FallbackImage Directive
-
-```
-import fallbackImage from 'pankow/fallbackImage';
-
-app.directive('fallback-image', fallbackImage);
-
-...
-
-<im v-fallback-image="'/fallback.png'"/>
-
-```
-
-*/
-
+/**
+ * FallbackImage Directive
+ *
+ * Usage:
+ * ```
+ * import fallbackImage from 'pankow/fallbackImage';
+ * app.directive('fallback-image', fallbackImage);
+ * // <img v-fallback-image="'/fallback.png'"/>
+ * ```
+ */
+
+/**
+ * Vue directive `mounted` hook. Sets fallback src on image load error.
+ * @param {HTMLImageElement} el
+ * @param {import('vue').DirectiveBinding} binding - binding.value is the fallback URL
+ * @param {import('vue').VNode} vnode
+ */
 function mounted(el, binding, vnode) {
   el.addEventListener('error', () => {
     console.log('image loading failed, try to load', binding.value);
@@ -22,6 +22,10 @@ function mounted(el, binding, vnode) {
   });
 }
 
+/**
+ * Vue directive for image fallback. Register via `app.directive('fallback-image', fallbackImage)`.
+ * @type {import('vue').Directive}
+ */
 const fallbackImage = {
   mounted
 };

package/fetcher.js

@@ -1,4 +1,12 @@
 
+/**
+ * Shared configuration for all HTTP requests.
+ * @typedef {Object} FetcherGlobalOptions
+ * @property {string} credentials - Fetch credentials mode
+ * @property {string} redirect - Fetch redirect mode
+ * @property {?function(Response|Error): void} errorHook - Called on non-2xx responses or network errors
+ */
+
 const globalOptions = {
     credentials: 'same-origin',
     redirect: 'error',
@@ -16,6 +24,7 @@ const globalOptions = {
  * @param {Object} query  Plain key/value map serialized as the URL query string
  * @param {Object|FormData|null} body
  * @param {RequestInit} [options]  Extra fetch options; `signal` is supported for cancellation
+ * @returns {Promise<{ status: number, body: any }>}
  */
 async function request(uri, method, headers, query, body, options) {
     let response, responseBody;
@@ -64,27 +73,60 @@ async function request(uri, method, headers, query, body, options) {
     return { status: response.status, body: responseBody };
 }
 
-/** @param {RequestInit} [options] Merged into `fetch()`; use `{ signal }` to abort. */
+/**
+ * Sends a HEAD request.
+ * @param {string} uri
+ * @param {Object} [query={}] - Query parameters serialized as URL query string
+ * @param {RequestInit} [options={}] - Merged into `fetch()`; use `{ signal }` to abort
+ * @returns {Promise<{ status: number, body: * }>}
+ */
 async function head(uri, query = {}, options = {}) {
     return await request(uri, 'HEAD', {}, query, null, options);
 }
 
-/** @param {RequestInit} [options] Merged into `fetch()`; use `{ signal }` to abort. */
+/**
+ * Sends a GET request.
+ * @param {string} uri
+ * @param {Object} [query={}] - Query parameters serialized as URL query string
+ * @param {RequestInit} [options={}] - Merged into `fetch()`; use `{ signal }` to abort
+ * @returns {Promise<{ status: number, body: * }>}
+ */
 async function get(uri, query = {}, options = {}) {
     return await request(uri, 'GET', {}, query, null, options);
 }
 
-/** @param {RequestInit} [options] Merged into `fetch()`; use `{ signal }` to abort. */
+/**
+ * Sends a POST request with a JSON or FormData body.
+ * @param {string} uri
+ * @param {Object|FormData} body - Request body; objects are JSON-stringified
+ * @param {Object} [query={}] - Query parameters serialized as URL query string
+ * @param {RequestInit} [options={}] - Merged into `fetch()`; use `{ signal }` to abort
+ * @returns {Promise<{ status: number, body: * }>}
+ */
 async function post(uri, body, query = {}, options = {}) {
     return await request(uri, 'POST', {}, query, body, options);
 }
 
-/** @param {RequestInit} [options] Merged into `fetch()`; use `{ signal }` to abort. */
+/**
+ * Sends a PUT request with a JSON or FormData body.
+ * @param {string} uri
+ * @param {Object|FormData} body - Request body; objects are JSON-stringified
+ * @param {Object} [query={}] - Query parameters serialized as URL query string
+ * @param {RequestInit} [options={}] - Merged into `fetch()`; use `{ signal }` to abort
+ * @returns {Promise<{ status: number, body: * }>}
+ */
 async function put(uri, body, query = {}, options = {}) {
     return await request(uri, 'PUT', {}, query, body, options);
 }
 
-/** @param {RequestInit} [options] Merged into `fetch()`; use `{ signal }` to abort. */
+/**
+ * Sends a DELETE request with an optional body.
+ * @param {string} uri
+ * @param {Object|FormData} body - Request body; objects are JSON-stringified
+ * @param {Object} [query={}] - Query parameters serialized as URL query string
+ * @param {RequestInit} [options={}] - Merged into `fetch()`; use `{ signal }` to abort
+ * @returns {Promise<{ status: number, body: * }>}
+ */
 async function del(uri, body, query = {}, options = {}) {
     return await request(uri, 'DELETE', {}, query, body, options);
 }

package/gestures.js

@@ -1,15 +1,19 @@
-/*
+/**
+ * Swipe handler
+ *
+ * Usage:
+ * ```
+ * import { onSwipe } from 'pankow/gestures';
+ * onSwipe(element, (direction) => {});
+ * ```
+ */
 
-Swipe handler
-
-```
-import { onSwipe } from 'pankow/guesture';
-
-onSwipe(element, (direction) => {});
-
-```
-
-*/
+/**
+ * Registers touch event listeners on an element and calls the callback on swipe.
+ * @param {HTMLElement} elem
+ * @param {function('left'|'right'|'up'|'down'): void} callback
+ * @param {number} [threshold=50] - Minimum pixel distance to trigger a swipe
+ */
 function onSwipe(elem, callback, threshold = 50) {
   callback = typeof callback === 'function' ? callback : () => {};