@cloudron/pankow 4.2.2 → 4.3.0

package/index.js

@@ -5,14 +5,16 @@ 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';
+import BreadCrumb from './components/BreadCrumb.vue';
 import Button from './components/Button.vue';
 import ButtonGroup from './components/ButtonGroup.vue';
 import ClipboardAction from './components/ClipboardAction.vue';
 import ClipboardButton from './components/ClipboardButton.vue';
-import Checkbox from './components/Checkbox.vue';
+import CheckBox from './components/CheckBox.vue';
 import DateTimeInput from './components/DateTimeInput.vue';
 import Dialog from './components/Dialog.vue';
 import DirectoryView from './components/DirectoryView.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';
@@ -34,7 +37,8 @@ import OfflineBanner from './components/OfflineBanner.vue';
 import PasswordInput from './components/PasswordInput.vue';
 import Popover from './components/Popover.vue';
 import ProgressBar from './components/ProgressBar.vue';
-import Radiobutton from './components/Radiobutton.vue';
+import RadioButton from './components/RadioButton.vue';
+import SectionItem from './components/SectionItem.vue';
 import SideBar from './components/SideBar.vue';
 import SplitLayout from './components/SplitLayout.vue';
 import Spinner from './components/Spinner.vue';
@@ -57,12 +61,12 @@ import fallbackImage from './fallbackImage.js';
 
 export {
     BottomBar,
-    Breadcrumb,
+    BreadCrumb,
     Button,
     ButtonGroup,
     ClipboardAction,
     ClipboardButton,
-    Checkbox,
+    CheckBox,
     DateTimeInput,
     Dialog,
     DirectoryView,
@@ -71,6 +75,7 @@ export {
     FormGroup,
     InputGroup,
     Icon,
+    ListItem,
     InputDialog,
     LoginView,
     MainLayout,
@@ -85,7 +90,8 @@ export {
     PasswordInput,
     Popover,
     ProgressBar,
-    Radiobutton,
+    RadioButton,
+    SectionItem,
     SideBar,
     SplitLayout,
     Spinner,
@@ -105,3 +111,10 @@ export {
     fallbackImage,
     utils,
 };
+
+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.2",
-  "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,12 +37,15 @@
     "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",
     "highlight.js": "^11.11.1",
     "typescript": "^6.0.3",
-    "vite": "^8.1.0",
+    "vite": "^8.1.3",
     "vue": "^3.5.39",
     "vue-router": "^5.1.0"
   }

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);
+        }
+    }
+};

package/tooltip.js

@@ -1,19 +1,16 @@
-/*
+/**
+ * Tooltip Directive
+ *
+ * Usage:
+ * ```
+ * import tooltip from 'pankow/tooltip';
+ * app.directive('tooltip', tooltip);
+ * // <div v-tooltip.top="'hello'"></div>
+ * ```
+ *
+ * Position modifiers: `.top`, `.left`, `.right` (default: bottom).
+ */
 
-Tooltip Directive
-
-```
-import tooltip from 'pankow/tooltip';
-
-app.directive('tooltip', tooltip);
-
-...
-
-<div v-tooltip.top="'hello'"></div>
-
-```
-
-*/
 
 const TOP = 1;
 const BOTTOM = 2;
@@ -73,6 +70,12 @@ function update(target, modifiers, key) {
     else tooltips[key].element.style.top = (targetRect.bottom + padding) + 'px';
 }
 
