godown 3.0.0-canary.0 → 3.0.0-canary.1

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.
Files changed (246) hide show
  1. package/dev/alert.d.ts +8 -0
  2. package/dev/alert.d.ts.map +1 -0
  3. package/dev/alert.js +4 -0
  4. package/dev/alert.js.map +1 -0
  5. package/dev/avatar.d.ts +8 -0
  6. package/dev/avatar.d.ts.map +1 -0
  7. package/dev/avatar.js +4 -0
  8. package/dev/avatar.js.map +1 -0
  9. package/dev/breath.d.ts +9 -0
  10. package/dev/breath.d.ts.map +1 -0
  11. package/dev/breath.js +5 -0
  12. package/dev/breath.js.map +1 -0
  13. package/dev/button.d.ts +8 -0
  14. package/dev/button.d.ts.map +1 -0
  15. package/dev/button.js +4 -0
  16. package/dev/button.js.map +1 -0
  17. package/dev/card.d.ts +8 -0
  18. package/dev/card.d.ts.map +1 -0
  19. package/dev/card.js +4 -0
  20. package/dev/card.js.map +1 -0
  21. package/dev/carousel.d.ts +8 -0
  22. package/dev/carousel.d.ts.map +1 -0
  23. package/dev/carousel.js +4 -0
  24. package/dev/carousel.js.map +1 -0
  25. package/dev/components/alert.d.ts +50 -0
  26. package/dev/components/alert.d.ts.map +1 -0
  27. package/dev/components/alert.js +234 -0
  28. package/dev/components/alert.js.map +1 -0
  29. package/dev/components/avatar.d.ts +26 -0
  30. package/dev/components/avatar.d.ts.map +1 -0
  31. package/dev/components/avatar.js +91 -0
  32. package/dev/components/avatar.js.map +1 -0
  33. package/dev/components/breath.d.ts +34 -0
  34. package/dev/components/breath.d.ts.map +1 -0
  35. package/dev/components/breath.js +133 -0
  36. package/dev/components/breath.js.map +1 -0
  37. package/dev/components/button.d.ts +45 -0
  38. package/dev/components/button.d.ts.map +1 -0
  39. package/dev/components/button.js +256 -0
  40. package/dev/components/button.js.map +1 -0
  41. package/dev/components/card.d.ts +20 -0
  42. package/dev/components/card.d.ts.map +1 -0
  43. package/dev/components/card.js +89 -0
  44. package/dev/components/card.js.map +1 -0
  45. package/dev/components/carousel.d.ts +40 -0
  46. package/dev/components/carousel.d.ts.map +1 -0
  47. package/dev/components/carousel.js +155 -0
  48. package/dev/components/carousel.js.map +1 -0
  49. package/dev/components/details.d.ts +20 -0
  50. package/dev/components/details.d.ts.map +1 -0
  51. package/dev/components/details.js +115 -0
  52. package/dev/components/details.js.map +1 -0
  53. package/dev/components/dialog.d.ts +33 -0
  54. package/dev/components/dialog.d.ts.map +1 -0
  55. package/dev/components/dialog.js +154 -0
  56. package/dev/components/dialog.js.map +1 -0
  57. package/dev/components/divider.d.ts +17 -0
  58. package/dev/components/divider.d.ts.map +1 -0
  59. package/dev/components/divider.js +46 -0
  60. package/dev/components/divider.js.map +1 -0
  61. package/dev/components/dragbox.d.ts +40 -0
  62. package/dev/components/dragbox.d.ts.map +1 -0
  63. package/dev/components/dragbox.js +117 -0
  64. package/dev/components/dragbox.js.map +1 -0
  65. package/dev/components/flex.d.ts +31 -0
  66. package/dev/components/flex.d.ts.map +1 -0
  67. package/dev/components/flex.js +52 -0
  68. package/dev/components/flex.js.map +1 -0
  69. package/dev/components/form.d.ts +24 -0
  70. package/dev/components/form.d.ts.map +1 -0
  71. package/dev/components/form.js +79 -0
  72. package/dev/components/form.js.map +1 -0
  73. package/dev/components/grid.d.ts +31 -0
  74. package/dev/components/grid.d.ts.map +1 -0
  75. package/dev/components/grid.js +53 -0
  76. package/dev/components/grid.js.map +1 -0
  77. package/dev/components/input.d.ts +20 -0
  78. package/dev/components/input.d.ts.map +1 -0
  79. package/dev/components/input.js +89 -0
  80. package/dev/components/input.js.map +1 -0
  81. package/dev/components/layout.d.ts +29 -0
  82. package/dev/components/layout.d.ts.map +1 -0
  83. package/dev/components/layout.js +69 -0
  84. package/dev/components/layout.js.map +1 -0
  85. package/dev/components/link.d.ts +20 -0
  86. package/dev/components/link.d.ts.map +1 -0
  87. package/dev/components/link.js +40 -0
  88. package/dev/components/link.js.map +1 -0
  89. package/dev/components/progress.d.ts +30 -0
  90. package/dev/components/progress.d.ts.map +1 -0
  91. package/dev/components/progress.js +108 -0
  92. package/dev/components/progress.js.map +1 -0
  93. package/dev/components/range.d.ts +60 -0
  94. package/dev/components/range.d.ts.map +1 -0
  95. package/dev/components/range.js +306 -0
  96. package/dev/components/range.js.map +1 -0
  97. package/dev/components/rotate.d.ts +26 -0
  98. package/dev/components/rotate.d.ts.map +1 -0
  99. package/dev/components/rotate.js +86 -0
  100. package/dev/components/rotate.js.map +1 -0
  101. package/dev/components/router.d.ts +121 -0
  102. package/dev/components/router.d.ts.map +1 -0
  103. package/dev/components/router.js +248 -0
  104. package/dev/components/router.js.map +1 -0
  105. package/dev/components/select.d.ts +50 -0
  106. package/dev/components/select.d.ts.map +1 -0
  107. package/dev/components/select.js +243 -0
  108. package/dev/components/select.js.map +1 -0
  109. package/dev/components/skeleton.d.ts +26 -0
  110. package/dev/components/skeleton.d.ts.map +1 -0
  111. package/dev/components/skeleton.js +119 -0
  112. package/dev/components/skeleton.js.map +1 -0
  113. package/dev/components/split.d.ts +32 -0
  114. package/dev/components/split.d.ts.map +1 -0
  115. package/dev/components/split.js +173 -0
  116. package/dev/components/split.js.map +1 -0
  117. package/dev/components/switch.d.ts +39 -0
  118. package/dev/components/switch.d.ts.map +1 -0
  119. package/dev/components/switch.js +183 -0
  120. package/dev/components/switch.js.map +1 -0
  121. package/dev/components/text.d.ts +19 -0
  122. package/dev/components/text.d.ts.map +1 -0
  123. package/dev/components/text.js +93 -0
  124. package/dev/components/text.js.map +1 -0
  125. package/dev/components/time.d.ts +53 -0
  126. package/dev/components/time.d.ts.map +1 -0
  127. package/dev/components/time.js +136 -0
  128. package/dev/components/time.js.map +1 -0
  129. package/dev/components/tooltip.d.ts +38 -0
  130. package/dev/components/tooltip.d.ts.map +1 -0
  131. package/dev/components/tooltip.js +114 -0
  132. package/dev/components/tooltip.js.map +1 -0
  133. package/dev/components/typewriter.d.ts +55 -0
  134. package/dev/components/typewriter.d.ts.map +1 -0
  135. package/dev/components/typewriter.js +156 -0
  136. package/dev/components/typewriter.js.map +1 -0
  137. package/dev/core/global-style.d.ts +21 -0
  138. package/dev/core/global-style.d.ts.map +1 -0
  139. package/dev/core/global-style.js +77 -0
  140. package/dev/core/global-style.js.map +1 -0
  141. package/dev/core/super-anchor.d.ts +15 -0
  142. package/dev/core/super-anchor.d.ts.map +1 -0
  143. package/dev/core/super-anchor.js +58 -0
  144. package/dev/core/super-anchor.js.map +1 -0
  145. package/dev/core/super-input.d.ts +39 -0
  146. package/dev/core/super-input.d.ts.map +1 -0
  147. package/dev/core/super-input.js +181 -0
  148. package/dev/core/super-input.js.map +1 -0
  149. package/dev/core/super-openable.d.ts +19 -0
  150. package/dev/core/super-openable.d.ts.map +1 -0
  151. package/dev/core/super-openable.js +36 -0
  152. package/dev/core/super-openable.js.map +1 -0
  153. package/dev/details.d.ts +8 -0
  154. package/dev/details.d.ts.map +1 -0
  155. package/dev/details.js +4 -0
  156. package/dev/details.js.map +1 -0
  157. package/dev/dialog.d.ts +8 -0
  158. package/dev/dialog.d.ts.map +1 -0
  159. package/dev/dialog.js +4 -0
  160. package/dev/dialog.js.map +1 -0
  161. package/dev/divider.d.ts +8 -0
  162. package/dev/divider.d.ts.map +1 -0
  163. package/dev/divider.js +4 -0
  164. package/dev/divider.js.map +1 -0
  165. package/dev/dragbox.d.ts +8 -0
  166. package/dev/dragbox.d.ts.map +1 -0
  167. package/dev/dragbox.js +4 -0
  168. package/dev/dragbox.js.map +1 -0
  169. package/dev/flex.d.ts +8 -0
  170. package/dev/flex.d.ts.map +1 -0
  171. package/dev/flex.js +4 -0
  172. package/dev/flex.js.map +1 -0
  173. package/dev/form.d.ts +8 -0
  174. package/dev/form.d.ts.map +1 -0
  175. package/dev/form.js +4 -0
  176. package/dev/form.js.map +1 -0
  177. package/dev/grid.d.ts +8 -0
  178. package/dev/grid.d.ts.map +1 -0
  179. package/dev/grid.js +4 -0
  180. package/dev/grid.js.map +1 -0
  181. package/dev/index.d.ts +29 -0
  182. package/dev/index.d.ts.map +1 -0
  183. package/dev/index.js +29 -0
  184. package/dev/index.js.map +1 -0
  185. package/dev/input.d.ts +9 -0
  186. package/dev/input.d.ts.map +1 -0
  187. package/dev/input.js +5 -0
  188. package/dev/input.js.map +1 -0
  189. package/dev/layout.d.ts +9 -0
  190. package/dev/layout.d.ts.map +1 -0
  191. package/dev/layout.js +5 -0
  192. package/dev/layout.js.map +1 -0
  193. package/dev/link.d.ts +9 -0
  194. package/dev/link.d.ts.map +1 -0
  195. package/dev/link.js +5 -0
  196. package/dev/link.js.map +1 -0
  197. package/dev/progress.d.ts +9 -0
  198. package/dev/progress.d.ts.map +1 -0
  199. package/dev/progress.js +5 -0
  200. package/dev/progress.js.map +1 -0
  201. package/dev/range.d.ts +9 -0
  202. package/dev/range.d.ts.map +1 -0
  203. package/dev/range.js +5 -0
  204. package/dev/range.js.map +1 -0
  205. package/dev/rotate.d.ts +9 -0
  206. package/dev/rotate.d.ts.map +1 -0
  207. package/dev/rotate.js +5 -0
  208. package/dev/rotate.js.map +1 -0
  209. package/dev/router.d.ts +9 -0
  210. package/dev/router.d.ts.map +1 -0
  211. package/dev/router.js +5 -0
  212. package/dev/router.js.map +1 -0
  213. package/dev/select.d.ts +9 -0
  214. package/dev/select.d.ts.map +1 -0
  215. package/dev/select.js +5 -0
  216. package/dev/select.js.map +1 -0
  217. package/dev/skeleton.d.ts +9 -0
  218. package/dev/skeleton.d.ts.map +1 -0
  219. package/dev/skeleton.js +5 -0
  220. package/dev/skeleton.js.map +1 -0
  221. package/dev/split.d.ts +9 -0
  222. package/dev/split.d.ts.map +1 -0
  223. package/dev/split.js +5 -0
  224. package/dev/split.js.map +1 -0
  225. package/dev/switch.d.ts +9 -0
  226. package/dev/switch.d.ts.map +1 -0
  227. package/dev/switch.js +5 -0
  228. package/dev/switch.js.map +1 -0
  229. package/dev/text.d.ts +9 -0
  230. package/dev/text.d.ts.map +1 -0
  231. package/dev/text.js +5 -0
  232. package/dev/text.js.map +1 -0
  233. package/dev/time.d.ts +9 -0
  234. package/dev/time.d.ts.map +1 -0
  235. package/dev/time.js +5 -0
  236. package/dev/time.js.map +1 -0
  237. package/dev/tooltip.d.ts +9 -0
  238. package/dev/tooltip.d.ts.map +1 -0
  239. package/dev/tooltip.js +5 -0
  240. package/dev/tooltip.js.map +1 -0
  241. package/dev/typewriter.d.ts +8 -0
  242. package/dev/typewriter.d.ts.map +1 -0
  243. package/dev/typewriter.js +4 -0
  244. package/dev/typewriter.js.map +1 -0
  245. package/package.json +3 -3
  246. package/web-types.json +1 -1
