@jinntec/fore 2.1.1 → 2.3.0

package/index.js

@@ -1,5 +1,6 @@
 // core + models classes
 import './src/fx-bind.js';
+import './src/fx-connection.js';
 import './src/fx-fore.js';
 import './src/fx-instance.js';
 import './src/fx-model.js';
@@ -33,7 +34,6 @@ import './src/lab/fore-component.js';
 import './src/tools/fx-json-instance.js';
 // import './src/tools/fx-minimap.js';
 
-
 // import './src/ui/fx-checkbox-group.js';
 
 // action classes
@@ -41,6 +41,7 @@ import './src/actions/fx-append.js';
 import './src/actions/fx-delete.js';
 import './src/actions/fx-setfocus.js';
 import './src/actions/fx-insert.js';
+// import './src/actions/fx-insertchild.js';
 import './src/actions/fx-message.js';
 import './src/actions/fx-setvalue.js';
 import './src/actions/fx-send.js';
@@ -60,6 +61,7 @@ import './src/actions/fx-toggleboolean.js';
 import './src/actions/fx-call.js';
 import './src/actions/fx-setattribute.js';
 import './src/actions/fx-construct-done.js';
+import './src/actions/fx-unmodified.js';
 
 import './src/functions/fx-function.js';
-
+import './src/functions/fx-functionlib.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jinntec/fore",
-  "version": "2.1.1",
+  "version": "2.3.0",
   "description": "Fore - declarative user interfaces in plain HTML",
   "module": "./index.js",
   "publishConfig": {
@@ -31,10 +31,10 @@
   ],
   "dependencies": {
     "@jinntec/jinn-toast": "^1.0.5",
-    "fontoxpath": "^3.30.0"
+    "@picocss/pico": "^2.0.6",
+    "fontoxpath": "^3.33.0"
   },
   "devDependencies": {
-    "@types/cypress": "^1.1.3",
     "@babel/plugin-proposal-class-properties": "^7.17.12",
     "@open-wc/building-rollup": "^2.0.1",
     "@open-wc/eslint-config": "^7.0.0",
@@ -47,17 +47,20 @@
     "@rollup/plugin-node-resolve": "^13.3.0",
     "@rollup/plugin-strip": "^2.1.0",
     "@skypack/package-check": "^0.2.2",
+    "@types/cypress": "^1.1.3",
     "@webcomponents/webcomponentsjs": "^2.6.0",
     "cypress": "^13.3.0",
     "deepmerge": "^4.2.2",
     "es-dev-server": "^2.1.0",
     "eslint": "^8.16.0",
+    "eslint-plugin-prettier": "^5.1.3",
     "husky": "^8.0.1",
     "jsdoc": "^3.6.10",
     "lint-staged": "^12.4.3",
     "lit-html": "^2.2.5",
     "mocha": "^10.0.0",
     "np": "^8.0.4",
+    "replace-in-file": "^8.0.2",
     "rimraf": "^3.0.2",
     "rollup": "^2.75.4",
     "rollup-plugin-babel": "^4.4.0",
@@ -69,8 +72,8 @@
   },
   "scripts": {
     "test": "karma start",
-    "lint:eslint": "eslint --ext .js,.html . --ignore-path .eslintignore",
-    "format:eslint": "eslint --ext .js,.html . --fix --ignore-path .eslintignore",
+    "lint:eslint": "eslint .",
+    "format:eslint": "eslint . --fix",
     "lint:prettier": "prettier \"**/*.js\" --check --ignore-path .eslintignore",
     "format:prettier": "prettier \"**/*.js\" --write --ignore-path .eslintignore",
     "docs": "wca src -f json --outFile fore-elements.json",
@@ -87,7 +90,8 @@
     "preversion": "npm run test",
     "prepare": "npm run build",
     "install-demos": "npm i && cd demo && npm i",
-    "start-cypress": "es-dev-server --app-index doc/index.html --node-resolve"
+    "start-cypress": "es-dev-server --app-index doc/index.html --node-resolve",
+    "websocket-server": "node websocket-server.js"
   },
   "keywords": [
     "Fore",
@@ -103,38 +107,6 @@
   ],
   "author": "Joern Turner",
   "license": "MIT",
