canrd-outside / order-erp-front · Commits

Commit 55e9d9fc2953643cec95c74b6ed34b0e68641fb6

Authored by Vben
1 parent 84d9300e

perf: optimize components and add comments

Inline Side-by-side
Showing 40 changed files with 533 additions and 527 deletions
package.json
  View file @55e9d9f
... ... @@ -35,7 +35,7 @@
35 35 "@iconify/iconify": "^2.0.1",
36 36 "@logicflow/core": "^0.4.11",
37 37 "@logicflow/extension": "^0.4.12",
38   - "@vueuse/core": "^4.11.2",
  38 + "@vueuse/core": "^5.0.1",
39 39 "@zxcvbn-ts/core": "^0.3.0",
40 40 "ant-design-vue": "2.1.2",
41 41 "axios": "^0.21.1",
... ... @@ -63,7 +63,7 @@
63 63 "devDependencies": {
64 64 "@commitlint/cli": "^12.1.4",
65 65 "@commitlint/config-conventional": "^12.1.4",
66   - "@iconify/json": "^1.1.353",
  66 + "@iconify/json": "^1.1.354",
67 67 "@purge-icons/generated": "^0.7.0",
68 68 "@types/codemirror": "^5.60.0",
69 69 "@types/crypto-js": "^4.0.1",
... ... @@ -71,13 +71,13 @@
71 71 "@types/inquirer": "^7.3.1",
72 72 "@types/lodash-es": "^4.17.4",
73 73 "@types/mockjs": "^1.0.3",
74   - "@types/node": "^15.12.1",
  74 + "@types/node": "^15.12.2",
75 75 "@types/nprogress": "^0.2.0",
76 76 "@types/qrcode": "^1.4.0",
77 77 "@types/qs": "^6.9.6",
78 78 "@types/sortablejs": "^1.10.6",
79   - "@typescript-eslint/eslint-plugin": "^4.26.0",
80   - "@typescript-eslint/parser": "^4.26.0",
  79 + "@typescript-eslint/eslint-plugin": "^4.26.1",
  80 + "@typescript-eslint/parser": "^4.26.1",
81 81 "@vitejs/plugin-legacy": "^1.4.1",
82 82 "@vitejs/plugin-vue": "^1.2.3",
83 83 "@vitejs/plugin-vue-jsx": "^1.1.5",
... ... @@ -92,7 +92,7 @@
92 92 "eslint-define-config": "^1.0.8",
93 93 "eslint-plugin-prettier": "^3.4.0",
94 94 "eslint-plugin-vue": "^7.10.0",
95   - "esno": "^0.7.0",
  95 + "esno": "^0.7.1",
96 96 "fs-extra": "^10.0.0",
97 97 "http-server": "^0.12.3",
98 98 "husky": "^6.0.0",
... ... @@ -121,14 +121,14 @@
121 121 "vite-plugin-style-import": "^0.10.1",
122 122 "vite-plugin-svg-icons": "^0.7.0",
123 123 "vite-plugin-theme": "^0.8.1",
124   - "vite-plugin-windicss": "^1.0.1",
  124 + "vite-plugin-windicss": "^1.0.2",
125 125 "vue-eslint-parser": "^7.6.0",
126 126 "vue-tsc": "^0.1.7"
127 127 },
128 128 "resolutions": {
129 129 "//": "Used to install imagemin dependencies, because imagemin may not be installed in China. If it is abroad, you can delete it",
130 130 "bin-wrapper": "npm:bin-wrapper-china",
131   - "rollup": "^2.51.0"
  131 + "rollup": "^2.51.1"
132 132 },
133 133 "repository": {
134 134 "type": "git",
... ...
src/components/Application/index.ts
  View file @55e9d9f
1   -import AppLogo from './src/AppLogo.vue';
2   -import AppProvider from './src/AppProvider.vue';
3   -import AppSearch from './src/search/AppSearch.vue';
4   -import AppLocalePicker from './src/AppLocalePicker.vue';
5   -import AppDarkModeToggle from './src/AppDarkModeToggle.vue';
  1 +import { withInstall } from '/@/utils';
  2 +
  3 +import appLogo from './src/AppLogo.vue';
  4 +import appProvider from './src/AppProvider.vue';
  5 +import appSearch from './src/search/AppSearch.vue';
  6 +import appLocalePicker from './src/AppLocalePicker.vue';
  7 +import appDarkModeToggle from './src/AppDarkModeToggle.vue';
6 8  
7 9 export { useAppProviderContext } from './src/useAppContext';
8   -export { AppLogo, AppProvider, AppSearch, AppLocalePicker, AppDarkModeToggle };
  10 +
  11 +export const AppLogo = withInstall(appLogo);
  12 +export const AppProvider = withInstall(appProvider);
  13 +export const AppSearch = withInstall(appSearch);
  14 +export const AppLocalePicker = withInstall(appLocalePicker);
  15 +export const AppDarkModeToggle = withInstall(appDarkModeToggle);
... ...
src/components/Application/src/AppDarkModeToggle.vue
  View file @55e9d9f
1 1 <template>
2   - <div
3   - v-if="getShowDarkModeToggle"
4   - :class="[
5   - prefixCls,
6   - {
7   - [`${prefixCls}--dark`]: isDark,
8   - },
9   - ]"
10   - @click="toggleDarkMode"
11   - >
  2 + <div v-if="getShowDarkModeToggle" :class="getClass" @click="toggleDarkMode">
12 3 <div :class="`${prefixCls}-inner`"> </div>
13 4 <SvgIcon size="14" name="sun" />
14 5 <SvgIcon size="14" name="moon" />
... ... @@ -16,25 +7,29 @@
16 7 </template>
17 8 <script lang="ts">
18 9 import { defineComponent, computed } from 'vue';
19   -
20   - import { useDesign } from '/@/hooks/web/useDesign';
21   -
22 10 import { SvgIcon } from '/@/components/Icon';
  11 + import { useDesign } from '/@/hooks/web/useDesign';
