Apply suggestions from code review

getkirby · Jan 17, 2025 · d1d68ee · d1d68ee
1 parent 7f6a300
commit d1d68ee
Show file tree

Hide file tree

Showing 11 changed files with 23 additions and 23 deletions.
diff --git a/panel/src/components/Collection/Item.vue b/panel/src/components/Collection/Item.vue
@@ -2,6 +2,7 @@
 	<div
 		v-bind="data"
 		:class="['k-item', `k-${layout}-item`, $attrs.class]"
+		:data-has-image="hasFigure"
 		:data-layout="layout"
 		:data-theme="theme"
 		:style="$attrs.style"
@@ -210,7 +211,7 @@ export default {
 	align-items: center;
 	grid-template-columns: 1fr auto;
 }
-.k-item[data-layout="list"]:has(.k-item-image) {
+.k-item[data-layout="list"][data-has-image="true"] {
 	grid-template-columns: var(--item-height) 1fr auto;
 }
 .k-item[data-layout="list"] .k-frame {
@@ -269,7 +270,7 @@ export default {
 	grid-template-columns: 1fr;
 	grid-template-rows: 1fr var(--height-md);
 }
-.k-item[data-layout="cardlets"]:has(.k-item-image) {
+.k-item[data-layout="cardlets"][data-has-image="true"] {
 	grid-template-areas:
 		"image content"
 		"image options";

diff --git a/panel/src/components/Forms/Field/BlocksField.vue b/panel/src/components/Forms/Field/BlocksField.vue
@@ -114,9 +114,6 @@ export default {
 .k-blocks-field > footer {
 	display: flex;
 	justify-content: center;
-}
-
-.k-blocks-field > :has(+ footer) {
-	margin-bottom: var(--spacing-3);
+	margin-top: var(--spacing-3);
 }
 </style>
diff --git a/panel/src/components/Forms/Field/DateField.vue b/panel/src/components/Forms/Field/DateField.vue
@@ -5,7 +5,7 @@
 		:input="id"
 		:style="$attrs.style"
 	>
-		<div ref="body" class="k-date-field-body">
+		<div ref="body" :data-has-time="Boolean(time)" class="k-date-field-body">
 			<!-- Date input -->
 			<k-input
 				ref="dateInput"
@@ -242,7 +242,7 @@ export default {
 }
 
 @container (min-width: 20rem) {
-	.k-date-field-body:has(.k-time-input) {
+	.k-date-field-body[data-has-time="true"] {
 		grid-template-columns: 1fr minmax(6rem, 9rem);
 	}
 }

diff --git a/panel/src/components/Forms/Field/LayoutField.vue b/panel/src/components/Forms/Field/LayoutField.vue
@@ -93,8 +93,6 @@ export default {
 .k-layout-field > footer {
 	display: flex;
 	justify-content: center;
-}
-.k-layout-field > :has(+ footer) {
-	margin-bottom: var(--spacing-3);
+	margin-top: var(--spacing-3);
 }
 </style>
diff --git a/panel/src/components/Forms/Field/StructureField.vue b/panel/src/components/Forms/Field/StructureField.vue
@@ -562,8 +562,6 @@ export default {
 .k-structure-field .k-table + footer {
 	display: flex;
 	justify-content: center;
-}
-.k-structure-field .k-table:has(+ footer) {
-	margin-bottom: var(--spacing-3);
+	margin-top: var(--spacing-3);
 }
 </style>
diff --git a/panel/src/components/Lab/PlaygroundView.vue b/panel/src/components/Lab/PlaygroundView.vue
@@ -103,7 +103,7 @@ export default {
 </script>
 
 <style>
-.k-lab-playground-view:has(.k-tabs) .k-lab-playground-header {
+.k-lab-playground-view:has(> .k-tabs) .k-lab-playground-header {
 	margin-bottom: 0;
 }
 

diff --git a/panel/src/components/Navigation/Button.vue b/panel/src/components/Navigation/Button.vue
@@ -3,6 +3,8 @@
 		:is="component"
 		v-bind="attrs"
 		:class="['k-button', $attrs.class]"
+		:data-has-icon="Boolean(icon)"
+		:data-has-text="Boolean(text || $slots.default)"
 		:style="$attrs.style"
 		@click="onClick"
 	>
@@ -325,22 +327,22 @@ export default {
 }
 
 /** Icon Buttons **/
-.k-button:not(:has(.k-button-text)) {
+.k-button:not([data-has-text="true"]) {
 	--button-padding: 0;
 	aspect-ratio: 1/1;
 }
 
 /** Responsive buttons **/
 @container (max-width: 30rem) {
-	.k-button:is([data-responsive]:has(.k-button-icon)) {
+	.k-button[data-responsive="true"][data-has-icon="true"] {
 		--button-padding: 0;
 		aspect-ratio: 1/1;
 		--button-text-display: none;
 	}
-	.k-button[data-responsive="text"]:has(.k-button-text) {
+	.k-button[data-responsive="text"][data-has-text="true"] {
 		--button-icon-display: none;
 	}
-	.k-button:is([data-responsive]:has(.k-button-icon)) .k-button-arrow {
+	.k-button[data-responsive="true"][data-has-icon="true"] .k-button-arrow {
 		display: none;
 	}
 }

diff --git a/panel/src/components/Views/Files/FileView.vue b/panel/src/components/Views/Files/FileView.vue
@@ -1,5 +1,6 @@
 <template>
 	<k-panel-inside
+		:data-has-tabs="hasTabs"
 		:data-id="id"
 		:data-locked="isLocked"
 		:data-template="blueprint"
@@ -89,7 +90,7 @@ export default {
 	border-bottom: 0;
 }
 
-.k-file-view:has(.k-tabs) .k-file-preview {
+.k-file-view[data-has-tabs="true"] .k-file-preview {
 	margin-bottom: 0;
 }
 </style>
diff --git a/panel/src/components/Views/Pages/PageView.vue b/panel/src/components/Views/Pages/PageView.vue
@@ -1,5 +1,6 @@
 <template>
 	<k-panel-inside
+		:data-has-tabs="hasTabs"
 		:data-id="id"
 		:data-locked="isLocked"
 		:data-template="blueprint"
@@ -57,7 +58,7 @@ export default {
 </script>
 
 <style>
-.k-page-view:has(.k-tabs) .k-page-view-header {
+.k-page-view[data-has-tabs="true"] .k-page-view-header {
 	margin-bottom: 0;
 }
 </style>
diff --git a/panel/src/components/Views/Pages/SiteView.vue b/panel/src/components/Views/Pages/SiteView.vue
@@ -1,5 +1,6 @@
 <template>
 	<k-panel-inside
+		:data-has-tabs="hasTabs"
 		:data-id="id"
 		:data-locked="isLocked"
 		:data-template="blueprint"
@@ -53,7 +54,7 @@ export default {
 </script>
 
 <style>
-.k-site-view:has(.k-tabs) .k-site-view-header {
+.k-site-view[data-has-tabs="true"] .k-site-view-header {
 	margin-bottom: 0;
 }
 </style>
diff --git a/panel/src/components/Views/Users/UserView.vue b/panel/src/components/Views/Users/UserView.vue
@@ -1,5 +1,6 @@
 <template>
 	<k-panel-inside
+		:data-has-tabs="hasTabs"
 		:data-id="id"
 		:data-locked="isLocked"
 		:data-template="blueprint"
@@ -97,7 +98,7 @@ export default {
 .k-user-view .k-user-profile {
 	margin-bottom: var(--spacing-12);
 }
-.k-user-view:has(.k-tabs) .k-user-profile {
+.k-user-view[data-has-tabs="true"] .k-user-profile {
 	margin-bottom: 0;
 }
 </style>