@yuebai008/cli
Version:
Command line interface for rapid qg-minigame development
5 lines • 1.26 kB
JavaScript
import*as ComponentHelpers from"../../components/helpers/helpers.js";import*as IconButton from"../../components/icon_button/icon_button.js";import*as LitHtml from"../../lit-html/lit-html.js";import markdownImageStyles from"./markdownImage.css.js";import{getMarkdownImage}from"./MarkdownImagesMap.js";export class MarkdownImage extends HTMLElement{static litTagName=LitHtml.literal`devtools-markdown-image`;#t=this.attachShadow({mode:"open"});#e;#a;connectedCallback(){this.#t.adoptedStyleSheets=[markdownImageStyles]}set data(t){const{key:e,title:a}=t,o=getMarkdownImage(e);this.#e=o,this.#a=a,this.#o()}#i(){if(!this.#e)return LitHtml.html``;const{src:t,color:e,width:a="100%",height:o="100%"}=this.#e;return LitHtml.html`
<${IconButton.Icon.Icon.litTagName} .data=${{iconPath:t,color:e,width:a,height:o}}></${IconButton.Icon.Icon.litTagName}>
`}#m(){if(!this.#e)return LitHtml.html``;const{src:t,width:e="100%",height:a="100%"}=this.#e;return LitHtml.html`
<img class="markdown-image" src=${t} alt=${this.#a} width=${e} height=${a}/>
`}#o(){if(!this.#e)return;const{isIcon:t}=this.#e,e=t?this.#i():this.#m();LitHtml.render(e,this.#t,{host:this})}}ComponentHelpers.CustomElements.defineComponent("devtools-markdown-image",MarkdownImage);