@hypericon/mico 0.5.2 → 0.5.3

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 (37) hide show
  1. package/dist/cjs/components/markdown-editor/MarkdownEditor.js +17 -7
  2. package/dist/cjs/components/menu/Menu.d.ts +4 -0
  3. package/dist/cjs/components/menu/Menu.js +10 -2
  4. package/dist/cjs/components/menu/menu-manager.d.ts +1 -0
  5. package/dist/cjs/components/menu/menu-manager.js +36 -4
  6. package/dist/cjs/components/menu/menu-settings.d.ts +2 -0
  7. package/dist/cjs/components/menu/menu-settings.js +2 -0
  8. package/dist/cjs/components/select/SelectOptionsPanel.d.ts +0 -1
  9. package/dist/cjs/components/table/Table.d.ts +2 -2
  10. package/dist/cjs/components/table/Table.js +2 -2
  11. package/dist/cjs/components/toast/toast.js +19 -9
  12. package/dist/cjs/components/tooltip/tooltip-function.js +2 -3
  13. package/dist/cjs/components/tree/Tree.d.ts +30 -30
  14. package/dist/cjs/components/tree/Tree.js +3 -3
  15. package/dist/cjs/components/tree/tree-utils.js +1 -2
  16. package/dist/cjs/utils/date-time.js +2 -3
  17. package/dist/cjs/utils/dom.js +2 -3
  18. package/dist/cjs/utils/events.js +1 -2
  19. package/dist/esm/components/markdown-editor/MarkdownEditor.js +17 -7
  20. package/dist/esm/components/menu/Menu.d.ts +4 -0
  21. package/dist/esm/components/menu/Menu.js +10 -2
  22. package/dist/esm/components/menu/menu-manager.d.ts +1 -0
  23. package/dist/esm/components/menu/menu-manager.js +36 -4
  24. package/dist/esm/components/menu/menu-settings.d.ts +2 -0
  25. package/dist/esm/components/menu/menu-settings.js +2 -0
  26. package/dist/esm/components/select/SelectOptionsPanel.d.ts +0 -1
  27. package/dist/esm/components/table/Table.d.ts +2 -2
  28. package/dist/esm/components/table/Table.js +2 -2
  29. package/dist/esm/components/toast/toast.js +19 -9
  30. package/dist/esm/components/tooltip/tooltip-function.js +2 -3
  31. package/dist/esm/components/tree/Tree.d.ts +30 -30
  32. package/dist/esm/components/tree/Tree.js +3 -3
  33. package/dist/esm/components/tree/tree-utils.js +1 -2
  34. package/dist/esm/utils/date-time.js +2 -3
  35. package/dist/esm/utils/dom.js +2 -3
  36. package/dist/esm/utils/events.js +1 -2
  37. package/package.json +1 -1
@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
15
15
  }) : function(o, v) {
16
16
  o["default"] = v;
17
17
  });
18
- var __importStar = (this && this.__importStar) || function (mod) {
19
- if (mod && mod.__esModule) return mod;
20
- var result = {};
21
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
- __setModuleDefault(result, mod);
23
- return result;
24
- };
18
+ var __importStar = (this && this.__importStar) || (function () {
19
+ var ownKeys = function(o) {
20
+ ownKeys = Object.getOwnPropertyNames || function (o) {
21
+ var ar = [];
22
+ for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
23
+ return ar;
24
+ };
25
+ return ownKeys(o);
26
+ };
27
+ return function (mod) {
28
+ if (mod && mod.__esModule) return mod;
29
+ var result = {};
30
+ if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
31
+ __setModuleDefault(result, mod);
32
+ return result;
33
+ };
34
+ })();
25
35
  Object.defineProperty(exports, "__esModule", { value: true });
26
36
  exports.MarkdownEditor = void 0;
27
37
  const mithril_1 = __importStar(require("mithril"));
@@ -6,6 +6,10 @@ export interface MenuOptions {
6
6
  forceFlipH?: boolean;
7
7
  /** Add the menu directly to the element which raised the event */
8
8
  asChild?: boolean;
9
+ /** Optionally display a menu using an HTMLDialogElement */
10
+ asDialog?: boolean;
11
+ /** Whether the menu is within a dialog, and should be displayed differently */
12
+ isWithinDialog?: boolean;
9
13
  }
