@hypericon/mico 0.3.23 → 0.4.0

package/dist/esm/utils/dom.js

@@ -0,0 +1,28 @@
+/**
+ *
+ * @param x
+ * @param y
+ * @param element
+ * @param strict
+ * @returns
+ */
+export function coordsWithinElement(x, y, element, strict = false) {
+    const rect = element.getBoundingClientRect();
+    return strict
+        ? (rect.left < x && x < rect.right && rect.top < y && y < rect.bottom)
+        : (rect.left <= x && x <= rect.right && rect.top <= y && y <= rect.bottom);
+}
+/**
+ * Find whether a mouse event is within a given DOM element using clientX/Y and the bounding client rect
+ * @param ev
+ * @param element
+ * @returns
+ */
+export function mouseWithinElement(ev, element) {
+    const elementRect = element.getBoundingClientRect();
+    const isWithin = (ev.clientY >= elementRect.top) &&
+        (ev.clientY <= elementRect.bottom) &&
+        (ev.clientX >= elementRect.left) &&
+        (ev.clientX <= elementRect.right);
+    return isWithin;
+}

package/dist/esm/utils/events.d.ts

@@ -0,0 +1 @@
+export declare function dragEventFiles(ev: DragEvent): File[];

package/dist/esm/utils/events.js

@@ -0,0 +1,25 @@
+export function dragEventFiles(ev) {
+    var _a, _b, _c;
+    const files = [];
+    if ((_a = ev.dataTransfer) === null || _a === void 0 ? void 0 : _a.items) {
+        // Use DataTransferItemList interface to access the file(s)
+        [...ev.dataTransfer.items].forEach((item, i) => {
+            // If dropped items aren't files, reject them
+            if (item.kind === "file") {
+                const file = item.getAsFile();
+                if (file) {
+                    // console.log(`… file[${i}].name = ${file.name}`);
+                    files.push(file);
+                }
+            }
+        });
+    }
+    else {
+        // Use DataTransfer interface to access the file(s)
+        [...(_c = (_b = ev.dataTransfer) === null || _b === void 0 ? void 0 : _b.files) !== null && _c !== void 0 ? _c : []].forEach((file, i) => {
+            // console.log(`… file[${i}].name = ${file.name}`);
+            files.push(file);
+        });
+    }
+    return files;
+}

package/dist/esm/utils/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./date-time";
+export * from "./dom";
+export * from "./events";

package/dist/esm/utils/index.js

@@ -0,0 +1,3 @@
+export * from "./date-time";
+export * from "./dom";
+export * from "./events";

package/package.json

