@mantou/gem 2.1.1 → 2.2.0
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 +1832 -1890
- package/dist/gem.umd.js +34 -191
- package/elements/base/dialog.d.ts +0 -4
- package/elements/base/dialog.d.ts.map +1 -1
- package/elements/base/dialog.js +0 -4
- package/elements/base/dialog.js.map +1 -1
- package/elements/base/gesture.d.ts +5 -14
- package/elements/base/gesture.d.ts.map +1 -1
- package/elements/base/gesture.js +35 -31
- package/elements/base/gesture.js.map +1 -1
- package/elements/base/link.d.ts +1 -17
- package/elements/base/link.d.ts.map +1 -1
- package/elements/base/link.js +12 -32
- package/elements/base/link.js.map +1 -1
- package/elements/base/modal-factory.d.ts +30 -31
- package/elements/base/modal-factory.d.ts.map +1 -1
- package/elements/base/reflect.d.ts +0 -3
- package/elements/base/reflect.d.ts.map +1 -1
- package/elements/base/reflect.js +0 -3
- package/elements/base/reflect.js.map +1 -1
- package/elements/base/route.d.ts +0 -10
- package/elements/base/route.d.ts.map +1 -1
- package/elements/base/route.js +10 -22
- package/elements/base/route.js.map +1 -1
- package/elements/base/title.d.ts +0 -5
- package/elements/base/title.d.ts.map +1 -1
- package/elements/base/title.js +0 -5
- package/elements/base/title.js.map +1 -1
- package/elements/base/unsafe.d.ts +0 -5
- package/elements/base/unsafe.d.ts.map +1 -1
- package/elements/base/unsafe.js +2 -8
- package/elements/base/unsafe.js.map +1 -1
- package/elements/base/use.d.ts +0 -3
- package/elements/base/use.d.ts.map +1 -1
- package/elements/base/use.js +4 -11
- package/elements/base/use.js.map +1 -1
- package/helper/react-shim.d.ts +15 -0
- package/helper/react-shim.d.ts.map +1 -0
- package/helper/react-shim.js +56 -0
- package/helper/react-shim.js.map +1 -0
- package/helper/theme.d.ts +3 -3
- package/helper/theme.d.ts.map +1 -1
- package/helper/theme.js +3 -3
- package/helper/theme.js.map +1 -1
- package/index.d.ts +0 -1
- package/index.d.ts.map +1 -1
- package/index.js +0 -1
- package/index.js.map +1 -1
- package/lib/decorators.d.ts +7 -6
- package/lib/decorators.d.ts.map +1 -1
- package/lib/decorators.js +45 -30
- package/lib/decorators.js.map +1 -1
- package/lib/directive.d.ts +83 -0
- package/lib/directive.d.ts.map +1 -0
- package/lib/directive.js +59 -0
- package/lib/directive.js.map +1 -0
- package/lib/element.d.ts +7 -21
- package/lib/element.d.ts.map +1 -1
- package/lib/element.js +53 -49
- package/lib/element.js.map +1 -1
- package/lib/lit-html.d.ts +331 -0
- package/lib/lit-html.d.ts.map +1 -0
- package/lib/lit-html.js +941 -0
- package/lib/lit-html.js.map +1 -0
- package/lib/ref.d.ts +1 -0
- package/lib/ref.d.ts.map +1 -0
- package/lib/ref.js +2 -0
- package/lib/ref.js.map +1 -0
- package/lib/repeat.d.ts +126 -0
- package/lib/repeat.d.ts.map +1 -0
- package/lib/repeat.js +533 -0
- package/lib/repeat.js.map +1 -0
- package/lib/store.d.ts +1 -1
- package/lib/store.d.ts.map +1 -1
- package/lib/store.js +4 -4
- package/lib/store.js.map +1 -1
- package/lib/utils.d.ts +1 -4
- package/lib/utils.d.ts.map +1 -1
- package/lib/utils.js +5 -15
- package/lib/utils.js.map +1 -1
- package/lib/version.d.ts +1 -1
- package/lib/version.d.ts.map +1 -1
- package/lib/version.js +2 -1
- package/lib/version.js.map +1 -1
- package/package.json +6 -7
- package/src/elements/base/dialog.ts +0 -4
- package/src/elements/base/gesture.ts +31 -32
- package/src/elements/base/link.ts +12 -32
- package/src/elements/base/reflect.ts +0 -3
- package/src/elements/base/route.ts +11 -21
- package/src/elements/base/title.ts +0 -5
- package/src/elements/base/unsafe.ts +3 -8
- package/src/elements/base/use.ts +4 -11
- package/src/helper/theme.ts +4 -4
- package/src/index.ts +0 -1
- package/src/lib/decorators.ts +50 -37
- package/src/lib/directive.ts +139 -0
- package/src/lib/element.ts +62 -72
- package/src/lib/lit-html.ts +1217 -0
- package/src/lib/repeat.ts +580 -0
- package/src/lib/store.ts +4 -4
- package/src/lib/utils.ts +5 -16
- package/src/lib/version.ts +2 -1
- package/src/test/elements/link.test.ts +1 -2
- package/src/test/elements/reflect.test.ts +13 -3
- package/src/test/elements/title.test.ts +1 -2
- package/src/test/gem-element/advance.test.ts +15 -8
- package/src/test/gem-element/basic.test.ts +22 -10
- package/src/test/gem-element/decorators.test.ts +6 -9
- package/src/test/gem-element/multi.test.ts +20 -11
- package/src/test/history.test.ts +2 -2
- package/src/test/store.test.ts +3 -3
- package/src/test/utils.test.ts +9 -10
- package/src/test/utils.ts +22 -0
- package/src/lib/directives.ts +0 -6
package/lib/utils.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const { assign,
|
|
1
|
+
const { assign, fromEntries, entries, keys } = Object;
|
|
2
2
|
const microtaskSet = new Set();
|
|
3
3
|
export function addMicrotask(func) {
|
|
4
4
|
if (microtaskSet.has(func))
|
|
@@ -12,7 +12,8 @@ export function addMicrotask(func) {
|
|
|
12
12
|
// 注意 typeof state === 'function' 但是没有 Function 的方法和属性
|
|
13
13
|
export function createUpdater(initState, fn) {
|
|
14
14
|
const state = fn;
|
|
15
|
-
|
|
15
|
+
// https://github.com/vitejs/vite/issues/18540 现在覆盖 call 也一样会报错
|
|
16
|
+
// setPrototypeOf(state, null);
|
|
16
17
|
delete state.name;
|
|
17
18
|
delete state.length;
|
|
18
19
|
assign(state, initState);
|
|
@@ -184,8 +185,8 @@ export class QueryString extends URLSearchParams {
|
|
|
184
185
|
export function raw(arr, ...args) {
|
|
185
186
|
return arr.reduce((prev, current, index) => prev + (args[index - 1] ?? '') + current);
|
|
186
187
|
}
|
|
187
|
-
//
|
|
188
|
-
export const
|
|
188
|
+
// 在 html 中引用 class 时使用，仅提供高亮功能
|
|
189
|
+
export const styled = raw;
|
|
189
190
|
export function randomStr(len = 5) {
|
|
190
191
|
const str = Math.random()
|
|
191
192
|
.toString(36)
|
|
@@ -194,17 +195,6 @@ export function randomStr(len = 5) {
|
|
|
194
195
|
return str + randomStr(len - str.length);
|
|
195
196
|
return str;
|
|
196
197
|
}
|
|
197
|
-
// 写 css 文本，在 CSSStyleSheet 中使用，使用 styed-components 高亮
|
|
198
|
-
//
|
|
199
|
-
// createCSSSheet({
|
|
200
|
-
// red: styled.class`
|
|
201
|
-
// background: red;
|
|
202
|
-
// &:hover {
|
|
203
|
-
// background: blue;
|
|
204
|
-
// }
|
|
205
|
-
// `,
|
|
206
|
-
// });
|
|
207
|
-
export const styled = { class: raw };
|
|
208
198
|
export function camelToKebabCase(str) {
|
|
209
199
|
return str.replace(/[A-Z]/g, ($1) => '-' + $1.toLowerCase());
|
|
210
200
|
}
|
package/lib/utils.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/lib/utils.ts"],"names":[],"mappings":"AAAA,MAAM,EAAE,MAAM,EAAE,
|
|
1
|
+
{"version":3,"file":"utils.js","sourceRoot":"","sources":["../src/lib/utils.ts"],"names":[],"mappings":"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"}
|
package/lib/version.d.ts
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export declare const version = "
|
|
1
|
+
export declare const version = "0.0.0";
|
|
2
2
|
//# sourceMappingURL=version.d.ts.map
|
package/lib/version.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../src/lib/version.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"version.d.ts","sourceRoot":"","sources":["../src/lib/version.ts"],"names":[],"mappings":"AACA,eAAO,MAAM,OAAO,UAAU,CAAC"}
|
package/lib/version.js
CHANGED
package/lib/version.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"version.js","sourceRoot":"","sources":["../src/lib/version.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,OAAO,GAAG,OAAO,CAAC"}
|
|
1
|
+
{"version":3,"file":"version.js","sourceRoot":"","sources":["../src/lib/version.ts"],"names":[],"mappings":"AAAA,yBAAyB;AACzB,MAAM,CAAC,MAAM,OAAO,GAAG,OAAO,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mantou/gem",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.2.0",
|
|
4
4
|
"description": "💎 使用自定义元素的轻量级 WebApp 开发框架",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"frontend",
|
|
@@ -17,6 +17,7 @@
|
|
|
17
17
|
"exports": {
|
|
18
18
|
".": "./index.js",
|
|
19
19
|
"./lib/*": "./lib/*.js",
|
|
20
|
+
"./test/*": "./test/*.js",
|
|
20
21
|
"./elements/*": "./elements/*.js",
|
|
21
22
|
"./helper/*": "./helper/*.js"
|
|
22
23
|
},
|
|
@@ -30,7 +31,7 @@
|
|
|
30
31
|
],
|
|
31
32
|
"typings": "index.d.ts",
|
|
32
33
|
"scripts": {
|
|
33
|
-
"docs": "GEM_BOOK_REPLACE=true gem-book docs",
|
|
34
|
+
"docs": "cross-env GEM_BOOK_REPLACE=true gem-book docs",
|
|
34
35
|
"docs:remote": "pnpm run docs",
|
|
35
36
|
"build:docs": "pnpm run docs --build",
|
|
36
37
|
"build:module": "tsc -p tsconfig.build.json",
|
|
@@ -39,16 +40,14 @@
|
|
|
39
40
|
"start": "pnpm build:module --watch",
|
|
40
41
|
"test": "cross-env NODE_OPTIONS=--no-experimental-fetch wtr"
|
|
41
42
|
},
|
|
42
|
-
"dependencies": {
|
|
43
|
-
"lit-html": "^1.4.1"
|
|
44
|
-
},
|
|
45
43
|
"devDependencies": {
|
|
46
|
-
"@esm-bundle/chai": "^4.3.4-fix.0",
|
|
47
44
|
"@gemjs/config": "^2.1.0",
|
|
48
|
-
"@
|
|
45
|
+
"@types/chai": "^5.0.0",
|
|
49
46
|
"@types/mocha": "^10.0.7",
|
|
47
|
+
"@types/trusted-types": "^2.0.7",
|
|
50
48
|
"@web/dev-server-esbuild": "^1.0.2",
|
|
51
49
|
"@web/test-runner": "^0.18.1",
|
|
50
|
+
"chai": "^5.1.1",
|
|
52
51
|
"rimraf": "^3.0.2",
|
|
53
52
|
"typescript": "^5.6.2",
|
|
54
53
|
"vite": "^5.2.10"
|
|
@@ -7,10 +7,6 @@ const final = Symbol();
|
|
|
7
7
|
/**
|
|
8
8
|
* 在模版中声明的 dialog，使用 `open` 方法 打开；
|
|
9
9
|
* 模拟 top layer：https://github.com/whatwg/html/issues/4633.
|
|
10
|
-
*
|
|
11
|
-
* @attr label
|
|
12
|
-
* @fires open
|
|
13
|
-
* @fires close
|
|
14
10
|
*/
|
|
15
11
|
@connectStore(history.store)
|
|
16
12
|
@aria({ role: 'dialog', ariaModal: 'true' })
|
|
@@ -1,7 +1,6 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { css, GemElement } from '../../lib/element';
|
|
2
2
|
import type { Emitter } from '../../lib/decorators';
|
|
3
|
-
import { adoptedStyle, attribute, emitter, mounted } from '../../lib/decorators';
|
|
4
|
-
import { css } from '../../lib/utils';
|
|
3
|
+
import { adoptedStyle, attribute, emitter, mounted, state } from '../../lib/decorators';
|
|
5
4
|
|
|
6
5
|
export type PanEventDetail = {
|
|
7
6
|
// movement
|
|
@@ -45,28 +44,20 @@ function angleAB(
|
|
|
45
44
|
);
|
|
46
45
|
}
|
|
47
46
|
|
|
48
|
-
const style =
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
47
|
+
const style = css`
|
|
48
|
+
@layer {
|
|
49
|
+
:scope:where(:not([hidden])) {
|
|
50
|
+
display: block;
|
|
51
|
+
user-select: none;
|
|
52
|
+
touch-action: attr(touch-action, none);
|
|
53
|
+
}
|
|
53
54
|
}
|
|
54
|
-
|
|
55
|
+
`;
|
|
55
56
|
|
|
56
57
|
/**
|
|
57
58
|
* 块级元素，如果要设置成 `contents`，则内容块要设置 `touch-action: none`
|
|
58
59
|
* https://javascript.info/pointer-events#event-pointercancel
|
|
59
60
|
* 在移动端上，必须设置 `touch-action` 以允许滚动等原生动作
|
|
60
|
-
*
|
|
61
|
-
* @customElement gem-gesture
|
|
62
|
-
* @event pan
|
|
63
|
-
* @event pinch
|
|
64
|
-
* @event rotate
|
|
65
|
-
* @event swipe
|
|
66
|
-
* @event press
|
|
67
|
-
* @event end
|
|
68
|
-
*
|
|
69
|
-
* @attr touch-action
|
|
70
61
|
*/
|
|
71
62
|
@adoptedStyle(style)
|
|
72
63
|
export class GemGestureElement extends GemElement {
|
|
@@ -74,18 +65,20 @@ export class GemGestureElement extends GemElement {
|
|
|
74
65
|
@emitter pinch: Emitter<PinchEventDetail>;
|
|
75
66
|
@emitter rotate: Emitter<RotateEventDetail>;
|
|
76
67
|
@emitter swipe: Emitter<SwipeEventDetail>;
|
|
77
|
-
@emitter press: Emitter<
|
|
78
|
-
@emitter end: Emitter<
|
|
68
|
+
@emitter press: Emitter<PointerEvent>;
|
|
69
|
+
@emitter end: Emitter<PointerEvent>;
|
|
79
70
|
|
|
80
71
|
@attribute touchAction: string;
|
|
81
72
|
|
|
73
|
+
@state grabbing: boolean;
|
|
74
|
+
|
|
82
75
|
#pressed = false; // 触发 press 之后不触发其他事件
|
|
83
76
|
#pressTimer = 0;
|
|
84
77
|
|
|
85
78
|
#startEventMap: Map<number, PointerEvent> = new Map();
|
|
86
79
|
|
|
87
80
|
#getMoves = (pointerId: number) => {
|
|
88
|
-
return this.
|
|
81
|
+
return this.movesMap.get(pointerId) || [];
|
|
89
82
|
};
|
|
90
83
|
|
|
91
84
|
#getStartEvent = (pointerId: number) => {
|
|
@@ -93,7 +86,7 @@ export class GemGestureElement extends GemElement {
|
|
|
93
86
|
};
|
|
94
87
|
|
|
95
88
|
#getOtherLastMove = (pointerId: number) => {
|
|
96
|
-
for (const id of this.
|
|
89
|
+
for (const id of this.movesMap.keys()) {
|
|
97
90
|
if (id !== pointerId) {
|
|
98
91
|
const moves = this.#getMoves(id);
|
|
99
92
|
return moves[moves.length - 1] || this.#getStartEvent(id);
|
|
@@ -134,14 +127,15 @@ export class GemGestureElement extends GemElement {
|
|
|
134
127
|
};
|
|
135
128
|
|
|
136
129
|
#onStart = (evt: PointerEvent) => {
|
|
130
|
+
this.grabbing = true;
|
|
137
131
|
evt.stopPropagation();
|
|
138
132
|
this.setPointerCapture(evt.pointerId);
|
|
139
|
-
this.
|
|
133
|
+
this.movesMap.set(evt.pointerId, []);
|
|
140
134
|
this.#startEventMap.set(evt.pointerId, evt);
|
|
141
135
|
if (evt.isPrimary) {
|
|
142
136
|
this.#pressed = false;
|
|
143
137
|
this.#pressTimer = window.setTimeout(() => {
|
|
144
|
-
this.press(
|
|
138
|
+
this.press(evt);
|
|
145
139
|
this.#pressed = true;
|
|
146
140
|
}, 251);
|
|
147
141
|
}
|
|
@@ -153,6 +147,8 @@ export class GemGestureElement extends GemElement {
|
|
|
153
147
|
const moves = this.#getMoves(pointerId);
|
|
154
148
|
const startEvent = this.#getStartEvent(pointerId);
|
|
155
149
|
const lastMove = moves[moves.length - 1] || startEvent;
|
|
150
|
+
// Firefox contextmenu after trigger
|
|
151
|
+
if (!lastMove) return;
|
|
156
152
|
// https://bugs.webkit.org/show_bug.cgi?id=220194
|
|
157
153
|
// https://bugs.chromium.org/p/chromium/issues/detail?id=1092358
|
|
158
154
|
const movementX = clientX - lastMove.clientX;
|
|
@@ -169,7 +165,7 @@ export class GemGestureElement extends GemElement {
|
|
|
169
165
|
moves.push(move);
|
|
170
166
|
this.pan(move);
|
|
171
167
|
|
|
172
|
-
if (this.
|
|
168
|
+
if (this.movesMap.size !== 1) {
|
|
173
169
|
const secondaryPoint = this.#getOtherLastMove(pointerId) as PanEventDetail;
|
|
174
170
|
const moveLen = Math.sqrt(movementX ** 2 + movementY ** 2);
|
|
175
171
|
const distanceLen = Math.sqrt(
|
|
@@ -206,13 +202,14 @@ export class GemGestureElement extends GemElement {
|
|
|
206
202
|
}
|
|
207
203
|
};
|
|
208
204
|
|
|
209
|
-
#onEnd = (evt: PointerEvent) => {
|
|
205
|
+
#onEnd = async (evt: PointerEvent) => {
|
|
210
206
|
evt.stopPropagation();
|
|
211
207
|
const { pointerId } = evt;
|
|
212
208
|
window.clearTimeout(this.#pressTimer);
|
|
213
209
|
|
|
214
|
-
if (this.
|
|
215
|
-
this.
|
|
210
|
+
if (this.movesMap.size === 1) {
|
|
211
|
+
this.grabbing = false;
|
|
212
|
+
this.end(evt);
|
|
216
213
|
}
|
|
217
214
|
|
|
218
215
|
// auto release: https://javascript.info/pointer-events#pointer-capturing
|
|
@@ -245,8 +242,10 @@ export class GemGestureElement extends GemElement {
|
|
|
245
242
|
}
|
|
246
243
|
}
|
|
247
244
|
|
|
248
|
-
this._movesMap.delete(pointerId);
|
|
249
245
|
this.#startEventMap.delete(pointerId);
|
|
246
|
+
// 确保外部 end 事件处理器中可以读取到
|
|
247
|
+
await Promise.resolve();
|
|
248
|
+
this.movesMap.delete(pointerId);
|
|
250
249
|
};
|
|
251
250
|
|
|
252
251
|
#preventDefault = (evt: Event) => evt.preventDefault();
|
|
@@ -263,6 +262,6 @@ export class GemGestureElement extends GemElement {
|
|
|
263
262
|
this.addEventListener('dragstart', this.#preventDefault);
|
|
264
263
|
};
|
|
265
264
|
|
|
266
|
-
/**
|
|
267
|
-
|
|
265
|
+
/** 一次手势的指针移动事件记录 */
|
|
266
|
+
movesMap: Map<number, PanEventDetail[]> = new Map();
|
|
268
267
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { css, GemElement, html } from '../../lib/element';
|
|
2
2
|
import {
|
|
3
3
|
attribute,
|
|
4
4
|
property,
|
|
@@ -14,8 +14,7 @@ import {
|
|
|
14
14
|
template,
|
|
15
15
|
} from '../../lib/decorators';
|
|
16
16
|
import { history, basePathStore } from '../../lib/history';
|
|
17
|
-
import { absoluteLocation
|
|
18
|
-
import { ifDefined } from '../../lib/directives';
|
|
17
|
+
import { absoluteLocation } from '../../lib/utils';
|
|
19
18
|
|
|
20
19
|
import type { RouteItem, RouteOptions } from './route';
|
|
21
20
|
import { matchPath, createHistoryParams, createPath } from './route';
|
|
@@ -24,7 +23,7 @@ function isExternal(path: string) {
|
|
|
24
23
|
return !path.startsWith('/');
|
|
25
24
|
}
|
|
26
25
|
|
|
27
|
-
const styles =
|
|
26
|
+
const styles = css`
|
|
28
27
|
:host {
|
|
29
28
|
/* link default style */
|
|
30
29
|
cursor: pointer;
|
|
@@ -38,21 +37,10 @@ const styles = createCSSSheet(css`
|
|
|
38
37
|
a:visited {
|
|
39
38
|
color: unset;
|
|
40
39
|
}
|
|
41
|
-
|
|
40
|
+
`;
|
|
42
41
|
|
|
43
42
|
/**
|
|
44
|
-
*
|
|
45
|
-
* @attr href
|
|
46
|
-
* @attr target
|
|
47
|
-
* @attr doc-title
|
|
48
|
-
* @attr path
|
|
49
|
-
* @attr query
|
|
50
|
-
* @attr hash
|
|
51
|
-
* @attr pattern
|
|
52
|
-
* @attr hint
|
|
53
|
-
* @part link
|
|
54
|
-
*
|
|
55
|
-
* Bug: print `<link>` https://github.com/mantou132/gem/issues/36
|
|
43
|
+
* Bug: [can't print `<link>`](https://github.com/mantou132/gem/issues/36)
|
|
56
44
|
*/
|
|
57
45
|
@connectStore(basePathStore)
|
|
58
46
|
@adoptedStyle(styles)
|
|
@@ -158,16 +146,13 @@ export class GemLinkElement extends GemElement {
|
|
|
158
146
|
|
|
159
147
|
@template()
|
|
160
148
|
#content = () => {
|
|
161
|
-
return html
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
<slot></slot>
|
|
169
|
-
</a>
|
|
170
|
-
`;
|
|
149
|
+
return html`<a
|
|
150
|
+
part=${this.link}
|
|
151
|
+
@click=${this.#preventDefault}
|
|
152
|
+
href=${this.#hint === 'off' ? null : this.#getHint()}
|
|
153
|
+
tabindex="-1"
|
|
154
|
+
><slot></slot
|
|
155
|
+
></a>`;
|
|
171
156
|
};
|
|
172
157
|
|
|
173
158
|
/**
|
|
@@ -194,11 +179,6 @@ export class GemLinkElement extends GemElement {
|
|
|
194
179
|
}
|
|
195
180
|
}
|
|
196
181
|
|
|
197
|
-
/**
|
|
198
|
-
* @customElement gem-active-link
|
|
199
|
-
* @attr pattern
|
|
200
|
-
* @state active
|
|
201
|
-
*/
|
|
202
182
|
@connectStore(history.store)
|
|
203
183
|
export class GemActiveLinkElement extends GemLinkElement {
|
|
204
184
|
@attribute pattern: string; // 使用匹配模式设定 active
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { TemplateResult } from '../../lib/element';
|
|
2
|
-
import { createState, GemElement, html } from '../../lib/element';
|
|
2
|
+
import { createState, css, GemElement, html } from '../../lib/element';
|
|
3
3
|
import type { Emitter } from '../../lib/decorators';
|
|
4
|
-
import { property, emitter, boolattribute, shadow, effect, template, light } from '../../lib/decorators';
|
|
4
|
+
import { property, emitter, boolattribute, shadow, effect, template, light, adoptedStyle } from '../../lib/decorators';
|
|
5
5
|
import type { Store } from '../../lib/store';
|
|
6
6
|
import { createStore, connect } from '../../lib/store';
|
|
7
7
|
import type { UpdateHistoryParams } from '../../lib/history';
|
|
@@ -132,13 +132,6 @@ export type RouteTrigger = {
|
|
|
132
132
|
|
|
133
133
|
const scrollPositionMap = new Map<string, number>();
|
|
134
134
|
|
|
135
|
-
/**
|
|
136
|
-
* @customElement gem-light-route
|
|
137
|
-
* @attr inert 暂停路由更新
|
|
138
|
-
* @fires routechange
|
|
139
|
-
* @fires error
|
|
140
|
-
* @fires loading
|
|
141
|
-
*/
|
|
142
135
|
@light({ penetrable: true })
|
|
143
136
|
export class GemLightRouteElement extends GemElement {
|
|
144
137
|
@boolattribute transition: boolean;
|
|
@@ -283,15 +276,7 @@ export class GemLightRouteElement extends GemElement {
|
|
|
283
276
|
return html`${content}`;
|
|
284
277
|
}
|
|
285
278
|
|
|
286
|
-
return html
|
|
287
|
-
<style>
|
|
288
|
-
:host(:where(:not([hidden]))),
|
|
289
|
-
:not(:defined) {
|
|
290
|
-
display: contents;
|
|
291
|
-
}
|
|
292
|
-
</style>
|
|
293
|
-
${content === INIT_CONTENT ? html`<slot></slot>` : content}
|
|
294
|
-
`;
|
|
279
|
+
return content === INIT_CONTENT ? html`<slot></slot>` : content;
|
|
295
280
|
};
|
|
296
281
|
|
|
297
282
|
// 重写 `update`，并暴露为公共字段
|
|
@@ -331,8 +316,13 @@ export class GemLightRouteElement extends GemElement {
|
|
|
331
316
|
};
|
|
332
317
|
}
|
|
333
318
|
|
|
334
|
-
|
|
335
|
-
|
|
336
|
-
|
|
319
|
+
const style = css`
|
|
320
|
+
:host(:where(:not([hidden]))),
|
|
321
|
+
:not(:defined) {
|
|
322
|
+
display: contents;
|
|
323
|
+
}
|
|
324
|
+
`;
|
|
325
|
+
|
|
337
326
|
@shadow()
|
|
327
|
+
@adoptedStyle(style)
|
|
338
328
|
export class GemRouteElement extends GemLightRouteElement {}
|
|
@@ -35,11 +35,6 @@ function setDocumentTitle(defaultTitle?: string | null, prefix = '', suffix = ''
|
|
|
35
35
|
}
|
|
36
36
|
}
|
|
37
37
|
|
|
38
|
-
/**
|
|
39
|
-
* @customElement gem-title
|
|
40
|
-
* @attr prefix
|
|
41
|
-
* @attr suffix
|
|
42
|
-
*/
|
|
43
38
|
@shadow()
|
|
44
39
|
export class GemTitleElement extends GemElement {
|
|
45
40
|
@attribute prefix: string;
|
|
@@ -1,12 +1,6 @@
|
|
|
1
1
|
import { GemElement } from '../../lib/element';
|
|
2
2
|
import { attribute, shadow, template } from '../../lib/decorators';
|
|
3
|
-
import { raw } from '../../lib/utils';
|
|
4
3
|
|
|
5
|
-
/**
|
|
6
|
-
* @customElement gem-unsafe
|
|
7
|
-
* @attr content
|
|
8
|
-
* @attr contentcss
|
|
9
|
-
*/
|
|
10
4
|
@shadow()
|
|
11
5
|
export class GemUnsafeElement extends GemElement {
|
|
12
6
|
@attribute content: string;
|
|
@@ -14,16 +8,17 @@ export class GemUnsafeElement extends GemElement {
|
|
|
14
8
|
|
|
15
9
|
@template()
|
|
16
10
|
#content = () => {
|
|
17
|
-
|
|
11
|
+
const style = /*html*/ `
|
|
18
12
|
<style>
|
|
19
13
|
:host(:where(:not([hidden]))) {
|
|
20
14
|
display: contents;
|
|
21
15
|
}
|
|
22
16
|
${this.contentcss}
|
|
23
17
|
</style>
|
|
24
|
-
${this.content}
|
|
25
18
|
`;
|
|
26
19
|
|
|
20
|
+
this.shadowRoot!.innerHTML = this.content + style.trim();
|
|
21
|
+
|
|
27
22
|
// 不要更新内容
|
|
28
23
|
return undefined;
|
|
29
24
|
};
|
package/src/elements/base/use.ts
CHANGED
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { css, GemElement, html } from '../../lib/element';
|
|
2
2
|
import { adoptedStyle, attribute, property, shadow, state, template } from '../../lib/decorators';
|
|
3
|
-
import { css } from '../../lib/utils';
|
|
4
3
|
|
|
5
|
-
const styles =
|
|
4
|
+
const styles = css`
|
|
6
5
|
:host(:where(:not([hidden]))) {
|
|
7
6
|
position: relative;
|
|
8
7
|
display: inline-flex;
|
|
@@ -12,7 +11,7 @@ const styles = createCSSSheet(css`
|
|
|
12
11
|
width: 100%;
|
|
13
12
|
height: 100%;
|
|
14
13
|
}
|
|
15
|
-
|
|
14
|
+
`;
|
|
16
15
|
|
|
17
16
|
const eleCache = new Map<string, HTMLTemplateElement>();
|
|
18
17
|
/**
|
|
@@ -20,9 +19,6 @@ const eleCache = new Map<string, HTMLTemplateElement>();
|
|
|
20
19
|
* 此元素用来模拟 `<use>`,
|
|
21
20
|
* 由于是复制元素，所以不能像 `<use>` 一样自动更新
|
|
22
21
|
* slot 支持为 icon 添加效果，如涟漪，徽章
|
|
23
|
-
*
|
|
24
|
-
* @customElement gem-use
|
|
25
|
-
* @attr selector
|
|
26
22
|
*/
|
|
27
23
|
@shadow()
|
|
28
24
|
@adoptedStyle(styles)
|
|
@@ -52,9 +48,6 @@ export class GemUseElement extends GemElement {
|
|
|
52
48
|
|
|
53
49
|
@template()
|
|
54
50
|
#content = () => {
|
|
55
|
-
return html
|
|
56
|
-
${this.#getContent()}
|
|
57
|
-
<slot></slot>
|
|
58
|
-
`;
|
|
51
|
+
return html`${this.#getContent()}<slot></slot>`;
|
|
59
52
|
};
|
|
60
53
|
}
|
package/src/helper/theme.ts
CHANGED
|
@@ -2,10 +2,10 @@ import type { Store } from '../lib/store';
|
|
|
2
2
|
import { connect, createStore } from '../lib/store';
|
|
3
3
|
import { camelToKebabCase, createUpdater, randomStr } from '../lib/utils';
|
|
4
4
|
import type { GemElement } from '../lib/element';
|
|
5
|
-
import { SheetToken,
|
|
5
|
+
import { SheetToken, css } from '../lib/element';
|
|
6
6
|
|
|
7
7
|
export type Theme<T> = ReturnType<typeof createUpdater<T>> &
|
|
8
|
-
ReturnType<typeof
|
|
8
|
+
ReturnType<typeof css> & {
|
|
9
9
|
[K in keyof T as K extends `${string}Color`
|
|
10
10
|
? `${string & K}${'' | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900}`
|
|
11
11
|
: K]: T[K];
|
|
@@ -26,7 +26,7 @@ export function getThemeProps<T>(theme: Theme<T>) {
|
|
|
26
26
|
|
|
27
27
|
function createThemeFromProps<T extends Record<string, unknown>>(themeObj: T, props: Record<string, string> = {}) {
|
|
28
28
|
const salt = randomStr();
|
|
29
|
-
const styleSheet =
|
|
29
|
+
const styleSheet = css({})[SheetToken];
|
|
30
30
|
const store = createStore<T>(themeObj);
|
|
31
31
|
const theme: any = new Proxy(
|
|
32
32
|
createUpdater({ [SheetToken]: styleSheet }, (payload: Partial<T>) => store(payload)),
|
|
@@ -63,7 +63,7 @@ function createThemeFromProps<T extends Record<string, unknown>>(themeObj: T, pr
|
|
|
63
63
|
}
|
|
64
64
|
|
|
65
65
|
/**
|
|
66
|
-
* 用于 `@adoptedStyle(theme)`，类似 `
|
|
66
|
+
* 用于 `@adoptedStyle(theme)`，类似 `css`
|
|
67
67
|
*/
|
|
68
68
|
export function createScopedTheme<T extends Record<string, unknown>>(themeObj: T) {
|
|
69
69
|
return createThemeFromProps(themeObj);
|
package/src/index.ts
CHANGED