update RoleEdit style

2026-08-11 17:06:47 +08:00
parent 819c1623eb
commit 1bf53c9d1c
6 changed files with 351 additions and 297 deletions
@@ -0,0 +1,136 @@
+<template>
+	<t-popup v-model="visible" placement="bottom">
+		<div class="bottom-popup" :style="{height: props.height}">
+			<div v-if="hasHeader" class="header">
+				<div class="button left">
+					<slot name="leftButton">
+						<t-button v-if="leftButtonText" variant="text" size="small" @click="emitLeftButtonClick">
+							<span v-text="leftButtonText" />
+						</t-button>
+					</slot>
+				</div>
+				<div class="title">
+					<slot name="title">
+						<span v-text="title" />
+					</slot>
+				</div>
+				<div class="button right">
+					<slot name="rightButton">
+						<t-button v-if="rightButtonText" theme="primary" variant="text" size="small" @click="emitRightButtonClick">
+							<span v-text="rightButtonText" />
+						</t-button>
+					</slot>
+				</div>
+			</div>
+			<div class="body">
+				<slot />
+			</div>
+		</div>
+	</t-popup>
+</template>
+
+<script setup lang="ts">
+defineOptions({
+	name: "BottomPopup"
+});
+
+interface Props {
+	modelValue?: boolean;
+	leftButtonText?: string;
+	rightButtonText?: string;
+	height?: string | number;
+	title?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+	modelValue: false,
+	leftButtonText: "",
+	rightButtonText: "",
+	height: "50vh",
+	title: ""
+});
+
+const emit = defineEmits<{
+	"update:modelValue": [value: boolean];
+	leftButtonClick: [];
+	rightButtonClick: [];
+}>();
+
+const slots = useSlots();
+const visible = computed({
+	get: () => props.modelValue,
+	set: value => emit("update:modelValue", value)
+});
+const hasHeader = computed(() => Boolean(
+	props.title
+	|| props.leftButtonText
+	|| props.rightButtonText
+	|| slots.title
+	|| slots.leftButton
+	|| slots.rightButton
+));
+
+function emitLeftButtonClick(): void {
+	emit("leftButtonClick");
+}
+
+function emitRightButtonClick(): void {
+	emit("rightButtonClick");
+}
+
+defineSlots<{
+	default?: () => unknown;
+	title?: () => unknown;
+	leftButton?: () => unknown;
+	rightButton?: () => unknown;
+}>();
+</script>
+
+<style scoped lang="less">
+.bottom-popup {
+	display: flex;
+	padding-top: 1rem;
+	background: var(--td-bg-color-container, #fff);
+	border-radius: 1.25rem 1.25rem 0 0;
+	flex-direction: column;
+	overflow: hidden;
+
+	.header {
+		padding: 0 1rem;
+		display: grid;
+		grid-template-columns: 4rem 1fr 4rem;
+		align-items: center;
+		flex: none;
+	}
+
+	.button {
+		min-width: 0;
+		display: flex;
+
+		&.right {
+			justify-content: flex-end;
+		}
+	}
+
+	.title {
+		margin: 0;
+		overflow: hidden;
+		text-align: center;
+		white-space: nowrap;
+		text-overflow: ellipsis;
+	}
+
+	.body {
+		flex: 1;
+		min-height: 0;
+		padding: .75rem 1rem env(safe-area-inset-bottom, 0);
+		overflow: auto;
+	}
+}
+
+:global(html.theme-dark) {
+	.bottom-popup {
+		background: #0f172a;
+	}
+}
+</style>
@@ -5,9 +5,11 @@
 				<span v-text="title" />
 			</slot>
 		</h3>
-		<p v-if="description || $slots.description" class="description gray">
-			<slot name="description">
-				<span v-text="description" />
+		<p v-if="description || $slots.default || $slots.description" class="description gray">
+			<slot>
+				<slot name="description">
+					<span v-text="description" />
+				</slot>
 			</slot>
 		</p>
 	</div>
@@ -22,6 +24,7 @@ interface Props {
 defineProps<Props>();

 defineSlots<{
+	default?: () => unknown;
 	title?: () => unknown;
 	description?: () => unknown;
 }>();