@peng_kai/kit 0.2.27 → 0.2.29

package/admin/components/filter/src/FilterDrawer.vue

@@ -1,153 +1,153 @@
-<script lang="ts" setup>
-import { computed, ref } from 'vue';
-import { Button as AButton, Drawer as ADrawer, Dropdown as ADropdown } from 'ant-design-vue';
-
-defineOptions({
-  inheritAttrs: false,
-});
-
-const props = withDefaults(defineProps<{
-  loading?: boolean
-  filterQuery?: any
-  filterParams?: any
-  filterForm?: any
-}>(), {
-  loading: undefined,
-});
-const emits = defineEmits<{
-  (e: 'filter'): void
-  (e: 'reset', value: number): void
-}>();
-
-const filterVisible = ref(false);
-const loading = computed(() => {
-  const _loading1 = props.loading;
-  const _loading2: boolean = props.filterQuery?.isFetching.value;
-
-  if (_loading1 === undefined && _loading2 === undefined)
-    return false;
-
-  if (_loading1 !== undefined)
-    return _loading1;
-
-  return _loading2;
-});
-
-function filter() {
-  props.filterParams?.update?.();
-  emits('filter');
-  filterVisible.value = false;
-}
-
-function reset() {
-  props.filterForm?.$form.resetFields?.();
-  props.filterParams?.update?.();
-  emits('reset', 1);
-  filterVisible.value = false;
-}
-</script>
-
-<template>
-  <div class="p-3 bg-$antd-colorBgContainer text-14px rounded-2" v-bind="$attrs">
-    <!-- .filter-params 为空时显示 .filter-params-tips -->
-
-    <div class="m--3 p-3" @click="filterVisible = true">
-      <div class="filter-params">
-        <slot name="params" />
-      </div>
-      <div class="filter-params-tips">
-        条件筛选，点击打开
-      </div>
-    </div>
-
-    <!-- 操作区 -->
-    <div v-if="$slots.actions || $slots.moreActions" class="actions">
-      <slot name="actions" />
-
-      <ADropdown v-if="$slots.moreActions" trigger="click" destroyPopupOnHide>
-        <AButton type="link" size="small">
-          更多
-        </AButton>
-        <template #overlay>
-          <slot name="moreActions" />
-        </template>
-      </ADropdown>
-    </div>
-  </div>
-
-  <ADrawer
-    v-model:open="filterVisible" class="filter-drawer" placement="bottom"
-    height="50vh"
-  >
-    <template #extra>
-      <AButton class="mr-3 my--3" :disabled="loading" @click="reset()">
-        重置
-      </AButton>
-      <AButton class="my--3" type="primary" :loading="loading" @click="filter()">
-        筛选
-      </AButton>
-    </template>
-    <template #default>
-      <slot />
-    </template>
-  </ADrawer>
-</template>
-
-<style scoped lang="scss">
-.filter-params {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-  gap: 5px 15px;
-}
-
-// .filter-params 为空时显示 .filter-params-tips
-.filter-params-tips {
-  display: none;
-  color: theme('colors.gray.DEFAULT');
-}
-
-.filter-params:empty {
-  display: none;
-}
-
-.filter-params:empty + .filter-params-tips {
-  display: block;
-}
-
-.actions {
-  display: flex;
-  align-items: center;
-  justify-content: flex-end;
-  border-top: 1px solid var(--antd-colorBorderSecondary);
-  margin-top: 0.75rem;
-  padding-top: 0.75rem;
-}
-</style>
-
-<style lang="scss">
-.filter-drawer {
-  .ant-drawer-header {
-    padding: 16px;
-
-    .ant-drawer-close {
-      --expand: 5px;
-
-      padding: var(--expand);
-      margin: calc(var(--expand) * -1) var(--expand) calc(var(--expand) * -1) 0;
-    }
-  }
-
-  .ant-drawer-body {
-    padding: 16px;
-  }
-
-  .ant-form-item {
-    margin-bottom: 0;
-
-    .ant-form-item-label {
-      padding-bottom: 0;
-    }
-  }
-}
-</style>
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import { Button as AButton, Drawer as ADrawer, Dropdown as ADropdown } from 'ant-design-vue';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = withDefaults(defineProps<{
+  loading?: boolean
+  filterQuery?: any
+  filterParams?: any
+  filterForm?: any
+}>(), {
+  loading: undefined,
+});
+const emits = defineEmits<{
+  (e: 'filter'): void
+  (e: 'reset', value: number): void
+}>();
+
+const filterVisible = ref(false);
+const loading = computed(() => {
+  const _loading1 = props.loading;
+  const _loading2: boolean = props.filterQuery?.isFetching.value;
+
+  if (_loading1 === undefined && _loading2 === undefined)
+    return false;
+
+  if (_loading1 !== undefined)
+    return _loading1;
+
+  return _loading2;
+});
+
+function filter() {
+  props.filterParams?.update?.();
+  emits('filter');
+  filterVisible.value = false;
+}
+
+function reset() {
+  props.filterForm?.$form.resetFields?.();
+  props.filterParams?.update?.();
+  emits('reset', 1);
+  filterVisible.value = false;
+}
+</script>
+
+<template>
+  <div class="p-3 bg-$antd-colorBgContainer text-14px rounded-2" v-bind="$attrs">
+    <!-- .filter-params 为空时显示 .filter-params-tips -->
+
+    <div class="m--3 p-3" @click="filterVisible = true">
+      <div class="filter-params">
+        <slot name="params" />
+      </div>
+      <div class="filter-params-tips">
+        条件筛选，点击打开
+      </div>
+    </div>
+
+    <!-- 操作区 -->
+    <div v-if="$slots.actions || $slots.moreActions" class="actions">
+      <slot name="actions" />
+
+      <ADropdown v-if="$slots.moreActions" trigger="click" destroyPopupOnHide>
+        <AButton type="link" size="small">
+          更多
+        </AButton>
+        <template #overlay>
+          <slot name="moreActions" />
+        </template>
+      </ADropdown>
+    </div>
+  </div>
+
+  <ADrawer
+    v-model:open="filterVisible" class="filter-drawer" placement="bottom"
+    height="50vh"
+  >
+    <template #extra>
+      <AButton class="mr-3 my--3" :disabled="loading" @click="reset()">
+        重置
+      </AButton>
+      <AButton class="my--3" type="primary" :loading="loading" @click="filter()">
+        筛选
+      </AButton>
+    </template>
+    <template #default>
+      <slot />
+    </template>
+  </ADrawer>
+</template>
+
+<style scoped lang="scss">
+.filter-params {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  gap: 5px 15px;
+}
+
+// .filter-params 为空时显示 .filter-params-tips
+.filter-params-tips {
+  display: none;
+  color: theme('colors.gray.DEFAULT');
+}
+
+.filter-params:empty {
+  display: none;
+}
+
+.filter-params:empty + .filter-params-tips {
+  display: block;
+}
+
+.actions {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  border-top: 1px solid var(--antd-colorBorderSecondary);
+  margin-top: 0.75rem;
+  padding-top: 0.75rem;
+}
+</style>
+
+<style lang="scss">
+.filter-drawer {
+  .ant-drawer-header {
+    padding: 16px;
+
+    .ant-drawer-close {
+      --expand: 5px;
+
+      padding: var(--expand);
+      margin: calc(var(--expand) * -1) var(--expand) calc(var(--expand) * -1) 0;
+    }
+  }
+
+  .ant-drawer-body {
+    padding: 16px;
+  }
+
+  .ant-form-item {
+    margin-bottom: 0;
+
+    .ant-form-item-label {
+      padding-bottom: 0;
+    }
+  }
+}
+</style>

