fix: Replace pointer-events: none with logic

Author: distantnative

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

@@ -57,7 +57,11 @@
 			</k-draggable>
 
 			<!-- No blocks -->
-			<k-empty class="k-blocks-empty" icon="box" @click="choose(blocks.length)">
+			<k-empty
+				class="k-blocks-empty"
+				icon="box"
+				v-on="!disabled ? { click: () => choose(blocks.length) } : {}"
+			>
 				{{ empty ?? $t("field.blocks.empty") }}
 			</k-empty>
 		</template>

panel/src/components/Forms/Blocks/Types/Heading.vue

@@ -14,9 +14,8 @@
 			@input="update({ text: $event })"
 		/>
 		<k-input
-			v-if="levels.length > 1"
+			v-if="levels.length > 1 && !disabled"
 			ref="level"
-			:disabled="disabled"
 			:empty="false"
 			:options="levels"
 			:value="content.level"

panel/src/components/Forms/Field.vue

@@ -78,12 +78,6 @@ export default {
 .k-field[data-disabled="true"] {
 	cursor: not-allowed;
 }
-.k-field[data-disabled="true"] * {
-	pointer-events: none;
-}
-.k-field[data-disabled="true"] .k-text[data-theme="help"] * {
-	pointer-events: initial;
-}
 .k-field-header {
 	display: flex;
 	justify-content: space-between;

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

@@ -48,7 +48,7 @@
 				<span v-html="currentOption.text" />
 			</template>
 
-			<template v-if="mode === 'picker'" #icon>
+			<template v-if="mode === 'picker' && !disabled" #icon>
 				<k-button
 					:icon="icon"
 					class="k-input-icon-button"

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

@@ -14,9 +14,8 @@
 				@input="onDateInput"
 				@submit="$emit('submit')"
 			>
-				<template v-if="calendar" #icon>
+				<template v-if="calendar && !disabled" #icon>
 					<k-button
-						:disabled="disabled"
 						:icon="icon"
 						:title="$t('date.select')"
 						class="k-input-icon-button"
@@ -47,9 +46,8 @@
 				@input="onTimeInput"
 				@submit="$emit('submit')"
 			>
-				<template v-if="times" #icon>
+				<template v-if="times && !disabled" #icon>
 					<k-button
-						:disabled="disabled"
 						:icon="time.icon ?? 'clock'"
 						:title="$t('time.select')"
 						class="k-input-icon-button"

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

@@ -13,7 +13,7 @@
 		>
 			<template #icon>
 				<k-button
-					v-if="link"
+					v-if="link && mailto"
 					:icon="icon"
 					:link="mailto"
 					:title="$t('open')"

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

@@ -35,7 +35,11 @@
 			:value="JSON.stringify(entries)"
 		>
 			<!-- Empty State -->
-			<k-empty v-if="entries.length === 0" icon="list-bullet" @click="add()">
+			<k-empty
+				v-if="entries.length === 0"
+				icon="list-bullet"
+				v-on="!disabled ? { click: add } : {}"
+			>
 				{{ empty ?? $t("field.entries.empty") }}
 			</k-empty>
 

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

@@ -23,7 +23,7 @@
 			>
 				<k-collection
 					v-bind="collection"
-					@empty="open"
+					v-on="!disabled ? { empty: open } : {}"
 					@sort="onInput"
 					@sort-change="$emit('change', $event)"
 				>
@@ -168,9 +168,3 @@ export default {
 	}
 };
 </script>
-
-<style>
-.k-models-field[data-disabled="true"] .k-item * {
-	pointer-events: all !important;
-}
-</style>

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

@@ -46,13 +46,13 @@
 					</template>
 				</tbody>
 			</table>
-			<k-empty v-else icon="box" @click="add">
+
+			<k-empty v-else icon="box" v-on="!disabled ? { click: add } : {}">
 				{{ empty ?? $t("field.object.empty") }}
 			</k-empty>
 		</template>
-		<template v-else>
-			<k-empty icon="box">{{ $t("fields.empty") }}</k-empty>
-		</template>
+
+		<k-empty v-else icon="box">{{ $t("fields.empty") }}</k-empty>
 
 		<!-- Validation -->
 		<input

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

@@ -14,9 +14,13 @@
 				variant="filled"
 			/>
 			<k-button-group v-else>
-				<template v-if="canSelect">
-					<k-button v-bind="batchEditingToggle" size="xs" variant="filled" />
-				</template>
+				<k-button
+					v-if="canSelect"
+					v-bind="batchEditingToggle"
+					size="xs"
+					variant="filled"
+				/>
+
 				<k-button-group layout="collapsed">
 					<k-button
 						:autofocus="autofocus"
@@ -62,7 +66,11 @@
 		>
 			<template v-if="hasFields">
 				<!-- Empty State -->
-				<k-empty v-if="items.length === 0" icon="list-bullet" @click="add()">
+				<k-empty
+					v-if="items.length === 0"
+					icon="list-bullet"
+					v-on="!disabled ? { click: add } : {}"
+				>
 					{{ empty ?? $t("field.structure.empty") }}
 				</k-empty>
 
@@ -80,6 +88,7 @@
 						:selecting="isSelecting"
 						:selected="selected"
 						:sortable="isSortable"
+						class="k-structure-field-table"
 						@cell="open($event.row, $event.columnIndex)"
 						@input="onTableInput"
 						@option="option"
@@ -620,11 +629,8 @@ export default {
 	margin-top: var(--spacing-3);
 }
 
-/* Allow interaction with disabled structure field to open the drawer */
-.k-structure-field[data-disabled="true"] {
+/* Restore cursor for disabled structure field content */
+.k-structure-field-table[aria-disabled="true"] {
 	cursor: initial;
 }
-.k-structure-field[data-disabled="true"] * {
-	pointer-events: initial;
-}
 </style>