-  "eslintConfig": {
-    "extends": [
-      "@open-wc/eslint-config",
-      "eslint-config-prettier"
-    ],
-    "ignorePatterns": [
-      "demo/**",
-      "resources/**",
-      "doc/**/*"
-    ],
-    "rules": {
-      "no-console": "off",
-      "no-alert": "off",
-      "import/no-extraneous-dependencies": [
-        "off",
-        {
-          "devDependencies": [
-            "demo/**/*.html",
-            "doc/**/*.html"
-          ]
-        }
-      ],
-      "no-param-reassign": [
-        "off",
-        {
-          "dependencies": [
-            "src/fx-model.js"
-          ]
-        }
-      ]
-    }
-  },
   "engines": {
     "node": ">= 16.19.1"
   },

package/resources/fore.css

@@ -1,265 +1,266 @@
 @import 'vars.css';
 @import 'toastify.css';
-/*@import url('dev.css');*/
-
-html {
-    --inspector-bg: var(--paper-grey-300);
-    --inspector-pre-bg: var(--paper-grey-100);
-    --inspector-color: var(--paper-grey-800);
-    --inspector-instance-height: 200px;
-    --inspector-handle-bg: var(--paper-blue-500);
-    --inspector-handle-width: 30px;
-}
-
-[unresolved] {
-    display: none;
-}
-
-[disabled] {
-    pointer-events: none;
-    cursor: default;
-}
-
-[refresh-on-view] {
-    /*opacity: 0;*/
-}
-
-/*
-    nonrelevant must always be hidden
-*/
-[nonrelevant] {
-    display: none;
-}
-
-[relevant] {
-    display: block;
-}
-
-fx-control[required]:after {
-    content: "*";
-    display: inline;
-    color: red;
-}
-
-.fore-error {
-    height: 2rem;
-    background: darkred;
-    width: 100%;
-    display: block !important;
-    color: white;
-}
-
-.fore-error::before {
-    content: 'right-click to inspect';
-    display: flex;
-    flex-align: center;
-}
-
-fx-alert {
-    color: darkred;
-    font-size: 0.9rem;
-    display: none;
-}
-
-[valid] fx-alert{
-    display: none;
-}
-
-.visited[invalid] fx-alert {
-    display: block;
-}
-
-/* case not displayed by default - if you want e.g. apply transitions you have to overwrite this rule with display='inline' or similar */
-fx-case {
-    display: none;
-}
-
-fx-output[readonly] img {
-    background: inherit;
-}
-
-.error {
-    background: var(--paper-red-500);
-    display: flex;
-}
-
-fx-control, fx-trigger, .fx-checkbox {
-    white-space: nowrap;
-    /* position: relative; */
-}
-
-/* ### FX-DIALOG STYLES ### */
-/* ### FX-DIALOG STYLES ### */
-/* ### FX-DIALOG STYLES ### */
-fx-dialog {
-    display: none;
-    opacity: 0;
-    width: 100vw;
-    height: 100vh;
-    transition: opacity 1s linear;
-    z-index: -1;
-    transition: none;
-}
-
-fx-dialog.show {
-    display: block;
-    min-height: 200px;
-    border-radius: 0.5rem;
-    opacity: 1;
-    background: rgba(0, 0, 0, 0.5);
-    z-index: 10;
-    transition: opacity 0.4s linear;
-}
-
-fx-dialog.show .dialog-content {
-    padding: 1rem;
-    width: fit-content;
-    height: fit-content;
-    border: thin solid;
-    border-radius: 0.3rem;
-    position: absolute;
-    left: 50%;
-    top: 50%;
-    transform: translateX(-50%) translateY(-50%);
-    background: white;
-
-}
-
-fx-dialog a.close-dialog {
-    position: absolute;
-    right: 0.4rem;
-    top: 0.2rem;
-    color: var(--paper-grey-900);
-    text-decoration: none;
-    font-size: 1.2rem;
-}
-
-fx-dialog .action {
-    width: 100%;
-    text-align: center;
-    display: block;
-}
-
-fx-group, fx-switch, fx-repeat, fx-dialog {
-    display: block;
-}
-
-fx-hint {
-    display: none;
-}
-
-fx-model,
-fx-instance,
-fx-action,
-fx-setvalue {
-    display: none;
-}
-
-fx-trigger a[disabled] {
-    color: lightgrey;
-}
-
-fx-trigger img[disabled] {
-    filter: blur(2px);
-}
-
-fx-repeatitem {
-    position: relative;
-    opacity: 1;
-}
-
-.hidden {
-    visibility: hidden;
-    opacity: 0;
-    transition: visibility 0s 2s, opacity 2s linear;
-}
-
-.isEmpty.visited .widget {
-    background: lightpink;
-}
-
-.loaded {
-    animation: fadein 0.3s forwards;
-}
-
-/* avoid flicker from nested lazily loaded elements */
-.loaded .loaded {
-    animation: none;
-    opacity: 1;
-}
-
-.logtree details {
-    padding: 0.1rem 1rem;
-    margin: 0;
-}
-noscript{
-    display: block;
-    width: 100%;
-    padding: 1rem;
-    background: darkorange;
-    color:white;
-    position: absolute;
-    top:0;
-    left:0;
-}
-
-.submit-validation-failed .isEmpty .widget {
-    background: lightpink;
-}
-
-.vertical label {
-    display: block;
-}
-
-/* fx-action-log styles */
-
-fx-fore.action-log{
-    /*background: var(--paper-orange-500);*/
-}
-.action-log .action-log-debug {
-    display: block !important;
-    min-height: 3rem;
-    background: var(--paper-orange-500);
-}
-.action-log fx-model{
-    display: block;
-    min-height: 1rem;
-}
-.action-log fx-model::before{
-    content:'model';
-}
-
-.action-log fx-instance,
-.action-log fx-bind,
-.action-log fx-submission,
-.action-log fx-function
-{
-    display: block;
-    min-height: 2rem;
-    background: var(--paper-orange-500);
-}
-
-.action-log fx-bind::before{
-    content:'bind :: ' attr(ref);
-}
-.action-log fx-instance::before{
-    content:'instance :: ' attr(id);
-}
-.action-log fx-submission::before{
-    content:'submission ::' attr(id);
-}
-
-.action-log .action-log-debug::before{
-    content: attr(data-name);
-}
-.action-log .action-log-debug .targetd{
-    cursor: pointer;
-}
-
-
-/* ### toastify customizations #### */
-
-.toastify.on.warning{
-    background: var(--paper-orange-500);
-}
+
+    /*@import url('dev.css');*/
+
+    html {
+        --inspector-bg: var(--paper-grey-300);
+        --inspector-pre-bg: var(--paper-grey-100);
+        --inspector-color: var(--paper-grey-800);
+        --inspector-instance-height: 200px;
+        --inspector-handle-bg: var(--paper-blue-500);
+        --inspector-handle-width: 30px;
+    }
+
+    [unresolved] {
+        display: none;
+    }
+
+    [disabled] {
+        pointer-events: none;
+        cursor: default;
+    }
+
+    [refresh-on-view] {
+        /*opacity: 0;*/
+    }
+
+    /*
+        nonrelevant must always be hidden
+    */
+    [nonrelevant] {
+        display: none;
+    }
+
+    [relevant] {
+        display: block;
+    }
+
+    fx-control[required] label:after {
+        content: "*";
+        display: inline;
+        color: red;
+    }
+
+    .fore-error {
+        height: 2rem;
+        background: darkred;
+        width: 100%;
+        display: block !important;
+        color: white;
+    }
+
+    .fore-error::before {
+        content: 'right-click to inspect';
+        display: flex;
+        flex-align: center;
+    }
+
+    fx-alert {
+        color: darkred;
+        font-size: 0.9rem;
+        display: none;
+    }
+
+    [valid] fx-alert{
+        display: none;
+    }
+
+    .visited[invalid] fx-alert {
+        display: block;
+    }
+
+    /* case not displayed by default - if you want e.g. apply transitions you have to overwrite this rule with display='inline' or similar */
+    fx-case {
+        display: none;
+    }
+
+    fx-output[readonly] img {
+        background: inherit;
+    }
+
+    .error {
+        background: var(--paper-red-500);
+        display: flex;
+    }
+
+    fx-control, fx-trigger, .fx-checkbox {
+        white-space: nowrap;
+        /* position: relative; */
+    }
+
+    /* ### FX-DIALOG STYLES ### */
+    /* ### FX-DIALOG STYLES ### */
+    /* ### FX-DIALOG STYLES ### */
+    fx-dialog {
+        display: none;
+        opacity: 0;
+        width: 100vw;
+        height: 100vh;
+        transition: opacity 1s linear;
+        z-index: -1;
+        transition: none;
+    }
+
+    fx-dialog.show {
+        display: block;
+        min-height: 200px;
+        border-radius: 0.5rem;
+        opacity: 1;
+        background: rgba(0, 0, 0, 0.5);
+        z-index: 10;
+        transition: opacity 0.4s linear;
+    }
+
+    fx-dialog.show .dialog-content {
+        padding: 1rem;
+        width: fit-content;
+        height: fit-content;
+        border: thin solid;
+        border-radius: 0.3rem;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translateX(-50%) translateY(-50%);
+        background: white;
+
+    }
+
+    fx-dialog a.close-dialog {
+        position: absolute;
+        right: 0.4rem;
+        top: 0.2rem;
+        color: var(--paper-grey-900);
+        text-decoration: none;
+        font-size: 1.2rem;
+    }
+
+    fx-dialog .action {
+        width: 100%;
+        text-align: center;
+        display: block;
+    }
+
+    fx-group, fx-switch, fx-repeat, fx-dialog {
+        display: block;
+    }
+
+    fx-hint {
+        display: none;
+    }
+
+    fx-model,
+    fx-instance,
+    fx-action,
+    fx-setvalue {
+        display: none;
+    }
+
+    fx-trigger a[disabled] {
+        color: lightgrey;
+    }
+
+    fx-trigger img[disabled] {
+        filter: blur(2px);
+    }
+
+    fx-repeatitem {
+        position: relative;
+        opacity: 1;
+    }
+
+    .hidden {
+        visibility: hidden;
+        opacity: 0;
+        transition: visibility 0s 2s, opacity 2s linear;
+    }
+
+    .isEmpty.visited .widget {
+        background: lightpink;
+    }
+
+    .loaded {
+        animation: fadein 0.3s forwards;
+    }
+
+    /* avoid flicker from nested lazily loaded elements */
+    .loaded .loaded {
+        animation: none;
+        opacity: 1;
+    }
+
+    .logtree details {
+        padding: 0.1rem 1rem;
+        margin: 0;
+    }
+    noscript{
+        display: block;
+        width: 100%;
+        padding: 1rem;
+        background: darkorange;
+        color:white;
+        position: absolute;
+        top:0;
+        left:0;
+    }
+
+    .submit-validation-failed .isEmpty .widget {
+        background: lightpink;
+    }
+
+    .vertical label {
+        display: block;
+    }
+
+    /* fx-action-log styles */
+
+    fx-fore.action-log{
+        /*background: var(--paper-orange-500);*/
+    }
+    .action-log .action-log-debug {
+        display: block !important;
+        min-height: 3rem;
+        background: var(--paper-orange-500);
+    }
+    .action-log fx-model{
+        display: block;
+        min-height: 1rem;
+    }
+    .action-log fx-model::before{
+        content:'model';
+    }
+
+    .action-log fx-instance,
+    .action-log fx-bind,
+    .action-log fx-submission,
+    .action-log fx-function
+    {
+        display: block;
+        min-height: 2rem;
+        background: var(--paper-orange-500);
+    }
+
+    .action-log fx-bind::before{
+        content:'bind :: ' attr(ref);
+    }
+    .action-log fx-instance::before{
+        content:'instance :: ' attr(id);
+    }
+    .action-log fx-submission::before{
+        content:'submission ::' attr(id);
+    }
+
+    .action-log .action-log-debug::before{
+        content: attr(data-name);
+    }
+    .action-log .action-log-debug .targetd{
+        cursor: pointer;
+    }
+
+
+    /* ### toastify customizations #### */
+
+    .toastify.on.warning{
+        background: var(--paper-orange-500);
+    }
 

package/resources/vars.css

@@ -1,5 +1,13 @@
 /* Material Design color palette for Google products */
+:root{
+    --pico-font-weight: 300;
+    --pico-font-size: 1rem;
+    --pico-form-element-spacing-vertical: 0.5rem;
+    --pico-form-element-spacing-horizontal: 0.75rem;
+}
 html {
+
+
     --google-red-100: #f4c7c3;
     --google-red-300: #e67c73;
     --google-red-500: #db4437;