fix(web-admin): stick category header tools with MpBusinessHeader.
Move expand-all and add into a header actions slot so they remain visible while scrolling. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
1 parent
efe7f77a66
commit
ef71e842ee
4 files changed
+184
-26
No files matched your search
@@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<header class="mp-wv-header">
|
||||
<div class="mp-wv-header__row">
|
||||
<button
|
||||
class="mp-wv-header__back mp-wv-touch-target"
|
||||
type="button"
|
||||
:aria-label="backLabel"
|
||||
@click="emit('back')"
|
||||
>
|
||||
←
|
||||
</button>
|
||||
<h1 class="mp-wv-header__title">{{ title }}</h1>
|
||||
<div v-if="$slots.actions" class="mp-wv-header__actions">
|
||||
<slot name="actions" />
|
||||
</div>
|
||||
</div>
|
||||
<slot name="before-search" />
|
||||
<input
|
||||
v-if="searchable"
|
||||
class="mp-wv-search mp-wv-touch-target"
|
||||
type="search"
|
||||
:value="keyword"
|
||||
:aria-label="searchLabel"
|
||||
:placeholder="searchPlaceholder"
|
||||
autocomplete="off"
|
||||
@input="updateKeyword"
|
||||
@keyup.enter="emit('search')"
|
||||
/>
|
||||
<slot name="after-search" />
|
||||
</header>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
withDefaults(
|
||||
defineProps<{
|
||||
title: string
|
||||
backLabel?: string
|
||||
searchable?: boolean
|
||||
keyword?: string
|
||||
searchPlaceholder?: string
|
||||
searchLabel?: string
|
||||
}>(),
|
||||
{
|
||||
backLabel: '返回',
|
||||
searchable: false,
|
||||
keyword: '',
|
||||
searchPlaceholder: '搜索',
|
||||
searchLabel: '搜索'
|
||||
}
|
||||
)
|
||||
|
||||
const emit = defineEmits<{
|
||||
back: []
|
||||
search: []
|
||||
'update:keyword': [value: string]
|
||||
}>()
|
||||
|
||||
function updateKeyword(event: Event) {
|
||||
emit('update:keyword', (event.target as HTMLInputElement).value)
|
||||
}
|
||||
</script>
|
||||
Reference in new issue
Block a user