@@ -1,14 +1,18 @@
 {
   "name": "@hypericon/mico",
-  "version": "0.3.23",
+  "version": "0.4.0",
   "description": "UI components and utilities with Mithril",
   "author": "Ed Johnson, Hypericon Ltd",
   "license": "MIT",
-  "main": "dist/index.js",
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
   "scripts": {
     "dev": "vite",
     "prebuild": "rimraf dist",
-    "build": "tsc --project src",
+    "build_old": "tsc --project src",
+    "build": "npm run build-esm && npm run build-cjs",
+    "build-esm": "tsc --project ./tsconfig.browser.json",
+    "build-cjs": "tsc --project ./tsconfig.node.json",
     "build-docs": "vite build",
     "prepublishOnly": "npm run build",
     "predeploy": "npm run build-docs",
@@ -24,13 +28,15 @@
     "highlight.js": "^11.8.0",
     "marked": "^4.3.0",
     "mithril": "^2.2.2",
-    "rxjs": "^7.8.1"
+    "rxjs": "^7.8.1",
+    "toastify-js": "^1.12.0"
   },
   "devDependencies": {
     "@types/dompurify": "^3.0.2",
     "@types/marked": "^4.3.0",
     "@types/mithril": "^2.0.12",
     "@types/node": "^20.1.4",
+    "@types/toastify-js": "^1.11.1",
     "rimraf": "^5.0.0",
     "typescript": "^5.0.4",
     "vite": "^4.3.5"

package/dist/components/tooltip/tooltip-function.js

@@ -1,204 +0,0 @@
-"use strict";
-// import { container } from "tsyringe";
-// import { getLogger } from "~common/services/get-logger";
-// import { Logger, LogLevel } from "~common/services/logger.service";
-// import { MobileModeService } from "~common/services/mobile-mode.service";
-// const mobileMode = container.resolve(MobileModeService);
-// export interface TooltipOpts {
-//   /** Specify the position of the tooltip */
-//   pos: TooltipPos,
-//   /** Override the default delay in milliseconds */
-//   delay: number,
-//   /** Increase the maximum width and height of the tooltip */
-//   jumbo: boolean,
-//   /** The tooltip should be attached to the document instead of the moused-over element */
-//   attachToBody: boolean,
-// }
-// export type TooltipPos = "cursor" | "top" | "bottom" | "left" | "right" | "follow";
-// const DEFAULT_POS: TooltipPos = "cursor";
-// const DEFAULT_DELAY = 500;
-// const TOOLTIP_CLASS = "hypertable-tooltip";
-// const MAX_WIDTH_PX = 250;
-// const MAX_HEIGHT_PX = 100;
-// const MAX_WIDTH_JUMBO_PX = 400;
-// const MAX_HEIGHT_JUMBO_PX = 300;
-// const logger = getLogger("Tooltip");
-// // logger.logLevel = LogLevel.Debug;
-// /**
-//  * Display a tooltip using the given mouse event.
-//  * Call this function from an element's "mouseenter" event.
-//  * 
-//  * e.g.:
-//  * ```
-//  * onmouseenter: (ev: MouseEvent) => tooltip(ev, "Howdy!"),
-//  * ```
-//  * @param ev 
-//  * @param tooltip Nothing is displayed if the tooltip text is empty
-//  * @param opts 
-//  * @returns 
-//  */
-// export function tooltip(ev: MouseEvent, tooltip: string, opts?: Partial<TooltipOpts>) {
-//   // Tooltips don't work properly in mobile mode
-//   if (mobileMode.isMob) return;
-//   // If there is no tooltip, don't bother
-//   if (!tooltip) return;
-//   const target = ev.currentTarget as HTMLElement | null;
-//   const eventTarget = ev.target as HTMLElement | null;
-//   logger.debug(`target is ${target?.tagName}`);
-//   logger.debug(`event target is ${eventTarget?.tagName}`);
-//   if (!target) {
-//     return logger.debug("No target; returning from tooltip()");
-//   }
-//   // if (target?.classList.contains(TOOLTIP_CLASS) || eventTarget?.classList.contains(TOOLTIP_CLASS)) {
-//   //   return logger.debug("Target is tooltip div; returning from tooltip()");
-//   // }
-//   // This helps avoid re-adding tooltips when mousing over the tooltip itself
-//   let hasTooltip = false;
-//   target.childNodes.forEach((child, key, parent) => {
-//     if ((child as HTMLElement)?.classList?.contains(TOOLTIP_CLASS)) {
-//       hasTooltip = true;
-//     }
-//   });
-//   if (hasTooltip) {
-//     return logger.debug("Target already has tooltip; returning from tooltip()");
-//   }
-//   const mousePos = { x: ev.x, y: ev.y };
-//   const latestPosFn = (ev: MouseEvent) => {
-//     mousePos.x = ev.x;
-//     mousePos.y = ev.y;
-//   };
-//   target.addEventListener("mousemove", latestPosFn);
-//   const timeout = setTimeout(() => {
-//     displayTooltip({ ev, target, tooltip, opts, mousePos });
-//   }, opts?.delay ?? DEFAULT_DELAY);
-//   const clearFn = (ev: MouseEvent) => {
-//     logger.debug("Clearing tooltip timeout");
-//     clearTimeout(timeout);
-//     target.removeEventListener("mouseleave", clearFn);
-//     target.removeEventListener("mousemove", latestPosFn);
-//   };
-//   target.addEventListener("mouseleave", clearFn);
-// }
-// /**
-//  * 
-//  * @param value 
-//  * @param opts 
-//  * @returns 
-//  */
-// export function tooltipSpread(value: string, opts?: Partial<TooltipOpts>) {
-//   return {
-//     onmouseenter: (ev: MouseEvent) => tooltip(ev, value, opts),
-//   };
-// }
-// /**
-//  * TODO: consider adding arrows to top/bottom/left/right positioned tooltips
-//  * e.g.: https://getbootstrap.com/docs/3.4/javascript/#tooltips
-//  */
-// function displayTooltip(settings: {
-//   ev: MouseEvent,
-//   target: HTMLElement,
-//   tooltip: string,
-//   mousePos: { x: number, y: number, }
-//   opts?: Partial<TooltipOpts>,
-// }) {
-//   const { ev, target, tooltip, opts, mousePos } = settings;
-//   const cursorOffsetX = 5;
-//   const cursorOffsetY = 20;
-//   const pos = opts?.pos ?? DEFAULT_POS;
-//   let targetRect = target.getBoundingClientRect();
-//   // targetRect = new DOMRect(targetRect.x, targetRect.y, targetRect.width, targetRect.height);
-//   let targetCenter = {
-//     x: targetRect.left + (targetRect.width / 2),
-//     y: targetRect.top + (targetRect.height / 2),
-//   };
-//   const maxWidth = opts?.jumbo === true ? MAX_WIDTH_JUMBO_PX : MAX_WIDTH_PX;
-//   const maxHeight = opts?.jumbo === true ? MAX_HEIGHT_JUMBO_PX : MAX_HEIGHT_PX;
-//   logger.debug(`display tooltip "${tooltip}" on element ${target.tagName}`);
-//   const tooltipEl = document.createElement("div");
-//   tooltipEl.innerText = tooltip;
-//   tooltipEl.classList.value = "px-2 py-1 text-xs text-dark font-normal rounded border border-primary bg-white fade-in-100 no-select";
-//   tooltipEl.classList.add(TOOLTIP_CLASS);
-//   tooltipEl.style.position = "fixed";
-//   tooltipEl.style.maxWidth = `${maxWidth}px`;
-//   tooltipEl.style.maxHeight = `${maxHeight}px`;
-//   tooltipEl.style.zIndex = "1000";
-//   tooltipEl.style.whiteSpace = "normal";
-//   tooltipEl.style.opacity = "1";
-//   tooltipEl.style.textAlign = "left";
-//   tooltipEl.style.overflow = "hidden";
-//   tooltipEl.setAttribute("role", "tooltip");
-//   // // Add the tooltip before positioning it to read its dimensions
-//   // console.log(`tooltipEl width: ${tooltipEl.clientWidth}`);
-//   // console.log(`tooltipEl height: ${tooltipEl.clientHeight}`);
-//   if (settings.opts?.attachToBody === true) {
-//     document.body.append(tooltipEl);
-//   } else {
-//     target.append(tooltipEl);
-//   }
-//   // console.log(`tooltipEl width: ${tooltipEl.clientWidth}`);
-//   // console.log(`tooltipEl height: ${tooltipEl.clientHeight}`);
-//   if (pos === "cursor" || pos === "follow") {
-//     tooltipEl.style.top = `${mousePos.y + cursorOffsetY}px`;
-//     if (mousePos.x < window.innerWidth - maxWidth) {
-//       tooltipEl.style.left = `${mousePos.x + cursorOffsetX}px`;
-//     } else {
-//       tooltipEl.style.right = `${document.documentElement.clientWidth - mousePos.x - cursorOffsetX}px`;
-//     }
-//   } else if (pos === "top") {
-//     tooltipEl.style.bottom = `${window.innerHeight - targetRect.top}px`; // - window.scrollY
-//     tooltipEl.style.left = `${targetCenter.x - tooltipEl.clientWidth / 2}px`;
-//   } else if (pos === "bottom") {
-//     tooltipEl.style.top = `${targetRect.bottom}px`; // + window.scrollY
-//     tooltipEl.style.left = `${targetCenter.x - tooltipEl.clientWidth / 2}px`;
-//   } else if (pos === "left") {
-//     tooltipEl.style.right = `${document.documentElement.clientWidth - targetRect.left}px`;
-//     tooltipEl.style.top = `${targetCenter.y - tooltipEl.clientHeight / 2}px`;
-//   } else if (pos === "right") {
-//     tooltipEl.style.left = `${targetRect.right}px`;
-//     tooltipEl.style.top = `${targetCenter.y - tooltipEl.clientHeight / 2}px`;
-//   }
-//   if (pos === "follow") {
-//     const followFn = (ev: MouseEvent) => {
-//       tooltipEl.style.top = `${ev.y + cursorOffsetY}px`; // + window.scrollY
-//       if (mousePos.x < window.innerWidth - maxWidth) {
-//         tooltipEl.style.left = `${ev.x + cursorOffsetX}px`;
-//         tooltipEl.style.right = "";
-//       } else {
-//         tooltipEl.style.right = `${document.documentElement.clientWidth - ev.x - cursorOffsetX}px`;
-//         tooltipEl.style.left = "";
-//       }
-//     };
-//     const cleanupFn = () => {
-//       target.removeEventListener("mousemove", followFn);
-//       target.removeEventListener("mouseleave", cleanupFn);
-//     }
-//     target.addEventListener("mousemove", followFn);
-//     target.addEventListener("mouseleave", cleanupFn);
-//   }
-//   logger.debug(`displaying tooltip at: ${tooltipEl.style.left}, ${tooltipEl.style.top}`);
-//   const removeFn = () => {
-//     logger.debug(`Removing tooltip ${tooltip} from el ${target.tagName}`);
-//     tooltipEl.onanimationend = (ev: AnimationEvent) => {
-//       logger.debug(ev.animationName);
-//       if (settings.opts?.attachToBody === true) {
-//         document.body.removeChild(tooltipEl);
-//       } else {
-//         target.removeChild(tooltipEl);
-//       }
-//     }
-//     tooltipEl.classList.replace("fade-in-100", "fade-out-100");
-//     target.removeEventListener("mouseleave", removeFn);
-//     tooltipEl.removeEventListener("mouseenter", removeFn);
-//   }
-//   target.addEventListener("mouseleave", removeFn);
-//   tooltipEl.addEventListener("mouseenter", removeFn);
-//   if (settings.opts?.attachToBody === true) {
-//     const bodyListener = (ev: MouseEvent) => {
-//       if (ev.target && !target.contains(ev.target as any)) {
-//         removeFn();
-//         document.body.removeEventListener("mousemove", bodyListener);
-//       }
-//     };
-//     document.body.addEventListener("mousemove", bodyListener);
-//   }
-// }