Merge branch 'v4/develop' into v4/enhancement/js-upload-queue

README.md

@@ -21,7 +21,7 @@ Kirby is not free software. However, you can try Kirby and the Starterkit on you
 ### Contribute
 
 **Found a bug?**  
-Please post all bug reports in our [issue tracker](https://github.com/getkirby/kirby/issues).
+Please post all bugs as individual reports in our [issue tracker](https://github.com/getkirby/kirby/issues).
 
 **Suggest a feature**  
 If you have ideas for a feature or enhancement for Kirby, please use our [feedback platform](https://feedback.getkirby.com).

config/fields/structure.php

@@ -108,55 +108,48 @@
 			return $this->form()->fields()->toArray();
 		},
 		'columns' => function () {
-			$columns = [];
-			$mobile  = 0;
-
-			if (empty($this->columns) === true) {
-				foreach ($this->fields as $field) {
-					// Skip hidden and unsaveable fields
-					// They should never be included as column
-					if (
-						$field['type'] === 'hidden' ||
-						$field['hidden'] === true ||
-						$field['saveable'] === false
-					) {
-						continue;
-					}
+			$columns   = [];
+			$blueprint = $this->columns;
+
+			// if no custom columns have been defined,
+			// gather all fields as columns
+			if (empty($blueprint) === true) {
+				// skip hidden fields
+				$fields    = array_filter(
+					$this->fields,
+					fn ($field) =>
+						$field['type'] !== 'hidden' && $field['hidden'] !== true
+				);
+				$fields    = array_column($fields, 'name');
+				$blueprint = array_fill_keys($fields, true);
+			}
 
-					$columns[$field['name']] = [
-						'type'  => $field['type'],
-						'label' => $field['label'] ?? $field['name']
-					];
-				}
-			} else {
-				foreach ($this->columns as $columnName => $columnProps) {
-					if (is_array($columnProps) === false) {
-						$columnProps = [];
-					}
+			foreach ($blueprint as $name => $column) {
+				$field = $this->fields[$name] ?? null;
 
-					$field = $this->fields[$columnName] ?? null;
+				// Skip empty and unsaveable fields
+				// They should never be included as column
+				if (
+					empty($field) === true ||
+					$field['saveable'] === false
+				) {
+					continue;
+				}
 
-					if (
-						empty($field) === true ||
-						$field['saveable'] === false
-					) {
-						continue;
-					}
+				if (is_array($column) === false) {
+					$column = [];
+				}
 
-					if (($columnProps['mobile'] ?? false) === true) {
-						$mobile++;
-					}
+				$column['type']  ??= $field['type'];
+				$column['label'] ??= $field['label'] ?? $name;
+				$column['label']   = I18n::translate($column['label'], $column['label']);
 
-					$columns[$columnName] = array_merge([
-						'type'  => $field['type'],
-						'label' => $field['label'] ?? $field['name']
-					], $columnProps);
-				}
+				$columns[$name] = $column;
 			}
 
 			// make the first column visible on mobile
 			// if no other mobile columns are defined
-			if ($mobile === 0) {
+			if (in_array(true, array_column($columns, 'mobile')) === false) {
 				$columns[array_key_first($columns)]['mobile'] = true;
 			}
 

panel/src/components/Dialogs/SearchDialog.vue

@@ -166,7 +166,10 @@ export default {
 		select(index) {
 			this.selected = index;
 			const items = this.$refs.items?.$el.querySelectorAll(".k-item") ?? [];
-			[...items].forEach((item) => delete item.dataset.selected);
+
+			for (const item of items) {
+				delete item.dataset.selected;
+			}
 
 			if (index >= 0) {
 				items[index].dataset.selected = true;
@@ -180,9 +183,11 @@ export default {
 .k-search-dialog {
 	--dialog-padding: 0;
 	--dialog-rounded: var(--rounded);
-	align-self: start;
 	overflow: visible;
 }
+.k-overlay[open][data-type="dialog"] > .k-portal > .k-search-dialog {
+	margin-top: 0;
+}
 
 .k-search-dialog-input {
 	--input-height: var(--height-lg);

panel/src/components/Forms/Autosize.js

@@ -25,7 +25,9 @@ export default class Autosize extends HTMLElement {
 
 		// resize all textareas when the container size changes
 		this.resizer = new ResizeObserver(() => {
-			this.textareas.forEach((textarea) => textarea.autosize());
+			for (const textarea of this.textareas) {
+				textarea.autosize();
+			}
 		});
 
 		this.resizer.observe(this);

panel/src/components/Forms/Blocks/Block.vue

@@ -290,6 +290,7 @@ export default {
 				on: {
 					submit: () => {
 						this.$panel.dialog.close();
+						this.close();
 						this.$emit("remove", this.id);
 					}
 				}
@@ -321,7 +322,6 @@ export default {
 }
 
 .k-block-container[data-selected="true"] {
-	transform: translate(0);
 	z-index: 2;
 	outline: var(--outline);
 	border-bottom-color: transparent;

panel/src/components/Forms/Blocks/BlockSelector.vue

@@ -86,7 +86,7 @@ export default {
 	},
 	computed: {
 		groups() {
-			let groups = {};
+			const groups = {};
 			let index = 0;
 
 			const fieldsetGroups = this.fieldsetGroups ?? {
@@ -96,7 +96,7 @@ export default {
 				}
 			};
 
-			Object.keys(fieldsetGroups).forEach((key) => {
+			for (const key in fieldsetGroups) {
 				let group = fieldsetGroups[key];
 
 				group.open = group.open === false ? false : true;
@@ -116,7 +116,7 @@ export default {
 				}
 
 				groups[key] = group;
-			});
+			}
 
 			return groups;
 		},

panel/src/components/Forms/Blocks/BlockType.vue

@@ -12,11 +12,11 @@ export default {
 		field(name, fallback = null) {
 			let field = null;
 
-			Object.values(this.fieldset.tabs).forEach((tab) => {
+			for (const tab of Object.values(this.fieldset.tabs)) {
 				if (tab.fields[name]) {
 					field = tab.fields[name];
 				}
-			});
+			}
 
 			return field ?? fallback;
 		},

panel/src/components/Forms/Field/BlocksField.vue

@@ -3,6 +3,7 @@
 		<template #options>
 			<k-button-group layout="collapsed">
 				<k-button
+					:autofocus="autofocus"
 					:disabled="isFull"
 					:responsive="true"
 					:text="$t('add')"

panel/src/components/Forms/Field/LayoutField.vue

@@ -3,6 +3,7 @@
 		<template #options>
 			<k-button-group layout="collapsed">
 				<k-button
+					:autofocus="autofocus"
 					:text="$t('add')"
 					icon="add"
 					variant="filled"
@@ -49,6 +50,7 @@ export default {
 	mixins: [Field],
 	inheritAttrs: false,
 	props: {
+		autofocus: Boolean,
 		empty: String,
 		fieldsetGroups: Object,
 		fieldsets: Object,

panel/src/components/Forms/Field/PagesField.vue

@@ -4,6 +4,7 @@
 			<k-button-group class="k-field-options">
 				<k-button
 					v-if="more && !disabled"
+					:autofocus="autofocus"
 					:icon="btnIcon"
 					:text="btnLabel"
 					size="xs"

panel/src/components/Forms/Field/StructureField.vue

@@ -1,7 +1,17 @@
 <template>
 	<k-field v-bind="$props" class="k-structure-field" @click.native.stop>
 		<template v-if="hasFields && !disabled" #options>
-			<k-dropdown>
+			<k-button-group layout="collapsed">
+				<k-button
+					:autofocus="autofocus"
+					:disabled="!more"
+					:responsive="true"
+					:text="$t('add')"
+					icon="add"
+					variant="filled"
+					size="xs"
+					@click="add()"
+				/>
 				<k-button
 					icon="dots"
 					size="xs"
@@ -20,7 +30,7 @@
 						{{ $t("delete.all") }}
 					</k-dropdown-item>
 				</k-dropdown-content>
-			</k-dropdown>
+			</k-button-group>
 		</template>
 
 		<template v-if="hasFields">
@@ -77,6 +87,7 @@ export default {
 	mixins: [Field],
 	inheritAttrs: false,
 	props: {
+		autofocus: Boolean,
 		/**
 		 * What columns to show in the table
 		 */
@@ -134,7 +145,6 @@ export default {
 	},
 	data() {
 		return {
-			autofocus: null,
 			items: this.toItems(this.value),
 			page: 1
 		};
@@ -150,13 +160,6 @@ export default {
 				fallbackClass: "k-sortable-row-fallback"
 			};
 		},
-		/**
-		 * Config for the structure form
-		 * @returns {Object}
-		 */
-		form() {
-			return this.$helper.field.subfields(this, this.fields);
-		},
 		/**
 		 * Index of first row that is displayed
 		 * @returns {number}
@@ -345,6 +348,22 @@ export default {
 		focus() {
 			this.$refs.add?.focus?.();
 		},
+		/**
+		 * Config for the structure form
+		 * @returns {Object}
+		 */
+		form(autofocus) {
+			const fields = this.$helper.field.subfields(this, this.fields);
+
+			// set the autofocus to the matching field in the form
+			if (autofocus) {
+				for (const field in fields) {
+					fields[field].autofocus = field === autofocus;
+				}
+			}
+
+			return fields;
+		},
 		/**
 		 * Opens form for a specific row at index
 		 * with field focussed
@@ -376,7 +395,7 @@ export default {
 					prev: this.items[index - 1],
 					tabs: {
 						content: {
-							fields: this.form
+							fields: this.form(field)
 						}
 					},
 					title: this.label,

panel/src/components/Forms/Field/UsersField.vue

@@ -4,6 +4,7 @@
 			<k-button-group class="k-field-options">
 				<k-button
 					v-if="more && !disabled"
+					:autofocus="autofocus"
 					:icon="btnIcon"
 					:text="btnLabel"
 					variant="filled"

panel/src/components/Forms/FormButtons.vue

@@ -189,10 +189,10 @@ export default {
 			let content = "";
 			const changes = this.$store.getters["content/changes"]();
 
-			Object.keys(changes).forEach((key) => {
+			for (const key in changes) {
 				content += key + ": \n\n" + changes[key];
 				content += "\n\n----\n\n";
-			});
+			}
 
 			let link = document.createElement("a");
 			link.setAttribute(

panel/src/components/Forms/Input/ListInput.vue

@@ -10,9 +10,12 @@
 </template>
 
 <script>
+import { disabled } from "@/mixins/props.js";
 import ListDoc from "@/components/Forms/Writer/Nodes/ListDoc.js";
 
 export const props = {
+	mixins: [disabled],
+	inheritAttrs: false,
 	props: {
 		autofocus: Boolean,
 		keys: Object,
@@ -24,6 +27,7 @@ export const props = {
 			type: [Array, Boolean],
 			default: true
 		},
+		spellcheck: Boolean,
 		value: String
 	}
 };

panel/src/components/Forms/Input/SelectInput.vue

@@ -129,11 +129,13 @@ export default {
 		},
 		text(value) {
 			let text = null;
-			this.options.forEach((option) => {
+
+			for (const option of this.options) {
 				if (option.value == value) {
 					text = option.text;
 				}
-			});
+			}
+
 			return text;
 		}
 	},

panel/src/components/Forms/Input/TextInput.vue

@@ -123,7 +123,7 @@ export default {
 
 <style>
 :root {
-	--input-placeholder: var(--color-gray-500);
+	--input-placeholder: var(--color-gray-600);
 }
 
 .k-text-input {

panel/src/components/Forms/Layouts/Layout.vue

@@ -101,15 +101,15 @@ export default {
 		tabs() {
 			let tabs = this.settings.tabs;
 
-			Object.entries(tabs).forEach(([tabName, tab]) => {
-				Object.entries(tab.fields).forEach(([fieldName]) => {
+			for (const [tabName, tab] of Object.entries(tabs)) {
+				for (const fieldName in tab.fields) {
 					tabs[tabName].fields[fieldName].endpoints = {
 						field: this.endpoints.field + "/fields/" + fieldName,
 						section: this.endpoints.section,
 						model: this.endpoints.model
 					};
-				});
-			});
+				}
+			}
 
 			return tabs;
 		}