@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.
Files changed (139) hide show
  1. package/README.md +33 -14
  2. package/{dist/ts/actions → actions}/buttonify.d.ts +0 -0
  3. package/{dist/actions → actions}/buttonify.js +1 -6
  4. package/{dist/ts/actions → actions}/glue.d.ts +1 -1
  5. package/{dist/actions → actions}/glue.js +8 -13
  6. package/actions/index.d.ts +7 -0
  7. package/actions/index.js +7 -0
  8. package/actions/offset.d.ts +15 -0
  9. package/actions/offset.js +35 -0
  10. package/{dist/ts/actions → actions}/portal.d.ts +0 -0
  11. package/actions/portal.js +13 -0
  12. package/{dist/ts/actions → actions}/resize.d.ts +6 -2
  13. package/actions/resize.js +57 -0
  14. package/{dist/ts/actions → actions}/sticky.d.ts +2 -2
  15. package/{dist/actions → actions}/sticky.js +11 -19
  16. package/{dist/ts/actions → actions}/stickyfixed.d.ts +2 -2
  17. package/{dist/actions → actions}/stickyfixed.js +15 -24
  18. package/components/Card.svelte +23 -0
  19. package/components/Card.svelte.d.ts +18 -0
  20. package/components/CardLayout.svelte +197 -0
  21. package/components/CardLayout.svelte.d.ts +21 -0
  22. package/{dist/components → components}/CollapsingTable.svelte +12 -13
  23. package/components/CollapsingTable.svelte.d.ts +59 -0
  24. package/{dist/ts/components → components}/ConditionalWrapper.svelte +6 -7
  25. package/components/ConditionalWrapper.svelte.d.ts +23 -0
  26. package/{dist/components → components}/FocusLock.svelte +11 -9
  27. package/components/FocusLock.svelte.d.ts +26 -0
  28. package/{dist/components → components}/Modal.svelte +5 -4
  29. package/components/Modal.svelte.d.ts +27 -0
  30. package/components/MultiSelect.svelte +179 -0
  31. package/components/MultiSelect.svelte.d.ts +35 -0
  32. package/{dist/components → components}/PopupMenu.svelte +29 -24
  33. package/components/PopupMenu.svelte.d.ts +45 -0
  34. package/{dist/components → components}/ScreenReaderOnly.svelte +1 -1
  35. package/components/ScreenReaderOnly.svelte.d.ts +20 -0
  36. package/{dist/ts/components → components}/index.d.ts +3 -0
  37. package/components/index.js +9 -0
  38. package/index.d.ts +4 -0
  39. package/index.js +4 -0
  40. package/package.json +47 -77
  41. package/types/CardLayout.d.ts +14 -0
  42. package/types/CardLayout.js +1 -0
  43. package/{dist/ts/types → types}/CollapsingTable.d.ts +0 -0
  44. package/{dist/ts/tests/Actions/Actions.stories.d.ts → types/CollapsingTable.js} +0 -0
  45. package/{dist/ts/types → types}/PopupMenu.d.ts +0 -0
  46. package/{dist/ts/tests/CollapsingTable/CollapsingTable.stories.d.ts → types/PopupMenu.js} +0 -0
  47. package/types/index.d.ts +3 -0
  48. package/types/index.js +3 -0
  49. package/{dist/ts/lib → util}/bodyoffset.d.ts +2 -1
  50. package/{dist/lib → util}/bodyoffset.js +10 -14
  51. package/util/index.d.ts +3 -0
  52. package/util/index.js +3 -0
  53. package/{dist/ts/lib → util}/repositioned.d.ts +1 -2
  54. package/{dist/lib → util}/repositioned.js +13 -24
  55. package/util/util.d.ts +5 -0
  56. package/util/util.js +33 -0
  57. package/LICENSE +0 -21
  58. package/dist/actions/buttonify.js.map +0 -1
  59. package/dist/actions/glue.js.map +0 -1
  60. package/dist/actions/index.js +0 -20
  61. package/dist/actions/index.js.map +0 -1
  62. package/dist/actions/offset.js +0 -35
  63. package/dist/actions/offset.js.map +0 -1
  64. package/dist/actions/portal.js +0 -19
  65. package/dist/actions/portal.js.map +0 -1
  66. package/dist/actions/resize.js +0 -48
  67. package/dist/actions/resize.js.map +0 -1
  68. package/dist/actions/sticky.js.map +0 -1
  69. package/dist/actions/stickyfixed.js.map +0 -1
  70. package/dist/components/ConditionalWrapper.svelte +0 -38
  71. package/dist/components/index.js +0 -19
  72. package/dist/components/index.js.map +0 -1
  73. package/dist/index.js +0 -17
  74. package/dist/index.js.map +0 -1
  75. package/dist/lib/activestore.js +0 -123
  76. package/dist/lib/activestore.js.map +0 -1
  77. package/dist/lib/bodyoffset.js.map +0 -1
  78. package/dist/lib/convertedstore.js +0 -41
  79. package/dist/lib/convertedstore.js.map +0 -1
  80. package/dist/lib/derivedstore.js +0 -65
  81. package/dist/lib/derivedstore.js.map +0 -1
  82. package/dist/lib/index.js +0 -22
  83. package/dist/lib/index.js.map +0 -1
  84. package/dist/lib/repositioned.js.map +0 -1
  85. package/dist/lib/safestore.js +0 -16
  86. package/dist/lib/safestore.js.map +0 -1
  87. package/dist/lib/store.js +0 -27
  88. package/dist/lib/store.js.map +0 -1
  89. package/dist/lib/substore.js +0 -47
  90. package/dist/lib/substore.js.map +0 -1
  91. package/dist/lib/util.js +0 -16
  92. package/dist/lib/util.js.map +0 -1
  93. package/dist/ts/actions/index.d.ts +0 -7
  94. package/dist/ts/actions/offset.d.ts +0 -15
  95. package/dist/ts/components/CollapsingTable.svelte +0 -147
  96. package/dist/ts/components/FocusLock.svelte +0 -101
  97. package/dist/ts/components/Modal.svelte +0 -54
  98. package/dist/ts/components/PopupMenu.svelte +0 -279
  99. package/dist/ts/components/ScreenReaderOnly.svelte +0 -26
  100. package/dist/ts/index.d.ts +0 -4
  101. package/dist/ts/lib/activestore.d.ts +0 -60
  102. package/dist/ts/lib/convertedstore.d.ts +0 -16
  103. package/dist/ts/lib/derivedstore.d.ts +0 -23
  104. package/dist/ts/lib/index.d.ts +0 -9
  105. package/dist/ts/lib/safestore.d.ts +0 -4
  106. package/dist/ts/lib/store.d.ts +0 -16
  107. package/dist/ts/lib/substore.d.ts +0 -24
  108. package/dist/ts/lib/util.d.ts +0 -2
  109. package/dist/ts/tests/Actions/Offset.svelte +0 -34
  110. package/dist/ts/tests/Actions/Resize.svelte +0 -31
  111. package/dist/ts/tests/Actions/Sticky.svelte +0 -65
  112. package/dist/ts/tests/CollapsingTable/CollapsingTable.test.d.ts +0 -1
  113. package/dist/ts/tests/CollapsingTable/CollapsingTableTest.svelte +0 -36
  114. package/dist/ts/tests/Modal/Modal.stories.d.ts +0 -1
  115. package/dist/ts/tests/Modal/Modal.test.d.ts +0 -1
  116. package/dist/ts/tests/Modal/ModalTest.svelte +0 -58
  117. package/dist/ts/tests/PopupMenu/PopupMenu.stories.d.ts +0 -1
  118. package/dist/ts/tests/PopupMenu/PopupMenu.test.d.ts +0 -1
  119. package/dist/ts/tests/PopupMenu/PopupMenuBody.svelte +0 -34
  120. package/dist/ts/tests/PopupMenu/PopupMenuButtonIsParent.svelte +0 -36
  121. package/dist/ts/tests/PopupMenu/PopupMenuComplex.svelte +0 -34
  122. package/dist/ts/tests/PopupMenu/PopupMenuSimple.svelte +0 -36
  123. package/dist/ts/tests/stores/deepstore.test.d.ts +0 -1
  124. package/dist/ts/types/index.d.ts +0 -2
  125. package/dist/types/CollapsingTable.js +0 -3
  126. package/dist/types/CollapsingTable.js.map +0 -1
  127. package/dist/types/PopupMenu.js +0 -3
  128. package/dist/types/PopupMenu.js.map +0 -1
  129. package/dist/types/index.js +0 -15
  130. package/dist/types/index.js.map +0 -1
  131. package/docs/CollapsingTable.md +0 -79
  132. package/docs/ConditionalWrapper.md +0 -35
  133. package/docs/Modal.md +0 -63
  134. package/docs/PopupMenu.md +0 -31
  135. package/docs/ScreenReaderOnly.md +0 -10
  136. package/docs/actions.md +0 -84
  137. package/docs/stores.md +0 -203
  138. package/esm/index.js +0 -1
  139. 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"}
@@ -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
@@ -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":"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"}
@@ -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
@@ -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"}
@@ -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
@@ -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
@@ -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,7 +0,0 @@
1
- export * from './buttonify';
2
- export * from './glue';
3
- export * from './offset';
4
- export * from './portal';
5
- export * from './resize';
6
- export * from './sticky';
7
- export * from './stickyfixed';
@@ -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>