snice 2.1.4 → 2.2.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 (370) hide show
  1. package/dist/components/accordion/snice-accordion-item.d.ts +25 -0
  2. package/dist/components/accordion/snice-accordion-item.js +255 -0
  3. package/dist/components/accordion/snice-accordion-item.js.map +1 -0
  4. package/dist/components/accordion/snice-accordion.d.ts +28 -0
  5. package/dist/components/accordion/snice-accordion.js +206 -0
  6. package/dist/components/accordion/snice-accordion.js.map +1 -0
  7. package/dist/components/accordion/snice-accordion.types.d.ts +29 -0
  8. package/dist/components/alert/snice-alert.d.ts +26 -0
  9. package/dist/components/alert/snice-alert.js +180 -0
  10. package/dist/components/alert/snice-alert.js.map +1 -0
  11. package/{components/alert/snice-alert.types.ts → dist/components/alert/snice-alert.types.d.ts} +8 -9
  12. package/dist/components/avatar/snice-avatar.d.ts +24 -0
  13. package/dist/components/avatar/snice-avatar.js +180 -0
  14. package/dist/components/avatar/snice-avatar.js.map +1 -0
  15. package/dist/components/avatar/snice-avatar.types.d.ts +12 -0
  16. package/dist/components/badge/snice-badge.d.ts +25 -0
  17. package/dist/components/badge/snice-badge.js +169 -0
  18. package/dist/components/badge/snice-badge.js.map +1 -0
  19. package/{components/badge/snice-badge.types.ts → dist/components/badge/snice-badge.types.d.ts} +11 -12
  20. package/dist/components/breadcrumbs/snice-breadcrumbs.d.ts +27 -0
  21. package/dist/components/breadcrumbs/snice-breadcrumbs.js +214 -0
  22. package/dist/components/breadcrumbs/snice-breadcrumbs.js.map +1 -0
  23. package/dist/components/breadcrumbs/snice-breadcrumbs.types.d.ts +23 -0
  24. package/dist/components/breadcrumbs/snice-crumb.d.ts +9 -0
  25. package/dist/components/breadcrumbs/snice-crumb.js +63 -0
  26. package/dist/components/breadcrumbs/snice-crumb.js.map +1 -0
  27. package/dist/components/button/snice-button.d.ts +32 -0
  28. package/dist/components/button/snice-button.js +232 -0
  29. package/dist/components/button/snice-button.js.map +1 -0
  30. package/dist/components/button/snice-button.types.d.ts +23 -0
  31. package/dist/components/card/snice-card.d.ts +19 -0
  32. package/dist/components/card/snice-card.js +136 -0
  33. package/dist/components/card/snice-card.js.map +1 -0
  34. package/{components/card/snice-card.types.ts → dist/components/card/snice-card.types.d.ts} +6 -7
  35. package/dist/components/checkbox/snice-checkbox.d.ts +34 -0
  36. package/dist/components/checkbox/snice-checkbox.js +286 -0
  37. package/dist/components/checkbox/snice-checkbox.js.map +1 -0
  38. package/dist/components/checkbox/snice-checkbox.types.d.ts +20 -0
  39. package/dist/components/chip/snice-chip.d.ts +28 -0
  40. package/dist/components/chip/snice-chip.js +199 -0
  41. package/dist/components/chip/snice-chip.js.map +1 -0
  42. package/dist/components/chip/snice-chip.types.d.ts +14 -0
  43. package/dist/components/date-picker/snice-date-picker.d.ts +82 -0
  44. package/dist/components/date-picker/snice-date-picker.js +847 -0
  45. package/dist/components/date-picker/snice-date-picker.js.map +1 -0
  46. package/dist/components/date-picker/snice-date-picker.types.d.ts +71 -0
  47. package/dist/components/divider/snice-divider.d.ts +17 -0
  48. package/dist/components/divider/snice-divider.js +122 -0
  49. package/dist/components/divider/snice-divider.js.map +1 -0
  50. package/{components/divider/snice-divider.types.ts → dist/components/divider/snice-divider.types.d.ts} +9 -10
  51. package/dist/components/drawer/snice-drawer.d.ts +37 -0
  52. package/dist/components/drawer/snice-drawer.js +337 -0
  53. package/dist/components/drawer/snice-drawer.js.map +1 -0
  54. package/dist/components/drawer/snice-drawer.types.d.ts +16 -0
  55. package/dist/components/input/snice-input.d.ts +65 -0
  56. package/dist/components/input/snice-input.js +567 -0
  57. package/dist/components/input/snice-input.js.map +1 -0
  58. package/dist/components/input/snice-input.types.d.ts +53 -0
  59. package/dist/components/layout/snice-layout-blog.d.ts +4 -0
  60. package/dist/components/layout/snice-layout-blog.js +67 -0
  61. package/dist/components/layout/snice-layout-blog.js.map +1 -0
  62. package/dist/components/layout/snice-layout-card.d.ts +6 -0
  63. package/dist/components/layout/snice-layout-card.js +64 -0
  64. package/dist/components/layout/snice-layout-card.js.map +1 -0
  65. package/dist/components/layout/snice-layout-centered.d.ts +5 -0
  66. package/dist/components/layout/snice-layout-centered.js +48 -0
  67. package/dist/components/layout/snice-layout-centered.js.map +1 -0
  68. package/dist/components/layout/snice-layout-dashboard.d.ts +4 -0
  69. package/dist/components/layout/snice-layout-dashboard.js +64 -0
  70. package/dist/components/layout/snice-layout-dashboard.js.map +1 -0
  71. package/dist/components/layout/snice-layout-fullscreen.d.ts +5 -0
  72. package/dist/components/layout/snice-layout-fullscreen.js +60 -0
  73. package/dist/components/layout/snice-layout-fullscreen.js.map +1 -0
  74. package/dist/components/layout/snice-layout-landing.d.ts +4 -0
  75. package/dist/components/layout/snice-layout-landing.js +66 -0
  76. package/dist/components/layout/snice-layout-landing.js.map +1 -0
  77. package/dist/components/layout/snice-layout-minimal.d.ts +4 -0
  78. package/dist/components/layout/snice-layout-minimal.js +38 -0
  79. package/dist/components/layout/snice-layout-minimal.js.map +1 -0
  80. package/dist/components/layout/snice-layout-sidebar.d.ts +5 -0
  81. package/dist/components/layout/snice-layout-sidebar.js +74 -0
  82. package/dist/components/layout/snice-layout-sidebar.js.map +1 -0
  83. package/dist/components/layout/snice-layout-split.d.ts +6 -0
  84. package/dist/components/layout/snice-layout-split.js +58 -0
  85. package/dist/components/layout/snice-layout-split.js.map +1 -0
  86. package/dist/components/layout/snice-layout.d.ts +4 -0
  87. package/dist/components/layout/snice-layout.js +54 -0
  88. package/dist/components/layout/snice-layout.js.map +1 -0
  89. package/{components/layout/snice-layout.types.ts → dist/components/layout/snice-layout.types.d.ts} +1 -3
  90. package/dist/components/login/snice-login.d.ts +44 -0
  91. package/dist/components/login/snice-login.js +382 -0
  92. package/dist/components/login/snice-login.js.map +1 -0
  93. package/dist/components/login/snice-login.types.d.ts +26 -0
  94. package/dist/components/modal/snice-modal.d.ts +32 -0
  95. package/dist/components/modal/snice-modal.js +280 -0
  96. package/dist/components/modal/snice-modal.js.map +1 -0
  97. package/dist/components/modal/snice-modal.types.d.ts +18 -0
  98. package/dist/components/pagination/snice-pagination.d.ts +26 -0
  99. package/dist/components/pagination/snice-pagination.js +373 -0
  100. package/dist/components/pagination/snice-pagination.js.map +1 -0
  101. package/dist/components/pagination/snice-pagination.types.d.ts +18 -0
  102. package/dist/components/progress/snice-progress.d.ts +35 -0
  103. package/dist/components/progress/snice-progress.js +305 -0
  104. package/dist/components/progress/snice-progress.js.map +1 -0
  105. package/dist/components/progress/snice-progress.types.d.ts +18 -0
  106. package/dist/components/radio/snice-radio.d.ts +33 -0
  107. package/dist/components/radio/snice-radio.js +279 -0
  108. package/dist/components/radio/snice-radio.js.map +1 -0
  109. package/dist/components/radio/snice-radio.types.d.ts +19 -0
  110. package/dist/components/select/snice-option.d.ts +17 -0
  111. package/dist/components/select/snice-option.js +88 -0
  112. package/dist/components/select/snice-option.js.map +1 -0
  113. package/{components/select/snice-option.types.ts → dist/components/select/snice-option.types.d.ts} +8 -8
  114. package/dist/components/select/snice-select.d.ts +89 -0
  115. package/dist/components/select/snice-select.js +864 -0
  116. package/dist/components/select/snice-select.js.map +1 -0
  117. package/dist/components/select/snice-select.types.d.ts +49 -0
  118. package/dist/components/skeleton/snice-skeleton.d.ts +16 -0
  119. package/dist/components/skeleton/snice-skeleton.js +166 -0
  120. package/dist/components/skeleton/snice-skeleton.js.map +1 -0
  121. package/{components/skeleton/snice-skeleton.types.ts → dist/components/skeleton/snice-skeleton.types.d.ts} +7 -8
  122. package/dist/components/snice-cell-C8aBfN72.js +4 -0
  123. package/dist/components/snice-cell-C8aBfN72.js.map +1 -0
  124. package/dist/components/switch/snice-switch.d.ts +38 -0
  125. package/dist/components/switch/snice-switch.js +305 -0
  126. package/dist/components/switch/snice-switch.js.map +1 -0
  127. package/dist/components/switch/snice-switch.types.d.ts +21 -0
  128. package/dist/components/symbols.d.ts +1 -0
  129. package/dist/components/symbols.js +22 -0
  130. package/dist/components/symbols.js.map +1 -0
  131. package/dist/components/table/snice-cell-boolean.d.ts +21 -0
  132. package/dist/components/table/snice-cell-boolean.js +164 -0
  133. package/dist/components/table/snice-cell-boolean.js.map +1 -0
  134. package/dist/components/table/snice-cell-date.d.ts +24 -0
  135. package/dist/components/table/snice-cell-date.js +253 -0
  136. package/dist/components/table/snice-cell-date.js.map +1 -0
  137. package/dist/components/table/snice-cell-duration.d.ts +16 -0
  138. package/dist/components/table/snice-cell-duration.js +130 -0
  139. package/dist/components/table/snice-cell-duration.js.map +1 -0
  140. package/dist/components/table/snice-cell-filesize.d.ts +16 -0
  141. package/dist/components/table/snice-cell-filesize.js +126 -0
  142. package/dist/components/table/snice-cell-filesize.js.map +1 -0
  143. package/dist/components/table/snice-cell-number.d.ts +23 -0
  144. package/dist/components/table/snice-cell-number.js +215 -0
  145. package/dist/components/table/snice-cell-number.js.map +1 -0
  146. package/dist/components/table/snice-cell-progress.d.ts +17 -0
  147. package/dist/components/table/snice-cell-progress.js +121 -0
  148. package/dist/components/table/snice-cell-progress.js.map +1 -0
  149. package/dist/components/table/snice-cell-rating.d.ts +17 -0
  150. package/dist/components/table/snice-cell-rating.js +120 -0
  151. package/dist/components/table/snice-cell-rating.js.map +1 -0
  152. package/dist/components/table/snice-cell-sparkline.d.ts +29 -0
  153. package/dist/components/table/snice-cell-sparkline.js +306 -0
  154. package/dist/components/table/snice-cell-sparkline.js.map +1 -0
  155. package/dist/components/table/snice-cell-text.d.ts +19 -0
  156. package/dist/components/table/snice-cell-text.js +161 -0
  157. package/dist/components/table/snice-cell-text.js.map +1 -0
  158. package/dist/components/table/snice-cell.d.ts +32 -0
  159. package/dist/components/table/snice-cell.js +458 -0
  160. package/dist/components/table/snice-cell.js.map +1 -0
  161. package/dist/components/table/snice-column.d.ts +62 -0
  162. package/dist/components/table/snice-column.js +506 -0
  163. package/dist/components/table/snice-column.js.map +1 -0
  164. package/dist/components/table/snice-header.d.ts +33 -0
  165. package/dist/components/table/snice-header.js +289 -0
  166. package/dist/components/table/snice-header.js.map +1 -0
  167. package/dist/components/table/snice-progress.d.ts +10 -0
  168. package/dist/components/table/snice-progress.js +105 -0
  169. package/dist/components/table/snice-progress.js.map +1 -0
  170. package/dist/components/table/snice-rating.d.ts +9 -0
  171. package/dist/components/table/snice-rating.js +81 -0
  172. package/dist/components/table/snice-rating.js.map +1 -0
  173. package/dist/components/table/snice-row.d.ts +43 -0
  174. package/dist/components/table/snice-row.js +353 -0
  175. package/dist/components/table/snice-row.js.map +1 -0
  176. package/dist/components/table/snice-table.d.ts +69 -0
  177. package/dist/components/table/snice-table.js +792 -0
  178. package/dist/components/table/snice-table.js.map +1 -0
  179. package/dist/components/table/snice-table.types.d.ts +137 -0
  180. package/dist/components/tabs/snice-tab-panel.d.ts +12 -0
  181. package/dist/components/tabs/snice-tab-panel.js +87 -0
  182. package/dist/components/tabs/snice-tab-panel.js.map +1 -0
  183. package/dist/components/tabs/snice-tab.d.ts +13 -0
  184. package/dist/components/tabs/snice-tab.js +98 -0
  185. package/dist/components/tabs/snice-tab.js.map +1 -0
  186. package/dist/components/tabs/snice-tabs.d.ts +34 -0
  187. package/dist/components/tabs/snice-tabs.js +375 -0
  188. package/dist/components/tabs/snice-tabs.js.map +1 -0
  189. package/dist/components/tabs/snice-tabs.types.d.ts +23 -0
  190. package/dist/components/toast/snice-toast-container.d.ts +25 -0
  191. package/dist/components/toast/snice-toast-container.js +252 -0
  192. package/dist/components/toast/snice-toast-container.js.map +1 -0
  193. package/dist/components/toast/snice-toast.d.ts +23 -0
  194. package/dist/components/toast/snice-toast.js +321 -0
  195. package/dist/components/toast/snice-toast.js.map +1 -0
  196. package/dist/components/toast/snice-toast.types.d.ts +30 -0
  197. package/dist/components/tooltip/snice-tooltip.d.ts +50 -0
  198. package/dist/components/tooltip/snice-tooltip.js +644 -0
  199. package/dist/components/tooltip/snice-tooltip.js.map +1 -0
  200. package/dist/components/tooltip/snice-tooltip.types.d.ts +18 -0
  201. package/dist/components/transitions.d.ts +11 -0
  202. package/dist/components/transitions.js +72 -0
  203. package/dist/components/transitions.js.map +1 -0
  204. package/dist/index.cjs +16 -20
  205. package/dist/index.cjs.map +1 -1
  206. package/dist/index.cjs.min.map +1 -1
  207. package/dist/index.esm.js +16 -20
  208. package/dist/index.esm.js.map +1 -1
  209. package/dist/index.esm.min.js +3 -3
  210. package/dist/index.esm.min.js.map +1 -1
  211. package/dist/index.iife.js +16 -20
  212. package/dist/index.iife.js.map +1 -1
  213. package/dist/index.iife.min.js +3 -3
  214. package/dist/index.iife.min.js.map +1 -1
  215. package/dist/symbols.esm.js +1 -1
  216. package/dist/transitions.esm.js +1 -1
  217. package/package.json +10 -6
  218. package/components/accordion/demo.html +0 -403
  219. package/components/accordion/snice-accordion-item.css +0 -85
  220. package/components/accordion/snice-accordion-item.ts +0 -226
  221. package/components/accordion/snice-accordion.css +0 -31
  222. package/components/accordion/snice-accordion.ts +0 -182
  223. package/components/accordion/snice-accordion.types.ts +0 -32
  224. package/components/alert/demo.html +0 -445
  225. package/components/alert/snice-alert.css +0 -195
  226. package/components/alert/snice-alert.ts +0 -141
  227. package/components/avatar/demo.html +0 -598
  228. package/components/avatar/snice-avatar.css +0 -131
  229. package/components/avatar/snice-avatar.ts +0 -136
  230. package/components/avatar/snice-avatar.types.ts +0 -13
  231. package/components/badge/demo.html +0 -523
  232. package/components/badge/snice-badge.css +0 -161
  233. package/components/badge/snice-badge.ts +0 -117
  234. package/components/breadcrumbs/demo.html +0 -404
  235. package/components/breadcrumbs/snice-breadcrumbs.css +0 -133
  236. package/components/breadcrumbs/snice-breadcrumbs.ts +0 -191
  237. package/components/breadcrumbs/snice-breadcrumbs.types.ts +0 -26
  238. package/components/breadcrumbs/snice-crumb.ts +0 -26
  239. package/components/button/demo.html +0 -42
  240. package/components/button/snice-button.css +0 -230
  241. package/components/button/snice-button.ts +0 -169
  242. package/components/button/snice-button.types.ts +0 -25
  243. package/components/card/demo.html +0 -525
  244. package/components/card/snice-card.css +0 -140
  245. package/components/card/snice-card.ts +0 -102
  246. package/components/checkbox/demo.html +0 -253
  247. package/components/checkbox/snice-checkbox.css +0 -164
  248. package/components/checkbox/snice-checkbox.ts +0 -223
  249. package/components/checkbox/snice-checkbox.types.ts +0 -22
  250. package/components/chip/demo.html +0 -383
  251. package/components/chip/snice-chip.css +0 -195
  252. package/components/chip/snice-chip.ts +0 -139
  253. package/components/chip/snice-chip.types.ts +0 -15
  254. package/components/date-picker/README.md +0 -233
  255. package/components/date-picker/demo.html +0 -191
  256. package/components/date-picker/snice-date-picker.css +0 -330
  257. package/components/date-picker/snice-date-picker.ts +0 -777
  258. package/components/date-picker/snice-date-picker.types.ts +0 -83
  259. package/components/divider/demo.html +0 -233
  260. package/components/divider/snice-divider.css +0 -155
  261. package/components/divider/snice-divider.ts +0 -69
  262. package/components/drawer/demo.html +0 -328
  263. package/components/drawer/snice-drawer.css +0 -476
  264. package/components/drawer/snice-drawer.ts +0 -287
  265. package/components/drawer/snice-drawer.types.ts +0 -17
  266. package/components/global.d.ts +0 -14
  267. package/components/input/demo.html +0 -303
  268. package/components/input/snice-input.css +0 -257
  269. package/components/input/snice-input.ts +0 -442
  270. package/components/input/snice-input.types.ts +0 -59
  271. package/components/input/test.html +0 -77
  272. package/components/layout/README.md +0 -260
  273. package/components/layout/demo.html +0 -538
  274. package/components/layout/snice-layout-blog.css +0 -129
  275. package/components/layout/snice-layout-blog.ts +0 -48
  276. package/components/layout/snice-layout-card.css +0 -104
  277. package/components/layout/snice-layout-card.ts +0 -35
  278. package/components/layout/snice-layout-centered.css +0 -51
  279. package/components/layout/snice-layout-centered.ts +0 -22
  280. package/components/layout/snice-layout-dashboard.css +0 -98
  281. package/components/layout/snice-layout-dashboard.ts +0 -45
  282. package/components/layout/snice-layout-fullscreen.css +0 -72
  283. package/components/layout/snice-layout-fullscreen.ts +0 -34
  284. package/components/layout/snice-layout-landing.css +0 -92
  285. package/components/layout/snice-layout-landing.ts +0 -47
  286. package/components/layout/snice-layout-minimal.css +0 -16
  287. package/components/layout/snice-layout-minimal.ts +0 -19
  288. package/components/layout/snice-layout-sidebar.css +0 -117
  289. package/components/layout/snice-layout-sidebar.ts +0 -48
  290. package/components/layout/snice-layout-split.css +0 -103
  291. package/components/layout/snice-layout-split.ts +0 -29
  292. package/components/layout/snice-layout.css +0 -72
  293. package/components/layout/snice-layout.ts +0 -35
  294. package/components/login/demo-auth-controller.ts +0 -185
  295. package/components/login/demo.html +0 -470
  296. package/components/login/snice-login.css +0 -204
  297. package/components/login/snice-login.ts +0 -326
  298. package/components/login/snice-login.types.ts +0 -29
  299. package/components/modal/demo.html +0 -291
  300. package/components/modal/snice-modal.css +0 -203
  301. package/components/modal/snice-modal.ts +0 -233
  302. package/components/modal/snice-modal.types.ts +0 -21
  303. package/components/pagination/demo.html +0 -395
  304. package/components/pagination/snice-pagination.ts +0 -333
  305. package/components/pagination/snice-pagination.types.ts +0 -21
  306. package/components/progress/demo.html +0 -510
  307. package/components/progress/snice-progress.css +0 -267
  308. package/components/progress/snice-progress.ts +0 -247
  309. package/components/progress/snice-progress.types.ts +0 -19
  310. package/components/radio/demo.html +0 -287
  311. package/components/radio/snice-radio.css +0 -171
  312. package/components/radio/snice-radio.ts +0 -218
  313. package/components/radio/snice-radio.types.ts +0 -21
  314. package/components/select/demo.html +0 -511
  315. package/components/select/snice-option.ts +0 -52
  316. package/components/select/snice-select.css +0 -392
  317. package/components/select/snice-select.ts +0 -796
  318. package/components/select/snice-select.types.ts +0 -55
  319. package/components/skeleton/demo.html +0 -514
  320. package/components/skeleton/snice-skeleton.css +0 -109
  321. package/components/skeleton/snice-skeleton.ts +0 -126
  322. package/components/switch/demo.html +0 -284
  323. package/components/switch/snice-switch.css +0 -221
  324. package/components/switch/snice-switch.ts +0 -229
  325. package/components/switch/snice-switch.types.ts +0 -23
  326. package/components/symbols.ts +0 -23
  327. package/components/table/demo-table-controller.ts +0 -100
  328. package/components/table/demo.html +0 -480
  329. package/components/table/snice-cell-boolean.ts +0 -112
  330. package/components/table/snice-cell-date.ts +0 -210
  331. package/components/table/snice-cell-duration.ts +0 -91
  332. package/components/table/snice-cell-filesize.ts +0 -90
  333. package/components/table/snice-cell-number.ts +0 -165
  334. package/components/table/snice-cell-progress.ts +0 -83
  335. package/components/table/snice-cell-rating.ts +0 -82
  336. package/components/table/snice-cell-sparkline.ts +0 -253
  337. package/components/table/snice-cell-text.ts +0 -125
  338. package/components/table/snice-cell.css +0 -296
  339. package/components/table/snice-cell.ts +0 -473
  340. package/components/table/snice-column.ts +0 -353
  341. package/components/table/snice-header.css +0 -243
  342. package/components/table/snice-header.ts +0 -261
  343. package/components/table/snice-progress.ts +0 -66
  344. package/components/table/snice-rating.ts +0 -45
  345. package/components/table/snice-row.css +0 -255
  346. package/components/table/snice-row.ts +0 -331
  347. package/components/table/snice-table.css +0 -241
  348. package/components/table/snice-table.ts +0 -737
  349. package/components/table/snice-table.types.ts +0 -158
  350. package/components/tabs/demo.html +0 -487
  351. package/components/tabs/snice-tab-panel.css +0 -264
  352. package/components/tabs/snice-tab-panel.ts +0 -47
  353. package/components/tabs/snice-tab.css +0 -96
  354. package/components/tabs/snice-tab.ts +0 -65
  355. package/components/tabs/snice-tabs.css +0 -189
  356. package/components/tabs/snice-tabs.ts +0 -332
  357. package/components/tabs/snice-tabs.types.ts +0 -28
  358. package/components/theme/theme.css +0 -234
  359. package/components/toast/demo.html +0 -329
  360. package/components/toast/snice-toast-container.ts +0 -256
  361. package/components/toast/snice-toast.css +0 -213
  362. package/components/toast/snice-toast.ts +0 -276
  363. package/components/toast/snice-toast.types.ts +0 -35
  364. package/components/tooltip/demo.html +0 -350
  365. package/components/tooltip/snice-tooltip-portal.css +0 -79
  366. package/components/tooltip/snice-tooltip.css +0 -117
  367. package/components/tooltip/snice-tooltip.ts +0 -612
  368. package/components/tooltip/snice-tooltip.types.ts +0 -32
  369. package/components/transitions.ts +0 -94
  370. package/components/tsconfig.json +0 -18
