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/drawer/demo.html DELETED
@@ -1,328 +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 Drawer Demo</title>
7
- <script type="module" src="./snice-drawer.ts"></script>
8
- <style>
9
- body {
10
- font-family: system-ui, -apple-system, sans-serif;
11
- padding: 40px;
12
- margin: 0;
13
- background: #f3f4f6;
14
- }
15
-
16
- main {
17
- max-width: 1200px;
18
- margin: 0 auto;
19
- background: white;
20
- padding: 40px;
21
- border-radius: 12px;
22
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
23
- transition: margin 0.3s cubic-bezier(0.4, 0, 0.2, 1);
24
- }
25
-
26
- h1 {
27
- margin-top: 0;
28
- color: #111827;
29
- }
30
-
31
- .demo-section {
32
- margin-bottom: 48px;
33
- }
34
-
35
- .demo-section h2 {
36
- color: #374151;
37
- margin-bottom: 16px;
38
- }
39
-
40
- .button-group {
41
- display: flex;
42
- gap: 12px;
43
- flex-wrap: wrap;
44
- margin-bottom: 24px;
45
- }
46
-
47
- button {
48
- padding: 10px 20px;
49
- border: none;
50
- border-radius: 8px;
51
- background: #3b82f6;
52
- color: white;
53
- font-size: 14px;
54
- font-weight: 500;
55
- cursor: pointer;
56
- transition: all 0.2s;
57
- }
58
-
59
- button:hover {
60
- background: #2563eb;
61
- transform: translateY(-1px);
62
- box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
63
- }
64
-
65
- button:active {
66
- transform: translateY(0);
67
- }
68
-
69
- button.secondary {
70
- background: #6b7280;
71
- }
72
-
73
- button.secondary:hover {
74
- background: #4b5563;
75
- }
76
-
77
- .drawer-content {
78
- padding: 20px;
79
- }
80
-
81
- .form-group {
82
- margin-bottom: 20px;
83
- }
84
-
85
- label {
86
- display: block;
87
- margin-bottom: 8px;
88
- font-weight: 500;
89
- color: #374151;
90
- }
91
-
92
- input, textarea, select {
93
- width: 100%;
94
- padding: 10px;
95
- border: 1px solid #d1d5db;
96
- border-radius: 6px;
97
- font-size: 14px;
98
- transition: border-color 0.2s;
99
- }
100
-
101
- input:focus, textarea:focus, select:focus {
102
- outline: none;
103
- border-color: #3b82f6;
104
- box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
105
- }
106
-
107
- .footer-buttons {
108
- display: flex;
109
- gap: 12px;
110
- justify-content: flex-end;
111
- }
112
- </style>
113
- </head>
114
- <body>
115
- <main>
116
- <h1>Snice Drawer Component Demo</h1>
117
-
118
- <!-- Position Demo -->
119
- <div class="demo-section">
120
- <h2>Drawer Positions</h2>
121
- <div class="button-group">
122
- <button onclick="document.getElementById('drawer-left').show()">Open Left Drawer</button>
123
- <button onclick="document.getElementById('drawer-right').show()">Open Right Drawer</button>
124
- <button onclick="document.getElementById('drawer-top').show()">Open Top Drawer</button>
125
- <button onclick="document.getElementById('drawer-bottom').show()">Open Bottom Drawer</button>
126
- </div>
127
- </div>
128
-
129
- <!-- Size Demo -->
130
- <div class="demo-section">
131
- <h2>Drawer Sizes</h2>
132
- <div class="button-group">
133
- <button onclick="document.getElementById('drawer-small').show()">Small (240px)</button>
134
- <button onclick="document.getElementById('drawer-medium').show()">Medium (320px)</button>
135
- <button onclick="document.getElementById('drawer-large').show()">Large (480px)</button>
136
- <button onclick="document.getElementById('drawer-xl').show()">XL (640px)</button>
137
- <button onclick="document.getElementById('drawer-xxl').show()">XXL (800px)</button>
138
- <button onclick="document.getElementById('drawer-xxxl').show()">XXXL (960px)</button>
139
- <button onclick="document.getElementById('drawer-full').show()">Full (100%)</button>
140
- </div>
141
- </div>
142
-
143
- <!-- Feature Demo -->
144
- <div class="demo-section">
145
- <h2>Drawer Features</h2>
146
- <div class="button-group">
147
- <button onclick="document.getElementById('drawer-no-backdrop').show()">No Backdrop</button>
148
- <button onclick="document.getElementById('drawer-no-dismiss').show()">No Dismiss</button>
149
- <button onclick="document.getElementById('drawer-persistent').show()">Persistent</button>
150
- <button onclick="document.getElementById('drawer-push').show()">Push Content</button>
151
- </div>
152
- </div>
153
-
154
- <!-- Form Example -->
155
- <div class="demo-section">
156
- <h2>Form Example</h2>
157
- <button onclick="document.getElementById('drawer-form').show()">Open Form Drawer</button>
158
- </div>
159
- </main>
160
-
161
- <!-- Left Drawer -->
162
- <snice-drawer id="drawer-left" position="left">
163
- <span slot="title">Left Drawer</span>
164
- <div class="drawer-content">
165
- <p>This is a left-positioned drawer. It slides in from the left side of the screen.</p>
166
- <p>You can close it by:</p>
167
- <ul>
168
- <li>Clicking the X button</li>
169
- <li>Clicking the backdrop</li>
170
- <li>Pressing Escape key</li>
171
- </ul>
172
- </div>
173
- </snice-drawer>
174
-
175
- <!-- Right Drawer -->
176
- <snice-drawer id="drawer-right" position="right">
177
- <span slot="title">Right Drawer</span>
178
- <div class="drawer-content">
179
- <p>This drawer slides in from the right side.</p>
180
- </div>
181
- </snice-drawer>
182
-
183
- <!-- Top Drawer -->
184
- <snice-drawer id="drawer-top" position="top">
185
- <span slot="title">Top Drawer</span>
186
- <div class="drawer-content">
187
- <p>This drawer slides down from the top.</p>
188
- </div>
189
- </snice-drawer>
190
-
191
- <!-- Bottom Drawer -->
192
- <snice-drawer id="drawer-bottom" position="bottom">
193
- <span slot="title">Bottom Drawer</span>
194
- <div class="drawer-content">
195
- <p>This drawer slides up from the bottom.</p>
196
- </div>
197
- </snice-drawer>
198
-
199
- <!-- Size Variants -->
200
- <snice-drawer id="drawer-small" size="small">
201
- <span slot="title">Small Drawer</span>
202
- <div class="drawer-content">
203
- <p>This is a small-sized drawer (240px wide).</p>
204
- </div>
205
- </snice-drawer>
206
-
207
- <snice-drawer id="drawer-medium" size="medium">
208
- <span slot="title">Medium Drawer</span>
209
- <div class="drawer-content">
210
- <p>This is a medium-sized drawer (320px wide).</p>
211
- </div>
212
- </snice-drawer>
213
-
214
- <snice-drawer id="drawer-large" size="large">
215
- <span slot="title">Large Drawer</span>
216
- <div class="drawer-content">
217
- <p>This is a large-sized drawer (480px wide).</p>
218
- </div>
219
- </snice-drawer>
220
-
221
- <snice-drawer id="drawer-xl" size="xl">
222
- <span slot="title">XL Drawer</span>
223
- <div class="drawer-content">
224
- <p>This is an extra-large drawer (640px wide).</p>
225
- </div>
226
- </snice-drawer>
227
-
228
- <snice-drawer id="drawer-xxl" size="xxl">
229
- <span slot="title">XXL Drawer</span>
230
- <div class="drawer-content">
231
- <p>This is a double extra-large drawer (800px wide).</p>
232
- </div>
233
- </snice-drawer>
234
-
235
- <snice-drawer id="drawer-xxxl" size="xxxl">
236
- <span slot="title">XXXL Drawer</span>
237
- <div class="drawer-content">
238
- <p>This is a triple extra-large drawer (960px wide).</p>
239
- </div>
240
- </snice-drawer>
241
-
242
- <snice-drawer id="drawer-full" size="full">
243
- <span slot="title">Full Width Drawer</span>
244
- <div class="drawer-content">
245
- <p>This drawer takes the full width/height of the viewport.</p>
246
- </div>
247
- </snice-drawer>
248
-
249
- <!-- Feature Variants -->
250
- <snice-drawer id="drawer-no-backdrop" no-backdrop>
251
- <span slot="title">No Backdrop</span>
252
- <div class="drawer-content">
253
- <p>This drawer has no backdrop overlay.</p>
254
- </div>
255
- </snice-drawer>
256
-
257
- <snice-drawer id="drawer-no-dismiss" no-backdrop-dismiss no-escape-dismiss>
258
- <span slot="title">No Auto Dismiss</span>
259
- <div class="drawer-content">
260
- <p>This drawer cannot be dismissed by clicking outside or pressing Escape.</p>
261
- <p>You must click the X button to close it.</p>
262
- </div>
263
- </snice-drawer>
264
-
265
- <snice-drawer id="drawer-persistent" persistent>
266
- <span slot="title">Persistent Drawer</span>
267
- <div class="drawer-content">
268
- <p>This drawer is persistent - it has no close button and cannot be dismissed.</p>
269
- <button onclick="document.getElementById('drawer-persistent').hide()">Close Programmatically</button>
270
- </div>
271
- </snice-drawer>
272
-
273
- <snice-drawer id="drawer-push" push-content>
274
- <span slot="title">Push Content</span>
275
- <div class="drawer-content">
276
- <p>This drawer pushes the main content instead of overlaying it.</p>
277
- <p>Notice how the main content shifts when this drawer opens.</p>
278
- </div>
279
- </snice-drawer>
280
-
281
- <!-- Form Example -->
282
- <snice-drawer id="drawer-form" size="large">
283
- <span slot="title">User Settings</span>
284
-
285
- <form class="drawer-content">
286
- <div class="form-group">
287
- <label for="name">Name</label>
288
- <input type="text" id="name" placeholder="Enter your name">
289
- </div>
290
-
291
- <div class="form-group">
292
- <label for="email">Email</label>
293
- <input type="email" id="email" placeholder="Enter your email">
294
- </div>
295
-
296
- <div class="form-group">
297
- <label for="role">Role</label>
298
- <select id="role">
299
- <option>Administrator</option>
300
- <option>Editor</option>
301
- <option>Viewer</option>
302
- </select>
303
- </div>
304
-
305
- <div class="form-group">
306
- <label for="bio">Bio</label>
307
- <textarea id="bio" rows="4" placeholder="Tell us about yourself"></textarea>
308
- </div>
309
- </form>
310
-
311
- <div slot="footer" class="footer-buttons">
312
- <button class="secondary" onclick="document.getElementById('drawer-form').hide()">Cancel</button>
313
- <button onclick="alert('Form submitted!'); document.getElementById('drawer-form').hide()">Save Changes</button>
314
- </div>
315
- </snice-drawer>
316
-
317
- <script>
318
- // Listen for drawer events
319
- document.addEventListener('drawer-open', (e) => {
320
- console.log('Drawer opened:', e.detail);
321
- });
322
-
323
- document.addEventListener('drawer-close', (e) => {
324
- console.log('Drawer closed:', e.detail);
325
- });
326
- </script>
327
- </body>
328
- </html>