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