intable 0.0.3 → 0.0.4

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 (42) hide show
  1. package/README.md +2 -1
  2. package/dist/__uno.css +1 -1
  3. package/dist/chevron-right.js +3 -5
  4. package/dist/components/Columns.js +50 -84
  5. package/dist/components/DocTree.js +21 -29
  6. package/dist/components/Menu.js +81 -105
  7. package/dist/components/Popover.js +23 -31
  8. package/dist/components/Render.js +10 -11
  9. package/dist/components/Split.js +34 -46
  10. package/dist/components/Tree.js +38 -57
  11. package/dist/components/utils.js +4 -6
  12. package/dist/hooks/index.js +91 -128
  13. package/dist/hooks/useDir.js +22 -39
  14. package/dist/hooks/useSort.js +47 -70
  15. package/dist/hooks/useVirtualizer.js +43 -68
  16. package/dist/index.js +158 -213
  17. package/dist/loading.js +3 -5
  18. package/dist/plugins/CellMergePlugin.d.ts +0 -2
  19. package/dist/plugins/CellSelectionPlugin.js +77 -117
  20. package/dist/plugins/CommandPlugin.js +3 -6
  21. package/dist/plugins/CopyPastePlugin.js +24 -37
  22. package/dist/plugins/DiffPlugin.js +33 -45
  23. package/dist/plugins/DragPlugin.d.ts +2 -2
  24. package/dist/plugins/DragPlugin.js +29 -45
  25. package/dist/plugins/EditablePlugin.js +88 -139
  26. package/dist/plugins/ExpandPlugin.js +26 -30
  27. package/dist/plugins/HistoryPlugin.js +16 -21
  28. package/dist/plugins/MenuPlugin.js +51 -76
  29. package/dist/plugins/RenderPlugin/components.js +45 -63
  30. package/dist/plugins/RenderPlugin/index.js +29 -42
  31. package/dist/plugins/ResizePlugin.js +44 -80
  32. package/dist/plugins/RowGroupPlugin.js +57 -73
  33. package/dist/plugins/RowSelectionPlugin.js +31 -42
  34. package/dist/plugins/VirtualScrollPlugin.js +54 -79
  35. package/dist/plus.js +3 -5
  36. package/dist/style.css +2 -192
  37. package/dist/utils.js +44 -65
  38. package/dist/wc.js +11 -11
  39. package/dist/x.js +3 -5
  40. package/package.json +2 -1
  41. package/dist/plugins/DragColumnPlugin.d.ts +0 -2
  42. package/dist/plugins/DragColumnPlugin.js +0 -4
@@ -2,83 +2,71 @@ import { unFn } from "../utils.js";
2
2
  import { Portal, createComponent, effect, insert, memo, spread, style, template, use } from "solid-js/web";
3
3
  import { For, children, createEffect, mapArray, mergeProps as mergeProps$1, onMount } from "solid-js";
4
4
  import { createElementBounds } from "@solid-primitives/bounds";
