@yuebai008/cli/dist/cli-server/client/front_end/ui/components/menus/SelectMenu.js

Command line interface for rapid qg-minigame development

import*as Platform from"../../../core/platform/platform.js";import*as ComponentHelpers from"../../../ui/components/helpers/helpers.js";import*as Coordinator from"../../../ui/components/render_coordinator/render_coordinator.js";import*as LitHtml from"../../../ui/lit-html/lit-html.js";import*as Dialogs from"../dialogs/dialogs.js";import{Menu,MenuGroup}from"./Menu.js";import selectMenuStyles from"./selectMenu.css.js";import selectMenuButtonStyles from"./selectMenuButton.css.js";const coordinator=Coordinator.RenderCoordinator.RenderCoordinator.instance(),deployMenuArrow=new URL("../../../Images/triangle-down.svg",import.meta.url).toString();export class SelectMenu extends HTMLElement{static litTagName=LitHtml.literal`devtools-select-menu`;#e=this.attachShadow({mode:"open"});#t=this.#o.bind(this);#s=null;#n=!1;#r={buttonTitle:"",position:"bottom",horizontalAlignment:"auto",showArrow:!1,showConnector:!1,sideButton:!1,showDivider:!1,disabled:!1,showSelectedItem:!0};get buttonTitle(){return this.#r.buttonTitle}set buttonTitle(e){this.#r.buttonTitle=e,ComponentHelpers.ScheduledRender.scheduleRender(this,this.#t)}get position(){return this.#r.position}set position(e){this.#r.position=e,ComponentHelpers.ScheduledRender.scheduleRender(this,this.#t)}get horizontalAlignment(){return this.#r.horizontalAlignment}set horizontalAlignment(e){this.#r.horizontalAlignment=e,ComponentHelpers.ScheduledRender.scheduleRender(this,this.#t)}get showConnector(){return this.#r.showConnector}set showConnector(e){this.#r.showArrow||(this.#r.showArrow=e),this.#r.showConnector=e,ComponentHelpers.ScheduledRender.scheduleRender(this,this.#t)}get showArrow(){return this.#r.showArrow}set showArrow(e){this.#r.showArrow=e,ComponentHelpers.ScheduledRender.scheduleRender(this,this.#t)}get sideButton(){return this.#r.sideButton}set sideButton(e){this.#r.sideButton=e,ComponentHelpers.ScheduledRender.scheduleRender(this,this.#t)}get disabled(){return this.#r.disabled}set disabled(e){this.#r.disabled=e,ComponentHelpers.ScheduledRender.scheduleRender(this,this.#t)}get showDivider(){return this.#r.showDivider}set showDivider(e){this.#r.showDivider=e,ComponentHelpers.ScheduledRender.scheduleRender(this,this.#t)}get showSelectedItem(){return this.#r.showSelectedItem}set showSelectedItem(e){this.#r.showSelectedItem=e,ComponentHelpers.ScheduledRender.scheduleRender(this,this.#t)}connectedCallback(){this.#e.adoptedStyleSheets=[selectMenuStyles]}#i(){if(!this.#s&&(this.#s=this.#e.querySelector("devtools-select-menu-button"),!this.#s))throw new Error("Arrow not found");return this.#s}#d(){this.#n=!0,this.setAttribute("has-open-dialog","has-open-dialog"),ComponentHelpers.ScheduledRender.scheduleRender(this,this.#t)}click(){this.#i().click()}#l(){this.dispatchEvent(new SelectMenuSideButtonClickEvent)}#h(){if(this.showConnector){const e=this.#i().getBoundingClientRect();return(e.left+e.right)/2}}#u(){return this.buttonTitle instanceof Function?this.buttonTitle():this.buttonTitle}#p(){const e=this.#u();return this.sideButton?LitHtml.html`
      <button id="side-button" @click=${this.#l} ?disabled=${this.disabled}>
        ${e}
      </button>
      <${SelectMenuButton.litTagName}
        @click=${this.#d}
        @selectmenubuttontrigger=${this.#d}
        .singleArrow=${!0}
        .open=${this.#n}
        .showArrow=${!0}
        .arrowDirection=${this.position}
        .disabled=${this.disabled}>
      </${SelectMenuButton.litTagName}>
    `:LitHtml.html`
          <${SelectMenuButton.litTagName}
            @selectmenubuttontrigger=${this.#d}
            .open=${this.#n} .showArrow=${this.showArrow}
            .arrowDirection=${this.position}
            .disabled=${this.disabled}>
              ${e}
            </${SelectMenuButton.litTagName}>
        `}#c(e){e&&e.stopImmediatePropagation(),coordinator.write((()=>{this.removeAttribute("has-open-dialog")})),this.#n=!1,ComponentHelpers.ScheduledRender.scheduleRender(this,this.#t)}#a(e){this.dispatchEvent(new SelectMenuItemSelectedEvent(e.itemValue))}async#o(){if(!ComponentHelpers.ScheduledRender.isScheduledRender(this))throw new Error("SelectMenu render was not scheduled");LitHtml.render(LitHtml.html`
      <${Menu.litTagName}
        @menucloserequest=${this.#c}
        @menuitemselected=${this.#a}
        .position=${this.position}
        .origin=${this}
        .showConnector=${this.showConnector}
        .showDivider=${this.showDivider}
        .showSelectedItem=${this.showSelectedItem}
        .open=${this.#n}
        .getConnectorCustomXPosition=${this.#h.bind(this)}
      >
      <slot>
      </slot>
      </${Menu.litTagName}>
      ${this.#p()}
    `,this.#e,{host:this})}}export class SelectMenuButton extends HTMLElement{static litTagName=LitHtml.literal`devtools-select-menu-button`;#e=this.attachShadow({mode:"open"});#t=this.#o.bind(this);#m=null;connectedCallback(){this.#e.adoptedStyleSheets=[selectMenuButtonStyles],ComponentHelpers.SetCSSProperty.set(this,"--deploy-menu-arrow",`url(${deployMenuArrow})`),coordinator.write((()=>{switch(this.arrowDirection){case"auto":case"top":ComponentHelpers.SetCSSProperty.set(this,"--arrow-angle","180deg");break;case"bottom":ComponentHelpers.SetCSSProperty.set(this,"--arrow-angle","0deg");break;default:Platform.assertNever(this.arrowDirection,`Unknown position type: ${this.arrowDirection}`)}}))}#r={showArrow:!1,arrowDirection:"bottom",disabled:!1,singleArrow:!1};get showArrow(){return this.#r.showArrow}set showArrow(e){this.#r.showArrow=e,ComponentHelpers.ScheduledRender.scheduleRender(this,this.#t)}get arrowDirection(){return this.#r.arrowDirection}set arrowDirection(e){this.#r.arrowDirection=e,ComponentHelpers.ScheduledRender.scheduleRender(this,this.#t)}get disabled(){return this.#r.disabled}set disabled(e){this.#r.disabled=e,ComponentHelpers.ScheduledRender.scheduleRender(this,this.#t)}set open(e){coordinator.write((()=>{this.#w()?.setAttribute("aria-expanded",String(e))}))}set singleArrow(e){this.#r.singleArrow=e,ComponentHelpers.ScheduledRender.scheduleRender(this,this.#t)}click(){this.#w()?.click()}#w(){return this.#m||(this.#m=this.#e.querySelector("button")),this.#m}#S(e){const t=e.key,o="bottom"===this.arrowDirection&&"ArrowDown"===t,s="top"===this.arrowDirection&&"ArrowUp"===t,n=t===Platform.KeyboardUtilities.ENTER_KEY,r="Space"===e.code;(o||s||n||r)&&(this.dispatchEvent(new SelectMenuButtonTriggerEvent),e.preventDefault())}#g(){this.dispatchEvent(new SelectMenuButtonTriggerEvent)}async#o(){if(!ComponentHelpers.ScheduledRender.isScheduledRender(this))throw new Error("SelectMenuItem render was not scheduled");const e=this.#r.showArrow?LitHtml.html`<span id="arrow"></span>`:LitHtml.nothing,t={"single-arrow":this.#r.singleArrow},o=LitHtml.html`
      <span id="button-label-wrapper">
        <span id="label" ?witharrow=${this.showArrow} class=${LitHtml.Directives.classMap(t)}><slot></slot></span>
        ${e}
      </span>
      `;LitHtml.render(LitHtml.html`
      <button aria-haspopup="true" aria-expanded="false" class="show" @keydown=${this.#S} @click=${this.#g} ?disabled=${this.disabled}>${o}</button>
    `,this.#e,{host:this})}}ComponentHelpers.CustomElements.defineComponent("devtools-select-menu",SelectMenu),ComponentHelpers.CustomElements.defineComponent("devtools-select-menu-button",SelectMenuButton);export class SelectMenuItemSelectedEvent extends Event{itemValue;static eventName="selectmenuselected";constructor(e){super(SelectMenuItemSelectedEvent.eventName,{bubbles:!0,composed:!0}),this.itemValue=e}}export class SelectMenuSideButtonClickEvent extends Event{static eventName="selectmenusidebuttonclick";constructor(){super(SelectMenuSideButtonClickEvent.eventName,{bubbles:!0,composed:!0})}}export class SelectMenuButtonTriggerEvent extends Event{static eventName="selectmenubuttontrigger";constructor(){super(SelectMenuButtonTriggerEvent.eventName,{bubbles:!0,composed:!0})}}export{MenuGroup as SelectMenuGroup};