layplux 1.0.1 → 2.0.1
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/cjs/components/center-view/index.cjs +18 -28
- package/dist/cjs/components/corner-glow/index.cjs +11 -28
- package/dist/cjs/components/dropdown/index.cjs +136 -130
- package/dist/cjs/components/icon/index.cjs +29 -51
- package/dist/cjs/components/index.cjs +24 -25
- package/dist/cjs/components/panel-view/index.cjs +111 -114
- package/dist/cjs/components/popup/index.cjs +166 -151
- package/dist/cjs/components/title/index.cjs +34 -47
- package/dist/cjs/components/tooltip/index.cjs +70 -61
- package/dist/cjs/components/widget/index.cjs +52 -72
- package/dist/cjs/index.cjs +13 -40
- package/dist/cjs/layout/glass-overlay.cjs +15 -28
- package/dist/cjs/layout/layered-manager.cjs +20 -29
- package/dist/cjs/layout/layplux.cjs +19 -32
- package/dist/cjs/layout/root-pane.cjs +20 -38
- package/dist/cjs/layout/skeleton/bottom-area.cjs +26 -43
- package/dist/cjs/layout/skeleton/bottom-left-area.cjs +12 -29
- package/dist/cjs/layout/skeleton/bottom-right-area.cjs +11 -28
- package/dist/cjs/layout/skeleton/center-area.cjs +278 -371
- package/dist/cjs/layout/skeleton/index.cjs +7 -24
- package/dist/cjs/layout/skeleton/left-bottom-area.cjs +12 -29
- package/dist/cjs/layout/skeleton/left-top-area.cjs +12 -29
- package/dist/cjs/layout/skeleton/right-bottom-area.cjs +11 -28
- package/dist/cjs/layout/skeleton/right-top-area.cjs +11 -28
- package/dist/cjs/layout/skeleton/skeleton.cjs +55 -60
- package/dist/cjs/layout/skeleton/top-area.cjs +26 -43
- package/dist/cjs/locales/en-US.cjs +11 -30
- package/dist/cjs/locales/index.cjs +12 -30
- package/dist/cjs/locales/zh-CN.cjs +11 -30
- package/dist/cjs/managers/area.cjs +12 -25
- package/dist/cjs/managers/index.cjs +12 -20
- package/dist/cjs/managers/pane.cjs +12 -26
- package/dist/cjs/managers/skeleton.cjs +112 -124
- package/dist/cjs/managers/theme.cjs +8 -29
- package/dist/cjs/managers/widget-container.cjs +31 -31
- package/dist/cjs/managers/widget.cjs +63 -50
- package/dist/cjs/types/config.cjs +2 -16
- package/dist/cjs/types/index.cjs +2 -18
- package/dist/cjs/types/locale.cjs +2 -16
- package/dist/cjs/utils/event-bus.cjs +53 -49
- package/dist/cjs/utils/focus-tracker.cjs +66 -42
- package/dist/cjs/utils/index.cjs +23 -31
- package/dist/cjs/utils/unique-id.cjs +5 -24
- package/dist/cjs/utils/vue.cjs +20 -30
- package/dist/esm/components/center-view/index.mjs +15 -7
- package/dist/esm/components/corner-glow/index.mjs +8 -7
- package/dist/esm/components/dropdown/index.mjs +117 -101
- package/dist/esm/components/icon/index.mjs +24 -30
- package/dist/esm/components/index.mjs +7 -8
- package/dist/esm/components/panel-view/index.mjs +107 -98
- package/dist/esm/components/popup/index.mjs +155 -130
- package/dist/esm/components/title/index.mjs +29 -24
- package/dist/esm/components/tooltip/index.mjs +67 -40
- package/dist/esm/components/widget/index.mjs +45 -48
- package/dist/esm/index.mjs +4 -10
- package/dist/esm/layout/glass-overlay.mjs +12 -7
- package/dist/esm/layout/layered-manager.mjs +17 -8
- package/dist/esm/layout/layplux.mjs +14 -11
- package/dist/esm/layout/root-pane.mjs +16 -16
- package/dist/esm/layout/skeleton/bottom-area.mjs +23 -22
- package/dist/esm/layout/skeleton/bottom-left-area.mjs +9 -8
- package/dist/esm/layout/skeleton/bottom-right-area.mjs +8 -7
- package/dist/esm/layout/skeleton/center-area.mjs +251 -333
- package/dist/esm/layout/skeleton/index.mjs +1 -4
- package/dist/esm/layout/skeleton/left-bottom-area.mjs +9 -8
- package/dist/esm/layout/skeleton/left-top-area.mjs +9 -8
- package/dist/esm/layout/skeleton/right-bottom-area.mjs +8 -7
- package/dist/esm/layout/skeleton/right-top-area.mjs +8 -7
- package/dist/esm/layout/skeleton/skeleton.mjs +52 -39
- package/dist/esm/layout/skeleton/top-area.mjs +23 -22
- package/dist/esm/locales/en-US.mjs +9 -10
- package/dist/esm/locales/index.mjs +7 -9
- package/dist/esm/locales/zh-CN.mjs +9 -10
- package/dist/esm/managers/area.mjs +10 -5
- package/dist/esm/managers/index.mjs +3 -3
- package/dist/esm/managers/pane.mjs +9 -5
- package/dist/esm/managers/skeleton.mjs +97 -95
- package/dist/esm/managers/theme.mjs +6 -9
- package/dist/esm/managers/widget-container.mjs +28 -10
- package/dist/esm/managers/widget.mjs +55 -25
- package/dist/esm/types/config.mjs +1 -0
- package/dist/esm/types/index.mjs +1 -1
- package/dist/esm/types/locale.mjs +1 -0
- package/dist/esm/utils/event-bus.mjs +46 -17
- package/dist/esm/utils/focus-tracker.mjs +63 -23
- package/dist/esm/utils/index.mjs +7 -10
- package/dist/esm/utils/unique-id.mjs +3 -4
- package/dist/esm/utils/vue.mjs +13 -5
- package/dist/types/managers/skeleton.d.ts.map +1 -1
- package/dist/umd/index.js +2 -30
- package/package.json +18 -14
|
@@ -1,68 +1,77 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
var
|
|
4
|
-
var
|
|
5
|
-
var
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
};
|
|
18
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
-
var tooltip_exports = {};
|
|
20
|
-
__export(tooltip_exports, {
|
|
21
|
-
Tooltip: () => Tooltip
|
|
22
|
-
});
|
|
23
|
-
module.exports = __toCommonJS(tooltip_exports);
|
|
24
|
-
var import_jsx_runtime = require("vue/jsx-runtime");
|
|
25
|
-
var import_vue = require("vue");
|
|
26
|
-
var import_utils = require("../../utils");
|
|
27
|
-
var import_popup = require("../popup");
|
|
28
|
-
const Tooltip = (0, import_vue.defineComponent)({
|
|
29
|
-
name: "LaypluxTooltip",
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var vue = require('vue');
|
|
4
|
+
var index = require('../popup/index.cjs');
|
|
5
|
+
var vue$1 = require('../../utils/vue.cjs');
|
|
6
|
+
|
|
7
|
+
/*
|
|
8
|
+
* @Author: shuwen 1243889238@qq.com
|
|
9
|
+
* @Date: 2026-06-08 16:12:13
|
|
10
|
+
* @LastEditors: shuwen 1243889238@qq.com
|
|
11
|
+
* @LastEditTime: 2026-06-09 16:58:03
|
|
12
|
+
* @FilePath: /Layplux/packages/layplux/src/components/tooltip/index.tsx
|
|
13
|
+
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
|
|
14
|
+
*/
|
|
15
|
+
const Tooltip = vue.defineComponent({
|
|
16
|
+
name: 'LaypluxTooltip',
|
|
30
17
|
props: {
|
|
31
18
|
title: [String, Object, Function],
|
|
32
|
-
trigger: {
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
19
|
+
trigger: {
|
|
20
|
+
type: String,
|
|
21
|
+
default: 'hover'
|
|
22
|
+
},
|
|
23
|
+
placement: {
|
|
24
|
+
type: String,
|
|
25
|
+
default: 'top'
|
|
26
|
+
},
|
|
27
|
+
mouseEnterDelay: {
|
|
28
|
+
type: Number,
|
|
29
|
+
default: 100
|
|
30
|
+
},
|
|
31
|
+
mouseLeaveDelay: {
|
|
32
|
+
type: Number,
|
|
33
|
+
default: 100
|
|
34
|
+
},
|
|
36
35
|
visible: Boolean,
|
|
37
|
-
disabled: {
|
|
38
|
-
|
|
36
|
+
disabled: {
|
|
37
|
+
type: Boolean,
|
|
38
|
+
default: false
|
|
39
|
+
},
|
|
40
|
+
getContainer: {
|
|
41
|
+
type: Function,
|
|
42
|
+
default: () => document.body
|
|
43
|
+
}
|
|
39
44
|
},
|
|
40
|
-
emits: [
|
|
41
|
-
setup(props, {
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
}
|
|
45
|
+
emits: ['update:visible'],
|
|
46
|
+
setup(props, {
|
|
47
|
+
emit,
|
|
48
|
+
slots
|
|
49
|
+
}) {
|
|
50
|
+
return () => vue.createVNode(index.Popup, {
|
|
51
|
+
"visible": props.visible,
|
|
52
|
+
"trigger": props.trigger,
|
|
53
|
+
"placement": props.placement,
|
|
54
|
+
"disabled": props.disabled,
|
|
55
|
+
"mouseEnterDelay": props.mouseEnterDelay,
|
|
56
|
+
"mouseLeaveDelay": props.mouseLeaveDelay,
|
|
57
|
+
"destroyOnClose": true,
|
|
58
|
+
"getContainer": props.getContainer,
|
|
59
|
+
"onUpdate:visible": v => emit('update:visible', v)
|
|
60
|
+
}, {
|
|
61
|
+
default: () => slots.default?.(),
|
|
62
|
+
content: () => {
|
|
63
|
+
const hasContent = slots.content;
|
|
64
|
+
const titleNode = hasContent ? slots.content?.() : vue$1.createContent(props.title);
|
|
65
|
+
return vue.createVNode("div", {
|
|
66
|
+
"class": "layplux-tooltip"
|
|
67
|
+
}, [vue.createVNode("div", {
|
|
68
|
+
"class": "layplux-tooltip__arrow"
|
|
69
|
+
}, null), vue.createVNode("div", {
|
|
70
|
+
"class": "layplux-tooltip__inner"
|
|
71
|
+
}, [titleNode])]);
|
|
65
72
|
}
|
|
66
|
-
);
|
|
73
|
+
});
|
|
67
74
|
}
|
|
68
75
|
});
|
|
76
|
+
|
|
77
|
+
exports.Tooltip = Tooltip;
|
|
@@ -1,104 +1,84 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
var
|
|
4
|
-
var
|
|
5
|
-
var
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
};
|
|
10
|
-
var __copyProps = (to, from, except, desc) => {
|
|
11
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
-
for (let key of __getOwnPropNames(from))
|
|
13
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
-
}
|
|
16
|
-
return to;
|
|
17
|
-
};
|
|
18
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
-
var widget_exports = {};
|
|
20
|
-
__export(widget_exports, {
|
|
21
|
-
WidgetTitleView: () => WidgetTitleView,
|
|
22
|
-
WidgetView: () => WidgetView
|
|
23
|
-
});
|
|
24
|
-
module.exports = __toCommonJS(widget_exports);
|
|
25
|
-
var import_jsx_runtime = require("vue/jsx-runtime");
|
|
26
|
-
var import_vue = require("vue");
|
|
27
|
-
var import_title = require("../title");
|
|
28
|
-
var import_tooltip = require("../tooltip");
|
|
29
|
-
const WidgetView = (0, import_vue.defineComponent)({
|
|
30
|
-
name: "WidgetView",
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var vue = require('vue');
|
|
4
|
+
var index$1 = require('../title/index.cjs');
|
|
5
|
+
var index = require('../tooltip/index.cjs');
|
|
6
|
+
|
|
7
|
+
const WidgetView = vue.defineComponent({
|
|
8
|
+
name: 'WidgetView',
|
|
31
9
|
inheritAttrs: false,
|
|
32
10
|
props: {
|
|
33
11
|
widget: Object
|
|
34
12
|
},
|
|
35
13
|
setup(props) {
|
|
36
|
-
const hasError =
|
|
37
|
-
const errorMessage =
|
|
38
|
-
|
|
14
|
+
const hasError = vue.ref(false);
|
|
15
|
+
const errorMessage = vue.ref('');
|
|
16
|
+
vue.onErrorCaptured(err => {
|
|
39
17
|
hasError.value = true;
|
|
40
18
|
errorMessage.value = err.message;
|
|
41
19
|
console.error(`[Layplux] Widget "${props.widget?.name}" crashed:`, err);
|
|
42
20
|
return false;
|
|
43
21
|
});
|
|
44
22
|
return () => {
|
|
45
|
-
const {
|
|
23
|
+
const {
|
|
24
|
+
widget
|
|
25
|
+
} = props;
|
|
46
26
|
if (hasError.value) {
|
|
47
27
|
const fallback = widget?.config.props?.errorFallback;
|
|
48
28
|
if (fallback) {
|
|
49
|
-
return
|
|
29
|
+
return vue.h(fallback, {
|
|
30
|
+
error: errorMessage.value,
|
|
31
|
+
widget
|
|
32
|
+
});
|
|
50
33
|
}
|
|
51
|
-
return
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
widget?.name,
|
|
55
|
-
'" \u53D1\u751F\u9519\u8BEF'
|
|
56
|
-
] }),
|
|
57
|
-
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("pre", { children: errorMessage.value })
|
|
58
|
-
] });
|
|
34
|
+
return vue.createVNode("div", {
|
|
35
|
+
"class": "layplux-widget-error"
|
|
36
|
+
}, [vue.createVNode("span", null, [vue.createTextVNode("\u7EC4\u4EF6 \""), widget?.name, vue.createTextVNode("\" \u53D1\u751F\u9519\u8BEF")]), vue.createVNode("pre", null, [errorMessage.value])]);
|
|
59
37
|
}
|
|
60
|
-
return
|
|
38
|
+
return vue.createVNode(vue.Fragment, null, [widget?.renderBody()]);
|
|
61
39
|
};
|
|
62
40
|
}
|
|
63
41
|
});
|
|
64
|
-
const WidgetTitleView =
|
|
65
|
-
name:
|
|
42
|
+
const WidgetTitleView = vue.defineComponent({
|
|
43
|
+
name: 'WidgetTitleView',
|
|
66
44
|
inheritAttrs: false,
|
|
67
45
|
props: {
|
|
68
46
|
widget: Object
|
|
69
47
|
},
|
|
70
48
|
setup(props) {
|
|
71
|
-
const tooltipVisible =
|
|
49
|
+
const tooltipVisible = vue.ref(false);
|
|
72
50
|
const handleClick = () => {
|
|
73
51
|
tooltipVisible.value = false;
|
|
74
52
|
props.widget?.container?.toggleActive(props.widget?.name);
|
|
75
53
|
};
|
|
76
54
|
return () => {
|
|
77
|
-
const {
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
) });
|
|
55
|
+
const {
|
|
56
|
+
widget
|
|
57
|
+
} = props;
|
|
58
|
+
const tooltipTitle = widget?.config.props?.title ?? widget?.name ?? '';
|
|
59
|
+
return vue.createVNode("div", {
|
|
60
|
+
"class": "widget-title-view"
|
|
61
|
+
}, [vue.createVNode(index.Tooltip, {
|
|
62
|
+
"visible": tooltipVisible.value,
|
|
63
|
+
"onUpdate:visible": v => {
|
|
64
|
+
tooltipVisible.value = v;
|
|
65
|
+
},
|
|
66
|
+
"title": tooltipTitle,
|
|
67
|
+
"placement": "right",
|
|
68
|
+
"mouseEnterDelay": 500,
|
|
69
|
+
"getContainer": () => document.querySelector('.layplux-root') || document.body
|
|
70
|
+
}, {
|
|
71
|
+
default: () => [vue.createVNode(index$1.TitleView, {
|
|
72
|
+
"onClick": handleClick,
|
|
73
|
+
"focused": widget?.focused.value,
|
|
74
|
+
"state": widget?.active.value ? 'active' : 'idle',
|
|
75
|
+
"icon": widget?.config.props?.icon,
|
|
76
|
+
"title": widget?.config.props?.title
|
|
77
|
+
}, null)]
|
|
78
|
+
})]);
|
|
102
79
|
};
|
|
103
80
|
}
|
|
104
81
|
});
|
|
82
|
+
|
|
83
|
+
exports.WidgetTitleView = WidgetTitleView;
|
|
84
|
+
exports.WidgetView = WidgetView;
|
package/dist/cjs/index.cjs
CHANGED
|
@@ -1,40 +1,13 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
var
|
|
4
|
-
var
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
for (let key of __getOwnPropNames(from))
|
|
15
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
-
}
|
|
18
|
-
return to;
|
|
19
|
-
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
-
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
-
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
-
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
-
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
-
mod
|
|
27
|
-
));
|
|
28
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
-
var index_exports = {};
|
|
30
|
-
__export(index_exports, {
|
|
31
|
-
FocusTracker: () => import_focus_tracker.FocusTracker,
|
|
32
|
-
Layplux: () => import_layplux.default,
|
|
33
|
-
createPluginEventBus: () => import_event_bus.createPluginEventBus,
|
|
34
|
-
useSkeleton: () => import_skeleton.useSkeleton
|
|
35
|
-
});
|
|
36
|
-
module.exports = __toCommonJS(index_exports);
|
|
37
|
-
var import_layplux = __toESM(require("./layout/layplux"), 1);
|
|
38
|
-
var import_skeleton = require("./managers/skeleton");
|
|
39
|
-
var import_event_bus = require("./utils/event-bus");
|
|
40
|
-
var import_focus_tracker = require("./utils/focus-tracker");
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var layplux = require('./layout/layplux.cjs');
|
|
4
|
+
var skeleton = require('./managers/skeleton.cjs');
|
|
5
|
+
var eventBus = require('./utils/event-bus.cjs');
|
|
6
|
+
var focusTracker = require('./utils/focus-tracker.cjs');
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
|
|
10
|
+
exports.Layplux = layplux.default;
|
|
11
|
+
exports.useSkeleton = skeleton.useSkeleton;
|
|
12
|
+
exports.createPluginEventBus = eventBus.createPluginEventBus;
|
|
13
|
+
exports.FocusTracker = focusTracker.FocusTracker;
|
|
@@ -1,31 +1,18 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
var
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
-
}
|
|
16
|
-
return to;
|
|
17
|
-
};
|
|
18
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
-
var glass_overlay_exports = {};
|
|
20
|
-
__export(glass_overlay_exports, {
|
|
21
|
-
GlassOverlay: () => GlassOverlay
|
|
22
|
-
});
|
|
23
|
-
module.exports = __toCommonJS(glass_overlay_exports);
|
|
24
|
-
var import_jsx_runtime = require("vue/jsx-runtime");
|
|
25
|
-
var import_vue = require("vue");
|
|
26
|
-
const GlassOverlay = (0, import_vue.defineComponent)({
|
|
27
|
-
name: "GlassOverlay",
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var vue = require('vue');
|
|
4
|
+
|
|
5
|
+
/**
|
|
6
|
+
* 玻璃面板(GlassOverlay)是Layplux中的一个重要组件,它位于整个界面的最顶层,覆盖在所有其他内容之上。
|
|
7
|
+
* 这个组件的主要作用是提供一个透明的层,用于捕获用户的交互事件,例如鼠标点击、拖动等。
|
|
8
|
+
* 通过玻璃面板,Layplux能够实现一些特殊的交互效果,比如拖放操作、全局事件监听等。
|
|
9
|
+
* 玻璃面板就像一层透明的保护膜,既能保护底层内容,又能提供丰富的交互功能,使得用户界面更加灵活和响应式。
|
|
10
|
+
*/
|
|
11
|
+
const GlassOverlay = vue.defineComponent({
|
|
12
|
+
name: 'GlassOverlay',
|
|
28
13
|
setup() {
|
|
29
|
-
return () =>
|
|
14
|
+
return () => vue.createVNode("div", null, null);
|
|
30
15
|
}
|
|
31
16
|
});
|
|
17
|
+
|
|
18
|
+
exports.GlassOverlay = GlassOverlay;
|
|
@@ -1,35 +1,26 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
var
|
|
4
|
-
var
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
-
}
|
|
16
|
-
return to;
|
|
17
|
-
};
|
|
18
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
-
var layered_manager_exports = {};
|
|
20
|
-
__export(layered_manager_exports, {
|
|
21
|
-
LayeredManager: () => LayeredManager
|
|
22
|
-
});
|
|
23
|
-
module.exports = __toCommonJS(layered_manager_exports);
|
|
24
|
-
var import_jsx_runtime = require("vue/jsx-runtime");
|
|
25
|
-
var import_vue = require("vue");
|
|
26
|
-
var import_skeleton = require("./skeleton");
|
|
27
|
-
const LayeredManager = (0, import_vue.defineComponent)({
|
|
28
|
-
name: "LayeredManager",
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var vue = require('vue');
|
|
4
|
+
var skeleton = require('./skeleton/skeleton.cjs');
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* Z 轴分层容器,把子组件分配到不同"层号",层号大的显示在上方。
|
|
8
|
+
* 预设了五个层:DEFAULT(0)、PALETTE(100)、MODAL(200)、POPUP(300)、DRAG(400)。
|
|
9
|
+
* 在此基础上拓展了自定义层号,用于管理弹出窗口(completion popup、快速文档)和拖拽反馈,
|
|
10
|
+
* 从而避免每次弹窗都创建独立的 OS 窗口,大幅降低渲染开销
|
|
11
|
+
*/
|
|
12
|
+
const LayeredManager = vue.defineComponent({
|
|
13
|
+
name: 'LayeredManager',
|
|
29
14
|
props: {
|
|
30
15
|
skeleton: Object
|
|
31
16
|
},
|
|
32
17
|
setup(props) {
|
|
33
|
-
return () =>
|
|
18
|
+
return () => vue.createVNode("div", {
|
|
19
|
+
"class": "layered-manager"
|
|
20
|
+
}, [vue.createVNode(skeleton.Skeleton, {
|
|
21
|
+
"skeleton": props.skeleton
|
|
22
|
+
}, null)]);
|
|
34
23
|
}
|
|
35
24
|
});
|
|
25
|
+
|
|
26
|
+
exports.LayeredManager = LayeredManager;
|
|
@@ -1,41 +1,28 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
var __copyProps = (to, from, except, desc) => {
|
|
11
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
-
for (let key of __getOwnPropNames(from))
|
|
13
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
-
}
|
|
16
|
-
return to;
|
|
17
|
-
};
|
|
18
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
-
var layplux_exports = {};
|
|
20
|
-
__export(layplux_exports, {
|
|
21
|
-
default: () => layplux_default
|
|
22
|
-
});
|
|
23
|
-
module.exports = __toCommonJS(layplux_exports);
|
|
24
|
-
var import_jsx_runtime = require("vue/jsx-runtime");
|
|
25
|
-
var import_vue = require("vue");
|
|
26
|
-
var import_root_pane = require("./root-pane");
|
|
27
|
-
const Layplux = (0, import_vue.defineComponent)({
|
|
28
|
-
name: "Layplux",
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
+
|
|
5
|
+
var vue = require('vue');
|
|
6
|
+
var rootPane = require('./root-pane.cjs');
|
|
7
|
+
|
|
8
|
+
const Layplux = vue.defineComponent({
|
|
9
|
+
name: 'Layplux',
|
|
29
10
|
props: {
|
|
30
11
|
skeleton: Object
|
|
31
12
|
},
|
|
32
13
|
setup(props) {
|
|
33
|
-
return () =>
|
|
14
|
+
return () => vue.createVNode(rootPane.RootPane, {
|
|
15
|
+
"skeleton": props.skeleton
|
|
16
|
+
}, {
|
|
17
|
+
default: () => [vue.createTextVNode("Layplux")]
|
|
18
|
+
});
|
|
34
19
|
}
|
|
35
20
|
});
|
|
36
|
-
var
|
|
37
|
-
install:
|
|
38
|
-
app.component(
|
|
21
|
+
var layplux = Object.assign(Layplux, {
|
|
22
|
+
install: app => {
|
|
23
|
+
app.component('Layplux', Layplux);
|
|
39
24
|
return app;
|
|
40
25
|
}
|
|
41
26
|
});
|
|
27
|
+
|
|
28
|
+
exports.default = layplux;
|
|
@@ -1,46 +1,28 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
var
|
|
4
|
-
var
|
|
5
|
-
var
|
|
6
|
-
var
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
var __copyProps = (to, from, except, desc) => {
|
|
11
|
-
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
-
for (let key of __getOwnPropNames(from))
|
|
13
|
-
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
-
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
-
}
|
|
16
|
-
return to;
|
|
17
|
-
};
|
|
18
|
-
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
-
var root_pane_exports = {};
|
|
20
|
-
__export(root_pane_exports, {
|
|
21
|
-
RootPane: () => RootPane
|
|
22
|
-
});
|
|
23
|
-
module.exports = __toCommonJS(root_pane_exports);
|
|
24
|
-
var import_jsx_runtime = require("vue/jsx-runtime");
|
|
25
|
-
var import_vue = require("vue");
|
|
26
|
-
var import_layered_manager = require("./layered-manager");
|
|
27
|
-
var import_glass_overlay = require("./glass-overlay");
|
|
28
|
-
var import_components = require("../components");
|
|
29
|
-
const RootPane = (0, import_vue.defineComponent)({
|
|
30
|
-
name: "RootPane",
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var vue = require('vue');
|
|
4
|
+
var layeredManager = require('./layered-manager.cjs');
|
|
5
|
+
var glassOverlay = require('./glass-overlay.cjs');
|
|
6
|
+
var index = require('../components/corner-glow/index.cjs');
|
|
7
|
+
|
|
8
|
+
const RootPane = vue.defineComponent({
|
|
9
|
+
name: 'RootPane',
|
|
31
10
|
props: {
|
|
32
11
|
skeleton: Object
|
|
33
12
|
},
|
|
34
13
|
setup(props) {
|
|
35
|
-
|
|
36
|
-
const rootClass =
|
|
14
|
+
vue.provide('layplux-locale', props.skeleton?.locale);
|
|
15
|
+
const rootClass = vue.computed(() => {
|
|
37
16
|
const dark = props.skeleton?.isDark();
|
|
38
|
-
return [
|
|
17
|
+
return ['layplux-root', dark ? 'dark' : ''].filter(Boolean);
|
|
39
18
|
});
|
|
40
|
-
return () =>
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
19
|
+
return () => vue.createVNode("div", {
|
|
20
|
+
"class": rootClass.value,
|
|
21
|
+
"data-theme": props.skeleton?.themeName?.value
|
|
22
|
+
}, [vue.createVNode(index.CornerGlow, null, null), vue.createVNode(layeredManager.LayeredManager, {
|
|
23
|
+
"skeleton": props.skeleton
|
|
24
|
+
}, null), vue.createVNode(glassOverlay.GlassOverlay, null, null)]);
|
|
45
25
|
}
|
|
46
26
|
});
|
|
27
|
+
|
|
28
|
+
exports.RootPane = RootPane;
|