snice 2.1.5 → 2.2.1

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