@cloudron/pankow 4.1.15 → 4.2.0

package/components/Dialog.vue

@@ -62,13 +62,16 @@ const mergedStyle = computed(() => {
 const visible = ref(false);
 const dialog = useTemplateRef('dialog');
 const dialogBody = useTemplateRef('dialogBody');
+const confirmButton = useTemplateRef('confirmButton');
 
 async function open() {
   visible.value = true;
 
-  // try to focus some form elements else just the dialog
+  // try to focus some form elements, else confirm button, else just the dialog
   await nextTick();
-  const focusElement = dialogBody.value.querySelector('input:not([disabled]):not([readonly]):not([style*="display:none"]):not([style*="display: none"])') || dialog.value;
+  const focusElement = dialogBody.value.querySelector('input:not([disabled]):not([readonly]):not([style*="display:none"]):not([style*="display: none"])')
+    || confirmButton.value?.$el
+    || dialog.value;
   focusElement.focus();
 }
 
@@ -125,7 +128,7 @@ defineExpose({ open, close });
             <Button :[alternateStyle]="!!alternateStyle" @click="onAlternateAction" v-show="alternateLabel" :loading="alternateBusy" :disabled="alternateBusy || !alternateActive">{{ alternateLabel }}</Button>
             <div style="flex-grow: 1;"></div>
             <Button :[rejectStyle]="!!rejectStyle" @click="onReject" v-show="rejectLabel" :disabled="!rejectActive">{{ rejectLabel }}</Button>
-            <Button :[confirmStyle]="!!confirmStyle" @click="onConfirm" v-show="confirmLabel" :loading="confirmBusy" :disabled="confirmBusy || !confirmActive">{{ confirmLabel }}</Button>
+            <Button ref="confirmButton" :[confirmStyle]="!!confirmStyle" @click="onConfirm" v-show="confirmLabel" :loading="confirmBusy" :disabled="confirmBusy || !confirmActive">{{ confirmLabel }}</Button>
           </div>
           <Icon v-if="showX" class="pankow-dialog-x-close" icon="fa-solid fa-xmark" style="cursor: pointer;" @click="onReject"/>
         </div>

package/components/InputGroup.vue

@@ -12,6 +12,7 @@
 .pankow-input-group {
   display: flex;
   flex-direction: row;
+  min-width: 0;
 }
 
 .pankow-input-group > * {

package/components/MultiSelect.vue

@@ -37,6 +37,10 @@ const props = defineProps({
     type: Number,
     default: Infinity,
   },
+  showDropdown: {
+    type: Boolean,
+    default: true
+  },
 });
 
 const emits = defineEmits(['select', 'close']);
@@ -167,7 +171,7 @@ onMounted(() => {
 
     <Menu ref="menu" :model="menuModel" :close-on-activation="false" @close="onClose" :search-threshold="searchThreshold"></Menu>
     {{ buttonLabel }}
-    <Icon icon="fa-solid fa-chevron-down" class="pankow-button-icon-right-with-text" />
+    <Icon v-show="showDropdown" icon="fa-solid fa-chevron-down" class="pankow-button-icon-right-with-text" />
   </div>
 </template>
 

package/components/SingleSelect.vue

@@ -31,6 +31,10 @@ const props = defineProps({
     type: Number,
     default: Infinity,
   },
+  showDropdown: {
+    type: Boolean,
+    default: true
+  },
 });
 
 const emits = defineEmits(['select', 'close']);
@@ -181,10 +185,10 @@ watchEffect(handleDefaultSelect);
 
     <Menu ref="menu" :model="menuModel" :search-threshold="searchThreshold" :close-on-activation="true" @close="onClose"/>
     <span class="pankow-singleselect-label">
-      <Icon v-if="selected ? selected.icon : false" :icon="selected.icon" style="margin-right: 6px" />
-      {{ selected ? selected[optionLabel] : placeholder }}
+      <Icon v-if="selected ? selected.icon : false" :icon="selected.icon" class="pankow-singleselect-label-icon" />
+      <span class="pankow-singleselect-label-text">{{ selected ? selected[optionLabel] : placeholder }}</span>
     </span>
-    <Icon icon="fa-solid fa-chevron-down" class="pankow-button-icon-right-with-text" />
+    <Icon v-show="showDropdown" icon="fa-solid fa-chevron-down" class="pankow-button-icon-right-with-text" />
   </div>
 </template>
 
@@ -208,8 +212,8 @@ watchEffect(handleDefaultSelect);
   text-decoration: none;
   cursor: pointer;
   transition: background-color 250ms;
-  min-width: 100px;
-  white-space: nowrap;
+  min-width: 0;
+  max-width: 100%;
   overflow: hidden;
 }
 
@@ -235,8 +239,29 @@ watchEffect(handleDefaultSelect);
 }
 
 .pankow-singleselect-label {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+  flex: 1 1 auto;
+  overflow: hidden;
+  text-align: start;
+}
+
+.pankow-singleselect-label-icon {
+  margin-right: 6px;
+  flex-shrink: 0;
+}
+
+.pankow-singleselect-label-text {
+  min-width: 0;
+  flex: 1 1 auto;
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.pankow-singleselect > .pankow-button-icon-right-with-text {
+  flex-shrink: 0;
 }
 
 </style>

package/components/TableView.vue

@@ -174,7 +174,6 @@ onMounted(() => {
   font-size: 14px;
   padding: 5px;
   user-select: none;
-  border-bottom: 1px solid var(--pankow-color-light-dark);
   white-space: nowrap;
   font-weight: var(--pankow-font-weight-bold);
 }

package/fetcher.js

@@ -5,6 +5,18 @@ const globalOptions = {
     errorHook: null,
 };
 
+/**
+ * Low-level HTTP helper. `options` is merged into the native `fetch()` init object
+ * (after {@link globalOptions}), so you may pass e.g. `{ signal: abortController.signal }`
+ * to cancel the request.
+ *
+ * @param {string} uri
+ * @param {string} method
+ * @param {Object} headers
+ * @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
+ */
 async function request(uri, method, headers, query, body, options) {
     let response, responseBody;
 
@@ -52,22 +64,27 @@ 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. */
 async function head(uri, query = {}, options = {}) {
     return await request(uri, 'HEAD', {}, query, null, options);
 }
 
+/** @param {RequestInit} [options] Merged into `fetch()`; use `{ signal }` to abort. */
 async function get(uri, query = {}, options = {}) {
     return await request(uri, 'GET', {}, query, null, options);
 }
 
+/** @param {RequestInit} [options] Merged into `fetch()`; use `{ signal }` to abort. */
 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. */
 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. */
 async function del(uri, body, query = {}, options = {}) {
     return await request(uri, 'DELETE', {}, query, body, options);
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudron/pankow",
   "private": false,
-  "version": "4.1.15",
+  "version": "4.2.0",
   "description": "",
   "main": "index.js",
   "types": "types/index.d.ts",
@@ -30,11 +30,11 @@
   },
   "devDependencies": {
     "@highlightjs/vue-plugin": "^2.1.0",
-    "@vitejs/plugin-vue": "^6.0.6",
+    "@vitejs/plugin-vue": "^6.0.7",
     "highlight.js": "^11.11.1",
     "typescript": "^6.0.3",
-    "vite": "^8.0.10",
-    "vue": "^3.5.33",
-    "vue-router": "^5.0.6"
+    "vite": "^8.0.14",
+    "vue": "^3.5.35",
+    "vue-router": "^5.0.7"
   }
 }

package/types/fetcher.d.ts

@@ -13,23 +13,28 @@ declare namespace globalOptions {
     let redirect: string;
     let errorHook: null;
 }
-declare function head(uri: any, query?: {}, options?: {}): Promise<{
+/** @param {RequestInit} [options] Merged into `fetch()`; use `{ signal }` to abort. */
+declare function head(uri: any, query?: {}, options?: RequestInit): Promise<{
     status: number;
     body: any;
 }>;
-declare function get(uri: any, query?: {}, options?: {}): Promise<{
+/** @param {RequestInit} [options] Merged into `fetch()`; use `{ signal }` to abort. */
+declare function get(uri: any, query?: {}, options?: RequestInit): Promise<{
     status: number;
     body: any;
 }>;
-declare function post(uri: any, body: any, query?: {}, options?: {}): Promise<{
+/** @param {RequestInit} [options] Merged into `fetch()`; use `{ signal }` to abort. */
+declare function post(uri: any, body: any, query?: {}, options?: RequestInit): Promise<{
     status: number;
     body: any;
 }>;
-declare function put(uri: any, body: any, query?: {}, options?: {}): Promise<{
+/** @param {RequestInit} [options] Merged into `fetch()`; use `{ signal }` to abort. */
+declare function put(uri: any, body: any, query?: {}, options?: RequestInit): Promise<{
     status: number;
     body: any;
 }>;
-declare function del(uri: any, body: any, query?: {}, options?: {}): Promise<{
+/** @param {RequestInit} [options] Merged into `fetch()`; use `{ signal }` to abort. */
+declare function del(uri: any, body: any, query?: {}, options?: RequestInit): Promise<{
     status: number;
     body: any;
 }>;