Skip to content
Snippets Groups Projects
Verified Commit 50132f46 authored by Volker Schukai's avatar Volker Schukai :alien:
Browse files

fix: update test and monster.mjs #303

parent a44a6451
No related branches found
No related tags found
No related merge requests found
Expand all Show whitespace changes
Inline Side-by-side
Showing
with 490 additions and 313 deletions
nix/config/release.nix
+ 1
− 1
View file @ 50132f46
package-lock.json
+ 2
− 2
View file @ 50132f46
{
"name": "@schukai/monster",
"version": "3.114.7",
"version": "3.115.0",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "@schukai/monster",
"version": "3.114.7",
"version": "3.115.0",
"license": "AGPL 3.0",
"dependencies": {
"@floating-ui/dom": "^1.6.13",
......
source/components/content/fetch-box.mjs
+ 258
− 264
View file @ 50132f46
......@@ -11,9 +11,7 @@
*/
import { instanceSymbol } from "../../constants.mjs";
import {
ATTRIBUTE_ROLE
} from "../../dom/constants.mjs";
import { ATTRIBUTE_ROLE } from "../../dom/constants.mjs";
import { CustomElement } from "../../dom/customelement.mjs";
import {
assembleMethodSymbol,
......@@ -49,7 +47,9 @@ class FetchBox extends CustomElement {
* @returns {symbol}
*/
static get [instanceSymbol]() {
return Symbol.for("@schukai/monster/components/content/fetch-box@@instance");
return Symbol.for(
"@schukai/monster/components/content/fetch-box@@instance",
);
}
/**
......@@ -62,7 +62,6 @@ class FetchBox extends CustomElement {
return this;
}
/**
* Handles the component's connection to the DOM.
* Determines the styling of the component based on its parent's tag name.
......@@ -73,28 +72,34 @@ class FetchBox extends CustomElement {
connectedCallback() {
super.connectedCallback();
const parent = this.parentElement;
if (parent) {
const blockLevelElements = ['DIV', 'SECTION', 'ARTICLE', 'HEADER', 'FOOTER', 'MAIN', 'NAV', 'ASIDE'];
const blockLevelElements = [
"DIV",
"SECTION",
"ARTICLE",
"HEADER",
"FOOTER",
"MAIN",
"NAV",
"ASIDE",
];
const isBlockLevel = blockLevelElements.includes(parent.tagName);
if (isBlockLevel) {
this.style.display = 'block';
this.style.width = '100%';
this.style.height = '100%';
this.style.display = "block";
this.style.width = "100%";
this.style.height = "100%";
} else {
this.style.display = 'inline-flex';
this.style.height = '100%';
this.style.display = "inline-flex";
this.style.height = "100%";
}
}
this.fetch();
}
/**
* To set the options via the HTML Tag, the attribute `data-monster-options` must be used.
* @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
......@@ -155,14 +160,12 @@ class FetchBox extends CustomElement {
visible: "loading",
parameter: null,
formatter: {
marker: {
open: null,
close: null,
},
},
});
}
......@@ -185,8 +188,9 @@ class FetchBox extends CustomElement {
*/
fetch() {
try {
return loadContent.call(this).then(obj => {
return loadContent
.call(this)
.then((obj) => {
if (obj.type !== "application/json") {
this.setOption("visible", "error");
throw new Error("not a json response");
......@@ -196,24 +200,23 @@ class FetchBox extends CustomElement {
const content = obj.content;
if (!isString(content) || content === "") {
this.setOption("visible", "empty");
return
return;
}
const jsonContent = JSON.parse(content);
if (jsonContent === null) {
this.setOption("visible", "empty");
return
return;
}
this.setOption("data", jsonContent);
this.setOption("visible", "default");
} catch (e) {
this.setOption("visible", "error");
throw e;
}
}).catch(e => {
})
.catch((e) => {
this.setOption("visible", "error");
addErrorAttribute(this, e);
});
......@@ -249,13 +252,12 @@ function loadContent() {
}
const data = {
parameter : p
}
parameter: p,
};
const formatter = new Formatter(data)
const formatter = new Formatter(data);
if (this.getOption("formatter.marker.open")) {
const open = this.getOption("formatter.marker.open");
if (!isString(open)) {
throw new TypeError("open is not a string");
......@@ -266,16 +268,10 @@ function loadContent() {
throw new TypeError("close is not a string");
}
formatter.setMarker(
open,
close
);
formatter.setMarker(open, close);
}
const formattedUrl = formatter.format(
url
);
const formattedUrl = formatter.format(url);
const options = this.getOption("fetch", {});
......@@ -299,7 +295,6 @@ function loadContent() {
type: response.headers.get("Content-Type"),
}));
});
}
/**
......@@ -341,5 +336,4 @@ function getTemplate() {
</div>`;
}
registerCustomElement(FetchBox);
source/components/content/stylesheet/fetch-box.mjs
+ 13
− 6
View file @ 50132f46
......@@ -13,7 +13,7 @@
import { addAttributeToken } from "../../../dom/attributes.mjs";
import { ATTRIBUTE_ERRORMESSAGE } from "../../../dom/constants.mjs";
export {FetchBoxStyleSheet}
export { FetchBoxStyleSheet };
/**
* @private
......@@ -22,10 +22,17 @@ export {FetchBoxStyleSheet}
const FetchBoxStyleSheet = new CSSStyleSheet();
try {
FetchBoxStyleSheet.insertRule(`
FetchBoxStyleSheet.insertRule(
`
@layer fetchbox {
[data-monster-role=control]{outline:none}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}:host{display:block}:after,:before,:root{--monster-font-family:-apple-system,BlinkMacSystemFont,\"Quicksand\",\"Segoe UI\",\"Roboto\",\"Oxygen\",\"Ubuntu\",\"Cantarell\",\"Fira Sans\",\"Droid Sans\",\"Helvetica Neue\",Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\";--monster-font-family-monospace:\"Consolas\",\"Courier New\",\"Roboto Mono\",\"Source Code Pro\",\"Fira Mono\",monospace;--monster-color-primary-1:var(--monster-color-gray-6);--monster-color-primary-2:var(--monster-color-gray-6);--monster-color-primary-3:var(--monster-color-cinnamon-1);--monster-color-primary-4:var(--monster-color-cinnamon-1);--monster-bg-color-primary-1:var(--monster-color-gray-1);--monster-bg-color-primary-2:var(--monster-color-gray-2);--monster-bg-color-primary-3:var(--monster-color-gray-6);--monster-bg-color-primary-4:var(--monster-color-gray-4)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-primary-1:var(--monster-color-gray-1);--monster-color-primary-2:var(--monster-color-gray-1);--monster-color-primary-3:var(--monster-color-gray-6);--monster-color-primary-4:var(--monster-color-gray-6);--monster-bg-color-primary-1:var(--monster-color-gray-6);--monster-bg-color-primary-2:var(--monster-color-gray-3);--monster-bg-color-primary-3:var(--monster-color-gray-2);--monster-bg-color-primary-4:var(--monster-color-gray-1)}}:after,:before,:root{--monster-color-secondary-1:var(--monster-color-red-4);--monster-color-secondary-2:var(--monster-color-red-4);--monster-color-secondary-3:var(--monster-color-red-1);--monster-color-secondary-4:var(--monster-color-red-1);--monster-bg-color-secondary-1:var(--monster-color-gray-1);--monster-bg-color-secondary-2:var(--monster-color-red-2);--monster-bg-color-secondary-3:var(--monster-color-red-3);--monster-bg-color-secondary-4:var(--monster-color-red-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-secondary-1:var(--monster-color-red-1);--monster-color-secondary-2:var(--monster-color-red-1);--monster-color-secondary-3:var(--monster-color-red-6);--monster-color-secondary-4:var(--monster-color-red-4);--monster-bg-color-secondary-1:var(--monster-color-gray-6);--monster-bg-color-secondary-2:var(--monster-color-red-3);--monster-bg-color-secondary-3:var(--monster-color-red-2);--monster-bg-color-secondary-4:var(--monster-color-red-1)}}:after,:before,:root{--monster-color-tertiary-1:var(--monster-color-magenta-4);--monster-color-tertiary-2:var(--monster-color-magenta-4);--monster-color-tertiary-3:var(--monster-color-magenta-6);--monster-color-tertiary-4:var(--monster-color-magenta-1);--monster-bg-color-tertiary-1:var(--monster-color-gray-1);--monster-bg-color-tertiary-2:var(--monster-color-magenta-1);--monster-bg-color-tertiary-3:var(--monster-color-magenta-2);--monster-bg-color-tertiary-4:var(--monster-color-magenta-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-tertiary-1:var(--monster-color-magenta-1);--monster-color-tertiary-2:var(--monster-color-magenta-6);--monster-color-tertiary-3:var(--monster-color-magenta-4);--monster-color-tertiary-4:var(--monster-color-magenta-4);--monster-bg-color-tertiary-1:var(--monster-color-gray-6);--monster-bg-color-tertiary-2:var(--monster-color-magenta-2);--monster-bg-color-tertiary-3:var(--monster-color-magenta-1);--monster-bg-color-tertiary-4:var(--monster-color-magenta-1)}}:after,:before,:root{--monster-color-destructive-1:var(--monster-color-red-1);--monster-color-destructive-2:var(--monster-color-red-4);--monster-color-destructive-3:var(--monster-color-red-6);--monster-color-destructive-4:var(--monster-color-red-1);--monster-bg-color-destructive-1:var(--monster-color-red-4);--monster-bg-color-destructive-2:var(--monster-color-gray-1);--monster-bg-color-destructive-3:var(--monster-color-red-2);--monster-bg-color-destructive-4:var(--monster-color-red-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-destructive-1:var(--monster-color-red-1);--monster-color-destructive-2:var(--monster-color-red-3);--monster-color-destructive-3:var(--monster-color-red-4);--monster-color-destructive-4:var(--monster-color-red-1);--monster-bg-color-destructive-1:var(--monster-color-red-5);--monster-bg-color-destructive-2:var(--monster-color-gray-6);--monster-bg-color-destructive-3:var(--monster-color-red-1);--monster-bg-color-destructive-4:var(--monster-color-red-4)}}:after,:before,:root{--monster-color-success-1:var(--monster-color-green-1);--monster-color-success-2:var(--monster-color-green-4);--monster-color-success-3:var(--monster-color-green-6);--monster-color-success-4:var(--monster-color-green-1);--monster-bg-color-success-1:var(--monster-color-green-3);--monster-bg-color-success-2:var(--monster-color-gray-1);--monster-bg-color-success-3:var(--monster-color-green-2);--monster-bg-color-success-4:var(--monster-color-green-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-success-1:var(--monster-color-green-1);--monster-color-success-2:var(--monster-color-green-2);--monster-color-success-3:var(--monster-color-green-4);--monster-color-success-4:var(--monster-color-green-1);--monster-bg-color-success-1:var(--monster-color-green-5);--monster-bg-color-success-2:var(--monster-color-gray-6);--monster-bg-color-success-3:var(--monster-color-green-1);--monster-bg-color-success-4:var(--monster-color-green-3)}}:after,:before,:root{--monster-color-warning-1:var(--monster-color-orange-1);--monster-color-warning-2:var(--monster-color-orange-4);--monster-color-warning-3:var(--monster-color-orange-6);--monster-color-warning-4:var(--monster-color-orange-1);--monster-bg-color-warning-1:var(--monster-color-orange-3);--monster-bg-color-warning-2:var(--monster-color-gray-1);--monster-bg-color-warning-3:var(--monster-color-orange-2);--monster-bg-color-warning-4:var(--monster-color-orange-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-warning-1:var(--monster-color-orange-1);--monster-color-warning-2:var(--monster-color-orange-3);--monster-color-warning-3:var(--monster-color-orange-4);--monster-color-warning-4:var(--monster-color-orange-1);--monster-bg-color-warning-1:var(--monster-color-orange-5);--monster-bg-color-warning-2:var(--monster-color-gray-6);--monster-bg-color-warning-3:var(--monster-color-orange-1);--monster-bg-color-warning-4:var(--monster-color-orange-3)}}:after,:before,:root{--monster-color-error-1:var(--monster-color-red-1);--monster-color-error-2:var(--monster-color-red-4);--monster-color-error-3:var(--monster-color-red-6);--monster-color-error-4:var(--monster-color-red-1);--monster-bg-color-error-1:var(--monster-color-red-4);--monster-bg-color-error-2:var(--monster-color-gray-1);--monster-bg-color-error-3:var(--monster-color-red-2);--monster-bg-color-error-4:var(--monster-color-red-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-error-1:var(--monster-color-red-1);--monster-color-error-2:var(--monster-color-red-3);--monster-color-error-3:var(--monster-color-red-4);--monster-color-error-4:var(--monster-color-red-1);--monster-bg-color-error-1:var(--monster-color-red-5);--monster-bg-color-error-2:var(--monster-color-gray-6);--monster-bg-color-error-3:var(--monster-color-red-1);--monster-bg-color-error-4:var(--monster-color-red-4)}}:after,:before,:root{--monster-color-selection-1:var(--monster-color-gray-6);--monster-color-selection-2:var(--monster-color-gray-6);--monster-color-selection-3:var(--monster-color-gray-6);--monster-color-selection-4:var(--monster-color-gray-1);--monster-bg-color-selection-1:var(--monster-color-yellow-2);--monster-bg-color-selection-2:var(--monster-color-yellow-1);--monster-bg-color-selection-3:var(--monster-color-yellow-2);--monster-bg-color-selection-4:var(--monster-color-yellow-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-selection-1:var(--monster-color-gray-6);--monster-color-selection-2:var(--monster-color-gray-6);--monster-color-selection-3:var(--monster-color-gray-6);--monster-color-selection-4:var(--monster-color-gray-1);--monster-bg-color-selection-1:var(--monster-color-yellow-2);--monster-bg-color-selection-2:var(--monster-color-yellow-1);--monster-bg-color-selection-3:var(--monster-color-yellow-2);--monster-bg-color-selection-4:var(--monster-color-yellow-6)}}:after,:before,:root{--monster-color-primary-disabled-1:var(--monster-color-gray-4);--monster-color-primary-disabled-2:var(--monster-color-gray-4);--monster-color-primary-disabled-3:var(--monster-color-gray-4);--monster-color-primary-disabled-4:var(--monster-color-gray-4);--monster-bg-color-primary-disabled-1:var(--monster-color-gray-1);--monster-bg-color-primary-disabled-2:var(--monster-color-gray-2);--monster-bg-color-primary-disabled-3:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-4:var(--monster-color-gray-6);--monster-color-gradient-1:#833ab4;--monster-color-gradient-2:#fd1d1d;--monster-color-gradient-3:#fcb045}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-primary-disabled-1:var(--monster-color-gray-4);--monster-color-primary-disabled-2:var(--monster-color-gray-4);--monster-color-primary-disabled-3:var(--monster-color-gray-3);--monster-color-primary-disabled-4:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-1:var(--monster-color-gray-6);--monster-bg-color-primary-disabled-2:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-3:var(--monster-color-gray-2);--monster-bg-color-primary-disabled-4:var(--monster-color-gray-1);--monster-color-gradient-1:#ffe0b2;--monster-color-gradient-2:#ad8275;--monster-color-gradient-3:#771ba3}}:after,:before,:root{--monster-box-shadow-1:none;--monster-box-shadow-2:-1px 1px 10px 1px hsla(0,0%,76%,.61);--monster-text-shadow:none;--monster-theme-control-bg-color:var(--monster-color-seashell-1);--monster-theme-control-color:var(--monster-color-seashell-6);--monster-theme-control-hover-color:var(--monster-color-seashell-6);--monster-theme-control-hover-bg-color:var(--monster-color-seashell-2);--monster-theme-control-border-width:2px;--monster-theme-control-border-style:solid;--monster-theme-control-border-radius:0;--monster-theme-control-border-color:var(--monster-color-primary-1)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-theme-control-bg-color:var(--monster-color-gray-5);--monster-theme-control-color:var(--monster-color-gray-1);--monster-theme-control-border-color:var(--monster-color-gray-3);--monster-theme-control-hover-color:var(--monster-color-gray-1);--monster-theme-control-hover-bg-color:var(--monster-color-gray-6)}}:after,:before,:root{--monster-theme-on-color:var(--monster-color-green-1);--monster-theme-on-bg-color:var(--monster-color-green-5);--monster-theme-off-color:var(--monster-color-gray-1);--monster-theme-off-bg-color:var(--monster-color-gray-4)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-theme-on-color:var(--monster-color-gray-6);--monster-theme-on-bg-color:var(--monster-color-gray-1);--monster-theme-off-color:var(--monster-color-gray-1);--monster-theme-off-bg-color:var(--monster-color-gray-5)}}:after,:before,:root{--monster-border-style:solid;--monster-border-width:3px;--monster-border-radius:0;--monster-outline-width:1px;--monster-popper-witharrrow-distance:-4px;--monster-z-index-default:0;--monster-z-index-outline:10;--monster-z-index-dropdown:200;--monster-z-index-dropdown-overlay:210;--monster-z-index-sticky:300;--monster-z-index-sticky-overlay:310;--monster-z-index-fixed:400;--monster-z-index-fixed-overlay:410;--monster-z-index-modal-backdrop:500;--monster-z-index-modal-backdrop-overlay:510;--monster-z-index-offcanvas:600;--monster-z-index-offcanvas-overlay:610;--monster-z-index-modal:700;--monster-z-index-modal-overlay:710;--monster-z-index-popover:800;--monster-z-index-popover-overlay:810;--monster-z-index-tooltip:800;--monster-z-index-tooltip-overlay:910;--monster-space-0:0;--monster-space-1:2px;--monster-space-2:4px;--monster-space-3:6px;--monster-space-4:10px;--monster-space-5:16px;--monster-space-6:26px;--monster-space-7:42px;--monster-breakpoint-0:480px;--monster-breakpoint-4:480px;--monster-breakpoint-7:768px;--monster-breakpoint-9:992px;--monster-breakpoint-12:1200px;--monster-dragger-width:2px;--monster-dragger-handle-width:4px;--monster-dragger-handle-height:50px}.monster-skeleton-col-10{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-color-50:rgba(from var(--monster-color-pink-2) 255 255 255/0.5);--monster-skeleton-height:100%;--monster-skeleton-width:10%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0%,var(--monster-skeleton-color-50) 40%,transparent 70%)}.monster-skeleton-col-10,.monster-skeleton-col-20{background-image:var(--monster-skeleton);background-position:0 0;background-repeat:no-repeat;background-size:var(--monster-skeleton-width) var(--monster-skeleton-height);color:var(--monster-skeleton-color);min-height:1px}.monster-skeleton-col-20{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-color-50:rgba(from var(--monster-color-pink-2) 255 255 255/0.5);--monster-skeleton-height:100%;--monster-skeleton-width:20%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0%,var(--monster-skeleton-color-50) 40%,transparent 70%)}.monster-skeleton-col-30{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-color-50:rgba(from var(--monster-color-pink-2) 255 255 255/0.5);--monster-skeleton-height:100%;--monster-skeleton-width:30%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0%,var(--monster-skeleton-color-50) 40%,transparent 70%)}.monster-skeleton-col-30,.monster-skeleton-col-40{background-image:var(--monster-skeleton);background-position:0 0;background-repeat:no-repeat;background-size:var(--monster-skeleton-width) var(--monster-skeleton-height);color:var(--monster-skeleton-color);min-height:1px}.monster-skeleton-col-40{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-color-50:rgba(from var(--monster-color-pink-2) 255 255 255/0.5);--monster-skeleton-height:100%;--monster-skeleton-width:40%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0%,var(--monster-skeleton-color-50) 40%,transparent 70%)}.monster-skeleton-col-50{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-color-50:rgba(from var(--monster-color-pink-2) 255 255 255/0.5);--monster-skeleton-height:100%;--monster-skeleton-width:50%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0%,var(--monster-skeleton-color-50) 40%,transparent 70%)}.monster-skeleton-col-50,.monster-skeleton-col-60{background-image:var(--monster-skeleton);background-position:0 0;background-repeat:no-repeat;background-size:var(--monster-skeleton-width) var(--monster-skeleton-height);color:var(--monster-skeleton-color);min-height:1px}.monster-skeleton-col-60{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-color-50:rgba(from var(--monster-color-pink-2) 255 255 255/0.5);--monster-skeleton-height:100%;--monster-skeleton-width:60%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0%,var(--monster-skeleton-color-50) 40%,transparent 70%)}.monster-skeleton-col-70{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-color-50:rgba(from var(--monster-color-pink-2) 255 255 255/0.5);--monster-skeleton-height:100%;--monster-skeleton-width:70%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0%,var(--monster-skeleton-color-50) 40%,transparent 70%)}.monster-skeleton-col-70,.monster-skeleton-col-80{background-image:var(--monster-skeleton);background-position:0 0;background-repeat:no-repeat;background-size:var(--monster-skeleton-width) var(--monster-skeleton-height);color:var(--monster-skeleton-color);min-height:1px}.monster-skeleton-col-80{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-color-50:rgba(from var(--monster-color-pink-2) 255 255 255/0.5);--monster-skeleton-height:100%;--monster-skeleton-width:80%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0%,var(--monster-skeleton-color-50) 40%,transparent 70%)}.monster-skeleton-col-90{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-color-50:rgba(from var(--monster-color-pink-2) 255 255 255/0.5);--monster-skeleton-height:100%;--monster-skeleton-width:90%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0%,var(--monster-skeleton-color-50) 40%,transparent 70%)}.monster-skeleton-col-100,.monster-skeleton-col-90{background-image:var(--monster-skeleton);background-position:0 0;background-repeat:no-repeat;background-size:var(--monster-skeleton-width) var(--monster-skeleton-height);color:var(--monster-skeleton-color);min-height:1px}.monster-skeleton-col-100{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-color-50:rgba(from var(--monster-color-pink-2) 255 255 255/0.5);--monster-skeleton-height:100%;--monster-skeleton-width:100%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0%,var(--monster-skeleton-color-50) 40%,transparent 70%)}.monster-skeleton-animated{animation:shimmer 4.25s linear infinite forwards;border-radius:4px}@keyframes shimmer{0%,to{filter:brightness(.81)}50%{filter:brightness(.45)}}[data-monster-role=control]{box-sizing:border-box;display:flex;flex-direction:column;height:100%;min-height:1rem;min-width:1rem;width:100%}[data-monster-visible=false]{display:none}[data-monster-visible=true]{height:100%}:host{box-sizing:border-box;display:inline-block;height:100%;min-height:1rem;min-width:1rem}.monster-skeleton-animated{height:100%;min-height:1rem}
}`, 0);
}`,
0,
);
} catch (e) {
addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
addAttributeToken(
document.getRootNode().querySelector("html"),
ATTRIBUTE_ERRORMESSAGE,
e + "",
);
}
source/components/style/skeleton.css
+ 158
− 1
View file @ 50132f46
/** generated from skeleton.pcss **/
.monster-skeleton-col-10{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-height:100%;--monster-skeleton-width:10%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-10,.monster-skeleton-col-20{background-image:var(--monster-skeleton);background-position:0 0;background-repeat:no-repeat;background-size:var(--monster-skeleton-width) var(--monster-skeleton-height);color:var(--monster-skeleton-color);min-height:1px}.monster-skeleton-col-20{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-height:100%;--monster-skeleton-width:20%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-30{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-height:100%;--monster-skeleton-width:30%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-30,.monster-skeleton-col-40{background-image:var(--monster-skeleton);background-position:0 0;background-repeat:no-repeat;background-size:var(--monster-skeleton-width) var(--monster-skeleton-height);color:var(--monster-skeleton-color);min-height:1px}.monster-skeleton-col-40{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-height:100%;--monster-skeleton-width:40%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-50{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-height:100%;--monster-skeleton-width:50%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-50,.monster-skeleton-col-60{background-image:var(--monster-skeleton);background-position:0 0;background-repeat:no-repeat;background-size:var(--monster-skeleton-width) var(--monster-skeleton-height);color:var(--monster-skeleton-color);min-height:1px}.monster-skeleton-col-60{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-height:100%;--monster-skeleton-width:60%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-70{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-height:100%;--monster-skeleton-width:70%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-70,.monster-skeleton-col-80{background-image:var(--monster-skeleton);background-position:0 0;background-repeat:no-repeat;background-size:var(--monster-skeleton-width) var(--monster-skeleton-height);color:var(--monster-skeleton-color);min-height:1px}.monster-skeleton-col-80{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-height:100%;--monster-skeleton-width:80%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-90{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-height:100%;--monster-skeleton-width:90%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-100,.monster-skeleton-col-90{background-image:var(--monster-skeleton);background-position:0 0;background-repeat:no-repeat;background-size:var(--monster-skeleton-width) var(--monster-skeleton-height);color:var(--monster-skeleton-color);min-height:1px}.monster-skeleton-col-100{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-height:100%;--monster-skeleton-width:100%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-animated{animation:shimmer 4.25s linear infinite forwards;border-radius:4px}@keyframes shimmer{0%,to{filter:brightness(.81)}50%{filter:brightness(.45)}}
\ No newline at end of file
.monster-skeleton-col-10 {
--monster-skeleton-color: var(--monster-color-pink-2);
--monster-skeleton-height: 100%;
--monster-skeleton-width: 10%;
--monster-skeleton: linear-gradient(
99deg,
var(--monster-skeleton-color) 0,
transparent var(--monster-skeleton-width)
);
}
.monster-skeleton-col-10,
.monster-skeleton-col-20 {
background-image: var(--monster-skeleton);
background-position: 0 0;
background-repeat: no-repeat;
background-size: var(--monster-skeleton-width) var(--monster-skeleton-height);
color: var(--monster-skeleton-color);
min-height: 1px;
}
.monster-skeleton-col-20 {
--monster-skeleton-color: var(--monster-color-pink-2);
--monster-skeleton-height: 100%;
--monster-skeleton-width: 20%;
--monster-skeleton: linear-gradient(
99deg,
var(--monster-skeleton-color) 0,
transparent var(--monster-skeleton-width)
);
}
.monster-skeleton-col-30 {
--monster-skeleton-color: var(--monster-color-pink-2);
--monster-skeleton-height: 100%;
--monster-skeleton-width: 30%;
--monster-skeleton: linear-gradient(
99deg,
var(--monster-skeleton-color) 0,
transparent var(--monster-skeleton-width)
);
}
.monster-skeleton-col-30,
.monster-skeleton-col-40 {
background-image: var(--monster-skeleton);
background-position: 0 0;
background-repeat: no-repeat;
background-size: var(--monster-skeleton-width) var(--monster-skeleton-height);
color: var(--monster-skeleton-color);
min-height: 1px;
}
.monster-skeleton-col-40 {
--monster-skeleton-color: var(--monster-color-pink-2);
--monster-skeleton-height: 100%;
--monster-skeleton-width: 40%;
--monster-skeleton: linear-gradient(
99deg,
var(--monster-skeleton-color) 0,
transparent var(--monster-skeleton-width)
);
}
.monster-skeleton-col-50 {
--monster-skeleton-color: var(--monster-color-pink-2);
--monster-skeleton-height: 100%;
--monster-skeleton-width: 50%;
--monster-skeleton: linear-gradient(
99deg,
var(--monster-skeleton-color) 0,
transparent var(--monster-skeleton-width)
);
}
.monster-skeleton-col-50,
.monster-skeleton-col-60 {
background-image: var(--monster-skeleton);
background-position: 0 0;
background-repeat: no-repeat;
background-size: var(--monster-skeleton-width) var(--monster-skeleton-height);
color: var(--monster-skeleton-color);
min-height: 1px;
}
.monster-skeleton-col-60 {
--monster-skeleton-color: var(--monster-color-pink-2);
--monster-skeleton-height: 100%;
--monster-skeleton-width: 60%;
--monster-skeleton: linear-gradient(
99deg,
var(--monster-skeleton-color) 0,
transparent var(--monster-skeleton-width)
);
}
.monster-skeleton-col-70 {
--monster-skeleton-color: var(--monster-color-pink-2);
--monster-skeleton-height: 100%;
--monster-skeleton-width: 70%;
--monster-skeleton: linear-gradient(
99deg,
var(--monster-skeleton-color) 0,
transparent var(--monster-skeleton-width)
);
}
.monster-skeleton-col-70,
.monster-skeleton-col-80 {
background-image: var(--monster-skeleton);
background-position: 0 0;
background-repeat: no-repeat;
background-size: var(--monster-skeleton-width) var(--monster-skeleton-height);
color: var(--monster-skeleton-color);
min-height: 1px;
}
.monster-skeleton-col-80 {
--monster-skeleton-color: var(--monster-color-pink-2);
--monster-skeleton-height: 100%;
--monster-skeleton-width: 80%;
--monster-skeleton: linear-gradient(
99deg,
var(--monster-skeleton-color) 0,
transparent var(--monster-skeleton-width)
);
}
.monster-skeleton-col-90 {
--monster-skeleton-color: var(--monster-color-pink-2);
--monster-skeleton-height: 100%;
--monster-skeleton-width: 90%;
--monster-skeleton: linear-gradient(
99deg,
var(--monster-skeleton-color) 0,
transparent var(--monster-skeleton-width)
);
}
.monster-skeleton-col-100,
.monster-skeleton-col-90 {
background-image: var(--monster-skeleton);
background-position: 0 0;
background-repeat: no-repeat;
background-size: var(--monster-skeleton-width) var(--monster-skeleton-height);
color: var(--monster-skeleton-color);
min-height: 1px;
}
.monster-skeleton-col-100 {
--monster-skeleton-color: var(--monster-color-pink-2);
--monster-skeleton-height: 100%;
--monster-skeleton-width: 100%;
--monster-skeleton: linear-gradient(
99deg,
var(--monster-skeleton-color) 0,
transparent var(--monster-skeleton-width)
);
}
.monster-skeleton-animated {
animation: shimmer 4.25s linear infinite forwards;
border-radius: 4px;
}
@keyframes shimmer {
0%,
to {
filter: brightness(0.81);
}
50% {
filter: brightness(0.45);
}
}
source/components/style/typography.css
+ 8
− 4
View file @ 50132f46
This diff is collapsed.
source/components/stylesheet/mixin/skeleton.mjs
+ 13
− 6
View file @ 50132f46
......@@ -13,7 +13,7 @@
import { addAttributeToken } from "../../../dom/attributes.mjs";
import { ATTRIBUTE_ERRORMESSAGE } from "../../../dom/constants.mjs";
export {SkeletonStyleSheet}
export { SkeletonStyleSheet };
/**
* @private
......@@ -22,10 +22,17 @@ export {SkeletonStyleSheet}
const SkeletonStyleSheet = new CSSStyleSheet();
try {
SkeletonStyleSheet.insertRule(`
SkeletonStyleSheet.insertRule(
`
@layer skeleton {
}`, 0);
}`,
0,
);
} catch (e) {
addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
addAttributeToken(
document.getRootNode().querySelector("html"),
ATTRIBUTE_ERRORMESSAGE,
e + "",
);
}
source/components/stylesheet/skeleton.mjs
+ 13
− 6
View file @ 50132f46
......@@ -13,7 +13,7 @@
import { addAttributeToken } from "../../dom/attributes.mjs";
import { ATTRIBUTE_ERRORMESSAGE } from "../../dom/constants.mjs";
export {SkeletonStyleSheet}
export { SkeletonStyleSheet };
/**
* @private
......@@ -22,10 +22,17 @@ export {SkeletonStyleSheet}
const SkeletonStyleSheet = new CSSStyleSheet();
try {
SkeletonStyleSheet.insertRule(`
SkeletonStyleSheet.insertRule(
`
@layer skeleton {
.monster-skeleton-col-10{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-height:100%;--monster-skeleton-width:10%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-10,.monster-skeleton-col-20{background-image:var(--monster-skeleton);background-position:0 0;background-repeat:no-repeat;background-size:var(--monster-skeleton-width) var(--monster-skeleton-height);color:var(--monster-skeleton-color);min-height:1px}.monster-skeleton-col-20{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-height:100%;--monster-skeleton-width:20%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-30{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-height:100%;--monster-skeleton-width:30%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-30,.monster-skeleton-col-40{background-image:var(--monster-skeleton);background-position:0 0;background-repeat:no-repeat;background-size:var(--monster-skeleton-width) var(--monster-skeleton-height);color:var(--monster-skeleton-color);min-height:1px}.monster-skeleton-col-40{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-height:100%;--monster-skeleton-width:40%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-50{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-height:100%;--monster-skeleton-width:50%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-50,.monster-skeleton-col-60{background-image:var(--monster-skeleton);background-position:0 0;background-repeat:no-repeat;background-size:var(--monster-skeleton-width) var(--monster-skeleton-height);color:var(--monster-skeleton-color);min-height:1px}.monster-skeleton-col-60{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-height:100%;--monster-skeleton-width:60%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-70{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-height:100%;--monster-skeleton-width:70%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-70,.monster-skeleton-col-80{background-image:var(--monster-skeleton);background-position:0 0;background-repeat:no-repeat;background-size:var(--monster-skeleton-width) var(--monster-skeleton-height);color:var(--monster-skeleton-color);min-height:1px}.monster-skeleton-col-80{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-height:100%;--monster-skeleton-width:80%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-90{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-height:100%;--monster-skeleton-width:90%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-100,.monster-skeleton-col-90{background-image:var(--monster-skeleton);background-position:0 0;background-repeat:no-repeat;background-size:var(--monster-skeleton-width) var(--monster-skeleton-height);color:var(--monster-skeleton-color);min-height:1px}.monster-skeleton-col-100{--monster-skeleton-color:var(--monster-color-pink-2);--monster-skeleton-height:100%;--monster-skeleton-width:100%;--monster-skeleton:linear-gradient(99deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-animated{animation:shimmer 4.25s linear infinite forwards;border-radius:4px}@keyframes shimmer{0%,to{filter:brightness(.81)}50%{filter:brightness(.45)}}
}`, 0);
}`,
0,
);
} catch (e) {
addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
addAttributeToken(
document.getRootNode().querySelector("html"),
ATTRIBUTE_ERRORMESSAGE,
e + "",
);
}
source/monster.mjs
+ 1
− 0
View file @ 50132f46
......@@ -27,6 +27,7 @@ export * from "./components/layout/width-toggle.mjs";
export * from "./components/layout/panel.mjs";
export * from "./components/layout/details.mjs";
export * from "./components/layout/slider.mjs";
export * from "./components/content/fetch-box.mjs";
export * from "./components/content/viewer.mjs";
export * from "./components/content/copy.mjs";
export * from "./components/content/camera.mjs";
......
source/types/version.mjs
+ 1
− 1
View file @ 50132f46
......@@ -156,7 +156,7 @@ function getMonsterVersion() {
}
/** don't touch, replaced by make with package.json version */
monsterVersion = new Version("3.113.0");
monsterVersion = new Version("3.115.0");
return monsterVersion;
}
test/cases/monster.mjs
+ 1
− 1
View file @ 50132f46
......@@ -7,7 +7,7 @@ describe('Monster', function () {
let monsterVersion
/** don´t touch, replaced by make with package.json version */
monsterVersion = new Version("3.113.0")
monsterVersion = new Version("3.115.0")
let m = getMonsterVersion();
......
test/web/test.html
+ 2
− 2
View file @ 50132f46
......@@ -9,8 +9,8 @@
</head>
<body>
<div id="headline" style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
<h1 style='margin-bottom: 0.1em;'>Monster 3.113.0</h1>
<div id="lastupdate" style='font-size:0.7em'>last update So 23. Mär 19:30:03 CET 2025</div>
<h1 style='margin-bottom: 0.1em;'>Monster 3.115.0</h1>
<div id="lastupdate" style='font-size:0.7em'>last update Di 1. Apr 19:42:27 CEST 2025</div>
</div>
<div id="mocha-errors"
style="color: red;font-weight: bold;display: flex;align-items: center;justify-content: center;flex-direction: column;margin:20px;"></div>
......
test/web/tests.js
+ 19
− 19
View file @ 50132f46
This diff is collapsed.
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment