1021 lines
28 KiB
JavaScript
1021 lines
28 KiB
JavaScript
import {
|
|
getIconElement,
|
|
isDefinedIcon
|
|
} from "./chunk-ZUETELRC.js";
|
|
import {
|
|
DevToolbarWindow,
|
|
settings
|
|
} from "./chunk-LEX3GG7N.js";
|
|
import "./chunk-5WRI5ZAA.js";
|
|
|
|
// node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/badge.js
|
|
var sizes = ["small", "large"];
|
|
var styles = ["purple", "gray", "red", "green", "yellow", "blue"];
|
|
var DevToolbarBadge = class extends HTMLElement {
|
|
_size = "small";
|
|
_badgeStyle = "purple";
|
|
get size() {
|
|
return this._size;
|
|
}
|
|
set size(value) {
|
|
if (!sizes.includes(value)) {
|
|
settings.logger.error(
|
|
`Invalid size: ${value}, expected one of ${sizes.join(", ")}, got ${value}.`
|
|
);
|
|
return;
|
|
}
|
|
this._size = value;
|
|
this.updateStyle();
|
|
}
|
|
get badgeStyle() {
|
|
return this._badgeStyle;
|
|
}
|
|
set badgeStyle(value) {
|
|
if (!styles.includes(value)) {
|
|
settings.logger.error(
|
|
`Invalid style: ${value}, expected one of ${styles.join(", ")}, got ${value}.`
|
|
);
|
|
return;
|
|
}
|
|
this._badgeStyle = value;
|
|
this.updateStyle();
|
|
}
|
|
shadowRoot;
|
|
static observedAttributes = ["badge-style", "size"];
|
|
constructor() {
|
|
super();
|
|
this.shadowRoot = this.attachShadow({ mode: "open" });
|
|
this.shadowRoot.innerHTML = `
|
|
<style>
|
|
.badge {
|
|
box-sizing: border-box;
|
|
border-radius: 4px;
|
|
border: 1px solid transparent;
|
|
padding: 8px;
|
|
font-size: 12px;
|
|
color: var(--text-color);
|
|
height: var(--size);
|
|
border: 1px solid var(--border-color);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
|
|
|
--purple-text: rgba(224, 204, 250, 1);
|
|
--purple-border: rgba(113, 24, 226, 1);
|
|
|
|
--gray-text: rgba(191, 193, 201, 1);
|
|
--gray-border:rgba(191, 193, 201, 1);
|
|
|
|
--red-text: rgba(249, 196, 215, 1);
|
|
--red-border: rgba(179, 62, 102, 1);
|
|
|
|
--green-text: rgba(213, 249, 196, 1);
|
|
--green-border: rgba(61, 125, 31, 1);
|
|
|
|
--yellow-text: rgba(249, 233, 196, 1);
|
|
--yellow-border: rgba(181, 138, 45, 1);
|
|
|
|
--blue-text: rgba(189, 195, 255, 1);
|
|
--blue-border: rgba(54, 69, 217, 1);
|
|
|
|
--large: 24px;
|
|
--small: 20px;
|
|
}
|
|
</style>
|
|
<style id="selected-style"></style>
|
|
|
|
<div class="badge">
|
|
<slot></slot>
|
|
</div>
|
|
`;
|
|
}
|
|
connectedCallback() {
|
|
this.updateStyle();
|
|
}
|
|
attributeChangedCallback() {
|
|
if (this.hasAttribute("badge-style"))
|
|
this.badgeStyle = this.getAttribute("badge-style");
|
|
if (this.hasAttribute("size")) this.size = this.getAttribute("size");
|
|
}
|
|
updateStyle() {
|
|
const style = this.shadowRoot.querySelector("#selected-style");
|
|
if (style) {
|
|
style.innerHTML = `
|
|
.badge {
|
|
--text-color: var(--${this.badgeStyle}-text);
|
|
--border-color: var(--${this.badgeStyle}-border);
|
|
--size: var(--${this.size});
|
|
}`;
|
|
}
|
|
}
|
|
};
|
|
|
|
// node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/button.js
|
|
var sizes2 = ["small", "medium", "large"];
|
|
var styles2 = ["ghost", "outline", "purple", "gray", "red", "green", "yellow", "blue"];
|
|
var borderRadii = ["normal", "rounded"];
|
|
var DevToolbarButton = class extends HTMLElement {
|
|
_size = "small";
|
|
_buttonStyle = "purple";
|
|
_buttonBorderRadius = "normal";
|
|
get size() {
|
|
return this._size;
|
|
}
|
|
set size(value) {
|
|
if (!sizes2.includes(value)) {
|
|
settings.logger.error(
|
|
`Invalid size: ${value}, expected one of ${sizes2.join(", ")}, got ${value}.`
|
|
);
|
|
return;
|
|
}
|
|
this._size = value;
|
|
this.updateStyle();
|
|
}
|
|
get buttonStyle() {
|
|
return this._buttonStyle;
|
|
}
|
|
set buttonStyle(value) {
|
|
if (!styles2.includes(value)) {
|
|
settings.logger.error(
|
|
`Invalid style: ${value}, expected one of ${styles2.join(", ")}, got ${value}.`
|
|
);
|
|
return;
|
|
}
|
|
this._buttonStyle = value;
|
|
this.updateStyle();
|
|
}
|
|
get buttonBorderRadius() {
|
|
return this._buttonBorderRadius;
|
|
}
|
|
set buttonBorderRadius(value) {
|
|
if (!borderRadii.includes(value)) {
|
|
settings.logger.error(
|
|
`Invalid border-radius: ${value}, expected one of ${borderRadii.join(", ")}, got ${value}.`
|
|
);
|
|
return;
|
|
}
|
|
this._buttonBorderRadius = value;
|
|
this.updateStyle();
|
|
}
|
|
static observedAttributes = ["button-style", "size", "button-border-radius"];
|
|
shadowRoot;
|
|
constructor() {
|
|
super();
|
|
this.shadowRoot = this.attachShadow({ mode: "open" });
|
|
this.shadowRoot.innerHTML = `
|
|
<style>
|
|
button {
|
|
--purple-background: rgba(113, 24, 226, 1);
|
|
--purple-border: rgba(224, 204, 250, 0.33);
|
|
--purple-text: #fff;
|
|
|
|
--gray-background: rgba(52, 56, 65, 1);
|
|
--gray-border: rgba(71, 78, 94, 1);
|
|
--gray-text: #fff;
|
|
|
|
--red-background: rgba(179, 62, 102, 1);
|
|
--red-border: rgba(249, 196, 215, 0.33);
|
|
--red-text: #fff;
|
|
|
|
--green-background: rgba(213, 249, 196, 1);
|
|
--green-border: rgba(61, 125, 31, 1);
|
|
--green-text: #000;
|
|
|
|
--yellow-background: rgba(255, 236, 179, 1);
|
|
--yellow-border: rgba(255, 191, 0, 1);
|
|
--yellow-text: #000;
|
|
|
|
--blue-background: rgba(54, 69, 217, 1);
|
|
--blue-border: rgba(189, 195, 255, 1);
|
|
--blue-text: #fff;
|
|
|
|
--outline-background: transparent;
|
|
--outline-border: #fff;
|
|
--outline-text: #fff;
|
|
|
|
--ghost-background: transparent;
|
|
--ghost-border: transparent;
|
|
--ghost-text: #fff;
|
|
|
|
--large-font-size: 16px;
|
|
--medium-font-size: 14px;
|
|
--small-font-size: 12px;
|
|
|
|
--large-padding: 12px 16px;
|
|
--large-rounded-padding: 12px 12px;
|
|
--medium-padding: 8px 12px;
|
|
--medium-rounded-padding: 8px 8px;
|
|
--small-padding: 4px 8px;
|
|
--small-rounded-padding: 4px 4px;
|
|
|
|
--normal-border-radius: 4px;
|
|
--rounded-border-radius: 9999px;
|
|
|
|
border: 1px solid var(--border);
|
|
padding: var(--padding);
|
|
font-size: var(--font-size);
|
|
background: var(--background);
|
|
|
|
color: var(--text-color);
|
|
border-radius: var(--border-radius);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
button:hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
::slotted(astro-dev-toolbar-icon) {
|
|
display: inline-block;
|
|
height: 1em;
|
|
width: 1em;
|
|
margin-left: 0.5em;
|
|
}
|
|
</style>
|
|
<style id="selected-style"></style>
|
|
|
|
<button>
|
|
<slot></slot>
|
|
</button>
|
|
`;
|
|
}
|
|
connectedCallback() {
|
|
this.updateStyle();
|
|
}
|
|
updateStyle() {
|
|
const style = this.shadowRoot.querySelector("#selected-style");
|
|
if (style) {
|
|
style.innerHTML = `
|
|
button {
|
|
--background: var(--${this.buttonStyle}-background);
|
|
--border: var(--${this.buttonStyle}-border);
|
|
--font-size: var(--${this.size}-font-size);
|
|
--text-color: var(--${this.buttonStyle}-text);
|
|
${this.buttonBorderRadius === "normal" ? "--padding: var(--" + this.size + "-padding);" : "--padding: var(--" + this.size + "-rounded-padding);"}
|
|
--border-radius: var(--${this.buttonBorderRadius}-border-radius);
|
|
}`;
|
|
}
|
|
}
|
|
attributeChangedCallback() {
|
|
if (this.hasAttribute("size")) this.size = this.getAttribute("size");
|
|
if (this.hasAttribute("button-style"))
|
|
this.buttonStyle = this.getAttribute("button-style");
|
|
}
|
|
};
|
|
|
|
// node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/card.js
|
|
var styles3 = ["purple", "gray", "red", "green", "yellow", "blue"];
|
|
var DevToolbarCard = class extends HTMLElement {
|
|
link;
|
|
clickAction;
|
|
shadowRoot;
|
|
_cardStyle = "purple";
|
|
get cardStyle() {
|
|
return this._cardStyle;
|
|
}
|
|
set cardStyle(value) {
|
|
if (!styles3.includes(value)) {
|
|
settings.logger.error(
|
|
`Invalid style: ${value}, expected one of ${styles3.join(", ")}, got ${value}.`
|
|
);
|
|
return;
|
|
}
|
|
this._cardStyle = value;
|
|
this.updateStyle();
|
|
}
|
|
static observedAttributes = ["card-style"];
|
|
constructor() {
|
|
super();
|
|
this.shadowRoot = this.attachShadow({ mode: "open" });
|
|
this.link = this.getAttribute("link");
|
|
}
|
|
attributeChangedCallback() {
|
|
if (this.hasAttribute("card-style"))
|
|
this.cardStyle = this.getAttribute("card-style");
|
|
this.updateStyle();
|
|
}
|
|
updateStyle() {
|
|
const style = this.shadowRoot.querySelector("#selected-style");
|
|
if (style) {
|
|
style.innerHTML = `
|
|
:host {
|
|
--hover-background: var(--${this.cardStyle}-hover-background);
|
|
--hover-border: var(--${this.cardStyle}-hover-border);
|
|
}
|
|
`;
|
|
}
|
|
}
|
|
connectedCallback() {
|
|
const element = this.link ? "a" : this.clickAction ? "button" : "div";
|
|
this.shadowRoot.innerHTML += `
|
|
<style>
|
|
:host {
|
|
--purple-hover-background: rgba(136, 58, 234, 0.33);
|
|
--purple-hover-border: 1px solid rgba(113, 24, 226, 1);
|
|
|
|
--gray-hover-background: rgba(191, 193, 201, 0.33);
|
|
--gray-hover-border: 1px solid rgba(191, 193, 201, 1);
|
|
|
|
--red-hover-background: rgba(249, 196, 215, 0.33);
|
|
--red-hover-border: 1px solid rgba(179, 62, 102, 1);
|
|
|
|
--green-hover-background: rgba(213, 249, 196, 0.33);
|
|
--green-hover-border: 1px solid rgba(61, 125, 31, 1);
|
|
|
|
--yellow-hover-background: rgba(255, 236, 179, 0.33);
|
|
--yellow-hover-border: 1px solid rgba(255, 191, 0, 1);
|
|
|
|
--blue-hover-background: rgba(189, 195, 255, 0.33);
|
|
--blue-hover-border: 1px solid rgba(54, 69, 217, 1);
|
|
}
|
|
|
|
:host>a, :host>button, :host>div {
|
|
box-sizing: border-box;
|
|
padding: 16px;
|
|
display: block;
|
|
border-radius: 8px;
|
|
border: 1px solid rgba(35, 38, 45, 1);
|
|
color: rgba(191, 193, 201, 1);
|
|
text-decoration: none;
|
|
background-color: #13151A;
|
|
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.10), 0px 1px 2px 0px rgba(0, 0, 0, 0.10), 0px 4px 4px 0px rgba(0, 0, 0, 0.09), 0px 10px 6px 0px rgba(0, 0, 0, 0.05), 0px 17px 7px 0px rgba(0, 0, 0, 0.01), 0px 26px 7px 0px rgba(0, 0, 0, 0.00);
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
color: #fff;
|
|
font-weight: 600;
|
|
}
|
|
|
|
a:hover, button:hover {
|
|
background: var(--hover-background);
|
|
border: var(--hover-border);
|
|
}
|
|
|
|
svg {
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
span {
|
|
margin-top: 8px;
|
|
display: block;
|
|
text-align: center;
|
|
}
|
|
</style>
|
|
<style id="selected-style"></style>
|
|
|
|
<${element}${this.link ? ` href="${this.link}" target="_blank"` : ``} id="astro-overlay-card">
|
|
<slot />
|
|
</${element}>
|
|
`;
|
|
this.updateStyle();
|
|
if (this.clickAction) {
|
|
this.shadowRoot.getElementById("astro-overlay-card")?.addEventListener("click", this.clickAction);
|
|
}
|
|
}
|
|
};
|
|
|
|
// node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/highlight.js
|
|
var styles4 = ["purple", "gray", "red", "green", "yellow", "blue"];
|
|
var DevToolbarHighlight = class extends HTMLElement {
|
|
icon;
|
|
_highlightStyle = "purple";
|
|
get highlightStyle() {
|
|
return this._highlightStyle;
|
|
}
|
|
set highlightStyle(value) {
|
|
if (!styles4.includes(value)) {
|
|
settings.logger.error(
|
|
`Invalid style: ${value}, expected one of ${styles4.join(", ")}, got ${value}.`
|
|
);
|
|
return;
|
|
}
|
|
this._highlightStyle = value;
|
|
this.updateStyle();
|
|
}
|
|
static observedAttributes = ["highlight-style"];
|
|
shadowRoot;
|
|
constructor() {
|
|
super();
|
|
this.shadowRoot = this.attachShadow({ mode: "open" });
|
|
this.icon = this.hasAttribute("icon") ? this.getAttribute("icon") : void 0;
|
|
this.shadowRoot.innerHTML = `
|
|
<style>
|
|
:host {
|
|
--purple-background: linear-gradient(180deg, rgba(224, 204, 250, 0.33) 0%, rgba(224, 204, 250, 0.0825) 100%);
|
|
--purple-border: 1px solid rgba(113, 24, 226, 1);
|
|
|
|
--gray-background: linear-gradient(180deg, rgba(191, 193, 201, 0.33) 0%, rgba(191, 193, 201, 0.0825) 100%);
|
|
--gray-border: 1px solid rgba(191, 193, 201, 1);
|
|
|
|
--red-background: linear-gradient(180deg, rgba(249, 196, 215, 0.33) 0%, rgba(249, 196, 215, 0.0825) 100%);
|
|
--red-border: 1px solid rgba(179, 62, 102, 1);
|
|
|
|
--green-background: linear-gradient(180deg, rgba(213, 249, 196, 0.33) 0%, rgba(213, 249, 196, 0.0825) 100%);
|
|
--green-border: 1px solid rgba(61, 125, 31, 1);
|
|
|
|
--yellow-background: linear-gradient(180deg, rgba(255, 236, 179, 0.33) 0%, rgba(255, 236, 179, 0.0825) 100%);
|
|
--yellow-border: 1px solid rgba(181, 138, 45, 1);
|
|
|
|
--blue-background: linear-gradient(180deg, rgba(189, 195, 255, 0.33) 0%, rgba(189, 195, 255, 0.0825) 100%);
|
|
--blue-border: 1px solid rgba(54, 69, 217, 1);
|
|
|
|
border-radius: 4px;
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
z-index: 2000000000;
|
|
|
|
background: var(--background);
|
|
border: var(--border);
|
|
}
|
|
|
|
.icon {
|
|
width: 24px;
|
|
height: 24px;
|
|
color: white;
|
|
background: linear-gradient(0deg, #B33E66, #B33E66), linear-gradient(0deg, #351722, #351722);
|
|
border: 1px solid rgba(53, 23, 34, 1);
|
|
border-radius: 9999px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: absolute;
|
|
top: -15px;
|
|
right: -15px;
|
|
}
|
|
</style>
|
|
<style id="selected-style"></style>
|
|
`;
|
|
}
|
|
updateStyle() {
|
|
const style = this.shadowRoot.querySelector("#selected-style");
|
|
if (style) {
|
|
style.innerHTML = `
|
|
:host {
|
|
--background: var(--${this.highlightStyle}-background);
|
|
--border: var(--${this.highlightStyle}-border);
|
|
}`;
|
|
}
|
|
}
|
|
attributeChangedCallback() {
|
|
if (this.hasAttribute("highlight-style"))
|
|
this.highlightStyle = this.getAttribute("highlight-style");
|
|
}
|
|
connectedCallback() {
|
|
this.updateStyle();
|
|
if (this.icon) {
|
|
let iconContainer = document.createElement("div");
|
|
iconContainer.classList.add("icon");
|
|
let iconElement;
|
|
if (isDefinedIcon(this.icon)) {
|
|
iconElement = getIconElement(this.icon);
|
|
} else {
|
|
iconElement = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
|
iconElement.setAttribute("viewBox", "0 0 16 16");
|
|
iconElement.innerHTML = this.icon;
|
|
}
|
|
if (iconElement) {
|
|
iconElement?.style.setProperty("width", "16px");
|
|
iconElement?.style.setProperty("height", "16px");
|
|
iconContainer.append(iconElement);
|
|
this.shadowRoot.append(iconContainer);
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
// node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/icon.js
|
|
var DevToolbarIcon = class extends HTMLElement {
|
|
_icon = void 0;
|
|
shadowRoot;
|
|
get icon() {
|
|
return this._icon;
|
|
}
|
|
set icon(name) {
|
|
this._icon = name;
|
|
this.buildTemplate();
|
|
}
|
|
constructor() {
|
|
super();
|
|
this.shadowRoot = this.attachShadow({ mode: "open" });
|
|
if (this.hasAttribute("icon")) {
|
|
this.icon = this.getAttribute("icon");
|
|
} else {
|
|
this.buildTemplate();
|
|
}
|
|
}
|
|
getIconHTML(icon) {
|
|
if (icon && isDefinedIcon(icon)) {
|
|
return getIconElement(icon)?.outerHTML ?? "";
|
|
}
|
|
return "<slot />";
|
|
}
|
|
buildTemplate() {
|
|
this.shadowRoot.innerHTML = `
|
|
<style>
|
|
svg {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
@media (forced-colors: active) {
|
|
svg path[fill="#fff"] {
|
|
fill: black;
|
|
}
|
|
}
|
|
</style>
|
|
${this.getIconHTML(this._icon)}`;
|
|
}
|
|
};
|
|
|
|
// node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/radio-checkbox.js
|
|
var styles5 = ["purple", "gray", "red", "green", "yellow", "blue"];
|
|
var DevToolbarRadioCheckbox = class extends HTMLElement {
|
|
_radioStyle = "purple";
|
|
input;
|
|
shadowRoot;
|
|
get radioStyle() {
|
|
return this._radioStyle;
|
|
}
|
|
set radioStyle(value) {
|
|
if (!styles5.includes(value)) {
|
|
console.error(`Invalid style: ${value}, expected one of ${styles5.join(", ")}.`);
|
|
return;
|
|
}
|
|
this._radioStyle = value;
|
|
this.updateStyle();
|
|
}
|
|
static observedAttributes = ["radio-style", "checked", "disabled", "name", "value"];
|
|
constructor() {
|
|
super();
|
|
this.shadowRoot = this.attachShadow({ mode: "open" });
|
|
this.shadowRoot.innerHTML = `
|
|
<style>
|
|
:host {
|
|
--purple-unchecked: rgba(224, 204, 250, 0.33);
|
|
--purple-checked: rgba(224, 204, 250, 1);
|
|
|
|
--gray-unchecked: rgba(191, 193, 201, 0.33);
|
|
--gray-checked: rgba(191, 193, 201, 1);
|
|
|
|
--red-unchecked: rgba(249, 196, 215, 0.33);
|
|
--red-checked: rgba(179, 62, 102, 1);
|
|
|
|
--green-unchecked: rgba(213, 249, 196, 0.33);
|
|
--green-checked: rgba(61, 125, 31, 1);
|
|
|
|
--yellow-unchecked: rgba(255, 236, 179, 0.33);
|
|
--yellow-checked: rgba(181, 138, 45, 1);
|
|
|
|
--blue-unchecked: rgba(189, 195, 255, 0.33);
|
|
--blue-checked: rgba(54, 69, 217, 1);
|
|
}
|
|
|
|
input[type="radio"] {
|
|
appearance: none;
|
|
-webkit-appearance: none;
|
|
display: flex;
|
|
align-content: center;
|
|
justify-content: center;
|
|
border: 2px solid var(--unchecked-color);
|
|
border-radius: 9999px;
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
input[type="radio"]::before {
|
|
content: "";
|
|
background-color: var(--checked-color);
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 9999px;
|
|
visibility: hidden;
|
|
margin: 2px;
|
|
}
|
|
|
|
input[type="radio"]:checked {
|
|
border-color: var(--checked-color);
|
|
}
|
|
|
|
input[type="radio"]:checked::before {
|
|
visibility: visible;
|
|
}
|
|
</style>
|
|
<style id="selected-style"></style>
|
|
`;
|
|
this.input = document.createElement("input");
|
|
this.input.type = "radio";
|
|
this.shadowRoot.append(this.input);
|
|
}
|
|
connectedCallback() {
|
|
this.updateInputState();
|
|
this.updateStyle();
|
|
}
|
|
updateStyle() {
|
|
const styleElement = this.shadowRoot.querySelector("#selected-style");
|
|
if (styleElement) {
|
|
styleElement.innerHTML = `
|
|
:host {
|
|
--unchecked-color: var(--${this._radioStyle}-unchecked);
|
|
--checked-color: var(--${this._radioStyle}-checked);
|
|
}
|
|
`;
|
|
}
|
|
}
|
|
updateInputState() {
|
|
this.input.checked = this.hasAttribute("checked");
|
|
this.input.disabled = this.hasAttribute("disabled");
|
|
this.input.name = this.getAttribute("name") || "";
|
|
this.input.value = this.getAttribute("value") || "";
|
|
}
|
|
attributeChangedCallback() {
|
|
if (this.hasAttribute("radio-style")) {
|
|
this.radioStyle = this.getAttribute("radio-style");
|
|
}
|
|
this.updateInputState();
|
|
}
|
|
};
|
|
|
|
// node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/select.js
|
|
var styles6 = ["purple", "gray", "red", "green", "yellow", "blue"];
|
|
var DevToolbarSelect = class extends HTMLElement {
|
|
shadowRoot;
|
|
element;
|
|
_selectStyle = "gray";
|
|
get selectStyle() {
|
|
return this._selectStyle;
|
|
}
|
|
set selectStyle(value) {
|
|
if (!styles6.includes(value)) {
|
|
settings.logger.error(`Invalid style: ${value}, expected one of ${styles6.join(", ")}.`);
|
|
return;
|
|
}
|
|
this._selectStyle = value;
|
|
this.updateStyle();
|
|
}
|
|
static observedAttributes = ["select-style"];
|
|
constructor() {
|
|
super();
|
|
this.shadowRoot = this.attachShadow({ mode: "open" });
|
|
this.shadowRoot.innerHTML = `
|
|
<style>
|
|
:host {
|
|
--purple-text: rgba(224, 204, 250, 1);
|
|
--purple-border: rgba(113, 24, 226, 1);
|
|
|
|
--gray-text: rgba(191, 193, 201, 1);
|
|
--gray-border:rgba(191, 193, 201, 1);
|
|
|
|
--red-text: rgba(249, 196, 215, 1);
|
|
--red-border: rgba(179, 62, 102, 1);
|
|
|
|
--green-text: rgba(213, 249, 196, 1);
|
|
--green-border: rgba(61, 125, 31, 1);
|
|
|
|
--yellow-text: rgba(249, 233, 196, 1);
|
|
--yellow-border: rgba(181, 138, 45, 1);
|
|
|
|
--blue-text: rgba(189, 195, 255, 1);
|
|
--blue-border: rgba(54, 69, 217, 1);
|
|
|
|
--text-color: var(--gray-text);
|
|
--border-color: var(--gray-border);
|
|
}
|
|
select {
|
|
appearance: none;
|
|
text-align-last: center;
|
|
display: inline-block;
|
|
font-family: system-ui, sans-serif;
|
|
font-size: 14px;
|
|
padding: 4px 24px 4px 8px;
|
|
border: 1px solid var(--border-color);
|
|
border-radius: 4px;
|
|
color: var(--text-color);
|
|
background-color: transparent;
|
|
background-image:
|
|
linear-gradient(45deg, transparent 50%, var(--text-color) 50%),
|
|
linear-gradient(135deg, var(--text-color) 50%, transparent 50%);
|
|
background-position:
|
|
calc(100% - 12px) calc(1em - 2px),
|
|
calc(100% - 8px) calc(1em - 2px);
|
|
background-size: 4px 4px;
|
|
background-repeat: no-repeat;
|
|
}
|
|
</style>
|
|
<style id="selected-style"></style>
|
|
<slot></slot>
|
|
`;
|
|
this.element = document.createElement("select");
|
|
this.shadowRoot.addEventListener("slotchange", (event) => {
|
|
if (event.target instanceof HTMLSlotElement) {
|
|
this.element.append(...event.target.assignedNodes());
|
|
}
|
|
});
|
|
}
|
|
connectedCallback() {
|
|
this.element.name = "dev-toolbar-select";
|
|
this.shadowRoot.append(this.element);
|
|
this.updateStyle();
|
|
}
|
|
attributeChangedCallback() {
|
|
if (this.hasAttribute("select-style")) {
|
|
this.selectStyle = this.getAttribute("select-style");
|
|
}
|
|
}
|
|
updateStyle() {
|
|
const style = this.shadowRoot.querySelector("#selected-style");
|
|
if (style) {
|
|
style.innerHTML = `
|
|
:host {
|
|
--text-color: var(--${this.selectStyle}-text);
|
|
--border-color: var(--${this.selectStyle}-border);
|
|
}
|
|
`;
|
|
}
|
|
}
|
|
};
|
|
|
|
// node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/toggle.js
|
|
var styles7 = ["purple", "gray", "red", "green", "yellow", "blue"];
|
|
var DevToolbarToggle = class extends HTMLElement {
|
|
shadowRoot;
|
|
input;
|
|
_toggleStyle = "gray";
|
|
get toggleStyle() {
|
|
return this._toggleStyle;
|
|
}
|
|
set toggleStyle(value) {
|
|
if (!styles7.includes(value)) {
|
|
settings.logger.error(`Invalid style: ${value}, expected one of ${styles7.join(", ")}.`);
|
|
return;
|
|
}
|
|
this._toggleStyle = value;
|
|
this.updateStyle();
|
|
}
|
|
static observedAttributes = ["toggle-style"];
|
|
constructor() {
|
|
super();
|
|
this.shadowRoot = this.attachShadow({ mode: "open" });
|
|
this.shadowRoot.innerHTML = `
|
|
<style>
|
|
:host {
|
|
--purple-bg-on: rgba(113, 24, 226, 1);
|
|
--purple-border-off: rgba(113, 24, 226, 1);
|
|
--purple-border-on: rgba(224, 204, 250, 1);
|
|
|
|
--gray-bg-on: rgba(61, 125, 31, 1);
|
|
--gray-border-off: rgba(145, 152, 173, 1);
|
|
--gray-border-on: rgba(213, 249, 196, 1);
|
|
|
|
--red-bg-on: rgba(179, 62, 102, 1);
|
|
--red-border-off: rgba(179, 62, 102, 1);
|
|
--red-border-on: rgba(249, 196, 215, 1);
|
|
|
|
--green-bg-on: rgba(61, 125, 31, 1);
|
|
--green-border-off: rgba(61, 125, 31, 1);
|
|
--green-border-on: rgba(213, 249, 196, 1);
|
|
|
|
--yellow-bg-on: rgba(181, 138, 45, 1);
|
|
--yellow-border-off: rgba(181, 138, 45, 1);
|
|
--yellow-border-on: rgba(255, 236, 179, 1);
|
|
|
|
--blue-bg-on: rgba(54, 69, 217, 1);
|
|
--blue-border-off: rgba(54, 69, 217, 1);
|
|
--blue-border-on: rgba(189, 195, 255, 1);
|
|
}
|
|
|
|
input {
|
|
appearance: none;
|
|
width: 32px;
|
|
height: 20px;
|
|
border: 1px solid var(--border-off);
|
|
transition: background-color 0.2s ease, border-color 0.2s ease;
|
|
border-radius: 9999px;
|
|
}
|
|
|
|
input::after {
|
|
content: '';
|
|
width: 16px;
|
|
display: inline-block;
|
|
height: 16px;
|
|
background-color: var(--border-off);
|
|
border-radius: 9999px;
|
|
transition: transform 0.2s ease, background-color 0.2s ease;
|
|
top: 1px;
|
|
left: 1px;
|
|
position: relative;
|
|
}
|
|
|
|
@media (forced-colors: active) {
|
|
input::after {
|
|
border: 1px solid black;
|
|
top: 0px;
|
|
left: 0px;
|
|
}
|
|
}
|
|
|
|
input:checked {
|
|
border: 1px solid var(--border-on);
|
|
background-color: var(--bg-on);
|
|
}
|
|
|
|
input:checked::after {
|
|
transform: translateX(12px);
|
|
background: var(--border-on);
|
|
}
|
|
</style>
|
|
<style id="selected-style"></style>
|
|
`;
|
|
this.input = document.createElement("input");
|
|
}
|
|
attributeChangedCallback() {
|
|
if (this.hasAttribute("toggle-style"))
|
|
this.toggleStyle = this.getAttribute("toggle-style");
|
|
}
|
|
updateStyle() {
|
|
const style = this.shadowRoot.querySelector("#selected-style");
|
|
if (style) {
|
|
style.innerHTML = `
|
|
:host {
|
|
--bg-on: var(--${this.toggleStyle}-bg-on);
|
|
--border-off: var(--${this.toggleStyle}-border-off);
|
|
--border-on: var(--${this.toggleStyle}-border-on);
|
|
}
|
|
`;
|
|
}
|
|
}
|
|
connectedCallback() {
|
|
this.input.type = "checkbox";
|
|
this.input.name = "dev-toolbar-toggle";
|
|
this.shadowRoot.append(this.input);
|
|
this.updateStyle();
|
|
}
|
|
get value() {
|
|
return this.input.value;
|
|
}
|
|
set value(val) {
|
|
this.input.value = val;
|
|
}
|
|
};
|
|
|
|
// node_modules/astro/dist/runtime/client/dev-toolbar/ui-library/tooltip.js
|
|
var DevToolbarTooltip = class extends HTMLElement {
|
|
sections = [];
|
|
shadowRoot;
|
|
constructor() {
|
|
super();
|
|
this.shadowRoot = this.attachShadow({ mode: "open" });
|
|
}
|
|
connectedCallback() {
|
|
this.shadowRoot.innerHTML = `
|
|
<style>
|
|
:host {
|
|
position: absolute;
|
|
display: none;
|
|
color: white;
|
|
background: linear-gradient(0deg, #310A65, #310A65), linear-gradient(0deg, #7118E2, #7118E2);
|
|
border: 1px solid rgba(113, 24, 226, 1);
|
|
border-radius: 4px;
|
|
padding: 0;
|
|
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
|
|
font-size: 14px;
|
|
margin: 0;
|
|
z-index: 2000000001;
|
|
max-width: 45ch;
|
|
width: fit-content;
|
|
min-width: 30ch;
|
|
box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.30), 0px 1px 2px 0px rgba(0, 0, 0, 0.29), 0px 4px 4px 0px rgba(0, 0, 0, 0.26), 0px 10px 6px 0px rgba(0, 0, 0, 0.15), 0px 17px 7px 0px rgba(0, 0, 0, 0.04), 0px 26px 7px 0px rgba(0, 0, 0, 0.01);
|
|
}
|
|
|
|
:host([data-show="true"]) {
|
|
display: block;
|
|
}
|
|
|
|
svg {
|
|
vertical-align: bottom;
|
|
margin-inline-end: 4px;
|
|
}
|
|
|
|
hr {
|
|
border: 1px solid rgba(136, 58, 234, 0.33);
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
section {
|
|
padding: 8px;
|
|
}
|
|
|
|
.section-content {
|
|
max-height: 250px;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.modal-title {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.modal-main-title {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.modal-title + div {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.modal-cta {
|
|
display: block;
|
|
font-weight: bold;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.clickable-section {
|
|
background: rgba(113, 24, 226, 1);
|
|
padding: 8px;
|
|
border: 0;
|
|
color: white;
|
|
font-family: system-ui, sans-serif;
|
|
text-align: left;
|
|
line-height: 1.2;
|
|
white-space: nowrap;
|
|
text-decoration: none;
|
|
margin: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.clickable-section:hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
pre, code {
|
|
background: rgb(78, 27, 145);
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
|
|
border-radius: 2px;
|
|
font-size: 14px;
|
|
padding: 2px;
|
|
}
|
|
pre {
|
|
padding: 1em;
|
|
margin: 0 0;
|
|
overflow: auto;
|
|
}
|
|
`;
|
|
const fragment = new DocumentFragment();
|
|
this.sections.forEach((section, index) => {
|
|
const sectionElement = section.clickAction ? document.createElement("button") : document.createElement("section");
|
|
if (section.clickAction) {
|
|
sectionElement.classList.add("clickable-section");
|
|
sectionElement.addEventListener("click", async () => {
|
|
await section.clickAction();
|
|
});
|
|
}
|
|
sectionElement.innerHTML = `
|
|
${section.title ? `<div class="modal-title"><span class="modal-main-title">
|
|
${section.icon ? this.getElementForIcon(section.icon) : ""}${section.title}</span>${section.inlineTitle ?? ""}</div>` : ""}
|
|
${section.content ? `<div class="section-content">${section.content}</div>` : ""}
|
|
${section.clickDescription ? `<span class="modal-cta">${section.clickDescription}</span>` : ""}
|
|
`;
|
|
fragment.append(sectionElement);
|
|
if (index < this.sections.length - 1) {
|
|
fragment.append(document.createElement("hr"));
|
|
}
|
|
});
|
|
this.shadowRoot.append(fragment);
|
|
}
|
|
getElementForIcon(icon) {
|
|
let iconElement;
|
|
if (isDefinedIcon(icon)) {
|
|
iconElement = getIconElement(icon);
|
|
} else {
|
|
iconElement = document.createElementNS("http://www.w3.org/2000/svg", "svg");
|
|
iconElement.setAttribute("viewBox", "0 0 16 16");
|
|
iconElement.innerHTML = icon;
|
|
}
|
|
iconElement?.style.setProperty("width", "16px");
|
|
iconElement?.style.setProperty("height", "16px");
|
|
return iconElement?.outerHTML ?? "";
|
|
}
|
|
};
|
|
export {
|
|
DevToolbarBadge,
|
|
DevToolbarButton,
|
|
DevToolbarCard,
|
|
DevToolbarHighlight,
|
|
DevToolbarIcon,
|
|
DevToolbarRadioCheckbox,
|
|
DevToolbarSelect,
|
|
DevToolbarToggle,
|
|
DevToolbarTooltip,
|
|
DevToolbarWindow
|
|
};
|
|
//# sourceMappingURL=ui-library-EVFCBMCE.js.map
|