Mico

Mithril Components

UI components and utilities built with Mithril.

Since version 0.4.0, includes ESM and CJS versions.

Installation

$ npm i @hypericon/mico

Usage

View usage documentation and examples here.

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

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

$ npm run dev

Publish the updated package and deploy the latest version of the docs site with

$ npm run publish-deploy

License

MIT