snice 1.14.2 → 2.1.0

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 (311) hide show
  1. package/bin/templates/base/tsconfig.json +5 -4
  2. package/components/accordion/demo.html +403 -0
  3. package/components/alert/demo.html +445 -0
  4. package/components/avatar/demo.html +598 -0
  5. package/components/badge/demo.html +523 -0
  6. package/components/breadcrumbs/demo.html +404 -0
  7. package/components/button/demo.html +42 -0
  8. package/components/card/demo.html +525 -0
  9. package/components/checkbox/demo.html +253 -0
  10. package/components/chip/demo.html +383 -0
  11. package/components/date-picker/demo.html +191 -0
  12. package/components/divider/demo.html +233 -0
  13. package/components/drawer/demo.html +328 -0
  14. package/components/input/demo.html +303 -0
  15. package/components/input/test.html +77 -0
  16. package/components/layout/demo.html +538 -0
  17. package/components/login/demo-auth-controller.ts +185 -0
  18. package/components/login/demo.html +470 -0
  19. package/components/login/snice-login.ts +2 -2
  20. package/components/modal/demo.html +291 -0
  21. package/components/pagination/demo.html +395 -0
  22. package/components/progress/demo.html +510 -0
  23. package/components/radio/demo.html +287 -0
  24. package/components/select/demo.html +511 -0
  25. package/components/skeleton/demo.html +514 -0
  26. package/components/switch/demo.html +284 -0
  27. package/components/table/demo-table-controller.ts +100 -0
  28. package/components/table/demo.html +480 -0
  29. package/components/table/snice-table.ts +2 -2
  30. package/components/tabs/demo.html +487 -0
  31. package/components/toast/demo.html +329 -0
  32. package/components/tooltip/demo.html +350 -0
  33. package/dist/index.cjs +441 -329
  34. package/dist/index.cjs.map +1 -1
  35. package/dist/index.cjs.min.map +1 -1
  36. package/dist/index.esm.js +441 -329
  37. package/dist/index.esm.js.map +1 -1
  38. package/dist/index.esm.min.js +3 -3
  39. package/dist/index.esm.min.js.map +1 -1
  40. package/dist/index.iife.js +441 -329
  41. package/dist/index.iife.js.map +1 -1
  42. package/dist/index.iife.min.js +3 -3
  43. package/dist/index.iife.min.js.map +1 -1
  44. package/dist/symbols.esm.js +1 -1
  45. package/dist/transitions.esm.js +1 -1
  46. package/dist/types/controller.d.ts +1 -1
  47. package/dist/types/element.d.ts +10 -10
  48. package/dist/types/events.d.ts +2 -2
  49. package/dist/types/index.d.ts +1 -1
  50. package/dist/types/observe.d.ts +1 -1
  51. package/dist/types/request-response.d.ts +2 -3
  52. package/dist/types/router.d.ts +1 -1
  53. package/package.json +9 -10
  54. package/dist/components/accordion/snice-accordion-item.d.ts +0 -25
  55. package/dist/components/accordion/snice-accordion-item.js +0 -260
  56. package/dist/components/accordion/snice-accordion-item.js.map +0 -1
  57. package/dist/components/accordion/snice-accordion.d.ts +0 -28
  58. package/dist/components/accordion/snice-accordion.js +0 -221
  59. package/dist/components/accordion/snice-accordion.js.map +0 -1
  60. package/dist/components/accordion/snice-accordion.types.d.ts +0 -29
  61. package/dist/components/accordion/snice-accordion.types.js +0 -2
  62. package/dist/components/accordion/snice-accordion.types.js.map +0 -1
  63. package/dist/components/alert/snice-alert.d.ts +0 -26
  64. package/dist/components/alert/snice-alert.js +0 -191
  65. package/dist/components/alert/snice-alert.js.map +0 -1
  66. package/dist/components/alert/snice-alert.types.d.ts +0 -11
  67. package/dist/components/alert/snice-alert.types.js +0 -2
  68. package/dist/components/alert/snice-alert.types.js.map +0 -1
  69. package/dist/components/avatar/snice-avatar.d.ts +0 -24
  70. package/dist/components/avatar/snice-avatar.js +0 -177
  71. package/dist/components/avatar/snice-avatar.js.map +0 -1
  72. package/dist/components/avatar/snice-avatar.types.d.ts +0 -12
  73. package/dist/components/avatar/snice-avatar.types.js +0 -2
  74. package/dist/components/avatar/snice-avatar.types.js.map +0 -1
  75. package/dist/components/badge/snice-badge.d.ts +0 -25
  76. package/dist/components/badge/snice-badge.js +0 -157
  77. package/dist/components/badge/snice-badge.js.map +0 -1
  78. package/dist/components/badge/snice-badge.types.d.ts +0 -15
  79. package/dist/components/badge/snice-badge.types.js +0 -2
  80. package/dist/components/badge/snice-badge.types.js.map +0 -1
  81. package/dist/components/breadcrumbs/snice-breadcrumbs.d.ts +0 -27
  82. package/dist/components/breadcrumbs/snice-breadcrumbs.js +0 -212
  83. package/dist/components/breadcrumbs/snice-breadcrumbs.js.map +0 -1
  84. package/dist/components/breadcrumbs/snice-breadcrumbs.types.d.ts +0 -23
  85. package/dist/components/breadcrumbs/snice-breadcrumbs.types.js +0 -2
  86. package/dist/components/breadcrumbs/snice-breadcrumbs.types.js.map +0 -1
  87. package/dist/components/breadcrumbs/snice-crumb.d.ts +0 -9
  88. package/dist/components/breadcrumbs/snice-crumb.js +0 -50
  89. package/dist/components/breadcrumbs/snice-crumb.js.map +0 -1
  90. package/dist/components/button/snice-button.d.ts +0 -32
  91. package/dist/components/button/snice-button.js +0 -212
  92. package/dist/components/button/snice-button.js.map +0 -1
  93. package/dist/components/button/snice-button.types.d.ts +0 -23
  94. package/dist/components/button/snice-button.types.js +0 -2
  95. package/dist/components/button/snice-button.types.js.map +0 -1
  96. package/dist/components/card/snice-card.d.ts +0 -19
  97. package/dist/components/card/snice-card.js +0 -132
  98. package/dist/components/card/snice-card.js.map +0 -1
  99. package/dist/components/card/snice-card.types.d.ts +0 -9
  100. package/dist/components/card/snice-card.types.js +0 -2
  101. package/dist/components/card/snice-card.types.js.map +0 -1
  102. package/dist/components/checkbox/snice-checkbox.d.ts +0 -34
  103. package/dist/components/checkbox/snice-checkbox.js +0 -289
  104. package/dist/components/checkbox/snice-checkbox.js.map +0 -1
  105. package/dist/components/checkbox/snice-checkbox.types.d.ts +0 -20
  106. package/dist/components/checkbox/snice-checkbox.types.js +0 -2
  107. package/dist/components/checkbox/snice-checkbox.types.js.map +0 -1
  108. package/dist/components/chip/snice-chip.d.ts +0 -28
  109. package/dist/components/chip/snice-chip.js +0 -203
  110. package/dist/components/chip/snice-chip.js.map +0 -1
  111. package/dist/components/chip/snice-chip.types.d.ts +0 -14
  112. package/dist/components/chip/snice-chip.types.js +0 -2
  113. package/dist/components/chip/snice-chip.types.js.map +0 -1
  114. package/dist/components/date-picker/snice-date-picker.d.ts +0 -82
  115. package/dist/components/date-picker/snice-date-picker.js +0 -880
  116. package/dist/components/date-picker/snice-date-picker.js.map +0 -1
  117. package/dist/components/date-picker/snice-date-picker.types.d.ts +0 -71
  118. package/dist/components/date-picker/snice-date-picker.types.js +0 -2
  119. package/dist/components/date-picker/snice-date-picker.types.js.map +0 -1
  120. package/dist/components/divider/snice-divider.d.ts +0 -17
  121. package/dist/components/divider/snice-divider.js +0 -111
  122. package/dist/components/divider/snice-divider.js.map +0 -1
  123. package/dist/components/divider/snice-divider.types.d.ts +0 -14
  124. package/dist/components/divider/snice-divider.types.js +0 -2
  125. package/dist/components/divider/snice-divider.types.js.map +0 -1
  126. package/dist/components/drawer/snice-drawer.d.ts +0 -37
  127. package/dist/components/drawer/snice-drawer.js +0 -335
  128. package/dist/components/drawer/snice-drawer.js.map +0 -1
  129. package/dist/components/drawer/snice-drawer.types.d.ts +0 -16
  130. package/dist/components/drawer/snice-drawer.types.js +0 -2
  131. package/dist/components/drawer/snice-drawer.types.js.map +0 -1
  132. package/dist/components/input/snice-input.d.ts +0 -65
  133. package/dist/components/input/snice-input.js +0 -603
  134. package/dist/components/input/snice-input.js.map +0 -1
  135. package/dist/components/input/snice-input.types.d.ts +0 -53
  136. package/dist/components/input/snice-input.types.js +0 -2
  137. package/dist/components/input/snice-input.types.js.map +0 -1
  138. package/dist/components/layout/snice-layout-blog.d.ts +0 -4
  139. package/dist/components/layout/snice-layout-blog.js +0 -56
  140. package/dist/components/layout/snice-layout-blog.js.map +0 -1
  141. package/dist/components/layout/snice-layout-card.d.ts +0 -6
  142. package/dist/components/layout/snice-layout-card.js +0 -53
  143. package/dist/components/layout/snice-layout-card.js.map +0 -1
  144. package/dist/components/layout/snice-layout-centered.d.ts +0 -5
  145. package/dist/components/layout/snice-layout-centered.js +0 -38
  146. package/dist/components/layout/snice-layout-centered.js.map +0 -1
  147. package/dist/components/layout/snice-layout-dashboard.d.ts +0 -4
  148. package/dist/components/layout/snice-layout-dashboard.js +0 -53
  149. package/dist/components/layout/snice-layout-dashboard.js.map +0 -1
  150. package/dist/components/layout/snice-layout-fullscreen.d.ts +0 -5
  151. package/dist/components/layout/snice-layout-fullscreen.js +0 -50
  152. package/dist/components/layout/snice-layout-fullscreen.js.map +0 -1
  153. package/dist/components/layout/snice-layout-landing.d.ts +0 -4
  154. package/dist/components/layout/snice-layout-landing.js +0 -55
  155. package/dist/components/layout/snice-layout-landing.js.map +0 -1
  156. package/dist/components/layout/snice-layout-minimal.d.ts +0 -4
  157. package/dist/components/layout/snice-layout-minimal.js +0 -27
  158. package/dist/components/layout/snice-layout-minimal.js.map +0 -1
  159. package/dist/components/layout/snice-layout-sidebar.d.ts +0 -5
  160. package/dist/components/layout/snice-layout-sidebar.js +0 -64
  161. package/dist/components/layout/snice-layout-sidebar.js.map +0 -1
  162. package/dist/components/layout/snice-layout-split.d.ts +0 -6
  163. package/dist/components/layout/snice-layout-split.js +0 -47
  164. package/dist/components/layout/snice-layout-split.js.map +0 -1
  165. package/dist/components/layout/snice-layout.d.ts +0 -4
  166. package/dist/components/layout/snice-layout.js +0 -43
  167. package/dist/components/layout/snice-layout.js.map +0 -1
  168. package/dist/components/layout/snice-layout.types.d.ts +0 -3
  169. package/dist/components/layout/snice-layout.types.js +0 -2
  170. package/dist/components/layout/snice-layout.types.js.map +0 -1
  171. package/dist/components/login/snice-login.d.ts +0 -45
  172. package/dist/components/login/snice-login.js +0 -385
  173. package/dist/components/login/snice-login.js.map +0 -1
  174. package/dist/components/login/snice-login.types.d.ts +0 -31
  175. package/dist/components/login/snice-login.types.js +0 -2
  176. package/dist/components/login/snice-login.types.js.map +0 -1
  177. package/dist/components/modal/snice-modal.d.ts +0 -32
  178. package/dist/components/modal/snice-modal.js +0 -288
  179. package/dist/components/modal/snice-modal.js.map +0 -1
  180. package/dist/components/modal/snice-modal.types.d.ts +0 -18
  181. package/dist/components/modal/snice-modal.types.js +0 -2
  182. package/dist/components/modal/snice-modal.types.js.map +0 -1
  183. package/dist/components/pagination/snice-pagination.d.ts +0 -26
  184. package/dist/components/pagination/snice-pagination.js +0 -373
  185. package/dist/components/pagination/snice-pagination.js.map +0 -1
  186. package/dist/components/pagination/snice-pagination.types.d.ts +0 -18
  187. package/dist/components/pagination/snice-pagination.types.js +0 -2
  188. package/dist/components/pagination/snice-pagination.types.js.map +0 -1
  189. package/dist/components/progress/snice-progress.d.ts +0 -35
  190. package/dist/components/progress/snice-progress.js +0 -295
  191. package/dist/components/progress/snice-progress.js.map +0 -1
  192. package/dist/components/progress/snice-progress.types.d.ts +0 -18
  193. package/dist/components/progress/snice-progress.types.js +0 -2
  194. package/dist/components/progress/snice-progress.types.js.map +0 -1
  195. package/dist/components/radio/snice-radio.d.ts +0 -33
  196. package/dist/components/radio/snice-radio.js +0 -286
  197. package/dist/components/radio/snice-radio.js.map +0 -1
  198. package/dist/components/radio/snice-radio.types.d.ts +0 -19
  199. package/dist/components/radio/snice-radio.types.js +0 -2
  200. package/dist/components/radio/snice-radio.types.js.map +0 -1
  201. package/dist/components/select/snice-option.d.ts +0 -17
  202. package/dist/components/select/snice-option.js +0 -77
  203. package/dist/components/select/snice-option.js.map +0 -1
  204. package/dist/components/select/snice-option.types.d.ts +0 -14
  205. package/dist/components/select/snice-option.types.js +0 -2
  206. package/dist/components/select/snice-option.types.js.map +0 -1
  207. package/dist/components/select/snice-select.d.ts +0 -89
  208. package/dist/components/select/snice-select.js +0 -900
  209. package/dist/components/select/snice-select.js.map +0 -1
  210. package/dist/components/select/snice-select.types.d.ts +0 -49
  211. package/dist/components/select/snice-select.types.js +0 -2
  212. package/dist/components/select/snice-select.types.js.map +0 -1
  213. package/dist/components/skeleton/snice-skeleton.d.ts +0 -16
  214. package/dist/components/skeleton/snice-skeleton.js +0 -159
  215. package/dist/components/skeleton/snice-skeleton.js.map +0 -1
  216. package/dist/components/skeleton/snice-skeleton.types.d.ts +0 -10
  217. package/dist/components/skeleton/snice-skeleton.types.js +0 -2
  218. package/dist/components/skeleton/snice-skeleton.types.js.map +0 -1
  219. package/dist/components/switch/snice-switch.d.ts +0 -38
  220. package/dist/components/switch/snice-switch.js +0 -309
  221. package/dist/components/switch/snice-switch.js.map +0 -1
  222. package/dist/components/switch/snice-switch.types.d.ts +0 -21
  223. package/dist/components/switch/snice-switch.types.js +0 -2
  224. package/dist/components/switch/snice-switch.types.js.map +0 -1
  225. package/dist/components/symbols.d.ts +0 -1
  226. package/dist/components/symbols.js +0 -20
  227. package/dist/components/symbols.js.map +0 -1
  228. package/dist/components/table/snice-cell-boolean.d.ts +0 -21
  229. package/dist/components/table/snice-cell-boolean.js +0 -152
  230. package/dist/components/table/snice-cell-boolean.js.map +0 -1
  231. package/dist/components/table/snice-cell-date.d.ts +0 -24
  232. package/dist/components/table/snice-cell-date.js +0 -240
  233. package/dist/components/table/snice-cell-date.js.map +0 -1
  234. package/dist/components/table/snice-cell-duration.d.ts +0 -16
  235. package/dist/components/table/snice-cell-duration.js +0 -123
  236. package/dist/components/table/snice-cell-duration.js.map +0 -1
  237. package/dist/components/table/snice-cell-filesize.d.ts +0 -16
  238. package/dist/components/table/snice-cell-filesize.js +0 -119
  239. package/dist/components/table/snice-cell-filesize.js.map +0 -1
  240. package/dist/components/table/snice-cell-number.d.ts +0 -23
  241. package/dist/components/table/snice-cell-number.js +0 -202
  242. package/dist/components/table/snice-cell-number.js.map +0 -1
  243. package/dist/components/table/snice-cell-progress.d.ts +0 -17
  244. package/dist/components/table/snice-cell-progress.js +0 -114
  245. package/dist/components/table/snice-cell-progress.js.map +0 -1
  246. package/dist/components/table/snice-cell-rating.d.ts +0 -17
  247. package/dist/components/table/snice-cell-rating.js +0 -113
  248. package/dist/components/table/snice-cell-rating.js.map +0 -1
  249. package/dist/components/table/snice-cell-sparkline.d.ts +0 -29
  250. package/dist/components/table/snice-cell-sparkline.js +0 -290
  251. package/dist/components/table/snice-cell-sparkline.js.map +0 -1
  252. package/dist/components/table/snice-cell-text.d.ts +0 -19
  253. package/dist/components/table/snice-cell-text.js +0 -153
  254. package/dist/components/table/snice-cell-text.js.map +0 -1
  255. package/dist/components/table/snice-cell.d.ts +0 -32
  256. package/dist/components/table/snice-cell.js +0 -451
  257. package/dist/components/table/snice-cell.js.map +0 -1
  258. package/dist/components/table/snice-column.d.ts +0 -62
  259. package/dist/components/table/snice-column.js +0 -440
  260. package/dist/components/table/snice-column.js.map +0 -1
  261. package/dist/components/table/snice-header.d.ts +0 -33
  262. package/dist/components/table/snice-header.js +0 -303
  263. package/dist/components/table/snice-header.js.map +0 -1
  264. package/dist/components/table/snice-progress.d.ts +0 -10
  265. package/dist/components/table/snice-progress.js +0 -91
  266. package/dist/components/table/snice-progress.js.map +0 -1
  267. package/dist/components/table/snice-rating.d.ts +0 -9
  268. package/dist/components/table/snice-rating.js +0 -68
  269. package/dist/components/table/snice-rating.js.map +0 -1
  270. package/dist/components/table/snice-row.d.ts +0 -43
  271. package/dist/components/table/snice-row.js +0 -365
  272. package/dist/components/table/snice-row.js.map +0 -1
  273. package/dist/components/table/snice-table.d.ts +0 -69
  274. package/dist/components/table/snice-table.js +0 -814
  275. package/dist/components/table/snice-table.js.map +0 -1
  276. package/dist/components/table/snice-table.types.d.ts +0 -137
  277. package/dist/components/table/snice-table.types.js +0 -2
  278. package/dist/components/table/snice-table.types.js.map +0 -1
  279. package/dist/components/tabs/snice-tab-panel.d.ts +0 -12
  280. package/dist/components/tabs/snice-tab-panel.js +0 -78
  281. package/dist/components/tabs/snice-tab-panel.js.map +0 -1
  282. package/dist/components/tabs/snice-tab.d.ts +0 -13
  283. package/dist/components/tabs/snice-tab.js +0 -90
  284. package/dist/components/tabs/snice-tab.js.map +0 -1
  285. package/dist/components/tabs/snice-tabs.d.ts +0 -34
  286. package/dist/components/tabs/snice-tabs.js +0 -367
  287. package/dist/components/tabs/snice-tabs.js.map +0 -1
  288. package/dist/components/tabs/snice-tabs.types.d.ts +0 -23
  289. package/dist/components/tabs/snice-tabs.types.js +0 -2
  290. package/dist/components/tabs/snice-tabs.types.js.map +0 -1
  291. package/dist/components/toast/snice-toast-container.d.ts +0 -25
  292. package/dist/components/toast/snice-toast-container.js +0 -251
  293. package/dist/components/toast/snice-toast-container.js.map +0 -1
  294. package/dist/components/toast/snice-toast.d.ts +0 -23
  295. package/dist/components/toast/snice-toast.js +0 -316
  296. package/dist/components/toast/snice-toast.js.map +0 -1
  297. package/dist/components/toast/snice-toast.types.d.ts +0 -30
  298. package/dist/components/toast/snice-toast.types.js +0 -2
  299. package/dist/components/toast/snice-toast.types.js.map +0 -1
  300. package/dist/components/tooltip/snice-tooltip.d.ts +0 -50
  301. package/dist/components/tooltip/snice-tooltip.js +0 -656
  302. package/dist/components/tooltip/snice-tooltip.js.map +0 -1
  303. package/dist/components/tooltip/snice-tooltip.types.d.ts +0 -18
  304. package/dist/components/tooltip/snice-tooltip.types.js +0 -2
  305. package/dist/components/tooltip/snice-tooltip.types.js.map +0 -1
  306. package/dist/components/transitions.d.ts +0 -11
  307. package/dist/components/transitions.js +0 -69
  308. package/dist/components/transitions.js.map +0 -1
  309. package/dist/index.cjs.min +0 -15
  310. package/dist/symbols.cjs +0 -103
  311. package/dist/transitions.cjs +0 -219
