cnhis-design-vue 3.1.13-beta.1 → 3.1.13-beta.4
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/es/packages/big-table/src/BigTable.vue.d.ts +6 -16
- package/es/packages/big-table/src/BigTable.vue_vue_type_script_setup_true_lang.js +1 -1
- package/es/packages/big-table/style/index.css +5 -0
- package/es/packages/fabric-chart/src/hooks/useCenter.js +56 -10
- package/es/packages/fabric-chart/src/hooks/useDraw.d.ts +1 -1
- package/es/packages/fabric-chart/src/hooks/useDraw.js +70 -7
- package/es/packages/fabric-chart/src/hooks/useTop.js +6 -4
- package/es/packages/fabric-chart/src/interface.d.ts +1 -0
- package/es/packages/form-render/index.d.ts +9 -0
- package/es/packages/form-render/src/FormRender.vue.d.ts +9 -0
- package/es/packages/form-render/src/FormRender.vue_vue_type_script_setup_true_lang.js +2 -1
- package/es/packages/form-render/src/components/renderer/formItem.d.ts +8 -293
- package/es/packages/form-render/src/components/renderer/formItem.js +135 -2
- package/es/packages/form-render/src/components/renderer/input.js +3 -3
- package/es/packages/form-render/src/components/renderer/simpleComponent.js +2 -15
- package/es/packages/form-render/src/constants/index.d.ts +2 -1
- package/es/packages/form-render/src/constants/index.js +2 -1
- package/es/packages/form-render/src/hooks/useFieldListAdaptor.js +3 -1
- package/es/packages/form-render/src/hooks/useFormContext.d.ts +2 -1
- package/es/packages/form-render/src/hooks/useFormContext.js +13 -2
- package/es/packages/form-render/src/utils/index.d.ts +5 -2
- package/es/packages/form-render/src/utils/index.js +16 -2
- package/es/packages/form-render/style/index.css +23 -0
- package/es/packages/index.css +39 -0
- package/es/packages/index.d.ts +4 -1
- package/es/packages/index.js +9 -1
- package/es/packages/scale-view/src/hooks/scaleview-init.js +1 -5
- package/es/packages/scale-view/src/hooks/scaleview-submit.js +1 -6
- package/es/packages/scale-view/src/hooks/scaleview-validate.js +0 -3
- package/es/packages/shortcut-provider/index.d.ts +17 -0
- package/es/packages/shortcut-provider/index.js +13 -0
- package/es/packages/shortcut-provider/src/ShortcutProvider.js +4 -0
- package/es/packages/shortcut-provider/src/ShortcutProvider.vue.d.ts +15 -0
- package/es/packages/shortcut-provider/src/ShortcutProvider.vue_vue_type_script_setup_true_lang.js +32 -0
- package/es/packages/shortcut-provider/src/constants/index.d.ts +7 -0
- package/es/packages/shortcut-provider/src/constants/index.js +8 -0
- package/es/packages/shortcut-provider/src/hooks/index.d.ts +2 -0
- package/es/packages/shortcut-provider/src/hooks/index.js +2 -0
- package/es/packages/shortcut-provider/src/hooks/useShortcutSignature.d.ts +4 -0
- package/es/packages/shortcut-provider/src/hooks/useShortcutSignature.js +12 -0
- package/es/packages/shortcut-provider/src/hooks/useShortcuts.d.ts +30 -0
- package/es/packages/shortcut-provider/src/hooks/useShortcuts.js +157 -0
- package/es/packages/shortcut-provider/src/types/index.d.ts +30 -0
- package/es/packages/shortcut-provider/src/types/index.js +1 -0
- package/es/packages/shortcut-provider/src/utils/index.d.ts +7 -0
- package/es/packages/shortcut-provider/src/utils/index.js +49 -0
- package/es/packages/shortcut-provider/style/index.css +3 -0
- package/es/packages/shortcut-setter/constant/index.d.ts +4 -0
- package/es/packages/shortcut-setter/constant/index.js +7 -0
- package/es/packages/shortcut-setter/index.d.ts +4258 -0
- package/es/packages/shortcut-setter/index.js +11 -0
- package/es/packages/shortcut-setter/src/ShortcutSetter.js +4 -0
- package/es/packages/shortcut-setter/src/ShortcutSetter.vue.d.ts +4258 -0
- package/es/packages/shortcut-setter/src/ShortcutSetter.vue_vue_type_script_setup_true_lang.js +38 -0
- package/es/packages/shortcut-setter/src/ShortcutSetterItem.js +4 -0
- package/es/packages/shortcut-setter/src/ShortcutSetterItem.vue.d.ts +4238 -0
- package/es/packages/shortcut-setter/src/ShortcutSetterItem.vue_vue_type_script_setup_true_lang.js +125 -0
- package/es/packages/shortcut-setter/style/index.css +8 -0
- package/es/src/types/index.d.ts +1 -0
- package/package.json +1 -1
- package/test.ts +0 -326
package/es/packages/index.css
CHANGED
|
@@ -249,6 +249,11 @@ body > .vxe-table--tooltip-wrapper {
|
|
|
249
249
|
height: 100%;
|
|
250
250
|
line-height: unset;
|
|
251
251
|
width: 100%;
|
|
252
|
+
display: inline-flex;
|
|
253
|
+
}
|
|
254
|
+
.custom-big-table .vxe-table .vxe-table--header .col--seq .vxe-cell--title,
|
|
255
|
+
.custom-big-table .vxe-table .vxe-table--header .col--checkbox .vxe-cell--title {
|
|
256
|
+
display: inline-block;
|
|
252
257
|
}
|
|
253
258
|
.custom-big-table .vxe-table .vxe-table--footer-wrapper.body--wrapper::-webkit-scrollbar,
|
|
254
259
|
.custom-big-table .vxe-table .vxe-table--body-wrapper::-webkit-scrollbar {
|
|
@@ -2647,6 +2652,23 @@ body > .vxe-table--tooltip-wrapper {
|
|
|
2647
2652
|
.form-render__formItem .n-date-picker {
|
|
2648
2653
|
width: 100%;
|
|
2649
2654
|
}
|
|
2655
|
+
.form-render__formItemLabel {
|
|
2656
|
+
position: relative;
|
|
2657
|
+
display: flex;
|
|
2658
|
+
align-items: center;
|
|
2659
|
+
}
|
|
2660
|
+
.form-render__formItemLabel--annotation {
|
|
2661
|
+
position: absolute;
|
|
2662
|
+
top: 0;
|
|
2663
|
+
right: calc(var(--icon-right) * 1px);
|
|
2664
|
+
cursor: pointer;
|
|
2665
|
+
color: #0067ee;
|
|
2666
|
+
font-size: 16px;
|
|
2667
|
+
user-select: none;
|
|
2668
|
+
}
|
|
2669
|
+
.form-render__formItemLabel--annotation.is-active {
|
|
2670
|
+
color: rgba(255, 152, 40);
|
|
2671
|
+
}
|
|
2650
2672
|
.form-render__linebar {
|
|
2651
2673
|
grid-column: span var(--column) / span var(--column);
|
|
2652
2674
|
}
|
|
@@ -2732,6 +2754,12 @@ body > .vxe-table--tooltip-wrapper {
|
|
|
2732
2754
|
display: flex !important;
|
|
2733
2755
|
gap: 0 8px;
|
|
2734
2756
|
}
|
|
2757
|
+
.form-render .n-form-item-label [form-item-hover-show='true'] {
|
|
2758
|
+
visibility: hidden;
|
|
2759
|
+
}
|
|
2760
|
+
.form-render .n-form-item-label:hover [form-item-hover-show='true'] {
|
|
2761
|
+
visibility: visible;
|
|
2762
|
+
}
|
|
2735
2763
|
.c-fabric-chart-popup-tip,
|
|
2736
2764
|
.c-fabric-chart-popup-menu {
|
|
2737
2765
|
position: absolute;
|
|
@@ -2775,3 +2803,14 @@ body > .vxe-table--tooltip-wrapper {
|
|
|
2775
2803
|
.c-fabric-chart-popup-menu > li.no-click:hover {
|
|
2776
2804
|
background: #fff;
|
|
2777
2805
|
}
|
|
2806
|
+
.shortcut-provider {
|
|
2807
|
+
outline: none;
|
|
2808
|
+
}
|
|
2809
|
+
.shortcut-setter-item__wrapper {
|
|
2810
|
+
display: flex;
|
|
2811
|
+
}
|
|
2812
|
+
.shortcut-setter-item__operation {
|
|
2813
|
+
margin-left: 12px;
|
|
2814
|
+
display: flex;
|
|
2815
|
+
gap: 12px;
|
|
2816
|
+
}
|
package/es/packages/index.d.ts
CHANGED
|
@@ -16,9 +16,12 @@ import CBpmnWorkflow from './bpmn-workflow';
|
|
|
16
16
|
import Editor from './editor';
|
|
17
17
|
import CFormRender from './form-render';
|
|
18
18
|
import CFabricChart from './fabric-chart';
|
|
19
|
+
import CShortcutProvider from './shortcut-provider';
|
|
20
|
+
import CShortcutSetter from './shortcut-setter';
|
|
19
21
|
export * from './form-render';
|
|
22
|
+
export * from './shortcut-provider';
|
|
20
23
|
declare function install(app: App): void;
|
|
21
|
-
export { CGrid, CBigTable, CFieldSet, CDragLayout, CButtonPrint, CSelectPerson, CSelectLabel, CLabelFormContent, CScaleView, CMap, CVodChunkUpload, CRadio, CCheckbox, CSelect, CDatetime, CFormTable, CInfoHeader, CTimeLine, CBpmnWorkflow, Editor, CFormRender, CFabricChart };
|
|
24
|
+
export { CGrid, CBigTable, CFieldSet, CDragLayout, CButtonPrint, CSelectPerson, CSelectLabel, CLabelFormContent, CScaleView, CMap, CVodChunkUpload, CRadio, CCheckbox, CSelect, CDatetime, CFormTable, CInfoHeader, CTimeLine, CBpmnWorkflow, Editor, CFormRender, CFabricChart, CShortcutProvider, CShortcutSetter };
|
|
22
25
|
declare const _default: {
|
|
23
26
|
install: typeof install;
|
|
24
27
|
};
|
package/es/packages/index.js
CHANGED
|
@@ -32,6 +32,10 @@ import FormRender from './form-render/index.js';
|
|
|
32
32
|
export { default as CFormRender } from './form-render/index.js';
|
|
33
33
|
import FabricChart from './fabric-chart/index.js';
|
|
34
34
|
export { default as CFabricChart } from './fabric-chart/index.js';
|
|
35
|
+
import ShortcutProvider from './shortcut-provider/index.js';
|
|
36
|
+
export { default as CShortcutProvider } from './shortcut-provider/index.js';
|
|
37
|
+
import ShortcutSetter from './shortcut-setter/index.js';
|
|
38
|
+
export { default as CShortcutSetter } from './shortcut-setter/index.js';
|
|
35
39
|
export { useFieldListAdaptor } from './form-render/src/hooks/useFieldListAdaptor.js';
|
|
36
40
|
export { useFormRequest } from './form-render/src/hooks/useFormRequest.js';
|
|
37
41
|
export { useCommonLog } from './form-render/src/hooks/useCommonLog.js';
|
|
@@ -46,6 +50,8 @@ export { FormItemDepsCollector, useFormItemDeps } from './form-render/src/hooks/
|
|
|
46
50
|
export { useInitialData } from './form-render/src/hooks/useInitialData.js';
|
|
47
51
|
export { useAnchor } from './form-render/src/hooks/useAnchor.js';
|
|
48
52
|
export { useFormContext } from './form-render/src/hooks/useFormContext.js';
|
|
53
|
+
export { ShortcutManager, useShortcuts } from './shortcut-provider/src/hooks/useShortcuts.js';
|
|
54
|
+
export { useShortcutSignature } from './shortcut-provider/src/hooks/useShortcutSignature.js';
|
|
49
55
|
|
|
50
56
|
const components = {
|
|
51
57
|
CGrid: Grid,
|
|
@@ -69,7 +75,9 @@ const components = {
|
|
|
69
75
|
CBpmnWorkflow: BpmnWorkflow,
|
|
70
76
|
Editor,
|
|
71
77
|
CFormRender: FormRender,
|
|
72
|
-
CFabricChart: FabricChart
|
|
78
|
+
CFabricChart: FabricChart,
|
|
79
|
+
CShortcutProvider: ShortcutProvider,
|
|
80
|
+
CShortcutSetter: ShortcutSetter
|
|
73
81
|
};
|
|
74
82
|
function install(app) {
|
|
75
83
|
Object.values(components).forEach((component) => {
|
|
@@ -303,14 +303,10 @@ const ScaleViewInit = (props, state, emit, config) => {
|
|
|
303
303
|
let i = 1;
|
|
304
304
|
const results = list.map((item) => {
|
|
305
305
|
const key = formKey(item);
|
|
306
|
-
|
|
306
|
+
(key || "").replace(/\n/g, "");
|
|
307
307
|
item.showTitle = item.title;
|
|
308
308
|
item.val_key = key;
|
|
309
309
|
item.renderCom = componentMap[item.type];
|
|
310
|
-
if (title.includes(".")) {
|
|
311
|
-
let newTitle = title.replace(/\./g, "~-~");
|
|
312
|
-
item.showTitle = newTitle;
|
|
313
|
-
}
|
|
314
310
|
item.isShow = true;
|
|
315
311
|
Object.keys(item).forEach((key2) => {
|
|
316
312
|
if (vexutils.isJSON(item[key2])) {
|
|
@@ -82,12 +82,7 @@ const ScaleViewSubmit = (props, state, emit, config) => {
|
|
|
82
82
|
if (itemTemp.setting && itemTemp.setting.dateType == "date" && tempObj[key])
|
|
83
83
|
tempObj[key] = moment(tempObj[key]).format("YYYY-MM-DD ") + moment().format("HH:mm:ss");
|
|
84
84
|
}
|
|
85
|
-
|
|
86
|
-
let newKey = keyTemp ? keyTemp.replace(/~-~/g, ".") : key.replace(/~-~/g, ".");
|
|
87
|
-
res[newKey] = tempObj[key];
|
|
88
|
-
} else {
|
|
89
|
-
res[keyTemp || key] = !tempObj[key] ? null : tempObj[key];
|
|
90
|
-
}
|
|
85
|
+
res[keyTemp || key] = !tempObj[key] ? null : tempObj[key];
|
|
91
86
|
if (isOnlyOptions(itemTemp.type)) {
|
|
92
87
|
let { options } = itemTemp;
|
|
93
88
|
let useKey = itemTemp.val_key;
|
|
@@ -117,9 +117,6 @@ const ScaleViewValidate = (props, state, config) => {
|
|
|
117
117
|
const rules = {};
|
|
118
118
|
formArray.forEach((item) => {
|
|
119
119
|
let newTitle = item.val_key;
|
|
120
|
-
if (newTitle.includes(".")) {
|
|
121
|
-
newTitle = newTitle.replace(/\./g, "~-~");
|
|
122
|
-
}
|
|
123
120
|
rules[newTitle] = [];
|
|
124
121
|
if (item.required && !filterArr.includes(item.type)) {
|
|
125
122
|
rules[newTitle].push({
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { SFCWithInstall } from '../../../es/src/types';
|
|
2
|
+
export * from './src/hooks';
|
|
3
|
+
export * from './src/types';
|
|
4
|
+
declare const ShortcutProvider: SFCWithInstall<import("vue").DefineComponent<{
|
|
5
|
+
cacheKey: StringConstructor;
|
|
6
|
+
}, {
|
|
7
|
+
shortcutWrapperRef: import("vue").Ref<HTMLElement | undefined>;
|
|
8
|
+
props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
|
|
9
|
+
cacheKey: StringConstructor;
|
|
10
|
+
}>> & {
|
|
11
|
+
[x: `on${string}`]: ((...args: any[]) => any) | ((...args: unknown[]) => any) | undefined;
|
|
12
|
+
}>>;
|
|
13
|
+
manager: import("./src/hooks").ShortcutManager;
|
|
14
|
+
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
|
15
|
+
cacheKey: StringConstructor;
|
|
16
|
+
}>>, {}>>;
|
|
17
|
+
export default ShortcutProvider;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { COMPONENT_NAMESPACE } from '../../src/global/variable';
|
|
2
|
+
import { safeComponentRegister } from '../../src/utils';
|
|
3
|
+
import './src/ShortcutProvider.js';
|
|
4
|
+
import script from './src/ShortcutProvider.vue_vue_type_script_setup_true_lang.js';
|
|
5
|
+
export { ShortcutManager, useShortcuts } from './src/hooks/useShortcuts.js';
|
|
6
|
+
export { useShortcutSignature } from './src/hooks/useShortcutSignature.js';
|
|
7
|
+
|
|
8
|
+
const ShortcutProvider = script;
|
|
9
|
+
ShortcutProvider.install = function(app) {
|
|
10
|
+
safeComponentRegister(app, ShortcutProvider, COMPONENT_NAMESPACE + "ShortcutProvider");
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
export { ShortcutProvider as default };
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { ShortcutManager } from '../../../../es/packages/shortcut-provider';
|
|
2
|
+
declare const _default: import("vue").DefineComponent<{
|
|
3
|
+
cacheKey: StringConstructor;
|
|
4
|
+
}, {
|
|
5
|
+
shortcutWrapperRef: import("vue").Ref<HTMLElement | undefined>;
|
|
6
|
+
props: Readonly<import("@vue/shared").LooseRequired<Readonly<import("vue").ExtractPropTypes<{
|
|
7
|
+
cacheKey: StringConstructor;
|
|
8
|
+
}>> & {
|
|
9
|
+
[x: `on${string}`]: ((...args: any[]) => any) | ((...args: unknown[]) => any) | undefined;
|
|
10
|
+
}>>;
|
|
11
|
+
manager: ShortcutManager;
|
|
12
|
+
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
|
13
|
+
cacheKey: StringConstructor;
|
|
14
|
+
}>>, {}>;
|
|
15
|
+
export default _default;
|
package/es/packages/shortcut-provider/src/ShortcutProvider.vue_vue_type_script_setup_true_lang.js
ADDED
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { defineComponent, ref, provide, onBeforeUnmount, openBlock, createElementBlock, renderSlot } from 'vue';
|
|
2
|
+
import { InjectionShortcutManager } from '../../../packages/shortcut-provider/src/constants';
|
|
3
|
+
import { ShortcutManager } from '../../../packages/shortcut-provider';
|
|
4
|
+
|
|
5
|
+
var script = /* @__PURE__ */ defineComponent({
|
|
6
|
+
__name: "ShortcutProvider",
|
|
7
|
+
props: {
|
|
8
|
+
cacheKey: String
|
|
9
|
+
},
|
|
10
|
+
setup(__props) {
|
|
11
|
+
const props = __props;
|
|
12
|
+
const shortcutWrapperRef = ref();
|
|
13
|
+
const manager = new ShortcutManager(shortcutWrapperRef, props.cacheKey).start();
|
|
14
|
+
provide(InjectionShortcutManager, manager);
|
|
15
|
+
onBeforeUnmount(() => {
|
|
16
|
+
manager.destroy();
|
|
17
|
+
});
|
|
18
|
+
return (_ctx, _cache) => {
|
|
19
|
+
return openBlock(), createElementBlock("section", {
|
|
20
|
+
ref_key: "shortcutWrapperRef",
|
|
21
|
+
ref: shortcutWrapperRef,
|
|
22
|
+
"is-shortcut-capture": "",
|
|
23
|
+
class: "shortcut-provider",
|
|
24
|
+
tabindex: -9999
|
|
25
|
+
}, [
|
|
26
|
+
renderSlot(_ctx.$slots, "default")
|
|
27
|
+
], 512);
|
|
28
|
+
};
|
|
29
|
+
}
|
|
30
|
+
});
|
|
31
|
+
|
|
32
|
+
export { script as default };
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { InjectionKey } from 'vue';
|
|
2
|
+
import { ShortcutManager } from '../../../../../es/packages/shortcut-provider/src/hooks';
|
|
3
|
+
export declare enum ShortcutStatus {
|
|
4
|
+
INACTIVE = 0,
|
|
5
|
+
ACTIVE = 1
|
|
6
|
+
}
|
|
7
|
+
export declare const InjectionShortcutManager: InjectionKey<ShortcutManager>;
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
var ShortcutStatus = /* @__PURE__ */ ((ShortcutStatus2) => {
|
|
2
|
+
ShortcutStatus2[ShortcutStatus2["INACTIVE"] = 0] = "INACTIVE";
|
|
3
|
+
ShortcutStatus2[ShortcutStatus2["ACTIVE"] = 1] = "ACTIVE";
|
|
4
|
+
return ShortcutStatus2;
|
|
5
|
+
})(ShortcutStatus || {});
|
|
6
|
+
const InjectionShortcutManager = Symbol("InjectionShortcutManager");
|
|
7
|
+
|
|
8
|
+
export { InjectionShortcutManager, ShortcutStatus };
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { ref, computed } from 'vue';
|
|
2
|
+
import { transformKey2DisplaySignature } from '../../../../packages/shortcut-provider/src/utils';
|
|
3
|
+
|
|
4
|
+
function useShortcutSignature() {
|
|
5
|
+
const signatureRef = ref(() => "");
|
|
6
|
+
const shortcut = computed(() => {
|
|
7
|
+
return transformKey2DisplaySignature(signatureRef.value());
|
|
8
|
+
});
|
|
9
|
+
return { signatureRef, shortcut };
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
export { useShortcutSignature };
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { ShortcutItem, ShortcutOption, ShortcutSignatureInfo } from '../../../../../es/packages/shortcut-provider/src/types';
|
|
2
|
+
import { MaybeRef } from '@vueuse/core';
|
|
3
|
+
export declare class ShortcutManager {
|
|
4
|
+
private readonly shortcutCallbackMap;
|
|
5
|
+
private readonly shortcutCache;
|
|
6
|
+
private readonly environmentEle;
|
|
7
|
+
private handle?;
|
|
8
|
+
static log(message: string, dryRun?: boolean): string;
|
|
9
|
+
constructor(environmentEle?: MaybeRef<HTMLElement | undefined>, cacheKey?: string);
|
|
10
|
+
get traverse(): unknown[];
|
|
11
|
+
query(key: string): any;
|
|
12
|
+
updateState(key: string, state?: boolean): void;
|
|
13
|
+
update(key: string, info: KeyboardEvent | Partial<ShortcutSignatureInfo>): void;
|
|
14
|
+
register(shortcutItem: ShortcutItem): {
|
|
15
|
+
stop: () => void;
|
|
16
|
+
signature: () => string;
|
|
17
|
+
};
|
|
18
|
+
start(): this;
|
|
19
|
+
destroy(): void;
|
|
20
|
+
}
|
|
21
|
+
export declare function useShortcuts(glob?: boolean): {
|
|
22
|
+
register: (shortcut: ShortcutOption) => {
|
|
23
|
+
stop: () => void;
|
|
24
|
+
signature: () => string;
|
|
25
|
+
};
|
|
26
|
+
traverse: () => unknown[];
|
|
27
|
+
query: (key: string) => any;
|
|
28
|
+
update: (key: string, info: KeyboardEvent | Partial<ShortcutSignatureInfo>) => void;
|
|
29
|
+
updateState: (key: string, state?: boolean) => void;
|
|
30
|
+
};
|
|
@@ -0,0 +1,157 @@
|
|
|
1
|
+
import { ShortcutStatus, InjectionShortcutManager } from '../../../../packages/shortcut-provider/src/constants';
|
|
2
|
+
import { getKeySignature, getDisplaySignature, isKeyboardEvent, findAncestor, isShortcutProvider } from '../../../../packages/shortcut-provider/src/utils';
|
|
3
|
+
import { reactive, unref, getCurrentInstance, inject, onBeforeUnmount } from 'vue';
|
|
4
|
+
import { useStorage, useEventListener, useDebounceFn } from '@vueuse/core';
|
|
5
|
+
import { pick, omit, isFunction, isString } from 'lodash-es';
|
|
6
|
+
|
|
7
|
+
class ShortcutManager {
|
|
8
|
+
constructor(environmentEle, cacheKey = "__shortcut__glob") {
|
|
9
|
+
this.shortcutCallbackMap = reactive(/* @__PURE__ */ new Map());
|
|
10
|
+
this.environmentEle = environmentEle || window;
|
|
11
|
+
this.shortcutCache = useStorage(cacheKey, {}, localStorage, {
|
|
12
|
+
listenToStorageChanges: true,
|
|
13
|
+
deep: true
|
|
14
|
+
});
|
|
15
|
+
}
|
|
16
|
+
static log(message, dryRun = false) {
|
|
17
|
+
const _message = `[ShortcutManager] ${message}`;
|
|
18
|
+
!dryRun && console.warn(_message);
|
|
19
|
+
return _message;
|
|
20
|
+
}
|
|
21
|
+
get traverse() {
|
|
22
|
+
return [...Object.values(this.shortcutCache.value)].sort((a, b) => (a.order || 0) - (b.order || 0));
|
|
23
|
+
}
|
|
24
|
+
query(key) {
|
|
25
|
+
return this.shortcutCache.value[key];
|
|
26
|
+
}
|
|
27
|
+
updateState(key, state) {
|
|
28
|
+
this.query(key) && (this.query(key).disabled = !!state);
|
|
29
|
+
}
|
|
30
|
+
update(key, info) {
|
|
31
|
+
var _a;
|
|
32
|
+
const oldKeySignature = (_a = this.query(key)) == null ? void 0 : _a.currentKeySignature;
|
|
33
|
+
if (oldKeySignature === getKeySignature(info))
|
|
34
|
+
return;
|
|
35
|
+
if (Object.values(this.shortcutCache.value).some((v) => v.currentKeySignature === getKeySignature(info))) {
|
|
36
|
+
throw `\u91CD\u590D\u7684\u5FEB\u6377\u952E=> ${getDisplaySignature(info)}`;
|
|
37
|
+
}
|
|
38
|
+
const item = this.query(key);
|
|
39
|
+
if (!item)
|
|
40
|
+
return;
|
|
41
|
+
item.currentKeySignature = getKeySignature(info);
|
|
42
|
+
this.shortcutCallbackMap.set(getKeySignature(info), this.shortcutCallbackMap.get(oldKeySignature));
|
|
43
|
+
this.shortcutCallbackMap.delete(oldKeySignature);
|
|
44
|
+
}
|
|
45
|
+
register(shortcutItem) {
|
|
46
|
+
const item = this.query(shortcutItem.key);
|
|
47
|
+
if (item) {
|
|
48
|
+
item.status = ShortcutStatus.ACTIVE;
|
|
49
|
+
this.shortcutCallbackMap.set(item.currentKeySignature, shortcutItem.callback);
|
|
50
|
+
Object.assign(item, pick(shortcutItem, ["debounce", "debounceOption", "label", "defaultShortcut", "order", "key"]));
|
|
51
|
+
return createHandler(item);
|
|
52
|
+
}
|
|
53
|
+
this.shortcutCache.value[shortcutItem.key] = omit(shortcutItem, ["callback"]);
|
|
54
|
+
this.shortcutCallbackMap.set(shortcutItem.currentKeySignature, shortcutItem.callback);
|
|
55
|
+
return createHandler(this.shortcutCache.value[shortcutItem.key]);
|
|
56
|
+
function createHandler(shortcut) {
|
|
57
|
+
return {
|
|
58
|
+
stop: () => {
|
|
59
|
+
shortcut.status = ShortcutStatus.INACTIVE;
|
|
60
|
+
},
|
|
61
|
+
signature: () => shortcut.currentKeySignature
|
|
62
|
+
};
|
|
63
|
+
}
|
|
64
|
+
}
|
|
65
|
+
start() {
|
|
66
|
+
if (this.handle) {
|
|
67
|
+
ShortcutManager.log(`\u8BF7\u52FF\u91CD\u590D\u542F\u52A8=>${this}`);
|
|
68
|
+
return this;
|
|
69
|
+
}
|
|
70
|
+
this.handle = async (event) => {
|
|
71
|
+
if (!isKeyboardEvent(event))
|
|
72
|
+
return;
|
|
73
|
+
const providerWrapper = findAncestor(event.target, isShortcutProvider);
|
|
74
|
+
if (providerWrapper && providerWrapper !== unref(this.environmentEle)) {
|
|
75
|
+
return;
|
|
76
|
+
}
|
|
77
|
+
const keySignature = getKeySignature(event);
|
|
78
|
+
const callback = this.shortcutCallbackMap.get(keySignature);
|
|
79
|
+
if (!callback)
|
|
80
|
+
return;
|
|
81
|
+
const shortcutItem = Object.values(this.shortcutCache.value).find((item) => item.currentKeySignature === keySignature);
|
|
82
|
+
if (!shortcutItem || shortcutItem.status !== ShortcutStatus.ACTIVE || shortcutItem.disabled)
|
|
83
|
+
return;
|
|
84
|
+
callback();
|
|
85
|
+
};
|
|
86
|
+
useEventListener(this.environmentEle, "keyup", this.handle, { capture: true });
|
|
87
|
+
return this;
|
|
88
|
+
}
|
|
89
|
+
destroy() {
|
|
90
|
+
var _a;
|
|
91
|
+
this.handle && ((_a = unref(this.environmentEle)) == null ? void 0 : _a.removeEventListener("keyup", this.handle, { capture: true }));
|
|
92
|
+
this.handle = void 0;
|
|
93
|
+
this.shortcutCallbackMap.clear();
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
const globManager = new ShortcutManager().start();
|
|
97
|
+
function useShortcuts(glob = false) {
|
|
98
|
+
function useManager() {
|
|
99
|
+
if (getCurrentInstance() && !glob) {
|
|
100
|
+
return inject(InjectionShortcutManager, globManager);
|
|
101
|
+
} else {
|
|
102
|
+
ShortcutManager.log("\u975Esetup\u8BED\u5883\u4E0B\u7684shortcut\u5C06\u5F71\u54CD\u5168\u5C40");
|
|
103
|
+
return globManager;
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
const manager = useManager();
|
|
107
|
+
function createShortcutItem(shortcut) {
|
|
108
|
+
return {
|
|
109
|
+
...shortcut,
|
|
110
|
+
currentKeySignature: getKeySignature(shortcut.defaultShortcut),
|
|
111
|
+
key: keyFor(shortcut),
|
|
112
|
+
status: ShortcutStatus.ACTIVE,
|
|
113
|
+
disabled: false,
|
|
114
|
+
callback: callbackFor(shortcut)
|
|
115
|
+
};
|
|
116
|
+
function callbackFor(shortcut2) {
|
|
117
|
+
var _a, _b;
|
|
118
|
+
if (!isFunction(shortcut2.callback)) {
|
|
119
|
+
throw new Error(ShortcutManager.log(`\u975E\u6CD5\u7684callback\u7C7B\u578B=>${shortcut2.callback}`, true));
|
|
120
|
+
}
|
|
121
|
+
if (!shortcut2.debounce)
|
|
122
|
+
return shortcut2.callback;
|
|
123
|
+
return useDebounceFn(shortcut2.callback, (_b = (_a = shortcut2.debounceOption) == null ? void 0 : _a.duration) != null ? _b : 300);
|
|
124
|
+
}
|
|
125
|
+
function keyFor(shortcut2) {
|
|
126
|
+
const key = shortcut2.key || shortcut2.label;
|
|
127
|
+
if (!isString(key)) {
|
|
128
|
+
throw new Error(ShortcutManager.log(`\u975E\u6CD5\u7684key\u7C7B\u578B=>${key}`, true));
|
|
129
|
+
}
|
|
130
|
+
return key;
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
function register(shortcut) {
|
|
134
|
+
const { stop, signature } = manager.register(createShortcutItem(shortcut));
|
|
135
|
+
if (getCurrentInstance()) {
|
|
136
|
+
onBeforeUnmount(stop);
|
|
137
|
+
} else {
|
|
138
|
+
ShortcutManager.log("\u5728\u975Esetup\u8BED\u5883\u4E0B\u4F7F\u7528register\u51FD\u6570,\u7EC4\u4EF6\u9500\u6BC1\u65F6\u9700\u8981\u624B\u52A8\u8C03\u7528stop\u51FD\u6570\u4F7F\u5FEB\u6377\u952E\u5931\u6D3B");
|
|
139
|
+
}
|
|
140
|
+
return { stop, signature };
|
|
141
|
+
}
|
|
142
|
+
function traverse() {
|
|
143
|
+
return glob ? globManager.traverse : manager.traverse;
|
|
144
|
+
}
|
|
145
|
+
function query(key) {
|
|
146
|
+
return manager.query(key);
|
|
147
|
+
}
|
|
148
|
+
function update(key, info) {
|
|
149
|
+
manager.update(key, info);
|
|
150
|
+
}
|
|
151
|
+
function updateState(key, state) {
|
|
152
|
+
manager.updateState(key, state);
|
|
153
|
+
}
|
|
154
|
+
return { register, traverse, query, update, updateState };
|
|
155
|
+
}
|
|
156
|
+
|
|
157
|
+
export { ShortcutManager, useShortcuts };
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { ArrayAble } from '../../../../../es/src/types';
|
|
2
|
+
import { VNode } from 'vue';
|
|
3
|
+
import { ShortcutStatus } from '../../../../../es/packages/shortcut-provider/src/constants';
|
|
4
|
+
declare type Render = () => ArrayAble<VNode>;
|
|
5
|
+
export interface ShortcutSignatureInfo {
|
|
6
|
+
ctrl?: boolean;
|
|
7
|
+
shift?: boolean;
|
|
8
|
+
alt?: boolean;
|
|
9
|
+
key: string;
|
|
10
|
+
}
|
|
11
|
+
export interface ShortcutOption {
|
|
12
|
+
label: string | Render;
|
|
13
|
+
key?: string;
|
|
14
|
+
defaultShortcut: ShortcutSignatureInfo;
|
|
15
|
+
order?: number;
|
|
16
|
+
debounce?: boolean;
|
|
17
|
+
debounceOption?: {
|
|
18
|
+
duration?: number;
|
|
19
|
+
};
|
|
20
|
+
beforeTrigger?(): void | Promise<unknown>;
|
|
21
|
+
callback(): void;
|
|
22
|
+
afterTrigger?(): void | Promise<unknown>;
|
|
23
|
+
}
|
|
24
|
+
export interface ShortcutItem extends ShortcutOption {
|
|
25
|
+
status: ShortcutStatus;
|
|
26
|
+
currentKeySignature: string;
|
|
27
|
+
key: string;
|
|
28
|
+
disabled: boolean;
|
|
29
|
+
}
|
|
30
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { ShortcutSignatureInfo } from '../../../../../es/packages/shortcut-provider/src/types';
|
|
2
|
+
export declare function isKeyboardEvent(event: any): event is KeyboardEvent;
|
|
3
|
+
export declare function getKeySignature(info: KeyboardEvent | Partial<ShortcutSignatureInfo>): string;
|
|
4
|
+
export declare function getDisplaySignature(info: KeyboardEvent | Partial<ShortcutSignatureInfo>): string;
|
|
5
|
+
export declare function transformKey2DisplaySignature(keySignature: string): string;
|
|
6
|
+
export declare function isShortcutProvider(ele: HTMLElement): boolean;
|
|
7
|
+
export declare function findAncestor(ele: HTMLElement | null, finder: (ele: HTMLElement) => boolean): HTMLElement | null;
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
function isKeyboardEvent(event) {
|
|
2
|
+
return Reflect.get(event, "view") === window && Reflect.get(event, "shiftKey") != void 0;
|
|
3
|
+
}
|
|
4
|
+
function normalizeSignatureInfo(info) {
|
|
5
|
+
var _a, _b;
|
|
6
|
+
let ctrl, shift, alt;
|
|
7
|
+
const key = (_b = (_a = info.key) == null ? void 0 : _a.toLowerCase()) != null ? _b : "";
|
|
8
|
+
if (isKeyboardEvent(info)) {
|
|
9
|
+
ctrl = info.ctrlKey;
|
|
10
|
+
shift = info.shiftKey;
|
|
11
|
+
alt = info.altKey;
|
|
12
|
+
} else {
|
|
13
|
+
ctrl = !!info.ctrl;
|
|
14
|
+
shift = !!info.shift;
|
|
15
|
+
alt = !!info.alt;
|
|
16
|
+
}
|
|
17
|
+
return { ctrl, shift, alt, key };
|
|
18
|
+
}
|
|
19
|
+
function getKeySignature(info) {
|
|
20
|
+
const { ctrl, shift, alt, key } = normalizeSignatureInfo(info);
|
|
21
|
+
return `${ctrl ? "CTRL_" : ""}${shift ? "SHIFT_" : ""}${alt ? "ALT_" : ""}${key}`;
|
|
22
|
+
}
|
|
23
|
+
const keyBlackList = ["control", "alt", "shift"];
|
|
24
|
+
const inBlackList = (key) => {
|
|
25
|
+
return keyBlackList.includes(key);
|
|
26
|
+
};
|
|
27
|
+
function getDisplaySignature(info) {
|
|
28
|
+
const { ctrl, shift, alt, key } = normalizeSignatureInfo(info);
|
|
29
|
+
return `${ctrl ? "ctrl+ " : ""}${alt ? "alt + " : ""}${shift ? "shift + " : ""}${inBlackList(key) ? "" : key}`;
|
|
30
|
+
}
|
|
31
|
+
function transformKey2DisplaySignature(keySignature) {
|
|
32
|
+
return keySignature.toLowerCase().replace(/_/g, " + ");
|
|
33
|
+
}
|
|
34
|
+
function isShortcutProvider(ele) {
|
|
35
|
+
return ele && ele.getAttribute("is-shortcut-capture") != void 0;
|
|
36
|
+
}
|
|
37
|
+
function findAncestor(ele, finder) {
|
|
38
|
+
if (!ele)
|
|
39
|
+
return ele;
|
|
40
|
+
if (finder(ele))
|
|
41
|
+
return ele;
|
|
42
|
+
let next = ele.parentElement;
|
|
43
|
+
while (next && !finder(next)) {
|
|
44
|
+
next = next.parentElement;
|
|
45
|
+
}
|
|
46
|
+
return next;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
export { findAncestor, getDisplaySignature, getKeySignature, isKeyboardEvent, isShortcutProvider, transformKey2DisplaySignature };
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
var ShortcutInputState = /* @__PURE__ */ ((ShortcutInputState2) => {
|
|
2
|
+
ShortcutInputState2[ShortcutInputState2["STATIC"] = 0] = "STATIC";
|
|
3
|
+
ShortcutInputState2[ShortcutInputState2["EDIT"] = 1] = "EDIT";
|
|
4
|
+
return ShortcutInputState2;
|
|
5
|
+
})(ShortcutInputState || {});
|
|
6
|
+
|
|
7
|
+
export { ShortcutInputState };
|