@hypericon/mico 0.3.5 → 0.3.6

package/README.md

@@ -12,3 +12,57 @@ UI components and utilities built with Mithril.
 ```sh
 $ npm i @hypericon/mico
 ```
+
+## Usage
+
+**[View the usage and examples documentation here.](https://hypericon-mico.netlify.app)**
+
+### Example
+
+Import the components from the package. Some components may also export functions to build typed versions. Components that have customisable styles have their CSS classes of config attributes documented on the documentation site
+
+```ts
+import m from "mithril";
+import { typedTable } from "@hypericon/mico";
+import { Widget } from "../interfaces"; // Example
+import { WidgetService } from "../services"; // Example
+import { WidgetStatusIcon } from "../components"; // Example
+
+const WidgetTable = typedTable<Widget>();
+
+const ExamplePage: m.Component = {
+  view() {
+    return m("", [
+      m("h1", "Widgets"),
+      m(WidgetTable, {
+        data: WidgetService.widgets,
+        columns: [
+          WidgetTable.col("Position", (w, i) => i + 1), // Row index is supplied
+          WidgetTable.col("Name", w => w.name), // Type checking on row object properties
+          WidgetTable.col("Price", w => `£${w.price}`),
+          WidgetTable.col("Status", w => m(WidgetStatusIcon, { widget: w })),
+          // etc.
+        ],
+      }),
+    ]);
+  }
+};
+```
+
+## Development
+
+Start a hot-reloading dev server serving the documentation and example site with
+
+```sh
+$ npm run dev
+```
+
+Publish the updated package and deploy the latest version of the docs site with
+
+```sh
+$ npm run publish-deploy
+```
+
+## License
+
+MIT

package/dist/components/drop-target/DropTarget.d.ts

@@ -0,0 +1,24 @@
+import m from "mithril";
+import { DropTargetState } from "./drop-target.state";
+export declare const DropTarget: m.Component<{
+    /**
+     * Function called when the user drops one or more files onto the drop target
+     * @param result
+     * @returns
+     */
+    onDropFiles: (result: {
+        files: File[];
+        ev: DragEvent;
+    }) => any;
+    /** The message to display in the drop target */
+    dropMessage?: string | m.Children;
+    /**
+     * Whether to automatically set the height of the drop target baed on the height of the wrapped elements
+     * @default true
+     */
+    autoHeight?: boolean;
+    class?: string;
+    style?: string;
+}, {
+    state: DropTargetState;
+}>;

package/dist/components/drop-target/DropTarget.js

@@ -0,0 +1,62 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DropTarget = void 0;
+const mithril_1 = __importDefault(require("mithril"));
+const drop_target_state_1 = require("./drop-target.state");
+const utils_1 = require("../../utils");
+exports.DropTarget = {
+    oninit() {
+        this.state = new drop_target_state_1.DropTargetState();
+    },
+    oncreate({ dom }) {
+        this.state.lastHeight = dom.clientHeight;
+    },
+    onupdate({ dom }) {
+        if (!this.state.isDragging) {
+            this.state.lastHeight = dom.clientHeight;
+        }
+    },
+    view({ attrs, children }) {
+        const autoHeightStr = (attrs.autoHeight !== false) ? `height: ${this.state.lastHeight}px;` : "";
+        return (0, mithril_1.default)(".mico-drop-container", {
+            class: attrs.class,
+            style: attrs.style,
+        }, [
+            this.state.isDragging ? [
+                (0, mithril_1.default)("", {
+                    class: `mico-drop-target ${this.state.isOver ? "highlighted" : ""}`,
+                    style: `${autoHeightStr} display: flex; flex-direction: column; align-items: center; justify-content: center;`,
+                    ondragover: (ev) => {
+                        this.state.isOver = true;
+                    },
+                    ondragleave: (ev) => {
+                        const containsNewTarget = ev.currentTarget.contains(ev.relatedTarget);
+                        if (!containsNewTarget) {
+                            this.state.isOver = false;
+                        }
+                        ev.preventDefault();
+                        return false;
+                    },
+                    ondrop: (ev) => {
+                        // console.log("ondrop", ev);
+                        this.state.isOver = false;
+                        ev.preventDefault();
+                        const files = (0, utils_1.dragEventFiles)(ev);
+                        if (files.length > 0) {
+                            attrs.onDropFiles({ ev, files });
+                        }
+                    },
+                }, [
+                    (attrs.dropMessage && typeof attrs.dropMessage === "object")
+                        ? attrs.dropMessage
+                        : (0, mithril_1.default)("span.mico-drop-target-message", attrs.dropMessage || "Drop files here"),
+                ]),
+            ] : [
+                children,
+            ],
+        ]);
+    }
+};

package/dist/components/drop-target/drop-target.state.d.ts

@@ -0,0 +1,9 @@
+export declare class DropTargetState {
+    private subs;
+    isDragging: boolean;
+    isOver: boolean;
+    lastHeight: number;
+    constructor();
+    initialise(): void;
+    destroy(): void;
+}

package/dist/components/drop-target/drop-target.state.js

@@ -0,0 +1,77 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DropTargetState = void 0;
+const mithril_1 = require("mithril");
+const rxjs_1 = require("rxjs");
+class DropTargetState {
+    constructor() {
+        this.subs = new rxjs_1.Subscription();
+        this.isDragging = false;
+        this.isOver = false;
+        this.lastHeight = 100;
+        this.initialise();
+    }
+    initialise() {
+        this.destroy();
+        this.subs = new rxjs_1.Subscription();
+        this.isDragging = false;
+        this.isOver = false;
+        const onclick = () => {
+            this.isDragging = false;
+            (0, mithril_1.redraw)();
+        };
+        const ondragstart = (ev) => {
+            ev.preventDefault();
+        };
+        const ondragend = (ev) => {
+            this.isDragging = false;
+            (0, mithril_1.redraw)();
+            ev.preventDefault();
+        };
+        const ondragenter = (ev) => {
+            this.isDragging = true;
+            (0, mithril_1.redraw)();
+            ev.preventDefault();
+        };
+        const ondragover = (ev) => {
+            ev.preventDefault();
+        };
+        const ondragleave = (ev) => {
+            // if the drag moved from the element to outside the element
+            const containsTarget = ev.currentTarget.contains(ev.relatedTarget);
+            if (!containsTarget) {
+                // console.log("page ondragleave, isDragging=false")
+                this.isDragging = false;
+                (0, mithril_1.redraw)();
+            }
+        };
+        const ondrag = (ev) => {
+            ev.preventDefault();
+        };
+        const ondrop = (ev) => {
+            this.isDragging = false;
+            (0, mithril_1.redraw)();
+            ev.preventDefault();
+        };
+        document.addEventListener("click", onclick);
+        this.subs.add(() => document.removeEventListener("click", onclick));
+        document.addEventListener("dragstart", ondragstart);
+        this.subs.add(() => document.removeEventListener("dragstart", ondragstart));
+        document.addEventListener("dragend", ondragend);
+        this.subs.add(() => document.removeEventListener("dragend", ondragend));
+        document.addEventListener("dragenter", ondragenter);
+        this.subs.add(() => document.removeEventListener("dragenter", ondragenter));
+        document.addEventListener("dragover", ondragover);
+        this.subs.add(() => document.removeEventListener("dragover", ondragover));
+        document.addEventListener("dragleave", ondragleave);
+        this.subs.add(() => document.removeEventListener("dragleave", ondragleave));
+        document.addEventListener("drag", ondrag);
+        this.subs.add(() => document.removeEventListener("drag", ondrag));
+        document.addEventListener("drop", ondrop);
+        this.subs.add(() => document.removeEventListener("drop", ondrop));
+    }
+    destroy() {
+        this.subs.unsubscribe();
+    }
+}
+exports.DropTargetState = DropTargetState;

package/dist/components/drop-target/index.d.ts

@@ -0,0 +1 @@
+export * from "./DropTarget";

package/dist/components/drop-target/index.js

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./DropTarget"), exports);

package/dist/components/index.d.ts

@@ -1,4 +1,5 @@
 export * from "./dialog";
+export * from "./drop-target";
 export * from "./icon";
 export * from "./markdown";
 export * from "./menu";

package/dist/components/index.js

@@ -19,6 +19,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 // export * from "./data-table";
 __exportStar(require("./dialog"), exports);
 // export * from "./drawer";
+__exportStar(require("./drop-target"), exports);
 // export * from "./form";
 __exportStar(require("./icon"), exports);
 __exportStar(require("./markdown"), exports);

package/dist/utils/events.d.ts

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

package/dist/utils/events.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dragEventFiles = void 0;
+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;
+}
+exports.dragEventFiles = dragEventFiles;

package/dist/utils/index.d.ts

@@ -1 +1,2 @@
 export * from "./date-time";
+export * from "./events";

package/dist/utils/index.js

@@ -15,3 +15,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./date-time"), exports);
+__exportStar(require("./events"), exports);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hypericon/mico",
-  "version": "0.3.5",
+  "version": "0.3.6",
   "description": "UI components and utilities with Mithril",
   "author": "Ed Johnson, Hypericon Ltd",
   "license": "MIT",