@swiftwc/ui 0.0.0-dev.6 → 0.0.0-dev.8
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 +15 -0
- package/generated/client/index.d.ts +13 -3
- package/generated/client/index.js +228 -158
- package/generated/components/bordered-button.d.ts +7 -0
- package/generated/components/bordered-button.js +20 -0
- package/generated/components/bordered-prominent-button.d.ts +7 -0
- package/generated/components/bordered-prominent-button.js +20 -0
- package/generated/components/borderless-button.d.ts +4 -4
- package/generated/components/borderless-button.js +26 -16
- package/generated/components/confirmation-dialog.d.ts +9 -0
- package/generated/components/confirmation-dialog.js +102 -0
- package/generated/components/date-picker.d.ts +46 -0
- package/generated/components/date-picker.js +430 -0
- package/generated/components/disclosure-group.d.ts +4 -7
- package/generated/components/disclosure-group.js +41 -66
- package/generated/components/form-view.d.ts +6 -0
- package/generated/components/form-view.js +58 -0
- package/generated/components/glass-button.d.ts +6 -0
- package/generated/components/glass-button.js +17 -0
- package/generated/components/glass-prominent-button.d.ts +6 -0
- package/generated/components/glass-prominent-button.js +17 -0
- package/generated/components/index.d.ts +34 -10
- package/generated/components/index.js +33 -14
- package/generated/components/label-view.d.ts +9 -0
- package/generated/components/label-view.js +83 -0
- package/generated/components/list-view.d.ts +5 -0
- package/generated/components/list-view.js +29 -0
- package/generated/components/menu-view.d.ts +9 -0
- package/generated/components/menu-view.js +133 -0
- package/generated/components/navigation-large-title.d.ts +6 -0
- package/generated/components/navigation-large-title.js +177 -0
- package/generated/components/navigation-split-view.d.ts +4 -2
- package/generated/components/navigation-split-view.js +11 -2
- package/generated/components/navigation-stack.d.ts +3 -2
- package/generated/components/navigation-stack.js +15 -58
- package/generated/components/navigation-title.d.ts +8 -0
- package/generated/components/navigation-title.js +66 -0
- package/generated/components/picker-view.d.ts +27 -0
- package/generated/components/picker-view.js +442 -0
- package/generated/components/plain-button.d.ts +7 -0
- package/generated/components/plain-button.js +20 -0
- package/generated/components/screen-view.d.ts +1 -1
- package/generated/components/screen-view.js +1 -1
- package/generated/components/scroll-view.d.ts +4 -2
- package/generated/components/scroll-view.js +169 -62
- package/generated/components/section-view.d.ts +9 -0
- package/generated/components/section-view.js +81 -0
- package/generated/components/sheet-view.d.ts +4 -4
- package/generated/components/sheet-view.js +59 -16
- package/generated/components/sidebar-toggle.d.ts +1 -1
- package/generated/components/sidebar-toggle.js +89 -63
- package/generated/components/sidebar-view.d.ts +2 -4
- package/generated/components/sidebar-view.js +20 -17
- package/generated/components/sticky-container.d.ts +6 -0
- package/generated/components/sticky-container.js +22 -0
- package/generated/components/tab-bar.d.ts +2 -4
- package/generated/components/tab-bar.js +24 -17
- package/generated/components/tab-item.d.ts +4 -3
- package/generated/components/tab-item.js +114 -29
- package/generated/components/tab-view.d.ts +17 -2
- package/generated/components/tab-view.js +244 -17
- package/generated/components/table-view.d.ts +7 -0
- package/generated/components/table-view.js +175 -0
- package/generated/components/text-field.d.ts +29 -0
- package/generated/components/text-field.js +489 -0
- package/generated/components/tool-bar-item-group.d.ts +5 -0
- package/generated/components/tool-bar-item-group.js +11 -0
- package/generated/components/tool-bar-item.d.ts +5 -0
- package/generated/components/tool-bar-item.js +19 -0
- package/generated/components/tool-bar.d.ts +7 -0
- package/generated/components/tool-bar.js +77 -0
- package/generated/components/v-keyboard.d.ts +2 -0
- package/generated/components/v-keyboard.js +64 -68
- package/generated/components/v-stack.d.ts +5 -0
- package/generated/components/v-stack.js +11 -0
- package/generated/confirmation-dialog/index.d.ts +1 -0
- package/generated/confirmation-dialog/index.js +1 -0
- package/generated/css/index.css +7463 -0
- package/generated/events/confirmation-dialog.d.ts +9 -0
- package/generated/events/date-picker.d.ts +8 -0
- package/generated/events/date-picker.js +1 -0
- package/generated/events/index.d.ts +7 -0
- package/generated/events/index.js +7 -0
- package/generated/events/lifecycle-observer.d.ts +10 -0
- package/generated/events/lifecycle-observer.js +1 -0
- package/generated/events/picker-view.d.ts +8 -0
- package/generated/events/picker-view.js +1 -0
- package/generated/events/scroll-view.d.ts +10 -0
- package/generated/events/scroll-view.js +1 -0
- package/generated/events/tab-view.d.ts +24 -0
- package/generated/events/tab-view.js +1 -0
- package/generated/events/text-field.d.ts +8 -0
- package/generated/events/text-field.js +1 -0
- package/generated/i18n/index.d.ts +24 -0
- package/generated/i18n/index.js +139 -0
- package/generated/internal/class/cleanup-registry.d.ts +5 -0
- package/generated/internal/class/cleanup-registry.js +38 -0
- package/generated/internal/class/css-style-observer.d.ts +8 -0
- package/generated/internal/class/css-style-observer.js +25 -0
- package/generated/internal/class/form-associated-base.d.ts +20 -0
- package/generated/internal/class/form-associated-base.js +93 -0
- package/generated/internal/class/mutation-observer-singleton.d.ts +10 -0
- package/generated/internal/class/mutation-observer-singleton.js +46 -0
- package/generated/internal/class/navigation-path.d.ts +15 -0
- package/generated/internal/class/navigation-path.js +84 -0
- package/generated/internal/class/navigation-view.d.ts +8 -0
- package/generated/internal/class/navigation-view.js +77 -0
- package/generated/internal/class/resize-observer-singleton.d.ts +7 -0
- package/generated/internal/class/resize-observer-singleton.js +22 -0
- package/generated/internal/decorators/custom-element.d.ts +5 -0
- package/generated/internal/decorators/custom-element.js +4 -0
- package/generated/internal/privateNamespace.d.ts +4 -0
- package/generated/internal/privateNamespace.js +1 -0
- package/generated/internal/utils/add.d.ts +1 -0
- package/generated/internal/utils/add.js +7 -0
- package/generated/internal/utils/cash/ancestors.d.ts +1 -0
- package/generated/internal/utils/cash/ancestors.js +27 -0
- package/generated/internal/utils/cash/index.d.ts +22 -0
- package/generated/internal/utils/cash/index.js +23 -0
- package/generated/internal/utils/cash/next-all.d.ts +1 -0
- package/generated/internal/utils/cash/next-all.js +10 -0
- package/generated/internal/utils/cash/next.d.ts +1 -0
- package/generated/internal/utils/cash/next.js +9 -0
- package/generated/internal/utils/cash/prev-all.d.ts +1 -0
- package/generated/internal/utils/cash/prev-all.js +10 -0
- package/generated/internal/utils/cash/prev.d.ts +1 -0
- package/generated/internal/utils/cash/prev.js +9 -0
- package/generated/internal/utils/cash/prop.d.ts +18 -0
- package/generated/internal/utils/cash/prop.js +30 -0
- package/generated/internal/utils/cash/siblings.d.ts +1 -0
- package/generated/internal/utils/cash/siblings.js +10 -0
- package/generated/internal/utils/clamp.d.ts +1 -0
- package/generated/internal/utils/clamp.js +4 -0
- package/generated/internal/utils/compare-big-decimals.d.ts +1 -0
- package/generated/internal/utils/compare-big-decimals.js +90 -0
- package/generated/internal/utils/debounce.d.ts +1 -0
- package/generated/internal/utils/debounce.js +13 -0
- package/generated/internal/utils/frame.d.ts +1 -0
- package/generated/internal/utils/frame.js +6 -0
- package/generated/internal/utils/index.d.ts +16 -1
- package/generated/internal/utils/index.js +17 -1
- package/generated/internal/utils/kebab-case.d.ts +1 -1
- package/generated/internal/utils/list-active.d.ts +7 -0
- package/generated/internal/utils/list-active.js +28 -0
- package/generated/internal/utils/microtask.d.ts +1 -0
- package/generated/internal/utils/microtask.js +3 -0
- package/generated/internal/utils/onoff.d.ts +45 -0
- package/generated/internal/utils/onoff.js +31 -0
- package/generated/internal/utils/set.d.ts +1 -0
- package/generated/internal/utils/set.js +7 -0
- package/generated/internal/utils/sleep.d.ts +1 -0
- package/generated/internal/utils/sleep.js +3 -0
- package/generated/internal/utils/slow-hide-show.d.ts +1 -0
- package/generated/internal/utils/slow-hide-show.js +16 -0
- package/generated/internal/utils/timeout.d.ts +5 -0
- package/generated/internal/utils/timeout.js +16 -0
- package/generated/internal/utils/touch-glass.d.ts +7 -0
- package/generated/internal/utils/touch-glass.js +19 -0
- package/generated/lifecycle-observer/index.d.ts +1 -0
- package/generated/lifecycle-observer/index.js +1 -0
- package/generated/namespace-browser/base.d.ts +36 -0
- package/generated/namespace-browser/base.js +92 -0
- package/generated/namespace-browser/index.d.ts +7 -0
- package/generated/namespace-browser/index.js +1 -0
- package/generated/snapshot/index.d.ts +2 -11
- package/generated/snapshot/index.js +31 -144
- package/package.json +19 -8
- package/scss/_components.scss +52 -16
- package/scss/_final.scss +1 -0
- package/scss/_mixins.scss +2 -171
- package/scss/_placeholders.scss +3 -0
- package/scss/_transitions.scss +16 -0
- package/scss/_utils.scss +9 -0
- package/scss/_vars.scss +137 -23
- package/scss/base/_layout.scss +31 -15
- package/scss/base/_reboot.scss +118 -15
- package/scss/base/_root.scss +355 -25
- package/scss/colors/_index.scss +624 -70
- package/scss/components/_body-view.scss +12 -3
- package/scss/components/_bordered-button.scss +22 -0
- package/scss/components/_bordered-prominent-button.scss +19 -0
- package/scss/components/_borderless-button.scss +11 -6
- package/scss/components/_confirmation-dialog.scss +110 -0
- package/scss/components/_date-picker.scss +30 -0
- package/scss/components/_detail-placeholder.scss +155 -0
- package/scss/components/_disclosure-group.scss +100 -52
- package/scss/components/_form-view.scss +195 -0
- package/scss/components/_full-screen.scss +7 -5
- package/scss/components/_glass-button.scss +24 -0
- package/scss/components/_glass-prominent-button.scss +24 -0
- package/scss/components/_h-divider.scss +13 -0
- package/scss/components/_h-stack.scss +39 -0
- package/scss/components/_index.scss +224 -7
- package/scss/components/_label-view.scss +386 -0
- package/scss/components/_labeled-content.scss +9 -0
- package/scss/components/_list-view.scss +229 -0
- package/scss/components/_menu-view.scss +188 -0
- package/scss/components/_navigation-large-title.scss +27 -0
- package/scss/components/_navigation-split-view.scss +329 -269
- package/scss/components/_navigation-stack.scss +6 -6
- package/scss/components/_navigation-title.scss +10 -0
- package/scss/components/_picker-view.scss +122 -0
- package/scss/components/_plain-button.scss +11 -0
- package/scss/components/_scroll-view-proxy.scss +79 -0
- package/scss/components/_scroll-view-toolbars.scss +126 -0
- package/scss/components/_scroll-view.scss +110 -66
- package/scss/components/_section-view.scss +119 -0
- package/scss/components/_sheet-view.scss +68 -35
- package/scss/components/_sidebar-toggle.scss +90 -27
- package/scss/components/_sidebar-view.scss +30 -40
- package/scss/components/_sticky-container.scss +42 -0
- package/scss/components/_tab-bar.scss +201 -84
- package/scss/components/_tab-item.scss +25 -0
- package/scss/components/_tab-view.scss +268 -126
- package/scss/components/_table-column.scss +52 -0
- package/scss/components/_table-row.scss +172 -0
- package/scss/components/_table-view.scss +223 -0
- package/scss/components/_text-field.scss +37 -0
- package/scss/components/_tool-bar-item-group.scss +30 -19
- package/scss/components/_tool-bar-item.scss +128 -70
- package/scss/components/_tool-bar.scss +107 -64
- package/scss/components/_v-divider.scss +13 -0
- package/scss/components/_v-flex-stack.scss +29 -0
- package/scss/components/_v-keyboard.scss +6 -4
- package/scss/components/_v-stack.scss +8 -9
- package/scss/final/_touch-glass.scss +67 -0
- package/scss/index.scss +6 -2
- package/scss/mixins/_dialog.scss +88 -0
- package/scss/mixins/_index.scss +405 -0
- package/scss/placeholders/_buttons.scss +83 -0
- package/scss/placeholders/_lists.scss +589 -0
- package/scss/transitions/_bwd.navbar.scss +3 -13
- package/scss/transitions/_bwd.scss +4 -20
- package/scss/transitions/_confirmation-dialog.scss +19 -0
- package/scss/transitions/_dialog.scss +7 -11
- package/scss/transitions/_disclosure-group.scss +35 -0
- package/scss/transitions/_fwd.navbar.scss +4 -9
- package/scss/transitions/_fwd.scss +4 -34
- package/scss/transitions/_glass-button.scss +12 -0
- package/scss/transitions/_glass-prominent-button.scss +12 -0
- package/scss/transitions/_index.scss +35 -143
- package/scss/transitions/_menu-view.scss +26 -0
- package/scss/transitions/_navigation-split-view.scss +23 -0
- package/scss/transitions/_sidebar-view.scss +36 -0
- package/scss/transitions/_tab-bar.scss +19 -0
- package/scss/utils/_frame.scss +84 -0
- package/scss/utils/_index.scss +68 -0
- package/scss/utils/_scroll-view.scss +14 -0
- package/scss/utils/_spacing.scss +25 -0
- package/scss/utils/_stacks.scss +242 -0
- package/web-components.html-data/en.json +330 -0
- package/generated/components/bottom-bar.d.ts +0 -10
- package/generated/components/bottom-bar.js +0 -73
- package/generated/components/navigation-bar.d.ts +0 -10
- package/generated/components/navigation-bar.js +0 -80
- package/generated/internal/class.d.ts +0 -18
- package/generated/internal/class.js +0 -18
- package/generated/namespace/index.d.ts +0 -6
- package/generated/styles.css +0 -1305
- package/scss/_dev.scss +0 -68
- package/scss/components/_tab-bar-stack.scss +0 -101
- package/scss/components/_toolbars.scss +0 -100
- /package/generated/{namespace/index.js → events/confirmation-dialog.js} +0 -0
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
var _a;
|
|
2
|
+
import { CleanupRegistry } from '../../internal/class/cleanup-registry';
|
|
3
|
+
import { LifecycleObserver } from '../../lifecycle-observer';
|
|
4
|
+
import { frame, onoff } from '../utils';
|
|
5
|
+
export class NavigationView extends HTMLElement {
|
|
6
|
+
static get observedAttributes() {
|
|
7
|
+
return ['hidden'];
|
|
8
|
+
}
|
|
9
|
+
// pairedEventSystem
|
|
10
|
+
#recentBefore;
|
|
11
|
+
constructor() {
|
|
12
|
+
super();
|
|
13
|
+
}
|
|
14
|
+
disconnectedCallback() {
|
|
15
|
+
CleanupRegistry.unregister(this);
|
|
16
|
+
this.#recentBefore = undefined;
|
|
17
|
+
// this.removeEventListener('tabreveal', this.#handleTabReveal)
|
|
18
|
+
if (this.closest('tab-view'))
|
|
19
|
+
frame().then(() => LifecycleObserver.dispatchEvent(new CustomEvent('tabhide', { detail: { tag: this.id }, bubbles: true, composed: true })));
|
|
20
|
+
}
|
|
21
|
+
connectedCallback() {
|
|
22
|
+
if (this.closest('tab-view')) {
|
|
23
|
+
// frame(this).then((r) => {
|
|
24
|
+
// if (!r) return
|
|
25
|
+
// this.dispatchEvent(new CustomEvent<TabDetail>('tabshow', { detail: { tag: this.id }, bubbles: true, composed: true }))
|
|
26
|
+
// })
|
|
27
|
+
CleanupRegistry.register(this, onoff('beforetabreveal beforetabswap', this.#handleBeforeTabRevealOrSwap, this).on());
|
|
28
|
+
}
|
|
29
|
+
// Snapshot.waitReady.then(async () => {
|
|
30
|
+
if (this.hasAttribute('hidden'))
|
|
31
|
+
return; // will be picked up by attr-change!
|
|
32
|
+
if (this.closest('tab-view'))
|
|
33
|
+
frame(this).then(() => {
|
|
34
|
+
// if (!r) return
|
|
35
|
+
LifecycleObserver.dispatchEvent(new CustomEvent('tabshow', { detail: { tag: this.id }, bubbles: true, composed: true }));
|
|
36
|
+
});
|
|
37
|
+
}
|
|
38
|
+
attributeChangedCallback(name, oldValue, newValue) {
|
|
39
|
+
switch (name) {
|
|
40
|
+
case 'hidden':
|
|
41
|
+
if (oldValue === newValue)
|
|
42
|
+
break;
|
|
43
|
+
if (!this.closest('tab-view'))
|
|
44
|
+
break; // tabview stuff
|
|
45
|
+
let eventType = this.hasAttribute(name) ? 'tabshow' : 'tabhide', target = LifecycleObserver;
|
|
46
|
+
// isRecent by 100ms window
|
|
47
|
+
if (this.#recentBefore && performance.now() - this.#recentBefore.time <= 100) {
|
|
48
|
+
if (this.#recentBefore.type === 'beforetabreveal') {
|
|
49
|
+
eventType = 'tabreveal';
|
|
50
|
+
target = this;
|
|
51
|
+
}
|
|
52
|
+
else if (this.#recentBefore.type === 'beforetabswap') {
|
|
53
|
+
eventType = 'tabswap';
|
|
54
|
+
target = this;
|
|
55
|
+
}
|
|
56
|
+
// consume it (important so it doesn’t leak to next change)
|
|
57
|
+
this.#recentBefore = undefined;
|
|
58
|
+
}
|
|
59
|
+
console.debug(`${_a.name} 💡 ${eventType}`);
|
|
60
|
+
frame(this).then(() => {
|
|
61
|
+
// if (!r) return
|
|
62
|
+
target.dispatchEvent(new CustomEvent(eventType, { detail: { tag: this.id }, bubbles: true, composed: true }));
|
|
63
|
+
});
|
|
64
|
+
break;
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
#handleBeforeTabRevealOrSwap = (evt) => {
|
|
68
|
+
console.debug(`${_a.name} ⚡️ ${evt?.type}`);
|
|
69
|
+
if (this.id !== evt.detail?.tag)
|
|
70
|
+
return;
|
|
71
|
+
this.#recentBefore = {
|
|
72
|
+
type: evt.type, // beforetabreveal / beforetabswap
|
|
73
|
+
time: performance.now(),
|
|
74
|
+
};
|
|
75
|
+
};
|
|
76
|
+
}
|
|
77
|
+
_a = NavigationView;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { Snapshot } from '../../snapshot';
|
|
2
|
+
export class ResizeObserverSingleton {
|
|
3
|
+
#observers = new WeakMap();
|
|
4
|
+
observer;
|
|
5
|
+
constructor() {
|
|
6
|
+
this.observer = Snapshot.waitReady.then(() => {
|
|
7
|
+
return new ResizeObserver((entries) => {
|
|
8
|
+
for (const entry of entries)
|
|
9
|
+
this.#observers.get(entry.target)?.(entry);
|
|
10
|
+
});
|
|
11
|
+
});
|
|
12
|
+
}
|
|
13
|
+
async observe(target, callback) {
|
|
14
|
+
this.#observers.set(target, callback);
|
|
15
|
+
(await this.observer).observe(target);
|
|
16
|
+
}
|
|
17
|
+
async unobserve(target) {
|
|
18
|
+
;
|
|
19
|
+
(await this.observer).unobserve(target);
|
|
20
|
+
this.#observers.delete(target);
|
|
21
|
+
}
|
|
22
|
+
}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import type * as Components from '../components';
|
|
2
|
+
export type NavigationHost = Components.BodyView | Components.SheetView | Components.NavigationStack | Components.NavigationSplitView;
|
|
3
|
+
export type NavigationToolbarConfiguration = Components.ToolBarItem | Components.ToolBarItemGroup;
|
|
4
|
+
export type NavigationPage = Components.SidebarView | Components.ScrollView;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default function <T extends object>(set: Set<T> | WeakSet<T>, value: T): boolean;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default function <T extends Element>(selector: string, element?: Element): T[];
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
export default function (selector, element) {
|
|
2
|
+
const matches = [];
|
|
3
|
+
let current = element?.closest(selector) ?? undefined;
|
|
4
|
+
while (current) {
|
|
5
|
+
matches.push(current);
|
|
6
|
+
current = current.parentElement?.closest(selector) ?? undefined;
|
|
7
|
+
}
|
|
8
|
+
return matches;
|
|
9
|
+
}
|
|
10
|
+
// function querySelectorAllUp(el, selector) {
|
|
11
|
+
// const matches = [];
|
|
12
|
+
// let current = el.parentElement;
|
|
13
|
+
// while (current) {
|
|
14
|
+
// if (current.matches(selector)) matches.push(current);
|
|
15
|
+
// current = current.parentElement;
|
|
16
|
+
// }
|
|
17
|
+
// return matches;
|
|
18
|
+
// }
|
|
19
|
+
// function querySelectorAllUp(el, selector) {
|
|
20
|
+
// const matches = [];
|
|
21
|
+
// let current = el.closest(selector);
|
|
22
|
+
// while (current) {
|
|
23
|
+
// matches.push(current);
|
|
24
|
+
// current = current.parentElement?.closest(selector);
|
|
25
|
+
// }
|
|
26
|
+
// return matches;
|
|
27
|
+
// }
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import ancestors from './ancestors';
|
|
2
|
+
import next from './next';
|
|
3
|
+
import nextAll from './next-all';
|
|
4
|
+
import prev from './prev';
|
|
5
|
+
import prevAll from './prev-all';
|
|
6
|
+
import prop from './prop';
|
|
7
|
+
import siblings from './siblings';
|
|
8
|
+
declare const DEFAULT: ":scope>:first-child";
|
|
9
|
+
interface CashFn {
|
|
10
|
+
(innerHTML: string, selector?: typeof DEFAULT): Element;
|
|
11
|
+
(innerHTML: string, selector: string): DocumentFragment;
|
|
12
|
+
prop: typeof prop;
|
|
13
|
+
nextAll: typeof nextAll;
|
|
14
|
+
prevAll: typeof prevAll;
|
|
15
|
+
next: typeof next;
|
|
16
|
+
prev: typeof prev;
|
|
17
|
+
siblings: typeof siblings;
|
|
18
|
+
ancestors: typeof ancestors;
|
|
19
|
+
}
|
|
20
|
+
declare const cash: CashFn;
|
|
21
|
+
export default cash;
|
|
22
|
+
export { ancestors, next, nextAll, prev, prevAll, prop, siblings };
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import ancestors from './ancestors';
|
|
2
|
+
import next from './next';
|
|
3
|
+
import nextAll from './next-all';
|
|
4
|
+
import prev from './prev';
|
|
5
|
+
import prevAll from './prev-all';
|
|
6
|
+
import prop from './prop';
|
|
7
|
+
import siblings from './siblings';
|
|
8
|
+
const DEFAULT = ':scope>:first-child';
|
|
9
|
+
const cash = ((innerHTML, selector = DEFAULT) => {
|
|
10
|
+
const template = Object.assign(document.createElement('template'), { innerHTML });
|
|
11
|
+
if (selector === DEFAULT)
|
|
12
|
+
return template.content.firstElementChild;
|
|
13
|
+
return template.content;
|
|
14
|
+
});
|
|
15
|
+
cash.prop = prop;
|
|
16
|
+
cash.nextAll = nextAll;
|
|
17
|
+
cash.prevAll = prevAll;
|
|
18
|
+
cash.next = next;
|
|
19
|
+
cash.prev = prev;
|
|
20
|
+
cash.siblings = siblings;
|
|
21
|
+
cash.ancestors = ancestors;
|
|
22
|
+
export default cash;
|
|
23
|
+
export { ancestors, next, nextAll, prev, prevAll, prop, siblings };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default function <T extends Element>(selector?: string, element?: Element): T[];
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default function <T extends Element>(selector?: string, element?: Element): T | undefined;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default function <T extends Element>(selector?: string, element?: Element): T[];
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
export default function (selector, element) {
|
|
2
|
+
const siblings = [];
|
|
3
|
+
let prev = element?.previousElementSibling;
|
|
4
|
+
while (prev) {
|
|
5
|
+
if (!selector || prev.matches(selector))
|
|
6
|
+
siblings.push(prev);
|
|
7
|
+
prev = prev.previousElementSibling;
|
|
8
|
+
}
|
|
9
|
+
return siblings;
|
|
10
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default function <T extends Element>(selector?: string, element?: Element): T | undefined;
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* A remove/set property utility that checks before doing DOM manipulations.
|
|
3
|
+
* It enforces the important flag, the built-in functionality is to leave it as-is if there was an important flat and the setProperty does not have one
|
|
4
|
+
* In case of undefined it does a removeProperty, the built-in functionality is to add a string representation ("undefined")
|
|
5
|
+
*
|
|
6
|
+
* Notes:
|
|
7
|
+
* By default setProperty does NOT enforce important. It always triggers a DOM manipulation.
|
|
8
|
+
* By default getPropertyValue returns a trimmed string but fails to inform of the presence in the style attribute.
|
|
9
|
+
*
|
|
10
|
+
* Examples:
|
|
11
|
+
* [style] prop('--prop', '1rem', el) style="--prop: 1rem;"
|
|
12
|
+
* [style] prop('--prop', null | '' | undefined, el) style
|
|
13
|
+
* [style] prop('--prop', ' ', el) style="--prop: ;"
|
|
14
|
+
* [style] prop('--prop', ' ', el) style="--prop: ;"
|
|
15
|
+
* style="--prop: 1rem;" prop('--prop', '1rem', el, 'important') style="--prop: 1rem !important;"
|
|
16
|
+
* style="--prop: 1rem !important;" prop('--prop', '1rem', el) style="--prop: 1rem;"
|
|
17
|
+
*/
|
|
18
|
+
export default function (property: string, value?: string | null, el?: HTMLElement | null, priority?: 'important'): void;
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* A remove/set property utility that checks before doing DOM manipulations.
|
|
3
|
+
* It enforces the important flag, the built-in functionality is to leave it as-is if there was an important flat and the setProperty does not have one
|
|
4
|
+
* In case of undefined it does a removeProperty, the built-in functionality is to add a string representation ("undefined")
|
|
5
|
+
*
|
|
6
|
+
* Notes:
|
|
7
|
+
* By default setProperty does NOT enforce important. It always triggers a DOM manipulation.
|
|
8
|
+
* By default getPropertyValue returns a trimmed string but fails to inform of the presence in the style attribute.
|
|
9
|
+
*
|
|
10
|
+
* Examples:
|
|
11
|
+
* [style] prop('--prop', '1rem', el) style="--prop: 1rem;"
|
|
12
|
+
* [style] prop('--prop', null | '' | undefined, el) style
|
|
13
|
+
* [style] prop('--prop', ' ', el) style="--prop: ;"
|
|
14
|
+
* [style] prop('--prop', ' ', el) style="--prop: ;"
|
|
15
|
+
* style="--prop: 1rem;" prop('--prop', '1rem', el, 'important') style="--prop: 1rem !important;"
|
|
16
|
+
* style="--prop: 1rem !important;" prop('--prop', '1rem', el) style="--prop: 1rem;"
|
|
17
|
+
*/
|
|
18
|
+
export default function (property, value, el, priority) {
|
|
19
|
+
if (!el)
|
|
20
|
+
return;
|
|
21
|
+
if (!value) {
|
|
22
|
+
if (-1 !== Array.from(el.style).indexOf(property))
|
|
23
|
+
el.style.removeProperty(property); // remove key entirely
|
|
24
|
+
return;
|
|
25
|
+
}
|
|
26
|
+
const currentValue = el.style.getPropertyValue(property), // "" always trimmed
|
|
27
|
+
currentPriority = el.style.getPropertyPriority(property); // "" always lowercase
|
|
28
|
+
if (currentValue !== value.trim() || currentPriority !== (priority ?? '').toLowerCase())
|
|
29
|
+
el.style.setProperty(property, value, priority); // enforce priority
|
|
30
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default function <T extends Element>(selector?: string, element?: Element): T[];
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
export default function (selector, element) {
|
|
2
|
+
const siblings = [];
|
|
3
|
+
let child = element?.parentElement?.firstElementChild;
|
|
4
|
+
while (child) {
|
|
5
|
+
if (child !== element && (!selector || child.matches(selector)))
|
|
6
|
+
siblings.push(child);
|
|
7
|
+
child = child.nextElementSibling;
|
|
8
|
+
}
|
|
9
|
+
return siblings;
|
|
10
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default function (value?: string, min?: number, max?: number): number;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default function (a: string, b: string): number;
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @example
|
|
3
|
+
* compareBigDecimals("1e3", "1000") // 0
|
|
4
|
+
* compareBigDecimals("1e-3", "0.001") // 0
|
|
5
|
+
* compareBigDecimals("-10", "-2") // -1 ✅
|
|
6
|
+
* const arr = ["1.2","1.10","1.02","1e2","100","-0.5"]
|
|
7
|
+
* arr.sort(compareBigDecimals)
|
|
8
|
+
* console.log(arr)
|
|
9
|
+
* function isInRange(value: string, min: string, max: string): boolean {return compareBigDecimals(value, min) >= 0 && compareBigDecimals(value, max) <= 0}
|
|
10
|
+
* // examples
|
|
11
|
+
* isInRange("-5", "-10", "-1") // true
|
|
12
|
+
* isInRange("-11", "-10", "-1") // false
|
|
13
|
+
* isInRange("0", "-10", "-1") // false
|
|
14
|
+
* isInRange("-Infinity", "-Infinity", "-1") // true
|
|
15
|
+
* isInRange("5", "-Infinity", "Infinity") // true
|
|
16
|
+
*/
|
|
17
|
+
const POSITIVE_INFINITY = 'Infinity', NEGATIVE_INFINITY = '-Infinity';
|
|
18
|
+
export default function (a, b) {
|
|
19
|
+
const aInf = isInfinity(a), bInf = isInfinity(b);
|
|
20
|
+
if (aInf !== 0 || bInf !== 0) {
|
|
21
|
+
if (aInf === bInf)
|
|
22
|
+
return 0;
|
|
23
|
+
return aInf > bInf ? 1 : -1;
|
|
24
|
+
}
|
|
25
|
+
const A = parse(a), B = parse(b);
|
|
26
|
+
// different signs
|
|
27
|
+
if (A.sign !== B.sign)
|
|
28
|
+
return A.sign - B.sign;
|
|
29
|
+
const sign = A.sign;
|
|
30
|
+
// compare integer length
|
|
31
|
+
if (A.i.length !== B.i.length)
|
|
32
|
+
return (A.i.length - B.i.length) * sign;
|
|
33
|
+
// compare integer part
|
|
34
|
+
if (A.i !== B.i)
|
|
35
|
+
return (A.i > B.i ? 1 : -1) * sign;
|
|
36
|
+
// compare fractional part
|
|
37
|
+
const max = Math.max(A.f.length, B.f.length);
|
|
38
|
+
for (let i = 0; i < max; i++) {
|
|
39
|
+
const da = A.f.charCodeAt(i) || 48, // '0'
|
|
40
|
+
db = B.f.charCodeAt(i) || 48;
|
|
41
|
+
if (da !== db)
|
|
42
|
+
return (da > db ? 1 : -1) * sign;
|
|
43
|
+
}
|
|
44
|
+
return 0;
|
|
45
|
+
}
|
|
46
|
+
function isInfinity(s) {
|
|
47
|
+
const t = s.trim();
|
|
48
|
+
if (t === POSITIVE_INFINITY || t === '+Infinity')
|
|
49
|
+
return 1;
|
|
50
|
+
if (t === NEGATIVE_INFINITY)
|
|
51
|
+
return -1;
|
|
52
|
+
return 0;
|
|
53
|
+
}
|
|
54
|
+
function parse(input) {
|
|
55
|
+
let s = input.trim(), sign = 1;
|
|
56
|
+
// sign
|
|
57
|
+
if (s[0] === '-') {
|
|
58
|
+
sign = -1;
|
|
59
|
+
s = s.slice(1);
|
|
60
|
+
}
|
|
61
|
+
else if (s[0] === '+') {
|
|
62
|
+
s = s.slice(1);
|
|
63
|
+
}
|
|
64
|
+
// scientific notation
|
|
65
|
+
let exp = 0;
|
|
66
|
+
const eIndex = s.search(/e/i);
|
|
67
|
+
if (eIndex !== -1) {
|
|
68
|
+
exp = parseInt(s.slice(eIndex + 1), 10) || 0;
|
|
69
|
+
s = s.slice(0, eIndex);
|
|
70
|
+
}
|
|
71
|
+
let [i = '0', f = ''] = s.split('.');
|
|
72
|
+
// remove leading zeros
|
|
73
|
+
i = i.replace(/^0+/, '') || '0';
|
|
74
|
+
// apply exponent by shifting decimal
|
|
75
|
+
if (exp > 0) {
|
|
76
|
+
const move = Math.min(exp, f.length);
|
|
77
|
+
i += f.slice(0, move);
|
|
78
|
+
f = f.slice(move) + '0'.repeat(exp - move);
|
|
79
|
+
}
|
|
80
|
+
else if (exp < 0) {
|
|
81
|
+
const move = Math.min(-exp, i.length);
|
|
82
|
+
f = i.slice(i.length - move) + f;
|
|
83
|
+
i = i.slice(0, i.length - move) || '0';
|
|
84
|
+
f = '0'.repeat(-exp - move) + f;
|
|
85
|
+
}
|
|
86
|
+
// normalize again
|
|
87
|
+
i = i.replace(/^0+/, '') || '0';
|
|
88
|
+
f = f.replace(/0+$/, '');
|
|
89
|
+
return { sign, i, f };
|
|
90
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default function <F extends (...args: any[]) => any>(fn: F, delay?: number, immediate?: boolean): (...args: Parameters<F>) => void;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import timeout from './timeout';
|
|
2
|
+
export default function (fn, delay = 300, immediate = false) {
|
|
3
|
+
const { next, pending } = timeout();
|
|
4
|
+
return function (...args) {
|
|
5
|
+
const context = this, callNow = immediate && !pending();
|
|
6
|
+
next(() => {
|
|
7
|
+
if (!immediate)
|
|
8
|
+
fn.apply(context, args);
|
|
9
|
+
}, delay);
|
|
10
|
+
if (callNow)
|
|
11
|
+
fn.apply(context, args);
|
|
12
|
+
};
|
|
13
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default function (element?: Element): Promise<number | undefined>;
|
|
@@ -1,2 +1,17 @@
|
|
|
1
|
-
|
|
1
|
+
import cash from './cash';
|
|
2
|
+
export { default as add } from './add';
|
|
3
|
+
export { default as clamp } from './clamp';
|
|
4
|
+
export { default as compareBigDecimals } from './compare-big-decimals';
|
|
2
5
|
export { default as cssTime } from './css-time';
|
|
6
|
+
export { default as debounce } from './debounce';
|
|
7
|
+
export { default as frame } from './frame';
|
|
8
|
+
export { default as kebabCase } from './kebab-case';
|
|
9
|
+
export { default as listActive } from './list-active';
|
|
10
|
+
export { default as microtask } from './microtask';
|
|
11
|
+
export { default as onoff } from './onoff';
|
|
12
|
+
export { default as set } from './set';
|
|
13
|
+
export { default as sleep } from './sleep';
|
|
14
|
+
export { default as slowHideShow } from './slow-hide-show';
|
|
15
|
+
export { default as timeout } from './timeout';
|
|
16
|
+
export { default as touchGlass } from './touch-glass';
|
|
17
|
+
export declare const $: typeof cash;
|
|
@@ -1,2 +1,18 @@
|
|
|
1
|
-
|
|
1
|
+
// import * as _intl from './intl'
|
|
2
|
+
import cash from './cash';
|
|
3
|
+
export { default as add } from './add';
|
|
4
|
+
export { default as clamp } from './clamp';
|
|
5
|
+
export { default as compareBigDecimals } from './compare-big-decimals';
|
|
2
6
|
export { default as cssTime } from './css-time';
|
|
7
|
+
export { default as debounce } from './debounce';
|
|
8
|
+
export { default as frame } from './frame';
|
|
9
|
+
export { default as kebabCase } from './kebab-case';
|
|
10
|
+
export { default as listActive } from './list-active';
|
|
11
|
+
export { default as microtask } from './microtask';
|
|
12
|
+
export { default as onoff } from './onoff';
|
|
13
|
+
export { default as set } from './set';
|
|
14
|
+
export { default as sleep } from './sleep';
|
|
15
|
+
export { default as slowHideShow } from './slow-hide-show';
|
|
16
|
+
export { default as timeout } from './timeout';
|
|
17
|
+
export { default as touchGlass } from './touch-glass';
|
|
18
|
+
export const $ = cash;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
export default function (str:
|
|
1
|
+
export default function (str: string): string;
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
function onClick(event) {
|
|
2
|
+
const el = event.target.closest('button,summary');
|
|
3
|
+
if (!el)
|
|
4
|
+
return;
|
|
5
|
+
el.classList.add('active');
|
|
6
|
+
el.addEventListener('pointerleave', onCancel);
|
|
7
|
+
}
|
|
8
|
+
function onCancel(event) {
|
|
9
|
+
const el = event.target.closest('button,summary');
|
|
10
|
+
if (!el)
|
|
11
|
+
return;
|
|
12
|
+
self.requestAnimationFrame(() => {
|
|
13
|
+
el.removeEventListener('pointerleave', onCancel);
|
|
14
|
+
el.classList.remove('active');
|
|
15
|
+
});
|
|
16
|
+
}
|
|
17
|
+
const makePointerDownHandler = (target) => {
|
|
18
|
+
return onClick;
|
|
19
|
+
}, makePointerCancelHandler = (target) => {
|
|
20
|
+
return onCancel;
|
|
21
|
+
};
|
|
22
|
+
export default function (t) {
|
|
23
|
+
const onListener = makePointerDownHandler(t), offListener = makePointerCancelHandler(t);
|
|
24
|
+
return [
|
|
25
|
+
{ types: 'pointerdown', listener: onListener, addOptions: { passive: true } },
|
|
26
|
+
{ types: 'pointerup pointercancel', listener: offListener, addOptions: { passive: true } },
|
|
27
|
+
];
|
|
28
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export default function (): Promise<void>;
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* const el = document.querySelector('button')!
|
|
3
|
+
*
|
|
4
|
+
* @example
|
|
5
|
+
* // 1. Single — no event arg
|
|
6
|
+
* onoff('click', () => console.log('clicked'), el)
|
|
7
|
+
*
|
|
8
|
+
* @example
|
|
9
|
+
* // 2. Single — with event arg
|
|
10
|
+
* onoff('click', (e) => console.log(e.target), el)
|
|
11
|
+
*
|
|
12
|
+
* @example
|
|
13
|
+
* // 3. Single — with options
|
|
14
|
+
* onoff('click', (e) => console.log(e), el, { passive: true, once: true })
|
|
15
|
+
*
|
|
16
|
+
* @example
|
|
17
|
+
* // 4. Single — capture as boolean
|
|
18
|
+
* onoff('click', (e) => console.log(e), el, true)
|
|
19
|
+
*
|
|
20
|
+
* @example
|
|
21
|
+
* // 5. Array — shared t
|
|
22
|
+
* onoff([
|
|
23
|
+
* { types: 'click', listener: (e) => console.log('click', e) },
|
|
24
|
+
* { types: 'mouseover mouseout', listener: (e) => console.log('hover', e) },
|
|
25
|
+
* ], el)
|
|
26
|
+
*
|
|
27
|
+
* @example
|
|
28
|
+
* // 6. Using on/off
|
|
29
|
+
* const { on, off } = onoff('scroll', (e) => console.log(e), el, { passive: true })
|
|
30
|
+
* on() // start listening
|
|
31
|
+
* off() // stop listening
|
|
32
|
+
*/
|
|
33
|
+
type Options = boolean | AddEventListenerOptions;
|
|
34
|
+
interface EventConfig {
|
|
35
|
+
types: string;
|
|
36
|
+
listener: EventListener;
|
|
37
|
+
addOptions?: Options;
|
|
38
|
+
}
|
|
39
|
+
declare function single(types: string, listener: EventListener, t?: EventTarget, addOptions?: Options): {
|
|
40
|
+
on: () => () => void;
|
|
41
|
+
off: () => void;
|
|
42
|
+
};
|
|
43
|
+
export default function (configs: EventConfig[], t?: EventTarget): ReturnType<typeof single>;
|
|
44
|
+
export default function (types: string, listener: EventListener, t?: EventTarget, addOptions?: Options): ReturnType<typeof single>;
|
|
45
|
+
export {};
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
function single(types, listener, t, addOptions) {
|
|
2
|
+
const events = types?.split(' ');
|
|
3
|
+
const removeOptions = typeof addOptions === 'boolean' ? addOptions : addOptions !== undefined && 'capture' in addOptions ? { capture: addOptions.capture } : undefined;
|
|
4
|
+
const off = () => {
|
|
5
|
+
for (const event of events)
|
|
6
|
+
t?.removeEventListener(event, listener, removeOptions);
|
|
7
|
+
}, on = () => {
|
|
8
|
+
for (const event of events)
|
|
9
|
+
t?.addEventListener(event, listener, addOptions);
|
|
10
|
+
return off;
|
|
11
|
+
};
|
|
12
|
+
return {
|
|
13
|
+
on,
|
|
14
|
+
off,
|
|
15
|
+
};
|
|
16
|
+
}
|
|
17
|
+
export default function (typesOrConfigs, listenerOrT, t, addOptions) {
|
|
18
|
+
if (Array.isArray(typesOrConfigs)) {
|
|
19
|
+
const element = listenerOrT, results = typesOrConfigs.map((c) => single(c.types, c.listener, element, c.addOptions)); //, c.t ?? element, c.addOptions))
|
|
20
|
+
const off = () => results.forEach((r) => r.off()), on = () => {
|
|
21
|
+
for (const r of results)
|
|
22
|
+
r.on();
|
|
23
|
+
return off;
|
|
24
|
+
};
|
|
25
|
+
return {
|
|
26
|
+
on,
|
|
27
|
+
off,
|
|
28
|
+
};
|
|
29
|
+
}
|
|
30
|
+
return single(typesOrConfigs, listenerOrT, t, addOptions);
|
|
31
|
+
}
|