@cloudron/pankow 4.4.4 → 4.4.6

package/components/Dialog.vue

@@ -128,6 +128,7 @@ defineExpose({ open, close });
           </div>
           <div class="pankow-dialog-buttons" v-if="rejectLabel || confirmLabel || alternateLabel">
             <Button :[alternateStyle]="!!alternateStyle" @click="onAlternateAction" v-show="alternateLabel" :loading="alternateBusy" :disabled="alternateBusy || !alternateActive">{{ alternateLabel }}</Button>
+            <slot name="footer"/>
             <div style="flex-grow: 1;"></div>
             <Button :[rejectStyle]="!!rejectStyle" @click="onReject" v-show="rejectLabel" :disabled="!rejectActive">{{ rejectLabel }}</Button>
             <Button ref="confirmButton" :[confirmStyle]="!!confirmStyle" @click="onConfirm" v-show="confirmLabel" :loading="confirmBusy" :disabled="confirmBusy || !confirmActive">{{ confirmLabel }}</Button>

package/components/SettingsItem.vue

@@ -0,0 +1,49 @@
+<script setup>
+</script>
+
+<template>
+  <div class="pankow-settings-item">
+    <div class="pankow-settings-item-body">
+      <slot></slot>
+    </div>
+    <div class="pankow-settings-item-bottom" v-if="$slots.bottom">
+      <slot name="bottom"></slot>
+    </div>
+  </div>
+</template>
+
+<style>
+
+.pankow-settings-item {
+  border-radius: var(--pankow-border-radius);
+  padding: 0;
+  margin-bottom: 20px;
+}
+
+.pankow-settings-item-body {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 20px;
+}
+
+.pankow-settings-item-body > :first-child {
+  max-width: 720px;
+}
+
+@media (max-width: 576px) {
+  .pankow-settings-item[wrap] .pankow-settings-item-body {
+    flex-wrap: wrap;
+  }
+}
+
+.pankow-settings-item label {
+  margin-top: 0;
+}
+
+.pankow-settings-item-bottom {
+  width: 100%;
+  margin-top: 10px;
+}
+
+</style>

package/fetcher.js

