@dile/ui 2.1.16 → 2.1.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -4,8 +4,8 @@ import { DileEmmitChange } from '../../../mixins/form/index.js';
|
|
|
4
4
|
export class DileCheckbox extends DileEmmitChange(LitElement) {
|
|
5
5
|
static get properties() {
|
|
6
6
|
return {
|
|
7
|
-
checked: { type: Boolean },
|
|
8
|
-
disabled: { type: Boolean },
|
|
7
|
+
checked: { type: Boolean, reflect: true, },
|
|
8
|
+
disabled: { type: Boolean, reflect: true, },
|
|
9
9
|
_hasInner: { type: Boolean },
|
|
10
10
|
name: { type: String },
|
|
11
11
|
};
|
|
@@ -94,15 +94,21 @@ export class DileCheckbox extends DileEmmitChange(LitElement) {
|
|
|
94
94
|
<a href="#" @click="${this.linkClick}" @keypress="${this.doKeyPress}" class="checkbox ${this.checked ? "isChecked" : "isUnchecked"}">
|
|
95
95
|
${this.checked ? this.checkedIcon : this.unCheckedIcon}
|
|
96
96
|
</a>
|
|
97
|
-
${this.
|
|
98
|
-
? html` <span class="label">
|
|
99
|
-
<slot></slot>
|
|
100
|
-
</span>`
|
|
101
|
-
: ""}
|
|
97
|
+
${this.innerTemplate}
|
|
102
98
|
</div>
|
|
103
99
|
`;
|
|
104
100
|
}
|
|
105
101
|
|
|
102
|
+
get innerTemplate() {
|
|
103
|
+
return html`
|
|
104
|
+
${this._hasInner
|
|
105
|
+
? html` <label class="label">
|
|
106
|
+
<slot></slot>
|
|
107
|
+
</label>`
|
|
108
|
+
: ""
|
|
109
|
+
}
|
|
110
|
+
`
|
|
111
|
+
}
|
|
106
112
|
doClick() {
|
|
107
113
|
if (this.disabled) {
|
|
108
114
|
return;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { DileSwitch } from "./src/DileSwitch";
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
import { LitElement, html, css } from 'lit';
|
|
2
|
+
import { DileCheckbox } from '../../checkbox/src/DileCheckbox';
|
|
3
|
+
|
|
4
|
+
export class DileSwitch extends DileCheckbox {
|
|
5
|
+
static styles = [
|
|
6
|
+
css`
|
|
7
|
+
:host {
|
|
8
|
+
display: inline-block;
|
|
9
|
+
}
|
|
10
|
+
div {
|
|
11
|
+
display: flex;
|
|
12
|
+
align-items: center;
|
|
13
|
+
}
|
|
14
|
+
section {
|
|
15
|
+
width: 56px;
|
|
16
|
+
height: 20px;
|
|
17
|
+
border-radius: 10px;
|
|
18
|
+
background-color: var(--dile-switch-bar-color, #ccc);
|
|
19
|
+
display: flex;
|
|
20
|
+
align-items: center;
|
|
21
|
+
justify-content: flex-start;
|
|
22
|
+
}
|
|
23
|
+
span {
|
|
24
|
+
width: 24px;
|
|
25
|
+
height: 24px;
|
|
26
|
+
left: 0px;
|
|
27
|
+
position: relative;
|
|
28
|
+
border-radius: 50%;
|
|
29
|
+
background-color: var(--dile-switch-off-state-color, #d52121);
|
|
30
|
+
transition: all 0.2s linear;
|
|
31
|
+
}
|
|
32
|
+
:host([checked]) span {
|
|
33
|
+
left: 32px;
|
|
34
|
+
background-color: var(--dile-switch-on-state-color, #2566e8);
|
|
35
|
+
}
|
|
36
|
+
:host([disabled]) {
|
|
37
|
+
opacity: 0.5;
|
|
38
|
+
}
|
|
39
|
+
label {
|
|
40
|
+
margin-left: 0.5rem;
|
|
41
|
+
}
|
|
42
|
+
`
|
|
43
|
+
];
|
|
44
|
+
|
|
45
|
+
render() {
|
|
46
|
+
return html`
|
|
47
|
+
<div @click=${this.toggle}>
|
|
48
|
+
<section>
|
|
49
|
+
<span></span>
|
|
50
|
+
</section>
|
|
51
|
+
${this.innerTemplate}
|
|
52
|
+
</div>
|
|
53
|
+
`;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
toggle() {
|
|
57
|
+
if (this.disabled) {
|
|
58
|
+
return;
|
|
59
|
+
}
|
|
60
|
+
this.checked = !this.checked;
|
|
61
|
+
this.dispatchEvent(new CustomEvent('dile-switch-changed', {
|
|
62
|
+
bubbles: true,
|
|
63
|
+
composed: true,
|
|
64
|
+
detail: {
|
|
65
|
+
checked: this.checked,
|
|
66
|
+
name: this.name,
|
|
67
|
+
}
|
|
68
|
+
}));
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dile/ui",
|
|
3
|
-
"version": "2.1.
|
|
3
|
+
"version": "2.1.18",
|
|
4
4
|
"description": "UI Core components from dile-components.",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"scripts": {
|
|
@@ -26,5 +26,5 @@
|
|
|
26
26
|
"publishConfig": {
|
|
27
27
|
"access": "public"
|
|
28
28
|
},
|
|
29
|
-
"gitHead": "
|
|
29
|
+
"gitHead": "590589b6c02e4ad4ca232a7959b19eccaea30295"
|
|
30
30
|
}
|