package/components/table/demo.html ADDED
@@ -0,0 +1,480 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Snice Table Demo</title>
7
+ <link rel="stylesheet" href="../theme/theme.css">
8
+ <style>
9
+ body {
10
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
11
+ margin: 0;
12
+ padding: 2rem;
13
+ background: var(--snice-color-background-secondary);
14
+ }
15
+
16
+ .demo-container {
17
+ max-width: 1200px;
18
+ margin: 0 auto;
19
+ border-radius: 0.5rem;
20
+ padding: 2rem;
21
+ }
22
+
23
+ h1 {
24
+ color: #333;
25
+ margin-bottom: 2rem;
26
+ }
27
+
28
+ .demo-section {
29
+ margin-bottom: 3rem;
30
+ }
31
+
32
+ .demo-section h2 {
33
+ color: #555;
34
+ border-bottom: 2px solid #e9ecef;
35
+ padding-bottom: 0.5rem;
36
+ margin-bottom: 1.5rem;
37
+ }
38
+
39
+ .demo-controls {
40
+ margin-bottom: 1rem;
41
+ display: flex;
42
+ gap: 1rem;
43
+ flex-wrap: wrap;
44
+ }
45
+
46
+ .demo-controls button {
47
+ padding: 0.5rem 1rem;
48
+ border: 1px solid #007bff;
49
+ background: #007bff;
50
+ color: white;
51
+ border-radius: 0.25rem;
52
+ cursor: pointer;
53
+ font-size: 0.875rem;
54
+ }
55
+
56
+ .demo-controls button:hover {
57
+ background: #0056b3;
58
+ }
59
+
60
+ .demo-controls button.secondary {
61
+ background: white;
62
+ color: #007bff;
63
+ }
64
+
65
+ .demo-controls button.secondary:hover {
66
+ background: #f8f9fa;
67
+ }
68
+ </style>
69
+ </head>
70
+ <body>
71
+ <div class="demo-container">
72
+ <h1>🗂️ Snice Table Component Demo</h1>
73
+
74
+ <div class="demo-section">
75
+ <h2>Basic Table with Declarative Columns</h2>
76
+ <div class="demo-controls">
77
+ <button onclick="toggleSearch()">Toggle Search</button>
78
+ <button onclick="togglePagination()">Toggle Pagination</button>
79
+ <button onclick="toggleSorting()">Toggle Sorting</button>
80
+ <button onclick="toggleSelection()">Toggle Selection</button>
81
+ <button class="secondary" onclick="addRandomRow()">Add Random Row</button>
82
+ <button class="secondary" onclick="loadSampleData()">Load Sample Data</button>
83
+ </div>
84
+
85
+ <snice-table
86
+ id="demo-table"
87
+ searchable
88
+ sortable
89
+ selectable
90
+ controller="demo-table-controller">
91
+ </snice-table>
92
+ </div>
93
+
94
+ <div class="demo-section">
95
+ <h2>Advanced Table with Sparklines and Progress</h2>
96
+
97
+ <snice-table
98
+ id="analytics-table"
99
+ size="medium"
100
+ hoverable
101
+ sortable
102
+ striped>
103
+
104
+ <snice-column
105
+ slot="columns"
106
+ key="metric"
107
+ label="Metric"
108
+ type="text">
109
+ </snice-column>
110
+
111
+ <snice-column
112
+ slot="columns"
113
+ key="value"
114
+ label="Current Value"
115
+ type="number"
116
+ decimals="1"
117
+ thousands-separator="true">
118
+ </snice-column>
119
+
120
+ <snice-column
121
+ slot="columns"
122
+ key="progress"
123
+ label="Progress"
124
+ type="progress"
125
+ progress-max="100"
126
+ show-percentage="true">
127
+ </snice-column>
128
+
129
+ <snice-column
130
+ slot="columns"
131
+ key="trend"
132
+ label="Trend (7 days)"
133
+ type="sparkline"
134
+ sparkline-type="line"
135
+ sparkline-color="#007bff"
136
+ sparkline-width="80"
137
+ sparkline-height="30">
138
+ </snice-column>
139
+
140
+ <snice-row slot="rows"
141
+ data-metric="Revenue"
142
+ data-value="125340"
143
+ data-progress="78"
144
+ data-trend="[45000, 47000, 49000, 52000, 48000, 53000, 55000]">
145
+ </snice-row>
146
+ <snice-row slot="rows"
147
+ data-metric="Users"
148
+ data-value="8250"
149
+ data-progress="92"
150
+ data-trend="[7800, 7950, 8100, 8200, 8150, 8300, 8250]">
151
+ </snice-row>
152
+ <snice-row slot="rows"
153
+ data-metric="Conversion"
154
+ data-value="3.4"
155
+ data-progress="68"
156
+ data-trend="[3.1, 3.2, 3.3, 3.5, 3.3, 3.4, 3.4]">
157
+ </snice-row>
158
+ <snice-row slot="rows"
159
+ data-metric="Retention"
160
+ data-value="89.2"
161
+ data-progress="89"
162
+ data-trend="[87, 88, 89, 90, 89, 88, 89]">
163
+ </snice-row>
164
+ </snice-table>
165
+ </div>
166
+
167
+ <div class="demo-section">
168
+ <h2>Individual Cell Components</h2>
169
+
170
+ <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 2rem;">
171
+ <div style="padding: 1rem; border: 1px solid #e9ecef; border-radius: 0.5rem; background: #f8f9fa;">
172
+ <h3 style="margin-top: 0; font-size: 0.875rem; color: #666;">Text Cell</h3>
173
+ <snice-cell-text value="Hello World"></snice-cell-text>
174
+ </div>
175
+
176
+ <div style="padding: 1rem; border: 1px solid #e9ecef; border-radius: 0.5rem; background: #f8f9fa;">
177
+ <h3 style="margin-top: 0; font-size: 0.875rem; color: #666;">Number Cell (Basic)</h3>
178
+ <snice-cell-number value="1234.56" thousands-separator="true" decimals="2"></snice-cell-number>
179
+ </div>
180
+
181
+ <div style="padding: 1rem; border: 1px solid #e9ecef; border-radius: 0.5rem; background: #f8f9fa;">
182
+ <h3 style="margin-top: 0; font-size: 0.875rem; color: #666;">Number Cell (Currency)</h3>
183
+ <snice-cell-number value="1234.56" prefix="$" thousands-separator="true" decimals="2"></snice-cell-number>
184
+ </div>
185
+
186
+ <div style="padding: 1rem; border: 1px solid #e9ecef; border-radius: 0.5rem; background: #f8f9fa;">
187
+ <h3 style="margin-top: 0; font-size: 0.875rem; color: #666;">Number Cell (Negative)</h3>
188
+ <snice-cell-number value="-456.78" negative-style="parentheses" thousands-separator="true" decimals="2"></snice-cell-number>
189
+ </div>
190
+
191
+ <div style="padding: 1rem; border: 1px solid #e9ecef; border-radius: 0.5rem; background: #f8f9fa;">
192
+ <h3 style="margin-top: 0; font-size: 0.875rem; color: #666;">Date Cell (Short)</h3>
193
+ <snice-cell-date value="2023-12-25" date-format="short"></snice-cell-date>
194
+ </div>
195
+
196
+ <div style="padding: 1rem; border: 1px solid #e9ecef; border-radius: 0.5rem; background: #f8f9fa;">
197
+ <h3 style="margin-top: 0; font-size: 0.875rem; color: #666;">Date Cell (Long)</h3>
198
+ <snice-cell-date value="2023-12-25" date-format="long"></snice-cell-date>
199
+ </div>
200
+
201
+ <div style="padding: 1rem; border: 1px solid #e9ecef; border-radius: 0.5rem; background: #f8f9fa;">
202
+ <h3 style="margin-top: 0; font-size: 0.875rem; color: #666;">Date Cell (Custom)</h3>
203
+ <snice-cell-date value="2023-12-25" date-format="custom" custom-format="DD/MM/YYYY"></snice-cell-date>
204
+ </div>
205
+
206
+ <div style="padding: 1rem; border: 1px solid #e9ecef; border-radius: 0.5rem; background: #f8f9fa;">
207
+ <h3 style="margin-top: 0; font-size: 0.875rem; color: #666;">Sparkline (Line)</h3>
208
+ <snice-cell-sparkline data="10，20，15，25，30，18，22" chart-type="line" width="80" height="30" color="#3b82f6"></snice-cell-sparkline>
209
+ </div>
210
+
211
+ <div style="padding: 1rem; border: 1px solid #e9ecef; border-radius: 0.5rem; background: #f8f9fa;">
212
+ <h3 style="margin-top: 0; font-size: 0.875rem; color: #666;">Sparkline (Bar)</h3>
213
+ <snice-cell-sparkline data="10，20，15，25，30，18，22" chart-type="bar" width="80" height="30" color="#10b981"></snice-cell-sparkline>
214
+ </div>
215
+
216
+ <div style="padding: 1rem; border: 1px solid #e9ecef; border-radius: 0.5rem; background: #f8f9fa;">
217
+ <h3 style="margin-top: 0; font-size: 0.875rem; color: #666;">Sparkline (Area)</h3>
218
+ <snice-cell-sparkline data="10，20，15，25，30，18，22" chart-type="area" width="80" height="30" color="#f59e0b"></snice-cell-sparkline>
219
+ </div>
220
+
221
+ <div style="padding: 1rem; border: 1px solid #e9ecef; border-radius: 0.5rem; background: #f8f9fa;">
222
+ <h3 style="margin-top: 0; font-size: 0.875rem; color: #666;">Boolean (Symbols)</h3>
223
+ <snice-cell-boolean value="true" use-symbols="true" true-symbol="✅" false-symbol="❌"></snice-cell-boolean>
224
+ </div>
225
+
226
+ <div style="padding: 1rem; border: 1px solid #e9ecef; border-radius: 0.5rem; background: #f8f9fa;">
227
+ <h3 style="margin-top: 0; font-size: 0.875rem; color: #666;">Boolean (Text)</h3>
228
+ <snice-cell-boolean value="false" use-symbols="false" true-value="Yes" false-value="No"></snice-cell-boolean>
229
+ </div>
230
+
231
+ <div style="padding: 1rem; border: 1px solid #e9ecef; border-radius: 0.5rem; background: #f8f9fa;">
232
+ <h3 style="margin-top: 0; font-size: 0.875rem; color: #666;">Rating (4/5 Stars)</h3>
233
+ <snice-cell-rating value="4"></snice-cell-rating>
234
+ </div>
235
+
236
+ <div style="padding: 1rem; border: 1px solid #e9ecef; border-radius: 0.5rem; background: #f8f9fa;">
237
+ <h3 style="margin-top: 0; font-size: 0.875rem; color: #666;">Rating (3/10 Custom)</h3>
238
+ <snice-cell-rating value="3"></snice-cell-rating>
239
+ </div>
240
+
241
+ <div style="padding: 1rem; border: 1px solid #e9ecef; border-radius: 0.5rem; background: #f8f9fa;">
242
+ <h3 style="margin-top: 0; font-size: 0.875rem; color: #666;">Progress (75%)</h3>
243
+ <snice-cell-progress value="75"></snice-cell-progress>
244
+ </div>
245
+
246
+ <div style="padding: 1rem; border: 1px solid #e9ecef; border-radius: 0.5rem; background: #f8f9fa;">
247
+ <h3 style="margin-top: 0; font-size: 0.875rem; color: #666;">Progress w/ %</h3>
248
+ <snice-cell-progress id="progress-with-percent" value="45"></snice-cell-progress>
249
+ </div>
250
+
251
+ <div style="padding: 1rem; border: 1px solid #e9ecef; border-radius: 0.5rem; background: #f8f9fa;">
252
+ <h3 style="margin-top: 0; font-size: 0.875rem; color: #666;">Duration (1h 1m 1s)</h3>
253
+ <snice-cell-duration value="3661"></snice-cell-duration>
254
+ </div>
255
+
256
+ <div style="padding: 1rem; border: 1px solid #e9ecef; border-radius: 0.5rem; background: #f8f9fa;">
257
+ <h3 style="margin-top: 0; font-size: 0.875rem; color: #666;">Duration (5m 30s)</h3>
258
+ <snice-cell-duration value="330"></snice-cell-duration>
259
+ </div>
260
+
261
+ <div style="padding: 1rem; border: 1px solid #e9ecef; border-radius: 0.5rem; background: #f8f9fa;">
262
+ <h3 style="margin-top: 0; font-size: 0.875rem; color: #666;">FileSize (2.0 MB)</h3>
263
+ <snice-cell-filesize value="2048576"></snice-cell-filesize>
264
+ </div>
265
+
266
+ <div style="padding: 1rem; border: 1px solid #e9ecef; border-radius: 0.5rem; background: #f8f9fa;">
267
+ <h3 style="margin-top: 0; font-size: 0.875rem; color: #666;">FileSize (1.5 GB)</h3>
268
+ <snice-cell-filesize value="1610612736"></snice-cell-filesize>
269
+ </div>
270
+ </div>
271
+ </div>
272
+
273
+ <div class="demo-section">
274
+ <h2>Individual Row Components</h2>
275
+
276
+ <div style="margin-bottom: 1rem;">
277
+ <h3 style="font-size: 1rem; color: #666; margin-bottom: 0.5rem;">Employee Row (Text, Number, Date, Boolean)</h3>
278
+ <snice-row id="employee-row" style="display: block; padding: 0.5rem; border: 1px solid #e9ecef; border-radius: 0.5rem; background: #f8f9fa;"></snice-row>
279
+ </div>
280
+
281
+ <div style="margin-bottom: 1rem;">
282
+ <h3 style="font-size: 1rem; color: #666; margin-bottom: 0.5rem;">Analytics Row (Text, Numbers, Progress, Sparkline)</h3>
283
+ <snice-row id="analytics-row" style="display: block; padding: 0.5rem; border: 1px solid #e9ecef; border-radius: 0.5rem; background: #f8f9fa;"></snice-row>
284
+ </div>
285
+
286
+ <div style="margin-bottom: 1rem;">
287
+ <h3 style="font-size: 1rem; color: #666; margin-bottom: 0.5rem;">System Row (Text, FileSize, Duration, Rating)</h3>
288
+ <snice-row id="system-row" style="display: block; padding: 0.5rem; border: 1px solid #e9ecef; border-radius: 0.5rem; background: #f8f9fa;"></snice-row>
289
+ </div>
290
+ </div>
291
+ </div>
292
+
293
+ <script type="module">
294
+ // Import controller first to register it
295
+ import './demo-table-controller.ts';
296
+ // Then import the table component
297
+ import './snice-table.ts';
298
+
299
+ const table = document.getElementById('demo-table');
300
+
301
+ // Demo functions
302
+ window.toggleSearch = () => {
303
+ table.showSearch = !table.showSearch;
304
+ };
305
+
306
+ window.togglePagination = () => {
307
+ table.showPagination = !table.showPagination;
308
+ };
309
+
310
+ window.toggleSorting = () => {
311
+ table.sortable = !table.sortable;
312
+ };
313
+
314
+ window.toggleSelection = () => {
315
+ table.selectable = !table.selectable;
316
+ };
317
+
318
+ window.addRandomRow = () => {
319
+ const names = ['Mike Davis', 'Sarah Connor', 'Tom Brady', 'Lisa Simpson', 'Jack Ryan'];
320
+ const roles = ['Developer', 'Designer', 'Manager', 'QA Engineer', 'DevOps'];
321
+ const domains = ['tech.com', 'design.io', 'startup.co', 'corp.net'];
322
+
323
+ const randomName = names[Math.floor(Math.random() * names.length)];
324
+ const randomRole = roles[Math.floor(Math.random() * roles.length)];
325
+ const randomDomain = domains[Math.floor(Math.random() * domains.length)];
326
+ const randomEmail = `${randomName.toLowerCase().replace(' ', '.')}@${randomDomain}`;
327
+ const randomSalary = Math.floor(Math.random() * 50000) + 50000;
328
+ const randomRating = Math.floor(Math.random() * 5) + 1;
329
+
330
+ const newData = {
331
+ id: Date.now(),
332
+ name: randomName,
333
+ email: randomEmail,
334
+ role: randomRole,
335
+ salary: randomSalary,
336
+ joinDate: new Date().toISOString().split('T')[0],
337
+ active: Math.random() > 0.2,
338
+ rating: randomRating
339
+ };
340
+
341
+ // Add to table data
342
+ const currentData = table.data || [];
343
+ table.setData([...currentData, newData]);
344
+ };
345
+
346
+ window.loadSampleData = () => {
347
+ const sampleData = [
348
+ {"id": 1, "name": "John Doe", "email": "john.doe@example.com", "role": "Developer", "salary": 75000, "joinDate": "2023-01-15", "active": true, "rating": 4},
349
+ {"id": 2, "name": "Jane Smith", "email": "jane.smith@example.com", "role": "Designer", "salary": 68000, "joinDate": "2023-03-20", "active": true, "rating": 5},
350
+ {"id": 3, "name": "Bob Johnson", "email": "bob.johnson@example.com", "role": "Manager", "salary": 95000, "joinDate": "2022-11-10", "active": false, "rating": 3},
351
+ {"id": 4, "name": "Alice Brown", "email": "alice.brown@example.com", "role": "Developer", "salary": 72000, "joinDate": "2023-06-05", "active": true, "rating": 4},
352
+ {"id": 5, "name": "Charlie Wilson", "email": "charlie.wilson@example.com", "role": "QA Engineer", "salary": 65000, "joinDate": "2023-02-28", "active": true, "rating": 4},
353
+ {"id": 6, "name": "Diana Prince", "email": "diana.prince@example.com", "role": "Developer", "salary": 78000, "joinDate": "2023-04-12", "active": true, "rating": 5},
354
+ {"id": 7, "name": "Clark Kent", "email": "clark.kent@example.com", "role": "Manager", "salary": 92000, "joinDate": "2022-08-22", "active": true, "rating": 4},
355
+ {"id": 8, "name": "Bruce Wayne", "email": "bruce.wayne@example.com", "role": "CEO", "salary": 150000, "joinDate": "2020-01-01", "active": true, "rating": 5}
356
+ ];
357
+
358
+ table.setData(sampleData);
359
+ table.totalItems = sampleData.length;
360
+ };
361
+
362
+ // Event listeners
363
+ table.addEventListener('@snice/table-sort-change', (e) => {
364
+ console.log('Sort changed:', e.detail);
365
+ });
366
+
367
+ table.addEventListener('@snice/table-selection-change', (e) => {
368
+ console.log('Selection changed:', e.detail);
369
+ });
370
+
371
+ table.addEventListener('@snice/row-click', (e) => {
372
+ console.log('Row clicked:', e.detail);
373
+ });
374
+
375
+ // Configure individual row components
376
+ const configureIndividualRows = async () => {
377
+ // Wait for components to be defined
378
+ await Promise.all([
379
+ customElements.whenDefined('snice-row'),
380
+ customElements.whenDefined('snice-cell-text'),
381
+ customElements.whenDefined('snice-cell-number'),
382
+ customElements.whenDefined('snice-cell-date'),
383
+ customElements.whenDefined('snice-cell-sparkline')
384
+ ]);
385
+
386
+ // Configure employee row
387
+ const employeeRow = document.getElementById('employee-row');
388
+ if (employeeRow) {
389
+ employeeRow.columns = [
390
+ { key: 'name', label: 'Name', type: 'text', align: 'left' },
391
+ { key: 'salary', label: 'Salary', type: 'number', align: 'right', numberFormat: { prefix: '$', thousandsSeparator: true, decimals: 0 } },
392
+ { key: 'joinDate', label: 'Join Date', type: 'date', align: 'center', dateFormat: { format: 'medium' } },
393
+ { key: 'active', label: 'Active', type: 'boolean', align: 'center', booleanFormat: { useSymbols: true, trueSymbol: '✅', falseSymbol: '❌' } }
394
+ ];
395
+ employeeRow.data = {
396
+ name: 'John Doe',
397
+ salary: 75000,
398
+ joinDate: '2022-03-15',
399
+ active: true
400
+ };
401
+ // Trigger update manually
402
+ if (typeof employeeRow.updateCells === 'function') {
403
+ employeeRow.updateCells();
404
+ }
405
+ }
406
+
407
+ // Configure analytics row
408
+ const analyticsRow = document.getElementById('analytics-row');
409
+ if (analyticsRow) {
410
+ analyticsRow.columns = [
411
+ { key: 'metric', label: 'Metric', type: 'text', align: 'left' },
412
+ { key: 'current', label: 'Current', type: 'number', align: 'right', numberFormat: { prefix: '$', thousandsSeparator: true, decimals: 0 } },
413
+ { key: 'progress', label: 'Progress', type: 'progress', align: 'left', progressFormat: { showPercentage: true, color: '#10b981' } },
414
+ { key: 'trend', label: 'Trend', type: 'sparkline', align: 'center', sparklineFormat: { type: 'line', color: '#3b82f6', width: 80, height: 30 } }
415
+ ];
416
+ analyticsRow.data = {
417
+ metric: 'Revenue',
418
+ current: 125340,
419
+ progress: 78,
420
+ trend: [45000, 47000, 49000, 52000, 48000, 53000, 55000]
421
+ };
422
+ // Trigger update manually
423
+ if (typeof analyticsRow.updateCells === 'function') {
424
+ analyticsRow.updateCells();
425
+ }
426
+ }
427
+
428
+ // Configure system row
429
+ const systemRow = document.getElementById('system-row');
430
+ if (systemRow) {
431
+ systemRow.columns = [
432
+ { key: 'process', label: 'Process', type: 'text', align: 'left' },
433
+ { key: 'memory', label: 'Memory', type: 'filesize', align: 'right' },
434
+ { key: 'uptime', label: 'Uptime', type: 'duration', align: 'right' },
435
+ { key: 'rating', label: 'Health', type: 'rating', align: 'center', ratingFormat: { max: 5, symbol: '●', emptySymbol: '○', color: '#10b981' } }
436
+ ];
437
+ systemRow.data = {
438
+ process: 'nginx',
439
+ memory: 52428800, // 50MB
440
+ uptime: 86461, // 1 day 1 minute 1 second
441
+ rating: 4
442
+ };
443
+ // Trigger update manually
444
+ if (typeof systemRow.updateCells === 'function') {
445
+ systemRow.updateCells();
446
+ }
447
+ }
448
+ };
449
+
450
+ // Initialize individual rows
451
+ configureIndividualRows();
452
+
453
+ // Configure individual progress cell with percentage
454
+ const configureProgressCells = async () => {
455
+ await customElements.whenDefined('snice-cell-progress');
456
+
457
+ const progressWithPercent = document.getElementById('progress-with-percent');
458
+ if (progressWithPercent) {
459
+ progressWithPercent.column = {
460
+ key: 'progress',
461
+ label: 'Progress',
462
+ type: 'progress',
463
+ align: 'left',
464
+ progressFormat: {
465
+ showPercentage: true,
466
+ color: '#10b981'
467
+ }
468
+ };
469
+ }
470
+ };
471
+
472
+ configureProgressCells();
473
+
474
+ // Uncomment to load sample data programmatically:
475
+ // setTimeout(() => {
476
+ // window.loadSampleData();
477
+ // }, 100);
478
+ </script>
479
+ </body>
480
+ </html>
package/components/table/snice-table.ts CHANGED
@@ -67,7 +67,7 @@ export class SniceTable extends HTMLElement {
67
67
  tbody!: HTMLTableSectionElement;
68
68
 
69
69
  @request('@snice/table/config')
70
- async *getTableConfig(): AsyncGenerator<{}, any, any> {
70
+ async *getTableConfig(): any {
71
71
  const config = await (yield {});
72
72
  this.columns = config.columns || [];
73
73
  this.selectorOptions = config.selectorOptions || [];
@@ -76,7 +76,7 @@ export class SniceTable extends HTMLElement {
76
76
  }
77
77
 
78
78
  @request('@snice/table/data')
79
- async *getTableData(): AsyncGenerator<any, any, any> {
79
+ async *getTableData(): any {
80
80
  this.loading = true;
81
81
  this.selectedRows = []; // Clear selections when loading new data
82
82