github.com/secoba/wails/v2@v2.6.4/pkg/templates/generate/assets/lit-ts/frontend/src/my-element.ts (about)

     1  import {css, html, LitElement} from 'lit'
     2  import logo from './assets/images/logo-universal.png'
     3  import {Greet} from "../wailsjs/go/main/App";
     4  import {customElement, property} from 'lit/decorators.js'
     5  
     6  /**
     7   * An example element.
     8   *
     9   * @slot - This element has a slot
    10   * @csspart button - The button
    11   */
    12  @customElement('my-element')
    13  export class MyElement extends LitElement {
    14      static styles = css`
    15    #logo {
    16      display: block;
    17      width: 50%;
    18      height: 50%;
    19      margin: auto;
    20      padding: 10% 0 0;
    21      background-position: center;
    22      background-repeat: no-repeat;
    23      background-size: 100% 100%;
    24      background-origin: content-box;
    25    }
    26  
    27    .result {
    28      height: 20px;
    29      line-height: 20px;
    30      margin: 1.5rem auto;
    31    }
    32  
    33    .input-box .btn {
    34      width: 60px;
    35      height: 30px;
    36      line-height: 30px;
    37      border-radius: 3px;
    38      border: none;
    39      margin: 0 0 0 20px;
    40      padding: 0 8px;
    41      cursor: pointer;
    42    }
    43  
    44    .input-box .btn:hover {
    45      background-image: linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);
    46      color: #333333;
    47    }
    48  
    49    .input-box .input {
    50      border: none;
    51      border-radius: 3px;
    52      outline: none;
    53      height: 30px;
    54      line-height: 30px;
    55      padding: 0 10px;
    56      background-color: rgba(240, 240, 240, 1);
    57      -webkit-font-smoothing: antialiased;
    58    }
    59  
    60    .input-box .input:hover {
    61      border: none;
    62      background-color: rgba(255, 255, 255, 1);
    63    }
    64  
    65    .input-box .input:focus {
    66      border: none;
    67      background-color: rgba(255, 255, 255, 1);
    68    }
    69  
    70      `
    71  
    72      @property()
    73      resultText = "Please enter your name below 👇"
    74  
    75      greet() {
    76          let thisName = (this.shadowRoot?.getElementById('name') as HTMLInputElement)?.value;
    77          if (thisName) {
    78              Greet(thisName).then(result => {
    79                  this.resultText = result
    80              });
    81          }
    82      }
    83  
    84      render() {
    85          return html`
    86              <main>
    87                  <img id="logo" src=${logo} alt="Wails logo">
    88                  <div class="result" id="result">${this.resultText}</div>
    89                  <div class="input-box" id="input">
    90                      <input class="input" id="name" type="text" autocomplete="off"/>
    91                      <button @click=${this.greet} class="btn">Greet</button>
    92                  </div>
    93              </main>
    94          `
    95      }
    96  }
    97  
    98  declare global {
    99      interface HTMLElementTagNameMap {
   100          'my-element': MyElement
   101      }
   102  }