5
- var _tmpl$ = /* @__PURE__ */ template(`<div class=relative>`), _tmpl$2 = /* @__PURE__ */ template(`<div class="absolute z-1">`);
6
- const Split = (props) => {
7
- let el;
8
- const child = children(() => props.children);
9
- onMount(() => {
5
+ var _tmpl$ = /* @__PURE__ */ template("<div class=relative>"), _tmpl$2 = /* @__PURE__ */ template("<div class=\"absolute z-1\">");
6
+ const Split = (e) => {
7
+ let d, f = children(() => e.children);
8
+ return onMount(() => {
10
9
  useSplit({
11
- ...props,
12
- container: el,
13
- cells: () => props.cells ? props.cells() : child()
10
+ ...e,
11
+ container: d,
12
+ cells: () => e.cells ? e.cells() : f()
14
13
  });
15
- });
16
- return (() => {
17
- var _el$ = _tmpl$();
18
- var _ref$ = el;
19
- typeof _ref$ === "function" ? use(_ref$, _el$) : el = _el$;
20
- spread(_el$, props, false, true);
21
- insert(_el$, child);
22
- return _el$;
14
+ }), (() => {
15
+ var p = _tmpl$(), m = d;
16
+ return typeof m == "function" ? use(m, p) : d = p, spread(p, e, !1, !0), insert(p, f), p;
23
17
  })();
24
- };
25
- const useSplit = (props) => {
26
- props = mergeProps$1({
18
+ }, useSplit = (h) => {
19
+ h = mergeProps$1({
27
20
  dir: "x",
28
21
  size: 4
29
- }, props);
30
- let el;
31
- const bounds = mapArray(() => props.cells(), (el$1) => createElementBounds(el$1));
32
- const rect = createElementBounds(() => el);
33
- createEffect(() => el.style.position = "absolute");
34
- const style$1 = (e, bool) => props.dir == "x" ? `transform: translate(${(bool ? e.left + e.width : e.left) - props.size / 2}px, ${e.top}px); width: ${props.size}px; height: ${e.height}px;` : `transform: translate(${e.left}px, ${(bool ? e.top + e.height : e.top) - props.size / 2}px); width: ${e.width}px; height: ${props.size}px;`;
35
- const Handle = (e) => (() => {
36
- var _el$2 = _tmpl$2();
37
- insert(_el$2, () => props.handle?.(e.i));
38
- effect((_$p) => style(_el$2, style$1({
22
+ }, h);
23
+ let g, _ = mapArray(() => h.cells(), (e) => createElementBounds(e)), v = createElementBounds(() => g);
24
+ createEffect(() => g.style.position = "absolute");
25
+ let y = (e, d) => h.dir == "x" ? `transform: translate(${(d ? e.left + e.width : e.left) - h.size / 2}px, ${e.top}px); width: ${h.size}px; height: ${e.height}px;` : `transform: translate(${e.left}px, ${(d ? e.top + e.height : e.top) - h.size / 2}px); width: ${e.width}px; height: ${h.size}px;`, b = (e) => (() => {
26
+ var d = _tmpl$2();
27
+ return insert(d, () => h.handle?.(e.i)), effect((f) => style(d, y({
39
28
  ...e.e,
40
- left: e.e.left - rect.left,
41
- top: e.e.top - rect.top
42
- }, e.bool), _$p));
43
- return _el$2;
29
+ left: e.e.left - v.left,
30
+ top: e.e.top - v.top
31
+ }, e.bool), f)), d;
44
32
  })();
45
33
  createComponent(Portal, {
46
- ref(r$) {
47
- var _ref$2 = el;
48
- typeof _ref$2 === "function" ? _ref$2(r$) : el = r$;
34
+ ref(e) {
35
+ var d = g;
36
+ typeof d == "function" ? d(e) : g = e;
49
37
  },
50
38
  get mount() {
51
- return props.container || document.body;
39
+ return h.container || document.body;
52
40
  },
53
41
  get children() {
54
42
  return [
55
43
  createComponent(For, {
56
44
  get each() {
57
- return bounds().slice(0, -1);
45
+ return _().slice(0, -1);
58
46
  },
59
- children: (e, i) => createComponent(Handle, {
47
+ children: (d, p) => createComponent(b, {
60
48
  get e() {
61
- return unFn(e);
49
+ return unFn(d);
62
50
  },
63
51
  bool: 1,
64
52
  get i() {
65
- return unFn(i);
53
+ return unFn(p);
66
54
  }
67
55
  })
68
56
  }),
69
- memo(() => memo(() => !!(!!bounds().length && props.leading))() && createComponent(Handle, {
57
+ memo(() => memo(() => !!(_().length && h.leading))() && createComponent(b, {
70
58
  get e() {
71
- return bounds()[0];
59
+ return _()[0];
72
60
  },
73
61
  i: -1
74
62
  })),
75
- memo(() => memo(() => !!(!!bounds().length && props.trailing))() && createComponent(Handle, {
63
+ memo(() => memo(() => !!(_().length && h.trailing))() && createComponent(b, {
76
64
  get e() {
77
- return bounds()[bounds().length - 1];
65
+ return _()[_().length - 1];
78
66
  },
79
67
  bool: 1,
80
68
  get i() {
81
- return bounds().length - 1;
69
+ return _().length - 1;
82
70
  }
83
71
  }))
84
72
  ];
@@ -3,46 +3,33 @@ import { Index, createEffect, createMemo, createSignal, onCleanup, splitProps }
3
3
  import { combineProps } from "@solid-primitives/props";
4
4
  import { castArray } from "es-toolkit/compat";
5
5
  import { createLazyMemo } from "@solid-primitives/memo";
6
- var _tmpl$ = /* @__PURE__ */ template(`<div>`);
7
- function define(that, key) {
8
- const signal = createSignal();
9
- Object.defineProperty(that, key, {
6
+ var _tmpl$ = /* @__PURE__ */ template("<div>");
7
+ function define(e, d) {
8
+ let f = createSignal();
9
+ return Object.defineProperty(e, d, {
10
10
  get() {
11
- return signal[0]();
11
+ return f[0]();
12
12
  },
13
- set(v) {
14
- signal[1](v);
13
+ set(e) {
14
+ f[1](e);
15
15
  }
16
- });
17
- return signal;
16
+ }), f;
18
17
  }
19
- function memo$1(that, key, fn) {
20
- const signal = createLazyMemo(fn);
21
- Object.defineProperty(that, key, { get() {
22
- return signal();
23
- } });
24
- return signal;
18
+ function memo$1(e, d, f) {
19
+ let p = createLazyMemo(f);
20
+ return Object.defineProperty(e, d, { get() {
21
+ return p();
22
+ } }), p;
25
23
  }
26
24
  var $Node = class {
27
- constructor(data) {
28
- this.$children = memo$1(this, "children", () => this.getChildren());
29
- this.$parent = define(this, "parent");
30
- this.$deep = memo$1(this, "deep", () => this.parent ? this.parent.deep + 1 : 0);
31
- this.$index = memo$1(this, "index", () => this.parent?.children?.indexOf(this));
32
- this.$prev = memo$1(this, "prev", () => this.parent?.children?.[this.index - 1]);
33
- this.$next = memo$1(this, "next", () => this.parent?.children?.[this.index + 1]);
34
- this.$root = memo$1(this, "root", () => this.parent ? this.parent.root : this);
35
- this.$path = memo$1(this, "path", () => {
36
- const ret = [this];
37
- let e = this;
38
- while (e.parent) ret.push(e = e.parent);
39
- return ret.reverse();
40
- });
41
- this.data = data;
42
- createEffect(() => {
43
- const children$1 = this.children;
44
- children$1?.map((e) => e.parent = this);
45
- onCleanup(() => children$1?.map((e) => e.parent = void 0));
25
+ constructor(e) {
26
+ this.$children = memo$1(this, "children", () => this.getChildren()), this.$parent = define(this, "parent"), this.$deep = memo$1(this, "deep", () => this.parent ? this.parent.deep + 1 : 0), this.$index = memo$1(this, "index", () => this.parent?.children?.indexOf(this)), this.$prev = memo$1(this, "prev", () => this.parent?.children?.[this.index - 1]), this.$next = memo$1(this, "next", () => this.parent?.children?.[this.index + 1]), this.$root = memo$1(this, "root", () => this.parent ? this.parent.root : this), this.$path = memo$1(this, "path", () => {
27
+ let e = [this], d = this;
28
+ for (; d.parent;) e.push(d = d.parent);
29
+ return e.reverse();
30
+ }), this.data = e, createEffect(() => {
31
+ let e = this.children;
32
+ e?.map((e) => e.parent = this), onCleanup(() => e?.map((e) => e.parent = void 0));
46
33
  });
47
34
  }
48
35
  get label() {
@@ -51,12 +38,11 @@ var $Node = class {
51
38
  get descendants() {
52
39
  return this.children?.flatMap((e) => [e, ...e.descendants]) || [];
53
40
  }
54
- contains(node) {
55
- return node.path.includes(this);
41
+ contains(e) {
42
+ return e.path.includes(this);
56
43
  }
57
44
  remove() {}
58
- };
59
- var $TreeItem = class $TreeItem extends $Node {
45
+ }, $TreeItem = class e extends $Node {
60
46
  get is() {
61
47
  return this.data.is;
62
48
  }
@@ -67,35 +53,30 @@ var $TreeItem = class $TreeItem extends $Node {
67
53
  return this.data.id;
68
54
  }
69
55
  getChildren() {
70
- return this.data.children?.map((e) => new $TreeItem(e));
56
+ return this.data.children?.map((d) => new e(d));
71
57
  }
72
58
  };
73
- function Tree(_) {
74
- const [props, attrs] = splitProps(_, ["data", "Node"]);
75
- const Node = props.Node ?? $TreeItem;
76
- const root = createMemo(() => new class extends Node {
59
+ function Tree(h) {
60
+ let [g, _] = splitProps(h, ["data", "Node"]), v = g.Node ?? $TreeItem, y = createMemo(() => new class extends v {
77
61
  getChildren() {
78
- return castArray(this.data || []).map((e) => new Node(e));
62
+ return castArray(this.data || []).map((e) => new v(e));
79
63
  }
80
- }(props.data));
81
- const flated = createMemo(() => root().descendants);
64
+ }(g.data)), b = createMemo(() => y().descendants);
82
65
  return (() => {
83
- var _el$ = _tmpl$();
84
- spread(_el$, mergeProps(() => combineProps({ class: "tt-menu" }, attrs)), false, true);
85
- insert(_el$, createComponent(Index, {
66
+ var h = _tmpl$();
67
+ return spread(h, mergeProps(() => combineProps({ class: "tt-menu" }, _)), !1, !0), insert(h, createComponent(Index, {
86
68
  get each() {
87
- return flated();
69
+ return b();
88
70
  },
89
- children: (node, index) => createComponent(Dynamic, mergeProps({ get component() {
90
- return node().is ?? "div";
71
+ children: (f, m) => createComponent(Dynamic, mergeProps({ get component() {
72
+ return f().is ?? "div";
91
73
  } }, () => combineProps({
92
74
  class: "li py-1 px-4",
93
- style: `padding-left: ${node().deep * 16}px`
94
- }, node().props), { get children() {
95
- return node().label;
75
+ style: `padding-left: ${f().deep * 16}px`
76
+ }, f().props), { get children() {
77
+ return f().label;
96
78
  } }))
97
- }));
98
- return _el$;
79
+ })), h;
99
80
  })();
100
81
  }
101
82
  export { $Node, $TreeItem, Tree };
@@ -1,10 +1,8 @@
1
1
  import { createComponent } from "solid-js/web";
2
- function solidComponent(comp) {
3
- comp.__solid = 1;
4
- return comp;
2
+ function solidComponent(e) {
3
+ return e.__solid = 1, e;
5
4
  }
6
- function renderComponent(Comp, props, renderer) {
7
- if (!Comp.__solid) Comp = renderer(Comp);
8
- return createComponent(Comp, props);
5
+ function renderComponent(t, n, r) {
6
+ return t.__solid || (t = r(t)), createComponent(t, n);
9
7
  }
10
8
  export { renderComponent, solidComponent };
@@ -9,175 +9,138 @@ import { makePersisted, storageSync } from "@solid-primitives/storage";
9
9
  import { createMutationObserver } from "@solid-primitives/mutation-observer";
10
10
  import { castArray } from "es-toolkit/compat";
11
11
  import { createKeybindingsHandler } from "tinykeys";
12
- function usePointerDrag(el, options) {
13
- options = mergeProps({ preventDefault: true }, options);
14
- createPointerListeners({
15
- target: el,
16
- passive: false,
17
- onDown(e) {
18
- options.preventDefault && e.preventDefault();
19
- const [sx, sy] = [e.x, e.y];
20
- let move;
21
- let end;
22
- options.start?.(e, (cb) => move = cb, (cb) => end = cb);
23
- createRoot((dispose) => {
12
+ function usePointerDrag(m, P) {
13
+ P = mergeProps({ preventDefault: !0 }, P), createPointerListeners({
14
+ target: m,
15
+ passive: !1,
16
+ onDown(m) {
17
+ P.preventDefault && m.preventDefault();
18
+ let [F, I] = [m.x, m.y], L, R;
19
+ P.start?.(m, (m) => L = m, (m) => R = m), createRoot((P) => {
24
20
  createPointerListeners({
25
21
  target: document,
26
- onMove(e$1) {
27
- const [ox, oy] = [e$1.x - sx, e$1.y - sy];
28
- move?.(e$1, {
29
- sx,
30
- sy,
31
- ox,
32
- oy
22
+ onMove(m) {
23
+ let [P, R] = [m.x - F, m.y - I];
24
+ L?.(m, {
25
+ sx: F,
26
+ sy: I,
27
+ ox: P,
28
+ oy: R
33
29
  });
34
30
  },
35
31
  onUp() {
36
- end?.(e);
37
- dispose();
38
- move = void 0;
39
- end = void 0;
32
+ R?.(m), P(), L = void 0, R = void 0;
40
33
  }
41
- });
42
- createEventListenerMap(document, { drop: dispose });
34
+ }), createEventListenerMap(document, { drop: P });
43
35
  });
44
36
  }
45
37
  });
46
38
  }
47
- function model(el, value) {
48
- const [field, setField] = value();
49
- createRenderEffect(() => el.value = field());
50
- el.addEventListener("input", (e) => setField(e.target.value));
39
+ function model(m, P) {
40
+ let [F, I] = P();
41
+ createRenderEffect(() => m.value = F()), m.addEventListener("input", (m) => I(m.target.value));
51
42
  }
52
- function toSignle(state, k) {
53
- return [() => state[k], (v) => state[k] = v];
43
+ function toSignle(m, P) {
44
+ return [() => m[P], (F) => m[P] = F];
54
45
  }
55
46
  function useDark() {
56
- const get = (v) => v == "dark" || prefersDark() && !v, set = (v) => v ? "dark" : "light";
57
- const prefersDark = () => window.matchMedia("(prefers-color-scheme: dark)").matches;
58
- const dark = makePersisted(createSignal(prefersDark()), {
47
+ let m = (m) => m == "dark" || F() && !m, P = (m) => m ? "dark" : "light", F = () => window.matchMedia("(prefers-color-scheme: dark)").matches, L = makePersisted(createSignal(F()), {
59
48
  name: "color-schema",
60
49
  storage: localStorage,
61
50
  sync: storageSync,
62
- serialize: set,
63
- deserialize: get
51
+ serialize: P,
52
+ deserialize: m
64
53
  });
65
- createEffect(() => document.documentElement.classList[dark[0]() ? "add" : "remove"]("dark"));
66
- createEffect(() => window.dispatchEvent(new StorageEvent("storage", {
54
+ return createEffect(() => document.documentElement.classList[L[0]() ? "add" : "remove"]("dark")), createEffect(() => window.dispatchEvent(new StorageEvent("storage", {
67
55
  key: "color-schema",
68
- newValue: set(dark[0]())
69
- })));
70
- return dark;
56
+ newValue: P(L[0]())
57
+ }))), L;
71
58
  }
72
- function useMemoAsync(fn, init) {
73
- const REJECT = Symbol();
74
- const [val, setVal] = createSignal(init);
75
- createComputed(async () => {
76
- const ret = fn(untrack(val));
77
- const v = ret instanceof Promise ? await new Promise((resolve) => {
78
- ret.then(resolve);
79
- onCleanup(() => resolve(REJECT));
80
- }) : ret;
81
- v == REJECT || setVal(() => v);
82
- });
83
- return val;
59
+ function useMemoAsync(m, P) {
60
+ let I = Symbol(), [L, R] = createSignal(P);
61
+ return createComputed(async () => {
62
+ let P = m(untrack(L)), F = P instanceof Promise ? await new Promise((m) => {
63
+ P.then(m), onCleanup(() => m(I));
64
+ }) : P;
65
+ F == I || R(() => F);
66
+ }), L;
84
67
  }
85
- function useSignle2(v, opt) {
86
- const state = createSignal(isFunction(v) ? void 0 : v);
87
- const before = (v$1) => {
88
- const v2 = opt?.before?.(v$1);
89
- return isPromise(v2) ? v2.then((v3) => v3 === void 0 ? v$1 : v3) : v2 ?? v$1;
90
- };
91
- const val = useMemoAsync(() => before(state[0]()));
92
- if (isFunction(v)) {
93
- const fned = useMemoAsync(() => before(v()));
94
- createComputed(() => state[1](fned()));
68
+ function useSignle2(m, P) {
69
+ let I = createSignal(isFunction(m) ? void 0 : m), L = (m) => {
70
+ let F = P?.before?.(m);
71
+ return isPromise(F) ? F.then((P) => P === void 0 ? m : P) : F ?? m;
72
+ }, R = useMemoAsync(() => L(I[0]()));
73
+ if (isFunction(m)) {
74
+ let P = useMemoAsync(() => L(m()));
75
+ createComputed(() => I[1](P()));
95
76
  }
96
- return [val, state[1]];
77
+ return [R, I[1]];
97
78
  }
98
79
  var $MEMO = Symbol();
99
- function toReactive(fn) {
100
- const v = () => unFn(fn);
101
- const trueFn = () => true;
102
- const get = (k) => ((e) => typeof e == "function" && $MEMO in e ? e() : e)(v()[k]);
80
+ function toReactive(F) {
81
+ let I = () => unFn(F), L = () => !0, R = (m) => ((m) => typeof m == "function" && $MEMO in m ? m() : m)(I()[m]);
103
82
  return new Proxy(Object.create(null), {
104
- get: (o, k, r) => k == $PROXY ? r : k == $RAW ? r : ((v$1) => typeof v$1 == "function" && $MEMO in v$1 ? v$1() : v$1)(v()[k]),
105
- set: trueFn,
106
- defineProperty: (o, k, attributes) => Object.defineProperty(v(), k, attributes),
107
- deleteProperty: trueFn,
108
- getPrototypeOf: () => Object.getPrototypeOf(v()),
109
- has: (o, p) => p == $PROXY || p in v(),
110
- ownKeys: (o) => Object.keys(v()),
111
- getOwnPropertyDescriptor: (o, k) => ({
112
- enumerable: true,
113
- configurable: true,
83
+ get: (m, F, L) => F == $PROXY || F == $RAW ? L : ((m) => typeof m == "function" && $MEMO in m ? m() : m)(I()[F]),
84
+ set: L,
85
+ defineProperty: (m, P, F) => Object.defineProperty(I(), P, F),
86
+ deleteProperty: L,
87
+ getPrototypeOf: () => Object.getPrototypeOf(I()),
88
+ has: (m, F) => F == $PROXY || F in I(),
89
+ ownKeys: (m) => Object.keys(I()),
90
+ getOwnPropertyDescriptor: (m, P) => ({
91
+ enumerable: !0,
92
+ configurable: !0,
114
93
  get() {
115
- return get(k);
94
+ return R(P);
116
95
  },
117
- set: trueFn
96
+ set: L
118
97
  })
119
98
  });
120
99
  }
121
- function useMemo(fn) {
122
- const ret = createMemo(fn);
123
- ret[$MEMO] = 1;
124
- return ret;
100
+ function useMemo(m) {
101
+ let P = createMemo(m);
102
+ return P[$MEMO] = 1, P;
125
103
  }
126
- function useHover(el) {
127
- const [hover, setHover] = createSignal(false);
128
- createEventListener(el, "pointerenter", () => setHover(true));
129
- createEventListener(el, "pointerleave", () => setHover(false));
130
- return hover;
104
+ function useHover(m) {
105
+ let [P, F] = createSignal(!1);
106
+ return createEventListener(m, "pointerenter", () => F(!0)), createEventListener(m, "pointerleave", () => F(!1)), P;
131
107
  }
132
- function useMouseDown(el) {
133
- const [down, setDown] = createSignal(false);
134
- createEventListener(el, "pointerdown", () => setDown(true));
135
- createEventListener(document.body, "pointerup", () => setDown(false));
136
- return down;
108
+ function useMouseDown(m) {
109
+ let [P, F] = createSignal(!1);
110
+ return createEventListener(m, "pointerdown", () => F(!0)), createEventListener(document.body, "pointerup", () => F(!1)), P;
137
111
  }
138
- function useClicked(el) {
139
- const [clicked, setClicked] = createSignal(false);
140
- const els = () => castArray(access(el));
141
- createEventListener(() => els().map((e) => e?.getRootNode()), "click", (e) => setClicked(els().some((el$1) => el$1?.contains(e.target))));
142
- return clicked;
112
+ function useClicked(m) {
113
+ let [P, F] = createSignal(!1), I = () => castArray(access(m));
114
+ return createEventListener(() => I().map((m) => m?.getRootNode()), "click", (m) => F(I().some((P) => P?.contains(m.target)))), P;
143
115
  }
144
- function useMutation(initial, options, cb) {
145
- const ret = createSignal(cb());
146
- createMutationObserver(initial, options, (ms) => ret[1](cb()));
147
- return ret[0];
116
+ function useMutation(m, P, F) {
117
+ let I = createSignal(F());
118
+ return createMutationObserver(m, P, (m) => I[1](F())), I[0];
148
119
  }
149
- function useTinykeys(el, handlers) {
150
- createEventListener(el, "keydown", createKeybindingsHandler({ ...mapValues(handlers, (cb) => (e) => {
151
- e.preventDefault();
152
- cb(e);
120
+ function useTinykeys(m, P) {
121
+ createEventListener(m, "keydown", createKeybindingsHandler({ ...mapValues(P, (m) => (P) => {
122
+ P.preventDefault(), m(P);
153
123
  }) }));
154
124
  }
155
- function useHistory([val, setVal]) {
156
- let bool = 1;
157
- const state = createMutable({
125
+ function useHistory([m, P]) {
126
+ let F = 1, I = createMutable({
158
127
  index: -1,
159
128
  history: []
160
- });
161
- const clear = () => (state.index = 0, state.history = [val()]);
162
- const canUndo = () => state.index > 0;
163
- const canRedo = () => state.index < state.history.length - 1;
164
- const undo = () => canUndo() && ((bool = 0) || setVal(state.history[--state.index]));
165
- const redo = () => canRedo() && ((bool = 0) || setVal(state.history[++state.index]));
166
- createRenderEffect(on(val, (ret) => {
167
- if (ret == null) return;
168
- if (!bool) return bool = 1;
169
- if (canRedo()) state.history = state.history.slice(0, state.index + 1);
170
- state.history[++state.index] = ret;
171
- }));
172
- return {
173
- undo,
174
- redo,
175
- clear,
129
+ }), L = () => (I.index = 0, I.history = [m()]), z = () => I.index > 0, B = () => I.index < I.history.length - 1;
130
+ return createRenderEffect(on(m, (m) => {
131
+ if (m != null) {
132
+ if (!F) return F = 1;
133
+ B() && (I.history = I.history.slice(0, I.index + 1)), I.history[++I.index] = m;
134
+ }
135
+ })), {
136
+ undo: () => z() && ((F = 0) || P(I.history[--I.index])),
137
+ redo: () => B() && ((F = 0) || P(I.history[++I.index])),
138
+ clear: L,
176
139
  get index() {
177
- return state.index;
140
+ return I.index;
178
141
  },
179
142
  get history() {
180
- return state.history;
143
+ return I.history;
181
144
  }
182
145
  };
183
146
  }
@@ -2,58 +2,41 @@ import { createEffect, mergeProps } from "solid-js";
2
2
  import { createEventListener } from "@solid-primitives/event-listener";
3
3
  import { access } from "@solid-primitives/utils";
4
4
  import { createMutationObserver } from "@solid-primitives/mutation-observer";
5
- function useDir(options) {
6
- options = mergeProps({ loop: true }, options);
7
- const list = () => access(options.list) ?? access(options.ref);
8
- const ref = () => access(options.ref) ?? access(options.list);
5
+ function useDir(a) {
6
+ a = mergeProps({ loop: !0 }, a);
7
+ let o = () => access(a.list) ?? access(a.ref), s = () => access(a.ref) ?? access(a.list);
9
8
  createEffect(() => {
10
- if (ref().tabIndex > -1) return;
11
- ref().tabIndex = 0;
12
- });
13
- createEventListener(ref, "keydown", (e) => {
9
+ s().tabIndex > -1 || (s().tabIndex = 0);
10
+ }), createEventListener(s, "keydown", (e) => {
14
11
  if (![
15
12
  "ArrowDown",
16
13
  "ArrowUp",
17
14
  "Enter"
18
15
  ].includes(e.key)) return;
19
- e.stopPropagation();
20
- e.preventDefault();
21
- let hover = list()?.querySelector(".hover");
16
+ e.stopPropagation(), e.preventDefault();
17
+ let n = o()?.querySelector(".hover");
22
18
  if (e.key == "Enter") {
23
- hover?.click();
19
+ n?.click();
24
20
  return;
25
21
  }
26
- let index = e.key == "ArrowDown" ? hover ? +hover?.getAttribute("data-index") + 1 : 0 : e.key == "ArrowUp" ? hover ? +hover?.getAttribute("data-index") - 1 : -1 : 0;
27
- const el = list()?.querySelector(`[data-index='${index}']`);
28
- if (!el) {
29
- if (options.loop) {
30
- hover?.classList.remove("hover");
31
- index >= 0 ? list()?.querySelector(`[data-index='0']`)?.classList.add("hover") : [...list()?.querySelectorAll(`[data-index]`)].at(-1)?.classList.add("hover");
32
- }
33
- } else {
34
- hover?.classList.remove("hover");
35
- el.classList.add("hover");
36
- }
37
- }, options.options);
38
- createEffect(() => {
39
- if (!options.defaultFirst) return;
40
- const el = list();
41
- if (!el) return;
42
- const hover = () => {
43
- if (el.querySelector(".hover")) return;
44
- el.querySelector(`[data-index]`)?.classList.add("hover");
22
+ let r = e.key == "ArrowDown" ? n ? +n?.getAttribute("data-index") + 1 : 0 : e.key == "ArrowUp" ? n ? n?.getAttribute("data-index") - 1 : -1 : 0, i = o()?.querySelector(`[data-index='${r}']`);
23
+ i ? (n?.classList.remove("hover"), i.classList.add("hover")) : a.loop && (n?.classList.remove("hover"), r >= 0 ? o()?.querySelector("[data-index='0']")?.classList.add("hover") : [...o()?.querySelectorAll("[data-index]")].at(-1)?.classList.add("hover"));
24
+ }, a.options), createEffect(() => {
25
+ if (!a.defaultFirst) return;
26
+ let e = o();
27
+ if (!e) return;
28
+ let n = () => {
29
+ e.querySelector(".hover") || e.querySelector("[data-index]")?.classList.add("hover");
45
30
  };
46
- createMutationObserver(el, { childList: true }, hover);
47
- hover();
48
- });
49
- createEventListener(list, "mouseover", () => {
50
- list()?.querySelector(".hover")?.classList.remove("hover");
31
+ createMutationObserver(e, { childList: !0 }, n), n();
32
+ }), createEventListener(o, "mouseover", () => {
33
+ o()?.querySelector(".hover")?.classList.remove("hover");
51
34
  });
52
35
  }
53
- function VDir(el, options) {
36
+ function VDir(e, n) {
54
37
  useDir({
55
- ...options(),
56
- list: el
38
+ ...n(),
39
+ list: e
57
40
  });
58
41
  }
59
42
  export { VDir, useDir };