@e280/sly 0.2.0-0 → 0.2.0-10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +414 -97
- package/package.json +4 -4
- package/s/demo/demo.bundle.ts +10 -6
- package/s/demo/views/counter.ts +22 -17
- package/s/demo/views/demo.ts +10 -6
- package/s/demo/views/fastcount.ts +29 -0
- package/s/demo/views/loaders.ts +2 -2
- package/s/dom/attrs/attrs.ts +21 -0
- package/s/dom/attrs/parts/attr-fns.ts +38 -0
- package/s/dom/attrs/parts/attr-proxies.ts +35 -0
- package/s/dom/attrs/parts/attr-spec.ts +29 -0
- package/s/dom/attrs/parts/on-attrs.ts +8 -0
- package/s/dom/dom.ts +73 -0
- package/s/dom/{register.ts → parts/register.ts} +2 -7
- package/s/dom/types.ts +40 -0
- package/s/index.html.ts +4 -2
- package/s/index.ts +10 -9
- package/s/loot/drag-and-drops.ts +82 -0
- package/s/loot/drops.ts +35 -0
- package/s/loot/helpers.ts +31 -0
- package/s/loot/index.ts +5 -0
- package/s/ops/loaders/make-loader.ts +3 -3
- package/s/ops/loaders/parts/anims.ts +1 -1
- package/s/ops/loaders/parts/ascii-anim.ts +3 -3
- package/s/ops/loaders/parts/error-display.ts +2 -2
- package/s/ops/op.ts +2 -2
- package/s/{views → ui/base}/use.ts +35 -17
- package/s/ui/base/utils/attr-watcher.ts +22 -0
- package/s/ui/base/utils/reactor.ts +21 -0
- package/s/ui/base-element.ts +76 -0
- package/s/ui/types.ts +33 -0
- package/s/ui/view/make-component.ts +33 -0
- package/s/ui/view/make-view.ts +40 -0
- package/s/{views/utils → ui/view/parts}/apply-attrs.ts +4 -7
- package/s/ui/view/parts/capsule.ts +67 -0
- package/s/ui/view/parts/chain.ts +33 -0
- package/s/ui/view/parts/context.ts +10 -0
- package/s/ui/view/parts/directive.ts +29 -0
- package/s/ui/view/parts/sly-view.ts +15 -0
- package/s/ui/view.ts +24 -0
- package/x/demo/demo.bundle.js +9 -5
- package/x/demo/demo.bundle.js.map +1 -1
- package/x/demo/demo.bundle.min.js +19 -17
- package/x/demo/demo.bundle.min.js.map +4 -4
- package/x/demo/views/counter.d.ts +374 -1
- package/x/demo/views/counter.js +19 -15
- package/x/demo/views/counter.js.map +1 -1
- package/x/demo/views/demo.d.ts +4 -1
- package/x/demo/views/demo.js +10 -5
- package/x/demo/views/demo.js.map +1 -1
- package/x/demo/views/fastcount.d.ts +12 -0
- package/x/demo/views/fastcount.js +21 -0
- package/x/demo/views/fastcount.js.map +1 -0
- package/x/demo/views/loaders.js +2 -2
- package/x/demo/views/loaders.js.map +1 -1
- package/x/dom/attrs/attrs.d.ts +20 -0
- package/x/dom/attrs/attrs.js +17 -0
- package/x/dom/attrs/attrs.js.map +1 -0
- package/x/dom/attrs/parts/attr-fns.d.ts +13 -0
- package/x/dom/attrs/parts/attr-fns.js +42 -0
- package/x/dom/attrs/parts/attr-fns.js.map +1 -0
- package/x/dom/attrs/parts/attr-proxies.d.ts +8 -0
- package/x/dom/attrs/parts/attr-proxies.js +21 -0
- package/x/dom/attrs/parts/attr-proxies.js.map +1 -0
- package/x/dom/attrs/parts/attr-spec.d.ts +3 -0
- package/x/dom/attrs/parts/attr-spec.js +21 -0
- package/x/dom/attrs/parts/attr-spec.js.map +1 -0
- package/x/dom/attrs/parts/on-attrs.d.ts +2 -0
- package/x/dom/attrs/parts/on-attrs.js +7 -0
- package/x/dom/attrs/parts/on-attrs.js.map +1 -0
- package/x/dom/dom.d.ts +32 -0
- package/x/dom/dom.js +54 -0
- package/x/dom/dom.js.map +1 -0
- package/x/dom/parts/dashify.js.map +1 -0
- package/x/dom/{register.d.ts → parts/register.d.ts} +2 -6
- package/x/dom/parts/register.js.map +1 -0
- package/x/dom/types.d.ts +14 -0
- package/x/index.d.ts +9 -8
- package/x/index.html +6 -4
- package/x/index.html.js +4 -2
- package/x/index.html.js.map +1 -1
- package/x/index.js +9 -8
- package/x/index.js.map +1 -1
- package/x/loot/drag-and-drops.d.ts +30 -0
- package/x/loot/drag-and-drops.js +63 -0
- package/x/loot/drag-and-drops.js.map +1 -0
- package/x/loot/drops.d.ts +14 -0
- package/x/loot/drops.js +25 -0
- package/x/loot/drops.js.map +1 -0
- package/x/loot/helpers.d.ts +3 -0
- package/x/loot/helpers.js +21 -0
- package/x/loot/helpers.js.map +1 -0
- package/x/loot/index.d.ts +3 -0
- package/x/loot/index.js +4 -0
- package/x/loot/index.js.map +1 -0
- package/x/ops/loaders/make-loader.d.ts +1 -1
- package/x/ops/loaders/make-loader.js +2 -2
- package/x/ops/loaders/make-loader.js.map +1 -1
- package/x/ops/loaders/parts/anims.d.ts +1 -1
- package/x/ops/loaders/parts/ascii-anim.d.ts +2 -2
- package/x/ops/loaders/parts/ascii-anim.js +2 -2
- package/x/ops/loaders/parts/ascii-anim.js.map +1 -1
- package/x/ops/loaders/parts/error-display.js +2 -2
- package/x/ops/loaders/parts/error-display.js.map +1 -1
- package/x/ops/op.d.ts +2 -2
- package/x/ops/op.js +2 -2
- package/x/ops/op.js.map +1 -1
- package/x/ui/base/css-reset.js.map +1 -0
- package/x/{views → ui/base}/use.d.ts +12 -5
- package/x/{views → ui/base}/use.js +24 -10
- package/x/ui/base/use.js.map +1 -0
- package/x/ui/base/utils/apply-styles.js.map +1 -0
- package/x/ui/base/utils/attr-watcher.d.ts +8 -0
- package/x/ui/base/utils/attr-watcher.js +20 -0
- package/x/ui/base/utils/attr-watcher.js.map +1 -0
- package/x/ui/base/utils/mounts.js.map +1 -0
- package/x/ui/base/utils/reactor.d.ts +5 -0
- package/x/ui/base/utils/reactor.js +17 -0
- package/x/ui/base/utils/reactor.js.map +1 -0
- package/x/ui/base-element.d.ts +19 -0
- package/x/ui/base-element.js +52 -0
- package/x/ui/base-element.js.map +1 -0
- package/x/ui/types.d.ts +20 -0
- package/x/{views → ui}/types.js.map +1 -1
- package/x/ui/view/make-component.d.ts +5 -0
- package/x/ui/view/make-component.js +16 -0
- package/x/ui/view/make-component.js.map +1 -0
- package/x/ui/view/make-view.d.ts +2 -0
- package/x/ui/view/make-view.js +16 -0
- package/x/ui/view/make-view.js.map +1 -0
- package/x/ui/view/parts/apply-attrs.d.ts +2 -0
- package/x/{views/utils → ui/view/parts}/apply-attrs.js +2 -4
- package/x/ui/view/parts/apply-attrs.js.map +1 -0
- package/x/ui/view/parts/capsule.d.ts +13 -0
- package/x/ui/view/parts/capsule.js +49 -0
- package/x/ui/view/parts/capsule.js.map +1 -0
- package/x/ui/view/parts/chain.d.ts +11 -0
- package/x/ui/view/parts/chain.js +21 -0
- package/x/ui/view/parts/chain.js.map +1 -0
- package/x/ui/view/parts/context.d.ts +8 -0
- package/x/ui/view/parts/context.js +10 -0
- package/x/ui/view/parts/context.js.map +1 -0
- package/x/ui/view/parts/directive.d.ts +5 -0
- package/x/ui/view/parts/directive.js +18 -0
- package/x/ui/view/parts/directive.js.map +1 -0
- package/x/ui/view/parts/sly-view.d.ts +5 -0
- package/x/ui/view/parts/sly-view.js +13 -0
- package/x/ui/view/parts/sly-view.js.map +1 -0
- package/x/ui/view.d.ts +11 -0
- package/x/ui/view.js +15 -0
- package/x/ui/view.js.map +1 -0
- package/s/dom/dollar.ts +0 -27
- package/s/views/attributes.ts +0 -89
- package/s/views/types.ts +0 -40
- package/s/views/view.ts +0 -150
- package/x/dom/dashify.js.map +0 -1
- package/x/dom/dollar.d.ts +0 -10
- package/x/dom/dollar.js +0 -18
- package/x/dom/dollar.js.map +0 -1
- package/x/dom/register.js.map +0 -1
- package/x/views/attributes.d.ts +0 -10
- package/x/views/attributes.js +0 -46
- package/x/views/attributes.js.map +0 -1
- package/x/views/css-reset.js.map +0 -1
- package/x/views/types.d.ts +0 -31
- package/x/views/use.js.map +0 -1
- package/x/views/utils/apply-attrs.d.ts +0 -2
- package/x/views/utils/apply-attrs.js.map +0 -1
- package/x/views/utils/apply-styles.js.map +0 -1
- package/x/views/utils/mounts.js.map +0 -1
- package/x/views/view.d.ts +0 -9
- package/x/views/view.js +0 -116
- package/x/views/view.js.map +0 -1
- /package/s/dom/{dashify.ts → parts/dashify.ts} +0 -0
- /package/s/{views → ui/base}/css-reset.ts +0 -0
- /package/s/{views → ui/base}/utils/apply-styles.ts +0 -0
- /package/s/{views → ui/base}/utils/mounts.ts +0 -0
- /package/x/dom/{dashify.d.ts → parts/dashify.d.ts} +0 -0
- /package/x/dom/{dashify.js → parts/dashify.js} +0 -0
- /package/x/dom/{register.js → parts/register.js} +0 -0
- /package/x/{views → ui/base}/css-reset.d.ts +0 -0
- /package/x/{views → ui/base}/css-reset.js +0 -0
- /package/x/{views → ui/base}/utils/apply-styles.d.ts +0 -0
- /package/x/{views → ui/base}/utils/apply-styles.js +0 -0
- /package/x/{views → ui/base}/utils/mounts.d.ts +0 -0
- /package/x/{views → ui/base}/utils/mounts.js +0 -0
- /package/x/{views → ui}/types.js +0 -0
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/** a typed proxy accessor for html attributes */
|
|
2
|
+
export declare class AttrProxies {
|
|
3
|
+
element: HTMLElement;
|
|
4
|
+
constructor(element: HTMLElement);
|
|
5
|
+
string: Record<string, string | undefined>;
|
|
6
|
+
number: Record<string, number | undefined>;
|
|
7
|
+
boolean: Record<string, boolean | undefined>;
|
|
8
|
+
}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { attrFns } from "./attr-fns.js";
|
|
2
|
+
/** a typed proxy accessor for html attributes */
|
|
3
|
+
export class AttrProxies {
|
|
4
|
+
element;
|
|
5
|
+
constructor(element) {
|
|
6
|
+
this.element = element;
|
|
7
|
+
}
|
|
8
|
+
string = new Proxy({}, {
|
|
9
|
+
get: (_t, key) => (attrFns.get.string(this.element, key)),
|
|
10
|
+
set: (_t, key, value) => (attrFns.set.string(this.element, key, value)),
|
|
11
|
+
});
|
|
12
|
+
number = new Proxy({}, {
|
|
13
|
+
get: (_t, key) => (attrFns.get.number(this.element, key)),
|
|
14
|
+
set: (_t, key, value) => (attrFns.set.number(this.element, key, value)),
|
|
15
|
+
});
|
|
16
|
+
boolean = new Proxy({}, {
|
|
17
|
+
get: (_t, key) => (attrFns.get.boolean(this.element, key)),
|
|
18
|
+
set: (_t, key, value) => (attrFns.set.boolean(this.element, key, value)),
|
|
19
|
+
});
|
|
20
|
+
}
|
|
21
|
+
//# sourceMappingURL=attr-proxies.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"attr-proxies.js","sourceRoot":"","sources":["../../../../s/dom/attrs/parts/attr-proxies.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,OAAO,EAAC,MAAM,eAAe,CAAA;AAErC,iDAAiD;AACjD,MAAM,OAAO,WAAW;IACJ;IAAnB,YAAmB,OAAoB;QAApB,YAAO,GAAP,OAAO,CAAa;IAAG,CAAC;IAE3C,MAAM,GAAG,IAAI,KAAK,CAAC,EAAE,EAAE;QACtB,GAAG,EAAE,CAAC,EAAE,EAAE,GAAW,EAAE,EAAE,CAAC,CACzB,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CACrC;QACD,GAAG,EAAE,CAAC,EAAE,EAAE,GAAW,EAAE,KAAyB,EAAE,EAAE,CAAC,CACpD,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,EAAE,KAAK,CAAC,CAC5C;KACD,CAAuC,CAAA;IAExC,MAAM,GAAG,IAAI,KAAK,CAAC,EAAE,EAAE;QACtB,GAAG,EAAE,CAAC,EAAE,EAAE,GAAW,EAAE,EAAE,CAAC,CACzB,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CACrC;QACD,GAAG,EAAE,CAAC,EAAE,EAAE,GAAW,EAAE,KAAyB,EAAE,EAAE,CAAC,CACpD,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,EAAE,KAAK,CAAC,CAC5C;KACD,CAAuC,CAAA;IAExC,OAAO,GAAG,IAAI,KAAK,CAAC,EAAE,EAAE;QACvB,GAAG,EAAE,CAAC,EAAE,EAAE,GAAW,EAAE,EAAE,CAAC,CACzB,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CACtC;QACD,GAAG,EAAE,CAAC,EAAE,EAAE,GAAW,EAAE,KAA0B,EAAE,EAAE,CAAC,CACrD,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,GAAG,EAAE,KAAK,CAAC,CAC7C;KACD,CAAwC,CAAA;CACzC"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { attrFns } from "./attr-fns.js";
|
|
2
|
+
/** specify available html attributes and their types and create a proxy accessor */
|
|
3
|
+
export const attrSpec = (e, spec) => new Proxy(spec, {
|
|
4
|
+
get: (_target, key) => {
|
|
5
|
+
switch (spec[key]) {
|
|
6
|
+
case String: return attrFns.get.string(e, key);
|
|
7
|
+
case Number: return attrFns.get.number(e, key);
|
|
8
|
+
case Boolean: return attrFns.get.boolean(e, key);
|
|
9
|
+
default: throw new Error(`invalid attribute type for "${key}"`);
|
|
10
|
+
}
|
|
11
|
+
},
|
|
12
|
+
set: (_target, key, value) => {
|
|
13
|
+
switch (spec[key]) {
|
|
14
|
+
case String: return attrFns.set.string(e, key, value);
|
|
15
|
+
case Number: return attrFns.set.number(e, key, value);
|
|
16
|
+
case Boolean: return attrFns.set.boolean(e, key, value);
|
|
17
|
+
default: throw new Error(`invalid attribute type for "${key}"`);
|
|
18
|
+
}
|
|
19
|
+
},
|
|
20
|
+
});
|
|
21
|
+
//# sourceMappingURL=attr-spec.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"attr-spec.js","sourceRoot":"","sources":["../../../../s/dom/attrs/parts/attr-spec.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,OAAO,EAAC,MAAM,eAAe,CAAA;AAErC,oFAAoF;AACpF,MAAM,CAAC,MAAM,QAAQ,GAAG,CACtB,CAAc,EACd,IAAO,EACN,EAAE,CAAC,IAAI,KAAK,CAAC,IAAI,EAAE;IAErB,GAAG,EAAE,CAAC,OAAO,EAAE,GAAW,EAAE,EAAE;QAC7B,QAAQ,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;YACnB,KAAK,MAAM,CAAC,CAAC,OAAO,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,EAAE,GAAG,CAAC,CAAA;YAC9C,KAAK,MAAM,CAAC,CAAC,OAAO,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,EAAE,GAAG,CAAC,CAAA;YAC9C,KAAK,OAAO,CAAC,CAAC,OAAO,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,EAAE,GAAG,CAAC,CAAA;YAChD,OAAO,CAAC,CAAC,MAAM,IAAI,KAAK,CAAC,+BAA+B,GAAG,GAAG,CAAC,CAAA;QAChE,CAAC;IACF,CAAC;IAED,GAAG,EAAE,CAAC,OAAO,EAAE,GAAW,EAAE,KAAU,EAAE,EAAE;QACzC,QAAQ,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC;YACnB,KAAK,MAAM,CAAC,CAAC,OAAO,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,CAAA;YACrD,KAAK,MAAM,CAAC,CAAC,OAAO,OAAO,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,CAAA;YACrD,KAAK,OAAO,CAAC,CAAC,OAAO,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,EAAE,GAAG,EAAE,KAAK,CAAC,CAAA;YACvD,OAAO,CAAC,CAAC,MAAM,IAAI,KAAK,CAAC,+BAA+B,GAAG,GAAG,CAAC,CAAA;QAChE,CAAC;IACF,CAAC;CACD,CAAwB,CAAA"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/** respond when any attribute changes on the html element */
|
|
2
|
+
export function onAttrs(element, fn) {
|
|
3
|
+
const observer = new MutationObserver(fn);
|
|
4
|
+
observer.observe(element, { attributes: true });
|
|
5
|
+
return () => observer.disconnect();
|
|
6
|
+
}
|
|
7
|
+
//# sourceMappingURL=on-attrs.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"on-attrs.js","sourceRoot":"","sources":["../../../../s/dom/attrs/parts/on-attrs.ts"],"names":[],"mappings":"AACA,6DAA6D;AAC7D,MAAM,UAAU,OAAO,CAAC,OAAoB,EAAE,EAAc;IAC3D,MAAM,QAAQ,GAAG,IAAI,gBAAgB,CAAC,EAAE,CAAC,CAAA;IACzC,QAAQ,CAAC,OAAO,CAAC,OAAO,EAAE,EAAC,UAAU,EAAE,IAAI,EAAC,CAAC,CAAA;IAC7C,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAA;AACnC,CAAC"}
|
package/x/dom/dom.d.ts
ADDED
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
import { AttrSpec } from "./types.js";
|
|
2
|
+
import { Content } from "../ui/types.js";
|
|
3
|
+
export type Renderable = HTMLElement | ShadowRoot | DocumentFragment;
|
|
4
|
+
export type Queryable = HTMLElement | ShadowRoot | Element | Document | DocumentFragment;
|
|
5
|
+
export declare class Dom<C extends Queryable> {
|
|
6
|
+
element: C;
|
|
7
|
+
constructor(element: C);
|
|
8
|
+
in<E extends HTMLElement>(selectorOrElement: string | E): Dom<E>;
|
|
9
|
+
require<E extends Element = HTMLElement>(selector: string): E;
|
|
10
|
+
maybe<E extends Element = HTMLElement>(selector: string): E | null;
|
|
11
|
+
all<E extends Element = HTMLElement>(selector: string): E[];
|
|
12
|
+
render(...content: Content[]): import("lit-html").RootPart;
|
|
13
|
+
attrs(): {
|
|
14
|
+
string: Record<string, string | undefined>;
|
|
15
|
+
number: Record<string, number | undefined>;
|
|
16
|
+
boolean: Record<string, boolean | undefined>;
|
|
17
|
+
on: (fn: () => void) => () => void;
|
|
18
|
+
spec: <A extends AttrSpec>(spec: A) => import("./types.js").AttrTypes<A>;
|
|
19
|
+
};
|
|
20
|
+
}
|
|
21
|
+
export declare function dom<E extends Queryable>(selector: string): E;
|
|
22
|
+
export declare function dom<E extends Queryable>(element: E): Dom<E>;
|
|
23
|
+
export declare namespace dom {
|
|
24
|
+
var _a: <E extends HTMLElement>(selectorOrElement: string | E) => Dom<E>;
|
|
25
|
+
export var require: <E extends Element = HTMLElement>(selector: string) => E;
|
|
26
|
+
export var maybe: <E extends Element = HTMLElement>(selector: string) => E | null;
|
|
27
|
+
export var all: <E extends Element = HTMLElement>(selector: string) => E[];
|
|
28
|
+
export var attrs: typeof import("./attrs/attrs.js").attrs;
|
|
29
|
+
export var register: typeof import("./parts/register.js").register;
|
|
30
|
+
export var render: (container: Renderable, ...content: Content[]) => import("lit-html").RootPart;
|
|
31
|
+
export { _a as in };
|
|
32
|
+
}
|
package/x/dom/dom.js
ADDED
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { render } from "lit";
|
|
2
|
+
import { attrs } from "./attrs/attrs.js";
|
|
3
|
+
import { register } from "./parts/register.js";
|
|
4
|
+
function require(container, selector) {
|
|
5
|
+
const e = container.querySelector(selector);
|
|
6
|
+
if (!e)
|
|
7
|
+
throw new Error(`element not found (${selector})`);
|
|
8
|
+
return e;
|
|
9
|
+
}
|
|
10
|
+
export class Dom {
|
|
11
|
+
element;
|
|
12
|
+
constructor(element) {
|
|
13
|
+
this.element = element;
|
|
14
|
+
}
|
|
15
|
+
in(selectorOrElement) {
|
|
16
|
+
return new Dom((typeof selectorOrElement === "string")
|
|
17
|
+
? require(this.element, selectorOrElement)
|
|
18
|
+
: selectorOrElement);
|
|
19
|
+
}
|
|
20
|
+
require(selector) {
|
|
21
|
+
const e = this.element.querySelector(selector);
|
|
22
|
+
if (!e)
|
|
23
|
+
throw new Error(`element not found (${selector})`);
|
|
24
|
+
return e;
|
|
25
|
+
}
|
|
26
|
+
maybe(selector) {
|
|
27
|
+
return this.element.querySelector(selector);
|
|
28
|
+
}
|
|
29
|
+
all(selector) {
|
|
30
|
+
return Array.from(this.element.querySelectorAll(selector));
|
|
31
|
+
}
|
|
32
|
+
render(...content) {
|
|
33
|
+
return render(content, this.element);
|
|
34
|
+
}
|
|
35
|
+
attrs() {
|
|
36
|
+
return attrs(this.element);
|
|
37
|
+
}
|
|
38
|
+
}
|
|
39
|
+
export function dom(selectorOrElement) {
|
|
40
|
+
return (typeof selectorOrElement === "string")
|
|
41
|
+
? require(document, selectorOrElement)
|
|
42
|
+
: new Dom(selectorOrElement);
|
|
43
|
+
}
|
|
44
|
+
const doc = new Dom(document);
|
|
45
|
+
dom.in = doc.in.bind(doc);
|
|
46
|
+
dom.require = doc.require.bind(doc);
|
|
47
|
+
dom.maybe = doc.maybe.bind(doc);
|
|
48
|
+
dom.all = doc.all.bind(doc);
|
|
49
|
+
dom.attrs = attrs;
|
|
50
|
+
dom.register = register;
|
|
51
|
+
dom.render = (container, ...content) => {
|
|
52
|
+
return render(content, container);
|
|
53
|
+
};
|
|
54
|
+
//# sourceMappingURL=dom.js.map
|
package/x/dom/dom.js.map
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"dom.js","sourceRoot":"","sources":["../../s/dom/dom.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,MAAM,EAAC,MAAM,KAAK,CAAA;AAE1B,OAAO,EAAC,KAAK,EAAC,MAAM,kBAAkB,CAAA;AAEtC,OAAO,EAAC,QAAQ,EAAC,MAAM,qBAAqB,CAAA;AAK5C,SAAS,OAAO,CACd,SAAoB,EACpB,QAAgB;IAEjB,MAAM,CAAC,GAAG,SAAS,CAAC,aAAa,CAAI,QAAQ,CAAC,CAAA;IAC9C,IAAI,CAAC,CAAC;QAAE,MAAM,IAAI,KAAK,CAAC,sBAAsB,QAAQ,GAAG,CAAC,CAAA;IAC1D,OAAO,CAAC,CAAA;AACT,CAAC;AAED,MAAM,OAAO,GAAG;IACI;IAAnB,YAAmB,OAAU;QAAV,YAAO,GAAP,OAAO,CAAG;IAAG,CAAC;IAEjC,EAAE,CAAwB,iBAA6B;QACtD,OAAO,IAAI,GAAG,CACb,CAAC,OAAO,iBAAiB,KAAK,QAAQ,CAAC;YACtC,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,iBAAiB,CAAM;YAC/C,CAAC,CAAC,iBAAiB,CACpB,CAAA;IACF,CAAC;IAED,OAAO,CAAkC,QAAgB;QACxD,MAAM,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,aAAa,CAAI,QAAQ,CAAC,CAAA;QACjD,IAAI,CAAC,CAAC;YAAE,MAAM,IAAI,KAAK,CAAC,sBAAsB,QAAQ,GAAG,CAAC,CAAA;QAC1D,OAAO,CAAC,CAAA;IACT,CAAC;IAED,KAAK,CAAkC,QAAgB;QACtD,OAAO,IAAI,CAAC,OAAO,CAAC,aAAa,CAAI,QAAQ,CAAC,CAAA;IAC/C,CAAC;IAED,GAAG,CAAkC,QAAgB;QACpD,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAI,QAAQ,CAAC,CAAC,CAAA;IAC9D,CAAC;IAED,MAAM,CAAC,GAAG,OAAkB;QAC3B,OAAO,MAAM,CAAC,OAAO,EAAE,IAAI,CAAC,OAAqB,CAAC,CAAA;IACnD,CAAC;IAED,KAAK;QACJ,OAAO,KAAK,CAAC,IAAI,CAAC,OAAsB,CAAC,CAAA;IAC1C,CAAC;CACD;AAID,MAAM,UAAU,GAAG,CAAsB,iBAA6B;IACrE,OAAO,CAAC,OAAO,iBAAiB,KAAK,QAAQ,CAAC;QAC7C,CAAC,CAAC,OAAO,CAAC,QAAQ,EAAE,iBAAiB,CAAM;QAC3C,CAAC,CAAC,IAAI,GAAG,CAAC,iBAAiB,CAAC,CAAA;AAC9B,CAAC;AAED,MAAM,GAAG,GAAG,IAAI,GAAG,CAAC,QAAQ,CAAC,CAAA;AAC7B,GAAG,CAAC,EAAE,GAAG,GAAG,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;AACzB,GAAG,CAAC,OAAO,GAAG,GAAG,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;AACnC,GAAG,CAAC,KAAK,GAAG,GAAG,CAAC,KAAK,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;AAC/B,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;AAE3B,GAAG,CAAC,KAAK,GAAG,KAAK,CAAA;AACjB,GAAG,CAAC,QAAQ,GAAG,QAAQ,CAAA;AACvB,GAAG,CAAC,MAAM,GAAG,CAAC,SAAqB,EAAE,GAAG,OAAkB,EAAE,EAAE;IAC7D,OAAO,MAAM,CAAC,OAAO,EAAE,SAAS,CAAC,CAAA;AAClC,CAAC,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"dashify.js","sourceRoot":"","sources":["../../../s/dom/parts/dashify.ts"],"names":[],"mappings":"AACA;;;;;GAKG;AACH,MAAM,UAAU,OAAO,CAAC,KAAa;IACpC,OAAO,KAAK,CAAC,OAAO,CAAC,sBAAsB,EAAE,KAAK,CAAC,CAAC,WAAW,EAAE,CAAA;AAClE,CAAC"}
|
|
@@ -1,8 +1,4 @@
|
|
|
1
|
-
import { HTMLElementClasses } from "
|
|
2
|
-
export type RegistrationOptions = {
|
|
3
|
-
soft: boolean;
|
|
4
|
-
upgrade: boolean;
|
|
5
|
-
};
|
|
1
|
+
import { HTMLElementClasses, RegisterOptions } from "../types.js";
|
|
6
2
|
/**
|
|
7
3
|
* register custom elements (web components) to the dom
|
|
8
4
|
* - takes an object full of custom html elements, and automatically dashes the names
|
|
@@ -15,4 +11,4 @@ export type RegistrationOptions = {
|
|
|
15
11
|
* - `true` (default) will run `customElements.upgrade` where appropriate
|
|
16
12
|
* - `false` will NOT upgrade any existing elements on the page
|
|
17
13
|
*/
|
|
18
|
-
export declare function register<E extends HTMLElementClasses>(elements: E, options?: Partial<
|
|
14
|
+
export declare function register<E extends HTMLElementClasses>(elements: E, options?: Partial<RegisterOptions>): void;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"register.js","sourceRoot":"","sources":["../../../s/dom/parts/register.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,OAAO,EAAC,MAAM,cAAc,CAAA;AAGpC;;;;;;;;;;;GAWG;AACH,MAAM,UAAU,QAAQ,CACtB,QAAW,EACX,UAAoC,EAAE;IAGvC,MAAM,EACL,IAAI,GAAG,KAAK,EACZ,OAAO,GAAG,IAAI,GACd,GAAG,OAAO,CAAA;IAEX,KAAK,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC;QACxD,MAAM,GAAG,GAAG,OAAO,CAAC,IAAI,CAAC,CAAA;QACzB,MAAM,OAAO,GAAG,cAAc,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;QAEvC,IAAI,IAAI,IAAI,OAAO;YAClB,SAAQ;QAET,cAAc,CAAC,MAAM,CAAC,GAAG,EAAE,OAAO,CAAC,CAAA;QAEnC,IAAI,OAAO;YACV,QAAQ,CAAC,gBAAgB,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE;gBAChD,IAAI,OAAO,CAAC,WAAW,KAAK,WAAW;oBACtC,cAAc,CAAC,OAAO,CAAC,OAAO,CAAC,CAAA;YACjC,CAAC,CAAC,CAAA;IACJ,CAAC;AACF,CAAC"}
|
package/x/dom/types.d.ts
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
|
+
import { attrs } from "./attrs/attrs.js";
|
|
2
|
+
export type AttrKind = (typeof String | typeof Number | typeof Boolean);
|
|
3
|
+
export type AttrType<H extends AttrKind> = (H extends typeof String ? string | undefined : H extends typeof Number ? number | undefined : H extends typeof Boolean ? boolean : never);
|
|
4
|
+
export type AttrSpec = {
|
|
5
|
+
[key: string]: AttrKind;
|
|
6
|
+
};
|
|
7
|
+
export type AttrTypes<A extends AttrSpec> = {
|
|
8
|
+
[P in keyof A]: AttrType<A[P]>;
|
|
9
|
+
};
|
|
10
|
+
export type Attrs = ReturnType<typeof attrs>;
|
|
1
11
|
export type HTMLElementClasses = {
|
|
2
12
|
[key: string]: {
|
|
3
13
|
new (...args: any[]): HTMLElement;
|
|
4
14
|
};
|
|
5
15
|
};
|
|
16
|
+
export type RegisterOptions = {
|
|
17
|
+
soft: boolean;
|
|
18
|
+
upgrade: boolean;
|
|
19
|
+
};
|
package/x/index.d.ts
CHANGED
|
@@ -1,15 +1,16 @@
|
|
|
1
|
-
export * from "./dom/dashify.js";
|
|
2
|
-
export * from "./dom/dollar.js";
|
|
3
|
-
export * from "./dom/register.js";
|
|
4
1
|
export * from "./dom/types.js";
|
|
2
|
+
export * from "./dom/dom.js";
|
|
5
3
|
export * from "./ops/loaders/make-loader.js";
|
|
6
4
|
export * from "./ops/loaders/parts/ascii-anim.js";
|
|
7
5
|
export * from "./ops/loaders/parts/error-display.js";
|
|
8
6
|
export * from "./ops/op.js";
|
|
9
7
|
export * from "./ops/podium.js";
|
|
10
8
|
export * from "./ops/types.js";
|
|
11
|
-
export * from "./
|
|
12
|
-
export * from "./
|
|
13
|
-
export * from "./
|
|
14
|
-
export * from "./
|
|
15
|
-
export * from "./
|
|
9
|
+
export * as loot from "./loot/index.js";
|
|
10
|
+
export * from "./ui/base/css-reset.js";
|
|
11
|
+
export * from "./ui/base/use.js";
|
|
12
|
+
export * from "./ui/view/parts/chain.js";
|
|
13
|
+
export * from "./ui/view/parts/sly-view.js";
|
|
14
|
+
export * from "./ui/base-element.js";
|
|
15
|
+
export * from "./ui/types.js";
|
|
16
|
+
export * from "./ui/view.js";
|
package/x/index.html
CHANGED
|
@@ -111,7 +111,7 @@ body {
|
|
|
111
111
|
}
|
|
112
112
|
|
|
113
113
|
</style>
|
|
114
|
-
<script type=module src="demo/demo.bundle.min.js?v=
|
|
114
|
+
<script type=module src="demo/demo.bundle.min.js?v=4f35755ea37b"></script>
|
|
115
115
|
<link rel="icon" href="assets/favicon.png?v=4dc161ed79b3"/>
|
|
116
116
|
|
|
117
117
|
<meta name="theme-color" content="#95ff7b">
|
|
@@ -131,9 +131,11 @@ body {
|
|
|
131
131
|
<img class=icon alt="" src="/assets/favicon.png"/>
|
|
132
132
|
<h1>sly testing page</h1>
|
|
133
133
|
<p><a href="https://github.com/e280/sly">github.com/e280/sly</a></p>
|
|
134
|
-
<p class=lil>v0.2.0-
|
|
135
|
-
|
|
136
|
-
<
|
|
134
|
+
<p class=lil>v0.2.0-10</p>
|
|
135
|
+
|
|
136
|
+
<fastcount-element></fastcount-element>
|
|
137
|
+
<counter-component start=280 step=2>component</counter-component>
|
|
138
|
+
<demo-component></demo-component>
|
|
137
139
|
|
|
138
140
|
</body>
|
|
139
141
|
</html>
|
package/x/index.html.js
CHANGED
|
@@ -24,8 +24,10 @@ export default ssg.page(import.meta.url, async (orb) => ({
|
|
|
24
24
|
<h1>sly testing page</h1>
|
|
25
25
|
<p><a href="https://github.com/e280/sly">github.com/e280/sly</a></p>
|
|
26
26
|
<p class=lil>v${orb.packageVersion()}</p>
|
|
27
|
-
|
|
28
|
-
<
|
|
27
|
+
|
|
28
|
+
<fastcount-element></fastcount-element>
|
|
29
|
+
<counter-component start=280 step=2>component</counter-component>
|
|
30
|
+
<demo-component></demo-component>
|
|
29
31
|
`,
|
|
30
32
|
}));
|
|
31
33
|
//# sourceMappingURL=index.html.js.map
|
package/x/index.html.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.html.js","sourceRoot":"","sources":["../s/index.html.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,aAAa,CAAA;AAErC,MAAM,KAAK,GAAG,KAAK,CAAA;AACnB,MAAM,WAAW,GAAG,0BAA0B,CAAA;AAC9C,MAAM,MAAM,GAAG,cAAc,CAAA;AAC7B,MAAM,OAAO,GAAG,qBAAqB,CAAA;AAErC,eAAe,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,GAAG,EAAC,EAAE,CAAC,CAAC;IACtD,KAAK;IACL,EAAE,EAAE,yBAAyB;IAC7B,GAAG,EAAE,eAAe;IACpB,OAAO;IACP,IAAI,EAAE,IAAI;IACV,UAAU,EAAE;QACX,UAAU,EAAE,SAAS;QACrB,KAAK;QACL,WAAW;QACX,QAAQ,EAAE,WAAW;QACrB,KAAK,EAAE,UAAU,GAAG,MAAM,GAAG,OAAO;KACpC;IAED,IAAI,EAAE,IAAI,CAAA;;EAET;IAED,IAAI,EAAE,IAAI,CAAA;;;;kBAIO,GAAG,CAAC,cAAc,EAAE
|
|
1
|
+
{"version":3,"file":"index.html.js","sourceRoot":"","sources":["../s/index.html.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,aAAa,CAAA;AAErC,MAAM,KAAK,GAAG,KAAK,CAAA;AACnB,MAAM,WAAW,GAAG,0BAA0B,CAAA;AAC9C,MAAM,MAAM,GAAG,cAAc,CAAA;AAC7B,MAAM,OAAO,GAAG,qBAAqB,CAAA;AAErC,eAAe,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,KAAK,EAAC,GAAG,EAAC,EAAE,CAAC,CAAC;IACtD,KAAK;IACL,EAAE,EAAE,yBAAyB;IAC7B,GAAG,EAAE,eAAe;IACpB,OAAO;IACP,IAAI,EAAE,IAAI;IACV,UAAU,EAAE;QACX,UAAU,EAAE,SAAS;QACrB,KAAK;QACL,WAAW;QACX,QAAQ,EAAE,WAAW;QACrB,KAAK,EAAE,UAAU,GAAG,MAAM,GAAG,OAAO;KACpC;IAED,IAAI,EAAE,IAAI,CAAA;;EAET;IAED,IAAI,EAAE,IAAI,CAAA;;;;kBAIO,GAAG,CAAC,cAAc,EAAE;;;;;EAKpC;CACD,CAAC,CAAC,CAAA"}
|
package/x/index.js
CHANGED
|
@@ -1,16 +1,17 @@
|
|
|
1
|
-
export * from "./dom/dashify.js";
|
|
2
|
-
export * from "./dom/dollar.js";
|
|
3
|
-
export * from "./dom/register.js";
|
|
4
1
|
export * from "./dom/types.js";
|
|
2
|
+
export * from "./dom/dom.js";
|
|
5
3
|
export * from "./ops/loaders/make-loader.js";
|
|
6
4
|
export * from "./ops/loaders/parts/ascii-anim.js";
|
|
7
5
|
export * from "./ops/loaders/parts/error-display.js";
|
|
8
6
|
export * from "./ops/op.js";
|
|
9
7
|
export * from "./ops/podium.js";
|
|
10
8
|
export * from "./ops/types.js";
|
|
11
|
-
export * from "./
|
|
12
|
-
export * from "./
|
|
13
|
-
export * from "./
|
|
14
|
-
export * from "./
|
|
15
|
-
export * from "./
|
|
9
|
+
export * as loot from "./loot/index.js";
|
|
10
|
+
export * from "./ui/base/css-reset.js";
|
|
11
|
+
export * from "./ui/base/use.js";
|
|
12
|
+
export * from "./ui/view/parts/chain.js";
|
|
13
|
+
export * from "./ui/view/parts/sly-view.js";
|
|
14
|
+
export * from "./ui/base-element.js";
|
|
15
|
+
export * from "./ui/types.js";
|
|
16
|
+
export * from "./ui/view.js";
|
|
16
17
|
//# sourceMappingURL=index.js.map
|
package/x/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../s/index.ts"],"names":[],"mappings":"AACA,cAAc,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../s/index.ts"],"names":[],"mappings":"AACA,cAAc,gBAAgB,CAAA;AAC9B,cAAc,cAAc,CAAA;AAE5B,cAAc,8BAA8B,CAAA;AAC5C,cAAc,mCAAmC,CAAA;AACjD,cAAc,sCAAsC,CAAA;AACpD,cAAc,aAAa,CAAA;AAC3B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,gBAAgB,CAAA;AAE9B,OAAO,KAAK,IAAI,MAAM,iBAAiB,CAAA;AAEvC,cAAc,wBAAwB,CAAA;AACtC,cAAc,kBAAkB,CAAA;AAChC,cAAc,0BAA0B,CAAA;AACxC,cAAc,6BAA6B,CAAA;AAC3C,cAAc,sBAAsB,CAAA;AACpC,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA"}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { Drops } from "./drops.js";
|
|
2
|
+
/** respond to user dragging-and-dropping things around on a webpage */
|
|
3
|
+
export declare class DragAndDrops<Draggy, Droppy> {
|
|
4
|
+
private params;
|
|
5
|
+
/** what is currently being dragged */
|
|
6
|
+
$draggy: import("@e280/strata").SignalFn<Draggy | undefined>;
|
|
7
|
+
/** what dropzone are we curently hovering over */
|
|
8
|
+
$droppy: import("@e280/strata").SignalFn<Droppy | undefined>;
|
|
9
|
+
constructor(params: {
|
|
10
|
+
/** accept a dropped item that was declared within this system */
|
|
11
|
+
acceptDrop: (event: DragEvent, draggy: Draggy, droppy: Droppy) => void;
|
|
12
|
+
/** also accept drops on the side */
|
|
13
|
+
backchannelDrops?: Drops;
|
|
14
|
+
});
|
|
15
|
+
get dragging(): Draggy | undefined;
|
|
16
|
+
get hovering(): Droppy | undefined;
|
|
17
|
+
/** make event listeners to attach to your dragzone(s) */
|
|
18
|
+
dragzone: (getDraggy: () => Draggy) => {
|
|
19
|
+
draggable: string;
|
|
20
|
+
dragstart: (_: DragEvent) => void;
|
|
21
|
+
dragend: (_: DragEvent) => void;
|
|
22
|
+
};
|
|
23
|
+
/** make event listeners to attach to your dropzones(s) */
|
|
24
|
+
dropzone: (getDroppy: () => Droppy) => {
|
|
25
|
+
dragenter: (_: DragEvent) => void;
|
|
26
|
+
dragover: (event: DragEvent) => void;
|
|
27
|
+
dragleave: (event: DragEvent) => void;
|
|
28
|
+
drop: (event: DragEvent) => void;
|
|
29
|
+
};
|
|
30
|
+
}
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
import { signal } from "@e280/strata";
|
|
2
|
+
import { outsideCurrentTarget } from "./helpers.js";
|
|
3
|
+
/** respond to user dragging-and-dropping things around on a webpage */
|
|
4
|
+
export class DragAndDrops {
|
|
5
|
+
params;
|
|
6
|
+
/** what is currently being dragged */
|
|
7
|
+
$draggy = signal(undefined);
|
|
8
|
+
/** what dropzone are we curently hovering over */
|
|
9
|
+
$droppy = signal(undefined);
|
|
10
|
+
constructor(params) {
|
|
11
|
+
this.params = params;
|
|
12
|
+
}
|
|
13
|
+
get dragging() {
|
|
14
|
+
return this.$draggy();
|
|
15
|
+
}
|
|
16
|
+
get hovering() {
|
|
17
|
+
return this.$droppy();
|
|
18
|
+
}
|
|
19
|
+
/** make event listeners to attach to your dragzone(s) */
|
|
20
|
+
dragzone = (getDraggy) => ({
|
|
21
|
+
draggable: "true",
|
|
22
|
+
dragstart: (_) => {
|
|
23
|
+
this.$draggy.value = getDraggy();
|
|
24
|
+
},
|
|
25
|
+
dragend: (_) => {
|
|
26
|
+
this.$draggy.value = undefined;
|
|
27
|
+
this.$droppy.value = undefined;
|
|
28
|
+
},
|
|
29
|
+
});
|
|
30
|
+
/** make event listeners to attach to your dropzones(s) */
|
|
31
|
+
dropzone = (getDroppy) => ({
|
|
32
|
+
dragenter: (_) => { },
|
|
33
|
+
dragover: (event) => {
|
|
34
|
+
event.preventDefault();
|
|
35
|
+
if (this.$draggy())
|
|
36
|
+
this.$droppy.value = getDroppy();
|
|
37
|
+
else
|
|
38
|
+
this.params.backchannelDrops?.dragover(event);
|
|
39
|
+
},
|
|
40
|
+
dragleave: (event) => {
|
|
41
|
+
if (outsideCurrentTarget(event))
|
|
42
|
+
this.$droppy.value = undefined;
|
|
43
|
+
this.params.backchannelDrops?.dragleave(event);
|
|
44
|
+
},
|
|
45
|
+
drop: (event) => {
|
|
46
|
+
event.preventDefault();
|
|
47
|
+
const { acceptDrop } = this.params;
|
|
48
|
+
const draggy = this.$draggy();
|
|
49
|
+
const droppy = this.$droppy();
|
|
50
|
+
try {
|
|
51
|
+
if (draggy && droppy)
|
|
52
|
+
acceptDrop(event, draggy, droppy);
|
|
53
|
+
else
|
|
54
|
+
this.params.backchannelDrops?.drop(event);
|
|
55
|
+
}
|
|
56
|
+
finally {
|
|
57
|
+
this.$draggy.value = undefined;
|
|
58
|
+
this.$droppy.value = undefined;
|
|
59
|
+
}
|
|
60
|
+
},
|
|
61
|
+
});
|
|
62
|
+
}
|
|
63
|
+
//# sourceMappingURL=drag-and-drops.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"drag-and-drops.js","sourceRoot":"","sources":["../../s/loot/drag-and-drops.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,MAAM,EAAC,MAAM,cAAc,CAAA;AAEnC,OAAO,EAAC,oBAAoB,EAAC,MAAM,cAAc,CAAA;AAEjD,uEAAuE;AACvE,MAAM,OAAO,YAAY;IAQJ;IANpB,sCAAsC;IACtC,OAAO,GAAG,MAAM,CAAqB,SAAS,CAAC,CAAA;IAE/C,kDAAkD;IAClD,OAAO,GAAG,MAAM,CAAqB,SAAS,CAAC,CAAA;IAE/C,YAAoB,MAOnB;QAPmB,WAAM,GAAN,MAAM,CAOzB;IAAG,CAAC;IAEL,IAAI,QAAQ;QACX,OAAO,IAAI,CAAC,OAAO,EAAE,CAAA;IACtB,CAAC;IAED,IAAI,QAAQ;QACX,OAAO,IAAI,CAAC,OAAO,EAAE,CAAA;IACtB,CAAC;IAED,yDAAyD;IACzD,QAAQ,GAAG,CAAC,SAAuB,EAAE,EAAE,CAAC,CAAC;QACxC,SAAS,EAAE,MAAM;QAEjB,SAAS,EAAE,CAAC,CAAY,EAAE,EAAE;YAC3B,IAAI,CAAC,OAAO,CAAC,KAAK,GAAG,SAAS,EAAE,CAAA;QACjC,CAAC;QAED,OAAO,EAAE,CAAC,CAAY,EAAE,EAAE;YACzB,IAAI,CAAC,OAAO,CAAC,KAAK,GAAG,SAAS,CAAA;YAC9B,IAAI,CAAC,OAAO,CAAC,KAAK,GAAG,SAAS,CAAA;QAC/B,CAAC;KACD,CAAC,CAAA;IAEF,0DAA0D;IAC1D,QAAQ,GAAG,CAAC,SAAuB,EAAE,EAAE,CAAC,CAAC;QACxC,SAAS,EAAE,CAAC,CAAY,EAAE,EAAE,GAAE,CAAC;QAE/B,QAAQ,EAAE,CAAC,KAAgB,EAAE,EAAE;YAC9B,KAAK,CAAC,cAAc,EAAE,CAAA;YACtB,IAAI,IAAI,CAAC,OAAO,EAAE;gBACjB,IAAI,CAAC,OAAO,CAAC,KAAK,GAAG,SAAS,EAAE,CAAA;;gBAEhC,IAAI,CAAC,MAAM,CAAC,gBAAgB,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAA;QAC/C,CAAC;QAED,SAAS,EAAE,CAAC,KAAgB,EAAE,EAAE;YAC/B,IAAI,oBAAoB,CAAC,KAAK,CAAC;gBAC9B,IAAI,CAAC,OAAO,CAAC,KAAK,GAAG,SAAS,CAAA;YAC/B,IAAI,CAAC,MAAM,CAAC,gBAAgB,EAAE,SAAS,CAAC,KAAK,CAAC,CAAA;QAC/C,CAAC;QAED,IAAI,EAAE,CAAC,KAAgB,EAAE,EAAE;YAC1B,KAAK,CAAC,cAAc,EAAE,CAAA;YACtB,MAAM,EAAC,UAAU,EAAC,GAAG,IAAI,CAAC,MAAM,CAAA;YAChC,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,EAAE,CAAA;YAC7B,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,EAAE,CAAA;YAC7B,IAAI,CAAC;gBACJ,IAAI,MAAM,IAAI,MAAM;oBACnB,UAAU,CAAC,KAAK,EAAE,MAAM,EAAE,MAAM,CAAC,CAAA;;oBAEjC,IAAI,CAAC,MAAM,CAAC,gBAAgB,EAAE,IAAI,CAAC,KAAK,CAAC,CAAA;YAC3C,CAAC;oBACO,CAAC;gBACR,IAAI,CAAC,OAAO,CAAC,KAAK,GAAG,SAAS,CAAA;gBAC9B,IAAI,CAAC,OAAO,CAAC,KAAK,GAAG,SAAS,CAAA;YAC/B,CAAC;QACF,CAAC;KACD,CAAC,CAAA;CACF"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
/** dropzone that accepts user-dropped stuff like files */
|
|
2
|
+
export declare class Drops {
|
|
3
|
+
private params;
|
|
4
|
+
$indicator: import("@e280/strata").SignalFn<boolean>;
|
|
5
|
+
constructor(params: {
|
|
6
|
+
/** whether or not the dragged item is acceptable for a drop */
|
|
7
|
+
predicate: (event: DragEvent) => boolean;
|
|
8
|
+
/** fn to handle the drop of an acceptable item */
|
|
9
|
+
acceptDrop: (event: DragEvent) => void;
|
|
10
|
+
});
|
|
11
|
+
dragover: (event: DragEvent) => void;
|
|
12
|
+
dragleave: (event: DragEvent) => void;
|
|
13
|
+
drop: (event: DragEvent) => void;
|
|
14
|
+
}
|
package/x/loot/drops.js
ADDED
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { signal } from "@e280/strata";
|
|
2
|
+
import { outsideCurrentTarget } from "./helpers.js";
|
|
3
|
+
/** dropzone that accepts user-dropped stuff like files */
|
|
4
|
+
export class Drops {
|
|
5
|
+
params;
|
|
6
|
+
$indicator = signal(false);
|
|
7
|
+
constructor(params) {
|
|
8
|
+
this.params = params;
|
|
9
|
+
}
|
|
10
|
+
dragover = (event) => {
|
|
11
|
+
event.preventDefault();
|
|
12
|
+
this.$indicator.value = this.params.predicate(event);
|
|
13
|
+
};
|
|
14
|
+
dragleave = (event) => {
|
|
15
|
+
if (outsideCurrentTarget(event))
|
|
16
|
+
this.$indicator.value = false;
|
|
17
|
+
};
|
|
18
|
+
drop = (event) => {
|
|
19
|
+
event.preventDefault();
|
|
20
|
+
this.$indicator.value = false;
|
|
21
|
+
if (this.params.predicate(event))
|
|
22
|
+
this.params.acceptDrop(event);
|
|
23
|
+
};
|
|
24
|
+
}
|
|
25
|
+
//# sourceMappingURL=drops.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"drops.js","sourceRoot":"","sources":["../../s/loot/drops.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,MAAM,EAAC,MAAM,cAAc,CAAA;AACnC,OAAO,EAAC,oBAAoB,EAAC,MAAM,cAAc,CAAA;AAEjD,0DAA0D;AAC1D,MAAM,OAAO,KAAK;IAGG;IAFpB,UAAU,GAAG,MAAM,CAAC,KAAK,CAAC,CAAA;IAE1B,YAAoB,MAOnB;QAPmB,WAAM,GAAN,MAAM,CAOzB;IAAG,CAAC;IAEL,QAAQ,GAAG,CAAC,KAAgB,EAAE,EAAE;QAC/B,KAAK,CAAC,cAAc,EAAE,CAAA;QACtB,IAAI,CAAC,UAAU,CAAC,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC,CAAA;IACrD,CAAC,CAAA;IAED,SAAS,GAAG,CAAC,KAAgB,EAAE,EAAE;QAChC,IAAI,oBAAoB,CAAC,KAAK,CAAC;YAC9B,IAAI,CAAC,UAAU,CAAC,KAAK,GAAG,KAAK,CAAA;IAC/B,CAAC,CAAA;IAED,IAAI,GAAG,CAAC,KAAgB,EAAE,EAAE;QAC3B,KAAK,CAAC,cAAc,EAAE,CAAA;QACtB,IAAI,CAAC,UAAU,CAAC,KAAK,GAAG,KAAK,CAAA;QAC7B,IAAI,IAAI,CAAC,MAAM,CAAC,SAAS,CAAC,KAAK,CAAC;YAC/B,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAA;IAC/B,CAAC,CAAA;CACD"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
export function hasFiles(event) {
|
|
2
|
+
return !!(event.dataTransfer &&
|
|
3
|
+
event.dataTransfer.types.includes("Files"));
|
|
4
|
+
}
|
|
5
|
+
export function files(event) {
|
|
6
|
+
return event.dataTransfer
|
|
7
|
+
? Array.from(event.dataTransfer.files)
|
|
8
|
+
: [];
|
|
9
|
+
}
|
|
10
|
+
export function outsideCurrentTarget(event) {
|
|
11
|
+
const isCursorOutsideViewport = !event.relatedTarget || (event.clientX === 0 &&
|
|
12
|
+
event.clientY === 0);
|
|
13
|
+
if (isCursorOutsideViewport)
|
|
14
|
+
return true;
|
|
15
|
+
const rect = event.currentTarget.getBoundingClientRect();
|
|
16
|
+
const withinX = event.clientX >= rect.left && event.clientX <= rect.right;
|
|
17
|
+
const withinY = event.clientY >= rect.top && event.clientY <= rect.bottom;
|
|
18
|
+
const cursorOutsideCurrentTarget = !(withinX && withinY);
|
|
19
|
+
return cursorOutsideCurrentTarget;
|
|
20
|
+
}
|
|
21
|
+
//# sourceMappingURL=helpers.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"helpers.js","sourceRoot":"","sources":["../../s/loot/helpers.ts"],"names":[],"mappings":"AACA,MAAM,UAAU,QAAQ,CAAC,KAAgB;IACxC,OAAO,CAAC,CAAC,CACR,KAAK,CAAC,YAAY;QAClB,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,CAC1C,CAAA;AACF,CAAC;AAED,MAAM,UAAU,KAAK,CAAC,KAAgB;IACrC,OAAO,KAAK,CAAC,YAAY;QACxB,CAAC,CAAC,KAAK,CAAC,IAAI,CAAC,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC;QACtC,CAAC,CAAC,EAAE,CAAA;AACN,CAAC;AAED,MAAM,UAAU,oBAAoB,CAAC,KAAgB;IACpD,MAAM,uBAAuB,GAAG,CAAC,KAAK,CAAC,aAAa,IAAI,CACvD,KAAK,CAAC,OAAO,KAAK,CAAC;QACnB,KAAK,CAAC,OAAO,KAAK,CAAC,CACnB,CAAA;IAED,IAAI,uBAAuB;QAC1B,OAAO,IAAI,CAAA;IAEZ,MAAM,IAAI,GAAI,KAAK,CAAC,aAAqB,CAAC,qBAAqB,EAAE,CAAA;IACjE,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI,IAAI,KAAK,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,CAAA;IACzE,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,IAAI,IAAI,CAAC,GAAG,IAAI,KAAK,CAAC,OAAO,IAAI,IAAI,CAAC,MAAM,CAAA;IACzE,MAAM,0BAA0B,GAAG,CAAC,CAAC,OAAO,IAAI,OAAO,CAAC,CAAA;IAExD,OAAO,0BAA0B,CAAA;AAClC,CAAC"}
|
package/x/loot/index.js
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../s/loot/index.ts"],"names":[],"mappings":"AACA,cAAc,qBAAqB,CAAA;AACnC,cAAc,YAAY,CAAA;AAC1B,cAAc,cAAc,CAAA"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { Op } from "../op.js";
|
|
2
|
-
import { Content } from "../../
|
|
2
|
+
import { Content } from "../../ui/types.js";
|
|
3
3
|
export * as anims from "./parts/anims.js";
|
|
4
4
|
export type Loader = <V>(op: Op<V>, ready: (value: V) => Content) => Content;
|
|
5
5
|
export declare function makeLoader(loading?: () => Content, error?: (error: any) => Content): Loader;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { earth } from "./parts/anims.js";
|
|
2
2
|
import { ErrorDisplay } from "./parts/error-display.js";
|
|
3
3
|
export * as anims from "./parts/anims.js";
|
|
4
|
-
export function makeLoader(loading =
|
|
4
|
+
export function makeLoader(loading = earth, error = (error) => ErrorDisplay(error)) {
|
|
5
5
|
return (op, ready) => op.select({ loading, ready, error });
|
|
6
6
|
}
|
|
7
7
|
//# sourceMappingURL=make-loader.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"make-loader.js","sourceRoot":"","sources":["../../../s/ops/loaders/make-loader.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,
|
|
1
|
+
{"version":3,"file":"make-loader.js","sourceRoot":"","sources":["../../../s/ops/loaders/make-loader.ts"],"names":[],"mappings":"AAEA,OAAO,EAAC,KAAK,EAAC,MAAM,kBAAkB,CAAA;AAEtC,OAAO,EAAC,YAAY,EAAC,MAAM,0BAA0B,CAAA;AAErD,OAAO,KAAK,KAAK,MAAM,kBAAkB,CAAA;AAIzC,MAAM,UAAU,UAAU,CACxB,UAAyB,KAAK,EAC9B,QAAiC,CAAC,KAAU,EAAE,EAAE,CAAC,YAAY,CAAC,KAAK,CAAC;IAGrE,OAAO,CAAC,EAAE,EAAE,KAAK,EAAE,EAAE,CAAC,EAAE,CAAC,MAAM,CAAC,EAAC,OAAO,EAAE,KAAK,EAAE,KAAK,EAAC,CAAC,CAAA;AACzD,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
|
-
import { Content } from "../../../
|
|
1
|
+
import { Content } from "../../../ui/types.js";
|
|
2
2
|
export declare function makeAsciiAnim(hz: number, frames: string[]): () => Content;
|
|
3
|
-
export declare const AsciiAnim: import("../../../
|
|
3
|
+
export declare const AsciiAnim: import("../../../ui/types.js").View<[{
|
|
4
4
|
hz: number;
|
|
5
5
|
frames: string[];
|
|
6
6
|
}]>;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { css } from "lit";
|
|
2
2
|
import { nap, repeat } from "@e280/stz";
|
|
3
|
-
import { view } from "../../../
|
|
4
|
-
import { cssReset } from "../../../
|
|
3
|
+
import { view } from "../../../ui/view.js";
|
|
4
|
+
import { cssReset } from "../../../ui/base/css-reset.js";
|
|
5
5
|
export function makeAsciiAnim(hz, frames) {
|
|
6
6
|
return () => AsciiAnim({ hz, frames });
|
|
7
7
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ascii-anim.js","sourceRoot":"","sources":["../../../../s/ops/loaders/parts/ascii-anim.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAA;AACvB,OAAO,EAAC,GAAG,EAAE,MAAM,EAAC,MAAM,WAAW,CAAA;AAErC,OAAO,EAAC,IAAI,EAAC,MAAM,
|
|
1
|
+
{"version":3,"file":"ascii-anim.js","sourceRoot":"","sources":["../../../../s/ops/loaders/parts/ascii-anim.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAA;AACvB,OAAO,EAAC,GAAG,EAAE,MAAM,EAAC,MAAM,WAAW,CAAA;AAErC,OAAO,EAAC,IAAI,EAAC,MAAM,qBAAqB,CAAA;AAExC,OAAO,EAAC,QAAQ,EAAC,MAAM,+BAA+B,CAAA;AAEtD,MAAM,UAAU,aAAa,CAAC,EAAU,EAAE,MAAgB;IACzD,OAAO,GAAG,EAAE,CAAC,SAAS,CAAC,EAAC,EAAE,EAAE,MAAM,EAAC,CAAC,CAAA;AACrC,CAAC;AAED,MAAM,CAAC,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,EAAC,EAAE,EAAE,MAAM,EAG/C,EAAE,EAAE;IAEL,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;IACnB,GAAG,CAAC,MAAM,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAA;IAC3B,MAAM,KAAK,GAAG,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,CAAA;IAE3B,GAAG,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,IAAG,EAAE;QAChC,MAAM,GAAG,CAAC,IAAI,GAAG,EAAE,CAAC,CAAA;QACpB,MAAM,IAAI,GAAG,KAAK,CAAC,GAAG,EAAE,GAAG,CAAC,CAAA;QAC5B,KAAK,CAAC,GAAG,CAAC,IAAI,IAAI,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,CAAA;IAC5C,CAAC,CAAC,CAAC,CAAA;IAEH,OAAO,MAAM,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,CAAA;AAC9B,CAAC,CAAC,CAAA;AAEF,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;;CAMhB,CAAA"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { css, html } from "lit";
|
|
2
|
-
import { view } from "../../../
|
|
3
|
-
import { cssReset } from "../../../
|
|
2
|
+
import { view } from "../../../ui/view.js";
|
|
3
|
+
import { cssReset } from "../../../ui/base/css-reset.js";
|
|
4
4
|
export const ErrorDisplay = view(use => (error) => {
|
|
5
5
|
use.name("error");
|
|
6
6
|
use.styles(cssReset, style);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"error-display.js","sourceRoot":"","sources":["../../../../s/ops/loaders/parts/error-display.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,KAAK,CAAA;AAC7B,OAAO,EAAC,IAAI,EAAC,MAAM,
|
|
1
|
+
{"version":3,"file":"error-display.js","sourceRoot":"","sources":["../../../../s/ops/loaders/parts/error-display.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,GAAG,EAAE,IAAI,EAAC,MAAM,KAAK,CAAA;AAC7B,OAAO,EAAC,IAAI,EAAC,MAAM,qBAAqB,CAAA;AACxC,OAAO,EAAC,QAAQ,EAAC,MAAM,+BAA+B,CAAA;AAEtD,MAAM,CAAC,MAAM,YAAY,GAAG,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC,KAAU,EAAE,EAAE;IACtD,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC,CAAA;IACjB,GAAG,CAAC,MAAM,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAA;IAE3B,IAAI,OAAO,KAAK,KAAK,QAAQ;QAC5B,OAAO,KAAK,CAAA;SAER,IAAI,KAAK,YAAY,KAAK;QAC9B,OAAO,IAAI,CAAA,WAAW,KAAK,CAAC,IAAI,oBAAoB,KAAK,CAAC,OAAO,SAAS,CAAA;;QAG1E,OAAO,OAAO,CAAA;AAChB,CAAC,CAAC,CAAA;AAEF,MAAM,KAAK,GAAG,GAAG,CAAA;;;;;CAKhB,CAAA"}
|