@peng_kai/kit 0.2.18 → 0.2.19

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@peng_kai/kit",
   "type": "module",
-  "version": "0.2.18",
+  "version": "0.2.19",
   "description": "",
   "author": "",
   "license": "ISC",

package/vue/components/nav-manager/NavManager.vue

@@ -1,5 +1,7 @@
 <script lang="ts">
 import { computed, reactive, ref, toValue, watch } from 'vue';
+import { useElementBounding, useMutationObserver } from '@vueuse/core';
+import { useTemplateRefs } from '../../hooks/useTemplateRefs';
 import { type IProvide as INavManagerProvide, useNavManagerRouter } from './useNavManager';
 
 function useHistory(initialValue: string[] = []) {
@@ -49,10 +51,26 @@ const emits = defineEmits<{
   (e: 'close'): void
 }>();
 
+const [refs, setRefs] = useTemplateRefs<{
+  header: HTMLDivElement
+}>();
 const viewMap = reactive<Record<string, Parameters<INavManagerProvide['addView']>[0]>>({});
 const history = useHistory([props.indexName]);
 const currentView = computed(() => viewMap[history.current]);
 const transitionName = computed(() => `view-${history.lastOperation}`);
+const { height: headerHeight } = useElementBounding(() => refs.header);
+const cssVars = computed(() => ({
+  '--header-height-neg': `-${headerHeight.value}px`,
+  '--header-height': `${headerHeight.value}px`,
+}));
+// 检查 header 中是否从外部插入了DOM（例如通过Teleport），如果有插入则将header中的所有需要隐藏的本地DOM都隐藏
+const isCoverHeader = ref(false);
+const headerNeedCoverClasses = ['nav-back-btn', 'nav-title', 'nav-close-btn'].map(cls => `.${cls}.need-cover`);
+const headerNeedCoverSelector = `:scope > :not(${headerNeedCoverClasses.join(',')})`;
+useMutationObserver(() => refs.header, () => {
+  const children = refs.header?.querySelectorAll(headerNeedCoverSelector);
+  isCoverHeader.value = !!children?.length;
+}, { childList: true });
 
 watch(currentView, (view, oldView) => {
   oldView?.hide();
@@ -71,33 +89,37 @@ useNavManagerRouter(navManager);
 </script>
 
 <template>
-  <div class="tt-nav-manager box-border flex flex-col px-3 py-5">
-    <div class="nav-header mb-3 min-h6 flex items-center">
-      <Transition name="back-btn">
-        <div
-          v-if="!history.isFirst"
-          class="nav-back-btn mr-2 size-6 flex cursor-pointer items-center justify-center"
-          @click="navManager.back()"
-        >
-          <i class="i-ri:arrow-left-s-line text-6" />
-        </div>
-      </Transition>
-
-      <div class="nav-title flex-1">
-        {{ toValue(currentView?.title) }}
+  <div class="tt-nav-manager box-border" :class="[currentView?.name]" :style="cssVars">
+    <div class="relative h-full overflow-x-hidden bg-inherit">
+      <div :ref="setRefs.header" class="nav-header min-h6 flex items-center sticky z-5 bg-inherit">
+        <slot name="header" />
+        <template v-if="!isCoverHeader || (!isCoverHeader && !$slots.header)">
+          <Transition name="back-btn">
+            <div
+              v-if="!history.isFirst"
+              class="nav-back-btn need-cover mr-2 size-6 flex cursor-pointer items-center justify-center"
+              @click="navManager.back()"
+            >
+              <i class="i-ri:arrow-left-s-line text-6" />
+            </div>
+          </Transition>
+
+          <div class="nav-title need-cover flex-1">
+            {{ toValue(currentView?.title) }}
+          </div>
+
+          <div
+            class="nav-close-btn need-cover size-6 flex cursor-pointer items-center justify-center"
+            @click="navManager.close()"
+          >
+            <i class="i-ri:close-line text-6" />
+          </div>
+        </template>
       </div>
 
-      <div
-        class="nav-close-btn size-6 flex cursor-pointer items-center justify-center"
-        @click="navManager.close()"
-      >
-        <i class="i-ri:close-line text-6" />
-      </div>
-    </div>
-
-    <div class="relative flex-1 overflow-x-hidden">
       <Transition :name="transitionName">
-        <div :key="currentView?.name" class="absolute left-0 top-0 h-full w-full overflow-x-hidden overflow-y-auto" :class="$props.viewClass">
+        <div :key="currentView?.name" class="scroll-container absolute left-0 top-0 h-full w-full overflow-y-auto overflow-x-hidden" :class="$props.viewClass">
+          <div class="h-$header-height" />
           <slot />
         </div>
       </Transition>