-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
135 lines (116 loc) · 3.57 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Trilist Demo</title>
<link
rel="icon"
href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 128 128%22><text y=%220.9em%22 font-size=%22120%22>☘️</text></svg>"
/>
<style>
html {
color: #888;
background: #fff;
font-size: 24px;
text-align: center;
}
@media (prefers-color-scheme: dark) {
html {
color: #eee;
background: #333;
--trilist-color-accent: #427cf9;
--trilist-color-bg-primary: #333;
--trilist-color-bg-secondary: #444;
--trilist-color-border-primary: #666;
--trilist-color-border-secondary: #555;
--trilist-color-text-primary: #eee;
--trilist-color-text-secondary: #ccc;
--trilist-color-text-tertiary: #999;
--trilist-color-text-inversed: #fff;
}
}
#app {
margin: 1em auto;
max-width: 1200px;
}
@media screen and (min-width: 640px) {
#app {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
column-gap: 16px;
row-gap: 16px;
}
}
@media screen and (min-width: 1024px) {
#app {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
</style>
</head>
<body>
<p>Usage examples:</p>
<div id="app">
<trilist-view
id="trilist-1"
expand-selected
filter
multiselect
selectable
style="
--trilist-color-accent: rgb(220, 45, 75);
--trilist-border-radius: 0;
"
></trilist-view>
<trilist-view id="trilist-2" animated filter></trilist-view>
<trilist-select
id="trilist-3"
animated
cancel-button="Nevermind"
expand-selected
filter
filter-autofocus
filter-placeholder="Search..."
multiselect
placeholder="Choose your options"
select-button="Choose"
></trilist-select>
<trilist-select
id="trilist-4"
field-children="items"
field-id="key"
field-label="name"
></trilist-select>
</div>
<script type="module">
import treeData from './docs/treedata.json'
import treeDataAlt from './docs/treedata2.json'
await Promise.allSettled([
customElements.whenDefined('trilist-view'),
customElements.whenDefined('trilist-select'),
])
const el1 = document.getElementById('trilist-1')
el1.init({
items: treeData,
value: '2',
disabled: ['21'],
onChangeHook: (value) => console.log(value),
})
const el2 = document.getElementById('trilist-2')
el2.init({
items: treeData,
labelHook: (item) =>
`<a style="text-decoration: underline" href="#/edit/${item.id}">${item.label}</a> ${item.data?.description ? '<div style="font-size: 0.9em; opacity: 0.5">' + item.data.description + '</div>' : ''}`,
onChangeHook: (value) => console.log(value),
})
const el3 = document.getElementById('trilist-3')
el3.init({ items: treeData })
el3.trilist.setValue(21)
el3.addEventListener('trilist-change', (e) => console.log(e.detail))
const el4 = document.getElementById('trilist-4')
el4.init({ items: treeDataAlt, value: '21' })
</script>
<script type="module" src="/src/main.ts"></script>
</body>
</html>