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/select/snice-select.types.ts DELETED
@@ -1,55 +0,0 @@
1
- export type SelectSize = 'small' | 'medium' | 'large';
2
-
3
- export interface SelectOption {
4
- value: string;
5
- label: string;
6
- disabled?: boolean;
7
- selected?: boolean;
8
- icon?: string;
9
- }
10
-
11
- export interface SniceOptionElement extends HTMLElement {
12
- value: string;
13
- label: string;
14
- disabled: boolean;
15
- selected: boolean;
16
- optionData: SelectOption;
17
- }
18
-
19
- export interface SniceSelectElement extends HTMLElement {
20
- value: string;
21
- disabled: boolean;
22
- required: boolean;
23
- invalid: boolean;
24
- readonly: boolean;
25
- multiple: boolean;
26
- searchable: boolean;
27
- clearable: boolean;
28
- open: boolean;
29
- size: SelectSize;
30
- name: string;
31
- label: string;
32
- placeholder: string;
33
- maxHeight: string;
34
- focus(): void;
35
- blur(): void;
36
- clear(): void;
37
- openDropdown(): void;
38
- closeDropdown(): void;
39
- toggleDropdown(): void;
40
- selectOption(value: string): void;
41
- }
42
-
43
- export interface SelectChangeDetail {
44
- value: string | string[];
45
- option?: SelectOption;
46
- select: SniceSelectElement;
47
- }
48
-
49
- export interface SelectOpenDetail {
50
- select: SniceSelectElement;
51
- }
52
-
53
- export interface SelectCloseDetail {
54
- select: SniceSelectElement;
55
- }
package/components/skeleton/demo.html DELETED
@@ -1,514 +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 Skeleton 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
- .skeleton-demo {
52
- margin: 20px 0;
53
- padding: 20px;
54
- background: white;
55
- border: 1px solid #e0e0e0;
56
- border-radius: 4px;
57
- }
58
-
59
- .controls {
60
- display: flex;
61
- gap: 10px;
62
- margin: 20px 0;
63
- flex-wrap: wrap;
64
- }
65
-
66
- button {
67
- padding: 8px 16px;
68
- background: #3b82f6;
69
- color: white;
70
- border: none;
71
- border-radius: 4px;
72
- cursor: pointer;
73
- font-size: 14px;
74
- transition: background 0.2s;
75
- }
76
-
77
- button:hover {
78
- background: #2563eb;
79
- }
80
-
81
- .card-demo {
82
- display: grid;
83
- grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
84
- gap: 20px;
85
- margin: 20px 0;
86
- }
87
-
88
- .card {
89
- padding: 16px;
90
- background: white;
91
- border: 1px solid #e0e0e0;
92
- border-radius: 8px;
93
- }
94
-
95
- .card-header {
96
- display: flex;
97
- align-items: center;
98
- gap: 12px;
99
- margin-bottom: 12px;
100
- }
101
-
102
- .list-item {
103
- display: flex;
104
- align-items: start;
105
- gap: 16px;
106
- padding: 16px;
107
- background: white;
108
- border: 1px solid #e0e0e0;
109
- border-radius: 4px;
110
- margin-bottom: 12px;
111
- }
112
-
113
- .list-content {
114
- flex: 1;
115
- }
116
-
117
- .row {
118
- display: flex;
119
- gap: 12px;
120
- align-items: center;
121
- margin: 12px 0;
122
- }
123
-
124
- code {
125
- background: #f0f0f0;
126
- padding: 2px 6px;
127
- border-radius: 3px;
128
- font-size: 0.9em;
129
- }
130
-
131
- select {
132
- padding: 6px 12px;
133
- border: 1px solid #d1d5db;
134
- border-radius: 4px;
135
- background: white;
136
- font-size: 14px;
137
- }
138
-
139
- input[type="number"] {
140
- padding: 6px 12px;
141
- border: 1px solid #d1d5db;
142
- border-radius: 4px;
143
- width: 80px;
144
- font-size: 14px;
145
- }
146
-
147
- .inline-demo {
148
- display: flex;
149
- align-items: center;
150
- gap: 12px;
151
- font-size: 16px;
152
- padding: 16px;
153
- background: white;
154
- border: 1px solid #e0e0e0;
155
- border-radius: 4px;
156
- }
157
-
158
- .article-demo {
159
- max-width: 600px;
160
- padding: 20px;
161
- background: white;
162
- border: 1px solid #e0e0e0;
163
- border-radius: 4px;
164
- }
165
-
166
- .article-header {
167
- margin-bottom: 20px;
168
- }
169
-
170
- .article-meta {
171
- display: flex;
172
- gap: 16px;
173
- margin: 12px 0;
174
- }
175
-
176
- .input-group {
177
- margin: 12px 0;
178
- }
179
-
180
- .input-group label {
181
- display: inline-block;
182
- width: 120px;
183
- font-size: 14px;
184
- color: #666;
185
- }
186
- </style>
187
- </head>
188
- <body>
189
- <div class="container">
190
- <h1>Snice Skeleton Component Demo</h1>
191
-
192
- <div class="demo-section">
193
- <h2>Basic Skeletons</h2>
194
-
195
- <span class="demo-label">Text Skeleton (Default)</span>
196
- <div class="skeleton-demo">
197
- <snice-skeleton variant="text" count="3"></snice-skeleton>
198
- </div>
199
-
200
- <span class="demo-label">Circular Skeleton</span>
201
- <div class="skeleton-demo">
202
- <div class="row">
203
- <snice-skeleton variant="circular"></snice-skeleton>
204
- <snice-skeleton variant="circular" width="60px" height="60px"></snice-skeleton>
205
- <snice-skeleton variant="circular" width="80px" height="80px"></snice-skeleton>
206
- </div>
207
- </div>
208
-
209
- <span class="demo-label">Rectangular Skeleton</span>
210
- <div class="skeleton-demo">
211
- <snice-skeleton variant="rectangular" height="200px"></snice-skeleton>
212
- </div>
213
-
214
- <span class="demo-label">Rounded Skeleton</span>
215
- <div class="skeleton-demo">
216
- <snice-skeleton variant="rounded" height="150px"></snice-skeleton>
217
- </div>
218
- </div>
219
-
220
- <div class="demo-section">
221
- <h2>Animation Types</h2>
222
-
223
- <span class="demo-label">Wave Animation (Default)</span>
224
- <div class="skeleton-demo">
225
- <snice-skeleton variant="text" animation="wave" count="2"></snice-skeleton>
226
- </div>
227
-
228
- <span class="demo-label">Pulse Animation</span>
229
- <div class="skeleton-demo">
230
- <snice-skeleton variant="text" animation="pulse" count="2"></snice-skeleton>
231
- </div>
232
-
233
- <span class="demo-label">No Animation</span>
234
- <div class="skeleton-demo">
235
- <snice-skeleton variant="text" animation="none" count="2"></snice-skeleton>
236
- </div>
237
- </div>
238
-
239
- <div class="demo-section">
240
- <h2>Custom Sizing</h2>
241
-
242
- <span class="demo-label">Custom Width Text</span>
243
- <div class="skeleton-demo">
244
- <snice-skeleton variant="text" width="200px"></snice-skeleton>
245
- <snice-skeleton variant="text" width="350px"></snice-skeleton>
246
- <snice-skeleton variant="text" width="150px"></snice-skeleton>
247
- </div>
248
-
249
- <span class="demo-label">Custom Dimensions</span>
250
- <div class="skeleton-demo">
251
- <div class="row">
252
- <snice-skeleton variant="rounded" width="100px" height="100px"></snice-skeleton>
253
- <snice-skeleton variant="rounded" width="150px" height="80px"></snice-skeleton>
254
- <snice-skeleton variant="rounded" width="200px" height="60px"></snice-skeleton>
255
- </div>
256
- </div>
257
- </div>
258
-
259
- <div class="demo-section">
260
- <h2>Multiple Items with Spacing</h2>
261
-
262
- <span class="demo-label">Text Lines with Custom Spacing</span>
263
- <div class="skeleton-demo">
264
- <snice-skeleton variant="text" count="5" spacing="12px"></snice-skeleton>
265
- </div>
266
-
267
- <span class="demo-label">Grid of Rectangles</span>
268
- <div class="skeleton-demo">
269
- <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;">
270
- <snice-skeleton variant="rounded" height="100px"></snice-skeleton>
271
- <snice-skeleton variant="rounded" height="100px"></snice-skeleton>
272
- <snice-skeleton variant="rounded" height="100px"></snice-skeleton>
273
- </div>
274
- </div>
275
- </div>
276
-
277
- <div class="demo-section">
278
- <h2>Real-world Examples</h2>
279
-
280
- <span class="demo-label">Card Skeleton</span>
281
- <div class="card-demo">
282
- <div class="card">
283
- <div class="card-header">
284
- <snice-skeleton variant="circular" width="40px" height="40px"></snice-skeleton>
285
- <div style="flex: 1;">
286
- <snice-skeleton variant="text" width="120px" height="16px"></snice-skeleton>
287
- <div style="margin-top: 4px;">
288
- <snice-skeleton variant="text" width="80px" height="14px"></snice-skeleton>
289
- </div>
290
- </div>
291
- </div>
292
- <snice-skeleton variant="rounded" height="180px"></snice-skeleton>
293
- <div style="margin-top: 12px;">
294
- <snice-skeleton variant="text" count="2"></snice-skeleton>
295
- </div>
296
- </div>
297
-
298
- <div class="card">
299
- <div class="card-header">
300
- <snice-skeleton variant="circular" width="40px" height="40px"></snice-skeleton>
301
- <div style="flex: 1;">
302
- <snice-skeleton variant="text" width="150px" height="16px"></snice-skeleton>
303
- <div style="margin-top: 4px;">
304
- <snice-skeleton variant="text" width="100px" height="14px"></snice-skeleton>
305
- </div>
306
- </div>
307
- </div>
308
- <snice-skeleton variant="rounded" height="180px"></snice-skeleton>
309
- <div style="margin-top: 12px;">
310
- <snice-skeleton variant="text" count="2"></snice-skeleton>
311
- </div>
312
- </div>
313
- </div>
314
-
315
- <span class="demo-label">List Item Skeleton</span>
316
- <div class="skeleton-demo">
317
- <div class="list-item">
318
- <snice-skeleton variant="circular" width="48px" height="48px"></snice-skeleton>
319
- <div class="list-content">
320
- <snice-skeleton variant="text" width="200px" height="18px"></snice-skeleton>
321
- <div style="margin-top: 8px;">
322
- <snice-skeleton variant="text" width="100%" height="14px"></snice-skeleton>
323
- <snice-skeleton variant="text" width="80%" height="14px" style="margin-top: 4px;"></snice-skeleton>
324
- </div>
325
- </div>
326
- </div>
327
-
328
- <div class="list-item">
329
- <snice-skeleton variant="circular" width="48px" height="48px"></snice-skeleton>
330
- <div class="list-content">
331
- <snice-skeleton variant="text" width="250px" height="18px"></snice-skeleton>
332
- <div style="margin-top: 8px;">
333
- <snice-skeleton variant="text" width="100%" height="14px"></snice-skeleton>
334
- <snice-skeleton variant="text" width="70%" height="14px" style="margin-top: 4px;"></snice-skeleton>
335
- </div>
336
- </div>
337
- </div>
338
- </div>
339
-
340
- <span class="demo-label">Article Skeleton</span>
341
- <div class="skeleton-demo">
342
- <div class="article-demo">
343
- <div class="article-header">
344
- <snice-skeleton variant="text" width="80%" height="32px"></snice-skeleton>
345
- <div class="article-meta">
346
- <snice-skeleton variant="circular" width="32px" height="32px"></snice-skeleton>
347
- <div style="flex: 1;">
348
- <snice-skeleton variant="text" width="120px" height="16px"></snice-skeleton>
349
- <snice-skeleton variant="text" width="80px" height="14px" style="margin-top: 4px;"></snice-skeleton>
350
- </div>
351
- </div>
352
- </div>
353
- <snice-skeleton variant="text" count="8" spacing="16px"></snice-skeleton>
354
- </div>
355
- </div>
356
-
357
- <span class="demo-label">Inline Loading</span>
358
- <div class="skeleton-demo">
359
- <div class="inline-demo">
360
- <span>Loading user data</span>
361
- <snice-skeleton variant="text" width="120px" height="20px"></snice-skeleton>
362
- <span>from server...</span>
363
- </div>
364
- </div>
365
- </div>
366
-
367
- <div class="demo-section">
368
- <h2>Interactive Demo</h2>
369
-
370
- <div class="controls">
371
- <div class="input-group">
372
- <label>Variant:</label>
373
- <select id="variant-select">
374
- <option value="text">Text</option>
375
- <option value="circular">Circular</option>
376
- <option value="rectangular">Rectangular</option>
377
- <option value="rounded">Rounded</option>
378
- </select>
379
- </div>
380
-
381
- <div class="input-group">
382
- <label>Animation:</label>
383
- <select id="animation-select">
384
- <option value="wave">Wave</option>
385
- <option value="pulse">Pulse</option>
386
- <option value="none">None</option>
387
- </select>
388
- </div>
389
-
390
- <div class="input-group">
391
- <label>Count:</label>
392
- <input type="number" id="count-input" value="1" min="1" max="10">
393
- </div>
394
-
395
- <button onclick="updateSkeleton()">Update</button>
396
- <button onclick="toggleContent()">Toggle Content</button>
397
- </div>
398
-
399
- <div class="skeleton-demo" id="interactive-demo">
400
- <div id="skeleton-container">
401
- <snice-skeleton id="demo-skeleton" variant="text" count="3"></snice-skeleton>
402
- </div>
403
- <div id="content-container" style="display: none;">
404
- <h3>Content Loaded!</h3>
405
- <p>This is the actual content that appears after loading is complete. The skeleton provides a better user experience while waiting for data.</p>
406
- </div>
407
- </div>
408
- </div>
409
-
410
- <div class="demo-section">
411
- <h2>Loading States Simulation</h2>
412
-
413
- <button onclick="simulateLoading()">Simulate Loading</button>
414
-
415
- <div class="skeleton-demo" id="simulation-demo">
416
- <div id="simulation-skeleton">
417
- <div class="card">
418
- <div class="card-header">
419
- <snice-skeleton variant="circular" width="40px" height="40px"></snice-skeleton>
420
- <div style="flex: 1;">
421
- <snice-skeleton variant="text" width="120px" height="16px"></snice-skeleton>
422
- <div style="margin-top: 4px;">
423
- <snice-skeleton variant="text" width="80px" height="14px"></snice-skeleton>
424
- </div>
425
- </div>
426
- </div>
427
- <snice-skeleton variant="rounded" height="180px"></snice-skeleton>
428
- <div style="margin-top: 12px;">
429
- <snice-skeleton variant="text" count="2"></snice-skeleton>
430
- </div>
431
- </div>
432
- </div>
433
- <div id="simulation-content" style="display: none;">
434
- <div class="card">
435
- <div class="card-header">
436
- <div style="width: 40px; height: 40px; border-radius: 50%; background: #3b82f6; display: flex; align-items: center; justify-content: center; color: white; font-weight: bold;">
437
- JD
438
- </div>
439
- <div style="flex: 1;">
440
- <div style="font-weight: 600;">John Doe</div>
441
- <div style="font-size: 14px; color: #666; margin-top: 4px;">2 hours ago</div>
442
- </div>
443
- </div>
444
- <div style="height: 180px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 8px;"></div>
445
- <div style="margin-top: 12px;">
446
- <p style="margin: 0;">Beautiful sunset captured during my evening walk. Nature never fails to amaze!</p>
447
- </div>
448
- </div>
449
- </div>
450
- </div>
451
- </div>
452
- </div>
453
-
454
- <script type="module">
455
- import './snice-skeleton.ts';
456
-
457
- // Interactive demo
458
- window.updateSkeleton = function() {
459
- const skeleton = document.getElementById('demo-skeleton');
460
- const variant = document.getElementById('variant-select').value;
461
- const animation = document.getElementById('animation-select').value;
462
- const count = parseInt(document.getElementById('count-input').value);
463
-
464
- skeleton.variant = variant;
465
- skeleton.animation = animation;
466
- skeleton.count = count;
467
-
468
- // Reset dimensions for different variants
469
- if (variant === 'circular') {
470
- skeleton.width = '60px';
471
- skeleton.height = '60px';
472
- } else if (variant === 'rectangular' || variant === 'rounded') {
473
- skeleton.width = '';
474
- skeleton.height = '150px';
475
- } else {
476
- skeleton.width = '';
477
- skeleton.height = '';
478
- }
479
- };
480
-
481
- window.toggleContent = function() {
482
- const skeletonContainer = document.getElementById('skeleton-container');
483
- const contentContainer = document.getElementById('content-container');
484
-
485
- if (skeletonContainer.style.display === 'none') {
486
- skeletonContainer.style.display = 'block';
487
- contentContainer.style.display = 'none';
488
- } else {
489
- skeletonContainer.style.display = 'none';
490
- contentContainer.style.display = 'block';
491
- }
492
- };
493
-
494
- // Loading simulation
495
- window.simulateLoading = function() {
496
- const skeleton = document.getElementById('simulation-skeleton');
497
- const content = document.getElementById('simulation-content');
498
-
499
- skeleton.style.display = 'block';
500
- content.style.display = 'none';
501
-
502
- setTimeout(() => {
503
- skeleton.style.display = 'none';
504
- content.style.display = 'block';
505
- }, 2000);
506
- };
507
-
508
- // Auto-update when variant changes
509
- document.getElementById('variant-select').addEventListener('change', updateSkeleton);
510
- document.getElementById('animation-select').addEventListener('change', updateSkeleton);
511
- document.getElementById('count-input').addEventListener('input', updateSkeleton);
512
- </script>
513
- </body>
514
- </html>
package/components/skeleton/snice-skeleton.css DELETED
@@ -1,109 +0,0 @@
1
- :host {
2
- display: block;
3
- --skeleton-bg: #e5e7eb;
4
- --skeleton-highlight: #f3f4f6;
5
- --skeleton-duration: 1.5s;
6
- }
7
-
8
- .skeleton-container {
9
- display: flex;
10
- flex-direction: column;
11
- gap: var(--skeleton-spacing, 0.5rem); /* 8px */
12
- width: 100%;
13
- }
14
-
15
- .skeleton {
16
- background: var(--skeleton-bg);
17
- overflow: hidden;
18
- position: relative;
19
- }
20
-
21
- .skeleton-screen-reader {
22
- position: absolute;
23
- width: 1px;
24
- height: 1px;
25
- padding: 0;
26
- margin: -1px;
27
- overflow: hidden;
28
- clip: rect(0, 0, 0, 0);
29
- white-space: nowrap;
30
- border: 0;
31
- }
32
-
33
- /* Variants */
34
- .skeleton--text {
35
- height: 1em;
36
- border-radius: 4px;
37
- width: var(--skeleton-width, 100%);
38
- }
39
-
40
- .skeleton--circular {
41
- width: var(--skeleton-width, 2.5rem); /* 40px */
42
- height: var(--skeleton-height, 2.5rem); /* 40px */
43
- border-radius: 50%;
44
- }
45
-
46
- .skeleton--rectangular {
47
- width: var(--skeleton-width, 100%);
48
- height: var(--skeleton-height, 6.25rem); /* 100px */
49
- border-radius: 0;
50
- }
51
-
52
- .skeleton--rounded {
53
- width: var(--skeleton-width, 100%);
54
- height: var(--skeleton-height, 6.25rem); /* 100px */
55
- border-radius: 8px;
56
- }
57
-
58
- /* Animations */
59
- .skeleton--pulse {
60
- animation: skeleton-pulse var(--skeleton-duration) ease-in-out infinite;
61
- }
62
-
63
- @keyframes skeleton-pulse {
64
- 0%, 100% {
65
- opacity: 1;
66
- }
67
- 50% {
68
- opacity: 0.5;
69
- }
70
- }
71
-
72
- /* Wave animation */
73
- .skeleton--wave::after {
74
- content: '';
75
- position: absolute;
76
- top: 0;
77
- left: 0;
78
- right: 0;
79
- bottom: 0;
80
- background: linear-gradient(
81
- 90deg,
82
- transparent,
83
- var(--skeleton-highlight),
84
- transparent
85
- );
86
- transform: translateX(-100%);
87
- animation: skeleton-wave var(--skeleton-duration) linear infinite;
88
- }
89
-
90
- @keyframes skeleton-wave {
91
- 0% {
92
- transform: translateX(-100%);
93
- }
94
- 100% {
95
- transform: translateX(100%);
96
- }
97
- }
98
-
99
- /* Multiple skeletons with varied widths for text */
100
- :host([variant="text"]) .skeleton:nth-child(1) { width: 100%; }
101
- :host([variant="text"]) .skeleton:nth-child(2) { width: 90%; }
102
- :host([variant="text"]) .skeleton:nth-child(3) { width: 95%; }
103
- :host([variant="text"]) .skeleton:nth-child(4) { width: 85%; }
104
- :host([variant="text"]) .skeleton:nth-child(5) { width: 92%; }
105
-
106
- /* Last line shorter for paragraph effect */
107
- :host([variant="text"]) .skeleton:last-child:not(:only-child) {
108
- width: 60%;
109
- }