Fields block: wrap tabs in header

getkirby · Jan 25, 2025 · 803c8a2 · 803c8a2
1 parent 8f83464
commit 803c8a2
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 39 deletions.
diff --git a/panel/src/components/Drawers/Elements/Tabs.vue b/panel/src/components/Drawers/Elements/Tabs.vue
@@ -1,14 +1,10 @@
 <template>
-	<nav v-if="hasTabs" class="k-drawer-tabs">
-		<k-button
-			v-for="tabButton in tabs"
-			:key="tabButton.name"
-			:current="tab === tabButton.name"
-			:text="tabButton.label"
-			class="k-drawer-tab"
-			@click="$emit('open', tabButton.name)"
-		/>
-	</nav>
+	<k-tabs
+		v-if="hasTabs"
+		class="k-drawer-tabs"
+		:tab="tab"
+		:tabs="tabsWithClickHandler"
+	/>
 </template>
 
 <script>
@@ -34,32 +30,41 @@ export default {
 	computed: {
 		hasTabs() {
 			return this.$helper.object.length(this.tabs) > 1;
+		},
+		tabsWithClickHandler() {
+			let tabs = this.tabs;
+
+			if (Array.isArray(tabs) === false) {
+				tabs = Object.values(tabs);
+			}
+
+			return tabs.map((tab) => ({
+				...tab,
+				click: () => this.$emit("open", tab.name)
+			}));
 		}
 	}
 };
 </script>
 
 <style>
-.k-drawer-tabs {
-	display: flex;
-	align-items: center;
-	line-height: 1;
+.k-drawer-tabs.k-tabs {
+	flex-grow: 1;
+	gap: 0;
+	margin: 0;
+	justify-content: end;
 }
-.k-drawer-tab.k-button {
+.k-drawer-tabs .k-tabs-button {
 	--button-height: calc(var(--drawer-header-height) - var(--spacing-1));
 	--button-padding: var(--spacing-3);
 	display: flex;
 	align-items: center;
 	font-size: var(--text-xs);
-	overflow-x: visible;
-}
-.k-drawer-tab.k-button[aria-current="true"]::after {
-	position: absolute;
+	margin-block: 0;
 	bottom: -2px;
-	inset-inline: var(--button-padding);
-	content: "";
+}
+.k-drawer-tabs .k-tabs-button[aria-current="true"]::after {
 	background: var(--color-black);
-	height: 2px;
 	z-index: 1;
 }
 </style>
diff --git a/panel/src/components/Forms/Blocks/Elements/BlockTitle.vue b/panel/src/components/Forms/Blocks/Elements/BlockTitle.vue
@@ -70,6 +70,7 @@ export default {
 .k-block-title {
 	display: flex;
 	align-items: center;
+	flex-shrink: 0;
 	min-width: 0;
 	padding-inline-end: 0.75rem;
 	line-height: 1;

diff --git a/panel/src/components/Layout/Tabs.vue b/panel/src/components/Layout/Tabs.vue
@@ -1,21 +1,21 @@
 <template>
 	<nav v-if="tabs.length > 1" class="k-tabs">
-		<div v-for="btn in buttons" :key="btn.name" class="k-tabs-tab">
-			<k-button
-				ref="visible"
-				v-bind="btn"
-				variant="dimmed"
-				class="k-tab-button"
-			>
-				{{ btn.text }}
-			</k-button>
-		</div>
+		<k-button
+			v-for="btn in buttons"
+			:key="btn.name"
+			ref="visible"
+			v-bind="btn"
+			variant="dimmed"
+			class="k-tabs-button"
+		>
+			{{ btn.text }}
+		</k-button>
 
 		<template v-if="invisible.length">
 			<k-button
 				:current="!!invisible.find((button) => tab === button.name)"
 				:title="$t('more')"
-				class="k-tab-button k-tabs-dropdown-button"
+				class="k-tabs-button k-tabs-dropdown-button"
 				icon="dots"
 				variant="dimmed"
 				@click.stop="$refs.more.toggle()"
@@ -163,16 +163,13 @@ export default {
 	margin-inline: calc(var(--button-padding) * -1);
 }
 
-.k-tabs-tab {
+.k-tabs-button.k-button {
 	position: relative;
-}
-
-.k-tab-button.k-button {
 	margin-block: 2px;
 	overflow-x: visible;
 }
 
-.k-tab-button[aria-current="true"]::after {
+.k-tabs-button[aria-current="true"]::after {
 	position: absolute;
 	content: "";
 	height: 2px;
@@ -181,7 +178,7 @@ export default {
 	background: currentColor;
 }
 
-.k-tab-button .k-button-badge {
+.k-tabs-button .k-button-badge {
 	top: 3px;
 	inset-inline-end: calc(var(--button-padding) / 4);
 }