@gx-design-vue/pro-layout-components 0.1.0-alpha.4 → 0.1.0-alpha.5
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.js +5 -2
- package/dist/RightContent/Search/index.js +10 -6
- package/dist/RightContent/index.js +12 -8
- package/dist/RightContent/themeOptions.js +5 -3
- package/dist/pro-layout-components.esm.js +229 -699
- package/dist/pro-layout-components.js +1 -1
- package/package.json +10 -11
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { searchMenuItems, uniqueByField } from "../utils.js";
|
|
2
2
|
import { Fragment, createVNode, defineComponent, nextTick, onMounted, ref, unref, watch } from "vue";
|
|
3
|
-
import {
|
|
3
|
+
import { GIcon } from "@gx-design-vue/icon";
|
|
4
4
|
import { classNames, getPrefixCls, isString, isUrl } from "@gx-design-vue/pro-utils";
|
|
5
5
|
import { onKeyStroke, useLocalStorage, useThrottleFn } from "@vueuse/core";
|
|
6
6
|
import { Empty } from "antdv-next";
|
|
@@ -92,7 +92,10 @@ const GSearchPanel = /* @__PURE__ */ defineComponent((props) => {
|
|
|
92
92
|
"data-search-item": index,
|
|
93
93
|
"onClick": () => handleEnter(),
|
|
94
94
|
"onMouseenter": () => handleMouseenter(index)
|
|
95
|
-
}, [createVNode("div", { "class": getClassNames("panel-item-left") }, [item.meta?.title]), searchHistory.value.length > 0 && !props.keyword && createVNode(
|
|
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, {
|
|
96
99
|
"className": getClassNames("result"),
|
|
97
100
|
"value": props.keyword,
|
|
98
101
|
"locale": props.locale
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import GSearchPanel from "./Panel.js";
|
|
2
2
|
import style_default from "./style.js";
|
|
3
3
|
import { Fragment, computed, createTextVNode, createVNode, defineComponent, mergeProps, nextTick, ref } from "vue";
|
|
4
|
-
import {
|
|
4
|
+
import { GIcon } from "@gx-design-vue/icon";
|
|
5
5
|
import { useInjectLayoutContext } from "@gx-design-vue/pro-layout";
|
|
6
6
|
import { classNames, getLevelData, isWindowsOs } from "@gx-design-vue/pro-utils";
|
|
7
7
|
import { useMagicKeys, whenever } from "@vueuse/core";
|
|
@@ -10,9 +10,12 @@ import { useBaseConfig } from "antdv-next/config-provider/context";
|
|
|
10
10
|
import useCSSVarCls from "antdv-next/config-provider/hooks/useCSSVarCls";
|
|
11
11
|
import { GProModal } from "@gx-design-vue/pro-modal";
|
|
12
12
|
//#region src/RightContent/Search/index.tsx
|
|
13
|
-
const ModalFooter = ({ className, hashId, locale }) => createVNode("div", { "class": classNames(`${className}-footer`, hashId) }, [createVNode("div", { "class": classNames(`${className}-footer-icon`, hashId) }, [createVNode(
|
|
14
|
-
createVNode(
|
|
15
|
-
createVNode(
|
|
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),
|
|
16
19
|
locale.navigateLabel
|
|
17
20
|
])]);
|
|
18
21
|
const GSearchInput = /* @__PURE__ */ defineComponent((props) => {
|
|
@@ -55,7 +58,7 @@ const GSearchInput = /* @__PURE__ */ defineComponent((props) => {
|
|
|
55
58
|
open.value = true;
|
|
56
59
|
}
|
|
57
60
|
}, [
|
|
58
|
-
createVNode(
|
|
61
|
+
createVNode(GIcon, { "type": "SearchOutlined" }, null),
|
|
59
62
|
createVNode("span", { "class": classNames(`${prefixCls.value}-word`, hashId.value) }, [props.locale.searchLabel]),
|
|
60
63
|
createVNode("span", { "class": classNames(`${prefixCls.value}-word-icon`, hashId.value) }, [
|
|
61
64
|
createTextVNode("⌘"),
|
|
@@ -81,10 +84,11 @@ const GSearchInput = /* @__PURE__ */ defineComponent((props) => {
|
|
|
81
84
|
"size": "large",
|
|
82
85
|
"placeholder": props.locale.searchPlaceholder,
|
|
83
86
|
"value": keyword.value,
|
|
87
|
+
"prefix": createVNode(GIcon, { "type": "SearchOutlined" }, null),
|
|
84
88
|
"onUpdate:value": (val) => {
|
|
85
89
|
keyword.value = val;
|
|
86
90
|
}
|
|
87
|
-
},
|
|
91
|
+
}, null),
|
|
88
92
|
"open": open.value,
|
|
89
93
|
"footer": createVNode(ModalFooter, {
|
|
90
94
|
"className": modalClass,
|
|
@@ -3,7 +3,6 @@ import GSearchInput from "./Search/index.js";
|
|
|
3
3
|
import style_default from "./style.js";
|
|
4
4
|
import { defaultThemeOptions } from "./themeOptions.js";
|
|
5
5
|
import { Fragment, computed, createVNode, defineComponent, mergeProps, ref, watch } from "vue";
|
|
6
|
-
import { CompressOutlined, ExpandOutlined, LockOutlined, LogoutOutlined, SettingOutlined, UserOutlined } from "@antdv-next/icons";
|
|
7
6
|
import { useThemeContext } from "@gx-design-vue/context";
|
|
8
7
|
import { GIcon } from "@gx-design-vue/icon";
|
|
9
8
|
import { useInjectLayoutContext } from "@gx-design-vue/pro-layout";
|
|
@@ -59,14 +58,14 @@ const RightContent = /* @__PURE__ */ defineComponent((props, { emit, slots }) =>
|
|
|
59
58
|
if (actions.value.lock && slots.lock) {
|
|
60
59
|
items.push({
|
|
61
60
|
key: "lock",
|
|
62
|
-
icon: () => createVNode(
|
|
61
|
+
icon: () => createVNode(GIcon, { "type": "LockOutlined" }, null),
|
|
63
62
|
label: mergedLocale.value.lockScreen
|
|
64
63
|
});
|
|
65
64
|
items.push({ type: "divider" });
|
|
66
65
|
}
|
|
67
66
|
items.push({
|
|
68
67
|
key: "logout",
|
|
69
|
-
icon: () => createVNode(
|
|
68
|
+
icon: () => createVNode(GIcon, { "type": "LogoutOutlined" }, null),
|
|
70
69
|
label: mergedLocale.value.logout
|
|
71
70
|
});
|
|
72
71
|
return items;
|
|
@@ -83,7 +82,6 @@ const RightContent = /* @__PURE__ */ defineComponent((props, { emit, slots }) =>
|
|
|
83
82
|
}
|
|
84
83
|
return () => {
|
|
85
84
|
const actionClassNames = [`${prefixCls.value}-header-actions-item`, hashId.value];
|
|
86
|
-
const FullScreenIcon = isFullscreen.value ? CompressOutlined : ExpandOutlined;
|
|
87
85
|
return createVNode("div", {
|
|
88
86
|
"ref": containerRef,
|
|
89
87
|
"class": classNames(prefixCls.value, hashId.value, cssVarCls.value, rootCls.value),
|
|
@@ -112,17 +110,23 @@ const RightContent = /* @__PURE__ */ defineComponent((props, { emit, slots }) =>
|
|
|
112
110
|
}
|
|
113
111
|
}, { default: () => [createVNode(GIcon, {
|
|
114
112
|
"class": classNames(`${prefixCls.value}-header-actions-icon`, hashId.value),
|
|
115
|
-
"type": isDark.value ? "Moon" : "
|
|
113
|
+
"type": isDark.value ? "Moon" : "Sun"
|
|
116
114
|
}, null)] })]),
|
|
117
|
-
actions.value.themeEditor && !isMobile.value && createVNode("div", { "class": classNames(actionClassNames) }, [createVNode(
|
|
118
|
-
|
|
115
|
+
actions.value.themeEditor && !isMobile.value && createVNode("div", { "class": classNames(actionClassNames) }, [createVNode(GIcon, {
|
|
116
|
+
"type": "SettingOutlined",
|
|
117
|
+
"onClick": () => handleActionClick("themeEditor")
|
|
118
|
+
}, null)]),
|
|
119
|
+
actions.value.fullScreen && !isMobile.value && createVNode("div", { "class": classNames(actionClassNames) }, [createVNode(GIcon, {
|
|
120
|
+
"type": isFullscreen.value ? "CompressOutlined" : "ExpandOutlined",
|
|
121
|
+
"onClick": () => toggleFullscreen()
|
|
122
|
+
}, null)]),
|
|
119
123
|
slots.actionsRender?.(actionClassNames)
|
|
120
124
|
]), createVNode(Dropdown, mergeProps({ "placement": "bottomRight" }, props.dropdownProps, { "menu": slots.dropdownMenu ? void 0 : {
|
|
121
125
|
items: userMenuItems.value,
|
|
122
126
|
onClick: handleUserMenuClick
|
|
123
127
|
} }), { default: () => [slots.dropdownTrigger ? slots.dropdownTrigger() : createVNode("div", { "class": classNames(`${prefixCls.value}-header-actions-avatar`, hashId.value) }, [createVNode(Avatar, {
|
|
124
128
|
"size": 28,
|
|
125
|
-
"icon": createVNode(
|
|
129
|
+
"icon": createVNode(GIcon, { "type": "UserOutlined" }, null)
|
|
126
130
|
}, null), props.name && createVNode("span", { "class": classNames(`${prefixCls.value}-header-actions-name`, hashId.value) }, [props.name])])] })])]), slots.lock?.({
|
|
127
131
|
open: lockOpen.value,
|
|
128
132
|
onOpenChange: handleLockOpenChange
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { createVNode, h } from "vue";
|
|
2
|
-
import { DesktopOutlined } from "@antdv-next/icons";
|
|
3
2
|
import { GIcon } from "@gx-design-vue/icon";
|
|
4
3
|
//#region src/RightContent/themeOptions.tsx
|
|
5
4
|
const iconStyle = { fontSize: "15px" };
|
|
@@ -21,13 +20,16 @@ const defaultThemeOptions = [
|
|
|
21
20
|
{
|
|
22
21
|
value: "dark",
|
|
23
22
|
label: labelWithIcon(h(GIcon, {
|
|
24
|
-
type: "
|
|
23
|
+
type: "Sun",
|
|
25
24
|
style: iconStyle
|
|
26
25
|
}), "深色")
|
|
27
26
|
},
|
|
28
27
|
{
|
|
29
28
|
value: "system",
|
|
30
|
-
label: labelWithIcon(h(
|
|
29
|
+
label: labelWithIcon(h(GIcon, {
|
|
30
|
+
type: "DesktopOutlined",
|
|
31
|
+
style: iconStyle
|
|
32
|
+
}), "自动")
|
|
31
33
|
}
|
|
32
34
|
];
|
|
33
35
|
//#endregion
|