@nebularstreams/libmui 2.0.1 → 2.0.3

package/package.json

@@ -1,15 +1,12 @@
 {
   "name": "@nebularstreams/libmui",
   "description": "Micro UI based on Mithril",
-  "version": "2.0.1",
+  "version": "2.0.3",
   "type": "module",
   "main": "src/index.js",
   "scripts": {
     "build": "rollup -c"
   },
-  "files": [
-    "dist"
-  ],
   "dependencies": {
     "mithril": "^2.0.0"
   },

package/rollup.config.js

@@ -0,0 +1,20 @@
+import resolve from "@rollup/plugin-node-resolve";
+import commonjs from "@rollup/plugin-commonjs";
+import {terser} from "rollup-plugin-terser";
+import postcss from "rollup-plugin-postcss";
+
+export default {
+    input: "src/index.js",
+    output: [
+        {
+            file: "dist/libui.esm.js",
+            format: "es",
+            sourcemap: true,
+        }
+    ],
+    plugins: [resolve(), commonjs(),   postcss({
+        extract: "libui.css", // Combine all CSS into this file
+        minimize: true, // Minify the CSS
+    }), terser()],
+    external: ["mithril"]
+};

package/src/app/app.js

@@ -0,0 +1,9 @@
+function startApp(target, appMetadata) {
+    m.route(
+        document.getElementById(target),
+        appMetadata.default || "/",
+        appMetadata.routes
+    );
+}
+
+export default startApp;

package/src/css/a-measures.css

@@ -0,0 +1,5 @@
+:root {
+    --unitsize-mini: 1.25rem;
+    --unitsize-small: 2rem;
+    --unitsize: 2.54rem;
+}

package/src/css/b-root-bootstrap-ext.css

@@ -0,0 +1,81 @@
+
+.no-marg-top {
+    margin-top: 0 !important;
+}
+
+.no-marg-bottom {
+    margin-bottom: 0 !important;
+}
+
+.no-marg-right {
+    margin-right: 0 !important;
+}
+
+.no-marg-left {
+    margin-left: 0 !important;
+}
+
+.no-pad-top {
+    padding-top: 0 !important;
+}
+
+.no-pad-bottom {
+    padding-bottom: 0 !important;
+}
+
+.no-pad-left {
+    padding-left: 0 !important;
+}
+
+.no-pad-right {
+    padding-right: 0 !important;
+}
+
+.order-first {
+    order: -1;
+}
+
+.order-1 {
+    order: 1
+}
+
+.order-2 {
+    order: 2
+}
+
+.order-3 {
+    order: 3
+}
+
+.order-4 {
+    order: 4
+}
+
+.order-5 {
+    order: 5
+}
+
+.order-6 {
+    order: 6
+}
+
+
+.to-top {
+    top: 0;
+    bottom: auto !important;
+}
+
+.to-bottom {
+    bottom: 0;
+    top: auto !important;
+}
+
+.to-left {
+    left: 0;
+    right: auto !important;
+}
+
+.to-right {
+    right: 0;
+    left: auto !important;
+}

package/src/css/b-root-bootstrap.css

@@ -0,0 +1,178 @@
+/** b.root.bootstrap */
+
+/* padding, ie. pad-1 pad-h */
+
+.pad-0 {
+    padding: 0;
+}
+
+.pad-1 {
+    padding: 0.25rem;
+}
+
+.pad-2 {
+    padding: 0.5rem;
+}
+
+.pad-3 {
+    padding: 0.75rem;
+}
+
+.pad-4 {
+    padding: 1rem;
+}
+
+.pad-5 {
+    padding: 1.25rem;
+}
+
+.pad-6 {
+    padding: 1.5rem;
+}
+
+.pad-7 {
+    padding: 1.75rem;
+}
+
+.pad-8 {
+    padding: 2rem;
+}
+
+.pad-h {
+    padding-top: 0 !important;
+    padding-bottom: 0 !important;
+}
+
+.pad-v {
+    padding-left: 0 !important;
+    padding-right: 0 !important;
+}
+
+/* margin, ie. marg-1 marg-h */
+.marg-0 {
+    margin: 0;
+}
+
+
+.marg-1 {
+    margin: 0.25rem;
+}
+
+.marg-2 {
+    margin: 0.5rem;
+}
+
+.marg-3 {
+    margin: 0.75rem;
+}
+
+.marg-4 {
+    margin: 1rem;
+}
+
+
+.marg-5 {
+    margin: 1.25rem;
+}
+
+.marg-6 {
+    margin: 1.5rem;
+}
+
+.marg-7 {
+    margin: 1.75rem;
+}
+
+.marg-8 {
+    margin: 2rem;
+}
+
+.marg-t {
+    margin-bottom: 0 !important;
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+}
+
+.marg-b {
+    margin-top: 0 !important;
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+}
+
+.marg-l {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+    margin-right: 0 !important;
+}
+
+.marg-r {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+    margin-left: 0 !important;
+}
+
+.marg-h {
+    margin-top: 0 !important;
+    margin-bottom: 0 !important;
+}
+
+.marg-v {
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+}
+
+.col-1 {
+    width: calc(100% / 12)
+}
+
+.col-2 {
+    width: calc(100% * 2 / 12)
+}
+
+.col-3 {
+    width: calc(100% * 3 / 12)
+}
+
+.col-4 {
+    width: calc(100% * 4 / 12)
+}
+
+.col-5 {
+    width: calc(100% * 5 / 12)
+}
+
+.col-6 {
+    width: calc(100% * 6 / 12)
+}
+
+.col-7 {
+    width: calc(100% * 7 / 12)
+}
+
+.col-8 {
+    width: calc(100% * 8 / 12)
+}
+
+.col-9 {
+    width: calc(100% * 9 / 12)
+}
+
+.col-10 {
+    width: calc(100% * 10 / 12)
+}
+
+.col-11 {
+    width: calc(100% * 11 / 12)
+}
+
+.col-12 {
+    width: 100%
+}
+
+.al-right {
+    text-align: right;
+}
+
+.al-center {
+    text-align: center;
+}

package/src/css/b-root-semantic-flex.css

@@ -0,0 +1,70 @@
+/** b.root.flex */
+
+.flexrow {
+    display: flex;
+    flex-direction: row;
+}
+
+.flexcol {
+    display: flex;
+    flex-direction: column;
+}
+
+.flexcenter {
+    align-self: center;
+    justify-content: center;
+}
+
+.flexaround {
+    justify-content: space-around;
+}
+
+.flexeven {
+    justify-content: space-evenly;
+}
+
+.flex-al-center {
+    align-items: center;
+}
+
+.flex-al-end {
+    align-items: flex-end;
+}
+
+.flex-sal-center {
+    align-self: center;
+}
+
+.flex-sal-end {
+    align-self: flex-end;
+}
+
+.wrap {
+    flex-wrap: wrap;
+}
+
+.grows {
+    flex-grow: 1;
+}
+
+.growsheight {
+    flex-grow: 1;
+    height: 50%;
+}
+
+.noshrink {
+    flex-shrink: 0;
+}
+
+.flexbreak {
+    flex-basis: 100%;
+    height: 0;
+}
+
+.flexrow.rev {
+    flex-direction: row-reverse;
+}
+
+.flexcol.rev {
+    flex-direction: column-reverse;
+}

package/src/css/b-root-semantic-size-new.css

@@ -0,0 +1,37 @@
+.w-100 {
+    width: 100%;
+}
+
+.w-75 {
+    width: 75%;
+}
+
+.w-50 {
+    width: 50%;
+}
+
+.w-60 {
+    width: 60%;
+}
+
+.w-40 {
+    width: 40%;
+}
+.w-66 {
+    width: 66.66666%;
+}
+.w-33 {
+    width: 33.333333%;
+}
+
+.h-100 {
+    height: 100%;
+}
+
+.h-75 {
+    height: 75%;
+}
+
+.h-50 {
+    height: 50%;
+}

package/src/css/b-root-semantic-size.css

@@ -0,0 +1,55 @@
+.fullwidth {
+    width: 100%;
+}
+
+.fullheight {
+    height: 100%;
+}
+
+
+.halfwidth {
+    width: 50%;
+}
+
+.halfheight {
+    height: 50%;
+}
+
+.fitheight {
+    height: fit-content;
+}
+
+.fitwidth {
+    width: fit-content;
+}
+
+.unitheight {
+    height: var(--unitsize);
+    line-height: var(--unitsize);
+}
+
+.unitwidth {
+    width: var(--unitsize);
+}
+
+.unitsize {
+    width: var(--unitsize) !important;
+    height: var(--unitsize) !important;
+    line-height: var(--unitsize) !important;
+}
+
+
+.unitheightsmall {
+    height: var(--unitsize-small);
+    line-height: var(--unitsize-small);
+}
+
+.unitwidthsmall {
+    width: var(--unitsize-small);
+}
+
+.unitsizesmall {
+    width: var(--unitsize-small);
+    height: var(--unitsize-small);
+    line-height: var(--unitsize-small);
+}

package/src/css/b-root-semantic-skin.css

@@ -0,0 +1,48 @@
+.fg-accent {
+    color: var(--accent);
+}
+
+.primary {
+    color: var(--primary-color);
+}
+
+.accent-back {
+    color: var(--text-over-accent);
+    background-color: var(--accent) !important;
+}
+
+.bg-accent {
+    color: var(--text-over-accent) !important;
+    background-color: var(--accent) !important;
+}
+
+.bg-accent-light {
+    background-color: var(--accent-light) !important;
+}
+
+.bg-accent-dark {
+    color: var(--text-over-accent) ;
+    background-color: var(--accent-dark) !important;
+}
+
+.bg-primary {
+    background-color: var(--primary-color) !important;
+    color: var(--text-over-primary);
+}
+
+.bg-window {
+    background-color: var(--window-background) !important;
+    color: var(--text);
+}
+
+.bg-window-hi {
+    background-color: var(--window-background-hi) !important;
+    color: var(--text);
+}
+
+
+.bg-window-lo {
+    background-color: var(--window-background-lo) !important;
+    color: var(--text);
+}
+

package/src/css/b-root-semantic.css

@@ -0,0 +1,111 @@
+
+.relative {
+    position: relative;
+}
+
+.absolute {
+    position: absolute;
+}
+
+.absolute.right {
+    right: 0;
+}
+
+.absolute.bottom {
+    bottom: 0;
+}
+
+.scrolly {
+    overflow-y: auto  !important;
+    overflow-x: hidden;
+    -webkit-overflow-scrolling: touch;
+    -ms-overflow-style: -ms-autohiding-scrollbar;
+    scrollbar-width: none; /* Firefox */
+}
+
+.scrollx::-webkit-scrollbar,
+.scrolly::-webkit-scrollbar {
+    display: none;
+}
+
+/* Hide scrollbar for IE, Edge and Firefox */
+
+.scrollx {
+    overflow-y: hidden;
+    overflow-x: auto !important;
+    -webkit-overflow-scrolling: touch;
+    -ms-overflow-style: -ms-autohiding-scrollbar;
+    scrollbar-width: none; /* Firefox */
+}
+
+.scroll {
+    overflow: auto !important;
+    -webkit-overflow-scrolling: touch;
+}
+
+.vcenter {
+    vertical-align: middle;
+}
+
+.monospace {
+    white-space: pre-wrap;
+    font-family: monospace;
+}
+
+
+.ohidden {
+    overflow: hidden;
+}
+
+.font-50 {
+    font-size: 0.5rem;
+}
+
+.font-75 {
+    font-size: 0.75rem;
+}
+
+.font-100 {
+    font-size: 1rem;
+}
+
+.font-125 {
+    font-size: 1.25rem;
+}
+
+.font-150 {
+    font-size: 1.5rem;
+}
+
+.font-100 {
+    font-size: 1rem;
+}
+
+.vcenter {
+    vertical-align: middle;
+}
+
+.shadow-1 {
+    box-shadow: 0 0 1px var(--shadow-color);
+    z-index: 100;
+}
+
+.shadow-2 {
+    box-shadow: 0 0 2px var(--shadow-color);
+    z-index: 100;
+}
+
+.shadow-3 {
+    box-shadow: 0 0 3px var(--shadow-color);
+    z-index: 100;
+}
+
+.shadow-4 {
+    box-shadow: 0 0 4px var(--shadow-color);
+    z-index: 100;
+}
+
+.pointer {
+    cursor: pointer;
+}
+

package/src/css/b-root.css

@@ -0,0 +1,3 @@
+* {
+    box-sizing: border-box;
+}

package/src/css/body.css

@@ -0,0 +1,60 @@
+
+body {
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
+    font-family: sans-serif;
+    background: black no-repeat center;
+    background-size: cover;
+    box-sizing: border-box;
+}
+
+body.error:after {
+    content: attr(data-error);
+    position: absolute;
+    width: calc(100% - 4rem);
+    bottom: 0;
+    margin: 2rem;
+    font-size: 1.5rem;
+    color: white;
+    text-align: center;
+    border: solid 1px rgba(255, 25, 25, 0.5);
+    padding: 2rem;
+    left: 0;
+    box-sizing: border-box;
+    background: rgba(80, 0, 0, 0.8);
+    border-radius: 1rem;
+}
+body.loading canvas,
+body.loading .ui-button,
+body.loading .popper {
+    opacity: 0;
+}
+
+body.loading .progressbar {
+    display: block;
+}
+
+canvas {
+    position: absolute;
+    width: 100% !important;
+    height: 100% !important;
+}
+
+.progressbar {
+    display: none;
+    bottom: 1rem;
+    left: 1rem;
+    right: 1rem;
+    height: 0.5rem;
+    position: absolute;
+}
+
+.progressbar > div {
+    background: white;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    border-radius: 1rem;
+}

package/src/css/cardie.css

@@ -0,0 +1,6 @@
+.cardiebody {
+    display: flex;
+    flex-direction: row;
+    align-items: self-start;
+}
+