@peng_kai/kit 0.2.17 → 0.2.19

package/admin/components/settings/src/Settings.vue

@@ -249,8 +249,7 @@ function resetSetting() {
       v-bind="settingForm.props"
       class="ant-cover__col2-form"
       layout="vertical"
-      :disabled="settingMutator.isPending.value"
-      :readonly="props.readonly"
+      :disabled="settingMutator.isPending.value || props.readonly"
     >
       <template v-for="item of configList" :key="item.key">
         <FormItem v-bind="settingForm.itemProps[item.key]" :label="item.label" :extra="item.summary">

package/antd/components/InputNumberRange.vue

@@ -1,13 +1,11 @@
 <script lang="ts">
-import { computed, nextTick, watch } from 'vue';
+import { computed, defineModel, watch } from 'vue';
 import { InputNumber as AInputNumber, Form } from 'ant-design-vue';
-import { isNil } from 'lodash-es';
 </script>
 
 <script setup lang="ts">
 const props = withDefaults(
   defineProps<{
-    value: [number | undefined, number | undefined]
     placeholder?: [string, string]
     min?: number
     max?: number
@@ -17,41 +15,38 @@ const props = withDefaults(
     max: Number.POSITIVE_INFINITY,
   },
 );
-const emits = defineEmits<{
-  (e: 'update:value', value: typeof props.value): void
-}>();
+const rangeValue = defineModel<[number | undefined, number | undefined]>('value', { default: [] });
 
 const formItemContext = Form.useInjectFormItemContext();
 const minValue = computed({
-  get: () => props.value[0],
-  set: v => emits('update:value', [v, props.value[1]]),
+  get: () => rangeValue.value[0],
+  set: v => rangeValue.value = [v, rangeValue.value[1]],
 });
 const maxValue = computed({
-  get: () => props.value[1],
-  set: v => emits('update:value', [props.value[0], v]),
+  get: () => rangeValue.value[1],
+  set: v => rangeValue.value = [rangeValue.value[0], v],
 });
 
 watch([minValue, maxValue], () => formItemContext.onFieldChange());
 
 function onBlur() {
-  const min = props.value[0];
-  const max = props.value[1];
+  const [min, max] = rangeValue.value;
 
-  if (!isNil(min) && !isNil(max))
-    emits('update:value', [min, max].sort() as [number, number]);
+  if (typeof min === 'number' && typeof max === 'number')
+    rangeValue.value = min > max ? [max, min] : [min, max];
 }
 </script>
 
 <template>
   <div class="flex items-center">
     <AInputNumber
-      v-model:value="minValue" class="w-full" :min="props.min"
+      v-model:value="rangeValue[0]" class="w-full" :min="props.min"
       :max="props.max" :placeholder="props.placeholder?.[0]"
       @blur="onBlur"
     />
     <span>&nbsp;-&nbsp;</span>
     <AInputNumber
-      v-model:value="maxValue" class="w-full" :min="props.min"
+      v-model:value="rangeValue[1]" class="w-full" :min="props.min"
       :max="props.max" :placeholder="props.placeholder?.[1]"
       @blur="onBlur"
     />

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@peng_kai/kit",
   "type": "module",
-  "version": "0.2.17",
+  "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>