@kizmann/nano-ui 0.9.10 → 1.0.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 (270) hide show
  1. package/.github/workflows/compile-deploy-publish.yml +65 -0
  2. package/README.md +1 -1
  3. package/assets/nano-ui-dark.svg +19 -0
  4. package/assets/nano-ui-light.svg +19 -0
  5. package/assets/pico-js-dark.svg +19 -0
  6. package/assets/pico-js-light.svg +19 -0
  7. package/demos/form.html +462 -0
  8. package/demos/overview.html +97 -45
  9. package/docs/_sidebar.md +11 -10
  10. package/docs/files/form/button.md +10 -1
  11. package/docs/files/form/switch.md +6 -0
  12. package/docs/files/others/config.md +261 -8
  13. package/docs/files/others/drawer.md +32 -0
  14. package/docs/files/others/map.md +32 -0
  15. package/docs/index.template.html +76 -0
  16. package/docs/src/js/backup.js +128 -0
  17. package/docs/src/js/helper/item-helper.js +0 -0
  18. package/docs/src/js/index.js +21 -0
  19. package/docs/src/js/plugin/title-plugin.js +0 -0
  20. package/docs/src/js/plugin/vue-demo-plugin.js +97 -0
  21. package/docs/src/js/theme/basic.js +31 -0
  22. package/docs/src/js/theme/docsify.js +11 -0
  23. package/docs/src/scss/index-dark.scss +3 -0
  24. package/docs/src/scss/index-light.scss +3 -0
  25. package/docs/src/scss/index.scss +10 -443
  26. package/docs/src/scss/mixins/grid.scss +12 -11
  27. package/docs/src/scss/mixins/media.scss +2 -1
  28. package/docs/src/scss/root/vars-dark.scss +15 -0
  29. package/docs/src/scss/root/vars-light.scss +15 -0
  30. package/docs/src/scss/root/vars.scss +110 -0
  31. package/docs/src/scss/theme/default.scss +123 -0
  32. package/docs/src/scss/theme/header.scss +147 -0
  33. package/docs/src/scss/theme/layout.scss +186 -0
  34. package/docs/src/scss/theme/loader.scss +63 -0
  35. package/docs/src/scss/theme/markdown.scss +79 -0
  36. package/docs/src/scss/theme/navigation.scss +58 -0
  37. package/docs/src/scss/theme/progress.scss +9 -0
  38. package/docs/src/scss/theme/search.scss +119 -0
  39. package/docs/src/scss/{docsify → theme}/syntax.scss +18 -15
  40. package/docs/src/scss/theme/table.scss +63 -0
  41. package/favicon/apple-touch-icon.png +0 -0
  42. package/favicon/favicon-96x96.png +0 -0
  43. package/favicon/favicon.ico +0 -0
  44. package/favicon/favicon.svg +3 -0
  45. package/favicon/site.webmanifest +21 -0
  46. package/favicon/web-app-manifest-192x192.png +0 -0
  47. package/favicon/web-app-manifest-512x512.png +0 -0
  48. package/package.json +19 -12
  49. package/postcss.config.js +1 -1
  50. package/src/alert/src/alert/alert.scss +5 -4
  51. package/src/button/src/button/button.scss +5 -5
  52. package/src/button/src/button-group/button-group.scss +5 -4
  53. package/src/cascader/src/cascader/cascader.scss +5 -4
  54. package/src/cascader/src/cascader-panel/cascader-panel.scss +5 -4
  55. package/src/checkbox/src/checkbox/checkbox.scss +5 -4
  56. package/src/checkbox/src/checkbox-group/checkbox-group.scss +5 -4
  57. package/src/collapse/src/collapse/collapse.scss +5 -4
  58. package/src/collapse/src/collapse-item/collapse-item.scss +5 -4
  59. package/src/config/src/builder/builder.scss +17 -13
  60. package/src/config/src/reference-panel/reference-panel.scss +7 -4
  61. package/src/confirm/src/confirm/confirm.scss +5 -4
  62. package/src/datepicker/src/datepicker/datepicker.scss +5 -4
  63. package/src/datepicker/src/datepicker-panel/datepicker-panel.scss +5 -4
  64. package/src/datetimepicker/src/datetimepicker/datetimepicker.js +0 -4
  65. package/src/datetimepicker/src/datetimepicker/datetimepicker.scss +5 -4
  66. package/src/draggable/src/draggrid/draggrid.scss +5 -4
  67. package/src/draggable/src/draggrid-item/draggrid-item.scss +5 -4
  68. package/src/draggable/src/draglist/draglist.scss +5 -4
  69. package/src/draggable/src/draglist-item/draglist-item.scss +5 -4
  70. package/src/draggable/src/dropzone/dropzone.scss +5 -4
  71. package/src/drawer/index.js +5 -0
  72. package/src/drawer/index.scss +1 -0
  73. package/src/drawer/src/drawer/drawer.js +431 -0
  74. package/src/drawer/src/drawer/drawer.scss +136 -0
  75. package/src/durationpicker/src/durationpicker/durationpicker.scss +5 -4
  76. package/src/empty/src/empty-icon/empty-icon.scss +5 -4
  77. package/src/form/index.js +6 -0
  78. package/src/form/index.scss +2 -0
  79. package/src/form/src/form/form.js +11 -1
  80. package/src/form/src/form-frame/form-frame.js +42 -0
  81. package/src/form/src/form-frame/form-frame.scss +28 -0
  82. package/src/form/src/form-frame-item/form-frame-item.js +114 -0
  83. package/src/form/src/form-group/form-group.js +33 -1
  84. package/src/form/src/form-group/form-group.scss +5 -4
  85. package/src/form/src/form-item/form-item.scss +5 -4
  86. package/src/form/src/form-menu/form-menu.js +89 -0
  87. package/src/form/src/form-menu/form-menu.scss +9 -0
  88. package/src/index.js +1 -0
  89. package/src/index.scss +1 -0
  90. package/src/info/src/info/info.scss +5 -4
  91. package/src/info/src/info-column/info-column.scss +7 -4
  92. package/src/input/src/input/input.scss +5 -4
  93. package/src/input-number/src/input-number/input-number.scss +5 -4
  94. package/src/loader/src/loader/loader.scss +5 -4
  95. package/src/modal/src/modal/modal.scss +5 -4
  96. package/src/notification/src/notification/notification.scss +5 -4
  97. package/src/paginator/src/paginator/paginator.scss +5 -4
  98. package/src/popover/src/popover/popover.scss +5 -4
  99. package/src/radio/src/radio/radio.scss +5 -4
  100. package/src/radio/src/radio-group/radio-group.scss +5 -4
  101. package/src/rating/src/rating/rating.scss +5 -4
  102. package/src/root/vars.scss +84 -81
  103. package/src/select/src/select/select.scss +5 -4
  104. package/src/slider/src/slider/slider.scss +5 -4
  105. package/src/switch/src/switch/switch.scss +6 -4
  106. package/src/table/src/table/table.scss +15 -0
  107. package/src/table/src/table-cell/table-cell.scss +5 -4
  108. package/src/tabs/src/tabs/tabs.scss +5 -4
  109. package/src/tabs/src/tabs-item/tabs-item.scss +5 -4
  110. package/src/tags/src/tags-item/tags-item.scss +5 -4
  111. package/src/textarea/src/textarea/textarea.scss +5 -4
  112. package/src/timepicker/src/timepicker/timepicker.scss +5 -4
  113. package/src/timepicker/src/timepicker-panel/timepicker-panel.scss +5 -4
  114. package/src/transfer/src/transfer/transfer.scss +5 -4
  115. package/themes/macos/alert/src/alert/alert.scss +4 -3
  116. package/themes/macos/button/src/button/button.scss +8 -3
  117. package/themes/macos/cascader/src/cascader/cascader.scss +5 -4
  118. package/themes/macos/checkbox/src/checkbox/checkbox.scss +5 -4
  119. package/themes/macos/collapse/src/collapse/collapse.scss +4 -3
  120. package/themes/macos/collapse/src/collapse-item/collapse-item.scss +4 -3
  121. package/themes/macos/confirm/src/confirm/confirm.scss +4 -3
  122. package/themes/macos/datepicker/src/datepicker/datepicker.scss +5 -4
  123. package/themes/macos/datepicker/src/datepicker-panel/datepicker-panel.scss +4 -3
  124. package/themes/macos/datetimepicker/src/datetimepicker/datetimepicker.scss +14 -12
  125. package/themes/macos/draggable/src/draggrid/draggrid.scss +4 -3
  126. package/themes/macos/draggable/src/draggrid-item/draggrid-item.scss +4 -3
  127. package/themes/macos/draggable/src/draglist/draglist.scss +4 -3
  128. package/themes/macos/draggable/src/draglist-item/draglist-item.scss +6 -5
  129. package/themes/macos/draggable/src/dropzone/dropzone.scss +4 -3
  130. package/themes/macos/drawer/index.scss +1 -0
  131. package/themes/macos/drawer/src/drawer/drawer.scss +35 -0
  132. package/themes/macos/durationpicker/src/durationpicker/durationpicker.scss +5 -4
  133. package/themes/macos/file/src/file/file.scss +4 -3
  134. package/themes/macos/form/src/form-group/form-group.scss +4 -3
  135. package/themes/macos/index-dark.scss +1 -39
  136. package/themes/macos/index-light.scss +1 -39
  137. package/themes/macos/index.scss +1 -2
  138. package/themes/macos/input/src/input/input.scss +6 -5
  139. package/themes/macos/input-number/src/input-number/input-number.scss +6 -5
  140. package/themes/macos/loader/src/loader/loader.scss +4 -3
  141. package/themes/macos/modal/src/modal/modal.scss +6 -5
  142. package/themes/macos/notification/src/notification/notification.scss +4 -3
  143. package/themes/macos/popover/src/popover/popover.scss +9 -8
  144. package/themes/macos/radio/src/radio/radio.scss +5 -4
  145. package/themes/macos/rating/src/rating/rating.scss +4 -3
  146. package/themes/macos/root/vars-dark.scss +87 -74
  147. package/themes/macos/root/vars-light.scss +87 -74
  148. package/themes/macos/root/vars.scss +88 -74
  149. package/themes/macos/select/src/select/select.scss +5 -4
  150. package/themes/macos/switch/src/switch/switch.scss +6 -4
  151. package/themes/macos/table/src/table/table.scss +3 -3
  152. package/themes/macos/table/src/table-cell/table-cell.scss +5 -4
  153. package/themes/macos/tabs/src/tabs/tabs.scss +4 -3
  154. package/themes/macos/tabs/src/tabs-item/tabs-item.scss +4 -3
  155. package/themes/macos/tags/src/tags-item/tags-item.scss +6 -4
  156. package/themes/macos/textarea/src/textarea/textarea.scss +5 -4
  157. package/themes/macos/timepicker/src/timepicker/timepicker.scss +5 -4
  158. package/themes/macos/timepicker/src/timepicker-panel/timepicker-panel.scss +4 -3
  159. package/webpack.config.js +81 -13
  160. package/bun.lockb +0 -0
  161. package/dist/nano-ui.css +0 -2
  162. package/dist/nano-ui.js +0 -4
  163. package/dist/nano-ui.js.map +0 -1
  164. package/dist/themes/dark.css +0 -2
  165. package/dist/themes/light.css +0 -2
  166. package/docs/dist/docs.css +0 -2
  167. package/docs/index.html +0 -176
  168. package/docs/src/scss/docsify/basic/_coverpage.sass +0 -95
  169. package/docs/src/scss/docsify/basic/_layout.sass +0 -472
  170. package/docs/src/scss/docsify/vue.sass +0 -250
  171. package/nano.svg +0 -52
  172. package/themes/light/alert/index.scss +0 -1
  173. package/themes/light/alert/src/alert/alert.scss +0 -26
  174. package/themes/light/button/index.scss +0 -2
  175. package/themes/light/button/src/button/button.scss +0 -46
  176. package/themes/light/button/src/button-group/button-group.scss +0 -1
  177. package/themes/light/cascader/index.scss +0 -2
  178. package/themes/light/cascader/src/cascader/cascader.scss +0 -45
  179. package/themes/light/cascader/src/cascader-panel/cascader-panel.scss +0 -13
  180. package/themes/light/checkbox/index.scss +0 -2
  181. package/themes/light/checkbox/src/checkbox/checkbox.scss +0 -44
  182. package/themes/light/checkbox/src/checkbox-group/checkbox-group.scss +0 -1
  183. package/themes/light/collapse/index.scss +0 -2
  184. package/themes/light/collapse/src/collapse/collapse.scss +0 -21
  185. package/themes/light/collapse/src/collapse-item/collapse-item.scss +0 -21
  186. package/themes/light/confirm/index.scss +0 -1
  187. package/themes/light/confirm/src/confirm/confirm.scss +0 -13
  188. package/themes/light/datepicker/index.scss +0 -2
  189. package/themes/light/datepicker/src/datepicker/datepicker.scss +0 -49
  190. package/themes/light/datepicker/src/datepicker-panel/datepicker-panel.scss +0 -43
  191. package/themes/light/datetimepicker/index.scss +0 -1
  192. package/themes/light/datetimepicker/src/datetimepicker/datetimepicker.scss +0 -49
  193. package/themes/light/demo/index.scss +0 -1
  194. package/themes/light/demo/src/demo/demo.scss +0 -11
  195. package/themes/light/draggable/index.scss +0 -9
  196. package/themes/light/draggable/src/draggrid/draggrid.scss +0 -13
  197. package/themes/light/draggable/src/draggrid-item/draggrid-item.scss +0 -65
  198. package/themes/light/draggable/src/draghandler/draghandler.scss +0 -15
  199. package/themes/light/draggable/src/draglist/draglist.scss +0 -13
  200. package/themes/light/draggable/src/draglist-item/draglist-item.scss +0 -72
  201. package/themes/light/draggable/src/dropzone/dropzone.scss +0 -13
  202. package/themes/light/durationpicker/index.scss +0 -1
  203. package/themes/light/durationpicker/src/durationpicker/durationpicker.scss +0 -49
  204. package/themes/light/empty/index.scss +0 -1
  205. package/themes/light/empty/src/empty-icon/empty-icon.scss +0 -13
  206. package/themes/light/file/index.scss +0 -1
  207. package/themes/light/file/src/file/file.scss +0 -38
  208. package/themes/light/form/index.scss +0 -3
  209. package/themes/light/form/src/form/form.scss +0 -1
  210. package/themes/light/form/src/form-group/form-group.scss +0 -17
  211. package/themes/light/form/src/form-item/form-item.scss +0 -29
  212. package/themes/light/index.scss +0 -38
  213. package/themes/light/info/index.scss +0 -3
  214. package/themes/light/info/src/info/info.scss +0 -5
  215. package/themes/light/info/src/info-column/info-column.scss +0 -5
  216. package/themes/light/info/src/info-field/info-field.scss +0 -5
  217. package/themes/light/input/index.scss +0 -1
  218. package/themes/light/input/src/input/input.scss +0 -37
  219. package/themes/light/input-number/index.scss +0 -1
  220. package/themes/light/input-number/src/input-number/input-number.scss +0 -46
  221. package/themes/light/loader/index.scss +0 -1
  222. package/themes/light/loader/src/loader/loader.scss +0 -21
  223. package/themes/light/map/index.scss +0 -1
  224. package/themes/light/map/src/map/map.scss +0 -1
  225. package/themes/light/modal/index.scss +0 -1
  226. package/themes/light/modal/src/modal/modal.scss +0 -51
  227. package/themes/light/notification/index.scss +0 -1
  228. package/themes/light/notification/src/notification/notification.scss +0 -24
  229. package/themes/light/paginator/index.scss +0 -1
  230. package/themes/light/paginator/src/paginator/paginator.scss +0 -5
  231. package/themes/light/popover/index.scss +0 -1
  232. package/themes/light/popover/src/popover/popover.scss +0 -100
  233. package/themes/light/radio/index.scss +0 -2
  234. package/themes/light/radio/src/radio/radio.scss +0 -44
  235. package/themes/light/radio/src/radio-group/radio-group.scss +0 -1
  236. package/themes/light/rating/index.scss +0 -1
  237. package/themes/light/rating/src/rating/rating.scss +0 -18
  238. package/themes/light/resizer/index.scss +0 -1
  239. package/themes/light/resizer/src/resizer/resizer.scss +0 -5
  240. package/themes/light/root/vars.scss +0 -183
  241. package/themes/light/scrollbar/index.scss +0 -1
  242. package/themes/light/scrollbar/src/scrollbar/scrollbar.scss +0 -6
  243. package/themes/light/select/index.scss +0 -2
  244. package/themes/light/select/src/select/select.scss +0 -46
  245. package/themes/light/select/src/select-option/select-option.scss +0 -1
  246. package/themes/light/switch/index.scss +0 -1
  247. package/themes/light/switch/src/switch/switch.scss +0 -28
  248. package/themes/light/table/index.scss +0 -4
  249. package/themes/light/table/src/table/table.scss +0 -14
  250. package/themes/light/table/src/table-cell/table-cell.scss +0 -50
  251. package/themes/light/table/src/table-column/table-column.scss +0 -32
  252. package/themes/light/table/src/table-filter/table-filter.scss +0 -1
  253. package/themes/light/tabs/index.scss +0 -2
  254. package/themes/light/tabs/src/tabs/tabs.scss +0 -21
  255. package/themes/light/tabs/src/tabs-item/tabs-item.scss +0 -18
  256. package/themes/light/tags/index.scss +0 -2
  257. package/themes/light/tags/src/tags/tags.scss +0 -1
  258. package/themes/light/tags/src/tags-item/tags-item.scss +0 -28
  259. package/themes/light/textarea/index.scss +0 -1
  260. package/themes/light/textarea/src/textarea/textarea.scss +0 -29
  261. package/themes/light/timepicker/index.scss +0 -2
  262. package/themes/light/timepicker/src/timepicker/timepicker.scss +0 -49
  263. package/themes/light/timepicker/src/timepicker-panel/timepicker-panel.scss +0 -26
  264. package/themes/light/transfer/index.scss +0 -1
  265. package/themes/light/transfer/src/transfer/transfer.scss +0 -17
  266. package/themes/light/virtualscroller/index.scss +0 -1
  267. package/themes/light/virtualscroller/src/virtualscroller/virtualscroller.scss +0 -1
  268. /package/{themes/light → src}/root/image/empty-default.svg +0 -0
  269. /package/{themes/light → src}/root/image/empty-space.svg +0 -0
  270. /package/{themes/light → src}/root/image/star-default.svg +0 -0
