@gx-design-vue/pro-layout-components 0.1.0-alpha.1 → 0.1.0-alpha.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/RightContent/Search/Panel.d.ts +15 -39
- package/dist/RightContent/Search/Panel.js +136 -135
- package/dist/RightContent/Search/index.d.ts +10 -47
- package/dist/RightContent/Search/index.js +123 -105
- package/dist/RightContent/Search/style.d.ts +3 -8
- package/dist/RightContent/Search/style.js +34 -30
- package/dist/RightContent/index.d.ts +3 -403
- package/dist/RightContent/index.js +186 -144
- package/dist/RightContent/interface.d.ts +80 -0
- package/dist/RightContent/interface.js +1 -0
- package/dist/RightContent/locale.d.ts +6 -0
- package/dist/RightContent/locale.js +17 -0
- package/dist/RightContent/style.d.ts +3 -8
- package/dist/RightContent/style.js +66 -65
- package/dist/RightContent/themeOptions.d.ts +6 -0
- package/dist/RightContent/themeOptions.js +36 -0
- package/dist/RightContent/utils.d.ts +24 -0
- package/dist/RightContent/utils.js +66 -0
- package/dist/index.d.ts +3 -7
- package/dist/index.js +2 -5
- package/dist/pro-layout-components.esm.js +671 -6118
- package/dist/pro-layout-components.js +1 -5
- package/dist/theme/augment.d.ts +10 -0
- package/dist/theme/augment.js +1 -0
- package/dist/theme/interface/components.d.ts +10 -0
- package/dist/theme/interface/components.js +1 -0
- package/global.d.ts +1 -4
- package/package.json +28 -19
- package/dist/AppsLogoComponents/AppLogoList.d.ts +0 -24
- package/dist/AppsLogoComponents/AppLogoList.js +0 -43
- package/dist/AppsLogoComponents/AppsLogo.d.ts +0 -10
- package/dist/AppsLogoComponents/AppsLogo.js +0 -12
- package/dist/AppsLogoComponents/DefaultContent.d.ts +0 -27
- package/dist/AppsLogoComponents/DefaultContent.js +0 -43
- package/dist/AppsLogoComponents/SimpleContent.d.ts +0 -36
- package/dist/AppsLogoComponents/SimpleContent.js +0 -63
- package/dist/AppsLogoComponents/index.d.ts +0 -32
- package/dist/AppsLogoComponents/index.js +0 -71
- package/dist/AppsLogoComponents/props.d.ts +0 -26
- package/dist/AppsLogoComponents/props.js +0 -12
- package/dist/AppsLogoComponents/style/default.d.ts +0 -6
- package/dist/AppsLogoComponents/style/default.js +0 -70
- package/dist/AppsLogoComponents/style/index.d.ts +0 -7
- package/dist/AppsLogoComponents/style/index.js +0 -60
- package/dist/AppsLogoComponents/style/simple.d.ts +0 -6
- package/dist/AppsLogoComponents/style/simple.js +0 -83
- package/dist/Icon/components/Paintbrush.d.ts +0 -6
- package/dist/Icon/components/Paintbrush.js +0 -21
- package/dist/Icon/components/Palette.d.ts +0 -6
- package/dist/Icon/components/Palette.js +0 -20
- package/dist/Icon/components/index.d.ts +0 -10
- package/dist/Icon/components/index.js +0 -11
- package/dist/Icon/index.d.ts +0 -37
- package/dist/Icon/index.js +0 -24
- package/dist/PageLock/Popup.d.ts +0 -43
- package/dist/PageLock/Popup.js +0 -68
- package/dist/PageLock/UserForm.d.ts +0 -42
- package/dist/PageLock/UserForm.js +0 -68
- package/dist/PageLock/index.d.ts +0 -52
- package/dist/PageLock/index.js +0 -92
- package/dist/PageLock/props.d.ts +0 -51
- package/dist/PageLock/props.js +0 -29
- package/dist/PageLock/style.d.ts +0 -7
- package/dist/PageLock/style.js +0 -108
- package/dist/PageLock/useFormState.d.ts +0 -16
- package/dist/PageLock/useFormState.js +0 -19
- package/dist/Paintbrush-EfUpNqey.js +0 -14
- package/dist/Palette-B5wq9KtV.js +0 -13
- package/dist/RightContent/Search/props.d.ts +0 -17
- package/dist/RightContent/Search/props.js +0 -15
- package/dist/RightContent/props.d.ts +0 -64
- package/dist/RightContent/props.js +0 -63
- package/dist/ThemeEditor/components/BlockCheckbox.d.ts +0 -39
- package/dist/ThemeEditor/components/BlockCheckbox.js +0 -42
- package/dist/ThemeEditor/components/RegionalChange.d.ts +0 -21
- package/dist/ThemeEditor/components/RegionalChange.js +0 -43
- package/dist/ThemeEditor/components/Setting/index.d.ts +0 -52
- package/dist/ThemeEditor/components/Setting/index.js +0 -125
- package/dist/ThemeEditor/components/SwitchTab/index.d.ts +0 -51
- package/dist/ThemeEditor/components/SwitchTab/index.js +0 -52
- package/dist/ThemeEditor/components/SwitchTab/style.d.ts +0 -6
- package/dist/ThemeEditor/components/SwitchTab/style.js +0 -54
- package/dist/ThemeEditor/components/Tokens/Colors/ColorSvg.d.ts +0 -7
- package/dist/ThemeEditor/components/Tokens/Colors/ColorSvg.js +0 -453
- package/dist/ThemeEditor/components/Tokens/Colors/Primary.d.ts +0 -7
- package/dist/ThemeEditor/components/Tokens/Colors/Primary.js +0 -58
- package/dist/ThemeEditor/components/Tokens/Colors/Side.d.ts +0 -7
- package/dist/ThemeEditor/components/Tokens/Colors/Side.js +0 -18
- package/dist/ThemeEditor/components/Tokens/Colors/index.d.ts +0 -7
- package/dist/ThemeEditor/components/Tokens/Colors/index.js +0 -15
- package/dist/ThemeEditor/components/Tokens/context.d.ts +0 -9
- package/dist/ThemeEditor/components/Tokens/context.js +0 -7
- package/dist/ThemeEditor/components/Tokens/index.d.ts +0 -45
- package/dist/ThemeEditor/components/Tokens/index.js +0 -69
- package/dist/ThemeEditor/components/Tokens/utils/config.d.ts +0 -10
- package/dist/ThemeEditor/components/Tokens/utils/config.js +0 -8
- package/dist/ThemeEditor/components/Trigger.d.ts +0 -21
- package/dist/ThemeEditor/components/Trigger.js +0 -46
- package/dist/ThemeEditor/context.d.ts +0 -14
- package/dist/ThemeEditor/context.js +0 -7
- package/dist/ThemeEditor/index.d.ts +0 -841
- package/dist/ThemeEditor/index.js +0 -165
- package/dist/ThemeEditor/props.d.ts +0 -57
- package/dist/ThemeEditor/props.js +0 -40
- package/dist/ThemeEditor/style/animate.d.ts +0 -9
- package/dist/ThemeEditor/style/animate.js +0 -38
- package/dist/ThemeEditor/style/index.d.ts +0 -10
- package/dist/ThemeEditor/style/index.js +0 -318
- package/dist/ThemeEditor/style/theme.d.ts +0 -6
- package/dist/ThemeEditor/style/theme.js +0 -71
- package/dist/ThemeEditor/utils/config.d.ts +0 -37
- package/dist/ThemeEditor/utils/config.js +0 -132
- package/dist/ThemeEditor/utils/index.d.ts +0 -9
- package/dist/ThemeEditor/utils/index.js +0 -64
- package/dist/hooks/useClockTime/index.d.ts +0 -11
- package/dist/hooks/useClockTime/index.js +0 -28
- package/dist/utils/index.d.ts +0 -2
- package/dist/utils/index.js +0 -3
- package/dist/utils/util.d.ts +0 -10
- package/dist/utils/util.js +0 -17
|
@@ -1,42 +1,18 @@
|
|
|
1
|
-
import
|
|
2
|
-
import {
|
|
3
|
-
import { AppRouteModule } from "@gx-design-vue/pro-layout";
|
|
4
|
-
import * as vue_jsx_runtime3 from "vue/jsx-runtime";
|
|
1
|
+
import { RightContentLocale } from "../interface.js";
|
|
2
|
+
import { LayoutMenuRoute } from "@gx-design-vue/pro-layout";
|
|
5
3
|
|
|
6
4
|
//#region src/RightContent/Search/Panel.d.ts
|
|
7
|
-
|
|
8
|
-
className
|
|
9
|
-
hashId
|
|
10
|
-
keyword
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
type: PropType<any>;
|
|
20
|
-
default: () => {};
|
|
21
|
-
};
|
|
22
|
-
}>, () => vue_jsx_runtime3.JSX.Element, {}, {}, {}, vue45.ComponentOptionsMixin, vue45.ComponentOptionsMixin, {}, string, vue45.PublicProps, Readonly<vue45.ExtractPropTypes<{
|
|
23
|
-
className: PropType<string>;
|
|
24
|
-
hashId: PropType<string>;
|
|
25
|
-
keyword: PropType<string>;
|
|
26
|
-
onBlur: PropType<() => void>;
|
|
27
|
-
onClose: PropType<(clear?: boolean) => void>;
|
|
28
|
-
dataSource: {
|
|
29
|
-
type: PropType<AppRouteModule[]>;
|
|
30
|
-
default: () => any[];
|
|
31
|
-
};
|
|
32
|
-
historyKey: PropType<string>;
|
|
33
|
-
emptyProps: {
|
|
34
|
-
type: PropType<any>;
|
|
35
|
-
default: () => {};
|
|
36
|
-
};
|
|
37
|
-
}>> & Readonly<{}>, {
|
|
38
|
-
dataSource: AppRouteModule[];
|
|
39
|
-
emptyProps: any;
|
|
40
|
-
}, {}, {}, {}, string, vue45.ComponentProvideOptions, true, {}, any>;
|
|
5
|
+
interface SearchPanelProps {
|
|
6
|
+
className?: string;
|
|
7
|
+
hashId?: string;
|
|
8
|
+
keyword?: string;
|
|
9
|
+
dataSource?: LayoutMenuRoute[];
|
|
10
|
+
historyKey?: string;
|
|
11
|
+
emptyProps?: Record<string, unknown>;
|
|
12
|
+
locale: RightContentLocale;
|
|
13
|
+
onBlur?: () => void;
|
|
14
|
+
onClose?: (clear?: boolean) => void;
|
|
15
|
+
}
|
|
16
|
+
declare const GSearchPanel: import("vue").DefineSetupFnComponent<SearchPanelProps, {}, {}, SearchPanelProps & {}, import("vue").PublicProps>;
|
|
41
17
|
//#endregion
|
|
42
|
-
export {
|
|
18
|
+
export { SearchPanelProps, GSearchPanel as default };
|
|
@@ -1,146 +1,147 @@
|
|
|
1
|
-
import {
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import { classNames,
|
|
5
|
-
import { Empty } from "ant-design-vue";
|
|
6
|
-
import { useProLayoutMenuContext } from "@gx-design-vue/pro-layout";
|
|
7
|
-
import { CloseOutlined } from "@ant-design/icons-vue";
|
|
1
|
+
import { searchMenuItems, uniqueByField } from "../utils.js";
|
|
2
|
+
import { Fragment, createVNode, defineComponent, nextTick, onMounted, ref, unref, watch } from "vue";
|
|
3
|
+
import { GIcon } from "@gx-design-vue/icon";
|
|
4
|
+
import { classNames, getPrefixCls, isString, isUrl } from "@gx-design-vue/pro-utils";
|
|
8
5
|
import { onKeyStroke, useLocalStorage, useThrottleFn } from "@vueuse/core";
|
|
9
|
-
import {
|
|
10
|
-
import {
|
|
6
|
+
import { Empty } from "antdv-next";
|
|
7
|
+
import { useProConfigContext } from "@gx-design-vue/pro-provider";
|
|
8
|
+
import { cloneDeep } from "es-toolkit";
|
|
11
9
|
import { useRouter } from "vue-router";
|
|
12
|
-
|
|
13
10
|
//#region src/RightContent/Search/Panel.tsx
|
|
14
|
-
const NoResult = ({ className, value }) => {
|
|
11
|
+
const NoResult = ({ className, value, locale }) => {
|
|
15
12
|
if (value) return createVNode(Empty, {
|
|
16
13
|
"image": Empty.PRESENTED_IMAGE_SIMPLE,
|
|
17
|
-
"description":
|
|
14
|
+
"description": locale.noResult?.(value)
|
|
18
15
|
}, null);
|
|
19
|
-
return createVNode("div", { "class": className }, [
|
|
16
|
+
return createVNode("div", { "class": className }, [locale.noHistory]);
|
|
20
17
|
};
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
const
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
suffixCls: "search-history",
|
|
36
|
-
isPor: true
|
|
37
|
-
}), []);
|
|
38
|
-
const activeIndex = ref(0);
|
|
39
|
-
const searchResults = ref(cloneDeep(unref(searchHistory)));
|
|
40
|
-
const handleSearch = useThrottleFn(search, 200);
|
|
41
|
-
function search(searchKey) {
|
|
42
|
-
searchKey = searchKey.trim();
|
|
43
|
-
if (!searchKey) {
|
|
44
|
-
searchResults.value = [];
|
|
45
|
-
return;
|
|
46
|
-
}
|
|
47
|
-
const results = [];
|
|
48
|
-
props.dataSource.forEach((item) => {
|
|
49
|
-
if (item.meta?.hideInMenu) return;
|
|
50
|
-
const name = item.meta?.title || item.name || "";
|
|
51
|
-
if (name.includes(searchKey)) results.push(item);
|
|
52
|
-
if (pinyin(name, {
|
|
53
|
-
toneType: "none",
|
|
54
|
-
type: "array",
|
|
55
|
-
pattern: "first"
|
|
56
|
-
}).includes(searchKey.toLowerCase())) results.push(item);
|
|
57
|
-
if (pinyin(name, {
|
|
58
|
-
toneType: "none",
|
|
59
|
-
type: "array",
|
|
60
|
-
pattern: "pinyin"
|
|
61
|
-
}).includes(searchKey.toLowerCase())) results.push(item);
|
|
62
|
-
});
|
|
63
|
-
searchResults.value = results;
|
|
64
|
-
if (results.length > 0) activeIndex.value = 0;
|
|
65
|
-
activeIndex.value = 0;
|
|
66
|
-
}
|
|
67
|
-
watch(() => props.keyword, (val) => {
|
|
68
|
-
if (val) handleSearch(val);
|
|
69
|
-
else searchResults.value = cloneDeep(unref(searchHistory));
|
|
70
|
-
});
|
|
71
|
-
function scrollIntoView() {
|
|
72
|
-
const element = document.querySelector(`[data-search-item="${activeIndex.value}"]`);
|
|
73
|
-
if (element) element.scrollIntoView({ block: "nearest" });
|
|
74
|
-
}
|
|
75
|
-
async function handleEnter() {
|
|
76
|
-
if (searchResults.value.length === 0) return;
|
|
77
|
-
const index = activeIndex.value;
|
|
78
|
-
if (searchResults.value.length === 0 || index < 0) return;
|
|
79
|
-
const row = searchResults.value[index];
|
|
80
|
-
if (row) {
|
|
81
|
-
const toPath = isString(row.redirect) ? row.redirect : row.path || "";
|
|
82
|
-
const target = row.meta?.link || "";
|
|
83
|
-
const hasUrl = isUrl(target);
|
|
84
|
-
if (searchHistory.value.every((item) => item.name !== row.name)) searchHistory.value.push(cloneDeep(row));
|
|
85
|
-
props.onClose?.(true);
|
|
86
|
-
await nextTick();
|
|
87
|
-
if (hasUrl && target && row.meta?.linkStatus === 1) window.open(target, "_blank");
|
|
88
|
-
else {
|
|
89
|
-
router.push({ path: toPath });
|
|
90
|
-
syncMatchedKeys(60);
|
|
91
|
-
}
|
|
92
|
-
}
|
|
93
|
-
}
|
|
94
|
-
function handleUp() {
|
|
95
|
-
if (searchResults.value.length === 0) return;
|
|
96
|
-
props.onBlur?.();
|
|
97
|
-
activeIndex.value--;
|
|
98
|
-
if (activeIndex.value < 0) activeIndex.value = searchResults.value.length - 1;
|
|
99
|
-
scrollIntoView();
|
|
100
|
-
}
|
|
101
|
-
function handleDown() {
|
|
102
|
-
if (searchResults.value.length === 0) return;
|
|
103
|
-
props.onBlur?.();
|
|
104
|
-
activeIndex.value++;
|
|
105
|
-
if (activeIndex.value > searchResults.value.length - 1) activeIndex.value = 0;
|
|
106
|
-
scrollIntoView();
|
|
107
|
-
}
|
|
108
|
-
onMounted(() => {
|
|
109
|
-
onKeyStroke("Enter", handleEnter);
|
|
110
|
-
onKeyStroke("ArrowUp", handleUp);
|
|
111
|
-
onKeyStroke("ArrowDown", handleDown);
|
|
112
|
-
});
|
|
113
|
-
function handleMouseenter(index) {
|
|
114
|
-
activeIndex.value = index;
|
|
115
|
-
}
|
|
116
|
-
function removeItem(e, row) {
|
|
117
|
-
e.stopPropagation();
|
|
118
|
-
searchResults.value = searchResults.value.filter((item) => item.name !== row.name);
|
|
119
|
-
searchHistory.value = searchHistory.value.filter((item) => item.name !== row.name);
|
|
120
|
-
activeIndex.value = activeIndex.value - 1 >= 0 ? activeIndex.value - 1 : 0;
|
|
121
|
-
scrollIntoView();
|
|
18
|
+
const GSearchPanel = /* @__PURE__ */ defineComponent((props) => {
|
|
19
|
+
const router = useRouter();
|
|
20
|
+
const { renderEmpty } = useProConfigContext();
|
|
21
|
+
const searchHistory = useLocalStorage(props.historyKey || getPrefixCls({
|
|
22
|
+
suffixCls: "search-history",
|
|
23
|
+
isPro: true
|
|
24
|
+
}), []);
|
|
25
|
+
const activeIndex = ref(0);
|
|
26
|
+
const searchResults = ref(cloneDeep(unref(searchHistory)));
|
|
27
|
+
const handleSearch = useThrottleFn((searchKey) => {
|
|
28
|
+
const trimmed = searchKey.trim();
|
|
29
|
+
if (!trimmed) {
|
|
30
|
+
searchResults.value = [];
|
|
31
|
+
return;
|
|
122
32
|
}
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
}, [createVNode("div", { "class": getClassNames("panel-item-left") }, [item.meta?.title]), searchHistory.value.length > 0 && !props.keyword && createVNode(CloseOutlined, { "onClick": (e) => removeItem(e, item) }, null)]))])]) : emptyText.value ? emptyTextRender.map((node) => {
|
|
133
|
-
return cloneVNode(node, {
|
|
134
|
-
...props.emptyProps,
|
|
135
|
-
text: props.keyword ? `未找到搜索结果 "${props.keyword}"` : true
|
|
136
|
-
});
|
|
137
|
-
}) : createVNode(NoResult, {
|
|
138
|
-
"className": getClassNames("result"),
|
|
139
|
-
"value": props.keyword
|
|
140
|
-
}, null)]);
|
|
141
|
-
};
|
|
33
|
+
searchResults.value = searchMenuItems(props.dataSource ?? [], trimmed);
|
|
34
|
+
activeIndex.value = 0;
|
|
35
|
+
}, 200);
|
|
36
|
+
watch(() => props.keyword, (val) => {
|
|
37
|
+
if (val) handleSearch(val);
|
|
38
|
+
else searchResults.value = cloneDeep(unref(searchHistory));
|
|
39
|
+
});
|
|
40
|
+
function scrollIntoView() {
|
|
41
|
+
document.querySelector(`[data-search-item="${activeIndex.value}"]`)?.scrollIntoView({ block: "nearest" });
|
|
142
42
|
}
|
|
43
|
+
async function handleEnter() {
|
|
44
|
+
if (searchResults.value.length === 0) return;
|
|
45
|
+
const index = activeIndex.value;
|
|
46
|
+
if (index < 0) return;
|
|
47
|
+
const row = searchResults.value[index];
|
|
48
|
+
if (!row) return;
|
|
49
|
+
const toPath = isString(row.redirect) ? row.redirect : row.path || "";
|
|
50
|
+
const target = row.meta?.link || "";
|
|
51
|
+
const hasUrl = isUrl(target);
|
|
52
|
+
if (searchHistory.value.every((item) => item.name !== row.name)) searchHistory.value.push(cloneDeep(row));
|
|
53
|
+
props.onClose?.(true);
|
|
54
|
+
await nextTick();
|
|
55
|
+
if (hasUrl && target && row.meta?.linkStatus === 1) window.open(target, "_blank");
|
|
56
|
+
else router.push({ path: toPath });
|
|
57
|
+
}
|
|
58
|
+
function handleUp() {
|
|
59
|
+
if (searchResults.value.length === 0) return;
|
|
60
|
+
props.onBlur?.();
|
|
61
|
+
activeIndex.value--;
|
|
62
|
+
if (activeIndex.value < 0) activeIndex.value = searchResults.value.length - 1;
|
|
63
|
+
scrollIntoView();
|
|
64
|
+
}
|
|
65
|
+
function handleDown() {
|
|
66
|
+
if (searchResults.value.length === 0) return;
|
|
67
|
+
props.onBlur?.();
|
|
68
|
+
activeIndex.value++;
|
|
69
|
+
if (activeIndex.value > searchResults.value.length - 1) activeIndex.value = 0;
|
|
70
|
+
scrollIntoView();
|
|
71
|
+
}
|
|
72
|
+
onMounted(() => {
|
|
73
|
+
onKeyStroke("Enter", handleEnter);
|
|
74
|
+
onKeyStroke("ArrowUp", handleUp);
|
|
75
|
+
onKeyStroke("ArrowDown", handleDown);
|
|
76
|
+
});
|
|
77
|
+
function handleMouseenter(index) {
|
|
78
|
+
activeIndex.value = index;
|
|
79
|
+
}
|
|
80
|
+
function removeItem(event, row) {
|
|
81
|
+
event.stopPropagation();
|
|
82
|
+
searchResults.value = searchResults.value.filter((item) => item.name !== row.name);
|
|
83
|
+
searchHistory.value = searchHistory.value.filter((item) => item.name !== row.name);
|
|
84
|
+
activeIndex.value = activeIndex.value - 1 >= 0 ? activeIndex.value - 1 : 0;
|
|
85
|
+
scrollIntoView();
|
|
86
|
+
}
|
|
87
|
+
const getClassNames = (name) => classNames(`${props.className}${name ? `-${name}` : ""}`, props.hashId);
|
|
88
|
+
return () => {
|
|
89
|
+
return createVNode(Fragment, null, [searchResults.value.length > 0 ? createVNode(Fragment, null, [searchHistory.value.length > 0 && !props.keyword && createVNode("div", { "class": getClassNames("panel-title") }, [props.locale.searchHistory]), createVNode("div", { "class": getClassNames("panel-list") }, [uniqueByField(searchResults.value, "name").map((item, index) => createVNode("div", {
|
|
90
|
+
"key": item.name,
|
|
91
|
+
"class": getClassNames(classNames("panel-item", index === activeIndex.value && "active")),
|
|
92
|
+
"data-search-item": index,
|
|
93
|
+
"onClick": () => handleEnter(),
|
|
94
|
+
"onMouseenter": () => handleMouseenter(index)
|
|
95
|
+
}, [createVNode("div", { "class": getClassNames("panel-item-left") }, [item.meta?.title]), searchHistory.value.length > 0 && !props.keyword && createVNode(GIcon, {
|
|
96
|
+
"type": "CloseOutlined",
|
|
97
|
+
"onClick": (e) => removeItem(e, item)
|
|
98
|
+
}, null)]))])]) : renderEmpty.value?.() || createVNode(NoResult, {
|
|
99
|
+
"className": getClassNames("result"),
|
|
100
|
+
"value": props.keyword,
|
|
101
|
+
"locale": props.locale
|
|
102
|
+
}, null)]);
|
|
103
|
+
};
|
|
104
|
+
}, {
|
|
105
|
+
props: {
|
|
106
|
+
className: {
|
|
107
|
+
type: String,
|
|
108
|
+
required: false
|
|
109
|
+
},
|
|
110
|
+
hashId: {
|
|
111
|
+
type: String,
|
|
112
|
+
required: false
|
|
113
|
+
},
|
|
114
|
+
keyword: {
|
|
115
|
+
type: String,
|
|
116
|
+
required: false
|
|
117
|
+
},
|
|
118
|
+
dataSource: {
|
|
119
|
+
type: Array,
|
|
120
|
+
required: false
|
|
121
|
+
},
|
|
122
|
+
historyKey: {
|
|
123
|
+
type: String,
|
|
124
|
+
required: false
|
|
125
|
+
},
|
|
126
|
+
emptyProps: {
|
|
127
|
+
type: Object,
|
|
128
|
+
required: false
|
|
129
|
+
},
|
|
130
|
+
locale: {
|
|
131
|
+
type: Object,
|
|
132
|
+
required: true
|
|
133
|
+
},
|
|
134
|
+
onBlur: {
|
|
135
|
+
type: Function,
|
|
136
|
+
required: false
|
|
137
|
+
},
|
|
138
|
+
onClose: {
|
|
139
|
+
type: Function,
|
|
140
|
+
required: false
|
|
141
|
+
}
|
|
142
|
+
},
|
|
143
|
+
name: "GSearchPanel",
|
|
144
|
+
inheritAttrs: false
|
|
143
145
|
});
|
|
144
|
-
|
|
145
146
|
//#endregion
|
|
146
|
-
export {
|
|
147
|
+
export { GSearchPanel as default };
|
|
@@ -1,50 +1,13 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { PropType } from "vue";
|
|
3
|
-
import * as _gx_design_vue_pro_layout3 from "@gx-design-vue/pro-layout";
|
|
4
|
-
import * as ant_design_vue_es__util_type21 from "ant-design-vue/es/_util/type";
|
|
1
|
+
import { RightContentLocale } from "../interface.js";
|
|
5
2
|
|
|
6
3
|
//#region src/RightContent/Search/index.d.ts
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
};
|
|
16
|
-
dataSource: {
|
|
17
|
-
type: PropType<_gx_design_vue_pro_layout3.AppRouteModule[]>;
|
|
18
|
-
default: () => any[];
|
|
19
|
-
};
|
|
20
|
-
historyKey: PropType<string>;
|
|
21
|
-
emptyProps: {
|
|
22
|
-
type: PropType<any>;
|
|
23
|
-
default: () => {};
|
|
24
|
-
};
|
|
25
|
-
}>, () => ant_design_vue_es__util_type21.VueNode, {}, {}, {}, vue202.ComponentOptionsMixin, vue202.ComponentOptionsMixin, {}, string, vue202.PublicProps, Readonly<vue202.ExtractPropTypes<{
|
|
26
|
-
dark: {
|
|
27
|
-
type: PropType<boolean>;
|
|
28
|
-
default: any;
|
|
29
|
-
};
|
|
30
|
-
disabledShortKey: {
|
|
31
|
-
type: PropType<boolean>;
|
|
32
|
-
default: boolean;
|
|
33
|
-
};
|
|
34
|
-
dataSource: {
|
|
35
|
-
type: PropType<_gx_design_vue_pro_layout3.AppRouteModule[]>;
|
|
36
|
-
default: () => any[];
|
|
37
|
-
};
|
|
38
|
-
historyKey: PropType<string>;
|
|
39
|
-
emptyProps: {
|
|
40
|
-
type: PropType<any>;
|
|
41
|
-
default: () => {};
|
|
42
|
-
};
|
|
43
|
-
}>> & Readonly<{}>, {
|
|
44
|
-
dataSource: _gx_design_vue_pro_layout3.AppRouteModule[];
|
|
45
|
-
dark: boolean;
|
|
46
|
-
emptyProps: any;
|
|
47
|
-
disabledShortKey: boolean;
|
|
48
|
-
}, {}, {}, {}, string, vue202.ComponentProvideOptions, true, {}, any>;
|
|
4
|
+
interface SearchInputProps {
|
|
5
|
+
dataSource?: any[];
|
|
6
|
+
disabledShortKey?: boolean;
|
|
7
|
+
locale: RightContentLocale;
|
|
8
|
+
searchHistoryKey?: string;
|
|
9
|
+
emptyProps?: Record<string, unknown>;
|
|
10
|
+
}
|
|
11
|
+
declare const GSearchInput: import("vue").DefineSetupFnComponent<SearchInputProps, {}, {}, SearchInputProps & {}, import("vue").PublicProps>;
|
|
49
12
|
//#endregion
|
|
50
|
-
export {
|
|
13
|
+
export { SearchInputProps, GSearchInput as default };
|
|
@@ -1,118 +1,136 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
import { useStyle } from "./style.js";
|
|
1
|
+
import GSearchPanel from "./Panel.js";
|
|
2
|
+
import style_default from "./style.js";
|
|
4
3
|
import { Fragment, computed, createTextVNode, createVNode, defineComponent, mergeProps, nextTick, ref } from "vue";
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import {
|
|
8
|
-
import { useProLayoutContext } from "@gx-design-vue/pro-layout";
|
|
9
|
-
import { ArrowUpOutlined, EnterOutlined, SearchOutlined } from "@ant-design/icons-vue";
|
|
4
|
+
import { GIcon } from "@gx-design-vue/icon";
|
|
5
|
+
import { useInjectLayoutContext } from "@gx-design-vue/pro-layout";
|
|
6
|
+
import { classNames, getLevelData, isWindowsOs } from "@gx-design-vue/pro-utils";
|
|
10
7
|
import { useMagicKeys, whenever } from "@vueuse/core";
|
|
8
|
+
import { Input } from "antdv-next";
|
|
9
|
+
import { useBaseConfig } from "antdv-next/config-provider/context";
|
|
10
|
+
import useCSSVarCls from "antdv-next/config-provider/hooks/useCSSVarCls";
|
|
11
11
|
import { GProModal } from "@gx-design-vue/pro-modal";
|
|
12
|
-
|
|
13
12
|
//#region src/RightContent/Search/index.tsx
|
|
14
|
-
const ModalFooter = ({ className, hashId }) => createVNode("div", { "class": classNames(`${className}-footer`, hashId) }, [createVNode("div", { "class": classNames(`${className}-footer-icon`, hashId) }, [createVNode(
|
|
15
|
-
createVNode(
|
|
16
|
-
createVNode(
|
|
17
|
-
|
|
13
|
+
const ModalFooter = ({ className, hashId, locale }) => createVNode("div", { "class": classNames(`${className}-footer`, hashId) }, [createVNode("div", { "class": classNames(`${className}-footer-icon`, hashId) }, [createVNode(GIcon, { "type": "EnterOutlined" }, null), locale.selectLabel]), createVNode("div", { "class": classNames(`${className}-footer-icon`, hashId) }, [
|
|
14
|
+
createVNode(GIcon, { "type": "ArrowUpOutlined" }, null),
|
|
15
|
+
createVNode(GIcon, {
|
|
16
|
+
"type": "ArrowUpOutlined",
|
|
17
|
+
"rotate": 180
|
|
18
|
+
}, null),
|
|
19
|
+
locale.navigateLabel
|
|
18
20
|
])]);
|
|
19
|
-
|
|
20
|
-
|
|
21
|
+
const GSearchInput = /* @__PURE__ */ defineComponent((props) => {
|
|
22
|
+
const layoutContext = useInjectLayoutContext();
|
|
23
|
+
const { prefixCls } = useBaseConfig("pro-right-search");
|
|
24
|
+
const rootCls = useCSSVarCls(prefixCls);
|
|
25
|
+
const [hashId, cssVarCls] = style_default(prefixCls, rootCls);
|
|
26
|
+
const keyword = ref("");
|
|
27
|
+
const open = ref(false);
|
|
28
|
+
const keys = useMagicKeys();
|
|
29
|
+
const shortcutKey = isWindowsOs() ? keys["ctrl+k"] : keys["cmd+k"];
|
|
30
|
+
const inputRef = ref();
|
|
31
|
+
const dataSource = computed(() => {
|
|
32
|
+
if (props.dataSource?.length) return getLevelData(props.dataSource);
|
|
33
|
+
if (layoutContext?.menuState?.flatMenus) return layoutContext.menuState.flatMenus.value;
|
|
34
|
+
return [];
|
|
35
|
+
});
|
|
36
|
+
whenever(shortcutKey, () => {
|
|
37
|
+
if (props.disabledShortKey) return;
|
|
38
|
+
open.value = true;
|
|
39
|
+
});
|
|
40
|
+
whenever(() => open.value, () => {
|
|
41
|
+
nextTick(() => {
|
|
42
|
+
inputRef.value?.focus?.();
|
|
43
|
+
});
|
|
44
|
+
});
|
|
45
|
+
function handleClose(clear) {
|
|
46
|
+
open.value = false;
|
|
47
|
+
if (clear) keyword.value = "";
|
|
48
|
+
}
|
|
49
|
+
return () => {
|
|
50
|
+
const classNameProps = {
|
|
51
|
+
className: prefixCls.value,
|
|
52
|
+
hashId: hashId.value
|
|
53
|
+
};
|
|
54
|
+
const modalClass = `${prefixCls.value}-modal`;
|
|
55
|
+
return createVNode(Fragment, null, [createVNode("div", {
|
|
56
|
+
"class": classNames(prefixCls.value, hashId.value, cssVarCls.value, rootCls.value),
|
|
57
|
+
"onClick": () => {
|
|
58
|
+
open.value = true;
|
|
59
|
+
}
|
|
60
|
+
}, [
|
|
61
|
+
createVNode(GIcon, { "type": "SearchOutlined" }, null),
|
|
62
|
+
createVNode("span", { "class": classNames(`${prefixCls.value}-word`, hashId.value) }, [props.locale.searchLabel]),
|
|
63
|
+
createVNode("span", { "class": classNames(`${prefixCls.value}-word-icon`, hashId.value) }, [
|
|
64
|
+
createTextVNode("⌘"),
|
|
65
|
+
" ",
|
|
66
|
+
createVNode("kbd", null, [createTextVNode("K")])
|
|
67
|
+
])
|
|
68
|
+
]), createVNode(GProModal, {
|
|
69
|
+
"wrapClassName": classNames(modalClass, hashId.value),
|
|
70
|
+
"width": 600,
|
|
71
|
+
"scrollProps": {
|
|
72
|
+
maxHeight: 400,
|
|
73
|
+
minHeight: 200
|
|
74
|
+
},
|
|
75
|
+
"centered": false,
|
|
76
|
+
"destroyOnHidden": false,
|
|
77
|
+
"title": createVNode(Input, {
|
|
78
|
+
"style": {
|
|
79
|
+
width: `${600 * .8}px`,
|
|
80
|
+
padding: 0
|
|
81
|
+
},
|
|
82
|
+
"ref": inputRef,
|
|
83
|
+
"bordered": false,
|
|
84
|
+
"size": "large",
|
|
85
|
+
"placeholder": props.locale.searchPlaceholder,
|
|
86
|
+
"value": keyword.value,
|
|
87
|
+
"prefix": createVNode(GIcon, { "type": "SearchOutlined" }, null),
|
|
88
|
+
"onUpdate:value": (val) => {
|
|
89
|
+
keyword.value = val;
|
|
90
|
+
}
|
|
91
|
+
}, null),
|
|
92
|
+
"open": open.value,
|
|
93
|
+
"footer": createVNode(ModalFooter, {
|
|
94
|
+
"className": modalClass,
|
|
95
|
+
"hashId": hashId.value,
|
|
96
|
+
"locale": props.locale
|
|
97
|
+
}, null),
|
|
98
|
+
"onCancel": () => handleClose()
|
|
99
|
+
}, { default: () => [createVNode(GSearchPanel, mergeProps(classNameProps, {
|
|
100
|
+
"emptyProps": props.emptyProps,
|
|
101
|
+
"keyword": keyword.value,
|
|
102
|
+
"dataSource": dataSource.value,
|
|
103
|
+
"historyKey": props.searchHistoryKey,
|
|
104
|
+
"locale": props.locale,
|
|
105
|
+
"onClose": handleClose
|
|
106
|
+
}), null)] })]);
|
|
107
|
+
};
|
|
108
|
+
}, {
|
|
21
109
|
props: {
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
default: void 0
|
|
110
|
+
dataSource: {
|
|
111
|
+
type: Array,
|
|
112
|
+
required: false
|
|
26
113
|
},
|
|
27
114
|
disabledShortKey: {
|
|
28
115
|
type: Boolean,
|
|
29
|
-
|
|
116
|
+
required: false,
|
|
117
|
+
default: void 0
|
|
118
|
+
},
|
|
119
|
+
locale: {
|
|
120
|
+
type: Object,
|
|
121
|
+
required: true
|
|
122
|
+
},
|
|
123
|
+
searchHistoryKey: {
|
|
124
|
+
type: String,
|
|
125
|
+
required: false
|
|
126
|
+
},
|
|
127
|
+
emptyProps: {
|
|
128
|
+
type: Object,
|
|
129
|
+
required: false
|
|
30
130
|
}
|
|
31
131
|
},
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
suffixCls: "page-search",
|
|
35
|
-
isPor: true
|
|
36
|
-
});
|
|
37
|
-
const { wrapSSR, hashId } = useStyle(baseClass);
|
|
38
|
-
const [keyword, changeKeyword] = useState("");
|
|
39
|
-
const [open, setOpen] = useState(false);
|
|
40
|
-
const layoutContext = useProLayoutContext();
|
|
41
|
-
const keys = useMagicKeys();
|
|
42
|
-
const cmd = isWindowsOs() ? keys["ctrl+k"] : keys["cmd+k"];
|
|
43
|
-
const inputRef = ref();
|
|
44
|
-
const dataSource = computed(() => {
|
|
45
|
-
if (props.dataSource.length) return getLevelData(props.dataSource);
|
|
46
|
-
if (layoutContext) return layoutContext.menu.value.flatMenus;
|
|
47
|
-
return [];
|
|
48
|
-
});
|
|
49
|
-
whenever(cmd, () => {
|
|
50
|
-
if (props.disabledShortKey) return;
|
|
51
|
-
setOpen(true);
|
|
52
|
-
});
|
|
53
|
-
whenever(open, () => {
|
|
54
|
-
nextTick(() => {
|
|
55
|
-
inputRef.value?.focus();
|
|
56
|
-
});
|
|
57
|
-
});
|
|
58
|
-
const handleClose = (clear) => {
|
|
59
|
-
setOpen(false);
|
|
60
|
-
if (clear) changeKeyword("");
|
|
61
|
-
};
|
|
62
|
-
return () => {
|
|
63
|
-
const classNameProps = {
|
|
64
|
-
className: `${baseClass}`,
|
|
65
|
-
hashId: hashId.value
|
|
66
|
-
};
|
|
67
|
-
const modalClass = `${baseClass}-modal`;
|
|
68
|
-
return wrapSSR(createVNode(Fragment, null, [createVNode("div", {
|
|
69
|
-
"class": classNames(baseClass, hashId.value),
|
|
70
|
-
"onClick": () => setOpen(true)
|
|
71
|
-
}, [
|
|
72
|
-
createVNode(SearchOutlined, null, null),
|
|
73
|
-
createVNode("span", { "class": classNames(`${baseClass}-word`, hashId.value) }, [createTextVNode("搜索")]),
|
|
74
|
-
createVNode("span", { "class": classNames(`${baseClass}-word-icon`, hashId.value) }, [
|
|
75
|
-
createTextVNode("⌘"),
|
|
76
|
-
" ",
|
|
77
|
-
createVNode("kbd", null, [createTextVNode("K")])
|
|
78
|
-
])
|
|
79
|
-
]), createVNode(GProModal, {
|
|
80
|
-
"class": classNames(`${modalClass}`, hashId.value),
|
|
81
|
-
"width": 600,
|
|
82
|
-
"scrollProps": {
|
|
83
|
-
maxHeight: 400,
|
|
84
|
-
minHeight: 200
|
|
85
|
-
},
|
|
86
|
-
"centered": false,
|
|
87
|
-
"destroyOnClose": false,
|
|
88
|
-
"title": createVNode(Input, {
|
|
89
|
-
"style": {
|
|
90
|
-
width: `${600 * .8}px`,
|
|
91
|
-
padding: 0
|
|
92
|
-
},
|
|
93
|
-
"ref": inputRef,
|
|
94
|
-
"bordered": false,
|
|
95
|
-
"size": "large",
|
|
96
|
-
"placeholder": "搜索导航菜单",
|
|
97
|
-
"value": keyword.value,
|
|
98
|
-
"prefix": createVNode(SearchOutlined, null, null),
|
|
99
|
-
"onChange": (e) => changeKeyword(e.target.value)
|
|
100
|
-
}, null),
|
|
101
|
-
"open": open.value,
|
|
102
|
-
"footer": createVNode(ModalFooter, {
|
|
103
|
-
"className": modalClass,
|
|
104
|
-
"hashId": hashId.value
|
|
105
|
-
}, null),
|
|
106
|
-
"onCancel": () => handleClose()
|
|
107
|
-
}, { default: () => [createVNode(Panel_default, mergeProps(classNameProps, {
|
|
108
|
-
"emptyProps": props.emptyProps,
|
|
109
|
-
"keyword": keyword.value,
|
|
110
|
-
"dataSource": dataSource.value,
|
|
111
|
-
"onClose": handleClose
|
|
112
|
-
}), null)] })]));
|
|
113
|
-
};
|
|
114
|
-
}
|
|
132
|
+
name: "GSearchInput",
|
|
133
|
+
inheritAttrs: false
|
|
115
134
|
});
|
|
116
|
-
|
|
117
135
|
//#endregion
|
|
118
|
-
export {
|
|
136
|
+
export { GSearchInput as default };
|
|
@@ -1,10 +1,5 @@
|
|
|
1
|
-
import * as vue248 from "vue";
|
|
2
|
-
import * as ant_design_vue_es__util_type25 from "ant-design-vue/es/_util/type";
|
|
3
|
-
|
|
4
1
|
//#region src/RightContent/Search/style.d.ts
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
hashId: vue248.ComputedRef<string>;
|
|
8
|
-
};
|
|
2
|
+
type ComponentToken = Record<string, any>;
|
|
3
|
+
declare const _default: (prefixCls: import("vue").Ref<string>, rootCls?: import("vue").Ref<string | undefined>) => readonly [import("vue").Ref<string, string>, import("vue").ComputedRef<string | undefined>];
|
|
9
4
|
//#endregion
|
|
10
|
-
export {
|
|
5
|
+
export { ComponentToken, _default as default };
|