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/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>