package/admin/components/permission-tree/PermissionTree.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { Checkbox } from 'ant-design-vue';
+import { Checkbox, FormItemRest } from 'ant-design-vue';
 import { computed, triggerRef, watch } from 'vue';
 
 interface TTree {
@@ -9,19 +9,6 @@ interface TTree {
   children?: TTree[]
 }
 
-export function treeToIds(tree: TTree[]) {
-  const ids = [] as number[];
-
-  const isCheckedFn = (node: TTree) => {
-    node.checked && ids.push(node.id);
-    node.children?.length && node.children.forEach(isCheckedFn);
-  };
-
-  tree.forEach(isCheckedFn);
-
-  return ids;
-}
-
 function treeToTable(tree: TTree[]) {
   interface TD {
     id: number
@@ -79,47 +66,36 @@ function treeToStates(tree: TTree[]) {
 
   tree.forEach(assId);
 
-  // for (const id in ids) {
-  //   const state = states[id];
-  //   state.indet = isIndet(state.children.map(cid => states[cid].checked));
-  //   state.children.forEach(cid => states[cid].checked = state.checked);
-  //   [...state.parents].reverse().forEach((pid) => {
-  //     const checks = states[pid].children.map(cid => states[cid].checked);
-  //     state.indet = isIndet(checks);
-  //     state.checked = checks.every(checked => checked);
-  //   });
-  // }
-
-  // Object.keys(states)
-  // [...ids].forEach((id) => {
-  //   const state = states[id];
-  //   state.checked = true;
-  //   state.children.forEach((cid) => {
-  //     states[cid].checked = true;
-  //     states[cid].indet = false;
-  //   });
-  // });
-
   return states;
 }
 
 function updateStates(states: ReturnType<typeof treeToStates>, id: number, checked: boolean) {
   const state = states[id];
+
+  if (!state)
+    return;
+
   state.checked = checked;
   state.indet = false;
   state.children.forEach((cid) => {
-    states[cid].checked = checked;
-    states[cid].indet = false;
+    const cState = states[cid];
+    if (cState) {
+      cState.checked = checked;
+      cState.indet = false;
+    }
   });
-  [...state.parents].reverse().forEach((pid) => {
-    const checks = states[pid].children.map(pid => states[pid].checked);
-    states[pid].indet = isIndet(checks);
-    states[pid].checked = checks.every(checked => checked);
+  [...state.parents].forEach((pid) => {
+    const pState = states[pid];
+    if (pState) {
+      const checks = pState.children.map(cid => states[cid]?.checked);
+      pState.indet = isIndet(checks);
+      pState.checked = checks.every(checked => checked);
+    }
   });
 }
 
 function statesToIds(states: ReturnType<typeof treeToStates>) {
-  return Object.keys(states).map(Number).filter(id => states[id].checked);
+  return Object.keys(states).map(Number).filter(id => states[id]?.checked);
 }
 
 function findAllParents(tree: any[], id: number, path: any[] = []): any[] | undefined {
@@ -157,60 +133,71 @@ function isIndet(arr: boolean[]) {
 
 <script setup lang="ts">
 const props = defineProps<{
-  treeData: TTree[]
+  treeData: TTree[] | null | undefined
 }>();
 const ids = defineModel<number[]>('value', { default: [] });
-const tableData = computed(() => treeToTable(props.treeData));
-const stateMap = computed(() => treeToStates(props.treeData));
+const tableData = computed(() => props.treeData && treeToTable(props.treeData));
+const stateMap = computed(() => props.treeData && treeToStates(props.treeData));
 
 watch(ids, (newV, oldV) => {
-  if (newV === oldV)
+  if (newV === oldV || !stateMap.value)
     return;
 
-  newV.forEach(id => updateStates(stateMap.value, id, true));
+  newV.forEach(id => updateStates(stateMap.value!, id, true));
   triggerRef(stateMap);
 }, { immediate: true });
 
+watch(stateMap, (newV) => {
+  if (newV) {
+    ids.value.forEach(id => updateStates(newV, id, true));
+    triggerRef(stateMap);
+  }
+});
+
 function onCheckChange(id: number) {
-  const checked = !ids.value.includes(id);
-  updateStates(stateMap.value, id, checked);
-  ids.value = statesToIds(stateMap.value);
+  if (stateMap.value) {
+    const checked = !ids.value.includes(id);
+    updateStates(stateMap.value, id, checked);
+    ids.value = statesToIds(stateMap.value);
+  }
 }
 </script>
 
 <template>
   <table class="w-full border-collapse border-$antd-colorBorderSecondary" border>
-    <tr v-for="(row, ri) of tableData" :key="ri">
-      <!-- 模块 -->
-      <td v-if="row[0]" class="w-[6em] px-[1em] py-0.5em" :rowspan="row[0].span">
-        <Checkbox
-          :checked="stateMap[row[0].id].indet ? false : stateMap[row[0].id].checked"
-          :indeterminate="stateMap[row[0].id].indet" @change="onCheckChange(row[0].id)"
-        >
-          {{ row[0].label }}{{ row[0].id }}
-        </Checkbox>
-      </td>
-      <!-- 页面 -->
-      <td v-if="row[1]" class="w-[9em] px-[1em] py-0.5em">
-        <Checkbox
-          :checked="stateMap[row[1].id].indet ? false : stateMap[row[1].id].checked"
-          :indeterminate="stateMap[row[1].id].indet" @change="onCheckChange(row[1].id)"
-        >
-          {{ row[1].label }}
-        </Checkbox>
-      </td>
-      <!-- 功能 -->
-      <td v-if="row[2]" class="px-[1em] py-0.5em">
-        <div class="feat-list">
+    <FormItemRest>
+      <tr v-for="(row, ri) of tableData" :key="ri">
+        <!-- 模块 -->
+        <td v-if="row[0]" class="w-[6em] px-[1em] py-0.5em" :rowspan="row[0].span">
+          <Checkbox
+            :checked="stateMap?.[row[0].id].indet ? false : stateMap?.[row[0].id].checked"
+            :indeterminate="stateMap?.[row[0].id].indet" @change="onCheckChange(row[0].id)"
+          >
+            {{ row[0].label }}{{ row[0].id }}
+          </Checkbox>
+        </td>
+        <!-- 页面 -->
+        <td v-if="row[1]" class="w-[9em] px-[1em] py-0.5em">
           <Checkbox
-            v-for="fItem of row[2]" :key="fItem?.id" :checked="stateMap[fItem.id].checked"
-            @change="onCheckChange(fItem.id)"
+            :checked="stateMap?.[row[1].id].indet ? false : stateMap?.[row[1].id].checked"
+            :indeterminate="stateMap?.[row[1].id].indet" @change="onCheckChange(row[1].id)"
           >
-            {{ fItem.label }}
+            {{ row[1].label }} {{ row[1].id }}
           </Checkbox>
-        </div>
-      </td>
-    </tr>
+        </td>
+        <!-- 功能 -->
+        <td v-if="row[2]" class="px-[1em] py-0.5em">
+          <div class="feat-list">
+            <Checkbox
+              v-for="fItem of row[2]" :key="fItem?.id" :checked="stateMap?.[fItem.id].checked"
+              @change="onCheckChange(fItem.id)"
+            >
+              {{ fItem.label }} {{ fItem.id }}
+            </Checkbox>
+          </div>
+        </td>
+      </tr>
+    </FormItemRest>
   </table>
 </template>
 

package/admin/components/permission-tree/index.ts

@@ -1 +1 @@
-export { default as PermissionTreeCheckbox, treeToIds } from './PermissionTree.vue';
+export { default as PermissionTreeCheckbox } from './PermissionTree.vue';

package/admin/components/scroll-nav/index.ts

@@ -1 +1 @@
-export { default as ScrollNav } from './src/ScrollNav.vue';
+export { default as ScrollNav } from './src/ScrollNav.vue';

package/admin/components/text/src/Duration.vue

@@ -1,26 +1,26 @@
-<script setup lang="ts">
-import { computed } from 'vue';
-
-const props = defineProps<{
-  seconds: number
-}>();
-
-const formattedDuration = computed(() => {
-  const days = Math.floor(props.seconds / (3600 * 24));
-  const hours = Math.floor((props.seconds % (3600 * 24)) / 3600);
-  const minutes = Math.floor((props.seconds % 3600) / 60);
-  const seconds = props.seconds % 60;
-  let formattedDuration = '';
-
-  days >= 1 && (formattedDuration += `${Math.floor(days)}天 `);
-  hours >= 1 && (formattedDuration += `${Math.floor(hours)}小时 `);
-  minutes >= 1 && (formattedDuration += `${Math.floor(minutes)}分钟 `);
-  seconds >= 1 && (formattedDuration += `${Math.floor(seconds)}秒`);
-
-  return formattedDuration;
-});
-</script>
-
-<template>
-  <span>{{ formattedDuration }}</span>
-</template>
+<script setup lang="ts">
+import { computed } from 'vue';
+
+const props = defineProps<{
+  seconds: number
+}>();
+
+const formattedDuration = computed(() => {
+  const days = Math.floor(props.seconds / (3600 * 24));
+  const hours = Math.floor((props.seconds % (3600 * 24)) / 3600);
+  const minutes = Math.floor((props.seconds % 3600) / 60);
+  const seconds = props.seconds % 60;
+  let formattedDuration = '';
+
+  days >= 1 && (formattedDuration += `${Math.floor(days)}天 `);
+  hours >= 1 && (formattedDuration += `${Math.floor(hours)}小时 `);
+  minutes >= 1 && (formattedDuration += `${Math.floor(minutes)}分钟 `);
+  seconds >= 1 && (formattedDuration += `${Math.floor(seconds)}秒`);
+
+  return formattedDuration;
+});
+</script>
+
+<template>
+  <span>{{ formattedDuration }}</span>
+</template>

package/admin/components/text/src/createTagGetter.ts

@@ -1,13 +1,13 @@
-import { computed, h } from 'vue';
-import { Tag as ATag } from 'ant-design-vue';
-import type { TagProps } from 'ant-design-vue';
-
-export function createTagGetter(typeMapFn: () => { [code: number | string]: [ text: string, color: TagProps['color'] ] }) {
-  const typeMap = computed(typeMapFn);
-
-  return (type: number | string) => {
-    const [text, color] = typeMap.value[type] ?? [];
-
-    return text ? h(ATag, { color }, () => text) : h('span', null, '-');
-  };
-}
+import { computed, h } from 'vue';
+import { Tag as ATag } from 'ant-design-vue';
+import type { TagProps } from 'ant-design-vue';
+
+export function createTagGetter(typeMapFn: () => { [code: number | string]: [ text: string, color: TagProps['color'] ] }) {
+  const typeMap = computed(typeMapFn);
+
+  return (type: number | string) => {
+    const [text, color] = typeMap.value[type] ?? [];
+
+    return text ? h(ATag, { color }, () => text) : h('span', null, '-');
+  };
+}

package/admin/route-guards/index.ts

@@ -1,3 +1,3 @@
-export { setupPageProgress } from './pageProgress';
-export { setupPageTitle } from './pageTitle';
-export { setupCollapseMenu } from './collapseMenu';
+export { setupPageProgress } from './pageProgress';
+export { setupPageTitle } from './pageTitle';
+export { setupCollapseMenu } from './collapseMenu';

package/admin/route-guards/pageProgress.ts

@@ -1,27 +1,27 @@
-import type { Router } from 'vue-router';
-import { useStyleTag } from '@vueuse/core';
-import NProgress from 'nprogress';
-import 'nprogress/nprogress.css';
-
-/**
- * 用于显示页面跳转时，页面顶部进度条
- */
-export function setupPageProgress(router: Router) {
-  NProgress.configure({ showSpinner: false });
-  useStyleTag(`
-    #nprogress .bar {
-      height: 3px;
-      background: var(--antd-colorPrimary);
-    }
-    #nprogress .peg {
-      box-shadow: 0 0 10px var(--antd-colorPrimary), 0 0 5px var(--antd-colorPrimary);
-    }
-  `);
-
-  router.beforeEach(() => {
-    NProgress.start();
-  });
-  router.afterEach(() => {
-    setTimeout(() => NProgress.done(), 200);
-  });
-}
+import type { Router } from 'vue-router';
+import { useStyleTag } from '@vueuse/core';
+import NProgress from 'nprogress';
+import 'nprogress/nprogress.css';
+
+/**
+ * 用于显示页面跳转时，页面顶部进度条
+ */
+export function setupPageProgress(router: Router) {
+  NProgress.configure({ showSpinner: false });
+  useStyleTag(`
+    #nprogress .bar {
+      height: 3px;
+      background: var(--antd-colorPrimary);
+    }
+    #nprogress .peg {
+      box-shadow: 0 0 10px var(--antd-colorPrimary), 0 0 5px var(--antd-colorPrimary);
+    }
+  `);
+
+  router.beforeEach(() => {
+    NProgress.start();
+  });
+  router.afterEach(() => {
+    setTimeout(() => NProgress.done(), 200);
+  });
+}

package/admin/styles/globalCover.scss

@@ -1,54 +1,54 @@
-:root {
-  // table 组件头部圆角设为 0
-  .ant-table-wrapper {
-    .ant-table .ant-table-header,
-    table,
-    .ant-table-container table > thead > tr:first-child > *:first-child,
-    .ant-table-container table > thead > tr:first-child > *:last-child {
-      border-radius: 0;
-    }
-
-    .ant-pagination {
-      margin-bottom: 0;
-    }
-  }
-
-
-  // 隐藏在 sticky 模式下的滚动条
-  .ant-table-sticky-scroll {
-    display: none;
-  }
-
-  // 卡片
-  .ant-card .ant-card-actions > li > span {
-    cursor: inherit;
-  }
-
-  // Tab 溢出出现下列框时
-  .ant-tabs-dropdown-menu-title-content {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-
-  // 表格
-  .ant-table-wrapper {
-    .ant-table-row-expand-icon-collapsed::before {
-      height: 1.5px;
-    }
-    .ant-table-row-expand-icon-collapsed::after {
-      width: 1.5px;
-    }
-  }
-
-  .ant-drawer {
-    &:focus {
-      outline: none;
-    }
-
-    &.ant-drawer-bottom .ant-drawer-content {
-      border-top-left-radius: 8px;
-      border-top-right-radius: 8px;
-    }
-  }
-}
+:root {
+  // table 组件头部圆角设为 0
+  .ant-table-wrapper {
+    .ant-table .ant-table-header,
+    table,
+    .ant-table-container table > thead > tr:first-child > *:first-child,
+    .ant-table-container table > thead > tr:first-child > *:last-child {
+      border-radius: 0;
+    }
+
+    .ant-pagination {
+      margin-bottom: 0;
+    }
+  }
+
+
+  // 隐藏在 sticky 模式下的滚动条
+  .ant-table-sticky-scroll {
+    display: none;
+  }
+
+  // 卡片
+  .ant-card .ant-card-actions > li > span {
+    cursor: inherit;
+  }
+
+  // Tab 溢出出现下列框时
+  .ant-tabs-dropdown-menu-title-content {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  // 表格
+  .ant-table-wrapper {
+    .ant-table-row-expand-icon-collapsed::before {
+      height: 1.5px;
+    }
+    .ant-table-row-expand-icon-collapsed::after {
+      width: 1.5px;
+    }
+  }
+
+  .ant-drawer {
+    &:focus {
+      outline: none;
+    }
+
+    &.ant-drawer-bottom .ant-drawer-content {
+      border-top-left-radius: 8px;
+      border-top-right-radius: 8px;
+    }
+  }
+}

package/antd/directives/formLabelAlign.ts

@@ -1,36 +1,36 @@
-import type { App } from 'vue';
-
-export function formLabelAlign(app: App) {
-  const directiveName = 'antd-form-label-align';
-  const resizeObserverKey = `${directiveName}@resizeObserver`;
-
-  function init(el: HTMLElement) {
-    const labels = el.querySelectorAll('.ant-form-item .ant-form-item-label');
-    const resizeObserver = new ResizeObserver((entries) => {
-      const widths = entries.map(e => e.borderBoxSize?.[0]?.inlineSize ?? 0);
-      const maxWidth = Math.max(...widths);
-
-      if (maxWidth <= 0)
-        return;
-
-      el.style.setProperty('--max-label-width', `${maxWidth}px`);
-      entries.forEach((e) => {
-        const target = e.target as HTMLElement;
-        target.style.setProperty('width', 'var(--max-label-width)');
-      });
-    });
-
-    Array.from(labels).forEach(label => resizeObserver.observe(label));
-
-    return resizeObserver;
-  }
-
-  app.directive(directiveName, {
-    mounted(el: HTMLElement) {
-      (el as any)[resizeObserverKey] = init(el);
-    },
-    updated(el) {
-      (el as any)[resizeObserverKey] = init(el);
-    },
-  });
-}
+import type { App } from 'vue';
+
+export function formLabelAlign(app: App) {
+  const directiveName = 'antd-form-label-align';
+  const resizeObserverKey = `${directiveName}@resizeObserver`;
+
+  function init(el: HTMLElement) {
+    const labels = el.querySelectorAll('.ant-form-item .ant-form-item-label');
+    const resizeObserver = new ResizeObserver((entries) => {
+      const widths = entries.map(e => e.borderBoxSize?.[0]?.inlineSize ?? 0);
+      const maxWidth = Math.max(...widths);
+
+      if (maxWidth <= 0)
+        return;
+
+      el.style.setProperty('--max-label-width', `${maxWidth}px`);
+      entries.forEach((e) => {
+        const target = e.target as HTMLElement;
+        target.style.setProperty('width', 'var(--max-label-width)');
+      });
+    });
+
+    Array.from(labels).forEach(label => resizeObserver.observe(label));
+
+    return resizeObserver;
+  }
+
+  app.directive(directiveName, {
+    mounted(el: HTMLElement) {
+      (el as any)[resizeObserverKey] = init(el);
+    },
+    updated(el) {
+      (el as any)[resizeObserverKey] = init(el);
+    },
+  });
+}

package/package.json

@@ -1,95 +1,95 @@
-{
-  "name": "@peng_kai/kit",
-  "type": "module",
-  "version": "0.2.27",
-  "description": "",
-  "author": "",
-  "license": "ISC",
-  "keywords": [],
-  "main": "index.js",
-  "scripts": {
-    "dev:js": "tsx ./admin/scripts/deploy.ts",
-    "lint": "eslint .",
-    "lint:fix": "eslint . --fix"
-  },
-  "peerDependencies": {
-    "ant-design-vue": "4.2.3",
-    "vue": "3.4.31",
-    "vue-router": "4.4.0"
-  },
-  "dependencies": {
-    "@aws-sdk/client-s3": "^3.609.0",
-    "@aws-sdk/lib-storage": "^3.609.0",
-    "@babel/generator": "^7.24.7",
-    "@babel/parser": "^7.24.7",
-    "@babel/traverse": "^7.24.7",
-    "@babel/types": "^7.24.7",
-    "@ckeditor/ckeditor5-vue": "^5.1.0",
-    "@fingerprintjs/fingerprintjs": "^4.4.1",
-    "@tanstack/vue-query": "^5.49.1",
-    "@vueuse/components": "^10.11.0",
-    "@vueuse/core": "^10.11.0",
-    "@vueuse/router": "^10.11.0",
-    "a-calc": "^1.3.12",
-    "ant-design-vue": "^4.2.3",
-    "archiver": "^7.0.1",
-    "axios": "^1.7.2",
-    "bignumber.js": "^9.1.2",
-    "chokidar": "^3.6.0",
-    "crypto-es": "^2.1.0",
-    "dayjs": "^1.11.11",
-    "echarts": "^5.4.3",
-    "execa": "^9.3.0",
-    "fast-glob": "^3.3.2",
-    "localstorage-slim": "^2.7.1",
-    "lodash-es": "^4.17.21",
-    "nprogress": "^0.2.0",
-    "pinia": "^2.1.7",
-    "tsx": "^4.16.00",
-    "vue": "^3.4.31",
-    "vue-i18n": "^9.13.1",
-    "vue-router": "^4.4.0"
-  },
-  "devDependencies": {
-    "@ckeditor/ckeditor5-adapter-ckfinder": "^41.1.0",
-    "@ckeditor/ckeditor5-alignment": "^41.1.0",
-    "@ckeditor/ckeditor5-autoformat": "^41.1.0",
-    "@ckeditor/ckeditor5-basic-styles": "^41.1.0",
-    "@ckeditor/ckeditor5-block-quote": "^41.1.0",
-    "@ckeditor/ckeditor5-build-classic": "^41.1.0",
-    "@ckeditor/ckeditor5-code-block": "^41.1.0",
-    "@ckeditor/ckeditor5-document-outline": "^41.1.0",
-    "@ckeditor/ckeditor5-editor-classic": "^41.1.0",
-    "@ckeditor/ckeditor5-essentials": "^41.1.0",
-    "@ckeditor/ckeditor5-font": "^41.1.0",
-    "@ckeditor/ckeditor5-heading": "^41.1.0",
-    "@ckeditor/ckeditor5-highlight": "^41.1.0",
-    "@ckeditor/ckeditor5-horizontal-line": "^41.1.0",
-    "@ckeditor/ckeditor5-html-embed": "^41.1.0",
-    "@ckeditor/ckeditor5-html-support": "^41.1.0",
-    "@ckeditor/ckeditor5-image": "^41.1.0",
-    "@ckeditor/ckeditor5-import-word": "^41.1.0",
-    "@ckeditor/ckeditor5-indent": "^41.1.0",
-    "@ckeditor/ckeditor5-link": "^41.1.0",
-    "@ckeditor/ckeditor5-list": "^41.1.0",
-    "@ckeditor/ckeditor5-media-embed": "^41.1.0",
-    "@ckeditor/ckeditor5-paragraph": "^41.1.0",
-    "@ckeditor/ckeditor5-remove-format": "^41.1.0",
-    "@ckeditor/ckeditor5-show-blocks": "^41.1.0",
-    "@ckeditor/ckeditor5-source-editing": "^41.1.0",
-    "@ckeditor/ckeditor5-table": "^41.1.0",
-    "@ckeditor/ckeditor5-theme-lark": "^41.1.0",
-    "@ckeditor/ckeditor5-typing": "^41.1.0",
-    "@ckeditor/ckeditor5-upload": "^41.1.0",
-    "@ckeditor/ckeditor5-word-count": "^41.1.0",
-    "@peng_kai/lint": "^0.1.0",
-    "@types/archiver": "^6.0.2",
-    "@types/crypto-js": "^4.2.2",
-    "@types/lodash-es": "^4.17.12",
-    "@types/node": "^18.19.39",
-    "@types/nprogress": "^0.2.3",
-    "type-fest": "^4.21.0",
-    "typescript": "^5.5.3",
-    "vue-component-type-helpers": "^2.0.24"
-  }
-}
+{
+  "name": "@peng_kai/kit",
+  "type": "module",
+  "version": "0.2.29",
+  "description": "",
+  "author": "",
+  "license": "ISC",
+  "keywords": [],
+  "main": "index.js",
+  "scripts": {
+    "dev:js": "tsx ./admin/scripts/deploy.ts",
+    "lint": "eslint .",
+    "lint:fix": "eslint . --fix"
+  },
+  "peerDependencies": {
+    "ant-design-vue": "4.2.3",
+    "vue": "3.4.31",
+    "vue-router": "4.4.0"
+  },
+  "dependencies": {
+    "@aws-sdk/client-s3": "^3.609.0",
+    "@aws-sdk/lib-storage": "^3.609.0",
+    "@babel/generator": "^7.24.7",
+    "@babel/parser": "^7.24.7",
+    "@babel/traverse": "^7.24.7",
+    "@babel/types": "^7.24.7",
+    "@ckeditor/ckeditor5-vue": "^5.1.0",
+    "@fingerprintjs/fingerprintjs": "^4.4.1",
+    "@tanstack/vue-query": "^5.49.1",
+    "@vueuse/components": "^10.11.0",
+    "@vueuse/core": "^10.11.0",
+    "@vueuse/router": "^10.11.0",
+    "a-calc": "^1.3.12",
+    "archiver": "^7.0.1",
+    "axios": "^1.7.2",
+    "bignumber.js": "^9.1.2",
+    "chokidar": "^3.6.0",
+    "crypto-es": "^2.1.0",
+    "dayjs": "^1.11.11",
+    "echarts": "^5.4.3",
+    "execa": "^9.3.0",
+    "fast-glob": "^3.3.2",
+    "localstorage-slim": "^2.7.1",
+    "lodash-es": "^4.17.21",
+    "nprogress": "^0.2.0",
+    "pinia": "^2.1.7",
+    "tsx": "^4.16.00",
+    "vue": "^3.4.31",
+    "vue-i18n": "^9.13.1",
+    "vue-router": "^4.4.0"
+  },
+  "devDependencies": {
+    "@ckeditor/ckeditor5-adapter-ckfinder": "^41.1.0",
+    "@ckeditor/ckeditor5-alignment": "^41.1.0",
+    "@ckeditor/ckeditor5-autoformat": "^41.1.0",
+    "@ckeditor/ckeditor5-basic-styles": "^41.1.0",
+    "@ckeditor/ckeditor5-block-quote": "^41.1.0",
+    "@ckeditor/ckeditor5-build-classic": "^41.1.0",
+    "@ckeditor/ckeditor5-code-block": "^41.1.0",
+    "@ckeditor/ckeditor5-document-outline": "^41.1.0",
+    "@ckeditor/ckeditor5-editor-classic": "^41.1.0",
+    "@ckeditor/ckeditor5-essentials": "^41.1.0",
+    "@ckeditor/ckeditor5-font": "^41.1.0",
+    "@ckeditor/ckeditor5-heading": "^41.1.0",
+    "@ckeditor/ckeditor5-highlight": "^41.1.0",
+    "@ckeditor/ckeditor5-horizontal-line": "^41.1.0",
+    "@ckeditor/ckeditor5-html-embed": "^41.1.0",
+    "@ckeditor/ckeditor5-html-support": "^41.1.0",
+    "@ckeditor/ckeditor5-image": "^41.1.0",
+    "@ckeditor/ckeditor5-import-word": "^41.1.0",
+    "@ckeditor/ckeditor5-indent": "^41.1.0",
+    "@ckeditor/ckeditor5-link": "^41.1.0",
+    "@ckeditor/ckeditor5-list": "^41.1.0",
+    "@ckeditor/ckeditor5-media-embed": "^41.1.0",
+    "@ckeditor/ckeditor5-paragraph": "^41.1.0",
+    "@ckeditor/ckeditor5-remove-format": "^41.1.0",
+    "@ckeditor/ckeditor5-show-blocks": "^41.1.0",
+    "@ckeditor/ckeditor5-source-editing": "^41.1.0",
+    "@ckeditor/ckeditor5-table": "^41.1.0",
+    "@ckeditor/ckeditor5-theme-lark": "^41.1.0",
+    "@ckeditor/ckeditor5-typing": "^41.1.0",
+    "@ckeditor/ckeditor5-upload": "^41.1.0",
+    "@ckeditor/ckeditor5-word-count": "^41.1.0",
+    "@peng_kai/lint": "^0.1.0",
+    "@types/archiver": "^6.0.2",
+    "@types/crypto-js": "^4.2.2",
+    "@types/lodash-es": "^4.17.12",
+    "@types/node": "^18.19.39",
+    "@types/nprogress": "^0.2.3",
+    "ant-design-vue": "^4.2.3",
+    "type-fest": "^4.21.0",
+    "typescript": "^5.5.3",
+    "vue-component-type-helpers": "^2.0.24"
+  }
+}

package/stylelint.config.cjs

@@ -1,7 +1,7 @@
-module.exports = {
-  // root: true,
-  extends: ['@peng_kai/lint/vue/stylelint_v2'],
-  rules: {
-    'custom-property-pattern': '(antd-([a-z][a-zA-Z0-9]+)*)|(([a-z][a-z0-9]*)(-[a-z0-9]+)*)',
-  },
-};
+module.exports = {
+  // root: true,
+  extends: ['@peng_kai/lint/vue/stylelint_v2'],
+  rules: {
+    'custom-property-pattern': '(antd-([a-z][a-zA-Z0-9]+)*)|(([a-z][a-z0-9]*)(-[a-z0-9]+)*)',
+  },
+};

package/vue/components/infinite-query/index.ts

@@ -1 +1 @@
-export { default as InfiniteQuery } from './src/InfiniteQuery.vue';
+export { default as InfiniteQuery } from './src/InfiniteQuery.vue';

package/vue/components/infinite-query/src/useCreateTrigger.ts

@@ -1,39 +1,39 @@
-import { onUnmounted, watch } from 'vue';
-import type { Ref } from 'vue';
-import { useIntersectionObserver, useIntervalFn } from '@vueuse/core';
-
-export function useCreateTrigger(containerEle: Ref<HTMLElement | undefined>, callback: Function, distance: string) {
-  const triggerEl = document.createElement('div');
-
-  Object.assign(triggerEl.style, {
-    position: 'relative',
-    zIndex: '5',
-    marginTop: `-${distance}`,
-    marginBottom: distance,
-    width: '5px',
-    height: '5px',
-    // background: 'red',
-  } satisfies Partial<CSSStyleDeclaration>);
-
-  useIntervalFn(() => {
-    const { transform } = triggerEl.style;
-
-    if (transform)
-      triggerEl.style.removeProperty('transform');
-    else triggerEl.style.setProperty('transform', 'translateX(-200%)');
-  }, 500);
-
-  useIntersectionObserver(triggerEl, ([entry]) => {
-    if (entry.isIntersecting)
-      callback();
-  });
-
-  watch(containerEle, (ele) => {
-    if (ele)
-      ele.append(triggerEl);
-  });
-
-  onUnmounted(() => {
-    triggerEl.remove();
-  });
-}
+import { onUnmounted, watch } from 'vue';
+import type { Ref } from 'vue';
+import { useIntersectionObserver, useIntervalFn } from '@vueuse/core';
+
+export function useCreateTrigger(containerEle: Ref<HTMLElement | undefined>, callback: Function, distance: string) {
+  const triggerEl = document.createElement('div');
+
+  Object.assign(triggerEl.style, {
+    position: 'relative',
+    zIndex: '5',
+    marginTop: `-${distance}`,
+    marginBottom: distance,
+    width: '5px',
+    height: '5px',
+    // background: 'red',
+  } satisfies Partial<CSSStyleDeclaration>);
+
+  useIntervalFn(() => {
+    const { transform } = triggerEl.style;
+
+    if (transform)
+      triggerEl.style.removeProperty('transform');
+    else triggerEl.style.setProperty('transform', 'translateX(-200%)');
+  }, 500);
+
+  useIntersectionObserver(triggerEl, ([entry]) => {
+    if (entry.isIntersecting)
+      callback();
+  });
+
+  watch(containerEle, (ele) => {
+    if (ele)
+      ele.append(triggerEl);
+  });
+
+  onUnmounted(() => {
+    triggerEl.remove();
+  });
+}