@mantou/gem 1.6.9 → 1.6.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/gem.es.js +170 -182
- package/dist/gem.umd.js +23 -23
- package/elements/{dialog-base.d.ts → base/dialog.d.ts} +3 -3
- package/elements/base/dialog.d.ts.map +1 -0
- package/elements/{dialog-base.js → base/dialog.js} +24 -24
- package/elements/base/dialog.js.map +1 -0
- package/elements/base/gesture.d.ts +66 -0
- package/elements/base/gesture.d.ts.map +1 -0
- package/elements/base/gesture.js +214 -0
- package/elements/base/gesture.js.map +1 -0
- package/elements/base/link.d.ts +44 -0
- package/elements/base/link.d.ts.map +1 -0
- package/elements/base/link.js +206 -0
- package/elements/base/link.js.map +1 -0
- package/elements/{modal-base.d.ts → base/modal-factory.d.ts} +17 -8
- package/elements/base/modal-factory.d.ts.map +1 -0
- package/elements/{modal-base.js → base/modal-factory.js} +4 -4
- package/elements/base/modal-factory.js.map +1 -0
- package/elements/base/reflect.d.ts +6 -0
- package/elements/base/reflect.d.ts.map +1 -0
- package/elements/base/reflect.js +33 -0
- package/elements/base/reflect.js.map +1 -0
- package/elements/base/route.d.ts +78 -0
- package/elements/base/route.d.ts.map +1 -0
- package/elements/base/route.js +220 -0
- package/elements/base/route.js.map +1 -0
- package/elements/base/title.d.ts +30 -0
- package/elements/base/title.d.ts.map +1 -0
- package/elements/base/title.js +74 -0
- package/elements/base/title.js.map +1 -0
- package/elements/base/unsafe.d.ts +14 -0
- package/elements/base/unsafe.d.ts.map +1 -0
- package/elements/base/unsafe.js +42 -0
- package/elements/base/unsafe.js.map +1 -0
- package/elements/base/use.d.ts +19 -0
- package/elements/base/use.d.ts.map +1 -0
- package/elements/base/use.js +70 -0
- package/elements/base/use.js.map +1 -0
- package/elements/gesture.d.ts +1 -67
- package/elements/gesture.d.ts.map +1 -1
- package/elements/gesture.js +3 -219
- package/elements/gesture.js.map +1 -1
- package/elements/link.d.ts +1 -45
- package/elements/link.d.ts.map +1 -1
- package/elements/link.js +4 -208
- package/elements/link.js.map +1 -1
- package/elements/reflect.d.ts +1 -8
- package/elements/reflect.d.ts.map +1 -1
- package/elements/reflect.js +3 -39
- package/elements/reflect.js.map +1 -1
- package/elements/route.d.ts +1 -81
- package/elements/route.d.ts.map +1 -1
- package/elements/route.js +4 -228
- package/elements/route.js.map +1 -1
- package/elements/title.d.ts +1 -30
- package/elements/title.d.ts.map +1 -1
- package/elements/title.js +3 -75
- package/elements/title.js.map +1 -1
- package/elements/unsafe.d.ts +1 -14
- package/elements/unsafe.d.ts.map +1 -1
- package/elements/unsafe.js +3 -46
- package/elements/unsafe.js.map +1 -1
- package/elements/use.d.ts +1 -19
- package/elements/use.d.ts.map +1 -1
- package/elements/use.js +3 -74
- package/elements/use.js.map +1 -1
- package/lib/history.d.ts +28 -16
- package/lib/history.d.ts.map +1 -1
- package/lib/history.js +166 -168
- package/lib/history.js.map +1 -1
- package/lib/utils.d.ts.map +1 -1
- package/lib/utils.js +2 -1
- package/lib/utils.js.map +1 -1
- package/package.json +2 -2
- package/src/dist.ts +5 -2
- package/src/elements/{dialog-base.ts → base/dialog.ts} +4 -4
- package/src/elements/base/gesture.ts +256 -0
- package/src/elements/base/link.ts +178 -0
- package/src/elements/{modal-base.ts → base/modal-factory.ts} +3 -3
- package/src/elements/base/reflect.ts +29 -0
- package/src/elements/base/route.ts +244 -0
- package/src/elements/base/title.ts +68 -0
- package/src/elements/base/unsafe.ts +37 -0
- package/src/elements/base/use.ts +57 -0
- package/src/elements/gesture.ts +3 -257
- package/src/elements/link.ts +4 -179
- package/src/elements/reflect.ts +3 -31
- package/src/elements/route.ts +4 -248
- package/src/elements/title.ts +3 -68
- package/src/elements/unsafe.ts +3 -37
- package/src/elements/use.ts +3 -57
- package/src/lib/history.ts +182 -194
- package/src/lib/utils.ts +2 -1
- package/src/test/history.test.ts +15 -10
- package/elements/dialog-base.d.ts.map +0 -1
- package/elements/dialog-base.js.map +0 -1
- package/elements/modal-base.d.ts.map +0 -1
- package/elements/modal-base.js.map +0 -1
package/elements/gesture.d.ts
CHANGED
|
@@ -1,68 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
import { Emitter } from '../lib/decorators';
|
|
3
|
-
export declare type PanEventDetail = {
|
|
4
|
-
x: number;
|
|
5
|
-
y: number;
|
|
6
|
-
clientX: number;
|
|
7
|
-
clientY: number;
|
|
8
|
-
timeStamp: number;
|
|
9
|
-
isPrimary: boolean;
|
|
10
|
-
pointerId: number;
|
|
11
|
-
};
|
|
12
|
-
export interface SwipeEventDetail {
|
|
13
|
-
direction: 'top' | 'right' | 'bottom' | 'left';
|
|
14
|
-
speed: number;
|
|
15
|
-
}
|
|
16
|
-
export interface PinchEventDetail {
|
|
17
|
-
x: number;
|
|
18
|
-
y: number;
|
|
19
|
-
scale: number;
|
|
20
|
-
}
|
|
21
|
-
export interface RotateEventDetail {
|
|
22
|
-
x: number;
|
|
23
|
-
y: number;
|
|
24
|
-
rotate: number;
|
|
25
|
-
}
|
|
26
|
-
/**
|
|
27
|
-
* 块级元素,如果要设置成 `contents`,则内容块要设置 `touch-action: none`
|
|
28
|
-
* https://javascript.info/pointer-events#event-pointercancel
|
|
29
|
-
*
|
|
30
|
-
* 在移动端上,必须设置 `touch-action` 以允许滚动等原生动作
|
|
31
|
-
*
|
|
32
|
-
* 为什么空白区域会自动触发 `pointercancel`?
|
|
33
|
-
*
|
|
34
|
-
* @customElement gem-gesture
|
|
35
|
-
*
|
|
36
|
-
* @event pan
|
|
37
|
-
* @event pinch
|
|
38
|
-
* @event rotate
|
|
39
|
-
* @event swipe
|
|
40
|
-
* @event press
|
|
41
|
-
* @event end
|
|
42
|
-
*
|
|
43
|
-
* @attr touch-action
|
|
44
|
-
*/
|
|
45
|
-
export declare class GemGestureElement extends GemElement {
|
|
46
|
-
pan: Emitter<PanEventDetail>;
|
|
47
|
-
pinch: Emitter<PinchEventDetail>;
|
|
48
|
-
rotate: Emitter<RotateEventDetail>;
|
|
49
|
-
swipe: Emitter<SwipeEventDetail>;
|
|
50
|
-
press: Emitter<null>;
|
|
51
|
-
end: Emitter<null>;
|
|
52
|
-
touchAction: string;
|
|
53
|
-
pressed: boolean;
|
|
54
|
-
pressTimer: number;
|
|
55
|
-
startEventMap: Map<number, PointerEvent>;
|
|
56
|
-
movesMap: Map<number, PanEventDetail[]>;
|
|
57
|
-
constructor();
|
|
58
|
-
getMoves(pointerId: number): PanEventDetail[];
|
|
59
|
-
getStartEvent(pointerId: number): PointerEvent;
|
|
60
|
-
getOtherLastmove(pointerId: number): PanEventDetail | undefined;
|
|
61
|
-
getMovementX(x: number, y: number): number;
|
|
62
|
-
getMovementY(x: number, y: number): number;
|
|
63
|
-
onStart(evt: PointerEvent): void;
|
|
64
|
-
onMove(evt: PointerEvent): void;
|
|
65
|
-
onEnd(evt: PointerEvent): void;
|
|
66
|
-
render(): import("lit-html/lib/template-result").TemplateResult;
|
|
67
|
-
}
|
|
1
|
+
export * from './base/gesture';
|
|
68
2
|
//# sourceMappingURL=gesture.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"gesture.d.ts","sourceRoot":"","sources":["../src/elements/gesture.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"gesture.d.ts","sourceRoot":"","sources":["../src/elements/gesture.ts"],"names":[],"mappings":"AAEA,cAAc,gBAAgB,CAAC"}
|
package/elements/gesture.js
CHANGED
|
@@ -1,220 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
-
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
-
};
|
|
7
|
-
import { GemElement, html } from '../lib/element';
|
|
8
|
-
import { attribute, customElement, emitter } from '../lib/decorators';
|
|
9
|
-
function angleAB(a, b, c, { clientX: x1, clientY: y1 }, { clientX: x2, clientY: y2 }, { clientX: x3, clientY: y3 }) {
|
|
10
|
-
// https://en.wikipedia.org/wiki/Law_of_cosines
|
|
11
|
-
// https://blog.csdn.net/z278930050/article/details/53319091
|
|
12
|
-
return (Math.sign((x2 - x1) * (y3 - y2) - (y2 - y1) * (x3 - x2)) * Math.acos((a ** 2 + b ** 2 - c ** 2) / (2 * a * b)) * 180);
|
|
13
|
-
}
|
|
14
|
-
/**
|
|
15
|
-
* 块级元素,如果要设置成 `contents`,则内容块要设置 `touch-action: none`
|
|
16
|
-
* https://javascript.info/pointer-events#event-pointercancel
|
|
17
|
-
*
|
|
18
|
-
* 在移动端上,必须设置 `touch-action` 以允许滚动等原生动作
|
|
19
|
-
*
|
|
20
|
-
* 为什么空白区域会自动触发 `pointercancel`?
|
|
21
|
-
*
|
|
22
|
-
* @customElement gem-gesture
|
|
23
|
-
*
|
|
24
|
-
* @event pan
|
|
25
|
-
* @event pinch
|
|
26
|
-
* @event rotate
|
|
27
|
-
* @event swipe
|
|
28
|
-
* @event press
|
|
29
|
-
* @event end
|
|
30
|
-
*
|
|
31
|
-
* @attr touch-action
|
|
32
|
-
*/
|
|
33
|
-
let GemGestureElement = class GemGestureElement extends GemElement {
|
|
34
|
-
constructor() {
|
|
35
|
-
super();
|
|
36
|
-
this.pressed = false; // 触发 press 之后不触发其他事件
|
|
37
|
-
this.pressTimer = 0;
|
|
38
|
-
this.startEventMap = new Map();
|
|
39
|
-
this.movesMap = new Map();
|
|
40
|
-
this.addEventListener('pointerdown', this.onStart);
|
|
41
|
-
this.addEventListener('pointermove', this.onMove);
|
|
42
|
-
this.addEventListener('pointerup', this.onEnd);
|
|
43
|
-
this.addEventListener('pointercancel', this.onEnd);
|
|
44
|
-
this.addEventListener('dragstart', (evt) => evt.preventDefault());
|
|
45
|
-
}
|
|
46
|
-
getMoves(pointerId) {
|
|
47
|
-
return this.movesMap.get(pointerId) || [];
|
|
48
|
-
}
|
|
49
|
-
getStartEvent(pointerId) {
|
|
50
|
-
return this.startEventMap.get(pointerId);
|
|
51
|
-
}
|
|
52
|
-
getOtherLastmove(pointerId) {
|
|
53
|
-
for (const id of this.movesMap.keys()) {
|
|
54
|
-
if (id !== pointerId) {
|
|
55
|
-
const moves = this.getMoves(id);
|
|
56
|
-
return moves[moves.length - 1] || this.getStartEvent(id);
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
getMovementX(x, y) {
|
|
61
|
-
const touchAction = this.touchAction;
|
|
62
|
-
if ((touchAction.includes('pan-right') && x > 0) ||
|
|
63
|
-
(touchAction.includes('pan-left') && x < 0) ||
|
|
64
|
-
touchAction.includes('pan-x') ||
|
|
65
|
-
(((touchAction.includes('pan-down') && y > 0) ||
|
|
66
|
-
(touchAction.includes('pan-up') && y < 0) ||
|
|
67
|
-
touchAction.includes('pan-y')) &&
|
|
68
|
-
Math.abs(y) > Math.abs(x)) // horizontally scrolling
|
|
69
|
-
) {
|
|
70
|
-
return 0;
|
|
71
|
-
}
|
|
72
|
-
return x;
|
|
73
|
-
}
|
|
74
|
-
getMovementY(x, y) {
|
|
75
|
-
const touchAction = this.touchAction;
|
|
76
|
-
if ((touchAction.includes('pan-down') && y > 0) ||
|
|
77
|
-
(touchAction.includes('pan-up') && y < 0) ||
|
|
78
|
-
touchAction.includes('pan-y') ||
|
|
79
|
-
(((touchAction.includes('pan-right') && x > 0) ||
|
|
80
|
-
(touchAction.includes('pan-left') && x < 0) ||
|
|
81
|
-
touchAction.includes('pan-x')) &&
|
|
82
|
-
Math.abs(x) > Math.abs(y)) // vertical scrolling
|
|
83
|
-
) {
|
|
84
|
-
return 0;
|
|
85
|
-
}
|
|
86
|
-
return y;
|
|
87
|
-
}
|
|
88
|
-
onStart(evt) {
|
|
89
|
-
evt.stopPropagation();
|
|
90
|
-
this.setPointerCapture(evt.pointerId);
|
|
91
|
-
this.movesMap.set(evt.pointerId, []);
|
|
92
|
-
this.startEventMap.set(evt.pointerId, evt);
|
|
93
|
-
if (evt.isPrimary) {
|
|
94
|
-
this.pressed = false;
|
|
95
|
-
this.pressTimer = window.setTimeout(() => {
|
|
96
|
-
this.press(null);
|
|
97
|
-
this.pressed = true;
|
|
98
|
-
}, 251);
|
|
99
|
-
}
|
|
100
|
-
}
|
|
101
|
-
onMove(evt) {
|
|
102
|
-
evt.stopPropagation();
|
|
103
|
-
const { pointerId, clientX, clientY, isPrimary, pointerType, timeStamp } = evt;
|
|
104
|
-
if (!this.pressed && this.hasPointerCapture(pointerId)) {
|
|
105
|
-
const moves = this.getMoves(pointerId);
|
|
106
|
-
const startEvent = this.getStartEvent(pointerId);
|
|
107
|
-
const lastMove = moves[moves.length - 1] || startEvent;
|
|
108
|
-
// https://bugs.webkit.org/show_bug.cgi?id=220194
|
|
109
|
-
// https://bugs.chromium.org/p/chromium/issues/detail?id=1092358
|
|
110
|
-
const movementX = clientX - lastMove.clientX;
|
|
111
|
-
const movementY = clientY - lastMove.clientY;
|
|
112
|
-
const move = {
|
|
113
|
-
x: this.getMovementX(movementX, movementY),
|
|
114
|
-
y: this.getMovementY(movementX, movementY),
|
|
115
|
-
clientX,
|
|
116
|
-
clientY,
|
|
117
|
-
timeStamp,
|
|
118
|
-
isPrimary,
|
|
119
|
-
pointerId,
|
|
120
|
-
};
|
|
121
|
-
moves.push(move);
|
|
122
|
-
this.pan(move);
|
|
123
|
-
if (this.movesMap.size !== 1) {
|
|
124
|
-
const secondaryPoint = this.getOtherLastmove(pointerId);
|
|
125
|
-
const moveLen = Math.sqrt(movementX ** 2 + movementY ** 2);
|
|
126
|
-
const distanceLen = Math.sqrt((lastMove.clientX - secondaryPoint.clientX) ** 2 + (lastMove.clientY - secondaryPoint.clientY) ** 2);
|
|
127
|
-
const newDistanceLen = Math.sqrt((clientX - secondaryPoint.clientX) ** 2 + (clientY - secondaryPoint.clientY) ** 2);
|
|
128
|
-
const x = (lastMove.clientX + secondaryPoint.clientX) / 2;
|
|
129
|
-
const y = (lastMove.clientY + secondaryPoint.clientY) / 2;
|
|
130
|
-
this.pinch({ x, y, scale: newDistanceLen / distanceLen });
|
|
131
|
-
this.rotate({ x, y, rotate: angleAB(newDistanceLen, distanceLen, moveLen, secondaryPoint, lastMove, move) });
|
|
132
|
-
}
|
|
133
|
-
const accuracy = pointerType === 'touch' ? 5 : 0;
|
|
134
|
-
if (Math.abs(movementX) > accuracy ||
|
|
135
|
-
Math.abs(movementY) > accuracy ||
|
|
136
|
-
Math.abs(move.clientX - startEvent.clientX) > accuracy ||
|
|
137
|
-
Math.abs(move.clientY - startEvent.clientY) > accuracy) {
|
|
138
|
-
window.clearTimeout(this.pressTimer);
|
|
139
|
-
}
|
|
140
|
-
}
|
|
141
|
-
}
|
|
142
|
-
onEnd(evt) {
|
|
143
|
-
evt.stopPropagation();
|
|
144
|
-
const { pointerId } = evt;
|
|
145
|
-
window.clearTimeout(this.pressTimer);
|
|
146
|
-
if (this.movesMap.size === 1) {
|
|
147
|
-
this.end(null);
|
|
148
|
-
}
|
|
149
|
-
// auto release: https://javascript.info/pointer-events#pointer-capturing
|
|
150
|
-
if (!this.pressed && this.hasPointerCapture(pointerId)) {
|
|
151
|
-
const moves = this.getMoves(pointerId);
|
|
152
|
-
if (moves.length > 2) {
|
|
153
|
-
const { x, y, timeStamp, clientX, clientY } = moves[moves.length - 1];
|
|
154
|
-
const move2 = moves[moves.length - 3];
|
|
155
|
-
if (Math.abs(x) > 2) {
|
|
156
|
-
if (Math.abs(x) > Math.abs(y)) {
|
|
157
|
-
const speed = Math.abs(move2.clientX - clientX) / (timeStamp - move2.timeStamp);
|
|
158
|
-
if (x > 0) {
|
|
159
|
-
this.swipe({ direction: 'right', speed });
|
|
160
|
-
}
|
|
161
|
-
else {
|
|
162
|
-
this.swipe({ direction: 'left', speed });
|
|
163
|
-
}
|
|
164
|
-
}
|
|
165
|
-
}
|
|
166
|
-
if (Math.abs(y) > 2) {
|
|
167
|
-
const speed = Math.abs(move2.clientY - clientY) / (timeStamp - move2.timeStamp);
|
|
168
|
-
if (Math.abs(y) > Math.abs(x)) {
|
|
169
|
-
if (y > 0) {
|
|
170
|
-
this.swipe({ direction: 'bottom', speed });
|
|
171
|
-
}
|
|
172
|
-
else {
|
|
173
|
-
this.swipe({ direction: 'top', speed });
|
|
174
|
-
}
|
|
175
|
-
}
|
|
176
|
-
}
|
|
177
|
-
}
|
|
178
|
-
}
|
|
179
|
-
this.movesMap.delete(pointerId);
|
|
180
|
-
this.startEventMap.delete(pointerId);
|
|
181
|
-
}
|
|
182
|
-
render() {
|
|
183
|
-
return html `
|
|
184
|
-
<style>
|
|
185
|
-
:host {
|
|
186
|
-
display: block;
|
|
187
|
-
user-select: none;
|
|
188
|
-
touch-action: ${this.touchAction || 'none'};
|
|
189
|
-
}
|
|
190
|
-
</style>
|
|
191
|
-
<slot></slot>
|
|
192
|
-
`;
|
|
193
|
-
}
|
|
194
|
-
};
|
|
195
|
-
__decorate([
|
|
196
|
-
emitter
|
|
197
|
-
], GemGestureElement.prototype, "pan", void 0);
|
|
198
|
-
__decorate([
|
|
199
|
-
emitter
|
|
200
|
-
], GemGestureElement.prototype, "pinch", void 0);
|
|
201
|
-
__decorate([
|
|
202
|
-
emitter
|
|
203
|
-
], GemGestureElement.prototype, "rotate", void 0);
|
|
204
|
-
__decorate([
|
|
205
|
-
emitter
|
|
206
|
-
], GemGestureElement.prototype, "swipe", void 0);
|
|
207
|
-
__decorate([
|
|
208
|
-
emitter
|
|
209
|
-
], GemGestureElement.prototype, "press", void 0);
|
|
210
|
-
__decorate([
|
|
211
|
-
emitter
|
|
212
|
-
], GemGestureElement.prototype, "end", void 0);
|
|
213
|
-
__decorate([
|
|
214
|
-
attribute
|
|
215
|
-
], GemGestureElement.prototype, "touchAction", void 0);
|
|
216
|
-
GemGestureElement = __decorate([
|
|
217
|
-
customElement('gem-gesture')
|
|
218
|
-
], GemGestureElement);
|
|
219
|
-
export { GemGestureElement };
|
|
1
|
+
import { GemGestureElement } from './base/gesture';
|
|
2
|
+
export * from './base/gesture';
|
|
3
|
+
customElements.define('gem-gesture', GemGestureElement);
|
|
220
4
|
//# sourceMappingURL=gesture.js.map
|
package/elements/gesture.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"gesture.js","sourceRoot":"","sources":["../src/elements/gesture.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"gesture.js","sourceRoot":"","sources":["../src/elements/gesture.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAEnD,cAAc,gBAAgB,CAAC;AAE/B,cAAc,CAAC,MAAM,CAAC,aAAa,EAAE,iBAAiB,CAAC,CAAC"}
|
package/elements/link.d.ts
CHANGED
|
@@ -1,46 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
import { RouteItem, RouteOptions } from './route';
|
|
3
|
-
/**
|
|
4
|
-
* @customElement gem-link
|
|
5
|
-
* @attr href
|
|
6
|
-
* @attr target
|
|
7
|
-
* @attr doc-title
|
|
8
|
-
* @attr path
|
|
9
|
-
* @attr query
|
|
10
|
-
* @attr hash
|
|
11
|
-
* @attr pattern
|
|
12
|
-
* @attr hint
|
|
13
|
-
* @part link
|
|
14
|
-
*
|
|
15
|
-
* print bug: https://github.com/mantou132/gem/issues/36
|
|
16
|
-
*/
|
|
17
|
-
export declare class GemLinkElement extends GemElement {
|
|
18
|
-
href: string;
|
|
19
|
-
target: string;
|
|
20
|
-
path: string;
|
|
21
|
-
query: string;
|
|
22
|
-
hash: string;
|
|
23
|
-
docTitle: string;
|
|
24
|
-
hint: 'on' | 'off';
|
|
25
|
-
route: RouteItem | undefined;
|
|
26
|
-
options: RouteOptions | undefined;
|
|
27
|
-
prepare: (() => void | Promise<void>) | undefined;
|
|
28
|
-
link: string;
|
|
29
|
-
constructor();
|
|
30
|
-
getPathInfo(): string;
|
|
31
|
-
isExternal(pathInfo: string): boolean;
|
|
32
|
-
clickHandle: (e: MouseEvent) => Promise<void>;
|
|
33
|
-
preventDefault: (e: MouseEvent) => void;
|
|
34
|
-
render(pathInfo?: string): import("lit-html/lib/template-result").TemplateResult;
|
|
35
|
-
}
|
|
36
|
-
/**
|
|
37
|
-
* @customElement gem-active-link
|
|
38
|
-
* @attr pattern
|
|
39
|
-
* @state active
|
|
40
|
-
*/
|
|
41
|
-
export declare class GemActiveLinkElement extends GemLinkElement {
|
|
42
|
-
pattern: string;
|
|
43
|
-
active: boolean;
|
|
44
|
-
render(): import("lit-html/lib/template-result").TemplateResult;
|
|
45
|
-
}
|
|
1
|
+
export * from './base/link';
|
|
46
2
|
//# sourceMappingURL=link.d.ts.map
|
package/elements/link.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"link.d.ts","sourceRoot":"","sources":["../src/elements/link.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"link.d.ts","sourceRoot":"","sources":["../src/elements/link.ts"],"names":[],"mappings":"AAEA,cAAc,aAAa,CAAC"}
|
package/elements/link.js
CHANGED
|
@@ -1,209 +1,5 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
-
};
|
|
7
|
-
import { GemElement, html, ifDefined } from '../lib/element';
|
|
8
|
-
import { attribute, property, customElement, state, part, connectStore } from '../lib/decorators';
|
|
9
|
-
import { history, basePathStore } from '../lib/history';
|
|
10
|
-
import { absoluteLocation } from '../lib/utils';
|
|
11
|
-
import { matchPath, createHistoryParams, createPath } from './route';
|
|
12
|
-
/**
|
|
13
|
-
* @customElement gem-link
|
|
14
|
-
* @attr href
|
|
15
|
-
* @attr target
|
|
16
|
-
* @attr doc-title
|
|
17
|
-
* @attr path
|
|
18
|
-
* @attr query
|
|
19
|
-
* @attr hash
|
|
20
|
-
* @attr pattern
|
|
21
|
-
* @attr hint
|
|
22
|
-
* @part link
|
|
23
|
-
*
|
|
24
|
-
* print bug: https://github.com/mantou132/gem/issues/36
|
|
25
|
-
*/
|
|
26
|
-
let GemLinkElement = class GemLinkElement extends GemElement {
|
|
27
|
-
constructor() {
|
|
28
|
-
super();
|
|
29
|
-
this.clickHandle = async (e) => {
|
|
30
|
-
var _a;
|
|
31
|
-
const pathInfo = this.getPathInfo();
|
|
32
|
-
if (!pathInfo)
|
|
33
|
-
return;
|
|
34
|
-
// 外部链接使用 `window.open`
|
|
35
|
-
if (this.isExternal(pathInfo)) {
|
|
36
|
-
switch (this.target) {
|
|
37
|
-
case '_self':
|
|
38
|
-
window.location.href = pathInfo;
|
|
39
|
-
return;
|
|
40
|
-
case '_parent':
|
|
41
|
-
window.parent.location.href = pathInfo;
|
|
42
|
-
return;
|
|
43
|
-
case '_top':
|
|
44
|
-
window.top.location.href = pathInfo;
|
|
45
|
-
return;
|
|
46
|
-
default:
|
|
47
|
-
window.open(pathInfo);
|
|
48
|
-
return;
|
|
49
|
-
}
|
|
50
|
-
}
|
|
51
|
-
const { path, query, hash } = history.getParams();
|
|
52
|
-
if (path + query + hash === pathInfo) {
|
|
53
|
-
// 点击当前路由链接时,什么也没做
|
|
54
|
-
return;
|
|
55
|
-
}
|
|
56
|
-
e.stopPropagation();
|
|
57
|
-
await ((_a = this.prepare) === null || _a === void 0 ? void 0 : _a.call(this));
|
|
58
|
-
if (this.route) {
|
|
59
|
-
history.pushIgnoreCloseHandle({
|
|
60
|
-
...createHistoryParams(this.route, this.options),
|
|
61
|
-
title: this.route.title || this.docTitle,
|
|
62
|
-
});
|
|
63
|
-
}
|
|
64
|
-
else if (this.href) {
|
|
65
|
-
const { pathname, search, hash } = new URL(pathInfo, location.origin);
|
|
66
|
-
history.pushIgnoreCloseHandle({
|
|
67
|
-
path: pathname,
|
|
68
|
-
query: search,
|
|
69
|
-
hash: hash,
|
|
70
|
-
title: this.docTitle,
|
|
71
|
-
});
|
|
72
|
-
}
|
|
73
|
-
else {
|
|
74
|
-
history.pushIgnoreCloseHandle({ path: this.path, query: this.query, hash: this.hash, title: this.docTitle });
|
|
75
|
-
}
|
|
76
|
-
};
|
|
77
|
-
this.preventDefault = (e) => {
|
|
78
|
-
e.preventDefault();
|
|
79
|
-
};
|
|
80
|
-
this.addEventListener('click', this.clickHandle);
|
|
81
|
-
}
|
|
82
|
-
// 不包含 basePath
|
|
83
|
-
getPathInfo() {
|
|
84
|
-
var _a, _b;
|
|
85
|
-
if (this.route) {
|
|
86
|
-
const queryProp = ((_a = this.options) === null || _a === void 0 ? void 0 : _a.query) || '';
|
|
87
|
-
const hashProp = ((_b = this.options) === null || _b === void 0 ? void 0 : _b.hash) || '';
|
|
88
|
-
return createPath(this.route, this.options) + queryProp + hashProp;
|
|
89
|
-
}
|
|
90
|
-
else {
|
|
91
|
-
const url = this.href || this.path + this.query + this.hash;
|
|
92
|
-
const { path, query } = history.getParams();
|
|
93
|
-
if (url.startsWith('#')) {
|
|
94
|
-
return `${path}${query}${url}`;
|
|
95
|
-
}
|
|
96
|
-
else if (url.startsWith('?')) {
|
|
97
|
-
return `${path}${url}`;
|
|
98
|
-
}
|
|
99
|
-
else if (url.startsWith('.')) {
|
|
100
|
-
return absoluteLocation(path, url);
|
|
101
|
-
}
|
|
102
|
-
else {
|
|
103
|
-
return url;
|
|
104
|
-
}
|
|
105
|
-
}
|
|
106
|
-
}
|
|
107
|
-
isExternal(pathInfo) {
|
|
108
|
-
return !pathInfo.startsWith('/');
|
|
109
|
-
}
|
|
110
|
-
render(pathInfo = this.getPathInfo()) {
|
|
111
|
-
return html `
|
|
112
|
-
<style>
|
|
113
|
-
:host {
|
|
114
|
-
/* link default style */
|
|
115
|
-
cursor: pointer;
|
|
116
|
-
color: blue;
|
|
117
|
-
text-decoration: underline;
|
|
118
|
-
}
|
|
119
|
-
a {
|
|
120
|
-
all: unset;
|
|
121
|
-
display: contents;
|
|
122
|
-
}
|
|
123
|
-
a:visited {
|
|
124
|
-
color: unset;
|
|
125
|
-
}
|
|
126
|
-
</style>
|
|
127
|
-
<a
|
|
128
|
-
part=${this.link}
|
|
129
|
-
@click=${this.preventDefault}
|
|
130
|
-
href=${ifDefined(this.hint === 'off'
|
|
131
|
-
? undefined
|
|
132
|
-
: this.isExternal(pathInfo)
|
|
133
|
-
? pathInfo
|
|
134
|
-
: new URL(history.basePath + pathInfo, location.origin).toString())}
|
|
135
|
-
>
|
|
136
|
-
<slot></slot>
|
|
137
|
-
</a>
|
|
138
|
-
`;
|
|
139
|
-
}
|
|
140
|
-
};
|
|
141
|
-
__decorate([
|
|
142
|
-
attribute
|
|
143
|
-
], GemLinkElement.prototype, "href", void 0);
|
|
144
|
-
__decorate([
|
|
145
|
-
attribute
|
|
146
|
-
], GemLinkElement.prototype, "target", void 0);
|
|
147
|
-
__decorate([
|
|
148
|
-
attribute
|
|
149
|
-
], GemLinkElement.prototype, "path", void 0);
|
|
150
|
-
__decorate([
|
|
151
|
-
attribute
|
|
152
|
-
], GemLinkElement.prototype, "query", void 0);
|
|
153
|
-
__decorate([
|
|
154
|
-
attribute
|
|
155
|
-
], GemLinkElement.prototype, "hash", void 0);
|
|
156
|
-
__decorate([
|
|
157
|
-
attribute
|
|
158
|
-
], GemLinkElement.prototype, "docTitle", void 0);
|
|
159
|
-
__decorate([
|
|
160
|
-
attribute
|
|
161
|
-
], GemLinkElement.prototype, "hint", void 0);
|
|
162
|
-
__decorate([
|
|
163
|
-
property
|
|
164
|
-
], GemLinkElement.prototype, "route", void 0);
|
|
165
|
-
__decorate([
|
|
166
|
-
property
|
|
167
|
-
], GemLinkElement.prototype, "options", void 0);
|
|
168
|
-
__decorate([
|
|
169
|
-
property
|
|
170
|
-
], GemLinkElement.prototype, "prepare", void 0);
|
|
171
|
-
__decorate([
|
|
172
|
-
part
|
|
173
|
-
], GemLinkElement.prototype, "link", void 0);
|
|
174
|
-
GemLinkElement = __decorate([
|
|
175
|
-
customElement('gem-link'),
|
|
176
|
-
connectStore(basePathStore)
|
|
177
|
-
], GemLinkElement);
|
|
178
|
-
export { GemLinkElement };
|
|
179
|
-
/**
|
|
180
|
-
* @customElement gem-active-link
|
|
181
|
-
* @attr pattern
|
|
182
|
-
* @state active
|
|
183
|
-
*/
|
|
184
|
-
let GemActiveLinkElement = class GemActiveLinkElement extends GemLinkElement {
|
|
185
|
-
render() {
|
|
186
|
-
const { path, query, hash } = history.getParams();
|
|
187
|
-
const isMatchPattern = this.pattern && matchPath(this.pattern, path);
|
|
188
|
-
const pathInfo = this.getPathInfo();
|
|
189
|
-
if (isMatchPattern || path + query + hash === pathInfo) {
|
|
190
|
-
this.active = true;
|
|
191
|
-
}
|
|
192
|
-
else {
|
|
193
|
-
this.active = false;
|
|
194
|
-
}
|
|
195
|
-
return super.render(pathInfo);
|
|
196
|
-
}
|
|
197
|
-
};
|
|
198
|
-
__decorate([
|
|
199
|
-
attribute
|
|
200
|
-
], GemActiveLinkElement.prototype, "pattern", void 0);
|
|
201
|
-
__decorate([
|
|
202
|
-
state
|
|
203
|
-
], GemActiveLinkElement.prototype, "active", void 0);
|
|
204
|
-
GemActiveLinkElement = __decorate([
|
|
205
|
-
customElement('gem-active-link'),
|
|
206
|
-
connectStore(history.store)
|
|
207
|
-
], GemActiveLinkElement);
|
|
208
|
-
export { GemActiveLinkElement };
|
|
1
|
+
import { GemLinkElement, GemActiveLinkElement } from './base/link';
|
|
2
|
+
export * from './base/link';
|
|
3
|
+
customElements.define('gem-link', GemLinkElement);
|
|
4
|
+
customElements.define('gem-active-link', GemActiveLinkElement);
|
|
209
5
|
//# sourceMappingURL=link.js.map
|
package/elements/link.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"link.js","sourceRoot":"","sources":["../src/elements/link.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"link.js","sourceRoot":"","sources":["../src/elements/link.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAEnE,cAAc,aAAa,CAAC;AAE5B,cAAc,CAAC,MAAM,CAAC,UAAU,EAAE,cAAc,CAAC,CAAC;AAClD,cAAc,CAAC,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,CAAC"}
|
package/elements/reflect.d.ts
CHANGED
|
@@ -1,9 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
/**
|
|
3
|
-
* @customElement gem-reflect
|
|
4
|
-
*/
|
|
5
|
-
export declare class GemReflectElement extends GemElement {
|
|
6
|
-
target: HTMLElement;
|
|
7
|
-
constructor();
|
|
8
|
-
}
|
|
1
|
+
export * from './base/reflect';
|
|
9
2
|
//# sourceMappingURL=reflect.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"reflect.d.ts","sourceRoot":"","sources":["../src/elements/reflect.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"reflect.d.ts","sourceRoot":"","sources":["../src/elements/reflect.ts"],"names":[],"mappings":"AAEA,cAAc,gBAAgB,CAAC"}
|
package/elements/reflect.js
CHANGED
|
@@ -1,40 +1,4 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
|
5
|
-
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
|
6
|
-
};
|
|
7
|
-
import { GemElement } from '../lib/element';
|
|
8
|
-
import { property, customElement } from '../lib/decorators';
|
|
9
|
-
// support prerender
|
|
10
|
-
document.querySelectorAll('[data-reflect]').forEach((e) => e.remove());
|
|
11
|
-
/**
|
|
12
|
-
* @customElement gem-reflect
|
|
13
|
-
*/
|
|
14
|
-
let GemReflectElement = class GemReflectElement extends GemElement {
|
|
15
|
-
constructor() {
|
|
16
|
-
super({ isLight: true });
|
|
17
|
-
this.target = document.head;
|
|
18
|
-
this.hidden = true;
|
|
19
|
-
this.effect(() => {
|
|
20
|
-
const childNodes = [...this.childNodes];
|
|
21
|
-
childNodes.forEach((node) => {
|
|
22
|
-
if (node instanceof HTMLElement) {
|
|
23
|
-
node.dataset.reflect = '';
|
|
24
|
-
}
|
|
25
|
-
this.target.append(node);
|
|
26
|
-
});
|
|
27
|
-
return () => {
|
|
28
|
-
childNodes.forEach((node) => node.remove());
|
|
29
|
-
};
|
|
30
|
-
}, () => [this.target]);
|
|
31
|
-
}
|
|
32
|
-
};
|
|
33
|
-
__decorate([
|
|
34
|
-
property
|
|
35
|
-
], GemReflectElement.prototype, "target", void 0);
|
|
36
|
-
GemReflectElement = __decorate([
|
|
37
|
-
customElement('gem-reflect')
|
|
38
|
-
], GemReflectElement);
|
|
39
|
-
export { GemReflectElement };
|
|
1
|
+
import { GemReflectElement } from './base/reflect';
|
|
2
|
+
export * from './base/reflect';
|
|
3
|
+
customElements.define('gem-reflect', GemReflectElement);
|
|
40
4
|
//# sourceMappingURL=reflect.js.map
|
package/elements/reflect.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"reflect.js","sourceRoot":"","sources":["../src/elements/reflect.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"reflect.js","sourceRoot":"","sources":["../src/elements/reflect.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AAEnD,cAAc,gBAAgB,CAAC;AAE/B,cAAc,CAAC,MAAM,CAAC,aAAa,EAAE,iBAAiB,CAAC,CAAC"}
|