@@ -30,7 +30,12 @@ async function request(uri, method, headers, query, body, options) {
     let response, responseBody;
 
     const url = new URL(uri, typeof window !== 'undefined' ? window.location.origin : undefined);
-    url.search = new URLSearchParams(query).toString();
+    const uriParams = new URLSearchParams(url.search);
+    const queryParams = new URLSearchParams(query);
+    for (const [key, value] of queryParams) {
+        uriParams.set(key, value);
+    }
+    url.search = uriParams.toString();
 
     const fetchOptions = Object.assign({}, globalOptions, options, { method, headers });
 
@@ -73,61 +78,135 @@ async function request(uri, method, headers, query, body, options) {
     return { status: response.status, body: responseBody };
 }
 
+/**
+ * Disambiguates positional query/options arguments from the new named-parameter style.
+ *
+ * New style (when the second/third arg has a `query` property):
+ *   get(uri, { query: { page: 1 }, signal })   → query={page:1}, options={signal}
+ *   post(uri, body, { query: { t: 'x' }, signal }) → query={t:'x'}, options={signal}
+ *
+ * Legacy style (positional, unchanged):
+ *   get(uri, { page: 1 })
+ *   get(uri, { page: 1 }, { signal })
+ *   post(uri, body, { t: 'x' }, { signal })
+ *
+ * @param {Object} queryOrOpts - Either a query object or an options object with a `query` key
+ * @param {Object} [secondOpts={}] - Additional options (for legacy positional style)
+ * @returns {{ query: Object, options: Object }}
+ */
+function splitQueryOptions(queryOrOpts, secondOpts = {}) {
+    if (queryOrOpts && typeof queryOrOpts === 'object' && !(queryOrOpts instanceof FormData) && 'query' in queryOrOpts) {
+        const { query, ...opts } = queryOrOpts;
+        return { query, options: Object.assign(opts, secondOpts) };
+    }
+    return { query: queryOrOpts || {}, options: secondOpts };
+}
+
 /**
  * Sends a HEAD request.
+ *
+ * @example
+ * // legacy style (positional query)
+ * await fetcher.head('/api/items', { sort: 'name' }, { signal: abortController.signal });
+ *
+ * @example
+ * // new style (named query in options object)
+ * await fetcher.head('/api/items', { query: { sort: 'name' }, signal: abortController.signal });
+ *
  * @param {string} uri
- * @param {Object} [query={}] - Query parameters serialized as URL query string
- * @param {RequestInit} [options={}] - Merged into `fetch()`; use `{ signal }` to abort
+ * @param {Object} [queryOrOpts={}] - Query parameters OR options object with optional `query` key
+ * @param {RequestInit} [moreOpts={}] - Merged into `fetch()`; use `{ signal }` to abort
  * @returns {Promise<{ status: number, body: * }>}
  */
-async function head(uri, query = {}, options = {}) {
+async function head(uri, queryOrOpts = {}, moreOpts = {}) {
+    const { query, options } = splitQueryOptions(queryOrOpts, moreOpts);
     return await request(uri, 'HEAD', {}, query, null, options);
 }
 
 /**
  * Sends a GET request.
+ *
+ * @example
+ * // legacy style (positional query)
+ * await fetcher.get('/api/items', { page: 1 }, { signal: abortController.signal });
+ *
+ * @example
+ * // new style (named query in options object)
+ * await fetcher.get('/api/items', { query: { page: 1 }, signal: abortController.signal });
+ *
  * @param {string} uri
- * @param {Object} [query={}] - Query parameters serialized as URL query string
- * @param {RequestInit} [options={}] - Merged into `fetch()`; use `{ signal }` to abort
+ * @param {Object} [queryOrOpts={}] - Query parameters OR options object with optional `query` key
+ * @param {RequestInit} [moreOpts={}] - Merged into `fetch()`; use `{ signal }` to abort
  * @returns {Promise<{ status: number, body: * }>}
  */
-async function get(uri, query = {}, options = {}) {
+async function get(uri, queryOrOpts = {}, moreOpts = {}) {
+    const { query, options } = splitQueryOptions(queryOrOpts, moreOpts);
     return await request(uri, 'GET', {}, query, null, options);
 }
 
 /**
  * Sends a POST request with a JSON or FormData body.
+ *
+ * @example
+ * // legacy style (positional query)
+ * await fetcher.post('/api/items', { name: 'Foo' }, { dryRun: true }, { signal: abortController.signal });
+ *
+ * @example
+ * // new style (named query in options object)
+ * await fetcher.post('/api/items', { name: 'Foo' }, { query: { dryRun: true }, signal: abortController.signal });
+ *
  * @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
+ * @param {Object} [queryOrOpts={}] - Query parameters OR options object with optional `query` key
+ * @param {RequestInit} [moreOpts={}] - Merged into `fetch()`; use `{ signal }` to abort
  * @returns {Promise<{ status: number, body: * }>}
  */
-async function post(uri, body, query = {}, options = {}) {
+async function post(uri, body, queryOrOpts = {}, moreOpts = {}) {
+    const { query, options } = splitQueryOptions(queryOrOpts, moreOpts);
     return await request(uri, 'POST', {}, query, body, options);
 }
 
 /**
  * Sends a PUT request with a JSON or FormData body.
+ *
+ * @example
+ * // legacy style (positional query)
+ * await fetcher.put('/api/items/42', { name: 'Foo' }, { dryRun: true }, { signal: abortController.signal });
+ *
+ * @example
+ * // new style (named query in options object)
+ * await fetcher.put('/api/items/42', { name: 'Foo' }, { query: { dryRun: true }, signal: abortController.signal });
+ *
  * @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
+ * @param {Object} [queryOrOpts={}] - Query parameters OR options object with optional `query` key
+ * @param {RequestInit} [moreOpts={}] - Merged into `fetch()`; use `{ signal }` to abort
  * @returns {Promise<{ status: number, body: * }>}
  */
-async function put(uri, body, query = {}, options = {}) {
+async function put(uri, body, queryOrOpts = {}, moreOpts = {}) {
+    const { query, options } = splitQueryOptions(queryOrOpts, moreOpts);
     return await request(uri, 'PUT', {}, query, body, options);
 }
 
 /**
  * Sends a DELETE request with an optional body.
+ *
+ * @example
+ * // legacy style — no body, with query and options
+ * await fetcher.del('/api/items/42', null, { force: true }, { signal: abortController.signal });
+ *
+ * @example
+ * // new style — named query in options object, no body
+ * await fetcher.del('/api/items/42', null, { query: { force: true }, signal: abortController.signal });
+ *
  * @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
+ * @param {Object|FormData|null} body - Request body; objects are JSON-stringified. Pass `null` for no body.
+ * @param {Object} [queryOrOpts={}] - Query parameters OR options object with optional `query` key
+ * @param {RequestInit} [moreOpts={}] - Merged into `fetch()`; use `{ signal }` to abort
  * @returns {Promise<{ status: number, body: * }>}
  */
-async function del(uri, body, query = {}, options = {}) {
+async function del(uri, body, queryOrOpts = {}, moreOpts = {}) {
+    const { query, options } = splitQueryOptions(queryOrOpts, moreOpts);
     return await request(uri, 'DELETE', {}, query, body, options);
 }
 

package/index.js

@@ -40,6 +40,7 @@ import ProgressBar from './components/ProgressBar.vue';
 import RadioButton from './components/RadioButton.vue';
 import SaveIndicator from './components/SaveIndicator.vue';
 import SectionItem from './components/SectionItem.vue';
+import SettingsItem from './components/SettingsItem.vue';
 import SideBar from './components/SideBar.vue';
 import SplitLayout from './components/SplitLayout.vue';
 import Spinner from './components/Spinner.vue';
@@ -95,6 +96,7 @@ export {
     RadioButton,
     SaveIndicator,
     SectionItem,
+    SettingsItem,
     SideBar,
     SplitLayout,
     Spinner,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudron/pankow",
   "private": false,
-  "version": "4.4.4",
+  "version": "4.4.6",
   "description": "Vue 3 UI component library for Cloudron apps",
   "main": "index.js",
   "types": "types/index.d.ts",
@@ -48,13 +48,13 @@
   },
   "devDependencies": {
     "@highlightjs/vue-plugin": "^2.1.0",
-    "@unhead/vue": "^3.2.3",
+    "@unhead/vue": "^3.3.1",
     "@vitejs/plugin-vue": "^6.0.8",
     "highlight.js": "^11.11.1",
     "typescript": "^7.0.2",
-    "vite": "^8.1.5",
+    "vite": "^8.2.1",
     "vite-ssg": "^28.3.0",
-    "vue": "^3.5.40",
+    "vue": "^3.5.41",
     "vue-router": "^5.2.0"
   },
   "allowScripts": {

package/types/fetcher.d.ts

@@ -21,59 +21,104 @@ export type FetcherGlobalOptions = {
 };
 /**
  * Sends a HEAD request.
+ *
+ * @example
+ * // legacy style (positional query)
+ * await fetcher.head('/api/items', { sort: 'name' }, { signal: abortController.signal });
+ *
+ * @example
+ * // new style (named query in options object)
+ * await fetcher.head('/api/items', { query: { sort: 'name' }, signal: abortController.signal });
+ *
  * @param {string} uri
- * @param {Object} [query={}] - Query parameters serialized as URL query string
- * @param {RequestInit} [options={}] - Merged into `fetch()`; use `{ signal }` to abort
+ * @param {Object} [queryOrOpts={}] - Query parameters OR options object with optional `query` key
+ * @param {RequestInit} [moreOpts={}] - Merged into `fetch()`; use `{ signal }` to abort
  * @returns {Promise<{ status: number, body: * }>}
  */
-declare function head(uri: string, query?: Object, options?: RequestInit): Promise<{
+declare function head(uri: string, queryOrOpts?: Object, moreOpts?: RequestInit): Promise<{
     status: number;
     body: any;
 }>;
 /**
  * Sends a GET request.
+ *
+ * @example
+ * // legacy style (positional query)
+ * await fetcher.get('/api/items', { page: 1 }, { signal: abortController.signal });
+ *
+ * @example
+ * // new style (named query in options object)
+ * await fetcher.get('/api/items', { query: { page: 1 }, signal: abortController.signal });
+ *
  * @param {string} uri
- * @param {Object} [query={}] - Query parameters serialized as URL query string
- * @param {RequestInit} [options={}] - Merged into `fetch()`; use `{ signal }` to abort
+ * @param {Object} [queryOrOpts={}] - Query parameters OR options object with optional `query` key
+ * @param {RequestInit} [moreOpts={}] - Merged into `fetch()`; use `{ signal }` to abort
  * @returns {Promise<{ status: number, body: * }>}
  */
-declare function get(uri: string, query?: Object, options?: RequestInit): Promise<{
+declare function get(uri: string, queryOrOpts?: Object, moreOpts?: RequestInit): Promise<{
     status: number;
     body: any;
 }>;
 /**
  * Sends a POST request with a JSON or FormData body.
+ *
+ * @example
+ * // legacy style (positional query)
+ * await fetcher.post('/api/items', { name: 'Foo' }, { dryRun: true }, { signal: abortController.signal });
+ *
+ * @example
+ * // new style (named query in options object)
+ * await fetcher.post('/api/items', { name: 'Foo' }, { query: { dryRun: true }, signal: abortController.signal });
+ *
  * @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
+ * @param {Object} [queryOrOpts={}] - Query parameters OR options object with optional `query` key
+ * @param {RequestInit} [moreOpts={}] - 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<{
+declare function post(uri: string, body: Object | FormData, queryOrOpts?: Object, moreOpts?: RequestInit): Promise<{
     status: number;
     body: any;
 }>;
 /**
  * Sends a PUT request with a JSON or FormData body.
+ *
+ * @example
+ * // legacy style (positional query)
+ * await fetcher.put('/api/items/42', { name: 'Foo' }, { dryRun: true }, { signal: abortController.signal });
+ *
+ * @example
+ * // new style (named query in options object)
+ * await fetcher.put('/api/items/42', { name: 'Foo' }, { query: { dryRun: true }, signal: abortController.signal });
+ *
  * @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
+ * @param {Object} [queryOrOpts={}] - Query parameters OR options object with optional `query` key
+ * @param {RequestInit} [moreOpts={}] - 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<{
+declare function put(uri: string, body: Object | FormData, queryOrOpts?: Object, moreOpts?: RequestInit): Promise<{
     status: number;
     body: any;
 }>;
 /**
  * Sends a DELETE request with an optional body.
+ *
+ * @example
+ * // legacy style — no body, with query and options
+ * await fetcher.del('/api/items/42', null, { force: true }, { signal: abortController.signal });
+ *
+ * @example
+ * // new style — named query in options object, no body
+ * await fetcher.del('/api/items/42', null, { query: { force: true }, signal: abortController.signal });
+ *
  * @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
+ * @param {Object|FormData|null} body - Request body; objects are JSON-stringified. Pass `null` for no body.
+ * @param {Object} [queryOrOpts={}] - Query parameters OR options object with optional `query` key
+ * @param {RequestInit} [moreOpts={}] - 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<{
+declare function del(uri: string, body: Object | FormData | null, queryOrOpts?: Object, moreOpts?: RequestInit): Promise<{
     status: number;
     body: any;
 }>;

package/types/index.d.ts

@@ -35,6 +35,7 @@ import ProgressBar from './components/ProgressBar.vue';
 import RadioButton from './components/RadioButton.vue';
 import SaveIndicator from './components/SaveIndicator.vue';
 import SectionItem from './components/SectionItem.vue';
+import SettingsItem from './components/SettingsItem.vue';
 import SideBar from './components/SideBar.vue';
 import SplitLayout from './components/SplitLayout.vue';
 import Spinner from './components/Spinner.vue';
@@ -54,7 +55,7 @@ import utils from './utils.js';
 import tooltip from './tooltip.js';
 import fallbackImage from './fallbackImage.js';
 import textOverflow from './text-overflow.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, SaveIndicator, SectionItem, SideBar, SplitLayout, Spinner, Switch, TableView, TableViewActionBar, TabView, TagInput, TextInput, TextInputRaw, TopBar, TreeView, fetcher, gestures, tooltip, fallbackImage, textOverflow, utils, };
+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, SaveIndicator, SectionItem, SettingsItem, SideBar, SplitLayout, Spinner, Switch, TableView, TableViewActionBar, TabView, TagInput, TextInput, TextInputRaw, TopBar, TreeView, fetcher, gestures, tooltip, fallbackImage, textOverflow, utils, };
 export { CheckBox as Checkbox };
 export { RadioButton as Radiobutton };
 export { BreadCrumb as Breadcrumb };