package/docs/index.template.html ADDED
@@ -0,0 +1,76 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>nano.ui</title>
6
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
7
+ <meta name="description" content="Description">
8
+ <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
9
+
10
+ <link rel="icon" type="image/png" href="<%= htmlWebpackPlugin.options.base %>/favicon/favicon-96x96.png" sizes="96x96" />
11
+ <link rel="icon" type="image/svg+xml" href="<%= htmlWebpackPlugin.options.base %>/favicon/favicon.svg" />
12
+ <link rel="shortcut icon" href="<%= htmlWebpackPlugin.options.base %>/favicon/favicon.ico" />
13
+ <link rel="apple-touch-icon" sizes="180x180" href="<%= htmlWebpackPlugin.options.base %>/favicon/apple-touch-icon.png" />
14
+ <meta name="apple-mobile-web-app-title" content="nano.ui" />
15
+ <link rel="manifest" href="<%= htmlWebpackPlugin.options.base %>/favicon/site.webmanifest" />
16
+
17
+ <link rel="preconnect" href="https://fonts.googleapis.com">
18
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
19
+ <link href="https://fonts.googleapis.com/css2?family=Inter:ital,wght@0,400;0,500;0,700&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap" rel="stylesheet">
20
+
21
+ <link rel="stylesheet" href="//unpkg.com/backpack.css@2.0.0/lib/backpack.css">
22
+ <link rel="stylesheet" href="//unpkg.com/@fortawesome/fontawesome-free/css/all.min.css">
23
+ <link rel="stylesheet" href="<%= htmlWebpackPlugin.options.base %>/dist/nano-ui.css">
24
+ <link rel="stylesheet" data-theme-href="<%= htmlWebpackPlugin.options.base %>/dist/themes/{theme}.css">
25
+ <link rel="stylesheet" data-theme-href="<%= htmlWebpackPlugin.options.base %>/docs/dist/{theme}.css">
26
+
27
+ <style>
28
+ <%= htmlWebpackPlugin.options.loaderCss %>
29
+ </style>
30
+ </head>
31
+ <body>
32
+ <header>
33
+ <div class="wrapper">
34
+ <div class="logo">
35
+ <a href="<%= htmlWebpackPlugin.options.base %>/docs/#/README">
36
+ <img data-theme-src="<%= htmlWebpackPlugin.options.base %>/assets/nano-ui-{theme}.svg" alt="nano.ui">
37
+ </a>
38
+ </div>
39
+ <div class="logo logo-alt">
40
+ <a href="https://pico-js.vanki.de" target="_blank">
41
+ <img data-theme-src="<%= htmlWebpackPlugin.options.base %>/assets/pico-js-{theme}.svg" alt="pico.js">
42
+ </a>
43
+ </div>
44
+ <div class="spacer">
45
+ <!-- SPACER -->
46
+ </div>
47
+ <div class="theme">
48
+ <a href="javascript:void(0)" data-theme-light>Light</a>
49
+ </div>
50
+ <div class="theme last">
51
+ <a href="javascript:void(0)" data-theme-dark>Dark</a>
52
+ </div>
53
+ <div class="social black">
54
+ <a href="https://www.paypal.com/paypalme/vankizmann" target="_blank">
55
+ <i class="fab fa-paypal"></i> <span>Support</span>
56
+ </a>
57
+ </div>
58
+ <div class="social blue">
59
+ <a href="https://github.com/vankizmann/nano-ui" target="_blank">
60
+ <i class="fab fa-github"></i> <span>Github</span>
61
+ </a>
62
+ </div>
63
+ </div>
64
+ </header>
65
+ <div id="app">
66
+ <!-- Docs -->
67
+ </div>
68
+ <div class="loader">
69
+ <span>
70
+ <%= htmlWebpackPlugin.options.logoSvg %>
71
+ </span>
72
+ </div>
73
+
74
+ <script src="<%= htmlWebpackPlugin.options.base %>/docs/dist/docs.js" defer></script>
75
+ </body>
76
+ </html>
package/docs/src/js/backup.js ADDED
@@ -0,0 +1,128 @@
1
+
2
+ var GenerateItems = function (count, loop) {
3
+ return pi.Arr.each(pi.Arr.make(count), (index) => {
4
+
5
+ var item = {
6
+ id: 'item-' + pi.UUID(), label: 'Item ' + index, image: 'https://picsum.photos/260/160.jpg?' + pi.UUID(), date: new Date,
7
+ }
8
+
9
+ if ( loop > 1 ) {
10
+ item.children = GenerateItems(10, loop-1)
11
+ }
12
+
13
+ return item;
14
+ });
15
+ };
16
+
17
+ let DemoPlugin = function (hook, vm) {
18
+
19
+ // Global vue data
20
+ window.VueData = window.DefaultVueData = {
21
+ itemsMini: GenerateItems(50, 1),
22
+ itemsMidi: GenerateItems(500, 1),
23
+ itemsMaxi: GenerateItems(1000, 2),
24
+ };
25
+
26
+ window.DefaultVueData.types = {
27
+ 'primary': 'Primary',
28
+ 'secondary': 'Secondary',
29
+ 'success': 'Success',
30
+ 'warning': 'Warning',
31
+ 'danger': 'Danger',
32
+ 'info': 'Info',
33
+ };
34
+
35
+ window.DefaultVueData.sizes = {
36
+ 'xs': 'Mini',
37
+ 'sm': 'Small',
38
+ 'md': 'Medium',
39
+ 'lg': 'Large'
40
+ };
41
+
42
+ window.DefaultVueData.icons = {
43
+ 'fa fa-search': 'Search',
44
+ 'fa fa-star': 'Star',
45
+ 'fa fa-check': 'Check',
46
+ 'fa fa-trash': 'Trash'
47
+ },
48
+
49
+ // Remote vue app
50
+ window.VueRemote = null;
51
+
52
+ hook.beforeEach(function (markdown) {
53
+
54
+ pi.Dom.find('#temp-script').each(function (el) {
55
+ el.remove();
56
+ });
57
+
58
+ if ( ! pi.Any.isEmpty(window.VueData) ) {
59
+ window.VueData = pi.Obj.assign({}, window.DefaultVueData);
60
+ }
61
+
62
+ if ( ! pi.Any.isEmpty(window.VueRemote) ) {
63
+ window.VueRemote.unmount();
64
+ }
65
+
66
+ let pattern = /```js\s\[demo]([^`]*)```/gm;
67
+
68
+ let globaljs = pi.Arr.each(markdown.match(pattern) || [], (text) => {
69
+ return text.replace(pattern, "$1");
70
+ });
71
+
72
+ pi.Dom.make('script', { id: "temp-script", innerHTML: globaljs.join("\n")})
73
+ .appendTo(document.body)
74
+
75
+ markdown = markdown.replace(/```html\s\[demo]([^`]*)```/gm,
76
+ '<div class="demo-wrapper">$1</div>');
77
+
78
+ return markdown.replace(/```[a-z]+\s\[demo][^`]*```/gm, '');
79
+ });
80
+
81
+ hook.afterEach(function (html) {
82
+
83
+ html = html.replace(/<code>(Mixed|Any|String|Boolean|Array|Object)<\/code>/gm,
84
+ '<code data-type="$1">$1</code>');
85
+
86
+ return '<div id="vue-remote">' + html + '</div>';
87
+ });
88
+
89
+ hook.doneEach(function () {
90
+
91
+ let options = {
92
+ data: function () {
93
+ return window.VueData;
94
+ }
95
+ };
96
+
97
+ // Create vue instance
98
+ window.VueRemote = window.Vue
99
+ .createApp(options);
100
+
101
+ window.VueRemote
102
+ .use(window.nano.Install);
103
+
104
+ window.VueRemote.mount('#main');
105
+ });
106
+
107
+ console.log('DemoPlugin done!');
108
+ }
109
+
110
+ let options = {
111
+ name: 'nano.ui', loadSidebar: true, search: 'auto', depth: 1, subMaxLevel: 1, topMargin: 90
112
+ };
113
+
114
+ let PagetitlePlugin = function(hook, vm) {
115
+ hook.doneEach(function() {
116
+ document.title += ' | nano.ui';
117
+ });
118
+ }
119
+
120
+ options.plugins = [
121
+ DemoPlugin, PagetitlePlugin
122
+ ];
123
+
124
+ if ( pi.Any.isEmpty(options) ) {
125
+ options.repo = 'https://github.com/vankizmann/nano-ui'
126
+ }
127
+
128
+ window.$docsify = options;
package/docs/src/js/helper/item-helper.js ADDED
File without changes
package/docs/src/js/index.js ADDED
@@ -0,0 +1,21 @@
1
+
2
+ import * as Vue from "vue/dist/vue.esm-bundler";
3
+ window.Vue = Vue;
4
+
5
+ // docsify.js
6
+ window.$docsify = require('docsify')
7
+
8
+ // moment.js
9
+ window.moment = require('moment');
10
+
11
+ // pico.js
12
+ window.pi = require('@kizmann/pico-js');
13
+
14
+
15
+ window.pi.Dom.ready(() => {
16
+ require('./theme/basic.js');
17
+ require('./theme/docsify.js');
18
+
19
+ // docsify.js search plugin
20
+ require('docsify/lib/plugins/search');
21
+ });
package/docs/src/js/plugin/title-plugin.js ADDED
File without changes
package/docs/src/js/plugin/vue-demo-plugin.js ADDED
@@ -0,0 +1,97 @@
1
+ import { Dom, Obj, Arr, Any } from '@kizmann/pico-js';
2
+ import { Install as NanoInstall } from '../../../../src/index.js';
3
+
4
+ export const VueDemoPlugin = function (hook, vm) {
5
+
6
+ // Global vue data
7
+ window.VueData = window.DefaultVueData = {
8
+ // itemsMini: GenerateItems(50, 1),
9
+ // itemsMidi: GenerateItems(500, 1),
10
+ // itemsMaxi: GenerateItems(1000, 2),
11
+ };
12
+
13
+ window.DefaultVueData.types = {
14
+ 'primary': 'Primary',
15
+ 'secondary': 'Secondary',
16
+ 'success': 'Success',
17
+ 'warning': 'Warning',
18
+ 'danger': 'Danger',
19
+ 'info': 'Info',
20
+ };
21
+
22
+ window.DefaultVueData.sizes = {
23
+ 'xs': 'Mini',
24
+ 'sm': 'Small',
25
+ 'md': 'Medium',
26
+ 'lg': 'Large'
27
+ };
28
+
29
+ window.DefaultVueData.icons = {
30
+ 'fa fa-search': 'Search',
31
+ 'fa fa-star': 'Star',
32
+ 'fa fa-check': 'Check',
33
+ 'fa fa-trash': 'Trash'
34
+ },
35
+
36
+ // Remote vue app
37
+ window.VueRemote = null;
38
+
39
+ hook.beforeEach(function (markdown) {
40
+
41
+ Dom.find('#temp-script').each(function (el) {
42
+ el.remove();
43
+ });
44
+
45
+ if ( ! Any.isEmpty(window.VueData) ) {
46
+ window.VueData = Obj.assign({}, window.DefaultVueData);
47
+ }
48
+
49
+ if ( ! Any.isEmpty(window.VueRemote) ) {
50
+ window.VueRemote.unmount();
51
+ }
52
+
53
+ let pattern = /```js\s\[demo]([^`]*)```/gm;
54
+
55
+ let globaljs = Arr.each(markdown.match(pattern) || [], (text) => {
56
+ return text.replace(pattern, "$1");
57
+ });
58
+
59
+ Dom.make('script', { id: "temp-script", innerHTML: globaljs.join("\n")})
60
+ .appendTo(document.body)
61
+
62
+ markdown = markdown.replace(/```html\s\[demo]([^`]*)```/gm,
63
+ '<div class="demo-wrapper">$1</div>');
64
+
65
+ return markdown.replace(/```[a-z]+\s\[demo][^`]*```/gm, '');
66
+ });
67
+
68
+ hook.afterEach(function (html) {
69
+
70
+ html = html.replace(/<code>(Mixed|Any|String|Boolean|Array|Object)<\/code>/gm,
71
+ '<code data-type="$1">$1</code>');
72
+
73
+ return '<div id="vue-remote">' + html + '</div>';
74
+ });
75
+
76
+ hook.doneEach(function () {
77
+
78
+ let options = {
79
+ data: function () {
80
+ return Obj.clone(window.VueData);
81
+ }
82
+ };
83
+
84
+ // Create vue instance
85
+ window.VueRemote = window.Vue.createApp(options);
86
+
87
+ window.VueRemote.use((app) => {
88
+ NanoInstall(app)
89
+ });
90
+
91
+ window.VueRemote.mount('#main');
92
+ });
93
+
94
+ console.log('DemoPlugin done!');
95
+ }
96
+
97
+ export default VueDemoPlugin;
package/docs/src/js/theme/basic.js ADDED
@@ -0,0 +1,31 @@
1
+ import { Dom, Cookie } from "@kizmann/pico-js";
2
+
3
+ const theme = Cookie.get('theme', 'dark');
4
+
5
+ Dom.find('[data-theme-' + theme + ']').addClass('active');
6
+
7
+ Dom.find('[data-theme-light]').on('click', () => {
8
+ Cookie.set('theme', 'light'); window.location.reload();
9
+ });
10
+
11
+ Dom.find('[data-theme-dark]').on('click', () => {
12
+ Cookie.set('theme', 'dark'); window.location.reload();
13
+ });
14
+
15
+ Dom.find('[data-theme-src]').each((el) => {
16
+ el.src = Dom.find(el).attr('data-theme-src').replace('{theme}', theme);
17
+ });
18
+
19
+ Dom.find('[data-theme-href]').each((el) => {
20
+ el.href = Dom.find(el).attr('data-theme-href').replace('{theme}', theme);
21
+ });
22
+
23
+ Dom.find(document.body).live('click', '.matching-post', () => {
24
+ Dom.find('input[type="search"]').value('').fire('input');
25
+ });
26
+
27
+ Dom.find(document.body).on('keydown', (e) => {
28
+ if ( e.keyCode === 27 ) {
29
+ Dom.find('input[type="search"]').value('').fire('input');
30
+ }
31
+ });
package/docs/src/js/theme/docsify.js ADDED
@@ -0,0 +1,11 @@
1
+ import VueDemoPlugin from "../plugin/vue-demo-plugin.js";
2
+
3
+ let options = {
4
+ name: 'nano.ui', loadSidebar: true, search: 'auto', depth: 1, subMaxLevel: 1, topMargin: 90
5
+ };
6
+
7
+ options.plugins = [
8
+ VueDemoPlugin
9
+ ]
10
+
11
+ window.$docsify = options;
package/docs/src/scss/index-dark.scss ADDED
@@ -0,0 +1,3 @@
1
+ @import "./root/vars-dark";
2
+
3
+ @import "./index";
package/docs/src/scss/index-light.scss ADDED
@@ -0,0 +1,3 @@
1
+ @import "./root/vars-light";
2
+
3
+ @import "./index";