• 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, element } from '../../../base-ui/BaseElement.js';
17
18@element('table-no-data')
19export class TableNoData extends BaseElement {
20  static get observedAttributes() {
21    return ['noData', 'contentWidth', 'height'];
22  }
23
24  private dataSlot: HTMLDivElement | null | undefined;
25  private noDataIcon: HTMLDivElement | null | undefined;
26
27  initElements(): void {
28    this.dataSlot = this.shadowRoot!.querySelector<HTMLDivElement>('.no-data');
29    this.noDataIcon = this.shadowRoot!.querySelector<HTMLDivElement>('.d-box');
30  }
31
32  get noData() {
33    return this.hasAttribute('noData');
34  }
35
36  set noData(value: boolean) {
37    if (value) {
38      this.setAttribute('noData', '');
39    } else {
40      this.removeAttribute('noData');
41    }
42  }
43
44  get contentWidth() {
45    return this.getAttribute('contentWidth') || '100%';
46  }
47  set contentWidth(value) {
48    this.shadowRoot!.querySelector<HTMLDivElement>('.d-box')!.style.width = value;
49    this.setAttribute('contentWidth', value);
50  }
51  get contentHeight() {
52    return this.getAttribute('contentHeight') || '80%';
53  }
54  set contentHeight(value) {
55    this.shadowRoot!.querySelector<HTMLDivElement>('.d-box')!.style.height = value;
56    this.setAttribute('contentHeight', value);
57  }
58
59  initHtml(): string {
60    return `
61        <style>
62        :host {
63            width: 100%;
64            height: 100%;
65            display: block;
66        }
67        :host(:not([noData])) .no-data{
68            display: block;
69            height: 100%;
70            width: 100%;
71        }
72        :host([noData]) .no-data{
73            display: none;
74        }
75        :host(:not([noData])) .d-box{
76            display: none;
77        }
78        :host([noData]) .d-box{
79            width: ${this.contentWidth};
80            height: ${this.contentHeight};
81            display: flex;
82            align-items: center;
83            justify-content: center;
84            flex-direction: column;
85        }
86        .no-data-icon{
87            background-image: url("img/table_no_data.svg");
88            width: 60%;
89            height: 60%;
90            min-height: 200px;
91            min-width: 200px;
92            background-size: 100% 100%;
93        }
94        .no-data-text{
95            color: var(--dark-color1,#252525);
96            opacity: 0.6;
97            font-weight: 400;
98        }
99        </style>
100        <slot class="no-data"></slot>
101        <div class="d-box">
102            <div class="no-data-icon"></div>
103            <div class="no-data-text">Sorry, no data</div>
104        </div>
105        `;
106  }
107}
108