@@ -0,0 +1,243 @@
1
+ import { __decorate } from "tslib";
2
+ import { godown } from "@godown/element/decorators/godown.js";
3
+ import { part } from "@godown/element/decorators/part.js";
4
+ import { styles } from "@godown/element/decorators/styles.js";
5
+ import { htmlSlot } from "@godown/element/directives/index.js";
6
+ import svgCaretDown from "@godown/f7-icon/icons/chevron-down.js";
7
+ import { css, html, nothing } from "lit";
8
+ import { property } from "lit/decorators.js";
9
+ import { ifDefined } from "lit/directives/if-defined.js";
10
+ import Input from "./input.js";
11
+ function contain(a, b) {
12
+ return a && b && a.toLowerCase().includes(b.toLowerCase());
13
+ }
14
+ function betweenAt(i, s, c) {
15
+ const start = s.slice(0, i).lastIndexOf(c) + 1 || 0;
16
+ const end = s.indexOf(c, i) || s.length;
17
+ return s.slice(start, end);
18
+ }
19
+ function updateChecked(element, operation) {
20
+ if (element) {
21
+ const name = "checked";
22
+ if (operation) {
23
+ element.setAttribute(name, "");
24
+ }
25
+ else {
26
+ element.removeAttribute(name);
27
+ }
28
+ }
29
+ }
30
+ const protoName = "select";
31
+ /**
32
+ * {@linkcode Select} is similar to <select>.
33
+ *
34
+ * Elements with the value attribute/property can be used as options.
35
+ *
36
+ * The checked attribute will be added to the selected element.
37
+ *
38
+ * Multi-selected state looks the same as single-selected.
39
+ *
40
+ * Input will filter the element.
41
+ *
42
+ * @slot - Options.
43
+ * @category input
44
+ */
45
+ let Select = class Select extends Input {
46
+ constructor() {
47
+ super(...arguments);
48
+ this._cache = new WeakMap();
49
+ /**
50
+ * Open content.
51
+ */
52
+ this.open = false;
53
+ this._store = [];
54
+ }
55
+ render() {
56
+ return html `<div part="root" class="input-field">
57
+ ${[
58
+ this._renderPrefix(),
59
+ html `<input
60
+ part="input"
61
+ dir="${ifDefined(this.dir)}"
62
+ id="${this.makeId}"
63
+ .value="${this.text}"
64
+ type="${this.type}"
65
+ placeholder="${this.placeholder || nothing}"
66
+ ?autofocus="${this.autofocus}"
67
+ autocapitalize="${this.autocapitalize || nothing}"
68
+ autocomplete="${this.autocomplete || nothing}"
69
+ ?disabled="${this.disabled}"
70
+ @focus="${this._handleFocus}"
71
+ @input="${this._handleInput}"
72
+ >`,
73
+ html `<label for="${this.makeId}" part="suffix">
74
+ <i part="space"></i><i part="icon">${svgCaretDown()}</i><i part="space"></i>
75
+ </label>`,
76
+ html `<div part="content" direction="${this.direction || this.autoDirection}" style="visibility:${this.visible ? "visible" : "hidden"}">${htmlSlot()}</div>`,
77
+ ]}
78
+ </div>`;
79
+ }
80
+ _handleFocus() {
81
+ if (!this.direction) {
82
+ const { top, bottom } = this.getBoundingClientRect();
83
+ if (window.innerHeight - bottom < this._content.clientHeight && top > this._content.clientHeight) {
84
+ this.autoDirection = "top";
85
+ }
86
+ else {
87
+ this.autoDirection = "bottom";
88
+ }
89
+ }
90
+ if (!this.visible) {
91
+ const event = this.events.add(document, "click", (e) => {
92
+ const { target } = e;
93
+ if (!this.contains(target)) {
94
+ this.events.remove(document, "click", event);
95
+ this.visible = false;
96
+ }
97
+ else if (target !== this) {
98
+ const value = this.optionValue(target);
99
+ if (value) {
100
+ const operation = this.select(value, target.textContent);
101
+ if (!this.multiple) {
102
+ updateChecked(this.lastChecked, 0);
103
+ }
104
+ updateChecked(target, operation);
105
+ this.lastChecked = target;
106
+ }
107
+ this.visible = this.multiple;
108
+ if (!this.visible) {
109
+ this.events.remove(document, "click", event);
110
+ }
111
+ }
112
+ });
113
+ }
114
+ this.visible = true;
115
+ }
116
+ _connectedInit() {
117
+ if (!this.value) {
118
+ const checked = [...this.querySelectorAll("[checked]")];
119
+ const list = this.multiple
120
+ ? checked
121
+ : checked.length
122
+ ? [this.lastChecked = checked[0]]
123
+ : [];
124
+ list.forEach((element) => {
125
+ const operation = this.select(this.optionValue(element), element.textContent);
126
+ updateChecked(element, operation);
127
+ });
128
+ this.default = this.value;
129
+ this.defaultText = this.text;
130
+ this.defaultChecked = checked;
131
+ }
132
+ }
133
+ reset() {
134
+ this.value = this.default;
135
+ this.text = this.defaultText;
136
+ this.querySelectorAll("[checked]").forEach(element => updateChecked(element, 0));
137
+ this.defaultChecked.forEach(element => updateChecked(element, 1));
138
+ }
139
+ select(value, text) {
140
+ text ||= value;
141
+ let operation = 0;
142
+ if (this.multiple) {
143
+ const i = this._store.findIndex(s => s.value === value);
144
+ if (i > -1) {
145
+ this._store.splice(i, 1);
146
+ }
147
+ else {
148
+ this._store.push({ value, text });
149
+ operation = 1;
150
+ }
151
+ this.value = this._store.map(s => s.value);
152
+ this.text = this._store.map(s => s.text).join(", ");
153
+ }
154
+ else {
155
+ if (this.value === value) {
156
+ this.value = "";
157
+ this.text = "";
158
+ }
159
+ else {
160
+ this.value = value;
161
+ this.text = text;
162
+ operation = 1;
163
+ }
164
+ }
165
+ this.dispatchEvent(new CustomEvent("change", { detail: this.namevalue() }));
166
+ this.filter();
167
+ return operation;
168
+ }
169
+ filter(query) {
170
+ query = query?.trim();
171
+ [...this.children].forEach((element) => {
172
+ this.filterCallback(element, !query
173
+ || contain(this.optionValue(element), query)
174
+ || contain(element.textContent, query), query);
175
+ });
176
+ }
177
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
178
+ filterCallback(element, match, query) {
179
+ element.style.display = match ? "" : "none";
180
+ }
181
+ _handleInput(e) {
182
+ e.stopPropagation();
183
+ if (this.compositing) {
184
+ return;
185
+ }
186
+ const s = this._input.value;
187
+ this.filter(this.multiple ? betweenAt(this._input.selectionStart, s, ",") : s);
188
+ this.dispatchEvent(new CustomEvent("input", { detail: this.namevalue() }));
189
+ }
190
+ focus(options) {
191
+ this._input.focus(options);
192
+ this.visible = true;
193
+ }
194
+ blur() {
195
+ this._input.blur();
196
+ this.visible = false;
197
+ }
198
+ optionValue(option) {
199
+ return option.value || option.getAttribute("value") || "";
200
+ }
201
+ };
202
+ __decorate([
203
+ property({ type: Boolean, reflect: true })
204
+ ], Select.prototype, "open", void 0);
205
+ __decorate([
206
+ property()
207
+ ], Select.prototype, "text", void 0);
208
+ __decorate([
209
+ part("content")
210
+ ], Select.prototype, "_content", void 0);
211
+ __decorate([
212
+ property({ type: Boolean })
213
+ ], Select.prototype, "visible", void 0);
214
+ __decorate([
215
+ property()
216
+ ], Select.prototype, "direction", void 0);
217
+ __decorate([
218
+ property({ type: Boolean })
219
+ ], Select.prototype, "multiple", void 0);
220
+ Select = __decorate([
221
+ godown(protoName),
222
+ styles(css `
223
+ [part="input"] {
224
+ text-overflow: ellipsis;
225
+ }
226
+
227
+ [part="content"] {
228
+ position: absolute;
229
+ width: 100%;
230
+ visibility: hidden;
231
+ }
232
+
233
+ [direction="bottom"] {
234
+ top: 100%;
235
+ }
236
+
237
+ [direction="top"] {
238
+ bottom: 100%;
239
+ }
240
+ `)
241
+ ], Select);
242
+ export default Select;
243
+ //# sourceMappingURL=select.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"select.js","sourceRoot":"","sources":["../../src/components/select.ts"],"names":[],"mappings":"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"}
@@ -0,0 +1,26 @@
1
+ import { GlobalStyle } from "../core/global-style.js";
2
+ /**
3
+ * {@linkcode Skeleton} renders a skeleton screen.
4
+ *
5
+ * @slot loading - The content if loading is true.
6
+ * @slot - The content if loading is false.
7
+ * @category feedback
8
+ */
9
+ declare class Skeleton extends GlobalStyle {
10
+ /**
11
+ * If "image", render a image placeholder.
12
+ */
13
+ type: "text" | "image";
14
+ /**
15
+ * Animation type.
16
+ * opacity animation only effect on slotted element and image icon.
17
+ */
18
+ animation: "position" | "opacity";
19
+ /**
20
+ * If false, render slot only.
21
+ */
22
+ loading: boolean;
23
+ protected render(): import("lit").TemplateResult<1>;
24
+ }
25
+ export default Skeleton;
26
+ //# sourceMappingURL=skeleton.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../src/components/skeleton.ts"],"names":[],"mappings":"AAQA,OAAO,EAAiB,WAAW,EAAe,MAAM,yBAAyB,CAAC;AAKlF;;;;;;GAMG;AACH,cAoEM,QAAS,SAAQ,WAAW;IAChC;;OAEG;IAEH,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC;IACvB;;;OAGG;IAEH,SAAS,EAAE,UAAU,GAAG,SAAS,CAAc;IAC/C;;OAEG;IAEH,OAAO,UAAQ;IAEf,SAAS,CAAC,MAAM;CAQjB;AAED,eAAe,QAAQ,CAAC"}
@@ -0,0 +1,119 @@
1
+ import { __decorate } from "tslib";
2
+ import { godown } from "@godown/element/decorators/godown.js";
3
+ import { styles } from "@godown/element/decorators/styles.js";
4
+ import { conditionIf } from "@godown/element/directives/condition-if.js";
5
+ import { htmlSlot } from "@godown/element/directives/html-slot.js";
6
+ import iconPhoto from "@godown/f7-icon/icons/photo.js";
7
+ import { css, html } from "lit";
8
+ import { property, state } from "lit/decorators.js";
9
+ import { cssGlobalVars, GlobalStyle, scopePrefix } from "../core/global-style.js";
10
+ const protoName = "skeleton";
11
+ const cssScope = scopePrefix(protoName);
12
+ /**
13
+ * {@linkcode Skeleton} renders a skeleton screen.
14
+ *
15
+ * @slot loading - The content if loading is true.
16
+ * @slot - The content if loading is false.
17
+ * @category feedback
18
+ */
19
+ let Skeleton = class Skeleton extends GlobalStyle {
20
+ constructor() {
21
+ super(...arguments);
22
+ /**
23
+ * Animation type.
24
+ * opacity animation only effect on slotted element and image icon.
25
+ */
26
+ this.animation = "position";
27
+ /**
28
+ * If false, render slot only.
29
+ */
30
+ this.loading = true;
31
+ }
32
+ render() {
33
+ if (!this.loading) {
34
+ return htmlSlot();
35
+ }
36
+ return html `<div part="root" class="${this.animation}">
37
+ ${conditionIf(this.type === "image", iconPhoto())}
38
+ ${htmlSlot("loading")}</div>`;
39
+ }
40
+ };
41
+ __decorate([
42
+ property()
43
+ ], Skeleton.prototype, "type", void 0);
44
+ __decorate([
45
+ property()
46
+ ], Skeleton.prototype, "animation", void 0);
47
+ __decorate([
48
+ state()
49
+ ], Skeleton.prototype, "loading", void 0);
50
+ Skeleton = __decorate([
51
+ godown(protoName),
52
+ styles(css `
53
+ :host {
54
+ ${cssScope}--from: var(${cssGlobalVars._colors.darkgray[9]});
55
+ ${cssScope}--to: var(${cssGlobalVars._colors.darkgray[7]});
56
+ ${cssScope}--deg: 95deg;
57
+ ${cssScope}--duration: 1.5s;
58
+ ${cssScope}--icon-size: 5em;
59
+ ${cssScope}--icon-margin: .25em;
60
+ color: var(${cssGlobalVars._colors.darkgray[5]});
61
+ background: var(${cssScope}--from);
62
+ min-height: 1.5em;
63
+ width: 100%;
64
+ flex-shrink: 0;
65
+ display: block;
66
+ overflow: hidden;
67
+ }
68
+
69
+ [part="root"] {
70
+ height: 100%;
71
+ min-height: inherit;
72
+ text-align: center;
73
+ animation: var(${cssScope}--duration) ease-in-out 0s infinite none running;
74
+ }
75
+
76
+ svg {
77
+ --size:var(${cssScope}--icon-size);
78
+ font-size: var(--size);
79
+ margin: calc(var(--size) * 0.05);
80
+ }
81
+
82
+ .position {
83
+ background-image: linear-gradient(
84
+ var(${cssScope}--deg),
85
+ var(${cssScope}--from) 36%,
86
+ var(${cssScope}--to) 50%,
87
+ var(${cssScope}--from) 64%
88
+ );
89
+ background-color: transparent;
90
+ background-size: 200% 100%;
91
+ animation-name: po;
92
+ }
93
+
94
+ @keyframes po {
95
+ from {
96
+ background-position: 150% center;
97
+ }
98
+ to {
99
+ background-position: -50% center;
100
+ }
101
+ }
102
+
103
+ .opacity {
104
+ animation-name: op;
105
+ animation-direction: alternate;
106
+ }
107
+
108
+ @keyframes op {
109
+ 50% {
110
+ opacity: 0.25;
111
+ }
112
+ to {
113
+ opacity: 1;
114
+ }
115
+ }
116
+ `)
117
+ ], Skeleton);
118
+ export default Skeleton;
119
+ //# sourceMappingURL=skeleton.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"skeleton.js","sourceRoot":"","sources":["../../src/components/skeleton.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,sCAAsC,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,sCAAsC,CAAC;AAC9D,OAAO,EAAE,WAAW,EAAE,MAAM,4CAA4C,CAAC;AACzE,OAAO,EAAE,QAAQ,EAAE,MAAM,yCAAyC,CAAC;AACnE,OAAO,SAAS,MAAM,gCAAgC,CAAC;AACvD,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAChC,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAEpD,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAElF,MAAM,SAAS,GAAG,UAAU,CAAC;AAC7B,MAAM,QAAQ,GAAG,WAAW,CAAC,SAAS,CAAC,CAAC;AAExC;;;;;;GAMG;AAqEH,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,WAAW;IAAlC;;QAME;;;WAGG;QAEH,cAAS,GAA2B,UAAU,CAAC;QAC/C;;WAEG;QAEH,YAAO,GAAG,IAAI,CAAC;IAUjB,CAAC;IARW,MAAM;QACd,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YAClB,OAAO,QAAQ,EAAE,CAAC;QACpB,CAAC;QACD,OAAO,IAAI,CAAA,2BAA2B,IAAI,CAAC,SAAS;MAClD,WAAW,CAAC,IAAI,CAAC,IAAI,KAAK,OAAO,EAAE,SAAS,EAAE,CAAC;MAC/C,QAAQ,CAAC,SAAS,CAAC,QAAQ,CAAC;IAChC,CAAC;CACF,CAAA;AArBC;IADC,QAAQ,EAAE;sCACY;AAMvB;IADC,QAAQ,EAAE;2CACoC;AAK/C;IADC,KAAK,EAAE;yCACO;AAhBX,QAAQ;IApEb,MAAM,CAAC,SAAS,CAAC;IACjB,MAAM,CACL,GAAG,CAAA;;QAEG,QAAQ,eAAe,aAAa,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC;QACxD,QAAQ,aAAa,aAAa,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC;QACtD,QAAQ;QACR,QAAQ;QACR,QAAQ;QACR,QAAQ;mBACG,aAAa,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC;wBAC5B,QAAQ;;;;;;;;;;;;uBAYT,QAAQ;;;;mBAIZ,QAAQ;;;;;;;cAOb,QAAQ;cACR,QAAQ;cACR,QAAQ;cACR,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BnB,CACF;GACK,QAAQ,CA0Bb;AAED,eAAe,QAAQ,CAAC"}
@@ -0,0 +1,32 @@
1
+ import { type HandlerEvent } from "@godown/element/element.js";
2
+ import SuperInput from "../core/super-input.js";
3
+ /**
4
+ * {@linkcode Split} renders multiple input boxes.
5
+ *
6
+ * Input: will move the focus box backward until the complete input from start to end.
7
+ *
8
+ * Delete: will move the focus box forward until the first and no inputs for each.
9
+ *
10
+ * @category input
11
+ */
12
+ declare class Split extends SuperInput {
13
+ /**
14
+ * The number of input boxes.
15
+ */
16
+ len: number;
17
+ /**
18
+ * Focus index.
19
+ */
20
+ index: number;
21
+ current: number;
22
+ currentValue: (string | null)[];
23
+ protected render(): import("lit").TemplateResult<1>;
24
+ connectedCallback(): void;
25
+ protected _handleInput(e: HandlerEvent<HTMLInputElement, InputEvent>): void;
26
+ focus(): void;
27
+ focusAt(i: number): void;
28
+ blur(): void;
29
+ reset(): void;
30
+ }
31
+ export default Split;
32
+ //# sourceMappingURL=split.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"split.d.ts","sourceRoot":"","sources":["../../src/components/split.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,YAAY,EAAE,MAAM,4BAA4B,CAAC;AAK/D,OAAO,UAAU,MAAM,wBAAwB,CAAC;AAKhD;;;;;;;;GAQG;AACH,cA6CM,KAAM,SAAQ,UAAU;IAC5B;;OAEG;IAEH,GAAG,SAAK;IACR;;OAEG;IAEH,KAAK,SAAM;IAGX,OAAO,SAAM;IAEb,YAAY,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC,EAAE,CAAM;IAErC,SAAS,CAAC,MAAM;IAyBhB,iBAAiB,IAAI,IAAI;IAKzB,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,YAAY,CAAC,gBAAgB,EAAE,UAAU,CAAC;IA2CpE,KAAK;IAIL,OAAO,CAAC,CAAC,EAAE,MAAM;IAKjB,IAAI;IAKJ,KAAK;CAQN;AAED,eAAe,KAAK,CAAC"}
@@ -0,0 +1,173 @@
1
+ import { __decorate } from "tslib";
2
+ import { godown } from "@godown/element/decorators/godown.js";
3
+ import { styles } from "@godown/element/decorators/styles.js";
4
+ import { classList } from "@godown/element/directives/class-list.js";
5
+ import { css, html, nothing } from "lit";
6
+ import { property, state } from "lit/decorators.js";
7
+ import { cssGlobalVars, scopePrefix } from "../core/global-style.js";
8
+ import SuperInput from "../core/super-input.js";
9
+ const protoName = "split";
10
+ const cssScope = scopePrefix(protoName);
11
+ /**
12
+ * {@linkcode Split} renders multiple input boxes.
13
+ *
14
+ * Input: will move the focus box backward until the complete input from start to end.
15
+ *
16
+ * Delete: will move the focus box forward until the first and no inputs for each.
17
+ *
18
+ * @category input
19
+ */
20
+ let Split = class Split extends SuperInput {
21
+ constructor() {
22
+ super(...arguments);
23
+ /**
24
+ * The number of input boxes.
25
+ */
26
+ this.len = 6;
27
+ /**
28
+ * Focus index.
29
+ */
30
+ this.index = -1;
31
+ this.current = -1;
32
+ this.currentValue = [];
33
+ }
34
+ render() {
35
+ return html `
36
+ <div part="root">
37
+ ${this.currentValue
38
+ .map((value, index) => html `<span part="input-box"
39
+ @click="${this.disabled ? null : () => this.focusAt(index)}"
40
+ class="${classList({ focus: this.current === index }) || nothing}"
41
+ >${value}</span>`)}
42
+ <input
43
+ part="input"
44
+ id="${this.makeId}"
45
+ @blur=${this.blur}
46
+ @input="${this._handleInput}"
47
+ .value="${
48
+ /* Ensure that input always has a value of length this.len */
49
+ this.value.padStart(this.len, " ")}"
50
+ >
51
+ </div>
52
+ `;
53
+ }
54
+ connectedCallback() {
55
+ super.connectedCallback();
56
+ this.reset();
57
+ }
58
+ _handleInput(e) {
59
+ e.stopPropagation();
60
+ if (this.compositing) {
61
+ return;
62
+ }
63
+ if (e.data === null) {
64
+ // delete
65
+ if (this.currentValue[this.current] !== null) {
66
+ // delete exist value
67
+ this.currentValue[this.current] = null;
68
+ }
69
+ else {
70
+ // go to before
71
+ this.currentValue[this.current - 1] = null;
72
+ const lastNotNull = this.currentValue.findLastIndex(a => a !== null);
73
+ this.current = this.current - 1 < 0 ? lastNotNull < 0 ? 0 : lastNotNull : this.current - 1;
74
+ }
75
+ }
76
+ else {
77
+ // input
78
+ this.currentValue[this.current] = e.data;
79
+ if (this.current + 1 >= this.len) {
80
+ // index overflow
81
+ this.current = this.currentValue.indexOf(null);
82
+ if (this.current === -1) {
83
+ this.blur();
84
+ }
85
+ }
86
+ else {
87
+ // go to after
88
+ this.current += 1;
89
+ }
90
+ }
91
+ this.value = this.currentValue.join("");
92
+ this.dispatchEvent(new CustomEvent("input", { detail: this.value, bubbles: true, composed: true }));
93
+ this.dispatchEvent(new CustomEvent("change", { detail: this.value, composed: true }));
94
+ }
95
+ focus() {
96
+ this.focusAt(this.current);
97
+ }
98
+ focusAt(i) {
99
+ this.current = i;
100
+ this._input.focus();
101
+ }
102
+ blur() {
103
+ this._input.blur();
104
+ this.current = -1;
105
+ }
106
+ reset() {
107
+ this.current = -1;
108
+ this.value = this.default;
109
+ this.currentValue = this.value.split("").concat(Array(this.len - this.value.length).fill(null));
110
+ if (this.index > -1) {
111
+ this.current = this.index;
112
+ }
113
+ }
114
+ };
115
+ __decorate([
116
+ property({ type: Number })
117
+ ], Split.prototype, "len", void 0);
118
+ __decorate([
119
+ property({ type: Number })
120
+ ], Split.prototype, "index", void 0);
121
+ __decorate([
122
+ state()
123
+ ], Split.prototype, "current", void 0);
124
+ __decorate([
125
+ state()
126
+ ], Split.prototype, "currentValue", void 0);
127
+ Split = __decorate([
128
+ godown(protoName),
129
+ styles(css `
130
+ :host {
131
+ color: var(${cssGlobalVars.foreground});
132
+ display: block;
133
+ border-radius: 1px;
134
+ width: fit-content;
135
+ ${cssScope}--size: 1.45em;
136
+ ${cssScope}--gap: .25em;
137
+ }
138
+
139
+ [part="root"] {
140
+ gap: var(${cssScope}--gap);
141
+ width: 100%;
142
+ position: relative;
143
+ vertical-align: top;
144
+ display: inline-flex;
145
+ justify-content: space-between;
146
+ border-radius: inherit;
147
+ }
148
+
149
+ [part="input-box"] {
150
+ width: var(${cssScope}--size);
151
+ height: var(${cssScope}--size);
152
+ vertical-align: top;
153
+ text-align: center;
154
+ background-color: var(${cssGlobalVars.input}-background);
155
+ border-radius: inherit;
156
+ }
157
+
158
+ [part="input"] {
159
+ width: 100%;
160
+ height: 100%;
161
+ opacity: 0;
162
+ background: none;
163
+ position: absolute;
164
+ z-index: -1;
165
+ }
166
+
167
+ .focus {
168
+ box-shadow: var(${cssGlobalVars.input}-box-shadow);
169
+ }
170
+ `)
171
+ ], Split);
172
+ export default Split;
173
+ //# sourceMappingURL=split.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"split.js","sourceRoot":"","sources":["../../src/components/split.ts"],"names":[],"mappings":"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"}
@@ -0,0 +1,39 @@
1
+ import SuperInput from "../core/super-input.js";
2
+ /**
3
+ * {@linkcode Switch} renders a switch.
4
+ *
5
+ * The switch is rectangular by default,
6
+ * set the round property to rounded switch.
7
+ *
8
+ * @category input
9
+ */
10
+ declare class Switch extends SuperInput {
11
+ /**
12
+ * Border style.
13
+ */
14
+ round: boolean;
15
+ /**
16
+ * Whether this element is selected or not.
17
+ */
18
+ checked: boolean;
19
+ /**
20
+ * Whether this element is disabled or not.
21
+ */
22
+ disabled: boolean;
23
+ /**
24
+ * Parsed by JSON.parse to checked.
25
+ */
26
+ default: string;
27
+ /**
28
+ * Input value.
29
+ */
30
+ value: string;
31
+ _input: HTMLInputElement;
32
+ protected render(): import("lit").TemplateResult<1>;
33
+ reset(): void;
34
+ connectedCallback(): void;
35
+ protected _handleChange(): void;
36
+ namevalue(): [string, boolean];
37
+ }
38
+ export default Switch;
39
+ //# sourceMappingURL=switch.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"switch.d.ts","sourceRoot":"","sources":["../../src/components/switch.ts"],"names":[],"mappings":"AAMA,OAAO,UAAU,MAAM,wBAAwB,CAAC;AAKhD;;;;;;;GAOG;AACH,cAqFM,MAAO,SAAQ,UAAU;IAC7B;;OAEG;IAEH,KAAK,UAAS;IACd;;OAEG;IAEH,OAAO,UAAS;IAChB;;OAEG;IAEH,QAAQ,UAAS;IACjB;;OAEG;IAEH,OAAO,SAAW;IAClB;;OAEG;IAEH,KAAK,SAAQ;IAGb,MAAM,EAAE,gBAAgB,CAAC;IAEzB,SAAS,CAAC,MAAM;IAgBhB,KAAK;IAKL,iBAAiB;IAUjB,SAAS,CAAC,aAAa;IAMvB,SAAS,IAAI,CAAC,MAAM,EAAE,OAAO,CAAC;CAG/B;AAED,eAAe,MAAM,CAAC"}