@hypericon/mico 0.2.0 → 0.2.1

package/README.md

@@ -6,3 +6,9 @@
 UI components and utilities built with Mithril. 
 
 <a href="https://www.npmjs.com/package/@hypericon/mico">![NPM badge](https://img.shields.io/npm/v/@hypericon/mico)</a>
+
+## Installation
+
+```sh
+$ npm i @hypericon/mico
+```

package/dist/components/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./icon";
 export * from "./markdown";
+export * from "./table";

package/dist/components/index.js

@@ -26,7 +26,7 @@ __exportStar(require("./markdown"), exports);
 // export * from "./pagination";
 // export * from "./popover";
 // export * from "./reorderable-list";
-// export * from "./table";
+__exportStar(require("./table"), exports);
 // export * from "./toast";
 // export * from "./tooltip";
 // export * from "./tree";

package/dist/components/markdown/Markdown.d.ts

@@ -22,6 +22,11 @@ export declare const Markdown: m.Component<{
     unsanitised?: boolean;
     /** Highlight syntax */
     highlight?: boolean;
+    /**
+     * Wrap all the given "markdown" in triple-backticks with the given language string and enable highlighting
+     * @example "typescript"
+     */
+    highlightAllAs?: string;
     /** CSS classes to apply to the container div */
     class?: string;
     /** CSS styles to apply to the container div */

package/dist/components/markdown/Markdown.js

@@ -27,7 +27,7 @@ exports.MARKDOWN_DEFAULT_OPTIONS = {
 exports.Markdown = {
     oncreate({ attrs }) {
         var _a;
-        if (attrs.highlight === true) {
+        if (attrs.highlight === true || Boolean(attrs.highlightAllAs)) {
             // console.log("highlighting...");
             (_a = window.hljs) === null || _a === void 0 ? void 0 : _a.highlightAll();
             // hljs.highlightAll();
@@ -41,7 +41,10 @@ exports.Markdown = {
     // },
     view({ attrs, children }) {
         var _a, _b, _c, _d, _e, _f;
-        const markdown = (_c = (_b = (_a = attrs.markdown) !== null && _a !== void 0 ? _a : (typeof children === "string" ? children : undefined)) !== null && _b !== void 0 ? _b : (children instanceof Array && children.length > 0 && typeof children[0] === "string" ? children[0] : undefined)) !== null && _c !== void 0 ? _c : "";
+        let markdown = (_c = (_b = (_a = attrs.markdown) !== null && _a !== void 0 ? _a : (typeof children === "string" ? children : undefined)) !== null && _b !== void 0 ? _b : (children instanceof Array && children.length > 0 && typeof children[0] === "string" ? children[0] : undefined)) !== null && _c !== void 0 ? _c : "";
+        if (attrs.highlightAllAs) {
+            markdown = "```" + attrs.highlightAllAs + "\n" + markdown + "\n" + "```";
+        }
         const parsed = marked_1.marked.parse(markdown, (_d = attrs.markedOptions) !== null && _d !== void 0 ? _d : exports.MARKDOWN_DEFAULT_OPTIONS);
         const sanitised = attrs.unsanitised === true ? parsed : dompurify_1.default.sanitize(parsed);
         const result = sanitised;

package/dist/components/table/Table.d.ts

@@ -0,0 +1,54 @@
+import m from "mithril";
+export type TableCellDisplayFn<T> = (item: T, index: number) => string | number | boolean | m.Vnode<any, any> | null | undefined;
+export type TableColumnDefinition<T> = {
+    header: string | m.Vnode<any, any>;
+    cell: TableCellDisplayFn<T>;
+};
+export interface TableAttrs<T> {
+    /** The list of items to display as rows */
+    data: T[];
+    /** The definitions of the table columns */
+    columns: TableColumnDefinition<T>[];
+    /** Set the table to automatically size columns to fit (default), or use fixed column widths */
+    layout?: "auto" | "fixed";
+    /** Override the default message displayed when there are no data items */
+    emptyMessage?: string;
+    /** Any CSS classes to apply to the table */
+    class?: string;
+    /** Any CSS styles to apply to the table */
+    style?: string;
+}
+export interface TableState<T> {
+}
+/** Helper function to make it easier to define table columns */
+export type TableColumnDefinitionFn<T> = (
+/** The label or other element to display in the header */
+header: string | m.Vnode<any, any>, 
+/** Function defining how to display a cell in the column using the given row item */
+cell: TableCellDisplayFn<T>) => TableColumnDefinition<T>;
+/**
+ * Build a typed Table component which includes type checking for column definitions
+ * @example
+ * ```ts
+ * const PersonTable = typedTable<Person>();
+ * m(PersonTable, {
+ *   data: people, // `data` is type checked
+ *   columns: [
+ *     PersonTable.col("Name", p => p.name), // `p` is type checked
+ *     PersonTable.col("Age", p => findAge(p.dob)), // `p` is type checked
+ *    ],
+ * }),
+ * ```
+ * @returns
+ */
+export declare function typedTable<T>(): {
+    col: TableColumnDefinitionFn<T>;
+    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;
+    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;
+    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>;
+    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;
+    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;
+    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;
+    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;
+};
+export declare const Table: m.Component<TableAttrs<any>, TableState<any>>;

package/dist/components/table/Table.js

@@ -0,0 +1,68 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Table = exports.typedTable = void 0;
+const mithril_1 = __importDefault(require("mithril"));
+/**
+ * Build a typed Table component which includes type checking for column definitions
+ * @example
+ * ```ts
+ * const PersonTable = typedTable<Person>();
+ * m(PersonTable, {
+ *   data: people, // `data` is type checked
+ *   columns: [
+ *     PersonTable.col("Name", p => p.name), // `p` is type checked
+ *     PersonTable.col("Age", p => findAge(p.dob)), // `p` is type checked
+ *    ],
+ * }),
+ * ```
+ * @returns
+ */
+function typedTable() {
+    const typedTable = exports.Table;
+    const col = (header, cell) => {
+        return { header, cell };
+    };
+    return Object.assign(Object.assign({}, typedTable), { col });
+}
+exports.typedTable = typedTable;
+exports.Table = {
+    view({ attrs }) {
+        var _a, _b, _c, _d;
+        return (0, mithril_1.default)("table", {
+            class: attrs.class,
+            style: `${(_a = attrs.style) !== null && _a !== void 0 ? _a : ""} table-layout: ${((_b = attrs.layout) !== null && _b !== void 0 ? _b : "auto")};`,
+        }, [
+            (0, mithril_1.default)("thead", [
+                (0, mithril_1.default)("tr", [
+                    attrs.columns.map(col => {
+                        return (0, mithril_1.default)("th", [
+                            col.header,
+                        ]);
+                    }),
+                ]),
+            ]),
+            (0, mithril_1.default)("tbody", [
+                attrs.data.map(item => {
+                    return (0, mithril_1.default)("tr", [
+                        attrs.columns.map((col, index) => {
+                            var _a;
+                            return (0, mithril_1.default)("td", [
+                                (_a = col.cell) === null || _a === void 0 ? void 0 : _a.call(col, item, index),
+                            ]);
+                        }),
+                    ]);
+                }),
+                ((_c = attrs.data) === null || _c === void 0 ? void 0 : _c.length) === 0 ? (0, mithril_1.default)("tr", [
+                    (0, mithril_1.default)("td.text-center.text-medium", {
+                        colspan: attrs.columns.length,
+                    }, [
+                        (_d = attrs.emptyMessage) !== null && _d !== void 0 ? _d : "No items",
+                    ]),
+                ]) : [],
+            ]),
+        ]);
+    }
+};

package/dist/components/table/index.d.ts

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

package/dist/components/table/index.js

@@ -1 +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("./Table"), exports);

package/package.json

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