23 12 import { useRootSetting } from '/@/hooks/setting/useRootSetting';
24 13 import { updateHeaderBgColor, updateSidebarBgColor } from '/@/logics/theme/updateBackground';
25 14 import { updateDarkTheme } from '/@/logics/theme/dark';
26   -
27 15 import { ThemeEnum } from '/@/enums/appEnum';
28 16  
29 17 export default defineComponent({
30 18 name: 'DarkModeToggle',
31 19 components: { SvgIcon },
32 20 setup() {
33   - const { prefixCls } = useDesign('dark-mode-toggle');
  21 + const { prefixCls } = useDesign('dark-switch');
34 22 const { getDarkMode, setDarkMode, getShowDarkModeToggle } = useRootSetting();
35 23  
36 24 const isDark = computed(() => getDarkMode.value === ThemeEnum.DARK);
37 25  
  26 + const getClass = computed(() => [
  27 + prefixCls,
  28 + {
  29 + [`${prefixCls}--dark`]: isDark,
  30 + },
  31 + ]);
  32 +
38 33 function toggleDarkMode() {
39 34 const darkMode = getDarkMode.value === ThemeEnum.DARK ? ThemeEnum.LIGHT : ThemeEnum.DARK;
40 35 setDarkMode(darkMode);
... ... @@ -44,6 +39,7 @@
44 39 }
45 40  
46 41 return {
  42 + getClass,
47 43 isDark,
48 44 prefixCls,
49 45 toggleDarkMode,
... ... @@ -53,7 +49,7 @@
53 49 });
54 50 </script>
55 51 <style lang="less" scoped>
56   - @prefix-cls: ~'@{namespace}-dark-mode-toggle';
  52 + @prefix-cls: ~'@{namespace}-dark-switch';
57 53  
58 54 html[data-theme='dark'] {
59 55 .@{prefix-cls} {
... ...
src/components/Application/src/AppLocalePicker.vue
  View file @55e9d9f
... ... @@ -13,39 +13,44 @@
13 13 >
14 14 <span class="cursor-pointer flex items-center">
15 15 <Icon icon="ion:language" />
16   - <span v-if="showText" class="ml-1">{{ getLangText }}</span>
  16 + <span v-if="showText" class="ml-1">{{ getLocaleText }}</span>
17 17 </span>
18 18 </Dropdown>
19 19 </template>
20 20 <script lang="ts">
21 21 import type { LocaleType } from '/#/config';
22 22 import type { DropMenu } from '/@/components/Dropdown';
23   -
24 23 import { defineComponent, ref, watchEffect, unref, computed } from 'vue';
25 24 import { Dropdown } from '/@/components/Dropdown';
26   - import Icon from '/@/components/Icon';
27   -
  25 + import { Icon } from '/@/components/Icon';
28 26 import { useLocale } from '/@/locales/useLocale';
29 27 import { localeList } from '/@/settings/localeSetting';
30   - import { propTypes } from '/@/utils/propTypes';
  28 +
  29 + const props = {
  30 + /**
  31 + * Whether to display text
  32 + */
  33 + showText: { type: Boolean, default: true },
  34 + /**
  35 + * Whether to refresh the interface when changing
  36 + */
  37 + reload: { type: Boolean },
  38 + };
31 39  
32 40 export default defineComponent({
33 41 name: 'AppLocalPicker',
34 42 components: { Dropdown, Icon },
35   - props: {
36   - // Whether to display text
37   - showText: propTypes.bool.def(true),
38   - // Whether to refresh the interface when changing
39   - reload: propTypes.bool,
40   - },
  43 + props,
41 44 setup(props) {
42 45 const selectedKeys = ref<string[]>([]);
43 46  
44 47 const { changeLocale, getLocale } = useLocale();
45 48  
46   - const getLangText = computed(() => {
  49 + const getLocaleText = computed(() => {
47 50 const key = selectedKeys.value[0];
48   - if (!key) return '';
  51 + if (!key) {
  52 + return '';
  53 + }
49 54 return localeList.find((item) => item.event === key)?.text;
50 55 });
51 56  
... ... @@ -60,11 +65,13 @@
60 65 }
61 66  
62 67 function handleMenuEvent(menu: DropMenu) {
63   - if (unref(getLocale) === menu.event) return;
  68 + if (unref(getLocale) === menu.event) {
  69 + return;
  70 + }
64 71 toggleLocale(menu.event as string);
65 72 }
66 73  
67   - return { localeList, handleMenuEvent, selectedKeys, getLangText };
  74 + return { localeList, handleMenuEvent, selectedKeys, getLocaleText };
68 75 },
69 76 });
70 77 </script>
... ...
src/components/Application/src/AppLogo.vue
  View file @55e9d9f
... ... @@ -3,63 +3,69 @@
3 3 * @Description: logo component
4 4 -->
5 5 <template>
6   - <div
7   - class="anticon"
8   - :class="[prefixCls, theme, { 'collapsed-show-title': getCollapsedShowTitle }]"
9   - @click="handleGoHome"
10   - >
  6 + <div class="anticon" :class="getAppLogoClass" @click="goHome">
11 7 <img src="../../../assets/images/logo.png" />
12   - <div
13   - class="ml-2 truncate md:opacity-100"
14   - :class="[
15   - `${prefixCls}__title`,
16   - {
17   - 'xs:opacity-0': !alwaysShowTitle,
18   - },
19   - ]"
20   - v-show="showTitle"
21   - >
  8 + <div class="ml-2 truncate md:opacity-100" :class="getTitleClass" v-show="showTitle">
22 9 {{ title }}
23 10 </div>
24 11 </div>
25 12 </template>
26 13 <script lang="ts">
27   - import { defineComponent } from 'vue';
28   -
  14 + import { defineComponent, computed, unref } from 'vue';
29 15 import { useGlobSetting } from '/@/hooks/setting';
30 16 import { useGo } from '/@/hooks/web/usePage';
31 17 import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
32 18 import { useDesign } from '/@/hooks/web/useDesign';
33   -
34 19 import { PageEnum } from '/@/enums/pageEnum';
35   - import { propTypes } from '/@/utils/propTypes';
  20 +
  21 + const props = {
  22 + /**
  23 + * The theme of the current parent component
  24 + */
  25 + theme: { type: String, validator: (v) => ['light', 'dark'].includes(v) },
  26 + /**
  27 + * Whether to show title
  28 + */
  29 + showTitle: { type: Boolean, default: true },
  30 + /**
  31 + * The title is also displayed when the menu is collapsed
  32 + */
  33 + alwaysShowTitle: { type: Boolean },
  34 + };
36 35  
37 36 export default defineComponent({
38 37 name: 'AppLogo',
39   - props: {
40   - /**
41   - * The theme of the current parent component
42   - */
43   - theme: propTypes.oneOf(['light', 'dark']),
44   - // Whether to show title
45   - showTitle: propTypes.bool.def(true),
46   - alwaysShowTitle: propTypes.bool.def(false),
47   - },
48   - setup() {
  38 + props: props,
  39 + setup(props) {
49 40 const { prefixCls } = useDesign('app-logo');
50 41 const { getCollapsedShowTitle } = useMenuSetting();
51 42 const { title } = useGlobSetting();
52 43 const go = useGo();
53 44  
54   - function handleGoHome(): void {
  45 + const getAppLogoClass = computed(() => [
  46 + prefixCls,
  47 + props.theme,
  48 + { 'collapsed-show-title': unref(getCollapsedShowTitle) },
  49 + ]);
  50 +
  51 + const getTitleClass = computed(() => [
  52 + `${prefixCls}__title`,
  53 + {
  54 + 'xs:opacity-0': !props.alwaysShowTitle,
  55 + },
  56 + ]);
  57 +
  58 + function goHome() {
55 59 go(PageEnum.BASE_HOME);
56 60 }
57 61  
58 62 return {
59   - handleGoHome,
  63 + getAppLogoClass,
  64 + getTitleClass,
  65 + getCollapsedShowTitle,
  66 + goHome,
60 67 title,
61 68 prefixCls,
62   - getCollapsedShowTitle,
63 69 };
64 70 },
65 71 });
... ...
src/components/Application/src/AppProvider.vue
  View file @55e9d9f
1 1 <script lang="ts">
2 2 import { defineComponent, toRefs, ref, unref } from 'vue';
3   -
4 3 import { createAppProviderContext } from './useAppContext';
5   -
6   - import { prefixCls } from '/@/settings/designSetting';
7 4 import { createBreakpointListen } from '/@/hooks/event/useBreakpoint';
8   - import { propTypes } from '/@/utils/propTypes';
  5 + import { prefixCls } from '/@/settings/designSetting';
9 6 import { useAppStore } from '/@/store/modules/app';
10 7 import { MenuModeEnum, MenuTypeEnum } from '/@/enums/menuEnum';
11 8  
  9 + const props = {
  10 + /**
  11 + * class style prefix
  12 + */
  13 + prefixCls: { type: String, default: prefixCls },
  14 + };
  15 +
12 16 export default defineComponent({
13 17 name: 'AppProvider',
14 18 inheritAttrs: false,
15   - props: {
16   - prefixCls: propTypes.string.def(prefixCls),
17   - },
  19 + props,
18 20 setup(props, { slots }) {
19 21 const isMobile = ref(false);
20 22 const isSetState = ref(false);
21 23  
22 24 const appStore = useAppStore();
23 25  
  26 + // Monitor screen breakpoint information changes
24 27 createBreakpointListen(({ screenMap, sizeEnum, width }) => {
25 28 const lgWidth = screenMap.get(sizeEnum.LG);
26 29 if (lgWidth) {
... ... @@ -30,8 +33,13 @@
30 33 });
31 34  
32 35 const { prefixCls } = toRefs(props);
  36 +
  37 + // Inject variables into the global
33 38 createAppProviderContext({ prefixCls, isMobile });
34 39  
  40 + /**
  41 + * Used to maintain the state before the window changes
  42 + */
35 43 function handleRestoreState() {
36 44 if (unref(isMobile)) {
37 45 if (!unref(isSetState)) {
... ...
src/components/Application/src/search/AppSearch.vue
  View file @55e9d9f
... ... @@ -4,11 +4,11 @@
4 4 import { SearchOutlined } from '@ant-design/icons-vue';
5 5 import AppSearchModal from './AppSearchModal.vue';
6 6 import { useI18n } from '/@/hooks/web/useI18n';
  7 +
7 8 export default defineComponent({
8 9 name: 'AppSearch',
9 10 setup() {
10 11 const showModal = ref(false);
11   -
12 12 const { t } = useI18n();
13 13  
14 14 function changeModal(show: boolean) {
... ...
src/components/Application/src/search/AppSearchFooter.vue
  View file @55e9d9f
1 1 <template>
2 2 <div :class="`${prefixCls}`">
3   - <AppSearchKeyItem :class="`${prefixCls}__item`" icon="ant-design:enter-outlined" />
  3 + <AppSearchKeyItem :class="`${prefixCls}-item`" icon="ant-design:enter-outlined" />
4 4 <span>{{ t('component.app.toSearch') }}</span>
5   - <AppSearchKeyItem :class="`${prefixCls}__item`" icon="ion:arrow-up-outline" />
6   - <AppSearchKeyItem :class="`${prefixCls}__item`" icon="ion:arrow-down-outline" />
  5 + <AppSearchKeyItem :class="`${prefixCls}-item`" icon="ion:arrow-up-outline" />
  6 + <AppSearchKeyItem :class="`${prefixCls}-item`" icon="ion:arrow-down-outline" />
7 7 <span>{{ t('component.app.toNavigate') }}</span>
8   - <AppSearchKeyItem :class="`${prefixCls}__item`" icon="mdi:keyboard-esc" />
  8 + <AppSearchKeyItem :class="`${prefixCls}-item`" icon="mdi:keyboard-esc" />
9 9 <span>{{ t('common.closeText') }}</span>
10 10 </div>
11 11 </template>
... ... @@ -21,10 +21,7 @@
21 21 setup() {
22 22 const { prefixCls } = useDesign('app-search-footer');
23 23 const { t } = useI18n();
24   - return {
25   - prefixCls,
26   - t,
27   - };
  24 + return { prefixCls, t };
28 25 },
29 26 });
30 27 </script>
... ... @@ -44,7 +41,7 @@
44 41 align-items: center;
45 42 flex-shrink: 0;
46 43  
47   - &__item {
  44 + &-item {
48 45 display: flex;
49 46 width: 20px;
50 47 height: 18px;
... ...
src/components/Application/src/search/AppSearchKeyItem.vue
  View file @55e9d9f
... ... @@ -8,8 +8,6 @@
8 8 import { Icon } from '/@/components/Icon';
9 9 export default defineComponent({
10 10 components: { Icon },
11   - props: {
12   - icon: String,
13   - },
  11 + props: { icon: String },
14 12 });
15 13 </script>
... ...
src/components/Application/src/search/AppSearchModal.vue
  View file @55e9d9f
... ... @@ -12,7 +12,6 @@
12 12 @change="handleSearch"
13 13 >
14 14 <template #prefix>
15   - <!-- <Icon icon="ion:search"/> -->
16 15 <SearchOutlined />
17 16 </template>
18 17 </Input>
... ... @@ -59,21 +58,20 @@
59 58 </template>
60 59 <script lang="ts">
61 60 import { defineComponent, computed, unref, ref, watch, nextTick } from 'vue';
62   -
63 61 import { SearchOutlined } from '@ant-design/icons-vue';
64 62 import { Input } from 'ant-design-vue';
65 63 import AppSearchFooter from './AppSearchFooter.vue';
66 64 import Icon from '/@/components/Icon';
67   -
68 65 import clickOutside from '/@/directives/clickOutside';
69   -
70 66 import { useDesign } from '/@/hooks/web/useDesign';
71 67 import { useRefs } from '/@/hooks/core/useRefs';
72 68 import { useMenuSearch } from './useMenuSearch';
73 69 import { useI18n } from '/@/hooks/web/useI18n';
74 70 import { useAppInject } from '/@/hooks/web/useAppInject';
75 71  
76   - import { propTypes } from '/@/utils/propTypes';
  72 + const props = {
  73 + visible: { type: Boolean },
  74 + };
77 75  
78 76 export default defineComponent({
79 77 name: 'AppSearchModal',
... ... @@ -81,17 +79,16 @@
81 79 directives: {
82 80 clickOutside,
83 81 },
84   - props: {
85   - visible: propTypes.bool,
86   - },
  82 + props,
87 83 emits: ['close'],
88 84 setup(props, { emit }) {
89 85 const scrollWrap = ref<ElRef>(null);
90   - const { prefixCls } = useDesign('app-search-modal');
  86 + const inputRef = ref<Nullable<HTMLElement>>(null);
  87 +
91 88 const { t } = useI18n();
  89 + const { prefixCls } = useDesign('app-search-modal');
92 90 const [refs, setRefs] = useRefs();
93 91 const { getIsMobile } = useAppInject();
94   - const inputRef = ref<Nullable<HTMLElement>>(null);
95 92  
96 93 const { handleSearch, searchResult, keyword, activeIndex, handleEnter, handleMouseenter } =
97 94 useMenuSearch(refs, scrollWrap, emit);
... ... @@ -109,8 +106,8 @@
109 106  
110 107 watch(
111 108 () => props.visible,
112   - (v: boolean) => {
113   - v &&
  109 + (visible: boolean) => {
  110 + visible &&
114 111 nextTick(() => {
115 112 unref(inputRef)?.focus();
116 113 });
... ...
src/components/Application/src/search/useMenuSearch.ts
  View file @55e9d9f
1 1 import type { Menu } from '/@/router/types';
2   -
3 2 import { ref, onBeforeMount, unref, Ref, nextTick } from 'vue';
4   -
5 3 import { getMenus } from '/@/router/menus';
6   -
7 4 import { cloneDeep } from 'lodash-es';
8 5 import { filter, forEach } from '/@/utils/helper/treeHelper';
9   -
10 6 import { useGo } from '/@/hooks/web/usePage';
11 7 import { useScrollTo } from '/@/hooks/event/useScrollTo';
12 8 import { onKeyStroke, useDebounceFn } from '@vueuse/core';
... ... @@ -67,7 +63,6 @@ export function useMenuSearch(refs: Ref&lt;HTMLElement[]&gt;, scrollWrap: Ref&lt;ElRef&gt;,
67 63  
68 64 function handlerSearchResult(filterMenu: Menu[], reg: RegExp, parent?: Menu) {
69 65 const ret: SearchResult[] = [];
70   -
71 66 filterMenu.forEach((item) => {
72 67 const { name, path, icon, children } = item;
73 68 if (reg.test(name) && !children?.length) {
... ... @@ -84,11 +79,13 @@ export function useMenuSearch(refs: Ref&lt;HTMLElement[]&gt;, scrollWrap: Ref&lt;ElRef&gt;,
84 79 return ret;
85 80 }
86 81  
  82 + // Activate when the mouse moves to a certain line
87 83 function handleMouseenter(e: any) {
88 84 const index = e.target.dataset.index;
89 85 activeIndex.value = Number(index);
90 86 }
91 87  
  88 + // Arrow key up
92 89 function handleUp() {
93 90 if (!searchResult.value.length) return;
94 91 activeIndex.value--;
... ... @@ -98,6 +95,7 @@ export function useMenuSearch(refs: Ref&lt;HTMLElement[]&gt;, scrollWrap: Ref&lt;ElRef&gt;,
98 95 handleScroll();
99 96 }
100 97  
  98 + // Arrow key down
101 99 function handleDown() {
102 100 if (!searchResult.value.length) return;
103 101 activeIndex.value++;
... ... @@ -107,15 +105,23 @@ export function useMenuSearch(refs: Ref&lt;HTMLElement[]&gt;, scrollWrap: Ref&lt;ElRef&gt;,
107 105 handleScroll();
108 106 }
109 107  
  108 + // When the keyboard up and down keys move to an invisible place
  109 + // the scroll bar needs to scroll automatically
110 110 function handleScroll() {
111 111 const refList = unref(refs);
112   - if (!refList || !Array.isArray(refList) || refList.length === 0 || !unref(scrollWrap)) return;
  112 + if (!refList || !Array.isArray(refList) || refList.length === 0 || !unref(scrollWrap)) {
  113 + return;
  114 + }
113 115  
114 116 const index = unref(activeIndex);
115 117 const currentRef = refList[index];
116   - if (!currentRef) return;
  118 + if (!currentRef) {
  119 + return;
  120 + }
117 121 const wrapEl = unref(scrollWrap);
118   - if (!wrapEl) return;
  122 + if (!wrapEl) {
  123 + return;
  124 + }
119 125 const scrollHeight = currentRef.offsetTop + currentRef.offsetHeight;
120 126 const wrapHeight = wrapEl.offsetHeight;
121 127 const { start } = useScrollTo({
... ... @@ -126,8 +132,11 @@ export function useMenuSearch(refs: Ref&lt;HTMLElement[]&gt;, scrollWrap: Ref&lt;ElRef&gt;,
126 132 start();
127 133 }
128 134  
  135 + // enter keyboard event
129 136 async function handleEnter() {
130   - if (!searchResult.value.length) return;
  137 + if (!searchResult.value.length) {
  138 + return;
  139 + }
131 140 const result = unref(searchResult);
132 141 const index = unref(activeIndex);
133 142 if (result.length === 0 || index < 0) {
... ... @@ -139,14 +148,18 @@ export function useMenuSearch(refs: Ref&lt;HTMLElement[]&gt;, scrollWrap: Ref&lt;ElRef&gt;,
139 148 go(to.path);
140 149 }
141 150  
  151 + // close search modal
142 152 function handleClose() {
143 153 searchResult.value = [];
144 154 emit('close');
145 155 }
146 156  
  157 + // enter search
147 158 onKeyStroke('Enter', handleEnter);
  159 + // Monitor keyboard arrow keys
148 160 onKeyStroke('ArrowUp', handleUp);
149 161 onKeyStroke('ArrowDown', handleDown);
  162 + // esc close
150 163 onKeyStroke('Escape', handleClose);
151 164  
152 165 return { handleSearch, searchResult, keyword, activeIndex, handleMouseenter, handleEnter };
... ...
src/components/Application/src/useAppContext.ts
  View file @55e9d9f
... ... @@ -3,7 +3,6 @@ import { createContext, useContext } from &#39;/@/hooks/core/useContext&#39;;
3 3  
4 4 export interface AppProviderContextProps {
5 5 prefixCls: Ref<string>;
6   -
7 6 isMobile: Ref<boolean>;
8 7 }
9 8  
... ...
src/components/Authority/index.ts
  View file @55e9d9f
1   -import Authority from './src/Authority.vue';
  1 +import { withInstall } from '/@/utils';
  2 +import authority from './src/Authority.vue';
2 3  
3   -export { Authority };
  4 +export const Authority = withInstall(authority);
... ...
src/components/Authority/src/Authority.vue
  View file @55e9d9f
... ... @@ -4,11 +4,8 @@
4 4 <script lang="ts">
5 5 import type { PropType } from 'vue';
6 6 import { defineComponent } from 'vue';
7   -
8 7 import { RoleEnum } from '/@/enums/roleEnum';
9   -
10 8 import { usePermission } from '/@/hooks/web/usePermission';
11   -
12 9 import { getSlot } from '/@/utils/helper/tsxHelper';
13 10  
14 11 export default defineComponent({
... ...
src/components/Basic/index.ts
  View file @55e9d9f
1   -import BasicArrow from './src/BasicArrow.vue';
2   -import BasicTitle from './src/BasicTitle.vue';
3   -import BasicHelp from './src/BasicHelp.vue';
  1 +import { withInstall } from '/@/utils';
  2 +import basicArrow from './src/BasicArrow.vue';
  3 +import basicTitle from './src/BasicTitle.vue';
  4 +import basicHelp from './src/BasicHelp.vue';
4 5  
5   -export { BasicArrow, BasicTitle, BasicHelp };
  6 +export const BasicArrow = withInstall(basicArrow);
  7 +export const BasicTitle = withInstall(basicTitle);
  8 +export const BasicHelp = withInstall(basicHelp);
... ...
src/components/Basic/src/BasicArrow.vue
  View file @55e9d9f
... ... @@ -9,41 +9,50 @@
9 9 </template>
10 10 <script lang="ts">
11 11 import { defineComponent, computed } from 'vue';
12   -
  12 + import { Icon } from '/@/components/Icon';
13 13 import { useDesign } from '/@/hooks/web/useDesign';
14 14  
15   - import { propTypes } from '/@/utils/propTypes';
16   -
17   - import { Icon } from '/@/components/Icon';
  15 + const props = {
  16 + /**
  17 + * Arrow expand state
  18 + */
  19 + expand: { type: Boolean },
  20 + /**
  21 + * Arrow up by default
  22 + */
  23 + up: { type: Boolean },
  24 + /**
  25 + * Arrow down by default
  26 + */
  27 + down: { type: Boolean },
  28 + /**
  29 + * Cancel padding/margin for inline
  30 + */
  31 + inset: { type: Boolean },
  32 + };
18 33  
19 34 export default defineComponent({
20 35 name: 'BasicArrow',
21 36 components: { Icon },
22   - props: {
23   - expand: propTypes.bool,
24   - top: propTypes.bool,
25   - bottom: propTypes.bool,
26   - inset: propTypes.bool,
27   - },
  37 + props,
28 38 setup(props) {
29 39 const { prefixCls } = useDesign('basic-arrow');
30 40  
  41 + // get component class
31 42 const getClass = computed(() => {
32   - const { expand, top, bottom, inset } = props;
  43 + const { expand, up, down, inset } = props;
33 44 return [
34 45 prefixCls,
35 46 {
36 47 [`${prefixCls}--active`]: expand,
37   - top,
  48 + up,
38 49 inset,
39   - bottom,
  50 + down,
40 51 },
41 52 ];
42 53 });
43 54  
44   - return {
45   - getClass,
46   - };
  55 + return { getClass };
47 56 },
48 57 });
49 58 </script>
... ... @@ -65,19 +74,19 @@
65 74 line-height: 0px;
66 75 }
67 76  
68   - &.top {
  77 + &.up {
69 78 transform: rotate(-90deg);
70 79 }
71 80  
72   - &.bottom {
  81 + &.down {
73 82 transform: rotate(90deg);
74 83 }
75 84  
76   - &.top.@{prefix-cls}--active {
  85 + &.up.@{prefix-cls}--active {
77 86 transform: rotate(90deg);
78 87 }
79 88  
80   - &.bottom.@{prefix-cls}--active {
  89 + &.down.@{prefix-cls}--active {
81 90 transform: rotate(-90deg);
82 91 }
83 92 }
... ...
src/components/Basic/src/BasicHelp.vue
  View file @55e9d9f
1 1 <script lang="tsx">
2 2 import type { CSSProperties, PropType } from 'vue';
3 3 import { defineComponent, computed, unref } from 'vue';
4   -
5 4 import { Tooltip } from 'ant-design-vue';
6 5 import { InfoCircleOutlined } from '@ant-design/icons-vue';
7   -
8 6 import { getPopupContainer } from '/@/utils';
9 7 import { isString, isArray } from '/@/utils/is';
10 8 import { getSlot } from '/@/utils/helper/tsxHelper';
11   - import { propTypes } from '/@/utils/propTypes';
12   -
13 9 import { useDesign } from '/@/hooks/web/useDesign';
14 10  
  11 + const props = {
  12 + /**
  13 + * Help text max-width
  14 + * @default: 600px
  15 + */
  16 + maxWidth: { type: String, default: '600px' },
  17 + /**
  18 + * Whether to display the serial number
  19 + * @default: false
  20 + */
  21 + showIndex: { type: Boolean },
  22 + /**
  23 + * Help text font color
  24 + * @default: #ffffff
  25 + */
  26 + color: { type: String, default: '#ffffff' },
  27 + /**
  28 + * Help text font size
  29 + * @default: 14px
  30 + */
  31 + fontSize: { type: String, default: '14px' },
  32 + /**
  33 + * Help text list
  34 + */
  35 + placement: { type: String, default: 'right' },
  36 + /**
  37 + * Help text list
  38 + */
  39 + text: { type: [Array, String] as PropType<string[] | string> },
  40 + };
  41 +
15 42 export default defineComponent({
16 43 name: 'BasicHelp',
17 44 components: { Tooltip },
18   - props: {
19   - // max-width
20   - maxWidth: propTypes.string.def('600px'),
21   - // Whether to display the serial number
22   - showIndex: propTypes.bool,
23   - // color
24   - color: propTypes.string.def('#ffffff'),
25   - fontSize: propTypes.string.def('14px'),
26   - placement: propTypes.string.def('right'),
27   - absolute: propTypes.bool,
28   - // Text list
29   - text: {
30   - type: [Array, String] as PropType<string[] | string>,
31   - },
32   - // ๅฎšไฝ
33   - position: {
34   - type: [Object] as PropType<any>,
35   - default: () => ({
36   - position: 'absolute',
37   - left: 0,
38   - bottom: 0,
39   - }),
40   - },
41   - },
  45 + props,
42 46 setup(props, { slots }) {
43 47 const { prefixCls } = useDesign('basic-help');
44 48  
45   - const getOverlayStyle = computed(
46   - (): CSSProperties => {
47   - return {
48   - maxWidth: props.maxWidth,
49   - };
50   - }
51   - );
52   -
53   - const getWrapStyle = computed(
54   - (): CSSProperties => {
55   - return {
56   - color: props.color,
57   - fontSize: props.fontSize,
58   - };
59   - }
  49 + const getTooltipStyle = computed(
  50 + (): CSSProperties => ({ color: props.color, fontSize: props.fontSize })
60 51 );
61 52  
62   - const getMainStyleRef = computed(() => {
63   - return props.absolute ? props.position : {};
64   - });
  53 + const getOverlayStyle = computed((): CSSProperties => ({ maxWidth: props.maxWidth }));
65 54  
66   - const renderTitle = () => {
67   - const list = props.text;
  55 + function renderTitle() {
  56 + const textList = props.text;
68 57  
69   - if (isString(list)) {
70   - return <p>{list}</p>;
  58 + if (isString(textList)) {
  59 + return <p>{textList}</p>;
71 60 }
72 61  
73   - if (isArray(list)) {
74   - return list.map((item, index) => {
  62 + if (isArray(textList)) {
  63 + return textList.map((text, index) => {
75 64 return (
76   - <p key={item}>
  65 + <p key={text}>
77 66 <>
78 67 {props.showIndex ? `${index + 1}. ` : ''}
79   - {item}
  68 + {text}
80 69 </>
81 70 </p>
82 71 );
83 72 });
84 73 }
85   -
86 74 return null;
87   - };
  75 + }
88 76  
89 77 return () => {
90 78 return (
91 79 <Tooltip
92   - title={<div style={unref(getWrapStyle)}>{renderTitle()}</div>}
93 80 overlayClassName={`${prefixCls}__wrap`}
  81 + title={<div style={unref(getTooltipStyle)}>{renderTitle()}</div>}
94 82 autoAdjustOverflow={true}
95 83 overlayStyle={unref(getOverlayStyle)}
96   - placement={props.placement as 'left'}
  84 + placement={props.placement as 'right'}
97 85 getPopupContainer={() => getPopupContainer()}
98 86 >
99   - <span class={prefixCls} style={unref(getMainStyleRef)}>
100   - {getSlot(slots) || <InfoCircleOutlined />}
101   - </span>
  87 + <span class={prefixCls}>{getSlot(slots) || <InfoCircleOutlined />}</span>
102 88 </Tooltip>
103 89 );
104 90 };
... ...
src/components/Basic/src/BasicTitle.vue
  View file @55e9d9f
1 1 <template>
2 2 <span :class="getClass">
3 3 <slot></slot>
4   - <BasicHelp :class="`${prefixCls}__help`" v-if="helpMessage" :text="helpMessage" />
  4 + <BasicHelp :class="`${prefixCls}-help`" v-if="helpMessage" :text="helpMessage" />
5 5 </span>
6 6 </template>
7 7 <script lang="ts">
8 8 import type { PropType } from 'vue';
9   -
10 9 import { defineComponent, computed } from 'vue';
11 10 import BasicHelp from './BasicHelp.vue';
12   -
13 11 import { useDesign } from '/@/hooks/web/useDesign';
14 12  
15   - import { propTypes } from '/@/utils/propTypes';
  13 + const props = {
  14 + /**
  15 + * Help text list or string
  16 + * @default: ''
  17 + */
  18 + helpMessage: {
  19 + type: [String, Array] as PropType<string | string[]>,
  20 + default: '',
  21 + },
  22 + /**
  23 + * Whether the color block on the left side of the title
  24 + * @default: false
  25 + */
  26 + span: { type: Boolean },
  27 + /**
  28 + * Whether to default the text, that is, not bold
  29 + * @default: false
  30 + */
  31 + normal: { type: Boolean },
  32 + };
16 33  
17 34 export default defineComponent({
18 35 name: 'BasicTitle',
19 36 components: { BasicHelp },
20   - props: {
21   - helpMessage: {
22   - type: [String, Array] as PropType<string | string[]>,
23   - default: '',
24   - },
25   - span: propTypes.bool,
26   - normal: propTypes.bool.def(false),
27   - },
  37 + props,
28 38 setup(props, { slots }) {
29 39 const { prefixCls } = useDesign('basic-title');
30 40  
... ... @@ -33,6 +43,7 @@
33 43 { [`${prefixCls}-show-span`]: props.span && slots.default },
34 44 { [`${prefixCls}-normal`]: props.normal },
35 45 ]);
  46 +
36 47 return { prefixCls, getClass };
37 48 },
38 49 });
... ... @@ -67,7 +78,7 @@
67 78 content: '';
68 79 }
69 80  
70   - &__help {
  81 + &-help {
71 82 margin-left: 10px;
72 83 }
73 84 }
... ...
src/components/Button/index.ts
  View file @55e9d9f
1   -import Button from './src/BasicButton.vue';
2   -import PopConfirmButton from './src/PopConfirmButton.vue';
  1 +import { withInstall } from '/@/utils';
  2 +import button from './src/BasicButton.vue';
  3 +import popConfirmButton from './src/PopConfirmButton.vue';
3 4  
4   -export { Button, PopConfirmButton };
  5 +export const Button = withInstall(button);
  6 +export const PopConfirmButton = withInstall(popConfirmButton);
... ...
src/components/Button/src/BasicButton.vue
  View file @55e9d9f
... ... @@ -13,11 +13,21 @@
13 13 import { Icon } from '/@/components/Icon';
14 14  
15 15 const props = {
16   - color: { type: String, validate: (v) => ['error', 'warning', 'success', ''].includes(v) },
  16 + color: { type: String, validator: (v) => ['error', 'warning', 'success', ''].includes(v) },
17 17 loading: { type: Boolean },
18 18 disabled: { type: Boolean },
  19 + /**
  20 + * Text before icon.
  21 + */
19 22 preIcon: { type: String },
  23 + /**
  24 + * Text after icon.
  25 + */
20 26 postIcon: { type: String },
  27 + /**
  28 + * preIcon and postIcon icon size.
  29 + * @default: 14
  30 + */
21 31 iconSize: { type: Number, default: 14 },
22 32 onClick: { type: Function as PropType<(...args) => any>, default: null },
23 33 };
... ...
src/components/Button/src/PopConfirmButton.vue
  View file @55e9d9f
1 1 <script lang="ts">
2 2 import { defineComponent, h, unref, computed } from 'vue';
3   - import { Popconfirm } from 'ant-design-vue';
4 3 import BasicButton from './BasicButton.vue';
  4 + import { Popconfirm } from 'ant-design-vue';
5 5 import { extendSlots } from '/@/utils/helper/tsxHelper';
6 6 import { omit } from 'lodash-es';
7 7 import { useAttrs } from '/@/hooks/core/useAttrs';
... ...
src/components/ClickOutSide/index.ts
  View file @55e9d9f
1   -import ClickOutSide from './src/ClickOutSide.vue';
  1 +import { withInstall } from '/@/utils';
  2 +import clickOutSide from './src/ClickOutSide.vue';
2 3  
3   -export { ClickOutSide };
  4 +export const ClickOutSide = withInstall(clickOutSide);
... ...
src/components/CodeEditor/index.ts
  View file @55e9d9f
1   -import { install } from '/@/utils/install';
  1 +import { withInstall } from '/@/utils';
2 2 import codeEditor from './src/CodeEditor.vue';
3 3 import jsonPreview from './src/json-preview/JsonPreview.vue';
4 4  
5   -export const CodeEditor = install(codeEditor);
6   -export const JsonPreview = install(jsonPreview);
  5 +export const CodeEditor = withInstall(codeEditor);
  6 +export const JsonPreview = withInstall(jsonPreview);
... ...
src/components/CodeEditor/src/CodeEditor.vue
  View file @55e9d9f
1 1 <template>
2 2 <div class="h-full">
3   - <CodeMirrorEditor :value="getValue" @change="handleValueChange" :mode="mode" :readonly="readonly" />
  3 + <CodeMirrorEditor
  4 + :value="getValue"
  5 + @change="handleValueChange"
  6 + :mode="mode"
  7 + :readonly="readonly"
  8 + />
4 9 </div>
5 10 </template>
6 11 <script lang="ts">
... ... @@ -13,43 +18,34 @@
13 18 html: 'htmlmixed',
14 19 js: 'javascript',
15 20 };
  21 +
  22 + const props = {
  23 + value: { type: [Object, String] as PropType<Record<string, any> | string> },
  24 + mode: { type: String, default: MODE.JSON },
  25 + readonly: { type: Boolean },
  26 + };
  27 +
16 28 export default defineComponent({
17 29 name: 'CodeEditor',
18 30 components: { CodeMirrorEditor },
19   - props: {
20   - value: {
21   - type: [Object, String],
22   - },
23   - mode: {
24   - type: String,
25   - default: MODE.JSON,
26   - },
27   - readonly: {
28   - type: Boolean,
29   - default: false,
30   - },
31   - },
  31 + props,
32 32 emits: ['change'],
33 33 setup(props, { emit }) {
34 34 const getValue = computed(() => {
35 35 const { value, mode } = props;
36   -
37   - if (mode === MODE.JSON) {
38   - return isString(value)
39   - ? JSON.stringify(JSON.parse(value), null, 2)
40   - : JSON.stringify(value, null, 2);
  36 + if (mode !== MODE.JSON) {
  37 + return value as string;
41 38 }
42   - return value;
  39 + return isString(value)
  40 + ? JSON.stringify(JSON.parse(value), null, 2)
  41 + : JSON.stringify(value, null, 2);
43 42 });
44 43  
45 44 function handleValueChange(v) {
46 45 emit('change', v);
47 46 }
48 47  
49   - return {
50   - handleValueChange,
51   - getValue,
52   - };
  48 + return { handleValueChange, getValue };
53 49 },
54 50 });
55 51 </script>
... ...
src/components/CodeEditor/src/codemirror/CodeMirror.vue
  View file @55e9d9f
... ... @@ -15,31 +15,25 @@
15 15 } from 'vue';
16 16 import { useDebounceFn } from '@vueuse/core';
17 17 import { useAppStore } from '/@/store/modules/app';
18   -
  18 + import { useWindowSizeFn } from '/@/hooks/event/useWindowSizeFn';
19 19 import CodeMirror from 'codemirror';
  20 + // css
20 21 import './codemirror.css';
21 22 import 'codemirror/theme/idea.css';
22 23 import 'codemirror/theme/material-palenight.css';
23   -
24 24 // modes
25 25 import 'codemirror/mode/javascript/javascript';
26 26 import 'codemirror/mode/css/css';
27 27 import 'codemirror/mode/htmlmixed/htmlmixed';
  28 +
  29 + const props = {
  30 + mode: { type: String, default: 'application/json' },
  31 + value: { type: String, default: '' },
  32 + readonly: { type: Boolean, default: false },
  33 + };
  34 +
28 35 export default defineComponent({
29   - props: {
30   - mode: {
31   - type: String,
32   - default: 'application/json',
33   - },
34   - value: {
35   - type: String,
36   - default: '',
37   - },
38   - readonly: {
39   - type: Boolean,
40   - default: false,
41   - },
42   - },
  36 + props,
43 37 emits: ['change'],
44 38 setup(props, { emit }) {
45 39 const el = ref();
... ... @@ -50,11 +44,11 @@
50 44  
51 45 watch(
52 46 () => props.value,
53   - async (v) => {
  47 + async (value) => {
54 48 await nextTick();
55 49 const oldValue = editor?.getValue();
56   - if (v !== oldValue) {
57   - editor?.setValue(v ? v : '');
  50 + if (value !== oldValue) {
  51 + editor?.setValue(value ? value : '');
58 52 }
59 53 },
60 54 { flush: 'post' }
... ... @@ -113,13 +107,13 @@
113 107 onMounted(async () => {
114 108 await nextTick();
115 109 init();
116   - window.addEventListener('resize', debounceRefresh);
  110 + useWindowSizeFn(debounceRefresh);
117 111 });
118 112  
119 113 onUnmounted(() => {
120   - window.removeEventListener('resize', debounceRefresh);
121 114 editor = null;
122 115 });
  116 +
123 117 return { el };
124 118 },
125 119 });
... ...
src/components/CodeEditor/src/codemirror/codemirror.css
  View file @55e9d9f
... ... @@ -12,20 +12,21 @@
12 12 --qualifier: #ff6032;
13 13 --important: var(--string);
14 14  
  15 + position: relative;
15 16 height: auto;
16 17 height: 100%;
  18 + overflow: hidden;
17 19 font-family: var(--font-code);
  20 + background: white;
18 21 direction: ltr;
19 22 }
20 23  
21 24 /* PADDING */
22 25  
23 26 .CodeMirror-lines {
  27 + min-height: 1px; /* prevents collapsing before first draw */
24 28 padding: 4px 0; /* Vertical padding around content */
25   -}
26   -
27   -.CodeMirror pre {
28   - padding: 0 4px; /* Horizontal padding of content */
  29 + cursor: text;
29 30 }
30 31  
31 32 .CodeMirror-scrollbar-filler,
... ... @@ -36,6 +37,11 @@
36 37 /* GUTTER */
37 38  
38 39 .CodeMirror-gutters {
  40 + position: absolute;
  41 + top: 0;
  42 + left: 0;
  43 + z-index: 3;
  44 + min-height: 100%;
39 45 white-space: nowrap;
40 46 background-color: transparent;
41 47 border-right: 1px solid #ddd;
... ... @@ -96,7 +102,9 @@
96 102 /* CURSOR */
97 103  
98 104 .CodeMirror-cursor {
  105 + position: absolute;
99 106 width: 0;
  107 + pointer-events: none;
100 108 border-right: none;
101 109 border-left: 1px solid black;
102 110 }
... ... @@ -132,37 +140,19 @@
132 140 animation: blink 1.06s steps(1) infinite;
133 141 }
134 142 @-moz-keyframes blink {
135   - 0% {
136   - }
137   -
138 143 50% {
139 144 background-color: transparent;
140 145 }
141   -
142   - 100% {
143   - }
144 146 }
145 147 @-webkit-keyframes blink {
146   - 0% {
147   - }
148   -
149 148 50% {
150 149 background-color: transparent;
151 150 }
152   -
153   - 100% {
154   - }
155 151 }
156 152 @keyframes blink {
157   - 0% {
158   - }
159   -
160 153 50% {
161 154 background-color: transparent;
162 155 }
163   -
164   - 100% {
165   - }
166 156 }
167 157  
168 158 .cm-tab {
... ... @@ -316,12 +306,6 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
316 306 /* The rest of this file contains styles related to the mechanics of
317 307 the editor. You probably shouldn't touch them. */
318 308  
319   -.CodeMirror {
320   - position: relative;
321   - overflow: hidden;
322   - background: white;
323   -}
324   -
325 309 .CodeMirror-scroll {
326 310 position: relative;
327 311 height: 100%;
... ... @@ -378,14 +362,6 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
378 362 left: 0;
379 363 }
380 364  
381   -.CodeMirror-gutters {
382   - position: absolute;
383   - top: 0;
384   - left: 0;
385   - z-index: 3;
386   - min-height: 100%;
387   -}
388   -
389 365 .CodeMirror-gutter {
390 366 display: inline-block;
391 367 height: 100%;
... ... @@ -422,14 +398,10 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
422 398 background-color: transparent;
423 399 }
424 400  
425   -.CodeMirror-lines {
426   - min-height: 1px; /* prevents collapsing before first draw */
427   - cursor: text;
428   -}
429   -
430 401 .CodeMirror pre {
431 402 position: relative;
432 403 z-index: 2;
  404 + padding: 0 4px; /* Horizontal padding of content */
433 405 margin: 0;
434 406 overflow: visible;
435 407 font-family: inherit;
... ... @@ -497,11 +469,6 @@ div.CodeMirror span.CodeMirror-nonmatchingbracket {
497 469 visibility: hidden;
498 470 }
499 471  
500   -.CodeMirror-cursor {
501   - position: absolute;
502   - pointer-events: none;
503   -}
504   -
505 472 .CodeMirror-measure pre {
506 473 position: static;
507 474 }
... ...
src/components/CodeEditor/src/json-preview/JsonPreview.vue
  View file @55e9d9f
... ... @@ -8,11 +8,7 @@
8 8 import { defineComponent } from 'vue';
9 9 export default defineComponent({
10 10 name: 'JsonPreview',
11   - components: {
12   - VueJsonPretty,
13   - },
14   - props: {
15   - data: Object,
16   - },
  11 + components: { VueJsonPretty },
  12 + props: { data: Object },
17 13 });
18 14 </script>
... ...
src/components/Container/index.ts
  View file @55e9d9f
1   -import CollapseContainer from './src/collapse/CollapseContainer.vue';
2   -import ScrollContainer from './src/ScrollContainer.vue';
3   -import LazyContainer from './src/LazyContainer.vue';
  1 +import { withInstall } from '/@/utils';
  2 +import collapseContainer from './src/collapse/CollapseContainer.vue';
  3 +import scrollContainer from './src/ScrollContainer.vue';
  4 +import lazyContainer from './src/LazyContainer.vue';
4 5  
5   -export { CollapseContainer, ScrollContainer, LazyContainer };
6   -export * from './src/types';
  6 +export const CollapseContainer = withInstall(collapseContainer);
  7 +export const ScrollContainer = withInstall(scrollContainer);
  8 +export const LazyContainer = withInstall(lazyContainer);
  9 +
  10 +export * from './src/typing';
... ...
src/components/Container/src/LazyContainer.vue
  View file @55e9d9f
... ... @@ -18,13 +18,10 @@
18 18 </template>
19 19 <script lang="ts">
20 20 import type { PropType } from 'vue';
21   -
22 21 import { defineComponent, reactive, onMounted, ref, toRef, toRefs } from 'vue';
23   -
24 22 import { Skeleton } from 'ant-design-vue';
25 23 import { useTimeoutFn } from '/@/hooks/core/useTimeout';
26 24 import { useIntersectionObserver } from '/@/hooks/event/useIntersectionObserver';
27   - import { propTypes } from '/@/utils/propTypes';
28 25  
29 26 interface State {
30 27 isInit: boolean;
... ... @@ -32,36 +29,47 @@
32 29 intersectionObserverInstance: IntersectionObserver | null;
33 30 }
34 31  
  32 + const props = {
  33 + /**
  34 + * Waiting time, if the time is specified, whether visible or not, it will be automatically loaded after the specified time
  35 + */
  36 + timeout: { type: Number },
  37 + /**
  38 + * The viewport where the component is located.
  39 + * If the component is scrolling in the page container, the viewport is the container
  40 + */
  41 + viewport: {
  42 + type: (typeof window !== 'undefined' ? window.HTMLElement : Object) as PropType<HTMLElement>,
  43 + default: () => null,
  44 + },
  45 + /**
  46 + * Preload threshold, css unit
  47 + */
  48 + threshold: { type: String, default: '0px' },
  49 + /**
  50 + * The scroll direction of the viewport, vertical represents the vertical direction, horizontal represents the horizontal direction
  51 + */
  52 + direction: {
  53 + type: String,
  54 + default: 'vertical',
  55 + validator: (v) => ['vertical', 'horizontal'].includes(v),
  56 + },
  57 + /**
  58 + * The label name of the outer container that wraps the component
  59 + */
  60 + tag: { type: String, default: 'div' },
  61 + maxWaitingTime: { type: Number, default: 80 },
  62 + /**
  63 + * transition name
  64 + */
  65 + transitionName: { type: String, default: 'lazy-container' },
  66 + };
  67 +
35 68 export default defineComponent({
36 69 name: 'LazyContainer',
37 70 components: { Skeleton },
38 71 inheritAttrs: false,
39   - props: {
40   - // Waiting time, if the time is specified, whether visible or not, it will be automatically loaded after the specified time
41   - timeout: propTypes.number,
42   -
43   - // The viewport where the component is located. If the component is scrolling in the page container, the viewport is the container
44   - viewport: {
45   - type: (typeof window !== 'undefined'
46   - ? window.HTMLElement
47   - : Object) as PropType<HTMLElement>,
48   - default: () => null,
49   - },
50   -
51   - // Preload threshold, css unit
52   - threshold: propTypes.string.def('0px'),
53   -
54   - // The scroll direction of the viewport, vertical represents the vertical direction, horizontal represents the horizontal direction
55   - direction: propTypes.oneOf(['vertical', 'horizontal']).def('vertical'),
56   -
57   - // The label name of the outer container that wraps the component
58   - tag: propTypes.string.def('div'),
59   -
60   - maxWaitingTime: propTypes.number.def(80),
61   -
62   - // transition name
63   - transitionName: propTypes.string.def('lazy-container'),
64   - },
  72 + props,
65 73 emits: ['init'],
66 74 setup(props, { emit }) {
67 75 const elRef = ref();
... ...
src/components/Container/src/ScrollContainer.vue
  View file @55e9d9f
... ... @@ -7,7 +7,6 @@
7 7 <script lang="ts">
8 8 import { defineComponent, ref, unref, nextTick } from 'vue';
9 9 import { Scrollbar, ScrollbarType } from '/@/components/Scrollbar';
10   -
11 10 import { useScrollTo } from '/@/hooks/event/useScrollTo';
12 11  
13 12 export default defineComponent({
... ... @@ -16,12 +15,14 @@
16 15 setup() {
17 16 const scrollbarRef = ref<Nullable<ScrollbarType>>(null);
18 17  
  18 + /**
  19 + * Scroll to the specified position
  20 + */
19 21 function scrollTo(to: number, duration = 500) {
20 22 const scrollbar = unref(scrollbarRef);
21 23 if (!scrollbar) {
22 24 return;
23 25 }
24   -
25 26 nextTick(() => {
26 27 const wrap = unref(scrollbar.wrap);
27 28 if (!wrap) {
... ... @@ -44,12 +45,14 @@
44 45 return scrollbar.wrap;
45 46 }
46 47  
  48 + /**
  49 + * Scroll to the bottom
  50 + */
47 51 function scrollBottom() {
48 52 const scrollbar = unref(scrollbarRef);
49 53 if (!scrollbar) {
50 54 return;
51 55 }
52   -
53 56 nextTick(() => {
54 57 const wrap = unref(scrollbar.wrap);
55 58 if (!wrap) {
... ...
src/components/Container/src/collapse/CollapseContainer.vue
  View file @55e9d9f
1 1 <template>
2 2 <div :class="prefixCls">
3   - <CollapseHeader
4   - v-bind="getBindValues"
5   - :prefixCls="prefixCls"
6   - :show="show"
7   - @expand="handleExpand"
8   - >
  3 + <CollapseHeader v-bind="$props" :prefixCls="prefixCls" :show="show" @expand="handleExpand">
9 4 <template #title>
10 5 <slot name="title"></slot>
11 6 </template>
... ... @@ -16,13 +11,12 @@
16 11  
17 12 <div class="p-2">
18 13 <CollapseTransition :enable="canExpan">
19   - <Skeleton v-if="loading" :active="active" />
  14 + <Skeleton v-if="loading" :active="loading" />
20 15 <div :class="`${prefixCls}__body`" v-else v-show="show">
21 16 <slot></slot>
22 17 </div>
23 18 </CollapseTransition>
24 19 </div>
25   -
26 20 <div :class="`${prefixCls}__footer`" v-if="$slots.footer">
27 21 <slot name="footer"></slot>
28 22 </div>
... ... @@ -30,20 +24,41 @@
30 24 </template>
31 25 <script lang="ts">
32 26 import type { PropType } from 'vue';
33   -
34   - import { defineComponent, ref, computed } from 'vue';
35   -
  27 + import { defineComponent, ref } from 'vue';
36 28 // component
37 29 import { Skeleton } from 'ant-design-vue';
38 30 import { CollapseTransition } from '/@/components/Transition';
39 31 import CollapseHeader from './CollapseHeader.vue';
40   -
41 32 import { triggerWindowResize } from '/@/utils/event';
42 33 // hook
43 34 import { useTimeoutFn } from '/@/hooks/core/useTimeout';
44   - import { propTypes } from '/@/utils/propTypes';
45 35 import { useDesign } from '/@/hooks/web/useDesign';
46 36  
  37 + const props = {
  38 + title: { type: String, default: '' },
  39 + loading: { type: Boolean },
  40 + /**
  41 + * Can it be expanded
  42 + */
  43 + canExpan: { type: Boolean, default: true },
  44 + /**
  45 + * Warm reminder on the right side of the title
  46 + */
  47 + helpMessage: {
  48 + type: [Array, String] as PropType<string[] | string>,
  49 + default: '',
  50 + },
  51 + /**
  52 + * Whether to trigger window.resize when expanding and contracting,
  53 + * Can adapt to tables and forms, when the form shrinks, the form triggers resize to adapt to the height
  54 + */
  55 + triggerWindowResize: { type: Boolean },
  56 + /**
  57 + * Delayed loading time
  58 + */
  59 + lazyTime: { type: Number, default: 0 },
  60 + };
  61 +
47 62 export default defineComponent({
48 63 name: 'CollapseContainer',
49 64 components: {
... ... @@ -51,23 +66,7 @@
51 66 CollapseHeader,
52 67 CollapseTransition,
53 68 },
54   - props: {
55   - title: propTypes.string.def(''),
56   - // Can it be expanded
57   - canExpan: propTypes.bool.def(true),
58   - // Warm reminder on the right side of the title
59   - helpMessage: {
60   - type: [Array, String] as PropType<string[] | string>,
61   - default: '',
62   - },
63   - // Whether to trigger window.resize when expanding and contracting,
64   - // Can adapt to tables and forms, when the form shrinks, the form triggers resize to adapt to the height
65   - triggerWindowResize: propTypes.bool,
66   - loading: propTypes.bool.def(false),
67   - active: propTypes.bool.def(true),
68   - // Delayed loading time
69   - lazyTime: propTypes.number.def(0),
70   - },
  69 + props,
71 70 setup(props) {
72 71 const show = ref(true);
73 72  
... ... @@ -84,15 +83,10 @@
84 83 }
85 84 }
86 85  
87   - const getBindValues = computed((): any => {
88   - return props;
89   - });
90   -
91 86 return {
92 87 show,
93 88 handleExpand,
94 89 prefixCls,
95   - getBindValues,
96 90 };
97 91 },
98 92 });
... ...
src/components/Container/src/collapse/CollapseHeader.vue
  View file @55e9d9f
... ... @@ -8,28 +8,31 @@
8 8 <slot name="title"></slot>
9 9 </template>
10 10 </BasicTitle>
11   -
12 11 <div :class="`${prefixCls}__action`">
13 12 <slot name="action"></slot>
14   - <BasicArrow v-if="canExpan" top :expand="show" @click="$emit('expand')" />
  13 + <BasicArrow v-if="canExpan" up :expand="show" @click="$emit('expand')" />
15 14 </div>
16 15 </div>
17 16 </template>
18 17 <script lang="ts">
19 18 import { defineComponent } from 'vue';
20 19 import { BasicArrow, BasicTitle } from '/@/components/Basic';
21   - import { propTypes } from '/@/utils/propTypes';
  20 +
  21 + const props = {
  22 + prefixCls: { type: String },
  23 + helpMessage: {
  24 + type: [Array, String] as PropType<string[] | string>,
  25 + default: '',
  26 + },
  27 + title: { type: String },
  28 + show: { type: Boolean },
  29 + canExpan: { type: Boolean },
  30 + };
22 31  
23 32 export default defineComponent({
24 33 components: { BasicArrow, BasicTitle },
25 34 inheritAttrs: false,
26   - props: {
27   - prefixCls: propTypes.string,
28   - helpMessage: propTypes.string,
29   - title: propTypes.string,
30   - show: propTypes.bool,
31   - canExpan: propTypes.bool,
32   - },
  35 + props,
33 36 emits: ['expand'],
34 37 });
35 38 </script>
... ...
src/components/Container/src/types.ts renamed to src/components/Container/src/typing.ts
  View file @55e9d9f
src/components/FlowChart/index.ts
  View file @55e9d9f
1   -import { install } from '/@/utils/install';
  1 +import { withInstall } from '/@/utils';
2 2 import flowChart from './src/FlowChart.vue';
3 3  
4   -export const FlowChart = install(flowChart);
  4 +export const FlowChart = withInstall(flowChart);
... ...
src/components/Form/src/components/FormAction.vue
  View file @55e9d9f
... ... @@ -31,7 +31,7 @@
31 31 v-if="showAdvancedButton && !hideAdvanceBtn"
32 32 >
33 33 {{ isAdvanced ? t('component.form.putAway') : t('component.form.unfold') }}
34   - <BasicArrow class="ml-1" :expand="!isAdvanced" top />
  34 + <BasicArrow class="ml-1" :expand="!isAdvanced" up />
35 35 </Button>
36 36 <slot name="advanceAfter"></slot>
37 37 </FormItem>
... ... @@ -99,16 +99,14 @@
99 99 return actionColOpt;
100 100 });
101 101  
102   - const getResetBtnOptions = computed(
103   - (): ButtonOptions => {
104   - return Object.assign(
105   - {
106   - text: t('common.resetText'),
107   - },
108   - props.resetButtonOptions
109   - );
110   - }
111   - );
  102 + const getResetBtnOptions = computed((): ButtonOptions => {
  103 + return Object.assign(
  104 + {
  105 + text: t('common.resetText'),
  106 + },
  107 + props.resetButtonOptions
  108 + );
  109 + });
112 110  
113 111 const getSubmitBtnOptions = computed(() => {
114 112 return Object.assign(
... ...
src/utils/index.ts
  View file @55e9d9f
1 1 import type { RouteLocationNormalized, RouteRecordNormalized } from 'vue-router';
  2 +import type { App, Plugin } from 'vue';
  3 +
2 4 import { unref } from 'vue';
3 5 import { isObject } from '/@/utils/is';
4 6  
... ... @@ -76,3 +78,14 @@ export function getRawRoute(route: RouteLocationNormalized): RouteLocationNormal
76 78 : undefined) as RouteRecordNormalized[],
77 79 };
78 80 }
  81 +
  82 +export const withInstall = <T>(component: T, alias?: string) => {
  83 + const comp = component as any;
  84 + comp.install = (app: App) => {
  85 + app.component(comp.name || comp.displayName, component);
  86 + if (alias) {
  87 + app.config.globalProperties[alias] = component;
  88 + }
  89 + };
  90 + return component as T & Plugin;
  91 +};
... ...
src/utils/install.ts deleted 100644 โ†’ 0
  View file @84d9300
1   -import { App, Plugin } from 'vue';
2   -
3   -export const install = <T>(component: T, alias?: string) => {
4   - const C = component as any;
5   - C.install = (app: App) => {
6   - app.component(C.name, component);
7   - if (alias) {
8   - app.config.globalProperties[alias] = component;
9   - }
10   - };
11   - return component as T & Plugin;
12   -};
src/views/sys/login/Login.vue
  View file @55e9d9f
... ... @@ -35,8 +35,7 @@
35 35 class="
36 36 my-auto
37 37 mx-auto
38   - xl:ml-20
39   - xl:bg-transparent
  38 + xl:ml-20 xl:bg-transparent
40 39 px-5
41 40 py-8
42 41 sm:px-8
... ...
types/module.d.ts
  View file @55e9d9f
1 1 declare module '*.vue' {
2   - import { defineComponent } from 'vue';
3   - const Component: ReturnType<typeof defineComponent>;
  2 + import { DefineComponent } from 'vue';
  3 + const Component: DefineComponent<{}, {}, any>;
4 4 export default Component;
5 5 }
6 6  
... ...
yarn.lock
  View file @55e9d9f
... ... @@ -1191,10 +1191,10 @@
1191 1191 dependencies:
1192 1192 cross-fetch "^3.0.6"
1193 1193  
1194   -"@iconify/json@^1.1.353":
1195   - version "1.1.353"
1196   - resolved "https://registry.npmjs.org/@iconify/json/-/json-1.1.353.tgz#f9fb632da9b13cd79bcbea09b289610c46b87426"
1197   - integrity sha512-gN+DccJUhO6iB7gBPbZXodDaaxZpZTLORixrXaXNmkSW7N/jqfzMCCogoeRWOydZzSgR7VESc2tMI4llEonkjg==
  1194 +"@iconify/json@^1.1.354":
  1195 + version "1.1.354"
  1196 + resolved "https://registry.npmjs.org/@iconify/json/-/json-1.1.354.tgz#a2024ba18a48931e46121413ea743cddd3638fa6"
  1197 + integrity sha512-zFW5iV4FQmu/Mhn5fUNDtESLJFuQ8Mr9B0vBM2DmKbWJmTuMoF3sfV1w3tXMCvKFAXSTUcBTdXeEYP2rWnA8jA==
1198 1198  
1199 1199 "@intlify/core-base@9.1.6":
1200 1200 version "9.1.6"
... ... @@ -1688,10 +1688,10 @@
1688 1688 resolved "https://registry.yarnpkg.com/@types/node/-/node-14.17.1.tgz#5e07e0cb2ff793aa7a1b41deae76221e6166049f"
1689 1689 integrity sha512-/tpUyFD7meeooTRwl3sYlihx2BrJE7q9XF71EguPFIySj9B7qgnRtHsHTho+0AUm4m1SvWGm6uSncrR94q6Vtw==
1690 1690  
1691   -"@types/node@^15.12.1":
1692   - version "15.12.1"
1693   - resolved "https://registry.npmjs.org/@types/node/-/node-15.12.1.tgz#9b60797dee1895383a725f828a869c86c6caa5c2"
1694   - integrity sha512-zyxJM8I1c9q5sRMtVF+zdd13Jt6RU4r4qfhTd7lQubyThvLfx6yYekWSQjGCGV2Tkecgxnlpl/DNlb6Hg+dmEw==
  1691 +"@types/node@^15.12.2":
  1692 + version "15.12.2"
  1693 + resolved "https://registry.npmjs.org/@types/node/-/node-15.12.2.tgz#1f2b42c4be7156ff4a6f914b2fb03d05fa84e38d"
  1694 + integrity sha512-zjQ69G564OCIWIOHSXyQEEDpdpGl+G348RAKY0XXy9Z5kU9Vzv1GMNnkar/ZJ8dzXB3COzD9Mo9NtRZ4xfgUww==
1695 1695  
1696 1696 "@types/normalize-package-data@^2.4.0":
1697 1697 version "2.4.0"
... ... @@ -1787,13 +1787,13 @@
1787 1787 "@types/unist" "*"
1788 1788 "@types/vfile-message" "*"
1789 1789  
1790   -"@typescript-eslint/eslint-plugin@^4.26.0":
1791   - version "4.26.0"
1792   - resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.26.0.tgz#12bbd6ebd5e7fabd32e48e1e60efa1f3554a3242"
1793   - integrity sha512-yA7IWp+5Qqf+TLbd8b35ySFOFzUfL7i+4If50EqvjT6w35X8Lv0eBHb6rATeWmucks37w+zV+tWnOXI9JlG6Eg==
  1790 +"@typescript-eslint/eslint-plugin@^4.26.1":
  1791 + version "4.26.1"
  1792 + resolved "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.26.1.tgz#b9c7313321cb837e2bf8bebe7acc2220659e67d3"
  1793 + integrity sha512-aoIusj/8CR+xDWmZxARivZjbMBQTT9dImUtdZ8tVCVRXgBUuuZyM5Of5A9D9arQPxbi/0rlJLcuArclz/rCMJw==
1794 1794 dependencies:
1795   - "@typescript-eslint/experimental-utils" "4.26.0"
1796   - "@typescript-eslint/scope-manager" "4.26.0"
  1795 + "@typescript-eslint/experimental-utils" "4.26.1"
  1796 + "@typescript-eslint/scope-manager" "4.26.1"
1797 1797 debug "^4.3.1"
1798 1798 functional-red-black-tree "^1.0.1"
1799 1799 lodash "^4.17.21"
... ... @@ -1801,60 +1801,60 @@
1801 1801 semver "^7.3.5"
1802 1802 tsutils "^3.21.0"
1803 1803  
1804   -"@typescript-eslint/experimental-utils@4.26.0":
1805   - version "4.26.0"
1806   - resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-4.26.0.tgz#ba7848b3f088659cdf71bce22454795fc55be99a"
1807   - integrity sha512-TH2FO2rdDm7AWfAVRB5RSlbUhWxGVuxPNzGT7W65zVfl8H/WeXTk1e69IrcEVsBslrQSTDKQSaJD89hwKrhdkw==
  1804 +"@typescript-eslint/experimental-utils@4.26.1":
  1805 + version "4.26.1"
  1806 + resolved "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-4.26.1.tgz#a35980a2390da9232aa206b27f620eab66e94142"
  1807 + integrity sha512-sQHBugRhrXzRCs9PaGg6rowie4i8s/iD/DpTB+EXte8OMDfdCG5TvO73XlO9Wc/zi0uyN4qOmX9hIjQEyhnbmQ==
1808 1808 dependencies:
1809 1809 "@types/json-schema" "^7.0.7"
1810   - "@typescript-eslint/scope-manager" "4.26.0"
1811   - "@typescript-eslint/types" "4.26.0"
1812   - "@typescript-eslint/typescript-estree" "4.26.0"
  1810 + "@typescript-eslint/scope-manager" "4.26.1"
  1811 + "@typescript-eslint/types" "4.26.1"
  1812 + "@typescript-eslint/typescript-estree" "4.26.1"
1813 1813 eslint-scope "^5.1.1"
1814 1814 eslint-utils "^3.0.0"
1815 1815  
1816   -"@typescript-eslint/parser@^4.26.0":
1817   - version "4.26.0"
1818   - resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-4.26.0.tgz#31b6b732c9454f757b020dab9b6754112aa5eeaf"
1819   - integrity sha512-b4jekVJG9FfmjUfmM4VoOItQhPlnt6MPOBUL0AQbiTmm+SSpSdhHYlwayOm4IW9KLI/4/cRKtQCmDl1oE2OlPg==
  1816 +"@typescript-eslint/parser@^4.26.1":
  1817 + version "4.26.1"
  1818 + resolved "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-4.26.1.tgz#cecfdd5eb7a5c13aabce1c1cfd7fbafb5a0f1e8e"
  1819 + integrity sha512-q7F3zSo/nU6YJpPJvQveVlIIzx9/wu75lr6oDbDzoeIRWxpoc/HQ43G4rmMoCc5my/3uSj2VEpg/D83LYZF5HQ==
1820 1820 dependencies:
1821   - "@typescript-eslint/scope-manager" "4.26.0"
1822   - "@typescript-eslint/types" "4.26.0"
1823   - "@typescript-eslint/typescript-estree" "4.26.0"
  1821 + "@typescript-eslint/scope-manager" "4.26.1"
  1822 + "@typescript-eslint/types" "4.26.1"
  1823 + "@typescript-eslint/typescript-estree" "4.26.1"
1824 1824 debug "^4.3.1"
1825 1825  
1826   -"@typescript-eslint/scope-manager@4.26.0":
1827   - version "4.26.0"
1828   - resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.26.0.tgz#60d1a71df162404e954b9d1c6343ff3bee496194"
1829   - integrity sha512-G6xB6mMo4xVxwMt5lEsNTz3x4qGDt0NSGmTBNBPJxNsrTXJSm21c6raeYroS2OwQsOyIXqKZv266L/Gln1BWqg==
  1826 +"@typescript-eslint/scope-manager@4.26.1":
  1827 + version "4.26.1"
  1828 + resolved "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.26.1.tgz#075a74a15ff33ee3a7ed33e5fce16ee86689f662"
  1829 + integrity sha512-TW1X2p62FQ8Rlne+WEShyd7ac2LA6o27S9i131W4NwDSfyeVlQWhw8ylldNNS8JG6oJB9Ha9Xyc+IUcqipvheQ==
1830 1830 dependencies:
1831   - "@typescript-eslint/types" "4.26.0"
1832   - "@typescript-eslint/visitor-keys" "4.26.0"
  1831 + "@typescript-eslint/types" "4.26.1"
  1832 + "@typescript-eslint/visitor-keys" "4.26.1"
1833 1833  
1834   -"@typescript-eslint/types@4.26.0":
1835   - version "4.26.0"
1836   - resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.26.0.tgz#7c6732c0414f0a69595f4f846ebe12616243d546"
1837   - integrity sha512-rADNgXl1kS/EKnDr3G+m7fB9yeJNnR9kF7xMiXL6mSIWpr3Wg5MhxyfEXy/IlYthsqwBqHOr22boFbf/u6O88A==
  1834 +"@typescript-eslint/types@4.26.1":
  1835 + version "4.26.1"
  1836 + resolved "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.26.1.tgz#9e7c523f73c34b04a765e4167ca5650436ef1d38"
  1837 + integrity sha512-STyMPxR3cS+LaNvS8yK15rb8Y0iL0tFXq0uyl6gY45glyI7w0CsyqyEXl/Fa0JlQy+pVANeK3sbwPneCbWE7yg==
1838 1838  
1839   -"@typescript-eslint/typescript-estree@4.26.0":
1840   - version "4.26.0"
1841   - resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.26.0.tgz#aea17a40e62dc31c63d5b1bbe9a75783f2ce7109"
1842   - integrity sha512-GHUgahPcm9GfBuy3TzdsizCcPjKOAauG9xkz9TR8kOdssz2Iz9jRCSQm6+aVFa23d5NcSpo1GdHGSQKe0tlcbg==
  1839 +"@typescript-eslint/typescript-estree@4.26.1":
  1840 + version "4.26.1"
  1841 + resolved "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-4.26.1.tgz#b2ce2e789233d62283fae2c16baabd4f1dbc9633"
  1842 + integrity sha512-l3ZXob+h0NQzz80lBGaykdScYaiEbFqznEs99uwzm8fPHhDjwaBFfQkjUC/slw6Sm7npFL8qrGEAMxcfBsBJUg==
1843 1843 dependencies:
1844   - "@typescript-eslint/types" "4.26.0"
1845   - "@typescript-eslint/visitor-keys" "4.26.0"
  1844 + "@typescript-eslint/types" "4.26.1"
  1845 + "@typescript-eslint/visitor-keys" "4.26.1"
1846 1846 debug "^4.3.1"
1847 1847 globby "^11.0.3"
1848 1848 is-glob "^4.0.1"
1849 1849 semver "^7.3.5"
1850 1850 tsutils "^3.21.0"
1851 1851  
1852   -"@typescript-eslint/visitor-keys@4.26.0":
1853   - version "4.26.0"
1854   - resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.26.0.tgz#26d2583169222815be4dcd1da4fe5459bc3bcc23"
1855   - integrity sha512-cw4j8lH38V1ycGBbF+aFiLUls9Z0Bw8QschP3mkth50BbWzgFS33ISIgBzUMuQ2IdahoEv/rXstr8Zhlz4B1Zg==
  1852 +"@typescript-eslint/visitor-keys@4.26.1":
  1853 + version "4.26.1"
  1854 + resolved "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-4.26.1.tgz#0d55ea735cb0d8903b198017d6d4f518fdaac546"
  1855 + integrity sha512-IGouNSSd+6x/fHtYRyLOM6/C+QxMDzWlDtN41ea+flWuSF9g02iqcIlX8wM53JkfljoIjP0U+yp7SiTS1onEkw==
1856 1856 dependencies:
1857   - "@typescript-eslint/types" "4.26.0"
  1857 + "@typescript-eslint/types" "4.26.1"
1858 1858 eslint-visitor-keys "^2.0.0"
1859 1859  
1860 1860 "@vitejs/plugin-legacy@^1.4.1":
... ... @@ -2033,25 +2033,25 @@
2033 2033 resolved "https://registry.npmjs.org/@vue/shared/-/shared-3.0.11.tgz#20d22dd0da7d358bb21c17f9bde8628152642c77"
2034 2034 integrity sha512-b+zB8A2so8eCE0JsxjL24J7vdGl8rzPQ09hZNhystm+KqSbKcAej1A+Hbva1rCMmTTqA+hFnUSDc5kouEo0JzA==
2035 2035  
2036   -"@vueuse/core@^4.11.2":
2037   - version "4.11.2"
2038   - resolved "https://registry.yarnpkg.com/@vueuse/core/-/core-4.11.2.tgz#d4f54bd38e7c289c6f6357992c02423774cb26d9"
2039   - integrity sha512-4A17XvKXpMR6829EVWvrdSKEeAjTWaiC3+xh51KEtlyCwvWQwZ0xwKDrbMj+e15ANxjHrTw/0bJVaWDfPQt/Pw==
  2036 +"@vueuse/core@^5.0.1":
  2037 + version "5.0.1"
  2038 + resolved "https://registry.npmjs.org/@vueuse/core/-/core-5.0.1.tgz#94bbb6c71d95b79efbdb24111915775e61723f1b"
  2039 + integrity sha512-hzcyYNvW1p9ZEwm+oBaWrHgGx6S93pJBiXLZUj2pgCNiJZjaedoePT9xzesi1SBxeKcYxwToaTISLeKdE4VKeg==
2040 2040 dependencies:
2041   - "@vueuse/shared" "4.11.2"
  2041 + "@vueuse/shared" "5.0.1"
2042 2042 vue-demi "*"
2043 2043  
2044   -"@vueuse/shared@4.11.2":
2045   - version "4.11.2"
2046   - resolved "https://registry.yarnpkg.com/@vueuse/shared/-/shared-4.11.2.tgz#1d56e08937600e3e65abf76f27cb4a1bc182adfd"
2047   - integrity sha512-vTbTi6ou7ljH3CkKVoaIaCAoWB5T1ewSogpL6VnO1duMPNuiv7x8K/LunMbnTg4tVyt6QwaiCuEq/kyS6AUBRg==
  2044 +"@vueuse/shared@5.0.1":
  2045 + version "5.0.1"
  2046 + resolved "https://registry.npmjs.org/@vueuse/shared/-/shared-5.0.1.tgz#3b6607ffc9e19b322c39be8a2f6b584d203a7c5e"
  2047 + integrity sha512-/+kRII9chn45PhFfRuPVbSQApJHhhqXFhPrWjnYKckMfQE9ZOuNMb1bmQnDTqzuNkoS/ENeHBMq0rnV/cfz/3Q==
2048 2048 dependencies:
2049 2049 vue-demi "*"
2050 2050  
2051   -"@windicss/plugin-utils@1.0.1":
2052   - version "1.0.1"
2053   - resolved "https://registry.npmjs.org/@windicss/plugin-utils/-/plugin-utils-1.0.1.tgz#f6281c91a37be5ea48eb4573cb511ccb82cce16a"
2054   - integrity sha512-EHsGC9LGHC/3rWNiOHzkgkexwgmxfHsqvxBoh0hLJv1MPPhEsKv8dQbt34pVZgRsS/rAjiVe4bRRM5NLTy8cWA==
  2051 +"@windicss/plugin-utils@1.0.2":
  2052 + version "1.0.2"
  2053 + resolved "https://registry.npmjs.org/@windicss/plugin-utils/-/plugin-utils-1.0.2.tgz#c34d6498058d5f4291805027d2ef6e34638a572a"
  2054 + integrity sha512-W9fZoPNsD3NMVyqzt9eNb1DNp9p4oy7EscCfGVIg1KBxAC8S+AnXtkaR/rad09y+aqzbILKNfzDKdimDR2FA9g==
2055 2055 dependencies:
2056 2056 "@antfu/utils" "^0.1.6"
2057 2057 debug "^4.3.2"
... ... @@ -2059,7 +2059,7 @@
2059 2059 jiti "^1.10.1"
2060 2060 magic-string "^0.25.7"
2061 2061 micromatch "^4.0.4"
2062   - windicss "^3.1.0"
  2062 + windicss "^3.1.3"
2063 2063  
2064 2064 "@zxcvbn-ts/core@^0.3.0":
2065 2065 version "0.3.0"
... ... @@ -4237,11 +4237,6 @@ esbuild@^0.11.5:
4237 4237 resolved "https://registry.npmjs.org/esbuild/-/esbuild-0.11.10.tgz#f5d39e4d9cc130b78d751664fef1b663240f5545"
4238 4238 integrity sha512-XvGbf+UreVFA24Tlk6sNOqNcvF2z49XAZt4E7A4H80+yqn944QOLTTxaU0lkdYNtZKFiITNea+VxmtrfjvnLPA==
4239 4239  
4240   -esbuild@^0.12.5:
4241   - version "0.12.5"
4242   - resolved "https://registry.yarnpkg.com/esbuild/-/esbuild-0.12.5.tgz#36076a6bc1966ba2741981d30512e95e8aaff495"
4243   - integrity sha512-vcuP53pA5XiwUU4FnlXM+2PnVjTfHGthM7uP1gtp+9yfheGvFFbq/KyuESThmtoHPUrfZH5JpxGVJIFDVD1Egw==
4244   -
4245 4240 esbuild@^0.12.6:
4246 4241 version "0.12.6"
4247 4242 resolved "https://registry.npmjs.org/esbuild/-/esbuild-0.12.6.tgz#85bc755c7cf3005d4f34b4f10f98049ce0ee67ce"
... ... @@ -4371,13 +4366,13 @@ eslint@^7.28.0:
4371 4366 text-table "^0.2.0"
4372 4367 v8-compile-cache "^2.0.3"
4373 4368  
4374   -esno@^0.7.0:
4375   - version "0.7.0"
4376   - resolved "https://registry.npmjs.org/esno/-/esno-0.7.0.tgz#2bec5e80eff53b60d528d6cf244445677cce7d4c"
4377   - integrity sha512-tOcvMYheRc7dfrxWkm4bYgmMkcNZUSt892qVY66int4L+jkEJGc64fZLx8+cZffMIcHp+4IfaTB+r+X7SoRh+g==
  4369 +esno@^0.7.1:
  4370 + version "0.7.1"
  4371 + resolved "https://registry.npmjs.org/esno/-/esno-0.7.1.tgz#ccd08436e0ca6e452fac1a994a7f08c61d07b7f1"
  4372 + integrity sha512-LzI42UXMSWtt9Z7iLfytY1jqO5Mz0980NI/y8txwpBCQmXLOpkA+KFzhD3IAY+QjBOOtvFmGh2j0VR8EHY57Ww==
4378 4373 dependencies:
4379 4374 cross-spawn "^7.0.3"
4380   - esbuild "^0.12.5"
  4375 + esbuild "^0.12.6"
4381 4376 esbuild-node-loader "^0.0.0"
4382 4377 esbuild-register "^2.5.0"
4383 4378  
... ... @@ -8876,10 +8871,10 @@ rollup-plugin-visualizer@5.5.0:
8876 8871 source-map "^0.7.3"
8877 8872 yargs "^16.2.0"
8878 8873  
8879   -rollup@^2.38.5, rollup@^2.43.1, rollup@^2.45.2, rollup@^2.51.0:
8880   - version "2.51.0"
8881   - resolved "https://registry.npmjs.org/rollup/-/rollup-2.51.0.tgz#ffd847882283998fc8611cd57af917f173b4ab5c"
8882   - integrity sha512-ITLt9sScNCBVspSHauw/W49lEZ0vjN8LyCzSNsNaqT67vTss2lYEfOyxltX8hjrhr1l/rQwmZ2wazzEqhZ/fUg==
  8874 +rollup@^2.38.5, rollup@^2.43.1, rollup@^2.45.2, rollup@^2.51.1:
  8875 + version "2.51.1"
  8876 + resolved "https://registry.npmjs.org/rollup/-/rollup-2.51.1.tgz#87bcd4095fe79b14c9bec0edc7ffa44e4827f793"
  8877 + integrity sha512-8xfDbAtBleXotb6qKEHWuo/jkn94a9dVqGc7Rwl3sqspCVlnCfbRek7ldhCARSi7h32H0xR4QThm1t9zHN+3uw==
8883 8878 optionalDependencies:
8884 8879 fsevents "~2.3.1"
8885 8880  
... ... @@ -10652,15 +10647,15 @@ vite-plugin-theme@^0.8.1:
10652 10647 esbuild-plugin-alias "^0.1.2"
10653 10648 tinycolor2 "^1.4.2"
10654 10649  
10655   -vite-plugin-windicss@^1.0.1:
10656   - version "1.0.1"
10657   - resolved "https://registry.npmjs.org/vite-plugin-windicss/-/vite-plugin-windicss-1.0.1.tgz#6e455228b6c1cb7ad52ed8fb9408b39888d572c0"
10658   - integrity sha512-+6iFKUC00G9xkR967xqbbAquaWAmgYT1rlBP7Bp6XCd9ire3b7tJTETtwSPAPAIp38OA/Xbp1MSaHhbl2LRxJg==
  10650 +vite-plugin-windicss@^1.0.2:
  10651 + version "1.0.2"
  10652 + resolved "https://registry.npmjs.org/vite-plugin-windicss/-/vite-plugin-windicss-1.0.2.tgz#0d0fd1ff36dc81d348be755e59a8ee471941095c"
  10653 + integrity sha512-iTmkxm8Yp+ZCFWLOs//9q3d4hYaBVDlkRGLzNBUNvRW9AQFVea57ZPhglMm9xOt1nW/O68n5Rkg4/In8rrEjHQ==
10659 10654 dependencies:
10660   - "@windicss/plugin-utils" "1.0.1"
  10655 + "@windicss/plugin-utils" "1.0.2"
10661 10656 chalk "^4.1.1"
10662 10657 debug "^4.3.2"
10663   - windicss "^3.1.0"
  10658 + windicss "^3.1.3"
10664 10659  
10665 10660 vite@2.3.3:
10666 10661 version "2.3.3"
... ... @@ -10952,10 +10947,10 @@ widest-line@^2.0.0:
10952 10947 dependencies:
10953 10948 string-width "^2.1.1"
10954 10949  
10955   -windicss@^3.1.0:
10956   - version "3.1.0"
10957   - resolved "https://registry.npmjs.org/windicss/-/windicss-3.1.0.tgz#bd679d51b7cabeba09077085706b48dbc1515730"
10958   - integrity sha512-z49xITq4X1ltHIZyL4NwFTR2LXPJ0rbOOrhDXfLX+OfG4Au7+GAzqvNlzUfAaIbA8HSpnI04alQHUWH24KfNYA==
  10950 +windicss@^3.1.3:
  10951 + version "3.1.3"
  10952 + resolved "https://registry.npmjs.org/windicss/-/windicss-3.1.3.tgz#a4b80af48bdd5d4be13520f700b497af455df700"
  10953 + integrity sha512-l7fpoba2LY9AYRy4UgcuOpbPsed8UsbpEQYUVWRR1wdAwiKxK6bGIMfpiKJtjPAPdh0GOGUqr6KJar0EDZSxzg==
10959 10954  
10960 10955 with@^7.0.0:
10961 10956 version "7.0.2"
... ...