@dile/ui 2.1.17 → 2.1.19
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,22 @@ 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
|
+
}
|
|
112
|
+
|
|
106
113
|
doClick() {
|
|
107
114
|
if (this.disabled) {
|
|
108
115
|
return;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { DileSwitch } from "./src/DileSwitch";
|
|
@@ -0,0 +1,93 @@
|
|
|
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
|
+
static get properties() {
|
|
46
|
+
return {
|
|
47
|
+
useReactiveLabels: { type: Boolean },
|
|
48
|
+
checkedLabel: { type: String },
|
|
49
|
+
uncheckedLabel: { type: String },
|
|
50
|
+
};
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
render() {
|
|
54
|
+
return html`
|
|
55
|
+
<div @click=${this.toggle}>
|
|
56
|
+
<section>
|
|
57
|
+
<span></span>
|
|
58
|
+
</section>
|
|
59
|
+
${this.useReactiveLabels
|
|
60
|
+
? this.reactiveLabelsTemplate
|
|
61
|
+
: this.innerTemplate
|
|
62
|
+
}
|
|
63
|
+
</div>
|
|
64
|
+
`;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
get reactiveLabelsTemplate() {
|
|
68
|
+
return html`
|
|
69
|
+
<label class="label">
|
|
70
|
+
${this.checked
|
|
71
|
+
? this.checkedLabel
|
|
72
|
+
: this.uncheckedLabel
|
|
73
|
+
}
|
|
74
|
+
</label>
|
|
75
|
+
`
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
toggle() {
|
|
79
|
+
if (this.disabled) {
|
|
80
|
+
return;
|
|
81
|
+
}
|
|
82
|
+
this.checked = !this.checked;
|
|
83
|
+
this.dispatchEvent(new CustomEvent('dile-switch-changed', {
|
|
84
|
+
bubbles: true,
|
|
85
|
+
composed: true,
|
|
86
|
+
detail: {
|
|
87
|
+
checked: this.checked,
|
|
88
|
+
name: this.name,
|
|
89
|
+
}
|
|
90
|
+
}));
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dile/ui",
|
|
3
|
-
"version": "2.1.
|
|
3
|
+
"version": "2.1.19",
|
|
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": "6f6fd44a9d3244f6f73e29d50a00a4eb8277286b"
|
|
30
30
|
}
|