10
14
  export declare const Menu: m.Component<{
11
15
  x: number | undefined;
@@ -19,7 +19,7 @@ exports.Menu = {
19
19
  // if (dom) this.el = dom as HTMLDivElement;
20
20
  },
21
21
  view({ attrs, children }) {
22
- var _a, _b, _c, _d, _e, _f;
22
+ var _a, _b, _c, _d, _e, _f, _g, _h;
23
23
  const maxWidthPx = Math.min(window.innerWidth, menu_constants_1.MENU_CONSTANTS.MAX_WIDTH_PX);
24
24
  const maxHeightPx = window.innerHeight / 2;
25
25
  const xPx = (_a = attrs.x) !== null && _a !== void 0 ? _a : 0;
@@ -36,6 +36,11 @@ exports.Menu = {
36
36
  flipH = true;
37
37
  if (((_f = attrs.options) === null || _f === void 0 ? void 0 : _f.forceFlipV) === true)
38
38
  flipV = true;
39
+ // if the menu is a dialog, don't flip vertically or horizontally
40
+ if ((_g = attrs.options) === null || _g === void 0 ? void 0 : _g.asDialog) {
41
+ flipV = false;
42
+ flipH = false;
43
+ }
39
44
  // console.log({
40
45
  // "yPx": yPx,
41
46
  // "maxHeightPx": maxHeightPx,
@@ -46,10 +51,13 @@ exports.Menu = {
46
51
  // TODO: don't let the menu width actually touch the screen width; it will fall off the left hand side
47
52
  const posH = flipH ? `right: ${window.innerWidth - xPx}px;` : `left: ${xPx}px;`;
48
53
  const posV = flipV ? `bottom: ${window.innerHeight - yPx}px;` : `top: ${yPx}px;`;
54
+ const position = ((_h = attrs.options) === null || _h === void 0 ? void 0 : _h.isWithinDialog)
55
+ ? `fixed`
56
+ : `absolute`;
49
57
  return (0, mithril_1.default)("", {
50
58
  key: Date.now(),
51
59
  class: `mico-menu ${menu_settings_1.MENU_SETTINGS.MENU_CLASS}`,
52
- style: `position: absolute; overflow-y: auto; overflow-x: hidden; ${posH} ${posV} z-index: 100; min-width: ${menu_constants_1.MENU_CONSTANTS.MIN_WIDTH_PX}px; max-width: ${maxWidthPx}px; max-height: ${maxHeightPx}px;`,
60
+ style: `position: ${position}; overflow-y: auto; overflow-x: hidden; ${posH} ${posV} z-index: 100; min-width: ${menu_constants_1.MENU_CONSTANTS.MIN_WIDTH_PX}px; max-width: ${maxWidthPx}px; max-height: ${maxHeightPx}px;`,
53
61
  tabIndex: -1,
54
62
  onkeydown: (ev) => {
55
63
  var _a, _b, _c, _d, _e, _f;
@@ -4,6 +4,7 @@ export declare class MenuManager {
4
4
  private containerEl;
5
5
  private directParentEl;
6
6
  private directParentWrapperEl;
7
+ private dialogEl;
7
8
  private _menuVnode;
8
9
  menuVnode$: import("rxjs").Observable<m.Vnode<any, any> | undefined>;
9
10
  get menuVnode(): m.Vnode<any, any> | undefined;
@@ -39,6 +39,17 @@ class MenuManager {
39
39
  this.hide();
40
40
  }
41
41
  });
42
+ // Create the empty dialog element
43
+ this.dialogEl = document.createElement("dialog");
44
+ this.dialogEl.classList.add("mico-menu-dialog");
45
+ // this.dialogEl.style.position = "";
46
+ this.dialogEl.style.top = "0";
47
+ // this.dialogEl.style.left = "0";
48
+ this.dialogEl.style.margin = "0";
49
+ this.dialogEl.style.padding = "0";
50
+ this.dialogEl.style.backgroundColor = "transparent";
51
+ this.dialogEl.style.border = "none";
52
+ document.body.append(this.dialogEl);
42
53
  }
43
54
  /**
44
55
  * Show a new "right-click" menu at the position of the given mouse event,
@@ -50,8 +61,8 @@ class MenuManager {
50
61
  * @param menuContents
51
62
  */
52
63
  show(ev, menuContents, options) {
53
- var _a;
54
64
  return __awaiter(this, void 0, void 0, function* () {
65
+ var _a, _b;
55
66
  ev === null || ev === void 0 ? void 0 : ev.stopPropagation();
56
67
  if (this.isOpen) {
57
68
  this.hide();
@@ -59,16 +70,34 @@ class MenuManager {
59
70
  yield new Promise((resolve, reject) => {
60
71
  setTimeout(() => resolve(), 0);
61
72
  });
73
+ let y = menu_settings_1.MENU_SETTINGS.ANCHOR === "page" ? ev === null || ev === void 0 ? void 0 : ev.pageY : ev === null || ev === void 0 ? void 0 : ev.clientY;
74
+ // When the event is raised from within a dialog element,
75
+ // automatically set the menu to be a dialog as well.
76
+ // This makes menus that are opened from within a dialog automatically function correctly.
77
+ if (menu_settings_1.MENU_SETTINGS.DETECT_MENU_IN_DIALOG && (ev === null || ev === void 0 ? void 0 : ev.target) instanceof HTMLElement && ev.target.closest("dialog")) {
78
+ options = options || {};
79
+ options.isWithinDialog = true;
80
+ y = (_a = ev === null || ev === void 0 ? void 0 : ev.clientY) !== null && _a !== void 0 ? _a : 0; // Use clientY to position the menu within the dialog
81
+ }
62
82
  const menuVnode = (0, mithril_1.default)(Menu_1.Menu, {
63
83
  x: ev === null || ev === void 0 ? void 0 : ev.clientX,
64
- y: menu_settings_1.MENU_SETTINGS.ANCHOR === "page" ? ev === null || ev === void 0 ? void 0 : ev.pageY : ev === null || ev === void 0 ? void 0 : ev.clientY,
84
+ y: y,
65
85
  options,
66
86
  }, [
67
87
  menuContents,
68
88
  ]);
69
89
  this._menuVnode.next(menuVnode);
90
+ // If the menu is to be shown as a dialog, we need to mount it to a dialog element
91
+ if (options === null || options === void 0 ? void 0 : options.asDialog) {
92
+ // this.dialogEl = document.createElement("dialog");
93
+ // this.dialogEl.classList.add("mico-menu-dialog");
94
+ // document.body.append(this.dialogEl);
95
+ this.dialogEl.show();
96
+ mithril_1.default.render(this.dialogEl, menuVnode);
97
+ return;
98
+ }
70
99
  // m.render(this.containerEl, menuVnode);
71
- const asChild = (_a = options === null || options === void 0 ? void 0 : options.asChild) !== null && _a !== void 0 ? _a : menu_settings_1.MENU_SETTINGS.AS_CHILD;
100
+ const asChild = (_b = options === null || options === void 0 ? void 0 : options.asChild) !== null && _b !== void 0 ? _b : menu_settings_1.MENU_SETTINGS.AS_CHILD;
72
101
  if (asChild && (ev === null || ev === void 0 ? void 0 : ev.target) && ev.target instanceof HTMLElement) {
73
102
  this.directParentEl = ev.target;
74
103
  this.directParentWrapperEl = document.createElement("div");
@@ -78,15 +107,18 @@ class MenuManager {
78
107
  else {
79
108
  mithril_1.default.render(this.containerEl, menuVnode);
80
109
  }
110
+ // console.log("Added menu");
81
111
  });
82
112
  }
83
113
  hide() {
84
- var _a;
114
+ var _a, _b;
85
115
  this._menuVnode.next(undefined);
86
116
  mithril_1.default.render(this.containerEl, []);
87
117
  (_a = this.directParentWrapperEl) === null || _a === void 0 ? void 0 : _a.remove();
88
118
  this.directParentWrapperEl = undefined;
89
119
  this.directParentEl = undefined;
120
+ (_b = this.dialogEl) === null || _b === void 0 ? void 0 : _b.close();
121
+ mithril_1.default.render(this.dialogEl, []);
90
122
  // console.log("Closed menu");
91
123
  }
92
124
  /**
@@ -7,4 +7,6 @@ export declare const MENU_SETTINGS: {
7
7
  MENU_BUTTON_HINT_CLASS: string;
8
8
  MENU_SEPARATOR_CLASS: string;
9
9
  AS_CHILD: boolean;
10
+ /** Automatically display menus differently when opened from within a dialog */
11
+ DETECT_MENU_IN_DIALOG: boolean;
10
12
  };
@@ -10,4 +10,6 @@ exports.MENU_SETTINGS = {
10
10
  MENU_BUTTON_HINT_CLASS: "",
11
11
  MENU_SEPARATOR_CLASS: "",
12
12
  AS_CHILD: false, // Default to not adding the menu as a child of the element that raised the event
13
+ /** Automatically display menus differently when opened from within a dialog */
14
+ DETECT_MENU_IN_DIALOG: true,
13
15
  };
@@ -1,4 +1,3 @@
1
- /// <reference types="node" />
2
1
  import m from "mithril";
3
2
  import { Subscription } from "rxjs";
4
3
  export declare const SelectOptionsPanel: m.Component<{}, {
@@ -59,10 +59,10 @@ export declare function typedTable<T>(): {
59
59
  col: TableColumnDefinitionFn<T>;
60
60
  oninit?(this: m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>, vnode: m.Vnode<TableAttrs<T>, m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>>): any;
61
61
  oncreate?(this: m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>, vnode: m.VnodeDOM<TableAttrs<T>, m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>>): any;
62
- onbeforeremove?(this: m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>, vnode: m.VnodeDOM<TableAttrs<T>, m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>>): void | Promise<any>;
62
+ onbeforeremove?(this: m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>, vnode: m.VnodeDOM<TableAttrs<T>, m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>>): Promise<any> | void;
63
63
  onremove?(this: m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>, vnode: m.VnodeDOM<TableAttrs<T>, m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>>): any;
64
64
  onbeforeupdate?(this: m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>, vnode: m.Vnode<TableAttrs<T>, m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>>, old: m.VnodeDOM<TableAttrs<T>, m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>>): boolean | void;
65
65
  onupdate?(this: m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>, vnode: m.VnodeDOM<TableAttrs<T>, m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>>): any;
66
- view(this: m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>, vnode: m.Vnode<TableAttrs<T>, m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>>): void | m.Children;
66
+ view(this: m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>, vnode: m.Vnode<TableAttrs<T>, m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>>): m.Children | null | void;
67
67
  };
68
68
  export declare const Table: m.Component<TableAttrs<any>, TableState<any>>;
@@ -3,7 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
3
3
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.Table = exports.typedTable = void 0;
6
+ exports.Table = void 0;
7
+ exports.typedTable = typedTable;
7
8
  const mithril_1 = __importDefault(require("mithril"));
8
9
  /**
9
10
  * Build a typed Table component which includes type checking for column definitions
@@ -27,7 +28,6 @@ function typedTable() {
27
28
  };
28
29
  return Object.assign(Object.assign({}, typedTable), { col });
29
30
  }
30
- exports.typedTable = typedTable;
31
31
  exports.Table = {
32
32
  view({ attrs }) {
33
33
  var _a, _b, _c, _d;
@@ -15,18 +15,29 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
15
15
  }) : function(o, v) {
16
16
  o["default"] = v;
17
17
  });
18
- var __importStar = (this && this.__importStar) || function (mod) {
19
- if (mod && mod.__esModule) return mod;
20
- var result = {};
21
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
- __setModuleDefault(result, mod);
23
- return result;
24
- };
18
+ var __importStar = (this && this.__importStar) || (function () {
19
+ var ownKeys = function(o) {
20
+ ownKeys = Object.getOwnPropertyNames || function (o) {
21
+ var ar = [];
22
+ for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
23
+ return ar;
24
+ };
25
+ return ownKeys(o);
26
+ };
27
+ return function (mod) {
28
+ if (mod && mod.__esModule) return mod;
29
+ var result = {};
30
+ if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
31
+ __setModuleDefault(result, mod);
32
+ return result;
33
+ };
34
+ })();
25
35
  var __importDefault = (this && this.__importDefault) || function (mod) {
26
36
  return (mod && mod.__esModule) ? mod : { "default": mod };
27
37
  };
28
38
  Object.defineProperty(exports, "__esModule", { value: true });
29
- exports.toast = exports.DefaultToastOptions = void 0;
39
+ exports.DefaultToastOptions = void 0;
40
+ exports.toast = toast;
30
41
  const toastify_js_1 = __importStar(require("toastify-js"));
31
42
  const mithril_1 = __importDefault(require("mithril"));
32
43
  require("toastify-js/src/toastify.css");
@@ -58,4 +69,3 @@ function toast(message, options) {
58
69
  hide: () => toastify.hideToast(),
59
70
  };
60
71
  }
61
- exports.toast = toast;
@@ -1,6 +1,7 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.tooltipSpread = exports.tooltip = void 0;
3
+ exports.tooltip = tooltip;
4
+ exports.tooltipSpread = tooltipSpread;
4
5
  const tooltip_defaults_1 = require("./tooltip-defaults");
5
6
  /**
6
7
  * Display a tooltip using the given mouse event.
@@ -62,7 +63,6 @@ function tooltip(ev, tooltip, opts) {
62
63
  };
63
64
  target.addEventListener("mouseleave", clearFn);
64
65
  }
65
- exports.tooltip = tooltip;
66
66
  /**
67
67
  * Return an object that can be spread into an element's attrs to add a tooltip using the mouseenter event
68
68
  *
@@ -85,7 +85,6 @@ function tooltipSpread(value, opts) {
85
85
  onmouseenter: (ev) => tooltip(ev, value, opts),
86
86
  };
87
87
  }
88
- exports.tooltipSpread = tooltipSpread;
89
88
  /**
90
89
  * TODO: consider adding arrows to top/bottom/left/right positioned tooltips
91
90
  * e.g.: https://getbootstrap.com/docs/3.4/javascript/#tooltips
@@ -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 | undefined;
10
+ enableReordering?: boolean;
11
11
  /** Enable expanding/collapsing of nodes with children */
12
- enableToggling?: boolean | undefined;
12
+ enableToggling?: boolean;
13
13
  /** Enable debug logging of certain events */
14
- enableLogging?: boolean | undefined;
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 | undefined;
33
+ emptyChildrenMessage?: string;
34
34
  /** Optionally override the default icon for a collapsed node */
35
- collapsedIcon?: m.Vnode<any, any> | undefined;
35
+ collapsedIcon?: m.Vnode<any, any>;
36
36
  /** Optionally override the default icon for an expanded node */
37
- expandedIcon?: m.Vnode<any, any> | undefined;
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> | undefined;
39
+ noToggleIcon?: m.Vnode<any, any>;
40
40
  /** Optionally enable toggling of expansion nodes by clicking their labels */
41
- toggleExpansionWithLabel?: boolean | undefined;
41
+ toggleExpansionWithLabel?: boolean;
42
42
  /** Optionally override the default nesting width */
43
- nestingWidth?: string | undefined;
43
+ nestingWidth?: string;
44
44
  /** Optionally override the default toggle button width */
45
- toggleButtonWidth?: string | undefined;
45
+ toggleButtonWidth?: string;
46
46
  /** Optional CSS classes to apply to the root div */
47
- class?: string | undefined;
47
+ class?: string;
48
48
  /** Optional CSS styles to apply to the root div */
49
- style?: string | undefined;
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 | undefined;
65
+ enableReordering?: boolean;
66
66
  /** Enable expanding/collapsing of nodes with children */
67
- enableToggling?: boolean | undefined;
67
+ enableToggling?: boolean;
68
68
  /** Enable debug logging of certain events */
69
- enableLogging?: boolean | undefined;
69
+ enableLogging?: boolean;
70
70
  /** Function called when a node with children is toggled */
71
- ontoggle?: ((toggle: {
71
+ ontoggle?: (toggle: {
72
72
  node: TreeNode<TNodeData>;
73
73
  expanded: boolean;
74
74
  recursive: boolean;
75
- }) => void) | undefined;
75
+ }) => void;
76
76
  /** Function called when a node label is clicked */
77
- onclick?: ((click: {
77
+ onclick?: (click: {
78
78
  ev: MouseEvent;
79
79
  node: TreeNode<TNodeData>;
80
- }) => void) | undefined;
80
+ }) => void;
81
81
  /** Function called when a node has been dragged to a new position in the tree */
82
- onreorder?: ((reorder: {
82
+ onreorder?: (reorder: {
83
83
  moved: TNodeData;
84
84
  target: TNodeData;
85
85
  above: boolean;
86
- }) => void) | undefined;
86
+ }) => void;
87
87
  /** Optional message to display in defined but empty children lists */
88
- emptyChildrenMessage?: string | undefined;
88
+ emptyChildrenMessage?: string;
89
89
  /** Optionally override the default icon for a collapsed node */
90
- collapsedIcon?: m.Vnode<any, any> | undefined;
90
+ collapsedIcon?: m.Vnode<any, any>;
91
91
  /** Optionally override the default icon for an expanded node */
92
- expandedIcon?: m.Vnode<any, any> | undefined;
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> | undefined;
94
+ noToggleIcon?: m.Vnode<any, any>;
95
95
  /** Optionally enable toggling of expansion nodes by clicking their labels */
96
- toggleExpansionWithLabel?: boolean | undefined;
96
+ toggleExpansionWithLabel?: boolean;
97
97
  /** Optionally override the default nesting width */
98
- nestingWidth?: string | undefined;
98
+ nestingWidth?: string;
99
99
  /** Optionally override the default toggle button width */
100
- toggleButtonWidth?: string | undefined;
100
+ toggleButtonWidth?: string;
101
101
  /** Optional CSS classes to apply to the root div */
102
- class?: string | undefined;
102
+ class?: string;
103
103
  /** Optional CSS styles to apply to the root div */
104
- style?: string | undefined;
104
+ style?: string;
105
105
  }, {
106
106
  isReordering: boolean;
107
107
  thisEl: Element;
@@ -3,7 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
3
3
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.createTree = exports.Tree = void 0;
6
+ exports.Tree = void 0;
7
+ exports.createTree = createTree;
7
8
  const utils_1 = require("@hypericon/utils");
8
9
  const mithril_1 = __importDefault(require("mithril"));
9
10
  const icon_1 = require("../icon");
@@ -167,7 +168,7 @@ function createTree() {
167
168
  }, attrs.noToggleIcon || (0, mithril_1.default)(icon_1.Icon, { fas: "caret-right" })) : [],
168
169
  (0, mithril_1.default)(".mico-tree-label", {
169
170
  class: `${targettingDragClass}`,
170
- 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);
171
172
  draggable: enableReordering && (node.draggable !== false),
172
173
  onclick: (ev) => {
173
174
  var _a;
@@ -226,4 +227,3 @@ function createTree() {
226
227
  };
227
228
  return Tree;
228
229
  }
229
- exports.createTree = createTree;
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.allTreeDescendants = void 0;
3
+ exports.allTreeDescendants = allTreeDescendants;
4
4
  /**
5
5
  * Recursively find the list of all descendants of the given node.
6
6
  *
@@ -19,4 +19,3 @@ function allTreeDescendants(node) {
19
19
  }
20
20
  return descendants;
21
21
  }
22
- exports.allTreeDescendants = allTreeDescendants;
@@ -1,6 +1,7 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.dateToHtmlUTC = exports.dateToHtml = void 0;
3
+ exports.dateToHtml = dateToHtml;
4
+ exports.dateToHtmlUTC = dateToHtmlUTC;
4
5
  function dateToHtml(d) {
5
6
  if (d === undefined)
6
7
  return undefined;
@@ -12,7 +13,6 @@ function dateToHtml(d) {
12
13
  String(d.getDate()).padStart(2, "0"),
13
14
  ].join("-");
14
15
  }
15
- exports.dateToHtml = dateToHtml;
16
16
  function dateToHtmlUTC(d) {
17
17
  if (d === undefined)
18
18
  return undefined;
@@ -24,4 +24,3 @@ function dateToHtmlUTC(d) {
24
24
  String(d.getUTCDate()).padStart(2, "0"),
25
25
  ].join("-");
26
26
  }
27
- exports.dateToHtmlUTC = dateToHtmlUTC;
@@ -1,6 +1,7 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.mouseWithinElement = exports.coordsWithinElement = void 0;
3
+ exports.coordsWithinElement = coordsWithinElement;
4
+ exports.mouseWithinElement = mouseWithinElement;
4
5
  /**
5
6
  *
6
7
  * @param x
@@ -15,7 +16,6 @@ function coordsWithinElement(x, y, element, strict = false) {
15
16
  ? (rect.left < x && x < rect.right && rect.top < y && y < rect.bottom)
16
17
  : (rect.left <= x && x <= rect.right && rect.top <= y && y <= rect.bottom);
17
18
  }
18
- exports.coordsWithinElement = coordsWithinElement;
19
19
  /**
20
20
  * Find whether a mouse event is within a given DOM element using clientX/Y and the bounding client rect
21
21
  * @param ev
@@ -30,4 +30,3 @@ function mouseWithinElement(ev, element) {
30
30
  (ev.clientX <= elementRect.right);
31
31
  return isWithin;
32
32
  }
33
- exports.mouseWithinElement = mouseWithinElement;
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.dragEventFiles = void 0;
3
+ exports.dragEventFiles = dragEventFiles;
4
4
  function dragEventFiles(ev) {
5
5
  var _a, _b, _c;
6
6
  const files = [];
@@ -26,4 +26,3 @@ function dragEventFiles(ev) {
26
26
  }
27
27
  return files;
28
28
  }
29
- exports.dragEventFiles = dragEventFiles;
@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
15
15
  }) : function(o, v) {
16
16
  o["default"] = v;
17
17
  });
18
- var __importStar = (this && this.__importStar) || function (mod) {
19
- if (mod && mod.__esModule) return mod;
20
- var result = {};
21
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
- __setModuleDefault(result, mod);
23
- return result;
24
- };
18
+ var __importStar = (this && this.__importStar) || (function () {
19
+ var ownKeys = function(o) {
20
+ ownKeys = Object.getOwnPropertyNames || function (o) {
21
+ var ar = [];
22
+ for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
23
+ return ar;
24
+ };
25
+ return ownKeys(o);
26
+ };
27
+ return function (mod) {
28
+ if (mod && mod.__esModule) return mod;
29
+ var result = {};
30
+ if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
31
+ __setModuleDefault(result, mod);
32
+ return result;
33
+ };
34
+ })();
25
35
  Object.defineProperty(exports, "__esModule", { value: true });
26
36
  exports.MarkdownEditor = void 0;
27
37
  const mithril_1 = __importStar(require("mithril"));
@@ -6,6 +6,10 @@ export interface MenuOptions {
6
6
  forceFlipH?: boolean;
7
7
  /** Add the menu directly to the element which raised the event */
8
8
  asChild?: boolean;
9
+ /** Optionally display a menu using an HTMLDialogElement */
10
+ asDialog?: boolean;
11
+ /** Whether the menu is within a dialog, and should be displayed differently */
12
+ isWithinDialog?: boolean;
9
13
  }
10
14
  export declare const Menu: m.Component<{
11
15
  x: number | undefined;
@@ -19,7 +19,7 @@ exports.Menu = {
19
19
  // if (dom) this.el = dom as HTMLDivElement;
20
20
  },
21
21
  view({ attrs, children }) {
22
- var _a, _b, _c, _d, _e, _f;
22
+ var _a, _b, _c, _d, _e, _f, _g, _h;
23
23
  const maxWidthPx = Math.min(window.innerWidth, menu_constants_1.MENU_CONSTANTS.MAX_WIDTH_PX);
24
24
  const maxHeightPx = window.innerHeight / 2;
25
25
  const xPx = (_a = attrs.x) !== null && _a !== void 0 ? _a : 0;
@@ -36,6 +36,11 @@ exports.Menu = {
36
36
  flipH = true;
37
37
  if (((_f = attrs.options) === null || _f === void 0 ? void 0 : _f.forceFlipV) === true)
38
38
  flipV = true;
39
+ // if the menu is a dialog, don't flip vertically or horizontally
40
+ if ((_g = attrs.options) === null || _g === void 0 ? void 0 : _g.asDialog) {
41
+ flipV = false;
42
+ flipH = false;
43
+ }
39
44
  // console.log({
40
45
  // "yPx": yPx,
41
46
  // "maxHeightPx": maxHeightPx,
@@ -46,10 +51,13 @@ exports.Menu = {
46
51
  // TODO: don't let the menu width actually touch the screen width; it will fall off the left hand side
47
52
  const posH = flipH ? `right: ${window.innerWidth - xPx}px;` : `left: ${xPx}px;`;
48
53
  const posV = flipV ? `bottom: ${window.innerHeight - yPx}px;` : `top: ${yPx}px;`;
54
+ const position = ((_h = attrs.options) === null || _h === void 0 ? void 0 : _h.isWithinDialog)
55
+ ? `fixed`
56
+ : `absolute`;
49
57
  return (0, mithril_1.default)("", {
50
58
  key: Date.now(),
51
59
  class: `mico-menu ${menu_settings_1.MENU_SETTINGS.MENU_CLASS}`,
52
- style: `position: absolute; overflow-y: auto; overflow-x: hidden; ${posH} ${posV} z-index: 100; min-width: ${menu_constants_1.MENU_CONSTANTS.MIN_WIDTH_PX}px; max-width: ${maxWidthPx}px; max-height: ${maxHeightPx}px;`,
60
+ style: `position: ${position}; overflow-y: auto; overflow-x: hidden; ${posH} ${posV} z-index: 100; min-width: ${menu_constants_1.MENU_CONSTANTS.MIN_WIDTH_PX}px; max-width: ${maxWidthPx}px; max-height: ${maxHeightPx}px;`,
53
61
  tabIndex: -1,
54
62
  onkeydown: (ev) => {
55
63
  var _a, _b, _c, _d, _e, _f;
@@ -4,6 +4,7 @@ export declare class MenuManager {
4
4
  private containerEl;
5
5
  private directParentEl;
6
6
  private directParentWrapperEl;
7
+ private dialogEl;
7
8
  private _menuVnode;
8
9
  menuVnode$: import("rxjs").Observable<m.Vnode<any, any> | undefined>;
9
10
  get menuVnode(): m.Vnode<any, any> | undefined;
@@ -39,6 +39,17 @@ class MenuManager {
39
39
  this.hide();
40
40
  }
41
41
  });
42
+ // Create the empty dialog element
43
+ this.dialogEl = document.createElement("dialog");
44
+ this.dialogEl.classList.add("mico-menu-dialog");
45
+ // this.dialogEl.style.position = "";
46
+ this.dialogEl.style.top = "0";
47
+ // this.dialogEl.style.left = "0";
48
+ this.dialogEl.style.margin = "0";
49
+ this.dialogEl.style.padding = "0";
50
+ this.dialogEl.style.backgroundColor = "transparent";
51
+ this.dialogEl.style.border = "none";
52
+ document.body.append(this.dialogEl);
42
53
  }
43
54
  /**
44
55
  * Show a new "right-click" menu at the position of the given mouse event,
@@ -50,8 +61,8 @@ class MenuManager {
50
61
  * @param menuContents
51
62
  */
52
63
  show(ev, menuContents, options) {
53
- var _a;
54
64
  return __awaiter(this, void 0, void 0, function* () {
65
+ var _a, _b;
55
66
  ev === null || ev === void 0 ? void 0 : ev.stopPropagation();
56
67
  if (this.isOpen) {
57
68
  this.hide();
@@ -59,16 +70,34 @@ class MenuManager {
59
70
  yield new Promise((resolve, reject) => {
60
71
  setTimeout(() => resolve(), 0);
61
72
  });
73
+ let y = menu_settings_1.MENU_SETTINGS.ANCHOR === "page" ? ev === null || ev === void 0 ? void 0 : ev.pageY : ev === null || ev === void 0 ? void 0 : ev.clientY;
74
+ // When the event is raised from within a dialog element,
75
+ // automatically set the menu to be a dialog as well.
76
+ // This makes menus that are opened from within a dialog automatically function correctly.
77
+ if (menu_settings_1.MENU_SETTINGS.DETECT_MENU_IN_DIALOG && (ev === null || ev === void 0 ? void 0 : ev.target) instanceof HTMLElement && ev.target.closest("dialog")) {
78
+ options = options || {};
79
+ options.isWithinDialog = true;
80
+ y = (_a = ev === null || ev === void 0 ? void 0 : ev.clientY) !== null && _a !== void 0 ? _a : 0; // Use clientY to position the menu within the dialog
81
+ }
62
82
  const menuVnode = (0, mithril_1.default)(Menu_1.Menu, {
63
83
  x: ev === null || ev === void 0 ? void 0 : ev.clientX,
64
- y: menu_settings_1.MENU_SETTINGS.ANCHOR === "page" ? ev === null || ev === void 0 ? void 0 : ev.pageY : ev === null || ev === void 0 ? void 0 : ev.clientY,
84
+ y: y,
65
85
  options,
66
86
  }, [
67
87
  menuContents,
68
88
  ]);
69
89
  this._menuVnode.next(menuVnode);
90
+ // If the menu is to be shown as a dialog, we need to mount it to a dialog element
91
+ if (options === null || options === void 0 ? void 0 : options.asDialog) {
92
+ // this.dialogEl = document.createElement("dialog");
93
+ // this.dialogEl.classList.add("mico-menu-dialog");
94
+ // document.body.append(this.dialogEl);
95
+ this.dialogEl.show();
96
+ mithril_1.default.render(this.dialogEl, menuVnode);
97
+ return;
98
+ }
70
99
  // m.render(this.containerEl, menuVnode);
71
- const asChild = (_a = options === null || options === void 0 ? void 0 : options.asChild) !== null && _a !== void 0 ? _a : menu_settings_1.MENU_SETTINGS.AS_CHILD;
100
+ const asChild = (_b = options === null || options === void 0 ? void 0 : options.asChild) !== null && _b !== void 0 ? _b : menu_settings_1.MENU_SETTINGS.AS_CHILD;
72
101
  if (asChild && (ev === null || ev === void 0 ? void 0 : ev.target) && ev.target instanceof HTMLElement) {
73
102
  this.directParentEl = ev.target;
74
103
  this.directParentWrapperEl = document.createElement("div");
@@ -78,15 +107,18 @@ class MenuManager {
78
107
  else {
79
108
  mithril_1.default.render(this.containerEl, menuVnode);
80
109
  }
110
+ // console.log("Added menu");
81
111
  });
82
112
  }
83
113
  hide() {
84
- var _a;
114
+ var _a, _b;
85
115
  this._menuVnode.next(undefined);
86
116
  mithril_1.default.render(this.containerEl, []);
87
117
  (_a = this.directParentWrapperEl) === null || _a === void 0 ? void 0 : _a.remove();
88
118
  this.directParentWrapperEl = undefined;
89
119
  this.directParentEl = undefined;
120
+ (_b = this.dialogEl) === null || _b === void 0 ? void 0 : _b.close();
121
+ mithril_1.default.render(this.dialogEl, []);
90
122
  // console.log("Closed menu");
91
123
  }
92
124
  /**
@@ -7,4 +7,6 @@ export declare const MENU_SETTINGS: {
7
7
  MENU_BUTTON_HINT_CLASS: string;
8
8
  MENU_SEPARATOR_CLASS: string;
9
9
  AS_CHILD: boolean;
10
+ /** Automatically display menus differently when opened from within a dialog */
11
+ DETECT_MENU_IN_DIALOG: boolean;
10
12
  };
@@ -10,4 +10,6 @@ exports.MENU_SETTINGS = {
10
10
  MENU_BUTTON_HINT_CLASS: "",
11
11
  MENU_SEPARATOR_CLASS: "",
12
12
  AS_CHILD: false, // Default to not adding the menu as a child of the element that raised the event
13
+ /** Automatically display menus differently when opened from within a dialog */
14
+ DETECT_MENU_IN_DIALOG: true,
13
15
  };
@@ -1,4 +1,3 @@
1
- /// <reference types="node" />
2
1
  import m from "mithril";
3
2
  import { Subscription } from "rxjs";
4
3
  export declare const SelectOptionsPanel: m.Component<{}, {
@@ -59,10 +59,10 @@ export declare function typedTable<T>(): {
59
59
  col: TableColumnDefinitionFn<T>;
60
60
  oninit?(this: m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>, vnode: m.Vnode<TableAttrs<T>, m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>>): any;
61
61
  oncreate?(this: m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>, vnode: m.VnodeDOM<TableAttrs<T>, m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>>): any;
62
- onbeforeremove?(this: m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>, vnode: m.VnodeDOM<TableAttrs<T>, m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>>): void | Promise<any>;
62
+ onbeforeremove?(this: m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>, vnode: m.VnodeDOM<TableAttrs<T>, m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>>): Promise<any> | void;
63
63
  onremove?(this: m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>, vnode: m.VnodeDOM<TableAttrs<T>, m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>>): any;
64
64
  onbeforeupdate?(this: m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>, vnode: m.Vnode<TableAttrs<T>, m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>>, old: m.VnodeDOM<TableAttrs<T>, m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>>): boolean | void;
65
65
  onupdate?(this: m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>, vnode: m.VnodeDOM<TableAttrs<T>, m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>>): any;
66
- view(this: m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>, vnode: m.Vnode<TableAttrs<T>, m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>>): void | m.Children;
66
+ view(this: m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>, vnode: m.Vnode<TableAttrs<T>, m._NoLifecycle<m.Component<TableAttrs<T>, TableState<T>> & TableState<T>>>): m.Children | null | void;
67
67
  };
68
68
  export declare const Table: m.Component<TableAttrs<any>, TableState<any>>;
@@ -3,7 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
3
3
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.Table = exports.typedTable = void 0;
6
+ exports.Table = void 0;
7
+ exports.typedTable = typedTable;
7
8
  const mithril_1 = __importDefault(require("mithril"));
8
9
  /**
9
10
  * Build a typed Table component which includes type checking for column definitions
@@ -27,7 +28,6 @@ function typedTable() {
27
28
  };
28
29
  return Object.assign(Object.assign({}, typedTable), { col });
29
30
  }
30
- exports.typedTable = typedTable;
31
31
  exports.Table = {
32
32
  view({ attrs }) {
33
33
  var _a, _b, _c, _d;
@@ -15,18 +15,29 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
15
15
  }) : function(o, v) {
16
16
  o["default"] = v;
17
17
  });
18
- var __importStar = (this && this.__importStar) || function (mod) {
19
- if (mod && mod.__esModule) return mod;
20
- var result = {};
21
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
- __setModuleDefault(result, mod);
23
- return result;
24
- };
18
+ var __importStar = (this && this.__importStar) || (function () {
19
+ var ownKeys = function(o) {
20
+ ownKeys = Object.getOwnPropertyNames || function (o) {
21
+ var ar = [];
22
+ for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
23
+ return ar;
24
+ };
25
+ return ownKeys(o);
26
+ };
27
+ return function (mod) {
28
+ if (mod && mod.__esModule) return mod;
29
+ var result = {};
30
+ if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
31
+ __setModuleDefault(result, mod);
32
+ return result;
33
+ };
34
+ })();
25
35
  var __importDefault = (this && this.__importDefault) || function (mod) {
26
36
  return (mod && mod.__esModule) ? mod : { "default": mod };
27
37
  };
28
38
  Object.defineProperty(exports, "__esModule", { value: true });
29
- exports.toast = exports.DefaultToastOptions = void 0;
39
+ exports.DefaultToastOptions = void 0;
40
+ exports.toast = toast;
30
41
  const toastify_js_1 = __importStar(require("toastify-js"));
31
42
  const mithril_1 = __importDefault(require("mithril"));
32
43
  require("toastify-js/src/toastify.css");
@@ -58,4 +69,3 @@ function toast(message, options) {
58
69
  hide: () => toastify.hideToast(),
59
70
  };
60
71
  }
61
- exports.toast = toast;
@@ -1,6 +1,7 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.tooltipSpread = exports.tooltip = void 0;
3
+ exports.tooltip = tooltip;
4
+ exports.tooltipSpread = tooltipSpread;
4
5
  const tooltip_defaults_1 = require("./tooltip-defaults");
5
6
  /**
6
7
  * Display a tooltip using the given mouse event.
@@ -62,7 +63,6 @@ function tooltip(ev, tooltip, opts) {
62
63
  };
63
64
  target.addEventListener("mouseleave", clearFn);
64
65
  }
65
- exports.tooltip = tooltip;
66
66
  /**
67
67
  * Return an object that can be spread into an element's attrs to add a tooltip using the mouseenter event
68
68
  *
@@ -85,7 +85,6 @@ function tooltipSpread(value, opts) {
85
85
  onmouseenter: (ev) => tooltip(ev, value, opts),
86
86
  };
87
87
  }
88
- exports.tooltipSpread = tooltipSpread;
89
88
  /**
90
89
  * TODO: consider adding arrows to top/bottom/left/right positioned tooltips
91
90
  * e.g.: https://getbootstrap.com/docs/3.4/javascript/#tooltips
@@ -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 | undefined;
10
+ enableReordering?: boolean;
11
11
  /** Enable expanding/collapsing of nodes with children */
12
- enableToggling?: boolean | undefined;
12
+ enableToggling?: boolean;
13
13
  /** Enable debug logging of certain events */
14
- enableLogging?: boolean | undefined;
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 | undefined;
33
+ emptyChildrenMessage?: string;
34
34
  /** Optionally override the default icon for a collapsed node */
35
- collapsedIcon?: m.Vnode<any, any> | undefined;
35
+ collapsedIcon?: m.Vnode<any, any>;
36
36
  /** Optionally override the default icon for an expanded node */
37
- expandedIcon?: m.Vnode<any, any> | undefined;
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> | undefined;
39
+ noToggleIcon?: m.Vnode<any, any>;
40
40
  /** Optionally enable toggling of expansion nodes by clicking their labels */
41
- toggleExpansionWithLabel?: boolean | undefined;
41
+ toggleExpansionWithLabel?: boolean;
42
42
  /** Optionally override the default nesting width */
43
- nestingWidth?: string | undefined;
43
+ nestingWidth?: string;
44
44
  /** Optionally override the default toggle button width */
45
- toggleButtonWidth?: string | undefined;
45
+ toggleButtonWidth?: string;
46
46
  /** Optional CSS classes to apply to the root div */
47
- class?: string | undefined;
47
+ class?: string;
48
48
  /** Optional CSS styles to apply to the root div */
49
- style?: string | undefined;
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 | undefined;
65
+ enableReordering?: boolean;
66
66
  /** Enable expanding/collapsing of nodes with children */
67
- enableToggling?: boolean | undefined;
67
+ enableToggling?: boolean;
68
68
  /** Enable debug logging of certain events */
69
- enableLogging?: boolean | undefined;
69
+ enableLogging?: boolean;
70
70
  /** Function called when a node with children is toggled */
71
- ontoggle?: ((toggle: {
71
+ ontoggle?: (toggle: {
72
72
  node: TreeNode<TNodeData>;
73
73
  expanded: boolean;
74
74
  recursive: boolean;
75
- }) => void) | undefined;
75
+ }) => void;
76
76
  /** Function called when a node label is clicked */
77
- onclick?: ((click: {
77
+ onclick?: (click: {
78
78
  ev: MouseEvent;
79
79
  node: TreeNode<TNodeData>;
80
- }) => void) | undefined;
80
+ }) => void;
81
81
  /** Function called when a node has been dragged to a new position in the tree */
82
- onreorder?: ((reorder: {
82
+ onreorder?: (reorder: {
83
83
  moved: TNodeData;
84
84
  target: TNodeData;
85
85
  above: boolean;
86
- }) => void) | undefined;
86
+ }) => void;
87
87
  /** Optional message to display in defined but empty children lists */
88
- emptyChildrenMessage?: string | undefined;
88
+ emptyChildrenMessage?: string;
89
89
  /** Optionally override the default icon for a collapsed node */
90
- collapsedIcon?: m.Vnode<any, any> | undefined;
90
+ collapsedIcon?: m.Vnode<any, any>;
91
91
  /** Optionally override the default icon for an expanded node */
92
- expandedIcon?: m.Vnode<any, any> | undefined;
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> | undefined;
94
+ noToggleIcon?: m.Vnode<any, any>;
95
95
  /** Optionally enable toggling of expansion nodes by clicking their labels */
96
- toggleExpansionWithLabel?: boolean | undefined;
96
+ toggleExpansionWithLabel?: boolean;
97
97
  /** Optionally override the default nesting width */
98
- nestingWidth?: string | undefined;
98
+ nestingWidth?: string;
99
99
  /** Optionally override the default toggle button width */
100
- toggleButtonWidth?: string | undefined;
100
+ toggleButtonWidth?: string;
101
101
  /** Optional CSS classes to apply to the root div */
102
- class?: string | undefined;
102
+ class?: string;
103
103
  /** Optional CSS styles to apply to the root div */
104
- style?: string | undefined;
104
+ style?: string;
105
105
  }, {
106
106
  isReordering: boolean;
107
107
  thisEl: Element;
@@ -3,7 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
3
3
  return (mod && mod.__esModule) ? mod : { "default": mod };
4
4
  };
5
5
  Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.createTree = exports.Tree = void 0;
6
+ exports.Tree = void 0;
7
+ exports.createTree = createTree;
7
8
  const utils_1 = require("@hypericon/utils");
8
9
  const mithril_1 = __importDefault(require("mithril"));
9
10
  const icon_1 = require("../icon");
@@ -167,7 +168,7 @@ function createTree() {
167
168
  }, attrs.noToggleIcon || (0, mithril_1.default)(icon_1.Icon, { fas: "caret-right" })) : [],
168
169
  (0, mithril_1.default)(".mico-tree-label", {
169
170
  class: `${targettingDragClass}`,
170
- 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);
171
172
  draggable: enableReordering && (node.draggable !== false),
172
173
  onclick: (ev) => {
173
174
  var _a;
@@ -226,4 +227,3 @@ function createTree() {
226
227
  };
227
228
  return Tree;
228
229
  }
229
- exports.createTree = createTree;
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.allTreeDescendants = void 0;
3
+ exports.allTreeDescendants = allTreeDescendants;
4
4
  /**
5
5
  * Recursively find the list of all descendants of the given node.
6
6
  *
@@ -19,4 +19,3 @@ function allTreeDescendants(node) {
19
19
  }
20
20
  return descendants;
21
21
  }
22
- exports.allTreeDescendants = allTreeDescendants;
@@ -1,6 +1,7 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.dateToHtmlUTC = exports.dateToHtml = void 0;
3
+ exports.dateToHtml = dateToHtml;
4
+ exports.dateToHtmlUTC = dateToHtmlUTC;
4
5
  function dateToHtml(d) {
5
6
  if (d === undefined)
6
7
  return undefined;
@@ -12,7 +13,6 @@ function dateToHtml(d) {
12
13
  String(d.getDate()).padStart(2, "0"),
13
14
  ].join("-");
14
15
  }
15
- exports.dateToHtml = dateToHtml;
16
16
  function dateToHtmlUTC(d) {
17
17
  if (d === undefined)
18
18
  return undefined;
@@ -24,4 +24,3 @@ function dateToHtmlUTC(d) {
24
24
  String(d.getUTCDate()).padStart(2, "0"),
25
25
  ].join("-");
26
26
  }
27
- exports.dateToHtmlUTC = dateToHtmlUTC;
@@ -1,6 +1,7 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.mouseWithinElement = exports.coordsWithinElement = void 0;
3
+ exports.coordsWithinElement = coordsWithinElement;
4
+ exports.mouseWithinElement = mouseWithinElement;
4
5
  /**
5
6
  *
6
7
  * @param x
@@ -15,7 +16,6 @@ function coordsWithinElement(x, y, element, strict = false) {
15
16
  ? (rect.left < x && x < rect.right && rect.top < y && y < rect.bottom)
16
17
  : (rect.left <= x && x <= rect.right && rect.top <= y && y <= rect.bottom);
17
18
  }
18
- exports.coordsWithinElement = coordsWithinElement;
19
19
  /**
20
20
  * Find whether a mouse event is within a given DOM element using clientX/Y and the bounding client rect
21
21
  * @param ev
@@ -30,4 +30,3 @@ function mouseWithinElement(ev, element) {
30
30
  (ev.clientX <= elementRect.right);
31
31
  return isWithin;
32
32
  }
33
- exports.mouseWithinElement = mouseWithinElement;
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.dragEventFiles = void 0;
3
+ exports.dragEventFiles = dragEventFiles;
4
4
  function dragEventFiles(ev) {
5
5
  var _a, _b, _c;
6
6
  const files = [];
@@ -26,4 +26,3 @@ function dragEventFiles(ev) {
26
26
  }
27
27
  return files;
28
28
  }
29
- exports.dragEventFiles = dragEventFiles;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hypericon/mico",
3
- "version": "0.5.2",
3
+ "version": "0.5.3",
4
4
  "description": "UI components and utilities with Mithril",
5
5
  "author": "Ed Johnson, Hypericon Ltd",
6
6
  "license": "MIT",