Structure field: improve disabled UI

Author: distantnative

panel/src/components/Drawers/Elements/Fields.vue

@@ -1,6 +1,7 @@
 <template>
 	<k-fieldset
 		v-if="hasFields"
+		:disabled="disabled"
 		:fields="fields"
 		:value="value"
 		class="k-drawer-fields"
@@ -13,6 +14,7 @@
 <script>
 export const props = {
 	props: {
+		disabled: Boolean,
 		empty: {
 			type: String,
 			default: () => window.panel.t("drawer.fields.empty")

panel/src/components/Drawers/FormDrawer.vue

@@ -13,6 +13,7 @@
 		</template>
 
 		<k-drawer-fields
+			:disabled="disabled"
 			:fields="fields"
 			:value="value"
 			@input="$emit('input', $event)"

panel/src/components/Drawers/StructureDrawer.vue

@@ -9,7 +9,7 @@
 		@submit="$emit('submit', $event)"
 		@tab="$emit('tab', $event)"
 	>
-		<template #options>
+		<template v-if="!disabled" #options>
 			<k-button
 				:disabled="!prev"
 				class="k-drawer-option"
@@ -47,6 +47,18 @@ export const props = {
  */
 export default {
 	mixins: [Drawer, FieldsProps, props],
-	emits: ["cancel", "crumb", "input", "next", "prev", "remove", "submit", "tab"]
+	emits: [
+		"cancel",
+		"crumb",
+		"input",
+		"next",
+		"prev",
+		"remove",
+		"submit",
+		"tab"
+	],
+	mounted() {
+		console.log("Disabled in drawer?", this.disabled);
+	}
 };
 </script>

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

@@ -352,7 +352,7 @@ export default {
 		navigate(item, step) {
 			const index = this.findIndex(item);
 
-			if (this.disabled === true || index === -1) {
+			if (index === -1) {
 				return;
 			}
 
@@ -369,14 +369,15 @@ export default {
 		open(item, field, replace = false) {
 			const index = this.findIndex(item);
 
-			if (this.disabled === true || index === -1) {
+			if (index === -1) {
 				return false;
 			}
 
 			this.$panel.drawer.open({
 				component: "k-structure-drawer",
 				id: this.id,
 				props: {
+					disabled: this.disabled,
 					icon: this.icon ?? "list-bullet",
 					next: this.items[index + 1],
 					prev: this.items[index - 1],
@@ -556,12 +557,20 @@ export default {
 </script>
 
 <style>
-.k-structure-field:not([data-disabled="true"]) td.k-table-column {
+.k-structure-field td.k-table-column {
 	cursor: pointer;
 }
 .k-structure-field .k-table + footer {
 	display: flex;
 	justify-content: center;
 	margin-top: var(--spacing-3);
 }
+
+/* Allow interaction with disabled structure field to open the drawer */
+.k-structure-field[data-disabled="true"] {
+	cursor: initial;
+}
+.k-structure-field[data-disabled="true"] * {
+	pointer-events: initial;
+}
 </style>