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

feat: new fetch-box control #303

parent 8537cb9e
No related branches found
No related tags found
No related merge requests found
Expand all Show whitespace changes
Inline Side-by-side
Showing
with 753 additions and 362 deletions
development/issues/closed/303.html 0 → 100644
+ 61
− 0
View file @ 7078194c
<!DOCTYPE html>
<html lang="en" xmlns="">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>new fetch-box control #303</title>
<script src="./303.mjs" type="module"></script>
</head>
<body>
<h1>new fetch-box control #303</h1>
<p></p>
<ul>
<li><a href="https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/303">Issue #303</a></li>
<li><a href="/">Back to overview</a></li>
</ul>
<main>
<p>Mein Land ist
<monster-fetch-box
data-monster-option-parameter="de"
data-monster-option-formatter-marker-open="{"
data-monster-option-formatter-marker-close="}"
data-monster-option-url="/issue-303.json?iso2={parameter}">
<span data-monster-replace="path:data.dataset.0.emoji"></span>
<span data-monster-replace="path:data.dataset.0.name"></span>
</monster-fetch-box>!
</p>
<p>Das ist ein inline element
<monster-fetch-box style="width: 190px"
data-monster-attributes="data-monster-option-parameter static:de"
data-monster-option-url="/issue-303.json?iso2={parameter}">
<span slot="loading">Loading...</span>
<span slot="error">Error</span>
<span slot="empty">No results</span>
<span>
<span data-monster-replace="path:data.dataset.0.emoji">1</span>
<span data-monster-replace="path:data.dataset.0.name">2</span>
</span>
</monster-fetch-box>
, mit lorem ipsum!!!!
</p>
<div style="width: 350px; height: 300px; border: 1px solid black;">
<monster-fetch-box
data-monster-attributes="data-monster-option-parameter static:de"
data-monster-option-url="/issue-303.json?iso2={parameter}">
<div slot="loading">Loading...</div>
<div slot="error">Error</div>
<div slot="empty">No results</div>
<div>
<span data-monster-replace="path:data.dataset.0.emoji">1</span>
<span data-monster-replace="path:data.dataset.0.name">2</span>
</div>
</monster-fetch-box>
</div>
</main>
</body>
</html>
development/issues/closed/303.mjs 0 → 100644
+ 15
− 0
View file @ 7078194c
/**
* @file development/issues/open/303.mjs
* @url https://gitlab.schukai.com/oss/libraries/javascript/monster/-/issues/303
* @description new fetch-box control
* @issue 303
*/
import "../../../source/components/style/property.pcss";
import "../../../source/components/style/link.pcss";
import "../../../source/components/style/color.pcss";
import "../../../source/components/style/theme.pcss";
import "../../../source/components/style/normalize.pcss";
import "../../../source/components/style/typography.pcss";
import "../../../source/components/content/fetch-box.mjs";
development/mock/issue-303.js 0 → 100644
+ 80
− 0
View file @ 7078194c
const json =
`{
"dataset": [
{
"active": true,
"capital": "Berlin",
"createdAt": "2018-07-21 12:41:03",
"currency": "EUR",
"currencyName": "Euro",
"currencySymbol": "€",
"emoji": "🇩🇪",
"id": 82,
"iso2": "DE",
"iso3": "DEU",
"latitude": 51,
"longitude": 9,
"name": "Germany",
"nationality": "German",
"native": "Deutschland",
"numericCode": "276",
"phoneCode": "49",
"region": "Europe",
"subregion": "Western Europe",
"tags": null,
"tld": ".de",
"updatedAt": "2023-08-09 02:34:58"
}
],
"sys": {
"code": 200,
"pagination": {
"total": 1,
"currentPage": 1,
"objectsPerPage": 10,
"offset": 0,
"nextOffset": null,
"prevOffset": null,
"pages": 1
},
"result": {},
"api_version": "1"
}
}`;
// check if JSON is valid
JSON.parse(json)
const requestDelay = 10
export default [
{
url: '/issue-303.json',
method: 'get',
rawResponse: async (req, res) => {
res.setHeader('Content-Type', 'application/json')
res.statusCode = 200
const url= new URL(req.url, `http://${req.headers.host}`)
const q = Object.fromEntries(url.searchParams)
if (q && q.q) {
const query = q.q.toLowerCase()
const filtered = JSON.parse(json).filter(item => item.name.toLowerCase().includes(query))
setTimeout(function() {
res.end(JSON.stringify(filtered))
}, requestDelay);
return
}
setTimeout(function() {
res.end(json)
}, requestDelay);
},
},
];
\ No newline at end of file
flake.lock
+ 3
− 3
View file @ 7078194c
...@@ -164,11 +164,11 @@ ...@@ -164,11 +164,11 @@
}, },
"nixpkgs_3": { "nixpkgs_3": {
"locked": { "locked": {
"lastModified": 1743231893, "lastModified": 1743367904,
"narHash": "sha256-tpJsHMUPEhEnzySoQxx7+kA+KUtgWqvlcUBqROYNNt0=", "narHash": "sha256-sOos1jZGKmT6xxPvxGQyPTApOunXvScV4lNjBCXd/CI=",
"owner": "nixos", "owner": "nixos",
"repo": "nixpkgs", "repo": "nixpkgs",
"rev": "c570c1f5304493cafe133b8d843c7c1c4a10d3a6", "rev": "7ffe0edc685f14b8c635e3d6591b0bbb97365e6c",
"type": "github" "type": "github"
}, },
"original": { "original": {
......
package-lock.json
+ 145
− 137
View file @ 7078194c
This diff is collapsed.
source/components/content/camera.mjs
+ 1
− 1
View file @ 7078194c
...@@ -69,7 +69,7 @@ const emptyHistoryStateElementSymbol = Symbol("emptyHistoryStateElement"); ...@@ -69,7 +69,7 @@ const emptyHistoryStateElementSymbol = Symbol("emptyHistoryStateElement");
* *
* @fragments /fragments/components/content/camera-capture/ * @fragments /fragments/components/content/camera-capture/
* *
* @example /examples/components/content/camera-capture/ * @example /examples/components/content/camera-capture-simple/
* *
* @since 3.111.0 * @since 3.111.0
* @copyright schukai GmbH * @copyright schukai GmbH
......
source/components/content/fetch-box.mjs 0 → 100644
+ 345
− 0
View file @ 7078194c
/**
* Copyright © schukai GmbH and all contributing authors, {{copyRightYear}}. All rights reserved.
* Node module: @schukai/monster
*
* This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
* The full text of the license can be found at: https://www.gnu.org/licenses/agpl-3.0.en.html
*
* For those who do not wish to adhere to the AGPLv3, a commercial license is available.
* Acquiring a commercial license allows you to use this software without complying with the AGPLv3 terms.
* For more information about purchasing a commercial license, please contact schukai GmbH.
*/
import {instanceSymbol} from "../../constants.mjs";
import {
ATTRIBUTE_ROLE
} from "../../dom/constants.mjs";
import {CustomElement} from "../../dom/customelement.mjs";
import {
assembleMethodSymbol,
registerCustomElement,
} from "../../dom/customelement.mjs";
import {isString} from "../../types/is.mjs";
import {FetchBoxStyleSheet} from "./stylesheet/fetch-box.mjs";
import {addErrorAttribute} from "../../dom/error.mjs";
import {Formatter} from "../../text/formatter.mjs";
export {FetchBox};
/**
* @private
* @type {symbol}
*/
export const fetchBoxElementSymbol = Symbol("fetchBoxElement");
/**
* A FetchBox
*
* @fragments /fragments/components/content/fetch-box/
*
* @example /examples/components/content/fetch-box-simple
*
* @since 3.115.0
* @copyright schukai GmbH
* @summary A beautiful FetchBox that can make your life easier and also looks good. Its like a box, but it fetches data from a URL.
*/
class FetchBox extends CustomElement {
/**
* This method is called by the `instanceof` operator.
* @returns {symbol}
*/
static get [instanceSymbol]() {
return Symbol.for("@schukai/monster/components/content/fetch-box@@instance");
}
/**
*
* @return {Components.Content.FetchBox
*/
[assembleMethodSymbol]() {
super[assembleMethodSymbol]();
initControlReferences.call(this);
return this;
}
/**
* Handles the component's connection to the DOM.
* Determines the styling of the component based on its parent's tag name.
* Fetches necessary data for the component.
*
* @return {void} This method does not return a value.
*/
connectedCallback() {
super.connectedCallback();
const parent = this.parentElement;
if (parent) {
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%';
} else {
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}
*
* The individual configuration values can be found in the table.
*
* @property {Object} templates Template definitions
* @property {string} templates.main Main template
* @property {Object} classes CSS classes
* @property {string} classes.default CSS class for the main template
* @property {string} classes.loading CSS class for the loading template
* @property {string} classes.error CSS class for the error template
* @property {string} classes.empty CSS class for the empty template
* @property {Object} fetch fetch options for the request
* @property {string} fetch.redirect error, follow, manual
* @property {string} fetch.method GET, POST, PUT, DELETE
* @property {string} fetch.mode same-origin, cors, no-cors, navigate
* @property {string} fetch.credentials omit, same-origin, include
* @property {Object} fetch.headers
* @property {string} fetch.headers.accept text/html, application/json
* @property {string} fetch.headers.content-type application/json
* @property {string} parameter value for the data url
* @property {Object} formatter
* @property {Object} formatter.marker
* @property {string} formatter.marker.open marker for the url
* @property {string} formatter.marker.close marker for the url
* @property {string} url url to fetch
*/
get defaults() {
return Object.assign({}, super.defaults, {
templates: {
main: getTemplate(),
},
classes: {
default: "monster-fetch-box-default",
loading: "loading",
error: "error",
empty: "empty",
},
data: {},
url: null,
fetch: {
redirect: "error",
method: "GET",
mode: "same-origin",
credentials: "same-origin",
headers: {
accept: "text/html",
},
},
content: {
// <slot name="loading"></slot>
loading: `<div class="monster-skeleton-animated monster-skeleton-col-100"></div>`,
error: `<slot name="error"></slot>`,
empty: `<slot name="empty"></slot>`,
},
visible: "loading",
parameter: null,
formatter: {
marker: {
open: null,
close: null,
},
},
});
}
/**
* @return {string}
*/
static getTag() {
return "monster-fetch-box";
}
/**
* @return {CSSStyleSheet[]}
*/
static getCSSStyleSheet() {
return [FetchBoxStyleSheet];
}
/**
* load content from url
*/
fetch() {
try {
return loadContent.call(this).then(obj => {
if (obj.type !== "application/json") {
this.setOption("visible", "error");
throw new Error("not a json response");
}
try {
const content = obj.content;
if (!isString(content)|| content === "") {
this.setOption("visible", "empty");
return
}
const jsonContent = JSON.parse(content);
if (jsonContent === null) {
this.setOption("visible", "empty");
return
}
this.setOption("data", jsonContent);
this.setOption("visible", "default");
} catch (e) {
this.setOption("visible", "error");
throw e;
}
}).catch(e => {
this.setOption("visible", "error");
addErrorAttribute(this, e);
});
} catch (e) {
addErrorAttribute(this, e);
this.setOption("visible", "error");
return Promise.reject(e);
}
}
}
/**
* @private
* @throws {Error} missing url
* @throws {Error} we won't be able to read the data
* @throws {Error} request failed
* @return {Promise}
*/
function loadContent() {
let url = this.getOption("url");
if (url instanceof URL) {
url = url.toString();
}
if (!isString(url) || url === "") {
throw new Error("missing url");
}
let p = this.getOption("parameter", null);
if (p === null) {
p = "";
}
const data = {
parameter : p
}
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");
}
const close = this.getOption("formatter.marker.close");
if (close !== undefined && !isString(close)) {
throw new TypeError("close is not a string");
}
formatter.setMarker(
open,
close
);
}
const formattedUrl = formatter.format(
url
);
const options = this.getOption("fetch", {});
return fetch(formattedUrl, options).then((response) => {
if (!response.ok) {
if (["error", "opaque", "opaqueredirect"].includes(response.type)) {
throw new Error(`we won't be able to read the data (${response.type})`);
}
const statusClass = String(response.status).charAt(0);
if (statusClass === "4") {
throw new Error(`client error ${response.statusText}`);
}
throw new Error(
`undefined status (${response.status} / ${response.statusText}) or type (${response.type})`,
);
}
return response.text().then((content) => ({
content,
type: response.headers.get("Content-Type"),
}));
});
}
/**
* @private
* @return {void}
*/
function initControlReferences() {
this[fetchBoxElementSymbol] = this.shadowRoot.querySelector(
`[${ATTRIBUTE_ROLE}="control"]`,
);
}
/**
* @private
* @return {string}
*/
function getTemplate() {
// language=HTML
return `
<div data-monster-role="control" part="control">
<div
data-monster-attributes="class path:classes.default,
data-monster-visible path:visible | equals:default | ?:true:false
">
<slot></slot>
</div>
<div
data-monster-attributes="class path:classes.loading,
data-monster-visible path:visible | equals:loading | ?:true:false"
data-monster-replace="path:content.loading"></div>
<div
data-monster-attributes="class path:classes.error,
data-monster-visible path:visible | equals:error | ?:true:false"
data-monster-replace="path:content.error"></div>
<div
data-monster-attributes="class path:classes.empty,
data-monster-visible path:visible | equals:empty | ?:true:false"
data-monster-replace="path:content.empty"></div>
</div>`;
}
registerCustomElement(FetchBox);
source/components/content/style/fetch-box.pcss 0 → 100644
+ 36
− 0
View file @ 7078194c
@import "../../style/control.pcss";
@import "../../style/property.pcss";
@import "../../style/skeleton.pcss";
[data-monster-role="control"] {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
min-height: 1rem;
min-width: 1rem;
box-sizing: border-box;
}
[data-monster-visible="false"] {
display: none;
}
[data-monster-visible="true"] {
height: 100%;
}
:host {
display: inline-block;;
min-width: 1rem;
min-height: 1rem;
height: 100%;
box-sizing: border-box;
}
.monster-skeleton-animated {
height: 100%;
min-height: 1rem;
}
source/components/content/stylesheet/fetch-box.mjs 0 → 100644
+ 31
− 0
View file @ 7078194c
/**
* Copyright © schukai GmbH and all contributing authors, 2025. All rights reserved.
* Node module: @schukai/monster
*
* This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
* The full text of the license can be found at: https://www.gnu.org/licenses/agpl-3.0.en.html
*
* For those who do not wish to adhere to the AGPLv3, a commercial license is available.
* Acquiring a commercial license allows you to use this software without complying with the AGPLv3 terms.
* For more information about purchasing a commercial license, please contact schukai GmbH.
*/
import {addAttributeToken} from "../../../dom/attributes.mjs";
import {ATTRIBUTE_ERRORMESSAGE} from "../../../dom/constants.mjs";
export {FetchBoxStyleSheet}
/**
* @private
* @type {CSSStyleSheet}
*/
const FetchBoxStyleSheet = new CSSStyleSheet();
try {
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);
} catch (e) {
addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
}
source/components/style/mixin/skeleton.pcss
+ 12
− 14
View file @ 7078194c
@define-mixin skeleton $width, $color, $height:100% {
@define-mixin skeleton $width, $color:var(--monster-color-gray-3), $height:100% {
--monster-skeleton-color: $color; --monster-skeleton-color: $color;
--monster-skeleton-color-50: rgba(from $color 255 255 255 / 0.5);
--monster-skeleton-height: $height; --monster-skeleton-height: $height;
--monster-skeleton-width: $width; --monster-skeleton-width: $width;
--monster-skeleton: linear-gradient(90deg, var(--monster-skeleton-color) 0, transparent var(--monster-skeleton-width)); --monster-skeleton: linear-gradient(
99deg,
var(--monster-skeleton-color) 0%,
var(--monster-skeleton-color-50) 40%,
transparent 70%
);
background-image: background-image: var(--monster-skeleton);
var(--monster-skeleton);
background-size: background-size: var(--monster-skeleton-width) var(--monster-skeleton-height);
var(--monster-skeleton-width) var(--monster-skeleton-height);
background-repeat: background-repeat: no-repeat;
no-repeat;
background-position: background-position: 0 0;
0 0;
color: var(--monster-skeleton-color); color: var(--monster-skeleton-color);
min-height: 1px; min-height: 1px;
} }
source/components/style/skeleton.css
+ 1
− 164
View file @ 7078194c
/** generated from skeleton.pcss **/ /** generated from skeleton.pcss **/
.monster-skeleton-col-10 { .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)}}
--monster-skeleton-color: var(--monster-color-gray-3); \ No newline at end of file
--monster-skeleton-height: 100%;
--monster-skeleton-width: 10%;
--monster-skeleton: linear-gradient(
90deg,
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-gray-3);
--monster-skeleton-height: 100%;
--monster-skeleton-width: 20%;
--monster-skeleton: linear-gradient(
90deg,
var(--monster-skeleton-color) 0,
transparent var(--monster-skeleton-width)
);
}
.monster-skeleton-col-30 {
--monster-skeleton-color: var(--monster-color-gray-3);
--monster-skeleton-height: 100%;
--monster-skeleton-width: 30%;
--monster-skeleton: linear-gradient(
90deg,
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-gray-3);
--monster-skeleton-height: 100%;
--monster-skeleton-width: 40%;
--monster-skeleton: linear-gradient(
90deg,
var(--monster-skeleton-color) 0,
transparent var(--monster-skeleton-width)
);
}
.monster-skeleton-col-50 {
--monster-skeleton-color: var(--monster-color-gray-3);
--monster-skeleton-height: 100%;
--monster-skeleton-width: 50%;
--monster-skeleton: linear-gradient(
90deg,
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-gray-3);
--monster-skeleton-height: 100%;
--monster-skeleton-width: 60%;
--monster-skeleton: linear-gradient(
90deg,
var(--monster-skeleton-color) 0,
transparent var(--monster-skeleton-width)
);
}
.monster-skeleton-col-70 {
--monster-skeleton-color: var(--monster-color-gray-3);
--monster-skeleton-height: 100%;
--monster-skeleton-width: 70%;
--monster-skeleton: linear-gradient(
90deg,
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-gray-3);
--monster-skeleton-height: 100%;
--monster-skeleton-width: 80%;
--monster-skeleton: linear-gradient(
90deg,
var(--monster-skeleton-color) 0,
transparent var(--monster-skeleton-width)
);
}
.monster-skeleton-col-90 {
--monster-skeleton-color: var(--monster-color-gray-3);
--monster-skeleton-height: 100%;
--monster-skeleton-width: 90%;
--monster-skeleton: linear-gradient(
90deg,
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-gray-3);
--monster-skeleton-height: 100%;
--monster-skeleton-width: 100%;
--monster-skeleton: linear-gradient(
90deg,
var(--monster-skeleton-color) 0,
transparent var(--monster-skeleton-width)
);
}
.monster-skeleton-animated {
animation-duration: 2.25s;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: shimmer;
animation-timing-function: linear;
border-radius: 4px;
}
@keyframes shimmer {
0% {
filter: brightness(1);
}
50% {
filter: brightness(1.5);
}
to {
filter: brightness(1);
}
}
source/components/style/skeleton.pcss
+ 7
− 13
View file @ 7078194c
...@@ -2,27 +2,21 @@ ...@@ -2,27 +2,21 @@
@for $i from 10 to 100 by 10 { @for $i from 10 to 100 by 10 {
.monster-skeleton-col-$(i) { .monster-skeleton-col-$(i) {
@mixin skeleton $(i)%; @mixin skeleton $(i)%, var(--monster-color-pink-2);
} }
} }
.monster-skeleton-animated { .monster-skeleton-animated {
animation-duration: 2.25s; animation: shimmer 4.25s linear infinite forwards;
animation-fill-mode: forwards;
animation-iteration-count: infinite;
animation-name: shimmer;
animation-timing-function: linear;
border-radius: 4px; border-radius: 4px;
} }
@keyframes shimmer { @keyframes shimmer {
0% { 0%, 100% {
filter: brightness(1); filter: brightness(0.81);
} }
50% { 50% {
filter: brightness(1.5); filter: brightness(0.45);
}
100% {
filter: brightness(1);
} }
} }
\ No newline at end of file
source/components/stylesheet/mixin/skeleton.mjs
+ 6
− 13
View file @ 7078194c
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
import {addAttributeToken} from "../../../dom/attributes.mjs"; import {addAttributeToken} from "../../../dom/attributes.mjs";
import {ATTRIBUTE_ERRORMESSAGE} from "../../../dom/constants.mjs"; import {ATTRIBUTE_ERRORMESSAGE} from "../../../dom/constants.mjs";
export { SkeletonStyleSheet }; export {SkeletonStyleSheet}
/** /**
* @private * @private
...@@ -22,17 +22,10 @@ export { SkeletonStyleSheet }; ...@@ -22,17 +22,10 @@ export { SkeletonStyleSheet };
const SkeletonStyleSheet = new CSSStyleSheet(); const SkeletonStyleSheet = new CSSStyleSheet();
try { try {
SkeletonStyleSheet.insertRule( SkeletonStyleSheet.insertRule(`
`
@layer skeleton { @layer skeleton {
}`, }`, 0);
0,
);
} catch (e) { } catch (e) {
addAttributeToken( addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
document.getRootNode().querySelector("html"),
ATTRIBUTE_ERRORMESSAGE,
e + "",
);
} }
source/components/stylesheet/skeleton.mjs
+ 7
− 14
View file @ 7078194c
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
import {addAttributeToken} from "../../dom/attributes.mjs"; import {addAttributeToken} from "../../dom/attributes.mjs";
import {ATTRIBUTE_ERRORMESSAGE} from "../../dom/constants.mjs"; import {ATTRIBUTE_ERRORMESSAGE} from "../../dom/constants.mjs";
export { SkeletonStyleSheet }; export {SkeletonStyleSheet}
/** /**
* @private * @private
...@@ -22,17 +22,10 @@ export { SkeletonStyleSheet }; ...@@ -22,17 +22,10 @@ export { SkeletonStyleSheet };
const SkeletonStyleSheet = new CSSStyleSheet(); const SkeletonStyleSheet = new CSSStyleSheet();
try { try {
SkeletonStyleSheet.insertRule( SkeletonStyleSheet.insertRule(`
`
@layer skeleton { @layer skeleton {
.monster-skeleton-col-10{--monster-skeleton-color:var(--monster-color-gray-3);--monster-skeleton-height:100%;--monster-skeleton-width:10%;--monster-skeleton:linear-gradient(90deg,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-gray-3);--monster-skeleton-height:100%;--monster-skeleton-width:20%;--monster-skeleton:linear-gradient(90deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-30{--monster-skeleton-color:var(--monster-color-gray-3);--monster-skeleton-height:100%;--monster-skeleton-width:30%;--monster-skeleton:linear-gradient(90deg,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-gray-3);--monster-skeleton-height:100%;--monster-skeleton-width:40%;--monster-skeleton:linear-gradient(90deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-50{--monster-skeleton-color:var(--monster-color-gray-3);--monster-skeleton-height:100%;--monster-skeleton-width:50%;--monster-skeleton:linear-gradient(90deg,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-gray-3);--monster-skeleton-height:100%;--monster-skeleton-width:60%;--monster-skeleton:linear-gradient(90deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-70{--monster-skeleton-color:var(--monster-color-gray-3);--monster-skeleton-height:100%;--monster-skeleton-width:70%;--monster-skeleton:linear-gradient(90deg,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-gray-3);--monster-skeleton-height:100%;--monster-skeleton-width:80%;--monster-skeleton:linear-gradient(90deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-col-90{--monster-skeleton-color:var(--monster-color-gray-3);--monster-skeleton-height:100%;--monster-skeleton-width:90%;--monster-skeleton:linear-gradient(90deg,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-gray-3);--monster-skeleton-height:100%;--monster-skeleton-width:100%;--monster-skeleton:linear-gradient(90deg,var(--monster-skeleton-color) 0,transparent var(--monster-skeleton-width))}.monster-skeleton-animated{animation-duration:2.25s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:shimmer;animation-timing-function:linear;border-radius:4px}@keyframes shimmer{0%{filter:brightness(1)}50%{filter:brightness(1.5)}to{filter:brightness(1)}} .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) { } catch (e) {
addAttributeToken( addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
document.getRootNode().querySelector("html"),
ATTRIBUTE_ERRORMESSAGE,
e + "",
);
} }
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment