@cloudron/pankow 4.2.3 → 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/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/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 : () => {};
 

package/index.js

@@ -5,6 +5,8 @@ import "@fontsource/inter/500.css";
 import '@fortawesome/fontawesome-free/css/all.min.css';
 import './style.css';
 
+import pankowPlugin from './plugin.js';
+
 // Order of import matters due to css rule matching!
 import BottomBar from './components/BottomBar.vue';
 import BreadCrumb from './components/BreadCrumb.vue';
@@ -21,6 +23,7 @@ import FileUploader from './components/FileUploader.vue';
 import FormGroup from './components/FormGroup.vue';
 import Icon from './components/Icon.vue';
 import InputDialog from './components/InputDialog.vue';
+import ListItem from './components/ListItem.vue';
 import LoginView from './components/LoginView.vue';
 import MainLayout from './components/MainLayout.vue';
 import MaskedInput from './components/MaskedInput.vue';
@@ -72,6 +75,7 @@ export {
     FormGroup,
     InputGroup,
     Icon,
+    ListItem,
     InputDialog,
     LoginView,
     MainLayout,
@@ -111,3 +115,6 @@ export {
 export { CheckBox as Checkbox }; /* deprecated */
 export { RadioButton as Radiobutton }; /* deprecated */
 export { BreadCrumb as Breadcrumb }; /* deprecated */
+
+export { useNotify } from './notifyState.js';
+export default pankowPlugin;

package/notifyState.js

@@ -0,0 +1,48 @@
+import { reactive, ref } from 'vue';
+import { uuidv4 } from './utils.js';
+
+const messages = reactive([]);
+const position = ref('top-center');
+
+function pushNotify(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;
+
+    messages.push({ id, text, persistent, type });
+
+    if (!persistent) {
+        setTimeout(() => {
+            const index = messages.findIndex((value) => value.id === id);
+            if (index > -1) messages.splice(index, 1);
+        }, timeout);
+    }
+}
+
+function removeNotify(id) {
+    const index = messages.findIndex((value) => value.id === id);
+    if (index > -1) messages.splice(index, 1);
+}
+
+function useNotify() {
+    return { notify: pushNotify };
+}
+
+function setNotifyPosition(pos) {
+    position.value = pos;
+}
+
+if (typeof window !== 'undefined') {
+    if (!window.pankow) window.pankow = {};
+    if (window.pankow.notify) {
+        console.error('Pankow: Notification already registered! Only ever use a single one.');
+    } else {
+        window.pankow.notify = pushNotify;
+    }
+
+    window.pankow.setNotifyPosition = setNotifyPosition;
+}
+
+export { messages, position, pushNotify, removeNotify, setNotifyPosition, useNotify };

package/package.json

@@ -1,10 +1,19 @@
 {
   "name": "@cloudron/pankow",
   "private": false,
-  "version": "4.2.3",
-  "description": "",
+  "version": "4.3.0",
+  "description": "Vue 3 UI component library for Cloudron apps",
   "main": "index.js",
   "types": "types/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./index.js",
+      "types": "./types/index.d.ts"
+    },
+    "./*": "./*",
+    "./vite-plugin": "./vite-plugin.js"
+  },
+  "keywords": ["vue", "vue3", "cloudron", "ui", "components"],
   "files": [
     "*.css",
     "*.js",
@@ -28,6 +37,9 @@
     "monaco-editor": "^0.55.1",
     "online-3d-viewer": "^0.18.0"
   },
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  },
   "devDependencies": {
     "@highlightjs/vue-plugin": "^2.1.0",
     "@vitejs/plugin-vue": "^6.0.7",

package/plugin.js

@@ -0,0 +1,39 @@
+import { createApp } from 'vue';
+import tooltip from './tooltip.js';
+import fallbackImage from './fallbackImage.js';
+import fetcher from './fetcher.js';
+import { setNotifyPosition } from './notifyState.js';
+import Notification from './components/Notification.vue';
+
+const CONTAINER_ID = 'pankow-notification-root';
+
+export default {
+    install(app, options = {}) {
+        app.directive('tooltip', tooltip);
+        app.directive('fallback-image', fallbackImage);
+
+        if (options.fetcher) {
+            if (options.fetcher.credentials !== undefined) {
+                fetcher.globalOptions.credentials = options.fetcher.credentials;
+            }
+            if (options.fetcher.errorHook !== undefined) {
+                fetcher.globalOptions.errorHook = options.fetcher.errorHook;
+            }
+        }
+
+        if (options.notification?.position) {
+            setNotifyPosition(options.notification.position);
+        }
+
+        if (typeof document !== 'undefined') {
+            const existing = document.getElementById(CONTAINER_ID);
+            if (existing) existing.remove();
+
+            const container = document.createElement('div');
+            container.id = CONTAINER_ID;
+            document.body.appendChild(container);
+
+            createApp(Notification).mount(container);
+        }
+    }
+};