• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1/*
2 * Copyright (C) 2022 Huawei Device Co., Ltd.
3 * Licensed under the Apache License, Version 2.0 (the "License");
4 * you may not use this file except in compliance with the License.
5 * You may obtain a copy of the License at
6 *
7 *     http://www.apache.org/licenses/LICENSE-2.0
8 *
9 * Unless required by applicable law or agreed to in writing, software
10 * distributed under the License is distributed on an "AS IS" BASIS,
11 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
12 * See the License for the specific language governing permissions and
13 * limitations under the License.
14 */
15
16import {BaseElement} from "../BaseElement.js";
17import "../icon/LitIcon.js"
18
19export class LitSelectOption extends BaseElement {
20    static get observedAttributes() {
21        return ['selected', 'disabled', 'check']
22    }
23
24    initHtml() {
25        return `
26        <style>
27        :host{
28            display: flex;
29            padding: 8px 10px;
30            transition: all .3s;
31            color: var(--dark-color2,#333);
32            tab-index: -1;
33            /*overflow: scroll;*/
34            align-items: center;
35            /*justify-content: space-between;*/
36            font-size: 0.8rem;
37        }
38        :host(:not([disabled])[selected]){
39            background-color: #0A59F7;
40            color: #ffffff;
41            font-weight: bold;
42        }
43        :host(:not([disabled]):not([selected]):hover){
44            background-color: var(--dark-background7,#f5f5f5);
45        }
46        :host([disabled]){
47            cursor: not-allowed;
48            color: var(--dark-color,#bfbfbf);
49        }
50        :host([selected][check]) .check{
51             display: flex;
52        }
53        :host(:not([selected])) .check{
54             display: none;
55        }
56        :host(:not([check])) .check{
57            display: none;
58        }
59
60        :host([disabled]) .selected-box{
61             display: none;
62        }
63        :host([selected]) .selected{
64            display: flex;
65            color: #FFFFFF;
66        }
67        :host(:not([selected])) .selected{
68            display: none;
69        }
70        </style>
71        <div style="height: 16px;width: 16px" class="selected-box">
72            <lit-icon class="selected" name="check"></lit-icon>
73        </div>
74        <slot></slot>
75<!--        <lit-icon class="check" name="check"></lit-icon>-->
76        `
77    }
78
79    initElements(): void {
80
81    }
82
83    //当 custom element首次被插入文档DOM时，被调用。
84    connectedCallback() {
85        if (!this.hasAttribute('disabled')) {
86            this.onclick = ev => {
87                this.dispatchEvent(new CustomEvent('onSelected', {
88                    detail: {
89                        selected: true,
90                        value: this.getAttribute('value'),
91                        text: this.textContent
92                    }
93                }))
94            }
95        }
96
97    }
98
99    //当 custom element从文档DOM中删除时，被调用。
100    disconnectedCallback() {
101
102    }
103
104    //当 custom element被移动到新的文档时，被调用。
105    adoptedCallback() {
106    }
107
108    //当 custom element增加、删除、修改自身属性时，被调用。
109    attributeChangedCallback(name: any, oldValue: any, newValue: any) {
110
111    }
112}
113
114if (!customElements.get('lit-select-option')) {
115    customElements.define('lit-select-option', LitSelectOption);
116}
117