+/**
+ * Vue directive `mounted` hook. Creates tooltip element on mouseenter.
+ * @param {HTMLElement} el
+ * @param {import('vue').DirectiveBinding} binding
+ * @param {import('vue').VNode} vnode
+ */
 function mounted(el, binding, vnode) {
     // generate running unique id
     el.__pankow_id = id++;
@@ -112,6 +115,12 @@ function mounted(el, binding, vnode) {
 
 }
 
+/**
+ * Vue directive `updated` hook. Updates tooltip text and position.
+ * @param {HTMLElement} el
+ * @param {import('vue').DirectiveBinding} binding
+ * @param {import('vue').VNode} vnode
+ */
 function updated(el, binding, vnode) {
     if (!tooltips[el.__pankow_id]) return;
 
@@ -123,6 +132,12 @@ function updated(el, binding, vnode) {
     update(el, binding.modifiers, el.__pankow_id);
 }
 
+/**
+ * Vue directive `beforeUnmount` hook. Removes tooltip element and cleans up.
+ * @param {HTMLElement} el
+ * @param {import('vue').DirectiveBinding} binding
+ * @param {import('vue').VNode} vnode
+ */
 function beforeUnmount(el, binding, vnode) {
     if (!tooltips[el.__pankow_id]) return;
 
@@ -130,6 +145,10 @@ function beforeUnmount(el, binding, vnode) {
     delete tooltips[el.__pankow_id];
 }
 
+/**
+ * Vue directive for tooltips. Register via `app.directive('tooltip', tooltip)`.
+ * @type {import('vue').Directive}
+ */
 const tooltip = {
     mounted,
     updated,

package/types/fallbackImage.d.ts

@@ -1,5 +1,6 @@
 export default fallbackImage;
-declare namespace fallbackImage {
-    export { mounted };
-}
-declare function mounted(el: any, binding: any, vnode: any): void;
+/**
+ * Vue directive for image fallback. Register via `app.directive('fallback-image', fallbackImage)`.
+ * @type {import('vue').Directive}
+ */
+declare const fallbackImage: import("vue").Directive;

package/types/fetcher.d.ts

@@ -8,33 +8,83 @@ declare namespace _default {
     export { del as delete };
 }
 export default _default;
+/**
+ * Shared configuration for all HTTP requests.
+ */
+export type FetcherGlobalOptions = {
+    /**
+     * - Fetch credentials mode
+     */
+    credentials: string;
+    /**
+     * - Fetch redirect mode
+     */
+    redirect: string;
+    /**
+     * - Called on non-2xx responses or network errors
+     */
+    errorHook: ((arg0: Response | Error) => void) | null;
+};
 declare namespace globalOptions {
     let credentials: string;
     let redirect: string;
     let errorHook: null;
 }
-/** @param {RequestInit} [options] Merged into `fetch()`; use `{ signal }` to abort. */
-declare function head(uri: any, query?: {}, options?: RequestInit): Promise<{
+/**
+ * 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: * }>}
+ */
+declare function head(uri: string, query?: Object, options?: RequestInit): Promise<{
     status: number;
     body: any;
 }>;
-/** @param {RequestInit} [options] Merged into `fetch()`; use `{ signal }` to abort. */
-declare function get(uri: any, query?: {}, options?: RequestInit): Promise<{
+/**
+ * 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: * }>}
+ */
+declare function get(uri: string, query?: Object, options?: RequestInit): Promise<{
     status: number;
     body: any;
 }>;
-/** @param {RequestInit} [options] Merged into `fetch()`; use `{ signal }` to abort. */
-declare function post(uri: any, body: any, query?: {}, options?: RequestInit): Promise<{
+/**
+ * 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: * }>}
+ */
+declare function post(uri: string, body: Object | FormData, query?: Object, options?: RequestInit): Promise<{
     status: number;
     body: any;
 }>;
-/** @param {RequestInit} [options] Merged into `fetch()`; use `{ signal }` to abort. */
-declare function put(uri: any, body: any, query?: {}, options?: RequestInit): Promise<{
+/**
+ * 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: * }>}
+ */
+declare function put(uri: string, body: Object | FormData, query?: Object, options?: RequestInit): Promise<{
     status: number;
     body: any;
 }>;
-/** @param {RequestInit} [options] Merged into `fetch()`; use `{ signal }` to abort. */
-declare function del(uri: any, body: any, query?: {}, options?: RequestInit): Promise<{
+/**
+ * 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: * }>}
+ */
+declare function del(uri: string, body: Object | FormData, query?: Object, options?: RequestInit): Promise<{
     status: number;
     body: any;
 }>;

package/types/gestures.d.ts

@@ -2,4 +2,19 @@ declare namespace _default {
     export { onSwipe };
 }
 export default _default;
-export function onSwipe(elem: any, callback: any, threshold?: number): void;
+/**
+ * Swipe handler
+ *
+ * Usage:
+ * ```
+ * import { onSwipe } from 'pankow/gestures';
+ * 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
+ */
+export function onSwipe(elem: HTMLElement, callback: (arg0: "left" | "right" | "up" | "down") => void, threshold?: number): void;

package/types/index.d.ts

@@ -1,6 +1,9 @@
+export { useNotify } from "./notifyState.js";
+export default pankowPlugin;
 import fetcher from './fetcher.js';
 import gestures from './gestures.js';
 import tooltip from './tooltip.js';
 import fallbackImage from './fallbackImage.js';
 import utils from './utils.js';
-export { BottomBar, Breadcrumb, Button, ButtonGroup, ClipboardAction, ClipboardButton, Checkbox, DateTimeInput, Dialog, DirectoryView, EmailInput, FileUploader, FormGroup, InputGroup, Icon, InputDialog, LoginView, MainLayout, MaskedInput, Menu, MenuItem, SingleSelect, MultiSelect, Notification, NumberInput, OfflineBanner, PasswordInput, Popover, ProgressBar, Radiobutton, SideBar, SplitLayout, Spinner, Switch, TableView, TableViewActionBar, TabView, TagInput, TextInput, TextInputRaw, TopBar, TreeView, fetcher, gestures, tooltip, fallbackImage, utils };
+import pankowPlugin from './plugin.js';
+export { BottomBar, BreadCrumb, Button, ButtonGroup, ClipboardAction, ClipboardButton, CheckBox, DateTimeInput, Dialog, DirectoryView, EmailInput, FileUploader, FormGroup, InputGroup, Icon, ListItem, InputDialog, LoginView, MainLayout, MaskedInput, Menu, MenuItem, SingleSelect, MultiSelect, Notification, NumberInput, OfflineBanner, PasswordInput, Popover, ProgressBar, RadioButton, SectionItem, SideBar, SplitLayout, Spinner, Switch, TableView, TableViewActionBar, TabView, TagInput, TextInput, TextInputRaw, TopBar, TreeView, fetcher, gestures, tooltip, fallbackImage, utils, CheckBox as Checkbox, RadioButton as Radiobutton, BreadCrumb as Breadcrumb };

package/types/notifyState.d.ts

@@ -0,0 +1,8 @@
+export const messages: import("vue").Reactive<never[]>;
+export const position: import("vue").Ref<string, string>;
+export function pushNotify(options: any): void;
+export function removeNotify(id: any): void;
+export function setNotifyPosition(pos: any): void;
+export function useNotify(): {
+    notify: typeof pushNotify;
+};

package/types/plugin.d.ts

@@ -0,0 +1,4 @@
+declare namespace _default {
+    function install(app: any, options?: {}): void;
+}
+export default _default;

package/types/tooltip.d.ts

@@ -1,9 +1,6 @@
 export default tooltip;
-declare namespace tooltip {
-    export { mounted };
-    export { updated };
-    export { beforeUnmount };
-}
-declare function mounted(el: any, binding: any, vnode: any): void;
-declare function updated(el: any, binding: any, vnode: any): void;
-declare function beforeUnmount(el: any, binding: any, vnode: any): void;
+/**
+ * Vue directive for tooltips. Register via `app.directive('tooltip', tooltip)`.
+ * @type {import('vue').Directive}
+ */
+declare const tooltip: import("vue").Directive;