@hypericon/mico 0.4.1 → 0.5.0
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/dist/cjs/components/dialog/dialog-manager.js +1 -1
- package/dist/cjs/components/markdown-editor/MarkdownEditor.js +17 -7
- package/dist/cjs/components/select/SelectOptionsPanel.d.ts +0 -1
- package/dist/cjs/components/table/Table.d.ts +6 -2
- package/dist/cjs/components/table/Table.js +7 -3
- package/dist/cjs/components/toast/toast.js +19 -9
- package/dist/cjs/components/tooltip/tooltip-function.d.ts +1 -1
- package/dist/cjs/components/tooltip/tooltip-function.js +3 -4
- package/dist/cjs/components/tree/Tree.d.ts +30 -30
- package/dist/cjs/components/tree/Tree.js +3 -3
- package/dist/cjs/components/tree/tree-utils.js +1 -2
- package/dist/cjs/utils/date-time.js +2 -3
- package/dist/cjs/utils/dom.js +2 -3
- package/dist/cjs/utils/events.js +1 -2
- package/dist/esm/components/accordion/index.d.ts +1 -0
- package/dist/esm/components/accordion/index.js +1 -0
- package/dist/esm/components/data-grid/index.d.ts +1 -0
- package/dist/esm/components/data-grid/index.js +1 -0
- package/dist/esm/components/data-table/index.d.ts +1 -0
- package/dist/esm/components/data-table/index.js +1 -0
- package/dist/esm/components/dialog/Dialog.js +2 -1
- package/dist/esm/components/dialog/dialog-manager.js +21 -14
- package/dist/esm/components/dialog/index.js +17 -1
- package/dist/esm/components/drag-handler/DragHandler.js +9 -3
- package/dist/esm/components/drag-handler/index.js +17 -1
- package/dist/esm/components/drawer/index.d.ts +1 -0
- package/dist/esm/components/drawer/index.js +1 -0
- package/dist/esm/components/drop-target/DropTarget.js +15 -9
- package/dist/esm/components/drop-target/drop-target.state.js +14 -10
- package/dist/esm/components/drop-target/index.js +17 -1
- package/dist/esm/components/form/Form.js +4 -1
- package/dist/esm/components/form/index.js +17 -1
- package/dist/esm/components/icon/Icon.js +9 -3
- package/dist/esm/components/icon/icons.js +2 -1
- package/dist/esm/components/icon/index.js +18 -2
- package/dist/esm/components/index.js +28 -12
- package/dist/esm/components/markdown/Markdown.js +15 -9
- package/dist/esm/components/markdown/index.js +17 -1
- package/dist/esm/components/markdown-editor/MarkdownEditor.js +80 -44
- package/dist/esm/components/markdown-editor/index.js +17 -1
- package/dist/esm/components/markdown-editor/markdown-editor.state.js +11 -7
- package/dist/esm/components/menu/Menu.js +16 -10
- package/dist/esm/components/menu/MenuButton.js +31 -25
- package/dist/esm/components/menu/MenuSeparator.js +11 -5
- package/dist/esm/components/menu/index.js +22 -6
- package/dist/esm/components/menu/menu-constants.js +4 -1
- package/dist/esm/components/menu/menu-manager.js +18 -11
- package/dist/esm/components/menu/menu-settings.js +4 -1
- package/dist/esm/components/modal/index.d.ts +1 -0
- package/dist/esm/components/modal/index.js +1 -0
- package/dist/esm/components/pagination/Pagination.js +35 -29
- package/dist/esm/components/pagination/index.js +18 -2
- package/dist/esm/components/pagination/pagination-settings.js +4 -1
- package/dist/esm/components/panel-tree/PanelTree.js +27 -21
- package/dist/esm/components/panel-tree/index.d.ts +1 -0
- package/dist/esm/components/panel-tree/index.js +1 -0
- package/dist/esm/components/panel-tree/panel-tree-constants.js +5 -2
- package/dist/esm/components/panel-tree/panel-tree-store.js +13 -9
- package/dist/esm/components/panel-tree/panel-tree-utils.js +7 -3
- package/dist/esm/components/popover/index.d.ts +1 -0
- package/dist/esm/components/popover/index.js +1 -0
- package/dist/esm/components/reorderable-list/RedorderableList.js +17 -11
- package/dist/esm/components/reorderable-list/index.d.ts +1 -0
- package/dist/esm/components/reorderable-list/index.js +1 -0
- package/dist/esm/components/select/Select.js +18 -12
- package/dist/esm/components/select/SelectOptionsPanel.d.ts +0 -1
- package/dist/esm/components/select/SelectOptionsPanel.js +19 -13
- package/dist/esm/components/select/constants.js +5 -2
- package/dist/esm/components/select/index.js +18 -2
- package/dist/esm/components/select/select-options-manager.js +7 -3
- package/dist/esm/components/tab-panel/TabPanel.js +19 -13
- package/dist/esm/components/tab-panel/index.js +19 -3
- package/dist/esm/components/tab-panel/tab-panel-default-settings.js +4 -1
- package/dist/esm/components/tab-panel/tab-panel-settings.js +2 -1
- package/dist/esm/components/table/Table.d.ts +6 -2
- package/dist/esm/components/table/Table.js +24 -13
- package/dist/esm/components/table/index.js +17 -1
- package/dist/esm/components/toast/index.js +17 -1
- package/dist/esm/components/toast/toast.js +49 -9
- package/dist/esm/components/tooltip/index.js +19 -3
- package/dist/esm/components/tooltip/tooltip-defaults.js +4 -1
- package/dist/esm/components/tooltip/tooltip-function.d.ts +1 -1
- package/dist/esm/components/tooltip/tooltip-function.js +25 -21
- package/dist/esm/components/tooltip/tooltip-interfaces.js +2 -1
- package/dist/esm/components/tree/Tree.d.ts +30 -30
- package/dist/esm/components/tree/Tree.js +30 -23
- package/dist/esm/components/tree/index.js +19 -3
- package/dist/esm/components/tree/tree-node.interface.js +2 -1
- package/dist/esm/components/tree/tree-utils.js +4 -1
- package/dist/esm/index.js +18 -2
- package/dist/esm/utils/date-time.js +6 -2
- package/dist/esm/utils/dom.js +6 -2
- package/dist/esm/utils/events.js +4 -1
- package/dist/esm/utils/index.js +19 -3
- package/package.json +1 -1
|
@@ -1,3 +1,19 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
__exportStar(require("./tooltip-defaults"), exports);
|
|
18
|
+
__exportStar(require("./tooltip-function"), exports);
|
|
19
|
+
__exportStar(require("./tooltip-interfaces"), exports);
|
|
@@ -1,4 +1,7 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.TOOLTIP_DEFAULTS = void 0;
|
|
4
|
+
exports.TOOLTIP_DEFAULTS = {
|
|
2
5
|
/** How to position the tooltips by default */
|
|
3
6
|
DEFAULT_POS: "cursor",
|
|
4
7
|
/** Delay in milliseconds before showing the tooltip */
|
|
@@ -23,7 +23,7 @@ export declare function tooltip(ev: MouseEvent, tooltip: string, opts?: Partial<
|
|
|
23
23
|
* }, "Click me"),
|
|
24
24
|
* // is equivalent to:
|
|
25
25
|
* m("button", {
|
|
26
|
-
*
|
|
26
|
+
* onmouseenter: (ev: MouseEvent) => tooltip(ev, "Click the button"),
|
|
27
27
|
* }, "Click me"),
|
|
28
28
|
* ```
|
|
29
29
|
* @param value
|
|
@@ -1,4 +1,8 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.tooltip = tooltip;
|
|
4
|
+
exports.tooltipSpread = tooltipSpread;
|
|
5
|
+
const tooltip_defaults_1 = require("./tooltip-defaults");
|
|
2
6
|
/**
|
|
3
7
|
* Display a tooltip using the given mouse event.
|
|
4
8
|
* Call this function from an element's "mouseenter" event.
|
|
@@ -12,19 +16,19 @@ import { TOOLTIP_DEFAULTS } from "./tooltip-defaults";
|
|
|
12
16
|
* @param opts
|
|
13
17
|
* @returns
|
|
14
18
|
*/
|
|
15
|
-
|
|
19
|
+
function tooltip(ev, tooltip, opts) {
|
|
16
20
|
var _a;
|
|
17
|
-
if (TOOLTIP_DEFAULTS.IS_ENABLED === false)
|
|
21
|
+
if (tooltip_defaults_1.TOOLTIP_DEFAULTS.IS_ENABLED === false)
|
|
18
22
|
return;
|
|
19
23
|
// If there is no tooltip, don't bother
|
|
20
24
|
if (!tooltip)
|
|
21
25
|
return;
|
|
22
26
|
const target = ev.currentTarget;
|
|
23
27
|
const eventTarget = ev.target;
|
|
24
|
-
TOOLTIP_DEFAULTS.ENABLE_DEBUG && console.log(`target is ${target === null || target === void 0 ? void 0 : target.tagName}`);
|
|
25
|
-
TOOLTIP_DEFAULTS.ENABLE_DEBUG && console.log(`event target is ${eventTarget === null || eventTarget === void 0 ? void 0 : eventTarget.tagName}`);
|
|
28
|
+
tooltip_defaults_1.TOOLTIP_DEFAULTS.ENABLE_DEBUG && console.log(`target is ${target === null || target === void 0 ? void 0 : target.tagName}`);
|
|
29
|
+
tooltip_defaults_1.TOOLTIP_DEFAULTS.ENABLE_DEBUG && console.log(`event target is ${eventTarget === null || eventTarget === void 0 ? void 0 : eventTarget.tagName}`);
|
|
26
30
|
if (!target) {
|
|
27
|
-
TOOLTIP_DEFAULTS.ENABLE_DEBUG && console.log("No target; returning from tooltip()");
|
|
31
|
+
tooltip_defaults_1.TOOLTIP_DEFAULTS.ENABLE_DEBUG && console.log("No target; returning from tooltip()");
|
|
28
32
|
return;
|
|
29
33
|
}
|
|
30
34
|
// if (target?.classList.contains(TOOLTIP_CLASS) || eventTarget?.classList.contains(TOOLTIP_CLASS)) {
|
|
@@ -34,12 +38,12 @@ export function tooltip(ev, tooltip, opts) {
|
|
|
34
38
|
let hasTooltip = false;
|
|
35
39
|
target.childNodes.forEach((child, key, parent) => {
|
|
36
40
|
var _a;
|
|
37
|
-
if ((_a = child === null || child === void 0 ? void 0 : child.classList) === null || _a === void 0 ? void 0 : _a.contains(TOOLTIP_DEFAULTS.TOOLTIP_CLASS)) {
|
|
41
|
+
if ((_a = child === null || child === void 0 ? void 0 : child.classList) === null || _a === void 0 ? void 0 : _a.contains(tooltip_defaults_1.TOOLTIP_DEFAULTS.TOOLTIP_CLASS)) {
|
|
38
42
|
hasTooltip = true;
|
|
39
43
|
}
|
|
40
44
|
});
|
|
41
45
|
if (hasTooltip) {
|
|
42
|
-
TOOLTIP_DEFAULTS.ENABLE_DEBUG && console.log("Target already has tooltip; returning from tooltip()");
|
|
46
|
+
tooltip_defaults_1.TOOLTIP_DEFAULTS.ENABLE_DEBUG && console.log("Target already has tooltip; returning from tooltip()");
|
|
43
47
|
return;
|
|
44
48
|
}
|
|
45
49
|
const mousePos = { x: ev.x, y: ev.y };
|
|
@@ -50,9 +54,9 @@ export function tooltip(ev, tooltip, opts) {
|
|
|
50
54
|
target.addEventListener("mousemove", latestPosFn);
|
|
51
55
|
const timeout = setTimeout(() => {
|
|
52
56
|
displayTooltip({ ev, target, tooltip, opts, mousePos });
|
|
53
|
-
}, (_a = opts === null || opts === void 0 ? void 0 : opts.delay) !== null && _a !== void 0 ? _a : TOOLTIP_DEFAULTS.DEFAULT_DELAY);
|
|
57
|
+
}, (_a = opts === null || opts === void 0 ? void 0 : opts.delay) !== null && _a !== void 0 ? _a : tooltip_defaults_1.TOOLTIP_DEFAULTS.DEFAULT_DELAY);
|
|
54
58
|
const clearFn = (ev) => {
|
|
55
|
-
TOOLTIP_DEFAULTS.ENABLE_DEBUG && console.log("Clearing tooltip timeout");
|
|
59
|
+
tooltip_defaults_1.TOOLTIP_DEFAULTS.ENABLE_DEBUG && console.log("Clearing tooltip timeout");
|
|
56
60
|
clearTimeout(timeout);
|
|
57
61
|
target.removeEventListener("mouseleave", clearFn);
|
|
58
62
|
target.removeEventListener("mousemove", latestPosFn);
|
|
@@ -69,14 +73,14 @@ export function tooltip(ev, tooltip, opts) {
|
|
|
69
73
|
* }, "Click me"),
|
|
70
74
|
* // is equivalent to:
|
|
71
75
|
* m("button", {
|
|
72
|
-
*
|
|
76
|
+
* onmouseenter: (ev: MouseEvent) => tooltip(ev, "Click the button"),
|
|
73
77
|
* }, "Click me"),
|
|
74
78
|
* ```
|
|
75
79
|
* @param value
|
|
76
80
|
* @param opts
|
|
77
81
|
* @returns
|
|
78
82
|
*/
|
|
79
|
-
|
|
83
|
+
function tooltipSpread(value, opts) {
|
|
80
84
|
return {
|
|
81
85
|
onmouseenter: (ev) => tooltip(ev, value, opts),
|
|
82
86
|
};
|
|
@@ -90,22 +94,22 @@ function displayTooltip(settings) {
|
|
|
90
94
|
const { ev, target, tooltip, opts, mousePos } = settings;
|
|
91
95
|
const cursorOffsetX = 5;
|
|
92
96
|
const cursorOffsetY = 20;
|
|
93
|
-
const pos = (_a = opts === null || opts === void 0 ? void 0 : opts.pos) !== null && _a !== void 0 ? _a : TOOLTIP_DEFAULTS.DEFAULT_POS;
|
|
97
|
+
const pos = (_a = opts === null || opts === void 0 ? void 0 : opts.pos) !== null && _a !== void 0 ? _a : tooltip_defaults_1.TOOLTIP_DEFAULTS.DEFAULT_POS;
|
|
94
98
|
let targetRect = target.getBoundingClientRect();
|
|
95
99
|
// targetRect = new DOMRect(targetRect.x, targetRect.y, targetRect.width, targetRect.height);
|
|
96
100
|
let targetCenter = {
|
|
97
101
|
x: targetRect.left + (targetRect.width / 2),
|
|
98
102
|
y: targetRect.top + (targetRect.height / 2),
|
|
99
103
|
};
|
|
100
|
-
const maxWidth = (opts === null || opts === void 0 ? void 0 : opts.jumbo) === true ? TOOLTIP_DEFAULTS.MAX_WIDTH_JUMBO_PX : TOOLTIP_DEFAULTS.MAX_WIDTH_PX;
|
|
101
|
-
const maxHeight = (opts === null || opts === void 0 ? void 0 : opts.jumbo) === true ? TOOLTIP_DEFAULTS.MAX_HEIGHT_JUMBO_PX : TOOLTIP_DEFAULTS.MAX_HEIGHT_PX;
|
|
102
|
-
const attachToBody = (_c = (_b = settings.opts) === null || _b === void 0 ? void 0 : _b.attachToBody) !== null && _c !== void 0 ? _c : TOOLTIP_DEFAULTS.ATTACH_TO_BODY;
|
|
103
|
-
TOOLTIP_DEFAULTS.ENABLE_DEBUG && console.log(`display tooltip "${tooltip}" on element ${target.tagName}`);
|
|
104
|
+
const maxWidth = (opts === null || opts === void 0 ? void 0 : opts.jumbo) === true ? tooltip_defaults_1.TOOLTIP_DEFAULTS.MAX_WIDTH_JUMBO_PX : tooltip_defaults_1.TOOLTIP_DEFAULTS.MAX_WIDTH_PX;
|
|
105
|
+
const maxHeight = (opts === null || opts === void 0 ? void 0 : opts.jumbo) === true ? tooltip_defaults_1.TOOLTIP_DEFAULTS.MAX_HEIGHT_JUMBO_PX : tooltip_defaults_1.TOOLTIP_DEFAULTS.MAX_HEIGHT_PX;
|
|
106
|
+
const attachToBody = (_c = (_b = settings.opts) === null || _b === void 0 ? void 0 : _b.attachToBody) !== null && _c !== void 0 ? _c : tooltip_defaults_1.TOOLTIP_DEFAULTS.ATTACH_TO_BODY;
|
|
107
|
+
tooltip_defaults_1.TOOLTIP_DEFAULTS.ENABLE_DEBUG && console.log(`display tooltip "${tooltip}" on element ${target.tagName}`);
|
|
104
108
|
const tooltipEl = document.createElement("div");
|
|
105
109
|
tooltipEl.innerText = tooltip;
|
|
106
110
|
// tooltipEl.classList.value = "px-2 py-1 text-xs text-dark font-normal rounded border border-primary bg-white fade-in-100 no-select";
|
|
107
111
|
tooltipEl.classList.add("mico-tooltip-fade-in");
|
|
108
|
-
tooltipEl.classList.add(TOOLTIP_DEFAULTS.TOOLTIP_CLASS);
|
|
112
|
+
tooltipEl.classList.add(tooltip_defaults_1.TOOLTIP_DEFAULTS.TOOLTIP_CLASS);
|
|
109
113
|
tooltipEl.style.position = "fixed";
|
|
110
114
|
tooltipEl.style.maxWidth = `${maxWidth}px`;
|
|
111
115
|
tooltipEl.style.maxHeight = `${maxHeight}px`;
|
|
@@ -170,11 +174,11 @@ function displayTooltip(settings) {
|
|
|
170
174
|
target.addEventListener("mousemove", followFn);
|
|
171
175
|
target.addEventListener("mouseleave", cleanupFn);
|
|
172
176
|
}
|
|
173
|
-
TOOLTIP_DEFAULTS.ENABLE_DEBUG && console.log(`displaying tooltip at: ${tooltipEl.style.left}, ${tooltipEl.style.top}`);
|
|
177
|
+
tooltip_defaults_1.TOOLTIP_DEFAULTS.ENABLE_DEBUG && console.log(`displaying tooltip at: ${tooltipEl.style.left}, ${tooltipEl.style.top}`);
|
|
174
178
|
const removeFn = () => {
|
|
175
|
-
TOOLTIP_DEFAULTS.ENABLE_DEBUG && console.log(`Removing tooltip ${tooltip} from el ${target.tagName}`);
|
|
179
|
+
tooltip_defaults_1.TOOLTIP_DEFAULTS.ENABLE_DEBUG && console.log(`Removing tooltip ${tooltip} from el ${target.tagName}`);
|
|
176
180
|
tooltipEl.onanimationend = (ev) => {
|
|
177
|
-
TOOLTIP_DEFAULTS.ENABLE_DEBUG && console.log(ev.animationName);
|
|
181
|
+
tooltip_defaults_1.TOOLTIP_DEFAULTS.ENABLE_DEBUG && console.log(ev.animationName);
|
|
178
182
|
if (attachToBody === true) {
|
|
179
183
|
document.body.removeChild(tooltipEl);
|
|
180
184
|
}
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
@@ -7,11 +7,11 @@ export declare const Tree: m.Component<{
|
|
|
7
7
|
/** The root list of nodes to display in the tree (circular references will crash) */
|
|
8
8
|
nodes: TreeNode<any>[];
|
|
9
9
|
/** Enable drag and drop reordering */
|
|
10
|
-
enableReordering?: boolean
|
|
10
|
+
enableReordering?: boolean;
|
|
11
11
|
/** Enable expanding/collapsing of nodes with children */
|
|
12
|
-
enableToggling?: boolean
|
|
12
|
+
enableToggling?: boolean;
|
|
13
13
|
/** Enable debug logging of certain events */
|
|
14
|
-
enableLogging?: boolean
|
|
14
|
+
enableLogging?: boolean;
|
|
15
15
|
/** Function called when a node with children is toggled */
|
|
16
16
|
ontoggle?: ((toggle: {
|
|
17
17
|
node: TreeNode<any>;
|
|
@@ -30,23 +30,23 @@ export declare const Tree: m.Component<{
|
|
|
30
30
|
above: boolean;
|
|
31
31
|
}) => void) | undefined;
|
|
32
32
|
/** Optional message to display in defined but empty children lists */
|
|
33
|
-
emptyChildrenMessage?: string
|
|
33
|
+
emptyChildrenMessage?: string;
|
|
34
34
|
/** Optionally override the default icon for a collapsed node */
|
|
35
|
-
collapsedIcon?: m.Vnode<any, any
|
|
35
|
+
collapsedIcon?: m.Vnode<any, any>;
|
|
36
36
|
/** Optionally override the default icon for an expanded node */
|
|
37
|
-
expandedIcon?: m.Vnode<any, any
|
|
37
|
+
expandedIcon?: m.Vnode<any, any>;
|
|
38
38
|
/** Optionally override the default toggle icon for a node that cannot toggle */
|
|
39
|
-
noToggleIcon?: m.Vnode<any, any
|
|
39
|
+
noToggleIcon?: m.Vnode<any, any>;
|
|
40
40
|
/** Optionally enable toggling of expansion nodes by clicking their labels */
|
|
41
|
-
toggleExpansionWithLabel?: boolean
|
|
41
|
+
toggleExpansionWithLabel?: boolean;
|
|
42
42
|
/** Optionally override the default nesting width */
|
|
43
|
-
nestingWidth?: string
|
|
43
|
+
nestingWidth?: string;
|
|
44
44
|
/** Optionally override the default toggle button width */
|
|
45
|
-
toggleButtonWidth?: string
|
|
45
|
+
toggleButtonWidth?: string;
|
|
46
46
|
/** Optional CSS classes to apply to the root div */
|
|
47
|
-
class?: string
|
|
47
|
+
class?: string;
|
|
48
48
|
/** Optional CSS styles to apply to the root div */
|
|
49
|
-
style?: string
|
|
49
|
+
style?: string;
|
|
50
50
|
}, {
|
|
51
51
|
isReordering: boolean;
|
|
52
52
|
thisEl: Element;
|
|
@@ -62,46 +62,46 @@ export declare function createTree<TNodeData extends object = {}>(): m.Component
|
|
|
62
62
|
/** The root list of nodes to display in the tree (circular references will crash) */
|
|
63
63
|
nodes: TreeNode<TNodeData>[];
|
|
64
64
|
/** Enable drag and drop reordering */
|
|
65
|
-
enableReordering?: boolean
|
|
65
|
+
enableReordering?: boolean;
|
|
66
66
|
/** Enable expanding/collapsing of nodes with children */
|
|
67
|
-
enableToggling?: boolean
|
|
67
|
+
enableToggling?: boolean;
|
|
68
68
|
/** Enable debug logging of certain events */
|
|
69
|
-
enableLogging?: boolean
|
|
69
|
+
enableLogging?: boolean;
|
|
70
70
|
/** Function called when a node with children is toggled */
|
|
71
|
-
ontoggle?: (
|
|
71
|
+
ontoggle?: (toggle: {
|
|
72
72
|
node: TreeNode<TNodeData>;
|
|
73
73
|
expanded: boolean;
|
|
74
74
|
recursive: boolean;
|
|
75
|
-
}) => void
|
|
75
|
+
}) => void;
|
|
76
76
|
/** Function called when a node label is clicked */
|
|
77
|
-
onclick?: (
|
|
77
|
+
onclick?: (click: {
|
|
78
78
|
ev: MouseEvent;
|
|
79
79
|
node: TreeNode<TNodeData>;
|
|
80
|
-
}) => void
|
|
80
|
+
}) => void;
|
|
81
81
|
/** Function called when a node has been dragged to a new position in the tree */
|
|
82
|
-
onreorder?: (
|
|
82
|
+
onreorder?: (reorder: {
|
|
83
83
|
moved: TNodeData;
|
|
84
84
|
target: TNodeData;
|
|
85
85
|
above: boolean;
|
|
86
|
-
}) => void
|
|
86
|
+
}) => void;
|
|
87
87
|
/** Optional message to display in defined but empty children lists */
|
|
88
|
-
emptyChildrenMessage?: string
|
|
88
|
+
emptyChildrenMessage?: string;
|
|
89
89
|
/** Optionally override the default icon for a collapsed node */
|
|
90
|
-
collapsedIcon?: m.Vnode<any, any
|
|
90
|
+
collapsedIcon?: m.Vnode<any, any>;
|
|
91
91
|
/** Optionally override the default icon for an expanded node */
|
|
92
|
-
expandedIcon?: m.Vnode<any, any
|
|
92
|
+
expandedIcon?: m.Vnode<any, any>;
|
|
93
93
|
/** Optionally override the default toggle icon for a node that cannot toggle */
|
|
94
|
-
noToggleIcon?: m.Vnode<any, any
|
|
94
|
+
noToggleIcon?: m.Vnode<any, any>;
|
|
95
95
|
/** Optionally enable toggling of expansion nodes by clicking their labels */
|
|
96
|
-
toggleExpansionWithLabel?: boolean
|
|
96
|
+
toggleExpansionWithLabel?: boolean;
|
|
97
97
|
/** Optionally override the default nesting width */
|
|
98
|
-
nestingWidth?: string
|
|
98
|
+
nestingWidth?: string;
|
|
99
99
|
/** Optionally override the default toggle button width */
|
|
100
|
-
toggleButtonWidth?: string
|
|
100
|
+
toggleButtonWidth?: string;
|
|
101
101
|
/** Optional CSS classes to apply to the root div */
|
|
102
|
-
class?: string
|
|
102
|
+
class?: string;
|
|
103
103
|
/** Optional CSS styles to apply to the root div */
|
|
104
|
-
style?: string
|
|
104
|
+
style?: string;
|
|
105
105
|
}, {
|
|
106
106
|
isReordering: boolean;
|
|
107
107
|
thisEl: Element;
|
|
@@ -1,19 +1,26 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
+
};
|
|
5
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
+
exports.Tree = void 0;
|
|
7
|
+
exports.createTree = createTree;
|
|
8
|
+
const utils_1 = require("@hypericon/utils");
|
|
9
|
+
const mithril_1 = __importDefault(require("mithril"));
|
|
10
|
+
const icon_1 = require("../icon");
|
|
4
11
|
const DATA_TRANSFER_TYPE = "application/tree-data";
|
|
5
12
|
const DEFAULT_NESTING_WIDTH = "1.5rem";
|
|
6
13
|
const DEFAULT_TOGGLE_WIDTH = "1.5rem";
|
|
7
14
|
/**
|
|
8
15
|
* An untyped tree component (see `createTree<T>()`)
|
|
9
16
|
*/
|
|
10
|
-
|
|
17
|
+
exports.Tree = createTree();
|
|
11
18
|
/**
|
|
12
19
|
* Build a component to display nested nodes in a tree.
|
|
13
20
|
*
|
|
14
21
|
* Nodes with children are collapsable, and nodes can be arbitrarily reordered.
|
|
15
22
|
*/
|
|
16
|
-
|
|
23
|
+
function createTree() {
|
|
17
24
|
// /** Reference to the TreeItem currently being dragged */
|
|
18
25
|
// let draggedTreeItem: TreeItem<T> | undefined = undefined;
|
|
19
26
|
const Tree = {
|
|
@@ -26,12 +33,12 @@ export function createTree() {
|
|
|
26
33
|
view({ attrs }) {
|
|
27
34
|
var _a, _b;
|
|
28
35
|
const nodes = attrs.nodes;
|
|
29
|
-
return
|
|
36
|
+
return (0, mithril_1.default)(".mico-tree", {
|
|
30
37
|
style: `${(_a = attrs.style) !== null && _a !== void 0 ? _a : ""} position: relative;`,
|
|
31
38
|
class: `${(_b = attrs.class) !== null && _b !== void 0 ? _b : ""}`
|
|
32
39
|
}, [
|
|
33
|
-
|
|
34
|
-
return
|
|
40
|
+
(0, mithril_1.default)("ul", nodes.map((node, i) => {
|
|
41
|
+
return (0, mithril_1.default)(TreeNode, {
|
|
35
42
|
// key: i, // item.key,
|
|
36
43
|
node,
|
|
37
44
|
enableReordering: attrs.enableReordering,
|
|
@@ -103,7 +110,7 @@ export function createTree() {
|
|
|
103
110
|
const movedNodeData = JSON.parse(ev.dataTransfer.getData(DATA_TRANSFER_TYPE));
|
|
104
111
|
attrs.enableLogging && console.log(`on drop`, movedNodeData, "on", node.data);
|
|
105
112
|
// attrs.reorderfinish?.();
|
|
106
|
-
const droppedOnSelf = compareObjects(movedNodeData, node.data);
|
|
113
|
+
const droppedOnSelf = (0, utils_1.compareObjects)(movedNodeData, node.data);
|
|
107
114
|
if (!droppedOnSelf) {
|
|
108
115
|
(_a = attrs.onreorder) === null || _a === void 0 ? void 0 : _a.call(attrs, { moved: movedNodeData, target: node.data, above: this.isTargettingAbove });
|
|
109
116
|
}
|
|
@@ -125,14 +132,14 @@ export function createTree() {
|
|
|
125
132
|
const expanded = canHaveChildren && node.expanded;
|
|
126
133
|
const collapsed = canHaveChildren && !node.expanded;
|
|
127
134
|
const targettingDragClass = this.isReorderingOver ? (this.isTargettingAbove ? "mico-tree-reorder-above" : "mico-tree-reorder-below") : "";
|
|
128
|
-
return
|
|
135
|
+
return (0, mithril_1.default)("li.mico-tree-node", {
|
|
129
136
|
// key: item.key,
|
|
130
137
|
}, [
|
|
131
138
|
// The items's label (either a string or Vnode) and expand/collapse control (if there are children)
|
|
132
|
-
|
|
139
|
+
(0, mithril_1.default)("", {
|
|
133
140
|
style: `display: flex; align-items: stretch; max-width: 100%; overflow-x: hidden; ${(attrs.toggleExpansionWithLabel && enableToggling) ? `cursor: pointer;` : ``}`,
|
|
134
141
|
}, [
|
|
135
|
-
expanded ?
|
|
142
|
+
expanded ? (0, mithril_1.default)("button.mico-tree-toggle", {
|
|
136
143
|
style: `width: ${attrs.toggleButtonWidth}; flex: none;`,
|
|
137
144
|
// class: enableToggling ? `hover:text-primary` : `text-view-icon`,
|
|
138
145
|
disabled: !enableToggling,
|
|
@@ -143,8 +150,8 @@ export function createTree() {
|
|
|
143
150
|
node.expanded = false;
|
|
144
151
|
(_a = attrs.ontoggle) === null || _a === void 0 ? void 0 : _a.call(attrs, { node, expanded: false, recursive: ev.altKey });
|
|
145
152
|
},
|
|
146
|
-
}, attrs.expandedIcon ||
|
|
147
|
-
collapsed ?
|
|
153
|
+
}, attrs.expandedIcon || (0, mithril_1.default)(icon_1.Icon, { fas: "chevron-down" })) : undefined,
|
|
154
|
+
collapsed ? (0, mithril_1.default)("button.mico-tree-toggle", {
|
|
148
155
|
style: `width: ${attrs.toggleButtonWidth}; flex: none;`,
|
|
149
156
|
// class: enableToggling ? `hover:text-primary` : `text-view-icon`,
|
|
150
157
|
disabled: !enableToggling,
|
|
@@ -155,13 +162,13 @@ export function createTree() {
|
|
|
155
162
|
node.expanded = true;
|
|
156
163
|
(_a = attrs.ontoggle) === null || _a === void 0 ? void 0 : _a.call(attrs, { node, expanded: true, recursive: ev.altKey });
|
|
157
164
|
},
|
|
158
|
-
}, attrs.collapsedIcon ||
|
|
159
|
-
(!canHaveChildren) ?
|
|
165
|
+
}, attrs.collapsedIcon || (0, mithril_1.default)(icon_1.Icon, { fas: "chevron-right" })) : undefined,
|
|
166
|
+
(!canHaveChildren) ? (0, mithril_1.default)(".mico-tree-toggle", {
|
|
160
167
|
style: `width: ${attrs.toggleButtonWidth}; flex: none;`,
|
|
161
|
-
}, attrs.noToggleIcon ||
|
|
162
|
-
|
|
168
|
+
}, attrs.noToggleIcon || (0, mithril_1.default)(icon_1.Icon, { fas: "caret-right" })) : [],
|
|
169
|
+
(0, mithril_1.default)(".mico-tree-label", {
|
|
163
170
|
class: `${targettingDragClass}`,
|
|
164
|
-
style: "position: relative; flex: 1 1 0%; overflow-x: hidden;",
|
|
171
|
+
style: "position: relative; flex: 1 1 0%; overflow-x: hidden;", // width: calc(100% - 1.5rem);
|
|
165
172
|
draggable: enableReordering && (node.draggable !== false),
|
|
166
173
|
onclick: (ev) => {
|
|
167
174
|
var _a;
|
|
@@ -180,16 +187,16 @@ export function createTree() {
|
|
|
180
187
|
ondragend: (ev) => this.handleDragEnd(ev, node),
|
|
181
188
|
}, [
|
|
182
189
|
(typeof node.label === "string")
|
|
183
|
-
?
|
|
190
|
+
? (0, mithril_1.default)("span", node.label)
|
|
184
191
|
: node.label,
|
|
185
192
|
]),
|
|
186
193
|
]),
|
|
187
194
|
// Any nested children within the item
|
|
188
|
-
(expanded) ?
|
|
195
|
+
(expanded) ? (0, mithril_1.default)("ul", {
|
|
189
196
|
style: `margin-left: ${attrs.nestingWidth};`,
|
|
190
197
|
}, [
|
|
191
198
|
...(node.children || []).map((child, i) => {
|
|
192
|
-
return
|
|
199
|
+
return (0, mithril_1.default)(TreeNode, {
|
|
193
200
|
// key: child.key,
|
|
194
201
|
node: child,
|
|
195
202
|
enableToggling: attrs.enableToggling,
|
|
@@ -211,7 +218,7 @@ export function createTree() {
|
|
|
211
218
|
}),
|
|
212
219
|
]) : [],
|
|
213
220
|
(canHaveChildren && !hasChildren && expanded && emptyChildrenMessage !== undefined) ? [
|
|
214
|
-
|
|
221
|
+
(0, mithril_1.default)("span.mico-tree-empty-children", {
|
|
215
222
|
style: `margin-left: ${attrs.toggleButtonWidth};`,
|
|
216
223
|
}, emptyChildrenMessage)
|
|
217
224
|
] : [],
|
|
@@ -1,3 +1,19 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
__exportStar(require("./Tree"), exports);
|
|
18
|
+
__exportStar(require("./tree-node.interface"), exports);
|
|
19
|
+
__exportStar(require("./tree-utils"), exports);
|
|
@@ -1 +1,2 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
@@ -1,3 +1,6 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.allTreeDescendants = allTreeDescendants;
|
|
1
4
|
/**
|
|
2
5
|
* Recursively find the list of all descendants of the given node.
|
|
3
6
|
*
|
|
@@ -7,7 +10,7 @@
|
|
|
7
10
|
* @param node
|
|
8
11
|
* @returns
|
|
9
12
|
*/
|
|
10
|
-
|
|
13
|
+
function allTreeDescendants(node) {
|
|
11
14
|
var _a;
|
|
12
15
|
const descendants = [];
|
|
13
16
|
for (const child of (_a = node.children) !== null && _a !== void 0 ? _a : []) {
|
package/dist/esm/index.js
CHANGED
|
@@ -1,2 +1,18 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
__exportStar(require("./components"), exports);
|
|
18
|
+
__exportStar(require("./utils"), exports);
|
|
@@ -1,4 +1,8 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.dateToHtml = dateToHtml;
|
|
4
|
+
exports.dateToHtmlUTC = dateToHtmlUTC;
|
|
5
|
+
function dateToHtml(d) {
|
|
2
6
|
if (d === undefined)
|
|
3
7
|
return undefined;
|
|
4
8
|
if (d === null)
|
|
@@ -9,7 +13,7 @@ export function dateToHtml(d) {
|
|
|
9
13
|
String(d.getDate()).padStart(2, "0"),
|
|
10
14
|
].join("-");
|
|
11
15
|
}
|
|
12
|
-
|
|
16
|
+
function dateToHtmlUTC(d) {
|
|
13
17
|
if (d === undefined)
|
|
14
18
|
return undefined;
|
|
15
19
|
if (d === null)
|
package/dist/esm/utils/dom.js
CHANGED
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.coordsWithinElement = coordsWithinElement;
|
|
4
|
+
exports.mouseWithinElement = mouseWithinElement;
|
|
1
5
|
/**
|
|
2
6
|
*
|
|
3
7
|
* @param x
|
|
@@ -6,7 +10,7 @@
|
|
|
6
10
|
* @param strict
|
|
7
11
|
* @returns
|
|
8
12
|
*/
|
|
9
|
-
|
|
13
|
+
function coordsWithinElement(x, y, element, strict = false) {
|
|
10
14
|
const rect = element.getBoundingClientRect();
|
|
11
15
|
return strict
|
|
12
16
|
? (rect.left < x && x < rect.right && rect.top < y && y < rect.bottom)
|
|
@@ -18,7 +22,7 @@ export function coordsWithinElement(x, y, element, strict = false) {
|
|
|
18
22
|
* @param element
|
|
19
23
|
* @returns
|
|
20
24
|
*/
|
|
21
|
-
|
|
25
|
+
function mouseWithinElement(ev, element) {
|
|
22
26
|
const elementRect = element.getBoundingClientRect();
|
|
23
27
|
const isWithin = (ev.clientY >= elementRect.top) &&
|
|
24
28
|
(ev.clientY <= elementRect.bottom) &&
|
package/dist/esm/utils/events.js
CHANGED
|
@@ -1,4 +1,7 @@
|
|
|
1
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.dragEventFiles = dragEventFiles;
|
|
4
|
+
function dragEventFiles(ev) {
|
|
2
5
|
var _a, _b, _c;
|
|
3
6
|
const files = [];
|
|
4
7
|
if ((_a = ev.dataTransfer) === null || _a === void 0 ? void 0 : _a.items) {
|
package/dist/esm/utils/index.js
CHANGED
|
@@ -1,3 +1,19 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
+
};
|
|
16
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
|
+
__exportStar(require("./date-time"), exports);
|
|
18
|
+
__exportStar(require("./dom"), exports);
|
|
19
|
+
__exportStar(require("./events"), exports);
|