@txstate-mws/svelte-components 1.0.2 → 1.1.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/README.md +33 -14
- package/{dist/ts/actions → actions}/buttonify.d.ts +0 -0
- package/{dist/actions → actions}/buttonify.js +1 -6
- package/{dist/ts/actions → actions}/glue.d.ts +1 -1
- package/{dist/actions → actions}/glue.js +8 -13
- package/actions/index.d.ts +7 -0
- package/actions/index.js +7 -0
- package/actions/offset.d.ts +15 -0
- package/actions/offset.js +35 -0
- package/{dist/ts/actions → actions}/portal.d.ts +0 -0
- package/actions/portal.js +13 -0
- package/{dist/ts/actions → actions}/resize.d.ts +6 -2
- package/actions/resize.js +57 -0
- package/{dist/ts/actions → actions}/sticky.d.ts +2 -2
- package/{dist/actions → actions}/sticky.js +11 -19
- package/{dist/ts/actions → actions}/stickyfixed.d.ts +2 -2
- package/{dist/actions → actions}/stickyfixed.js +15 -24
- package/components/Card.svelte +23 -0
- package/components/Card.svelte.d.ts +18 -0
- package/components/CardLayout.svelte +197 -0
- package/components/CardLayout.svelte.d.ts +21 -0
- package/{dist/components → components}/CollapsingTable.svelte +12 -13
- package/components/CollapsingTable.svelte.d.ts +59 -0
- package/{dist/ts/components → components}/ConditionalWrapper.svelte +6 -7
- package/components/ConditionalWrapper.svelte.d.ts +23 -0
- package/{dist/components → components}/FocusLock.svelte +11 -9
- package/components/FocusLock.svelte.d.ts +26 -0
- package/{dist/components → components}/Modal.svelte +5 -4
- package/components/Modal.svelte.d.ts +27 -0
- package/components/MultiSelect.svelte +179 -0
- package/components/MultiSelect.svelte.d.ts +35 -0
- package/{dist/components → components}/PopupMenu.svelte +29 -24
- package/components/PopupMenu.svelte.d.ts +45 -0
- package/{dist/components → components}/ScreenReaderOnly.svelte +1 -1
- package/components/ScreenReaderOnly.svelte.d.ts +20 -0
- package/{dist/ts/components → components}/index.d.ts +3 -0
- package/components/index.js +9 -0
- package/index.d.ts +4 -0
- package/index.js +4 -0
- package/package.json +47 -77
- package/types/CardLayout.d.ts +14 -0
- package/types/CardLayout.js +1 -0
- package/{dist/ts/types → types}/CollapsingTable.d.ts +0 -0
- package/{dist/ts/tests/Actions/Actions.stories.d.ts → types/CollapsingTable.js} +0 -0
- package/{dist/ts/types → types}/PopupMenu.d.ts +0 -0
- package/{dist/ts/tests/CollapsingTable/CollapsingTable.stories.d.ts → types/PopupMenu.js} +0 -0
- package/types/index.d.ts +3 -0
- package/types/index.js +3 -0
- package/{dist/ts/lib → util}/bodyoffset.d.ts +2 -1
- package/{dist/lib → util}/bodyoffset.js +10 -14
- package/util/index.d.ts +3 -0
- package/util/index.js +3 -0
- package/{dist/ts/lib → util}/repositioned.d.ts +1 -2
- package/{dist/lib → util}/repositioned.js +13 -24
- package/util/util.d.ts +5 -0
- package/util/util.js +33 -0
- package/LICENSE +0 -21
- package/dist/actions/buttonify.js.map +0 -1
- package/dist/actions/glue.js.map +0 -1
- package/dist/actions/index.js +0 -20
- package/dist/actions/index.js.map +0 -1
- package/dist/actions/offset.js +0 -35
- package/dist/actions/offset.js.map +0 -1
- package/dist/actions/portal.js +0 -19
- package/dist/actions/portal.js.map +0 -1
- package/dist/actions/resize.js +0 -48
- package/dist/actions/resize.js.map +0 -1
- package/dist/actions/sticky.js.map +0 -1
- package/dist/actions/stickyfixed.js.map +0 -1
- package/dist/components/ConditionalWrapper.svelte +0 -38
- package/dist/components/index.js +0 -19
- package/dist/components/index.js.map +0 -1
- package/dist/index.js +0 -17
- package/dist/index.js.map +0 -1
- package/dist/lib/activestore.js +0 -123
- package/dist/lib/activestore.js.map +0 -1
- package/dist/lib/bodyoffset.js.map +0 -1
- package/dist/lib/convertedstore.js +0 -41
- package/dist/lib/convertedstore.js.map +0 -1
- package/dist/lib/derivedstore.js +0 -65
- package/dist/lib/derivedstore.js.map +0 -1
- package/dist/lib/index.js +0 -22
- package/dist/lib/index.js.map +0 -1
- package/dist/lib/repositioned.js.map +0 -1
- package/dist/lib/safestore.js +0 -16
- package/dist/lib/safestore.js.map +0 -1
- package/dist/lib/store.js +0 -27
- package/dist/lib/store.js.map +0 -1
- package/dist/lib/substore.js +0 -47
- package/dist/lib/substore.js.map +0 -1
- package/dist/lib/util.js +0 -16
- package/dist/lib/util.js.map +0 -1
- package/dist/ts/actions/index.d.ts +0 -7
- package/dist/ts/actions/offset.d.ts +0 -15
- package/dist/ts/components/CollapsingTable.svelte +0 -147
- package/dist/ts/components/FocusLock.svelte +0 -101
- package/dist/ts/components/Modal.svelte +0 -54
- package/dist/ts/components/PopupMenu.svelte +0 -279
- package/dist/ts/components/ScreenReaderOnly.svelte +0 -26
- package/dist/ts/index.d.ts +0 -4
- package/dist/ts/lib/activestore.d.ts +0 -60
- package/dist/ts/lib/convertedstore.d.ts +0 -16
- package/dist/ts/lib/derivedstore.d.ts +0 -23
- package/dist/ts/lib/index.d.ts +0 -9
- package/dist/ts/lib/safestore.d.ts +0 -4
- package/dist/ts/lib/store.d.ts +0 -16
- package/dist/ts/lib/substore.d.ts +0 -24
- package/dist/ts/lib/util.d.ts +0 -2
- package/dist/ts/tests/Actions/Offset.svelte +0 -34
- package/dist/ts/tests/Actions/Resize.svelte +0 -31
- package/dist/ts/tests/Actions/Sticky.svelte +0 -65
- package/dist/ts/tests/CollapsingTable/CollapsingTable.test.d.ts +0 -1
- package/dist/ts/tests/CollapsingTable/CollapsingTableTest.svelte +0 -36
- package/dist/ts/tests/Modal/Modal.stories.d.ts +0 -1
- package/dist/ts/tests/Modal/Modal.test.d.ts +0 -1
- package/dist/ts/tests/Modal/ModalTest.svelte +0 -58
- package/dist/ts/tests/PopupMenu/PopupMenu.stories.d.ts +0 -1
- package/dist/ts/tests/PopupMenu/PopupMenu.test.d.ts +0 -1
- package/dist/ts/tests/PopupMenu/PopupMenuBody.svelte +0 -34
- package/dist/ts/tests/PopupMenu/PopupMenuButtonIsParent.svelte +0 -36
- package/dist/ts/tests/PopupMenu/PopupMenuComplex.svelte +0 -34
- package/dist/ts/tests/PopupMenu/PopupMenuSimple.svelte +0 -36
- package/dist/ts/tests/stores/deepstore.test.d.ts +0 -1
- package/dist/ts/types/index.d.ts +0 -2
- package/dist/types/CollapsingTable.js +0 -3
- package/dist/types/CollapsingTable.js.map +0 -1
- package/dist/types/PopupMenu.js +0 -3
- package/dist/types/PopupMenu.js.map +0 -1
- package/dist/types/index.js +0 -15
- package/dist/types/index.js.map +0 -1
- package/docs/CollapsingTable.md +0 -79
- package/docs/ConditionalWrapper.md +0 -35
- package/docs/Modal.md +0 -63
- package/docs/PopupMenu.md +0 -31
- package/docs/ScreenReaderOnly.md +0 -10
- package/docs/actions.md +0 -84
- package/docs/stores.md +0 -203
- package/esm/index.js +0 -1
- package/esm/package.json +0 -3
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.convertStore = exports.ConvertedStore = void 0;
|
|
4
|
-
const store_1 = require("./store");
|
|
5
|
-
const activestore_1 = require("./activestore");
|
|
6
|
-
/**
|
|
7
|
-
* A store that allows you to pass in a traditional svelte store in the constructor.
|
|
8
|
-
*
|
|
9
|
-
* Updates to the original store will be sent to subscribers of this store, but only after a deep equality check.
|
|
10
|
-
*
|
|
11
|
-
* Updates to this store will also be sent to the original store after a deep equality check.
|
|
12
|
-
*/
|
|
13
|
-
class ConvertedStore extends store_1.Store {
|
|
14
|
-
constructor(value) {
|
|
15
|
-
super({});
|
|
16
|
-
this.pause = false;
|
|
17
|
-
this.valueStore = value;
|
|
18
|
-
this.registerSource(() => this.valueStore.subscribe(v => this.set(v)));
|
|
19
|
-
}
|
|
20
|
-
set(value) {
|
|
21
|
-
if (this.pause)
|
|
22
|
-
return;
|
|
23
|
-
if (!this.equal(value, this.value)) {
|
|
24
|
-
this.value = this.clone(value);
|
|
25
|
-
for (const [id, run] of this.subscribers) {
|
|
26
|
-
run(value);
|
|
27
|
-
}
|
|
28
|
-
if ((0, activestore_1.isSettable)(this.valueStore)) {
|
|
29
|
-
this.pause = true;
|
|
30
|
-
this.valueStore.set(value);
|
|
31
|
-
this.pause = false;
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
exports.ConvertedStore = ConvertedStore;
|
|
37
|
-
function convertStore(store) {
|
|
38
|
-
return new ConvertedStore(store);
|
|
39
|
-
}
|
|
40
|
-
exports.convertStore = convertStore;
|
|
41
|
-
//# sourceMappingURL=convertedstore.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"convertedstore.js","sourceRoot":"","sources":["../../src/lib/convertedstore.ts"],"names":[],"mappings":";;;AAAA,mCAA+B;AAC/B,+CAAyD;AAEzD;;;;;;GAMG;AACH,MAAa,cAAkB,SAAQ,aAAQ;IAI7C,YAAa,KAAuB;QAClC,KAAK,CAAC,EAAS,CAAC,CAAA;QAHV,UAAK,GAAG,KAAK,CAAA;QAInB,IAAI,CAAC,UAAU,GAAG,KAAK,CAAA;QACvB,IAAI,CAAC,cAAc,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;IACxE,CAAC;IAED,GAAG,CAAE,KAAQ;QACX,IAAI,IAAI,CAAC,KAAK;YAAE,OAAM;QACtB,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,EAAE;YAClC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAA;YAC9B,KAAK,MAAM,CAAC,EAAE,EAAE,GAAG,CAAC,IAAI,IAAI,CAAC,WAAW,EAAE;gBACxC,GAAG,CAAC,KAAK,CAAC,CAAA;aACX;YACD,IAAI,IAAA,wBAAU,EAAC,IAAI,CAAC,UAAU,CAAC,EAAE;gBAC/B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAA;gBACjB,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,KAAK,CAAC,CAAA;gBAC1B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;aACnB;SACF;IACH,CAAC;CACF;AAxBD,wCAwBC;AAED,SAAgB,YAAY,CAAM,KAAuB;IACvD,OAAO,IAAI,cAAc,CAAC,KAAK,CAAC,CAAA;AAClC,CAAC;AAFD,oCAEC"}
|
package/dist/lib/derivedstore.js
DELETED
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.derivedStore = exports.DerivedStore = void 0;
|
|
4
|
-
const store_1 = require("./store");
|
|
5
|
-
const txstate_utils_1 = require("txstate-utils");
|
|
6
|
-
/**
|
|
7
|
-
* Watch one or more parent stores for changes. Each time, run a function to derive
|
|
8
|
-
* a new state from the parent state(s). Subscribers will only be notified if the
|
|
9
|
-
* derived state has changed (uses fast-deep-equal).
|
|
10
|
-
*
|
|
11
|
-
* If only one parent store, it's possible to use a dot-prop string as the getter.
|
|
12
|
-
*/
|
|
13
|
-
class DerivedStore extends store_1.Store {
|
|
14
|
-
constructor(store, getter, options) {
|
|
15
|
-
if (typeof getter === 'string') {
|
|
16
|
-
const accessor = getter;
|
|
17
|
-
getter = (parentValue) => (0, txstate_utils_1.get)(parentValue, accessor);
|
|
18
|
-
}
|
|
19
|
-
super({});
|
|
20
|
-
if (Array.isArray(store)) {
|
|
21
|
-
const values = [];
|
|
22
|
-
let timer;
|
|
23
|
-
const superSet = () => super.set(getter(values));
|
|
24
|
-
const superSetDebounced = (options === null || options === void 0 ? void 0 : options.debounce) == null || (options === null || options === void 0 ? void 0 : options.debounce) === false || (options === null || options === void 0 ? void 0 : options.debounce) < 0
|
|
25
|
-
? superSet
|
|
26
|
-
: () => {
|
|
27
|
-
clearTimeout(timer);
|
|
28
|
-
timer = setTimeout(superSet, options.debounce === true ? 0 : options.debounce);
|
|
29
|
-
};
|
|
30
|
-
for (let i = 0; i < store.length; i++) {
|
|
31
|
-
const idx = i;
|
|
32
|
-
const st = store[i];
|
|
33
|
-
if (st instanceof store_1.Store) {
|
|
34
|
-
this.registerSource(() => st.subscribe(v => {
|
|
35
|
-
values[idx] = st.clone(v);
|
|
36
|
-
superSetDebounced();
|
|
37
|
-
}));
|
|
38
|
-
}
|
|
39
|
-
else {
|
|
40
|
-
this.registerSource(() => st.subscribe(v => {
|
|
41
|
-
values[idx] = v;
|
|
42
|
-
superSetDebounced();
|
|
43
|
-
}));
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
}
|
|
47
|
-
else {
|
|
48
|
-
let timer;
|
|
49
|
-
const superSet = (v) => super.set(getter(v));
|
|
50
|
-
const superSetDebounced = (options === null || options === void 0 ? void 0 : options.debounce) == null || (options === null || options === void 0 ? void 0 : options.debounce) === false || (options === null || options === void 0 ? void 0 : options.debounce) < 0
|
|
51
|
-
? superSet
|
|
52
|
-
: (v) => {
|
|
53
|
-
clearTimeout(timer);
|
|
54
|
-
timer = setTimeout(() => superSet(v), options.debounce === true ? 0 : options.debounce);
|
|
55
|
-
};
|
|
56
|
-
this.registerSource(() => store.subscribe(superSetDebounced));
|
|
57
|
-
}
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
exports.DerivedStore = DerivedStore;
|
|
61
|
-
function derivedStore(store, getter, options) {
|
|
62
|
-
return new DerivedStore(store, getter, options);
|
|
63
|
-
}
|
|
64
|
-
exports.derivedStore = derivedStore;
|
|
65
|
-
//# sourceMappingURL=derivedstore.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"derivedstore.js","sourceRoot":"","sources":["../../src/lib/derivedstore.ts"],"names":[],"mappings":"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"}
|
package/dist/lib/index.js
DELETED
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
-
if (k2 === undefined) k2 = k;
|
|
4
|
-
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
|
|
5
|
-
}) : (function(o, m, k, k2) {
|
|
6
|
-
if (k2 === undefined) k2 = k;
|
|
7
|
-
o[k2] = m[k];
|
|
8
|
-
}));
|
|
9
|
-
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
10
|
-
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
11
|
-
};
|
|
12
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
13
|
-
__exportStar(require("./bodyoffset"), exports);
|
|
14
|
-
__exportStar(require("./convertedstore"), exports);
|
|
15
|
-
__exportStar(require("./derivedstore"), exports);
|
|
16
|
-
__exportStar(require("./activestore"), exports);
|
|
17
|
-
__exportStar(require("./repositioned"), exports);
|
|
18
|
-
__exportStar(require("./safestore"), exports);
|
|
19
|
-
__exportStar(require("./store"), exports);
|
|
20
|
-
__exportStar(require("./substore"), exports);
|
|
21
|
-
__exportStar(require("./util"), exports);
|
|
22
|
-
//# sourceMappingURL=index.js.map
|
package/dist/lib/index.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/lib/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,+CAA4B;AAC5B,mDAAgC;AAChC,iDAA8B;AAC9B,gDAA6B;AAC7B,iDAA8B;AAC9B,8CAA2B;AAC3B,0CAAuB;AACvB,6CAA0B;AAC1B,yCAAsB"}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"repositioned.js","sourceRoot":"","sources":["../../src/lib/repositioned.ts"],"names":[],"mappings":";;;;;;AAAA,sEAAmC;AACnC,iDAA4D;AAC5D,6CAAuD;AAIvD,MAAM,SAAS,GAAG,IAAI,GAAG,EAAsB,CAAA;AAC/C,IAAI,gBAAkC,CAAA;AACtC,SAAgB,iBAAiB,CAAE,EAAc;IAC/C,SAAS,KAAK;QACZ,KAAK,MAAM,EAAE,IAAI,SAAS,CAAC,MAAM,EAAE;YAAE,EAAE,EAAE,CAAA;IAC3C,CAAC;IAED,IAAI,SAAS,CAAC,IAAI,KAAK,CAAC,EAAE;QACxB,gBAAgB,aAAhB,gBAAgB,cAAhB,gBAAgB,IAAhB,gBAAgB,GAAK,IAAI,gBAAgB,CAAC,KAAK,CAAC,EAAA;QAChD,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAA;QAC3D,gBAAgB,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,EAAE;YACtC,OAAO,EAAE,IAAI;YACb,SAAS,EAAE,IAAI;YACf,UAAU,EAAE,IAAI;YAChB,aAAa,EAAE,IAAI;SACpB,CAAC,CAAA;KACH;IAED,MAAM,EAAE,GAAG,IAAA,wBAAQ,GAAE,CAAA;IACrB,SAAS,CAAC,GAAG,CAAC,EAAE,EAAE,EAAE,CAAC,CAAA;IACrB,EAAE,EAAE,CAAA;IAEJ,OAAO;QACL,OAAO;YACL,SAAS,CAAC,MAAM,CAAC,EAAE,CAAC,CAAA;YACpB,IAAI,SAAS,CAAC,IAAI,KAAK,CAAC,EAAE;gBACxB,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAA;gBAC3C,gBAAgB,CAAC,UAAU,EAAE,CAAA;aAC9B;QACH,CAAC;KACF,CAAA;AACH,CAAC;AA7BD,8CA6BC;AAED,SAAgB,sBAAsB,CAAE,EAAmD,EAAE,EAAgG;IAC3L,IAAI,WAAW,GAAqB,EAAE,CAAA;IACtC,IAAI,GAAG,GAAG,IAAA,uBAAO,EAAC,EAAE,CAAC,CAAC,MAAM,CAAC,yBAAS,CAAC,CAAA;IACvC,SAAS,KAAK;QACZ,MAAM,OAAO,GAAG,GAAG,CAAC,GAAG,CAAC,uBAAU,CAAC,CAAA;QACnC,IAAI,OAAO,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,IAAA,yBAAK,EAAC,MAAM,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,EAAE;YAC/D,WAAW,GAAG,OAAO,CAAA;YACrB,KAAK,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC,CAAC,CAAE,EAAU,CAAC,OAAO,CAAC,CAAC,CAAC,CAAE,EAAU,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAA;SACnE;IACH,CAAC;IAED,MAAM,EAAE,OAAO,EAAE,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAA;IAE5C,OAAO;QACL,MAAM,CAAE,KAAsD,EAAE,KAAmG;YACjK,MAAM,OAAO,GAAG,KAAK,KAAK,EAAE,IAAI,KAAK,KAAK,EAAE,CAAA;YAC5C,IAAI,OAAO,EAAE;gBACX,EAAE,GAAG,KAAK,CAAA;gBACV,GAAG,GAAG,IAAA,uBAAO,EAAC,EAAE,CAAC,CAAC,MAAM,CAAC,yBAAS,CAAC,CAAA;gBACnC,EAAE,GAAG,KAAK,CAAA;gBACV,KAAK,EAAE,CAAA;aACR;QACH,CAAC;QACD,OAAO;KACR,CAAA;AACH,CAAC;AAzBD,wDAyBC;AAED,SAAgB,iCAAiC,CAAE,EAAyB,EAAE,SAAgC,EAAE,EAA8C;IAC5J,IAAI,UAA0B,CAAA;IAE9B,SAAS,KAAK;QACZ,IAAI,CAAC,EAAE,IAAI,CAAC,SAAS;YAAE,OAAM;QAC7B,MAAM,MAAM,GAAG,IAAA,yBAAY,EAAC,EAAE,EAAE,SAAS,CAAC,CAAA;QAC1C,IAAI,CAAC,IAAA,yBAAK,EAAC,MAAM,EAAE,UAAU,CAAC,EAAE;YAC9B,UAAU,GAAG,MAAM,CAAA;YACnB,EAAE,CAAC,MAAM,CAAC,CAAA;SACX;IACH,CAAC;IAED,MAAM,EAAE,OAAO,EAAE,GAAG,iBAAiB,CAAC,KAAK,CAAC,CAAA;IAE5C,OAAO;QACL,MAAM,CAAE,KAA4B,EAAE,YAAmC,EAAE,KAAiD;YAC1H,MAAM,OAAO,GAAG,KAAK,KAAK,EAAE,IAAI,YAAY,KAAK,SAAS,IAAI,KAAK,KAAK,EAAE,CAAA;YAC1E,IAAI,OAAO,EAAE;gBACX,EAAE,GAAG,KAAK,CAAA;gBACV,SAAS,GAAG,YAAY,CAAA;gBACxB,EAAE,GAAG,KAAK,CAAA;gBACV,KAAK,EAAE,CAAA;aACR;QACH,CAAC;QACD,OAAO;KACR,CAAA;AACH,CAAC;AA1BD,8EA0BC"}
|
package/dist/lib/safestore.js
DELETED
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.SafeStore = void 0;
|
|
7
|
-
const store_1 = require("./store");
|
|
8
|
-
const rfdc_1 = __importDefault(require("rfdc"));
|
|
9
|
-
const cloneDeep = (0, rfdc_1.default)();
|
|
10
|
-
class SafeStore extends store_1.Store {
|
|
11
|
-
clone(value) {
|
|
12
|
-
return cloneDeep(value);
|
|
13
|
-
}
|
|
14
|
-
}
|
|
15
|
-
exports.SafeStore = SafeStore;
|
|
16
|
-
//# sourceMappingURL=safestore.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"safestore.js","sourceRoot":"","sources":["../../src/lib/safestore.ts"],"names":[],"mappings":";;;;;;AAAA,mCAA+B;AAC/B,gDAAuB;AACvB,MAAM,SAAS,GAAG,IAAA,cAAI,GAAE,CAAA;AAExB,MAAa,SAAa,SAAQ,aAAQ;IACxC,KAAK,CAAE,KAAQ;QACb,OAAO,SAAS,CAAC,KAAK,CAAC,CAAA;IACzB,CAAC;CACF;AAJD,8BAIC"}
|
package/dist/lib/store.js
DELETED
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.Store = void 0;
|
|
7
|
-
const fast_deep_equal_1 = __importDefault(require("fast-deep-equal"));
|
|
8
|
-
const activestore_1 = require("./activestore");
|
|
9
|
-
/**
|
|
10
|
-
* An alternative to svelte's "writable" that also checks deep equality (fast-deep-equal) before
|
|
11
|
-
* notifying subscribers. A writable will notify subscribers after a shallow equality check, which
|
|
12
|
-
* only works for scalars.
|
|
13
|
-
*
|
|
14
|
-
* Note that this strategy is weak against mutable state updates:
|
|
15
|
-
* store.update(v => { v.someprop = 'newvalue'; return v })
|
|
16
|
-
*
|
|
17
|
-
* This line would NOT notify subscribers because the state will be compared against
|
|
18
|
-
* itself and always found to be equal. If you are making updates in a mutable fashion,
|
|
19
|
-
* use a SafeStore instead.
|
|
20
|
-
*/
|
|
21
|
-
class Store extends activestore_1.ActiveStore {
|
|
22
|
-
equal(a, b) {
|
|
23
|
-
return (0, fast_deep_equal_1.default)(a, b);
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
exports.Store = Store;
|
|
27
|
-
//# sourceMappingURL=store.js.map
|
package/dist/lib/store.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"store.js","sourceRoot":"","sources":["../../src/lib/store.ts"],"names":[],"mappings":";;;;;;AAAA,sEAAuC;AACvC,+CAA2C;AAE3C;;;;;;;;;;;GAWG;AACH,MAAa,KAAS,SAAQ,yBAAc;IAC1C,KAAK,CAAE,CAAI,EAAE,CAAI;QACf,OAAO,IAAA,yBAAS,EAAC,CAAC,EAAE,CAAC,CAAC,CAAA;IACxB,CAAC;CACF;AAJD,sBAIC"}
|
package/dist/lib/substore.js
DELETED
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.subStore = exports.SubStore = void 0;
|
|
4
|
-
const txstate_utils_1 = require("txstate-utils");
|
|
5
|
-
const store_1 = require("./store");
|
|
6
|
-
/**
|
|
7
|
-
* Create a store that represents a part of a larger store. Updates to the parent store will propagate
|
|
8
|
-
* down to the SubStore as appropriate, and updates to the SubStore will propagate
|
|
9
|
-
* back up to the parent store. This requires both a getter and setter function to handle each
|
|
10
|
-
* direction. The setter is given the new SubStore state and the existing parent store state and
|
|
11
|
-
* should return a new state for the parent store.
|
|
12
|
-
*
|
|
13
|
-
* Alternatively, a dot-prop string can be provided and both the getter and setter will be automatically
|
|
14
|
-
* generated. For example, a parent store containing state { deep: { value: 'here' }, hello: 'world' }
|
|
15
|
-
* could be used with the getter string "deep.value". The SubStore's initial state would be "here", and
|
|
16
|
-
* updating it to "there" would update the parent store state to { deep: { value: 'there' }, hello: 'world' }
|
|
17
|
-
*/
|
|
18
|
-
class SubStore extends store_1.Store {
|
|
19
|
-
constructor(store, getter, setter) {
|
|
20
|
-
super({});
|
|
21
|
-
if (typeof getter === 'string') {
|
|
22
|
-
const accessor = getter;
|
|
23
|
-
getter = parentValue => (0, txstate_utils_1.get)(parentValue, accessor);
|
|
24
|
-
setter = (newValue, parentValue) => (0, txstate_utils_1.set)(parentValue, accessor, newValue);
|
|
25
|
-
}
|
|
26
|
-
this.parentStore = store;
|
|
27
|
-
this.setter = setter;
|
|
28
|
-
this.registerSource(() => store.subscribe(v => {
|
|
29
|
-
super.set(getter(v));
|
|
30
|
-
}));
|
|
31
|
-
}
|
|
32
|
-
set(value) {
|
|
33
|
-
this.parentStore.update(parentValue => this.setter(value, parentValue));
|
|
34
|
-
}
|
|
35
|
-
clone(state) {
|
|
36
|
-
var _a, _b, _c;
|
|
37
|
-
// parent store could be a SafeStore - if so we should use its clone function
|
|
38
|
-
// so that the substore is also safe against mutations
|
|
39
|
-
return (_c = (_b = (_a = this.parentStore) === null || _a === void 0 ? void 0 : _a.clone) === null || _b === void 0 ? void 0 : _b.call(_a, state)) !== null && _c !== void 0 ? _c : state;
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
exports.SubStore = SubStore;
|
|
43
|
-
function subStore(store, getter, setter) {
|
|
44
|
-
return new SubStore(store, getter, setter);
|
|
45
|
-
}
|
|
46
|
-
exports.subStore = subStore;
|
|
47
|
-
//# sourceMappingURL=substore.js.map
|
package/dist/lib/substore.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"substore.js","sourceRoot":"","sources":["../../src/lib/substore.ts"],"names":[],"mappings":";;;AAAA,iDAAwC;AACxC,mCAA+B;AAG/B;;;;;;;;;;;GAWG;AACH,MAAa,QAAoC,SAAQ,aAAc;IAIrE,YAAa,KAAkC,EAAE,MAAgE,EAAE,MAA0D;QAC3K,KAAK,CAAC,EAAS,CAAC,CAAA;QAChB,IAAI,OAAO,MAAM,KAAK,QAAQ,EAAE;YAC9B,MAAM,QAAQ,GAAG,MAAM,CAAA;YACvB,MAAM,GAAG,WAAW,CAAC,EAAE,CAAC,IAAA,mBAAG,EAAC,WAAW,EAAE,QAAQ,CAAC,CAAA;YAClD,MAAM,GAAG,CAAC,QAAQ,EAAE,WAAW,EAAE,EAAE,CAAC,IAAA,mBAAG,EAAC,WAAW,EAAE,QAAQ,EAAE,QAAQ,CAAC,CAAA;SACzE;QACD,IAAI,CAAC,WAAW,GAAG,KAAK,CAAA;QACxB,IAAI,CAAC,MAAM,GAAG,MAAO,CAAA;QACrB,IAAI,CAAC,cAAc,CAAC,GAAG,EAAE,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE;YAC5C,KAAK,CAAC,GAAG,CAAE,MAAc,CAAC,CAAC,CAAC,CAAC,CAAA;QAC/B,CAAC,CAAC,CAAC,CAAA;IACL,CAAC;IAED,GAAG,CAAE,KAAc;QACjB,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,WAAW,CAAC,EAAE,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC,CAAA;IACzE,CAAC;IAED,KAAK,CAAE,KAAc;;QACnB,6EAA6E;QAC7E,sDAAsD;QACtD,OAAO,MAAA,MAAA,MAAC,IAAI,CAAC,WAA0B,0CAAE,KAAK,mDAAG,KAAK,CAAC,mCAAI,KAAK,CAAA;IAClE,CAAC;CACF;AA3BD,4BA2BC;AAKD,SAAgB,QAAQ,CAAwB,KAAkC,EAAE,MAAgE,EAAE,MAA0D;IAC9M,OAAO,IAAI,QAAQ,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;AAC5C,CAAC;AAFD,4BAEC"}
|
package/dist/lib/util.js
DELETED
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.debounced = exports.classes = void 0;
|
|
4
|
-
function classes(...classNames) {
|
|
5
|
-
return classNames.filter(Boolean).join(' ');
|
|
6
|
-
}
|
|
7
|
-
exports.classes = classes;
|
|
8
|
-
function debounced(fn, timeout) {
|
|
9
|
-
let timer;
|
|
10
|
-
return (...args) => {
|
|
11
|
-
clearTimeout(timer);
|
|
12
|
-
timer = setTimeout(() => fn(...args), timeout);
|
|
13
|
-
};
|
|
14
|
-
}
|
|
15
|
-
exports.debounced = debounced;
|
|
16
|
-
//# sourceMappingURL=util.js.map
|
package/dist/lib/util.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"util.js","sourceRoot":"","sources":["../../src/lib/util.ts"],"names":[],"mappings":";;;AAAA,SAAgB,OAAO,CAAE,GAAG,UAAkC;IAC5D,OAAO,UAAU,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;AAC7C,CAAC;AAFD,0BAEC;AAED,SAAgB,SAAS,CAAE,EAAY,EAAE,OAAe;IACtD,IAAI,KAAqB,CAAA;IACzB,OAAO,CAAC,GAAG,IAAW,EAAE,EAAE;QACxB,YAAY,CAAC,KAAK,CAAC,CAAA;QACnB,KAAK,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,EAAE,OAAO,CAAC,CAAA;IAChD,CAAC,CAAA;AACH,CAAC;AAND,8BAMC"}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { WritableSubject, ElementOffsets } from '../lib';
|
|
2
|
-
interface OffsetConfig<T extends ElementOffsets = ElementOffsets> {
|
|
3
|
-
debounce?: boolean | number;
|
|
4
|
-
store?: WritableSubject<T>;
|
|
5
|
-
}
|
|
6
|
-
export declare function offset(el: HTMLElement, config?: OffsetConfig): {
|
|
7
|
-
update(newConfig?: OffsetConfig<Partial<{
|
|
8
|
-
right: number;
|
|
9
|
-
bottom: number;
|
|
10
|
-
top: number;
|
|
11
|
-
left: number;
|
|
12
|
-
}>> | undefined): void;
|
|
13
|
-
destroy: () => void;
|
|
14
|
-
};
|
|
15
|
-
export {};
|
|
@@ -1,147 +0,0 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
import { Store, classes } from '../lib'
|
|
3
|
-
import type { CollapsingTableColumn, PopupMenuItem } from '../types'
|
|
4
|
-
import { derived } from 'svelte/store'
|
|
5
|
-
import DefaultPopupMenu from './PopupMenu.svelte'
|
|
6
|
-
import ScreenReaderOnly from './ScreenReaderOnly.svelte'
|
|
7
|
-
|
|
8
|
-
export let tableClass = ''
|
|
9
|
-
export let bodyRowClass = ''
|
|
10
|
-
export let bodyCellClass = ''
|
|
11
|
-
export let headerRowClass = ''
|
|
12
|
-
export let headerCellClass = ''
|
|
13
|
-
export let menuContainerClass = ''
|
|
14
|
-
export let menuClass = ''
|
|
15
|
-
export let menuItemClass = ''
|
|
16
|
-
export let menuItemHilitedClass = ''
|
|
17
|
-
export let items: any[]
|
|
18
|
-
export let config: CollapsingTableColumn[]|undefined = undefined
|
|
19
|
-
export let defaultCellWidth = 150
|
|
20
|
-
export let PopupMenu = DefaultPopupMenu
|
|
21
|
-
export let slots: Record<string, boolean> = $$slots
|
|
22
|
-
export let stickyheader: boolean = false
|
|
23
|
-
let columns: CollapsingTableColumn[]
|
|
24
|
-
let width: number = 320
|
|
25
|
-
let selected: PopupMenuItem | undefined
|
|
26
|
-
let identifyingkeys: string[] = []
|
|
27
|
-
$: firstrow = items?.[0] ?? {}
|
|
28
|
-
$: columns = config ?? Object.keys(firstrow).map(key => ({ key }))
|
|
29
|
-
function reactToColumns (columns: CollapsingTableColumn[]) {
|
|
30
|
-
if (!columns.some(c => c.neverhide)) {
|
|
31
|
-
columns[0].neverhide = true
|
|
32
|
-
}
|
|
33
|
-
const sortedcolumns = columns // stable sort
|
|
34
|
-
.map((c, i) => ({ col: c, idx: i}))
|
|
35
|
-
.sort((a, b) => ((a.col.neverhide ? 0 : 1) - (b.col.neverhide ? 0 : 1)) || a.idx - b.idx)
|
|
36
|
-
.map(o => o.col)
|
|
37
|
-
if (!selected) {
|
|
38
|
-
const firstcol = sortedcolumns.find(c => !c.neverhide)
|
|
39
|
-
selected = firstcol ? { value: firstcol.key } : undefined
|
|
40
|
-
}
|
|
41
|
-
identifyingkeys = sortedcolumns.filter(c => c.neverhide).map(c => c.key)
|
|
42
|
-
return sortedcolumns
|
|
43
|
-
}
|
|
44
|
-
$: sortedcolumns = reactToColumns(columns)
|
|
45
|
-
|
|
46
|
-
$: itemkeys = items.map(item => item.id ?? item._id ?? identifyingkeys.map(k => item[k]).join('.'))
|
|
47
|
-
|
|
48
|
-
const state = new Store({
|
|
49
|
-
keepcolumns: [] as (CollapsingTableColumn & { widthPercent?: number })[],
|
|
50
|
-
hiddencolumns: [] as CollapsingTableColumn[],
|
|
51
|
-
dropdowncolumn: undefined as (CollapsingTableColumn & { widthPercent?: number }) | undefined
|
|
52
|
-
})
|
|
53
|
-
const menuitems = derived(state, obj => obj.hiddencolumns.map(c => ({ value: c.key, label: c.title })))
|
|
54
|
-
function react (..._: any[]) {
|
|
55
|
-
const selectedcol = sortedcolumns.find(c => c.key === selected?.value) ?? columns[1]
|
|
56
|
-
const keepcolumns: CollapsingTableColumn[] = []
|
|
57
|
-
const hiddencolumns: CollapsingTableColumn[] = []
|
|
58
|
-
let used = sortedcolumns.filter(c => c.neverhide || c === selectedcol).reduce((sum, col) => sum + (col.width ?? defaultCellWidth), 0)
|
|
59
|
-
for (const col of sortedcolumns) {
|
|
60
|
-
if (col.neverhide || col === selectedcol || used + (col.width ?? defaultCellWidth) < width) {
|
|
61
|
-
keepcolumns.push(col)
|
|
62
|
-
if (col !== selectedcol && !col.neverhide) used += col.width ?? defaultCellWidth
|
|
63
|
-
} else hiddencolumns.push(col)
|
|
64
|
-
}
|
|
65
|
-
for (const col of keepcolumns) {
|
|
66
|
-
(col as any).widthPercent = 100 * (col.width ?? defaultCellWidth) / used
|
|
67
|
-
}
|
|
68
|
-
const dropdowncolumn = hiddencolumns.length ? keepcolumns[keepcolumns.length - 1] : undefined
|
|
69
|
-
state.set({ keepcolumns, hiddencolumns, dropdowncolumn })
|
|
70
|
-
}
|
|
71
|
-
$: react(width, selected)
|
|
72
|
-
let headers: HTMLElement[] = []
|
|
73
|
-
$: menubuttonelement = headers[$state.keepcolumns.length - 1]
|
|
74
|
-
</script>
|
|
75
|
-
|
|
76
|
-
<div bind:clientWidth={width}>
|
|
77
|
-
<table class={tableClass}>
|
|
78
|
-
<thead class:stickyheader><tr class={headerRowClass}>
|
|
79
|
-
{#each $state.keepcolumns as column, i (column.key)}
|
|
80
|
-
<th
|
|
81
|
-
class={classes(column.headerCellClass, headerCellClass)}
|
|
82
|
-
class:defaultIcon={!slots.dropicon && $state.dropdowncolumn === column}
|
|
83
|
-
bind:this={headers[i]}
|
|
84
|
-
role={$state.dropdowncolumn === column ? 'button' : undefined }
|
|
85
|
-
tabindex={$state.dropdowncolumn === column ? 0 : undefined }
|
|
86
|
-
>
|
|
87
|
-
<slot name="headercell" {column} key={column.key} title={column.title || column.key} item={undefined} value={undefined}>
|
|
88
|
-
{column.title || column.key}
|
|
89
|
-
</slot>
|
|
90
|
-
{#if $state.dropdowncolumn === column}
|
|
91
|
-
<ScreenReaderOnly>, click to choose another column to show</ScreenReaderOnly>
|
|
92
|
-
<slot name="dropicon" {column} item={undefined} value={undefined}>
|
|
93
|
-
<i aria-hidden="true"></i>
|
|
94
|
-
</slot>
|
|
95
|
-
{/if}
|
|
96
|
-
</th>
|
|
97
|
-
{/each}
|
|
98
|
-
</tr></thead>
|
|
99
|
-
<tbody>
|
|
100
|
-
{#each items as item, i (itemkeys[i])}
|
|
101
|
-
<tr class={bodyRowClass}>
|
|
102
|
-
{#each $state.keepcolumns as column (column.key)}
|
|
103
|
-
<td class={classes(column.bodyCellClass, bodyCellClass)}>
|
|
104
|
-
<slot key={column.key} value={item[column.key]} {item}>
|
|
105
|
-
{item[column.key]}
|
|
106
|
-
</slot>
|
|
107
|
-
</td>
|
|
108
|
-
{/each}
|
|
109
|
-
</tr>
|
|
110
|
-
{/each}
|
|
111
|
-
</tbody>
|
|
112
|
-
{#if slots.footer}<tfoot><slot name="footer" item={undefined} key={undefined} value={undefined}></slot></tfoot>{/if}
|
|
113
|
-
</table>
|
|
114
|
-
</div>
|
|
115
|
-
{#if $menuitems.length > 0}
|
|
116
|
-
<svelte:component this={PopupMenu} {menuContainerClass} {menuClass} {menuItemClass} {menuItemHilitedClass} items={$menuitems} buttonelement={menubuttonelement} on:change={e => selected = e.detail}></svelte:component>
|
|
117
|
-
{/if}
|
|
118
|
-
|
|
119
|
-
<style>
|
|
120
|
-
table { width: 100%; }
|
|
121
|
-
th {
|
|
122
|
-
position: relative;
|
|
123
|
-
box-sizing: border-box;
|
|
124
|
-
}
|
|
125
|
-
th[role="button"] {
|
|
126
|
-
cursor: pointer !important;
|
|
127
|
-
}
|
|
128
|
-
th.defaultIcon :global([role="button"]) {
|
|
129
|
-
padding-right: 1.3em;
|
|
130
|
-
}
|
|
131
|
-
th.defaultIcon :global(i) {
|
|
132
|
-
transform: translateY(-50%) rotate(45deg);
|
|
133
|
-
border: solid black;
|
|
134
|
-
border-width: 0 .2em .2em 0;
|
|
135
|
-
padding: .15em;
|
|
136
|
-
}
|
|
137
|
-
th :global(i) {
|
|
138
|
-
position: absolute;
|
|
139
|
-
right: 0.4em;
|
|
140
|
-
top: calc(50% - 0.08em);
|
|
141
|
-
}
|
|
142
|
-
.stickyheader th {
|
|
143
|
-
position: sticky;
|
|
144
|
-
top: 0;
|
|
145
|
-
z-index: 1;
|
|
146
|
-
}
|
|
147
|
-
</style>
|
|
@@ -1,101 +0,0 @@
|
|
|
1
|
-
<script context="module" lang="ts">
|
|
2
|
-
const FocusLockStack: { pause: () => void, unpause: () => void }[] = []
|
|
3
|
-
</script>
|
|
4
|
-
|
|
5
|
-
<script lang="ts">
|
|
6
|
-
export let returnfocusto: HTMLElement|null|undefined = undefined
|
|
7
|
-
export let initialfocus: string|undefined = undefined
|
|
8
|
-
export let hidefocus = true
|
|
9
|
-
export let hidefocuslabel = "focus is above modal dialog, start tabbing"
|
|
10
|
-
export let escapable = true
|
|
11
|
-
let className = ''
|
|
12
|
-
export { className as class }
|
|
13
|
-
|
|
14
|
-
import { onMount, onDestroy, createEventDispatcher, tick } from 'svelte'
|
|
15
|
-
import { tabbable } from 'tabbable'
|
|
16
|
-
import { sleep } from 'txstate-utils'
|
|
17
|
-
import { buttonify } from '../actions'
|
|
18
|
-
import ScreenReaderOnly from './ScreenReaderOnly.svelte'
|
|
19
|
-
const dispatch = createEventDispatcher()
|
|
20
|
-
let lockelement: HTMLElement
|
|
21
|
-
let abovelockelement: HTMLElement
|
|
22
|
-
let active = true
|
|
23
|
-
let listenforescape = false
|
|
24
|
-
if (initialfocus) hidefocus = false
|
|
25
|
-
onMount(async () => {
|
|
26
|
-
const prevFocusLock = FocusLockStack.slice(-1)[0]
|
|
27
|
-
if (prevFocusLock) prevFocusLock.pause()
|
|
28
|
-
FocusLockStack.push({
|
|
29
|
-
pause: () => { active = false },
|
|
30
|
-
unpause: () => { active = true }
|
|
31
|
-
})
|
|
32
|
-
if (typeof returnfocusto === 'undefined') {
|
|
33
|
-
returnfocusto = document.querySelector(':focus') as HTMLElement
|
|
34
|
-
}
|
|
35
|
-
await sleep(1) // sapper resets focus on page load, so we'll wait a millisecond in case our modal is on screen at load
|
|
36
|
-
if (initialfocus) {
|
|
37
|
-
const focusEl = lockelement.querySelector(initialfocus)
|
|
38
|
-
if (focusEl instanceof HTMLElement) focusEl.focus()
|
|
39
|
-
} else {
|
|
40
|
-
setInitialFocus()
|
|
41
|
-
}
|
|
42
|
-
setTimeout(() => listenforescape = true, 0)
|
|
43
|
-
})
|
|
44
|
-
onDestroy(async () => {
|
|
45
|
-
const wasactive = active
|
|
46
|
-
active = false
|
|
47
|
-
await tick()
|
|
48
|
-
if (returnfocusto && wasactive) {
|
|
49
|
-
returnfocusto.focus()
|
|
50
|
-
}
|
|
51
|
-
FocusLockStack.pop()
|
|
52
|
-
const prevFocusLock = FocusLockStack.slice(-1)[0]
|
|
53
|
-
if (prevFocusLock) prevFocusLock.unpause()
|
|
54
|
-
})
|
|
55
|
-
const setInitialFocus = () => {
|
|
56
|
-
const firstfocus = tabbable(lockelement)[0]
|
|
57
|
-
if (firstfocus && firstfocus.focus) {
|
|
58
|
-
firstfocus.focus()
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
const setLastFocus = () => {
|
|
62
|
-
const lastfocus = tabbable(lockelement).slice(-1)[0]
|
|
63
|
-
if (lastfocus && lastfocus.focus) {
|
|
64
|
-
lastfocus.focus()
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
const keydown = (e: KeyboardEvent) => {
|
|
68
|
-
if (active && e.key === "Escape" && escapable) {
|
|
69
|
-
e.preventDefault()
|
|
70
|
-
dispatch('escape')
|
|
71
|
-
}
|
|
72
|
-
}
|
|
73
|
-
const focusin = (e: FocusEvent) => {
|
|
74
|
-
if (active && e.target instanceof HTMLElement && !lockelement?.contains(e.target)) {
|
|
75
|
-
if (e.target === abovelockelement) setLastFocus()
|
|
76
|
-
else setInitialFocus()
|
|
77
|
-
}
|
|
78
|
-
}
|
|
79
|
-
const windowclick = (_: MouseEvent) => {
|
|
80
|
-
if (listenforescape && active) {
|
|
81
|
-
returnfocusto = undefined
|
|
82
|
-
dispatch('escape')
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
</script>
|
|
86
|
-
<svelte:window on:click={windowclick} />
|
|
87
|
-
<div class={className} role="alertdialog" aria-modal="true" on:click|stopPropagation on:keydown|stopPropagation={keydown} on:focusin={focusin}>
|
|
88
|
-
<div bind:this={abovelockelement} tabindex="0"></div>
|
|
89
|
-
<div bind:this={lockelement} on:keydown={keydown}>
|
|
90
|
-
{#if hidefocus}<div class="hiddenfocus" use:buttonify on:blur={() =>{ hidefocus = false }} on:click={() => escapable && dispatch('escape')}><ScreenReaderOnly>{hidefocuslabel}{#if escapable}, click to escape or use escape key at any time{/if}</ScreenReaderOnly></div>{/if}
|
|
91
|
-
<slot></slot>
|
|
92
|
-
</div>
|
|
93
|
-
<div tabindex="0"></div>
|
|
94
|
-
</div>
|
|
95
|
-
|
|
96
|
-
<style>
|
|
97
|
-
.hiddenfocus {
|
|
98
|
-
opacity: 0;
|
|
99
|
-
outline: 0;
|
|
100
|
-
}
|
|
101
|
-
</style>
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
export let escapable = true
|
|
3
|
-
export let hidefocus = true
|
|
4
|
-
export let hidefocuslabel: string|undefined = undefined
|
|
5
|
-
export let returnfocusto: HTMLElement|undefined = undefined
|
|
6
|
-
export let initialfocus: string|undefined = undefined
|
|
7
|
-
export let containerClass = ''
|
|
8
|
-
export let opaque = false
|
|
9
|
-
import FocusLock from './FocusLock.svelte'
|
|
10
|
-
import { createEventDispatcher, onMount } from 'svelte'
|
|
11
|
-
import { portal } from '../actions';
|
|
12
|
-
|
|
13
|
-
const dispatch = createEventDispatcher()
|
|
14
|
-
const endmodal = () => {
|
|
15
|
-
dispatch('escape')
|
|
16
|
-
}
|
|
17
|
-
onMount(() => {
|
|
18
|
-
document.body.style.marginRight = (window.innerWidth - document.body.clientWidth) + 'px'
|
|
19
|
-
document.body.style.overflow = 'hidden'
|
|
20
|
-
return () => {
|
|
21
|
-
document.body.style.overflow = ''
|
|
22
|
-
document.body.style.marginRight = ''
|
|
23
|
-
}
|
|
24
|
-
})
|
|
25
|
-
</script>
|
|
26
|
-
|
|
27
|
-
<div use:portal class="modal-backdrop" class:opaque on:click|stopPropagation|preventDefault={() => escapable && endmodal()}>
|
|
28
|
-
<FocusLock class="modal-container {containerClass}" {escapable} on:escape {hidefocus} {hidefocuslabel} {returnfocusto} {initialfocus}>
|
|
29
|
-
<slot></slot>
|
|
30
|
-
</FocusLock>
|
|
31
|
-
</div>
|
|
32
|
-
|
|
33
|
-
<style>
|
|
34
|
-
.modal-backdrop {
|
|
35
|
-
position: fixed;
|
|
36
|
-
top: 0;
|
|
37
|
-
left: 0;
|
|
38
|
-
width: 100vw;
|
|
39
|
-
height: 100vh;
|
|
40
|
-
background-color: var(--modal-bg, rgba(0, 0, 0, 0.7));
|
|
41
|
-
z-index: 100;
|
|
42
|
-
display: flex;
|
|
43
|
-
justify-content: center;
|
|
44
|
-
align-items: center
|
|
45
|
-
}
|
|
46
|
-
.modal-backdrop.opaque {
|
|
47
|
-
background-color: var(--modal-bg-opaque, #4c4c4c);
|
|
48
|
-
}
|
|
49
|
-
.modal-backdrop :global(.modal-container) {
|
|
50
|
-
max-width: 100vw;
|
|
51
|
-
max-height: 100vh;
|
|
52
|
-
overflow: auto;
|
|
53
|
-
}
|
|
54
|
-
</style>
|