package/components/table/snice-table.types.ts DELETED
@@ -1,158 +0,0 @@
1
- export type TableSize = 'small' | 'medium' | 'large';
2
- export type TableVariant = 'default' | 'striped' | 'bordered';
3
- export type ColumnAlign = 'left' | 'center' | 'right';
4
- export type ColumnType = 'text' | 'number' | 'date' | 'boolean' | 'currency' | 'percent' |
5
- 'rating' | 'progress' | 'sparkline' | 'accounting' | 'scientific' | 'fraction' |
6
- 'duration' | 'filesize' | 'custom';
7
- export type SortDirection = 'asc' | 'desc' | null;
8
-
9
- export interface NumberFormat {
10
- decimals?: number;
11
- thousandsSeparator?: boolean;
12
- prefix?: string;
13
- suffix?: string;
14
- negativeStyle?: 'parentheses' | 'red' | 'minus';
15
- }
16
-
17
- export interface DateFormat {
18
- format?: 'short' | 'medium' | 'long' | 'full' | 'custom';
19
- customFormat?: string;
20
- locale?: string;
21
- }
22
-
23
- export interface CellStyle {
24
- backgroundColor?: string;
25
- color?: string;
26
- fontWeight?: 'normal' | 'bold' | 'lighter';
27
- fontStyle?: 'normal' | 'italic';
28
- fontSize?: string;
29
- textDecoration?: 'none' | 'underline' | 'line-through';
30
- }
31
-
32
- export interface ConditionalFormat {
33
- condition: (value: any, row?: any) => boolean;
34
- style?: CellStyle;
35
- className?: string;
36
- }
37
-
38
- export interface BooleanFormat {
39
- trueValue?: string;
40
- falseValue?: string;
41
- useSymbols?: boolean;
42
- trueSymbol?: string;
43
- falseSymbol?: string;
44
- }
45
-
46
- export interface RatingFormat {
47
- max?: number;
48
- symbol?: string;
49
- emptySymbol?: string;
50
- color?: string;
51
- }
52
-
53
- export interface ProgressFormat {
54
- max?: number;
55
- showPercentage?: boolean;
56
- color?: string;
57
- backgroundColor?: string;
58
- height?: string;
59
- }
60
-
61
- export interface SparklineFormat {
62
- type?: 'line' | 'bar' | 'area';
63
- color?: string;
64
- width?: number;
65
- height?: number;
66
- }
67
-
68
- export interface ColumnDefinition {
69
- key: string;
70
- label: string;
71
- type?: ColumnType;
72
- align?: ColumnAlign;
73
- width?: string;
74
- sortable?: boolean;
75
- filterable?: boolean;
76
- formatter?: (value: any, row?: any) => string;
77
-
78
- // Excel-like formatting
79
- numberFormat?: NumberFormat;
80
- dateFormat?: DateFormat;
81
- booleanFormat?: BooleanFormat;
82
- ratingFormat?: RatingFormat;
83
- progressFormat?: ProgressFormat;
84
- sparklineFormat?: SparklineFormat;
85
- style?: CellStyle;
86
- conditionalFormats?: ConditionalFormat[];
87
-
88
- // Display options
89
- wrap?: boolean;
90
- ellipsis?: boolean;
91
- tooltip?: boolean | ((value: any, row?: any) => string);
92
- }
93
-
94
- export interface TableSort {
95
- column: string;
96
- direction: SortDirection;
97
- }
98
-
99
- export interface SniceTableElement extends HTMLElement {
100
- size: TableSize;
101
- variant: TableVariant;
102
- striped: boolean;
103
- hoverable: boolean;
104
- bordered: boolean;
105
- stickyHeader: boolean;
106
- sortable: boolean;
107
- selectable: boolean;
108
- clickable: boolean;
109
- loading: boolean;
110
- data: any[];
111
- columns: ColumnDefinition[];
112
- showSearch: boolean;
113
- showPagination: boolean;
114
- pageSize: number;
115
- currentPage: number;
116
- totalItems: number;
117
- setData(data: any[]): void;
118
- sort(column: string): void;
119
- getSelectedRows(): any[];
120
- search(query: string): void;
121
- goToPage(page: number): void;
122
- }
123
-
124
- export interface SniceHeaderElement extends HTMLElement {
125
- sticky: boolean;
126
- columns: ColumnDefinition[];
127
- selectable: boolean;
128
- sortable: boolean;
129
- currentSort: TableSort;
130
- }
131
-
132
- export interface SniceColumnElement extends HTMLElement {
133
- key: string;
134
- label: string;
135
- type: ColumnType;
136
- align: ColumnAlign;
137
- width: string;
138
- sortable: boolean;
139
- filterable: boolean;
140
- }
141
-
142
- export interface SniceRowElement extends HTMLElement {
143
- selected: boolean;
144
- hoverable: boolean;
145
- clickable: boolean;
146
- data: any;
147
- index: number;
148
- columns: ColumnDefinition[];
149
- selectable: boolean;
150
- updateCells(): void;
151
- }
152
-
153
- export interface SniceCellElement extends HTMLElement {
154
- align: ColumnAlign;
155
- type: ColumnType;
156
- value: any;
157
- column: ColumnDefinition;
158
- }
package/components/tabs/demo.html DELETED
@@ -1,487 +0,0 @@
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>Tabs Demo</title>
7
- <link rel="stylesheet" href="../theme/theme.css">
8
- <style>
9
- body {
10
- padding: 40px;
11
- font-family: var(--snice-font-family);
12
- background: var(--snice-color-background);
13
- color: var(--snice-color-text);
14
- }
15
-
16
- .section {
17
- margin-bottom: 60px;
18
- }
19
-
20
- h2 {
21
- color: var(--snice-color-text);
22
- margin-bottom: 20px;
23
- font-size: var(--snice-font-size-2xl);
24
- }
25
-
26
- h3 {
27
- color: var(--snice-color-text-secondary);
28
- margin-bottom: 16px;
29
- font-size: var(--snice-font-size-lg);
30
- }
31
-
32
- .demo-content {
33
- padding: var(--snice-spacing-md);
34
- }
35
-
36
- .demo-content h4 {
37
- margin-top: 0;
38
- color: var(--snice-color-text);
39
- }
40
-
41
- .demo-content p {
42
- color: var(--snice-color-text-secondary);
43
- line-height: var(--snice-line-height-normal);
44
- }
45
-
46
- .icon {
47
- width: 16px;
48
- height: 16px;
49
- margin-right: 4px;
50
- }
51
-
52
- .controls {
53
- margin-bottom: 20px;
54
- display: flex;
55
- gap: 10px;
56
- align-items: center;
57
- }
58
-
59
- button {
60
- padding: 8px 16px;
61
- background: var(--snice-color-primary);
62
- color: var(--snice-color-text-inverse);
63
- border: none;
64
- border-radius: var(--snice-border-radius-md);
65
- font-family: var(--snice-font-family);
66
- font-size: var(--snice-font-size-md);
67
- cursor: pointer;
68
- transition: background-color var(--snice-transition-fast) ease;
69
- }
70
-
71
- button:hover {
72
- background: var(--snice-color-primary-hover);
73
- }
74
-
75
- select {
76
- padding: 8px;
77
- font-family: var(--snice-font-family);
78
- font-size: var(--snice-font-size-md);
79
- border: 1px solid var(--snice-color-border);
80
- border-radius: var(--snice-border-radius-md);
81
- background: var(--snice-color-background);
82
- color: var(--snice-color-text);
83
- }
84
- </style>
85
- </head>
86
- <body>
87
- <h2>Tabs Component Demo</h2>
88
-
89
- <div class="section">
90
- <h3>Basic Tabs (with Fade Transition)</h3>
91
- <snice-tabs transition="fade">
92
- <snice-tab slot="nav">General</snice-tab>
93
- <snice-tab slot="nav">Account</snice-tab>
94
- <snice-tab slot="nav">Security</snice-tab>
95
- <snice-tab slot="nav">Notifications</snice-tab>
96
-
97
- <snice-tab-panel name="general">
98
- <div class="demo-content">
99
- <h4>General Settings</h4>
100
- <p>Configure your general application preferences and display options.</p>
101
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
102
- </div>
103
- </snice-tab-panel>
104
-
105
- <snice-tab-panel name="account">
106
- <div class="demo-content">
107
- <h4>Account Settings</h4>
108
- <p>Manage your account information, profile details, and preferences.</p>
109
- <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
110
- </div>
111
- </snice-tab-panel>
112
-
113
- <snice-tab-panel name="security">
114
- <div class="demo-content">
115
- <h4>Security Settings</h4>
116
- <p>Configure security options, two-factor authentication, and access controls.</p>
117
- <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
118
- </div>
119
- </snice-tab-panel>
120
-
121
- <snice-tab-panel name="notifications">
122
- <div class="demo-content">
123
- <h4>Notification Settings</h4>
124
- <p>Manage your notification preferences and alert configurations.</p>
125
- <p>Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
126
- </div>
127
- </snice-tab-panel>
128
- </snice-tabs>
129
- </div>
130
-
131
- <div class="section">
132
- <h3>Tabs with Icons (Scale Transition)</h3>
133
- <snice-tabs transition="scale">
134
- <snice-tab slot="nav">
135
- <svg class="icon" viewBox="0 0 24 24" fill="currentColor">
136
- <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
137
- </svg>
138
- Home
139
- </snice-tab>
140
- <snice-tab slot="nav">
141
- <svg class="icon" viewBox="0 0 24 24" fill="currentColor">
142
- <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
143
- </svg>
144
- Profile
145
- </snice-tab>
146
- <snice-tab slot="nav">
147
- <svg class="icon" viewBox="0 0 24 24" fill="currentColor">
148
- <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
149
- </svg>
150
- Favorites
151
- </snice-tab>
152
- <snice-tab slot="nav">
153
- <svg class="icon" viewBox="0 0 24 24" fill="currentColor">
154
- <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1.41 16.09V20h-2.67v-1.93c-1.71-.36-3.16-1.46-3.27-3.4h1.96c.1.81.45 1.61 1.67 1.61 1.16 0 1.6-.64 1.6-1.46 0-.84-.68-1.22-1.88-1.54-2.29-.61-3.05-1.86-3.05-3.27 0-1.28.89-2.56 2.81-2.93V4.5h2.67v2.52c1.33.31 2.6 1.16 2.76 2.86h-1.96c-.09-.52-.39-1.34-1.47-1.34-1.09 0-1.5.71-1.5 1.34 0 .71.52 1.09 2.05 1.52 2.18.58 2.88 1.7 2.88 3.27-.01 1.71-1.37 2.85-3.19 3.42z"/>
155
- </svg>
156
- Settings
157
- </snice-tab>
158
-
159
- <snice-tab-panel>
160
- <div class="demo-content">
161
- <h4>Home</h4>
162
- <p>Welcome to your dashboard. Here you can see an overview of your recent activity.</p>
163
- </div>
164
- </snice-tab-panel>
165
-
166
- <snice-tab-panel>
167
- <div class="demo-content">
168
- <h4>Profile</h4>
169
- <p>View and edit your profile information.</p>
170
- </div>
171
- </snice-tab-panel>
172
-
173
- <snice-tab-panel>
174
- <div class="demo-content">
175
- <h4>Favorites</h4>
176
- <p>Your saved items and bookmarks appear here.</p>
177
- </div>
178
- </snice-tab-panel>
179
-
180
- <snice-tab-panel>
181
- <div class="demo-content">
182
- <h4>Settings</h4>
183
- <p>Configure your application preferences.</p>
184
- </div>
185
- </snice-tab-panel>
186
- </snice-tabs>
187
- </div>
188
-
189
- <div class="section">
190
- <h3>Closable Tabs</h3>
191
- <snice-tabs id="closable-tabs">
192
- <snice-tab slot="nav" closable>Document 1</snice-tab>
193
- <snice-tab slot="nav" closable>Document 2</snice-tab>
194
- <snice-tab slot="nav" closable>Document 3</snice-tab>
195
- <snice-tab slot="nav">Settings (Not Closable)</snice-tab>
196
-
197
- <snice-tab-panel>
198
- <div class="demo-content">
199
- <h4>Document 1</h4>
200
- <p>This tab can be closed using the X button.</p>
201
- </div>
202
- </snice-tab-panel>
203
-
204
- <snice-tab-panel>
205
- <div class="demo-content">
206
- <h4>Document 2</h4>
207
- <p>This tab can also be closed.</p>
208
- </div>
209
- </snice-tab-panel>
210
-
211
- <snice-tab-panel>
212
- <div class="demo-content">
213
- <h4>Document 3</h4>
214
- <p>Another closable tab.</p>
215
- </div>
216
- </snice-tab-panel>
217
-
218
- <snice-tab-panel>
219
- <div class="demo-content">
220
- <h4>Settings</h4>
221
- <p>This tab cannot be closed.</p>
222
- </div>
223
- </snice-tab-panel>
224
- </snice-tabs>
225
- </div>
226
-
227
- <div class="section">
228
- <h3>Disabled Tabs</h3>
229
- <snice-tabs>
230
- <snice-tab slot="nav">Active Tab</snice-tab>
231
- <snice-tab slot="nav" disabled>Disabled Tab</snice-tab>
232
- <snice-tab slot="nav">Another Active Tab</snice-tab>
233
-
234
- <snice-tab-panel>
235
- <div class="demo-content">
236
- <h4>Active Content</h4>
237
- <p>This tab is active and clickable.</p>
238
- </div>
239
- </snice-tab-panel>
240
-
241
- <snice-tab-panel>
242
- <div class="demo-content">
243
- <h4>Disabled Content</h4>
244
- <p>You shouldn't be able to see this content.</p>
245
- </div>
246
- </snice-tab-panel>
247
-
248
- <snice-tab-panel>
249
- <div class="demo-content">
250
- <h4>Another Active Content</h4>
251
- <p>This tab is also active and clickable.</p>
252
- </div>
253
- </snice-tab-panel>
254
- </snice-tabs>
255
- </div>
256
-
257
- <div class="section">
258
- <h3>Tab Placement</h3>
259
-
260
- <div class="controls">
261
- <label>Placement:</label>
262
- <select id="placement-select">
263
- <option value="top">Top</option>
264
- <option value="bottom">Bottom</option>
265
- <option value="start">Start (Left)</option>
266
- <option value="end">End (Right)</option>
267
- </select>
268
- </div>
269
-
270
- <snice-tabs id="placement-tabs" placement="top">
271
- <snice-tab slot="nav">First</snice-tab>
272
- <snice-tab slot="nav">Second</snice-tab>
273
- <snice-tab slot="nav">Third</snice-tab>
274
-
275
- <snice-tab-panel>
276
- <div class="demo-content">
277
- <h4>First Panel</h4>
278
- <p>Tab placement can be changed dynamically.</p>
279
- </div>
280
- </snice-tab-panel>
281
-
282
- <snice-tab-panel>
283
- <div class="demo-content">
284
- <h4>Second Panel</h4>
285
- <p>Try changing the placement using the dropdown above.</p>
286
- </div>
287
- </snice-tab-panel>
288
-
289
- <snice-tab-panel>
290
- <div class="demo-content">
291
- <h4>Third Panel</h4>
292
- <p>Tabs can be positioned at top, bottom, left (start), or right (end).</p>
293
- </div>
294
- </snice-tab-panel>
295
- </snice-tabs>
296
- </div>
297
-
298
- <div class="section">
299
- <h3>Many Tabs with Scroll</h3>
300
- <snice-tabs>
301
- <snice-tab slot="nav">Tab 1</snice-tab>
302
- <snice-tab slot="nav">Tab 2</snice-tab>
303
- <snice-tab slot="nav">Tab 3</snice-tab>
304
- <snice-tab slot="nav">Tab 4</snice-tab>
305
- <snice-tab slot="nav">Tab 5</snice-tab>
306
- <snice-tab slot="nav">Tab 6</snice-tab>
307
- <snice-tab slot="nav">Tab 7</snice-tab>
308
- <snice-tab slot="nav">Tab 8</snice-tab>
309
- <snice-tab slot="nav">Tab 9</snice-tab>
310
- <snice-tab slot="nav">Tab 10</snice-tab>
311
- <snice-tab slot="nav">Tab 11</snice-tab>
312
- <snice-tab slot="nav">Tab 12</snice-tab>
313
- <snice-tab slot="nav">Tab 13</snice-tab>
314
- <snice-tab slot="nav">Tab 14</snice-tab>
315
- <snice-tab slot="nav">Tab 15</snice-tab>
316
-
317
- <snice-tab-panel>
318
- <div class="demo-content">
319
- <h4>Content 1</h4>
320
- <p>When there are many tabs, scroll buttons appear to navigate.</p>
321
- </div>
322
- </snice-tab-panel>
323
-
324
- <snice-tab-panel>
325
- <div class="demo-content">
326
- <h4>Content 2</h4>
327
- </div>
328
- </snice-tab-panel>
329
-
330
- <snice-tab-panel>
331
- <div class="demo-content">
332
- <h4>Content 3</h4>
333
- </div>
334
- </snice-tab-panel>
335
-
336
- <snice-tab-panel>
337
- <div class="demo-content">
338
- <h4>Content 4</h4>
339
- </div>
340
- </snice-tab-panel>
341
-
342
- <snice-tab-panel>
343
- <div class="demo-content">
344
- <h4>Content 5</h4>
345
- </div>
346
- </snice-tab-panel>
347
-
348
- <snice-tab-panel>
349
- <div class="demo-content">
350
- <h4>Content 6</h4>
351
- </div>
352
- </snice-tab-panel>
353
-
354
- <snice-tab-panel>
355
- <div class="demo-content">
356
- <h4>Content 7</h4>
357
- </div>
358
- </snice-tab-panel>
359
-
360
- <snice-tab-panel>
361
- <div class="demo-content">
362
- <h4>Content 8</h4>
363
- </div>
364
- </snice-tab-panel>
365
-
366
- <snice-tab-panel>
367
- <div class="demo-content">
368
- <h4>Content 9</h4>
369
- </div>
370
- </snice-tab-panel>
371
-
372
- <snice-tab-panel>
373
- <div class="demo-content">
374
- <h4>Content 10</h4>
375
- </div>
376
- </snice-tab-panel>
377
-
378
- <snice-tab-panel>
379
- <div class="demo-content">
380
- <h4>Content 11</h4>
381
- </div>
382
- </snice-tab-panel>
383
-
384
- <snice-tab-panel>
385
- <div class="demo-content">
386
- <h4>Content 12</h4>
387
- </div>
388
- </snice-tab-panel>
389
-
390
- <snice-tab-panel>
391
- <div class="demo-content">
392
- <h4>Content 13</h4>
393
- </div>
394
- </snice-tab-panel>
395
-
396
- <snice-tab-panel>
397
- <div class="demo-content">
398
- <h4>Content 14</h4>
399
- </div>
400
- </snice-tab-panel>
401
-
402
- <snice-tab-panel>
403
- <div class="demo-content">
404
- <h4>Content 15</h4>
405
- </div>
406
- </snice-tab-panel>
407
- </snice-tabs>
408
- </div>
409
-
410
- <div class="section">
411
- <h3>Programmatic Control (Slide Transition)</h3>
412
-
413
- <div class="controls">
414
- <button onclick="selectTab(0)">Select First</button>
415
- <button onclick="selectTab(1)">Select Second</button>
416
- <button onclick="selectTab(2)">Select Third</button>
417
- </div>
418
-
419
- <snice-tabs id="programmatic-tabs" transition="slide">
420
- <snice-tab slot="nav">First</snice-tab>
421
- <snice-tab slot="nav">Second</snice-tab>
422
- <snice-tab slot="nav">Third</snice-tab>
423
-
424
- <snice-tab-panel>
425
- <div class="demo-content">
426
- <h4>First Panel</h4>
427
- <p>Use the buttons above to programmatically select tabs.</p>
428
- </div>
429
- </snice-tab-panel>
430
-
431
- <snice-tab-panel>
432
- <div class="demo-content">
433
- <h4>Second Panel</h4>
434
- <p>Tabs can be controlled via JavaScript.</p>
435
- </div>
436
- </snice-tab-panel>
437
-
438
- <snice-tab-panel>
439
- <div class="demo-content">
440
- <h4>Third Panel</h4>
441
- <p>This enables dynamic tab switching based on application logic.</p>
442
- </div>
443
- </snice-tab-panel>
444
- </snice-tabs>
445
- </div>
446
-
447
- <script type="module">
448
- import './snice-tabs.ts';
449
- import './snice-tab.ts';
450
- import './snice-tab-panel.ts';
451
-
452
- // Placement control
453
- document.getElementById('placement-select').addEventListener('change', (e) => {
454
- const tabs = document.getElementById('placement-tabs');
455
- tabs.placement = e.target.value;
456
- });
457
-
458
- // Programmatic control
459
- window.selectTab = function(index) {
460
- const tabs = document.getElementById('programmatic-tabs');
461
- tabs.show(index);
462
- };
463
-
464
- // Listen for tab changes
465
- document.querySelector('snice-tabs').addEventListener('@snice/tab-change', (e) => {
466
- console.log('Tab changed:', e.detail);
467
- });
468
-
469
- // Handle closable tabs
470
- document.getElementById('closable-tabs').addEventListener('@snice/close', (e) => {
471
- const tab = e.detail.tab;
472
- const tabs = tab.parentElement.parentElement;
473
- const index = Array.from(tabs.querySelectorAll('snice-tab')).indexOf(tab);
474
-
475
- // Remove tab and panel
476
- tab.remove();
477
- const panels = tabs.querySelectorAll('snice-tab-panel');
478
- if (panels[index]) {
479
- panels[index].remove();
480
- }
481
-
482
- // Reset tabs
483
- tabs.setupTabs();
484
- });
485
- </script>
486
- </body>
487
- </html>