snice 2.1.5 → 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 (364) 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 +1 -1
  205. package/dist/index.esm.js +1 -1
  206. package/dist/index.esm.min.js +1 -1
  207. package/dist/index.iife.js +1 -1
  208. package/dist/index.iife.min.js +1 -1
  209. package/dist/symbols.esm.js +1 -1
  210. package/dist/transitions.esm.js +1 -1
  211. package/package.json +10 -6
  212. package/components/accordion/demo.html +0 -403
  213. package/components/accordion/snice-accordion-item.css +0 -85
  214. package/components/accordion/snice-accordion-item.ts +0 -226
  215. package/components/accordion/snice-accordion.css +0 -31
  216. package/components/accordion/snice-accordion.ts +0 -182
  217. package/components/accordion/snice-accordion.types.ts +0 -32
  218. package/components/alert/demo.html +0 -445
  219. package/components/alert/snice-alert.css +0 -195
  220. package/components/alert/snice-alert.ts +0 -141
  221. package/components/avatar/demo.html +0 -598
  222. package/components/avatar/snice-avatar.css +0 -131
  223. package/components/avatar/snice-avatar.ts +0 -136
  224. package/components/avatar/snice-avatar.types.ts +0 -13
  225. package/components/badge/demo.html +0 -523
  226. package/components/badge/snice-badge.css +0 -161
  227. package/components/badge/snice-badge.ts +0 -117
  228. package/components/breadcrumbs/demo.html +0 -404
  229. package/components/breadcrumbs/snice-breadcrumbs.css +0 -133
  230. package/components/breadcrumbs/snice-breadcrumbs.ts +0 -191
  231. package/components/breadcrumbs/snice-breadcrumbs.types.ts +0 -26
  232. package/components/breadcrumbs/snice-crumb.ts +0 -26
  233. package/components/button/demo.html +0 -42
  234. package/components/button/snice-button.css +0 -230
  235. package/components/button/snice-button.ts +0 -169
  236. package/components/button/snice-button.types.ts +0 -25
  237. package/components/card/demo.html +0 -525
  238. package/components/card/snice-card.css +0 -140
  239. package/components/card/snice-card.ts +0 -102
  240. package/components/checkbox/demo.html +0 -253
  241. package/components/checkbox/snice-checkbox.css +0 -164
  242. package/components/checkbox/snice-checkbox.ts +0 -223
  243. package/components/checkbox/snice-checkbox.types.ts +0 -22
  244. package/components/chip/demo.html +0 -383
  245. package/components/chip/snice-chip.css +0 -195
  246. package/components/chip/snice-chip.ts +0 -139
  247. package/components/chip/snice-chip.types.ts +0 -15
  248. package/components/date-picker/README.md +0 -233
  249. package/components/date-picker/demo.html +0 -191
  250. package/components/date-picker/snice-date-picker.css +0 -330
  251. package/components/date-picker/snice-date-picker.ts +0 -777
  252. package/components/date-picker/snice-date-picker.types.ts +0 -83
  253. package/components/divider/demo.html +0 -233
  254. package/components/divider/snice-divider.css +0 -155
  255. package/components/divider/snice-divider.ts +0 -69
  256. package/components/drawer/demo.html +0 -328
  257. package/components/drawer/snice-drawer.css +0 -476
  258. package/components/drawer/snice-drawer.ts +0 -287
  259. package/components/drawer/snice-drawer.types.ts +0 -17
  260. package/components/global.d.ts +0 -14
  261. package/components/input/demo.html +0 -303
  262. package/components/input/snice-input.css +0 -257
  263. package/components/input/snice-input.ts +0 -442
  264. package/components/input/snice-input.types.ts +0 -59
  265. package/components/input/test.html +0 -77
  266. package/components/layout/README.md +0 -260
  267. package/components/layout/demo.html +0 -538
  268. package/components/layout/snice-layout-blog.css +0 -129
  269. package/components/layout/snice-layout-blog.ts +0 -48
  270. package/components/layout/snice-layout-card.css +0 -104
  271. package/components/layout/snice-layout-card.ts +0 -35
  272. package/components/layout/snice-layout-centered.css +0 -51
  273. package/components/layout/snice-layout-centered.ts +0 -22
  274. package/components/layout/snice-layout-dashboard.css +0 -98
  275. package/components/layout/snice-layout-dashboard.ts +0 -45
  276. package/components/layout/snice-layout-fullscreen.css +0 -72
  277. package/components/layout/snice-layout-fullscreen.ts +0 -34
  278. package/components/layout/snice-layout-landing.css +0 -92
  279. package/components/layout/snice-layout-landing.ts +0 -47
  280. package/components/layout/snice-layout-minimal.css +0 -16
  281. package/components/layout/snice-layout-minimal.ts +0 -19
  282. package/components/layout/snice-layout-sidebar.css +0 -117
  283. package/components/layout/snice-layout-sidebar.ts +0 -48
  284. package/components/layout/snice-layout-split.css +0 -103
  285. package/components/layout/snice-layout-split.ts +0 -29
  286. package/components/layout/snice-layout.css +0 -72
  287. package/components/layout/snice-layout.ts +0 -35
  288. package/components/login/demo-auth-controller.ts +0 -185
  289. package/components/login/demo.html +0 -470
  290. package/components/login/snice-login.css +0 -204
  291. package/components/login/snice-login.ts +0 -326
  292. package/components/login/snice-login.types.ts +0 -29
  293. package/components/modal/demo.html +0 -291
  294. package/components/modal/snice-modal.css +0 -203
  295. package/components/modal/snice-modal.ts +0 -233
  296. package/components/modal/snice-modal.types.ts +0 -21
  297. package/components/pagination/demo.html +0 -395
  298. package/components/pagination/snice-pagination.ts +0 -333
  299. package/components/pagination/snice-pagination.types.ts +0 -21
  300. package/components/progress/demo.html +0 -510
  301. package/components/progress/snice-progress.css +0 -267
  302. package/components/progress/snice-progress.ts +0 -247
  303. package/components/progress/snice-progress.types.ts +0 -19
  304. package/components/radio/demo.html +0 -287
  305. package/components/radio/snice-radio.css +0 -171
  306. package/components/radio/snice-radio.ts +0 -218
  307. package/components/radio/snice-radio.types.ts +0 -21
  308. package/components/select/demo.html +0 -511
  309. package/components/select/snice-option.ts +0 -52
  310. package/components/select/snice-select.css +0 -392
  311. package/components/select/snice-select.ts +0 -796
  312. package/components/select/snice-select.types.ts +0 -55
  313. package/components/skeleton/demo.html +0 -514
  314. package/components/skeleton/snice-skeleton.css +0 -109
  315. package/components/skeleton/snice-skeleton.ts +0 -126
  316. package/components/switch/demo.html +0 -284
  317. package/components/switch/snice-switch.css +0 -221
  318. package/components/switch/snice-switch.ts +0 -229
  319. package/components/switch/snice-switch.types.ts +0 -23
  320. package/components/symbols.ts +0 -23
  321. package/components/table/demo-table-controller.ts +0 -100
  322. package/components/table/demo.html +0 -480
  323. package/components/table/snice-cell-boolean.ts +0 -112
  324. package/components/table/snice-cell-date.ts +0 -210
  325. package/components/table/snice-cell-duration.ts +0 -91
  326. package/components/table/snice-cell-filesize.ts +0 -90
  327. package/components/table/snice-cell-number.ts +0 -165
  328. package/components/table/snice-cell-progress.ts +0 -83
  329. package/components/table/snice-cell-rating.ts +0 -82
  330. package/components/table/snice-cell-sparkline.ts +0 -253
  331. package/components/table/snice-cell-text.ts +0 -125
  332. package/components/table/snice-cell.css +0 -296
  333. package/components/table/snice-cell.ts +0 -473
  334. package/components/table/snice-column.ts +0 -353
  335. package/components/table/snice-header.css +0 -243
  336. package/components/table/snice-header.ts +0 -261
  337. package/components/table/snice-progress.ts +0 -66
  338. package/components/table/snice-rating.ts +0 -45
  339. package/components/table/snice-row.css +0 -255
  340. package/components/table/snice-row.ts +0 -331
  341. package/components/table/snice-table.css +0 -241
  342. package/components/table/snice-table.ts +0 -737
  343. package/components/table/snice-table.types.ts +0 -158
  344. package/components/tabs/demo.html +0 -487
  345. package/components/tabs/snice-tab-panel.css +0 -264
  346. package/components/tabs/snice-tab-panel.ts +0 -47
  347. package/components/tabs/snice-tab.css +0 -96
  348. package/components/tabs/snice-tab.ts +0 -65
  349. package/components/tabs/snice-tabs.css +0 -189
  350. package/components/tabs/snice-tabs.ts +0 -332
  351. package/components/tabs/snice-tabs.types.ts +0 -28
  352. package/components/theme/theme.css +0 -234
  353. package/components/toast/demo.html +0 -329
  354. package/components/toast/snice-toast-container.ts +0 -256
  355. package/components/toast/snice-toast.css +0 -213
  356. package/components/toast/snice-toast.ts +0 -276
  357. package/components/toast/snice-toast.types.ts +0 -35
  358. package/components/tooltip/demo.html +0 -350
  359. package/components/tooltip/snice-tooltip-portal.css +0 -79
  360. package/components/tooltip/snice-tooltip.css +0 -117
  361. package/components/tooltip/snice-tooltip.ts +0 -612
  362. package/components/tooltip/snice-tooltip.types.ts +0 -32
  363. package/components/transitions.ts +0 -94
  364. 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>