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/avatar/demo.html DELETED
@@ -1,598 +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>Snice Avatar Demo</title>
7
- <link rel="stylesheet" href="../theme/theme.css">
8
- <style>
9
- body {
10
- font-family: system-ui, -apple-system, sans-serif;
11
- padding: 40px;
12
- line-height: 1.6;
13
- background: #f5f5f5;
14
- }
15
-
16
- .container {
17
- max-width: 900px;
18
- margin: 0 auto;
19
- background: white;
20
- padding: 40px;
21
- border-radius: 8px;
22
- box-shadow: 0 2px 8px rgba(0,0,0,0.1);
23
- }
24
-
25
- h1 {
26
- color: #333;
27
- border-bottom: 2px solid #e0e0e0;
28
- padding-bottom: 10px;
29
- }
30
-
31
- h2 {
32
- color: #555;
33
- margin-top: 30px;
34
- }
35
-
36
- .demo-section {
37
- margin: 30px 0;
38
- padding: 20px;
39
- background: #fafafa;
40
- border-radius: 4px;
41
- }
42
-
43
- .demo-label {
44
- display: block;
45
- margin-bottom: 12px;
46
- font-weight: 500;
47
- color: #666;
48
- font-size: 14px;
49
- }
50
-
51
- .avatar-row {
52
- display: flex;
53
- align-items: center;
54
- gap: 16px;
55
- margin: 16px 0;
56
- flex-wrap: wrap;
57
- }
58
-
59
- .avatar-group {
60
- display: flex;
61
- align-items: center;
62
- margin: 16px 0;
63
- }
64
-
65
- .avatar-group snice-avatar {
66
- margin-left: -12px;
67
- border: 3px solid white;
68
- border-radius: 50%;
69
- position: relative;
70
- overflow: hidden;
71
- }
72
-
73
- .avatar-group snice-avatar:first-child {
74
- margin-left: 0;
75
- }
76
-
77
- .avatar-group snice-avatar:hover {
78
- z-index: 1;
79
- }
80
-
81
- .controls {
82
- display: flex;
83
- gap: 10px;
84
- margin: 20px 0;
85
- flex-wrap: wrap;
86
- }
87
-
88
- button {
89
- padding: 8px 16px;
90
- background: #3b82f6;
91
- color: white;
92
- border: none;
93
- border-radius: 4px;
94
- cursor: pointer;
95
- font-size: 14px;
96
- transition: background 0.2s;
97
- }
98
-
99
- button:hover {
100
- background: #2563eb;
101
- }
102
-
103
- .profile-card {
104
- display: flex;
105
- align-items: center;
106
- gap: 16px;
107
- padding: 16px;
108
- background: white;
109
- border: 1px solid #e0e0e0;
110
- border-radius: 8px;
111
- margin: 16px 0;
112
- }
113
-
114
- .profile-info {
115
- flex: 1;
116
- }
117
-
118
- .profile-name {
119
- font-weight: 600;
120
- font-size: 16px;
121
- margin: 0;
122
- }
123
-
124
- .profile-role {
125
- color: #6b7280;
126
- font-size: 14px;
127
- margin: 4px 0 0 0;
128
- }
129
-
130
- .avatar-grid {
131
- display: grid;
132
- grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
133
- gap: 16px;
134
- margin: 20px 0;
135
- }
136
-
137
- .avatar-item {
138
- display: flex;
139
- flex-direction: column;
140
- align-items: center;
141
- gap: 8px;
142
- }
143
-
144
- .avatar-name {
145
- font-size: 12px;
146
- text-align: center;
147
- color: #666;
148
- }
149
-
150
- input[type="text"],
151
- input[type="url"] {
152
- padding: 8px 12px;
153
- border: 1px solid #d1d5db;
154
- border-radius: 4px;
155
- font-size: 14px;
156
- width: 200px;
157
- }
158
-
159
- select {
160
- padding: 8px 12px;
161
- border: 1px solid #d1d5db;
162
- border-radius: 4px;
163
- background: white;
164
- font-size: 14px;
165
- }
166
-
167
- code {
168
- background: #f0f0f0;
169
- padding: 2px 6px;
170
- border-radius: 3px;
171
- font-size: 0.9em;
172
- }
173
-
174
- .comment-box {
175
- display: flex;
176
- gap: 12px;
177
- padding: 16px;
178
- background: white;
179
- border: 1px solid #e0e0e0;
180
- border-radius: 8px;
181
- margin: 16px 0;
182
- }
183
-
184
- .comment-content {
185
- flex: 1;
186
- }
187
-
188
- .comment-header {
189
- display: flex;
190
- align-items: center;
191
- gap: 8px;
192
- margin-bottom: 8px;
193
- }
194
-
195
- .comment-author {
196
- font-weight: 600;
197
- font-size: 14px;
198
- }
199
-
200
- .comment-time {
201
- color: #6b7280;
202
- font-size: 12px;
203
- }
204
-
205
- .comment-text {
206
- font-size: 14px;
207
- line-height: 1.5;
208
- margin: 0;
209
- }
210
-
211
- .team-grid {
212
- display: grid;
213
- grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
214
- gap: 20px;
215
- margin: 20px 0;
216
- }
217
-
218
- .team-member {
219
- text-align: center;
220
- padding: 20px;
221
- background: white;
222
- border: 1px solid #e0e0e0;
223
- border-radius: 8px;
224
- transition: box-shadow 0.2s;
225
- }
226
-
227
- .team-member:hover {
228
- box-shadow: 0 4px 12px rgba(0,0,0,0.1);
229
- }
230
-
231
- .team-member snice-avatar {
232
- margin: 0 auto 12px;
233
- }
234
-
235
- .team-member-name {
236
- font-weight: 600;
237
- margin: 8px 0 4px;
238
- }
239
-
240
- .team-member-role {
241
- color: #6b7280;
242
- font-size: 14px;
243
- }
244
- </style>
245
- </head>
246
- <body>
247
- <div class="container">
248
- <h1>Snice Avatar Component Demo</h1>
249
-
250
- <div class="demo-section">
251
- <h2>Basic Avatars</h2>
252
-
253
- <span class="demo-label">With Image</span>
254
- <div class="avatar-row">
255
- <snice-avatar
256
- src="https://i.pravatar.cc/150?img=1"
257
- name="John Doe">
258
- </snice-avatar>
259
- <snice-avatar
260
- src="https://i.pravatar.cc/150?img=2"
261
- name="Jane Smith">
262
- </snice-avatar>
263
- <snice-avatar
264
- src="https://i.pravatar.cc/150?img=3"
265
- name="Bob Wilson">
266
- </snice-avatar>
267
- </div>
268
-
269
- <span class="demo-label">Fallback to Initials</span>
270
- <div class="avatar-row">
271
- <snice-avatar name="John Doe"></snice-avatar>
272
- <snice-avatar name="Jane Smith"></snice-avatar>
273
- <snice-avatar name="Bob Wilson"></snice-avatar>
274
- <snice-avatar name="Alice"></snice-avatar>
275
- <snice-avatar name="X"></snice-avatar>
276
- </div>
277
-
278
- <span class="demo-label">No Name (Default Icon)</span>
279
- <div class="avatar-row">
280
- <snice-avatar></snice-avatar>
281
- <snice-avatar size="large"></snice-avatar>
282
- <snice-avatar size="xl"></snice-avatar>
283
- </div>
284
-
285
- <span class="demo-label">Broken Image (Fallback)</span>
286
- <div class="avatar-row">
287
- <snice-avatar
288
- src="https://broken-image-url.com/404.jpg"
289
- name="Fallback User">
290
- </snice-avatar>
291
- <snice-avatar
292
- src="https://invalid.url/image.png"
293
- name="Error Example">
294
- </snice-avatar>
295
- </div>
296
- </div>
297
-
298
- <div class="demo-section">
299
- <h2>Sizes</h2>
300
-
301
- <div class="avatar-row">
302
- <snice-avatar size="xs" name="XS"></snice-avatar>
303
- <snice-avatar size="small" name="SM"></snice-avatar>
304
- <snice-avatar size="medium" name="MD"></snice-avatar>
305
- <snice-avatar size="large" name="LG"></snice-avatar>
306
- <snice-avatar size="xl" name="XL"></snice-avatar>
307
- <snice-avatar size="xxl" name="XXL"></snice-avatar>
308
- </div>
309
-
310
- <span class="demo-label">With Images</span>
311
- <div class="avatar-row">
312
- <snice-avatar size="xs" src="https://i.pravatar.cc/150?img=4"></snice-avatar>
313
- <snice-avatar size="small" src="https://i.pravatar.cc/150?img=5"></snice-avatar>
314
- <snice-avatar size="medium" src="https://i.pravatar.cc/150?img=6"></snice-avatar>
315
- <snice-avatar size="large" src="https://i.pravatar.cc/150?img=7"></snice-avatar>
316
- <snice-avatar size="xl" src="https://i.pravatar.cc/150?img=8"></snice-avatar>
317
- <snice-avatar size="xxl" src="https://i.pravatar.cc/150?img=9"></snice-avatar>
318
- </div>
319
- </div>
320
-
321
- <div class="demo-section">
322
- <h2>Shapes</h2>
323
-
324
- <div class="avatar-row">
325
- <snice-avatar shape="circle" name="Circle" size="large"></snice-avatar>
326
- <snice-avatar shape="square" name="Square" size="large"></snice-avatar>
327
- <snice-avatar shape="rounded" name="Rounded" size="large"></snice-avatar>
328
- </div>
329
-
330
- <span class="demo-label">With Images</span>
331
- <div class="avatar-row">
332
- <snice-avatar shape="circle" src="https://i.pravatar.cc/150?img=10" size="large"></snice-avatar>
333
- <snice-avatar shape="square" src="https://i.pravatar.cc/150?img=11" size="large"></snice-avatar>
334
- <snice-avatar shape="rounded" src="https://i.pravatar.cc/150?img=12" size="large"></snice-avatar>
335
- </div>
336
- </div>
337
-
338
- <div class="demo-section">
339
- <h2>Status Indicators</h2>
340
-
341
- <span class="demo-label">Different Status Types</span>
342
- <div class="avatar-row">
343
- <snice-avatar name="Online" status="online" size="large"></snice-avatar>
344
- <snice-avatar name="Offline" status="offline" size="large"></snice-avatar>
345
- <snice-avatar name="Away" status="away" size="large"></snice-avatar>
346
- <snice-avatar name="Busy" status="busy" size="large"></snice-avatar>
347
- </div>
348
-
349
- <span class="demo-label">Status Positions</span>
350
- <div class="avatar-row">
351
- <snice-avatar name="TR" status="online" status-position="top-right" size="large"></snice-avatar>
352
- <snice-avatar name="TL" status="online" status-position="top-left" size="large"></snice-avatar>
353
- <snice-avatar name="BR" status="online" status-position="bottom-right" size="large"></snice-avatar>
354
- <snice-avatar name="BL" status="online" status-position="bottom-left" size="large"></snice-avatar>
355
- </div>
356
-
357
- <span class="demo-label">With Different Sizes</span>
358
- <div class="avatar-row">
359
- <snice-avatar name="XS" status="online" size="xs"></snice-avatar>
360
- <snice-avatar name="SM" status="away" size="small"></snice-avatar>
361
- <snice-avatar name="MD" status="busy" size="medium"></snice-avatar>
362
- <snice-avatar name="LG" status="online" size="large"></snice-avatar>
363
- <snice-avatar name="XL" status="offline" size="xl"></snice-avatar>
364
- </div>
365
- </div>
366
-
367
- <div class="demo-section">
368
- <h2>Auto-generated Colors</h2>
369
-
370
- <span class="demo-label">Consistent colors based on name</span>
371
- <div class="avatar-grid">
372
- <div class="avatar-item">
373
- <snice-avatar name="Alice Johnson"></snice-avatar>
374
- <span class="avatar-name">Alice Johnson</span>
375
- </div>
376
- <div class="avatar-item">
377
- <snice-avatar name="Bob Smith"></snice-avatar>
378
- <span class="avatar-name">Bob Smith</span>
379
- </div>
380
- <div class="avatar-item">
381
- <snice-avatar name="Carol White"></snice-avatar>
382
- <span class="avatar-name">Carol White</span>
383
- </div>
384
- <div class="avatar-item">
385
- <snice-avatar name="David Brown"></snice-avatar>
386
- <span class="avatar-name">David Brown</span>
387
- </div>
388
- <div class="avatar-item">
389
- <snice-avatar name="Emma Davis"></snice-avatar>
390
- <span class="avatar-name">Emma Davis</span>
391
- </div>
392
- <div class="avatar-item">
393
- <snice-avatar name="Frank Wilson"></snice-avatar>
394
- <span class="avatar-name">Frank Wilson</span>
395
- </div>
396
- <div class="avatar-item">
397
- <snice-avatar name="Grace Lee"></snice-avatar>
398
- <span class="avatar-name">Grace Lee</span>
399
- </div>
400
- <div class="avatar-item">
401
- <snice-avatar name="Henry Taylor"></snice-avatar>
402
- <span class="avatar-name">Henry Taylor</span>
403
- </div>
404
- </div>
405
- </div>
406
-
407
- <div class="demo-section">
408
- <h2>Avatar Groups</h2>
409
-
410
- <span class="demo-label">Overlapping avatars</span>
411
- <div class="avatar-group">
412
- <snice-avatar src="https://i.pravatar.cc/150?img=1" name="User 1"></snice-avatar>
413
- <snice-avatar src="https://i.pravatar.cc/150?img=2" name="User 2"></snice-avatar>
414
- <snice-avatar src="https://i.pravatar.cc/150?img=3" name="User 3"></snice-avatar>
415
- <snice-avatar src="https://i.pravatar.cc/150?img=4" name="User 4"></snice-avatar>
416
- <snice-avatar name="+5" fallback-background="#e5e7eb"></snice-avatar>
417
- </div>
418
-
419
- <span class="demo-label">With initials</span>
420
- <div class="avatar-group">
421
- <snice-avatar name="Alice Johnson"></snice-avatar>
422
- <snice-avatar name="Bob Smith"></snice-avatar>
423
- <snice-avatar name="Carol White"></snice-avatar>
424
- <snice-avatar name="David Brown"></snice-avatar>
425
- </div>
426
- </div>
427
-
428
- <div class="demo-section">
429
- <h2>Real-world Examples</h2>
430
-
431
- <span class="demo-label">Profile Cards</span>
432
- <div class="profile-card">
433
- <snice-avatar
434
- src="https://i.pravatar.cc/150?img=15"
435
- name="Sarah Johnson"
436
- size="large"
437
- status="online">
438
- </snice-avatar>
439
- <div class="profile-info">
440
- <p class="profile-name">Sarah Johnson</p>
441
- <p class="profile-role">Senior Developer</p>
442
- </div>
443
- </div>
444
-
445
- <div class="profile-card">
446
- <snice-avatar
447
- name="Michael Chen"
448
- size="large"
449
- status="busy">
450
- </snice-avatar>
451
- <div class="profile-info">
452
- <p class="profile-name">Michael Chen</p>
453
- <p class="profile-role">Product Manager</p>
454
- </div>
455
- </div>
456
-
457
- <span class="demo-label">Comments</span>
458
- <div class="comment-box">
459
- <snice-avatar
460
- src="https://i.pravatar.cc/150?img=20"
461
- name="Emma Wilson"
462
- size="medium">
463
- </snice-avatar>
464
- <div class="comment-content">
465
- <div class="comment-header">
466
- <span class="comment-author">Emma Wilson</span>
467
- <span class="comment-time">2 hours ago</span>
468
- </div>
469
- <p class="comment-text">
470
- This is a great implementation! The avatar component looks really polished.
471
- </p>
472
- </div>
473
- </div>
474
-
475
- <div class="comment-box">
476
- <snice-avatar
477
- name="James Brown"
478
- size="medium">
479
- </snice-avatar>
480
- <div class="comment-content">
481
- <div class="comment-header">
482
- <span class="comment-author">James Brown</span>
483
- <span class="comment-time">5 hours ago</span>
484
- </div>
485
- <p class="comment-text">
486
- I love how the fallback to initials works seamlessly when images fail to load.
487
- </p>
488
- </div>
489
- </div>
490
-
491
- <span class="demo-label">Team Members</span>
492
- <div class="team-grid">
493
- <div class="team-member">
494
- <snice-avatar
495
- src="https://i.pravatar.cc/150?img=25"
496
- name="Lisa Anderson"
497
- size="xl"
498
- status="online">
499
- </snice-avatar>
500
- <div class="team-member-name">Lisa Anderson</div>
501
- <div class="team-member-role">CEO</div>
502
- </div>
503
- <div class="team-member">
504
- <snice-avatar
505
- src="https://i.pravatar.cc/150?img=26"
506
- name="Tom Martinez"
507
- size="xl"
508
- status="away">
509
- </snice-avatar>
510
- <div class="team-member-name">Tom Martinez</div>
511
- <div class="team-member-role">CTO</div>
512
- </div>
513
- <div class="team-member">
514
- <snice-avatar
515
- name="Nina Patel"
516
- size="xl"
517
- status="online">
518
- </snice-avatar>
519
- <div class="team-member-name">Nina Patel</div>
520
- <div class="team-member-role">Designer</div>
521
- </div>
522
- <div class="team-member">
523
- <snice-avatar
524
- name="Alex Kim"
525
- size="xl"
526
- status="offline">
527
- </snice-avatar>
528
- <div class="team-member-name">Alex Kim</div>
529
- <div class="team-member-role">Developer</div>
530
- </div>
531
- </div>
532
- </div>
533
-
534
- <div class="demo-section">
535
- <h2>Interactive Demo</h2>
536
-
537
- <div class="controls">
538
- <input type="text" id="name-input" placeholder="Enter name" value="John Doe">
539
- <input type="url" id="src-input" placeholder="Image URL (optional)">
540
- <select id="size-select">
541
- <option value="xs">Extra Small</option>
542
- <option value="small">Small</option>
543
- <option value="medium" selected>Medium</option>
544
- <option value="large">Large</option>
545
- <option value="xl">Extra Large</option>
546
- <option value="xxl">XXL</option>
547
- </select>
548
- <select id="shape-select">
549
- <option value="circle" selected>Circle</option>
550
- <option value="square">Square</option>
551
- <option value="rounded">Rounded</option>
552
- </select>
553
- <select id="status-select">
554
- <option value="">No Status</option>
555
- <option value="online">Online</option>
556
- <option value="offline">Offline</option>
557
- <option value="away">Away</option>
558
- <option value="busy">Busy</option>
559
- </select>
560
- <button onclick="updateAvatar()">Update Avatar</button>
561
- </div>
562
-
563
- <div style="text-align: center; padding: 40px; background: white; border: 1px solid #e0e0e0; border-radius: 8px;">
564
- <snice-avatar
565
- id="demo-avatar"
566
- name="John Doe"
567
- size="medium"
568
- shape="circle">
569
- </snice-avatar>
570
- </div>
571
- </div>
572
- </div>
573
-
574
- <script type="module">
575
- import './snice-avatar.ts';
576
-
577
- window.updateAvatar = function() {
578
- const avatar = document.getElementById('demo-avatar');
579
- const name = document.getElementById('name-input').value;
580
- const src = document.getElementById('src-input').value;
581
- const size = document.getElementById('size-select').value;
582
- const shape = document.getElementById('shape-select').value;
583
- const status = document.getElementById('status-select').value;
584
-
585
- avatar.name = name;
586
- avatar.src = src;
587
- avatar.size = size;
588
- avatar.shape = shape;
589
- avatar.status = status;
590
- };
591
-
592
- // Auto-update on input changes
593
- ['name-input', 'src-input', 'size-select', 'shape-select', 'status-select'].forEach(id => {
594
- document.getElementById(id).addEventListener('change', updateAvatar);
595
- });
596
- </script>
597
- </body>
598
- </html>