@peng_kai/kit 0.2.47 → 0.2.48

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/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,7 +1,7 @@
 {
   "name": "@peng_kai/kit",
   "type": "module",
-  "version": "0.2.47",
+  "version": "0.2.48",
   "description": "",
   "author": "",
   "license": "ISC",

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/echarts/src/ECharts.vue

@@ -1,7 +1,7 @@
 <script lang="ts">
 import { useEventListener, useResizeObserver } from '@vueuse/core';
 import * as echarts from 'echarts';
-import { onBeforeMount, onMounted, ref, shallowRef, toRef, watch, watchEffect } from 'vue';
+import { onBeforeMount, onMounted, ref, shallowRef, toRef, watch } from 'vue';
 import { useIsDark } from '../../../hooks/useIsDark';
 </script>
 
@@ -9,8 +9,10 @@ import { useIsDark } from '../../../hooks/useIsDark';
 const props = withDefaults(defineProps<{
   echartOption: any
   theme?: 'light' | 'dark' | 'auto'
+  updateMode?: 'all' | 'data'
 }>(), {
   theme: 'auto',
+  updateMode: 'all',
 });
 
 const $chartEle = ref<HTMLElement>();
@@ -38,22 +40,31 @@ function getTheme() {
   return props.theme;
 }
 
-watch(toRef(props, 'echartOption'), (option) => {
+function updateAll(option: any) {
+  echartInst.value?.dispose();
+  echartInst.value = null;
+  echartInst.value = echarts.init($chartEle.value, getTheme());
+  echartInst.value.setOption(option ?? {});
+}
+
+function updateData(option: any) {
   echartInst.value?.setOption(option ?? {});
+}
+
+watch(toRef(props, 'echartOption'), (option) => {
+  if (props.updateMode === 'all')
+    updateAll(option);
+  else
+    updateData(option);
 });
 
 watch(isDark, () => {
-  if (props.theme === 'auto') {
-    echartInst.value?.dispose();
-    echartInst.value = null;
-    echartInst.value = echarts.init($chartEle.value, getTheme());
-    echartInst.value.setOption(props.echartOption ?? {});
-  }
+  if (props.theme === 'auto')
+    updateAll(props.echartOption);
 });
 
 onMounted(() => {
-  echartInst.value = echarts.init($chartEle.value, getTheme());
-  echartInst.value.setOption(props.echartOption ?? {});
+  updateAll(props.echartOption ?? {});
 });
 
 onBeforeMount(() => {

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();
+  });
+}