@king-design/react 3.0.0 → 3.1.0-beta.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 (381) hide show
  1. package/__tests__/__snapshots__/Dialog.md +1 -1
  2. package/__tests__/__snapshots__/React Demos.md +268 -268
  3. package/components/affix/index.d.ts +1 -0
  4. package/components/affix/index.js +2 -0
  5. package/components/affix/index.vdt.js +5 -5
  6. package/components/affix/styles.d.ts +1 -1
  7. package/components/affix/styles.js +1 -1
  8. package/components/badge/index.d.ts +1 -0
  9. package/components/badge/index.js +13 -1
  10. package/components/badge/index.vdt.js +5 -4
  11. package/components/badge/styles.d.ts +1 -1
  12. package/components/badge/styles.js +2 -2
  13. package/components/breadcrumb/index.d.ts +1 -0
  14. package/components/breadcrumb/index.js +13 -1
  15. package/components/breadcrumb/index.vdt.js +4 -5
  16. package/components/breadcrumb/item.d.ts +1 -0
  17. package/components/breadcrumb/item.js +2 -0
  18. package/components/breadcrumb/item.vdt.js +4 -5
  19. package/components/breadcrumb/styles.d.ts +1 -1
  20. package/components/breadcrumb/styles.js +2 -2
  21. package/components/button/group.d.ts +1 -0
  22. package/components/button/group.js +13 -1
  23. package/components/button/group.vdt.js +2 -6
  24. package/components/button/index.d.ts +1 -0
  25. package/components/button/index.js +2 -0
  26. package/components/button/index.vdt.js +7 -7
  27. package/components/button/styles.d.ts +2 -4
  28. package/components/button/styles.js +19 -20
  29. package/components/card/column.d.ts +1 -0
  30. package/components/card/column.js +13 -1
  31. package/components/card/column.vdt.js +2 -5
  32. package/components/card/index.d.ts +1 -0
  33. package/components/card/index.js +13 -1
  34. package/components/card/index.vdt.js +5 -11
  35. package/components/card/styles.d.ts +1 -1
  36. package/components/card/styles.js +2 -2
  37. package/components/carousel/index.d.ts +1 -0
  38. package/components/carousel/index.js +2 -0
  39. package/components/carousel/index.vdt.js +15 -19
  40. package/components/carousel/item.d.ts +1 -0
  41. package/components/carousel/item.js +13 -1
  42. package/components/carousel/item.vdt.js +2 -3
  43. package/components/carousel/styles.d.ts +2 -2
  44. package/components/carousel/styles.js +4 -4
  45. package/components/cascader/index.vdt.js +20 -29
  46. package/components/cascader/styles.d.ts +2 -2
  47. package/components/cascader/styles.js +3 -3
  48. package/components/checkbox/index.d.ts +1 -0
  49. package/components/checkbox/index.js +2 -0
  50. package/components/checkbox/index.vdt.js +4 -8
  51. package/components/checkbox/styles.d.ts +1 -1
  52. package/components/checkbox/styles.js +2 -2
  53. package/components/code/index.d.ts +1 -0
  54. package/components/code/index.js +2 -0
  55. package/components/code/index.vdt.js +2 -3
  56. package/components/code/styles.d.ts +1 -1
  57. package/components/code/styles.js +1 -1
  58. package/components/collapse/index.d.ts +1 -0
  59. package/components/collapse/index.js +13 -1
  60. package/components/collapse/index.vdt.js +2 -3
  61. package/components/collapse/item.d.ts +1 -0
  62. package/components/collapse/item.js +2 -0
  63. package/components/collapse/item.vdt.js +6 -8
  64. package/components/collapse/styles.d.ts +2 -3
  65. package/components/collapse/styles.js +5 -9
  66. package/components/colorpicker/drag.d.ts +1 -0
  67. package/components/colorpicker/drag.js +2 -0
  68. package/components/colorpicker/drag.vdt.js +3 -2
  69. package/components/colorpicker/index.d.ts +1 -0
  70. package/components/colorpicker/index.js +13 -1
  71. package/components/colorpicker/index.vdt.js +5 -6
  72. package/components/colorpicker/panel.d.ts +1 -0
  73. package/components/colorpicker/panel.js +2 -0
  74. package/components/colorpicker/panel.vdt.js +16 -19
  75. package/components/colorpicker/styles.d.ts +3 -3
  76. package/components/colorpicker/styles.js +8 -8
  77. package/components/config/index.d.ts +10 -0
  78. package/components/config/index.js +23 -0
  79. package/components/config/index.spec.d.ts +1 -0
  80. package/components/config/index.spec.js +71 -0
  81. package/components/context.d.ts +2 -1
  82. package/components/context.js +8 -2
  83. package/components/copy/index.d.ts +1 -0
  84. package/components/copy/index.js +2 -0
  85. package/components/copy/index.vdt.js +9 -9
  86. package/components/copy/styles.d.ts +1 -1
  87. package/components/copy/styles.js +1 -1
  88. package/components/datepicker/calendar.d.ts +1 -0
  89. package/components/datepicker/calendar.js +2 -0
  90. package/components/datepicker/calendar.vdt.js +38 -51
  91. package/components/datepicker/index.vdt.js +13 -16
  92. package/components/datepicker/styles.d.ts +3 -3
  93. package/components/datepicker/styles.js +6 -6
  94. package/components/datepicker/time.d.ts +1 -0
  95. package/components/datepicker/time.js +2 -0
  96. package/components/datepicker/time.vdt.js +2 -3
  97. package/components/diagram/diagram.d.ts +1 -0
  98. package/components/diagram/diagram.js +2 -0
  99. package/components/diagram/diagram.vdt.js +3 -4
  100. package/components/diagram/styles.d.ts +1 -1
  101. package/components/diagram/styles.js +1 -1
  102. package/components/dialog/alert.vdt.js +6 -10
  103. package/components/dialog/base.d.ts +4 -0
  104. package/components/dialog/base.js +2 -0
  105. package/components/dialog/base.vdt.js +15 -21
  106. package/components/dialog/index.d.ts +1 -1
  107. package/components/dialog/styles.d.ts +3 -3
  108. package/components/dialog/styles.js +12 -12
  109. package/components/drawer/index.vdt.js +3 -4
  110. package/components/drawer/styles.d.ts +1 -1
  111. package/components/drawer/styles.js +3 -3
  112. package/components/dropdown/dropdown.d.ts +1 -0
  113. package/components/dropdown/dropdown.js +4 -3
  114. package/components/dropdown/item.d.ts +1 -0
  115. package/components/dropdown/item.js +2 -0
  116. package/components/dropdown/item.vdt.js +2 -4
  117. package/components/dropdown/menu.d.ts +1 -0
  118. package/components/dropdown/menu.js +2 -0
  119. package/components/dropdown/menu.vdt.js +2 -3
  120. package/components/dropdown/styles.d.ts +2 -2
  121. package/components/dropdown/styles.js +4 -4
  122. package/components/dropdown/usePosition.js +2 -2
  123. package/components/editable/index.d.ts +1 -0
  124. package/components/editable/index.js +2 -0
  125. package/components/editable/index.vdt.js +3 -7
  126. package/components/editable/styles.d.ts +1 -1
  127. package/components/editable/styles.js +2 -2
  128. package/components/form/form.d.ts +1 -0
  129. package/components/form/form.js +2 -0
  130. package/components/form/form.vdt.js +2 -3
  131. package/components/form/item.d.ts +1 -0
  132. package/components/form/item.js +2 -0
  133. package/components/form/item.vdt.js +13 -19
  134. package/components/form/styles.d.ts +2 -2
  135. package/components/form/styles.js +5 -5
  136. package/components/form/useError.d.ts +1 -0
  137. package/components/grid/col.d.ts +1 -0
  138. package/components/grid/col.js +2 -0
  139. package/components/grid/col.vdt.js +3 -6
  140. package/components/grid/row.d.ts +1 -0
  141. package/components/grid/row.js +2 -0
  142. package/components/grid/row.vdt.js +2 -3
  143. package/components/grid/styles.d.ts +2 -2
  144. package/components/grid/styles.js +8 -18
  145. package/components/grid/useBreakpoints.d.ts +1 -1
  146. package/components/grid/useBreakpoints.js +2 -2
  147. package/components/grid/useGutter.d.ts +1 -0
  148. package/components/icon/index.d.ts +1 -0
  149. package/components/icon/index.js +2 -0
  150. package/components/icon/index.vdt.js +7 -11
  151. package/components/icon/styles.d.ts +1 -2
  152. package/components/icon/styles.js +7 -5
  153. package/components/input/index.d.ts +1 -0
  154. package/components/input/index.js +2 -0
  155. package/components/input/index.vdt.js +16 -26
  156. package/components/input/search.d.ts +1 -0
  157. package/components/input/search.js +2 -0
  158. package/components/input/search.vdt.js +5 -7
  159. package/components/input/styles.d.ts +2 -2
  160. package/components/input/styles.js +11 -11
  161. package/components/layout/aside.d.ts +1 -0
  162. package/components/layout/aside.js +2 -0
  163. package/components/layout/aside.vdt.js +5 -8
  164. package/components/layout/body.d.ts +2 -0
  165. package/components/layout/body.js +11 -5
  166. package/components/layout/footer.d.ts +1 -0
  167. package/components/layout/footer.js +15 -4
  168. package/components/layout/header.d.ts +3 -0
  169. package/components/layout/header.js +10 -6
  170. package/components/layout/helpers.d.ts +1 -0
  171. package/components/layout/helpers.js +1 -0
  172. package/components/layout/index.spec.d.ts +1 -0
  173. package/components/layout/index.spec.js +53 -0
  174. package/components/layout/layout.d.ts +2 -0
  175. package/components/layout/layout.js +7 -5
  176. package/components/layout/styles.d.ts +3 -3
  177. package/components/layout/styles.js +11 -11
  178. package/components/layout/template.vdt.js +2 -1
  179. package/components/menu/item.d.ts +1 -0
  180. package/components/menu/item.js +2 -0
  181. package/components/menu/item.vdt.js +7 -12
  182. package/components/menu/menu.d.ts +1 -0
  183. package/components/menu/menu.js +2 -0
  184. package/components/menu/menu.vdt.js +3 -6
  185. package/components/menu/styles.d.ts +3 -3
  186. package/components/menu/styles.js +11 -11
  187. package/components/menu/useDropdown.js +6 -1
  188. package/components/message/message.d.ts +1 -0
  189. package/components/message/message.js +2 -0
  190. package/components/message/message.vdt.js +12 -17
  191. package/components/message/messages.d.ts +1 -0
  192. package/components/message/messages.js +2 -0
  193. package/components/message/messages.vdt.js +2 -3
  194. package/components/message/styles.d.ts +2 -2
  195. package/components/message/styles.js +4 -4
  196. package/components/pagination/index.d.ts +1 -0
  197. package/components/pagination/index.js +2 -0
  198. package/components/pagination/index.vdt.js +14 -17
  199. package/components/pagination/styles.d.ts +1 -1
  200. package/components/pagination/styles.js +4 -4
  201. package/components/popover/content.vdt.js +5 -4
  202. package/components/popover/styles.d.ts +1 -1
  203. package/components/popover/styles.js +2 -2
  204. package/components/portal.d.ts +1 -0
  205. package/components/portal.js +3 -1
  206. package/components/progress/index.d.ts +1 -0
  207. package/components/progress/index.js +2 -0
  208. package/components/progress/index.vdt.js +14 -17
  209. package/components/progress/styles.d.ts +1 -1
  210. package/components/progress/styles.js +6 -6
  211. package/components/radio/index.d.ts +1 -0
  212. package/components/radio/index.js +2 -0
  213. package/components/radio/index.vdt.js +4 -7
  214. package/components/radio/styles.d.ts +1 -1
  215. package/components/radio/styles.js +2 -2
  216. package/components/rate/index.d.ts +1 -0
  217. package/components/rate/index.js +2 -0
  218. package/components/rate/index.vdt.js +4 -8
  219. package/components/rate/styles.d.ts +1 -1
  220. package/components/rate/styles.js +2 -2
  221. package/components/scrollSelect/index.d.ts +1 -0
  222. package/components/scrollSelect/index.js +2 -0
  223. package/components/scrollSelect/index.vdt.js +7 -12
  224. package/components/scrollSelect/styles.d.ts +1 -1
  225. package/components/scrollSelect/styles.js +2 -2
  226. package/components/select/base.d.ts +4 -0
  227. package/components/select/base.js +2 -0
  228. package/components/select/base.vdt.js +17 -21
  229. package/components/select/group.d.ts +1 -0
  230. package/components/select/group.js +2 -0
  231. package/components/select/group.vdt.js +3 -4
  232. package/components/select/menu.d.ts +1 -0
  233. package/components/select/menu.js +2 -0
  234. package/components/select/menu.vdt.js +9 -13
  235. package/components/select/option.d.ts +1 -0
  236. package/components/select/option.js +2 -0
  237. package/components/select/option.vdt.js +6 -8
  238. package/components/select/styles.d.ts +3 -3
  239. package/components/select/styles.js +8 -8
  240. package/components/select/useSearchable.d.ts +1 -0
  241. package/components/skeleton/item.d.ts +1 -0
  242. package/components/skeleton/item.js +13 -1
  243. package/components/skeleton/item.vdt.js +4 -7
  244. package/components/skeleton/skeleton.d.ts +1 -0
  245. package/components/skeleton/skeleton.js +13 -1
  246. package/components/skeleton/skeleton.vdt.js +4 -6
  247. package/components/skeleton/styles.d.ts +6 -0
  248. package/components/skeleton/styles.js +35 -0
  249. package/components/slider/index.d.ts +1 -0
  250. package/components/slider/index.js +2 -0
  251. package/components/slider/index.vdt.js +18 -22
  252. package/components/slider/styles.d.ts +1 -1
  253. package/components/slider/styles.js +2 -2
  254. package/components/spin/index.d.ts +1 -0
  255. package/components/spin/index.js +13 -1
  256. package/components/spin/index.vdt.js +6 -7
  257. package/components/spin/styles.d.ts +1 -1
  258. package/components/spin/styles.js +4 -4
  259. package/components/spinner/index.d.ts +1 -0
  260. package/components/spinner/index.js +2 -0
  261. package/components/spinner/index.vdt.js +15 -21
  262. package/components/spinner/styles.d.ts +1 -1
  263. package/components/spinner/styles.js +7 -7
  264. package/components/split/index.d.ts +2 -1
  265. package/components/split/index.js +2 -0
  266. package/components/split/index.vdt.js +7 -9
  267. package/components/split/styles.d.ts +4 -0
  268. package/components/split/styles.js +55 -0
  269. package/components/steps/context.d.ts +1 -0
  270. package/components/steps/index.d.ts +1 -0
  271. package/components/steps/index.js +13 -1
  272. package/components/steps/index.vdt.js +2 -3
  273. package/components/steps/step.d.ts +1 -0
  274. package/components/steps/step.js +13 -1
  275. package/components/steps/step.vdt.js +10 -16
  276. package/components/steps/styles.d.ts +3 -3
  277. package/components/steps/styles.js +18 -18
  278. package/components/switch/index.d.ts +1 -0
  279. package/components/switch/index.js +2 -0
  280. package/components/switch/index.vdt.js +6 -7
  281. package/components/switch/styles.d.ts +1 -1
  282. package/components/switch/styles.js +4 -4
  283. package/components/table/cell.d.ts +1 -0
  284. package/components/table/cell.js +13 -1
  285. package/components/table/cell.vdt.js +6 -6
  286. package/components/table/column.d.ts +1 -0
  287. package/components/table/column.js +2 -0
  288. package/components/table/column.vdt.js +24 -32
  289. package/components/table/index.spec.js +1 -1
  290. package/components/table/row.d.ts +1 -0
  291. package/components/table/row.js +21 -2
  292. package/components/table/row.vdt.js +3 -10
  293. package/components/table/styles.d.ts +2 -2
  294. package/components/table/styles.js +6 -6
  295. package/components/table/table.d.ts +2 -1
  296. package/components/table/table.js +3 -1
  297. package/components/table/table.vdt.js +16 -20
  298. package/components/table/useColumns.d.ts +1 -0
  299. package/components/table/useFixedColumns.d.ts +2 -1
  300. package/components/table/useGroup.d.ts +1 -0
  301. package/components/table/usePagination.js +1 -1
  302. package/components/table/useResizable.d.ts +1 -0
  303. package/components/table/useSortable.d.ts +1 -0
  304. package/components/tabs/index.d.ts +4 -0
  305. package/components/tabs/index.js +2 -0
  306. package/components/tabs/index.vdt.js +9 -10
  307. package/components/tabs/styles.d.ts +1 -1
  308. package/components/tabs/styles.js +15 -15
  309. package/components/tabs/tab.d.ts +1 -0
  310. package/components/tabs/tab.js +2 -0
  311. package/components/tabs/tab.vdt.js +3 -5
  312. package/components/tabs/useActiveBar.js +2 -1
  313. package/components/tabs/useScroll.js +2 -1
  314. package/components/tag/base.d.ts +1 -0
  315. package/components/tag/base.js +13 -1
  316. package/components/tag/index.vdt.js +4 -5
  317. package/components/tag/styles.d.ts +2 -2
  318. package/components/tag/styles.js +7 -7
  319. package/components/tag/tags.d.ts +1 -0
  320. package/components/tag/tags.js +2 -0
  321. package/components/tag/tags.vdt.js +5 -11
  322. package/components/timeline/item.d.ts +1 -0
  323. package/components/timeline/item.js +13 -1
  324. package/components/timeline/item.vdt.js +4 -5
  325. package/components/timeline/styles.d.ts +2 -2
  326. package/components/timeline/styles.js +6 -6
  327. package/components/timeline/timeline.d.ts +1 -0
  328. package/components/timeline/timeline.js +13 -1
  329. package/components/timeline/timeline.vdt.js +2 -3
  330. package/components/timepicker/index.d.ts +2 -1
  331. package/components/timepicker/panelPicker.vdt.js +13 -17
  332. package/components/timepicker/selectPicker.d.ts +1 -0
  333. package/components/timepicker/selectPicker.js +2 -0
  334. package/components/timepicker/selectPicker.vdt.js +4 -4
  335. package/components/timepicker/styles.d.ts +1 -1
  336. package/components/timepicker/styles.js +2 -2
  337. package/components/tip/index.vdt.js +5 -6
  338. package/components/tip/styles.d.ts +1 -1
  339. package/components/tip/styles.js +2 -2
  340. package/components/tooltip/content.vdt.js +4 -9
  341. package/components/tooltip/styles.d.ts +1 -1
  342. package/components/tooltip/styles.js +6 -6
  343. package/components/transfer/index.d.ts +1 -0
  344. package/components/transfer/index.js +2 -0
  345. package/components/transfer/index.vdt.js +20 -25
  346. package/components/transfer/styles.d.ts +1 -1
  347. package/components/transfer/styles.js +2 -2
  348. package/components/tree/index.d.ts +1 -0
  349. package/components/tree/index.js +2 -0
  350. package/components/tree/index.vdt.js +19 -30
  351. package/components/tree/styles.d.ts +1 -1
  352. package/components/tree/styles.js +2 -2
  353. package/components/treeSelect/index.vdt.js +2 -3
  354. package/components/treeSelect/styles.d.ts +1 -1
  355. package/components/treeSelect/styles.js +1 -1
  356. package/components/upload/index.d.ts +1 -0
  357. package/components/upload/index.js +2 -0
  358. package/components/upload/index.vdt.js +39 -50
  359. package/components/upload/styles.d.ts +2 -2
  360. package/components/upload/styles.js +3 -3
  361. package/components/utils.d.ts +3 -1
  362. package/components/utils.js +36 -9
  363. package/components/virtual.js +5 -2
  364. package/components/wave/index.d.ts +1 -0
  365. package/components/wave/index.js +4 -2
  366. package/components/wave/styles.d.ts +1 -1
  367. package/components/wave/styles.js +2 -2
  368. package/index.d.ts +3 -2
  369. package/index.js +3 -2
  370. package/package.json +2 -2
  371. package/styles/fonts/iconfont.d.ts +1 -1
  372. package/styles/fonts/iconfont.js +4 -1
  373. package/styles/global.js +4 -4
  374. package/styles/theme.d.ts +1 -1
  375. package/styles/theme.js +4 -53
  376. package/styles/utils.d.ts +1 -0
  377. package/styles/utils.js +3 -0
  378. package/components/skeleton/style.d.ts +0 -6
  379. package/components/skeleton/style.js +0 -35
  380. package/components/split/style.d.ts +0 -4
  381. package/components/split/style.js +0 -55
package/components/layout/index.spec.js ADDED
@@ -0,0 +1,53 @@
1
+ import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
2
+ import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
3
+ import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
4
+ import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
5
+ import { mount, unmount } from '../../test/utils';
6
+ import { Component } from 'intact-react';
7
+ import { Layout, Header, Aside, Body } from './';
8
+ describe('Layout', function () {
9
+ afterEach(function () {
10
+ unmount();
11
+ });
12
+ it('nest Layout in Body with fixed header', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
13
+ var Demo, _mount, instance, element;
14
+
15
+ return _regeneratorRuntime.wrap(function _callee$(_context2) {
16
+ while (1) {
17
+ switch (_context2.prev = _context2.next) {
18
+ case 0:
19
+ Demo = /*#__PURE__*/function (_Component) {
20
+ _inheritsLoose(Demo, _Component);
21
+
22
+ function Demo() {
23
+ var _context;
24
+
25
+ var _this;
26
+
27
+ for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
28
+ args[_key] = arguments[_key];
29
+ }
30
+
31
+ _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
32
+ _this.Layout = Layout;
33
+ _this.Header = Header;
34
+ _this.Aside = Aside;
35
+ _this.Body = Body;
36
+ return _this;
37
+ }
38
+
39
+ return Demo;
40
+ }(Component);
41
+
42
+ Demo.template = "\n const { Layout, Header, Aside, Body } = this;\n <Layout>\n <Header fixed />\n <Body>\n <Layout>\n <Aside fixed />\n <Body>body</Body>\n </Layout>\n </Body>\n </Layout>\n ";
43
+ _mount = mount(Demo), instance = _mount[0], element = _mount[1];
44
+ expect(element.innerHTML).to.matchSnapshot();
45
+
46
+ case 4:
47
+ case "end":
48
+ return _context2.stop();
49
+ }
50
+ }
51
+ }, _callee);
52
+ })));
53
+ });
package/components/layout/layout.d.ts CHANGED
@@ -9,6 +9,8 @@ export declare class Layout extends Component {
9
9
  asideWidth: string | number;
10
10
  };
11
11
  layout: Layout | null;
12
+ private body;
13
+ private config;
12
14
  init(): void;
13
15
  private getClassNames;
14
16
  private getStyles;
package/components/layout/layout.js CHANGED
@@ -4,8 +4,9 @@ import { Component, inject, provide } from 'intact-react';
4
4
  import template from './template.vdt';
5
5
  import { makeLayoutStyles } from './styles';
6
6
  import { addStyle } from '../utils';
7
- import { ROOT_LAYOUT, LAYOUT, getStyle } from './helpers';
7
+ import { ROOT_LAYOUT, LAYOUT, getStyle, BODY } from './helpers';
8
8
  import { useParse } from './useParse';
9
+ import { useConfigContext } from '../config';
9
10
  export var Layout = /*#__PURE__*/function (_Component) {
10
11
  _inheritsLoose(Layout, _Component);
11
12
 
@@ -21,6 +22,8 @@ export var Layout = /*#__PURE__*/function (_Component) {
21
22
  _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
22
23
  _this.parse = useParse();
23
24
  _this.layout = inject(LAYOUT, null);
25
+ _this.body = inject(BODY, null);
26
+ _this.config = useConfigContext();
24
27
  return _this;
25
28
  }
26
29
 
@@ -44,15 +47,14 @@ export var Layout = /*#__PURE__*/function (_Component) {
44
47
  var _this$parse = this.parse(),
45
48
  hasAside = _this$parse.hasAside;
46
49
 
47
- return _ref = {
48
- 'k-layout': true
49
- }, _ref["k-has-aside"] = hasAside, _ref[makeLayoutStyles()] = true, _ref[className] = className, _ref;
50
+ var k = this.config.k;
51
+ return _ref = {}, _ref[k + "-layout"] = true, _ref[k + "-has-aside"] = hasAside, _ref[makeLayoutStyles(k)] = true, _ref[className] = className, _ref;
50
52
  };
51
53
 
52
54
  _proto.getStyles = function getStyles() {
53
55
  var style = this.get('style');
54
56
  var layout = this.layout;
55
- if (!layout) return style;
57
+ if (!layout || this.body) return style;
56
58
 
57
59
  var _layout$parse = layout.parse(),
58
60
  hasFixedHeader = _layout$parse.hasFixedHeader,
package/components/layout/styles.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import '../../styles/global';
2
2
  export declare const themes: readonly ["light", "dark", "white"];
3
3
  export declare function getCollapseWidth(): string;
4
- export declare function makeLayoutStyles(): string;
5
- export declare function makeHeaderStyles(): string;
6
- export declare function makeAsideStyles(): string;
4
+ export declare function makeLayoutStyles(k: string): string;
5
+ export declare function makeHeaderStyles(k: string): string;
6
+ export declare function makeAsideStyles(k: string): string;
package/components/layout/styles.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import _mapInstanceProperty from "@babel/runtime-corejs3/core-js/instance/map";
2
2
  import { css } from '@emotion/css';
3
3
  import { theme, setDefault } from '../../styles/theme';
4
- import { deepDefaults, getLeft } from '../../styles/utils';
4
+ import { deepDefaults, getLeft, setAlpha } from '../../styles/utils';
5
5
  import '../../styles/global';
6
6
  import { menu } from '../menu/styles';
7
7
  var sizes = ['small', 'large'];
@@ -21,7 +21,7 @@ var defaults = {
21
21
 
22
22
  light: {
23
23
  get color() {
24
- return menu.light.bgColor;
24
+ return menu.light.item.color;
25
25
  },
26
26
 
27
27
  get bgColor() {
@@ -35,7 +35,7 @@ var defaults = {
35
35
  },
36
36
  white: {
37
37
  get color() {
38
- return menu.white.bgColor;
38
+ return menu.white.item.color;
39
39
  },
40
40
 
41
41
  get bgColor() {
@@ -64,20 +64,20 @@ setDefault(function () {
64
64
  export function getCollapseWidth() {
65
65
  return layout.collapsedWidth;
66
66
  }
67
- export function makeLayoutStyles() {
68
- return /*#__PURE__*/css("display:flex;flex-direction:column;flex:1;transition:padding-left ", layout.transition, ";&.k-has-aside{flex-direction:row;}.k-layout-footer{padding:", layout.footerPadding, ";}.k-layout-body{flex:1;}");
67
+ export function makeLayoutStyles(k) {
68
+ return /*#__PURE__*/css("display:flex;flex-direction:column;flex:1;transition:padding-left ", layout.transition, ";&.", k, "-has-aside{flex-direction:row;}.", k, "-layout-footer{padding:", layout.footerPadding, ";}.", k, "-layout-body{flex:1;}");
69
69
  }
70
- export function makeHeaderStyles() {
71
- return /*#__PURE__*/css("display:flex;align-items:center;color:", layout.color, ";background:", layout.bgColor, ";left:0;transition:left ", layout.transition, ";&.k-fixed{position:fixed;left:0;right:0;top:0;z-index:", theme.midZIndex + 1, ";}", _mapInstanceProperty(themes).call(themes, function (theme) {
70
+ export function makeHeaderStyles(k) {
71
+ return /*#__PURE__*/css("display:flex;align-items:center;color:", layout.color, ";background:", layout.bgColor, ";left:0;transition:left ", layout.transition, ";&.", k, "-fixed{position:fixed;left:0;right:0;top:0;z-index:", theme.midZIndex + 1, ";}>.", k, "-menu{background:transparent!important;}&.", k, "-blur{backdrop-filter:blur(20px);background:", setAlpha(layout.bgColor, 0.1), ";}&.", k, "-box-shadow{border-bottom:none!important;box-shadow:", theme.boxShadow, ";}", _mapInstanceProperty(themes).call(themes, function (theme) {
72
72
  if (theme === 'dark') return;
73
73
  var styles = layout[theme];
74
- return /*#__PURE__*/css("&.k-", theme, "{background:", styles.bgColor, ";color:", styles.color, ";border-bottom:", styles.border, ";}");
74
+ return /*#__PURE__*/css("&.", k, "-", theme, "{background:", styles.bgColor, ";color:", styles.color, ";border-bottom:", styles.border, ";&.", k, "-blur{background:", setAlpha(styles.bgColor, 0.1), ";}}");
75
75
  }), ";");
76
76
  }
77
- export function makeAsideStyles() {
77
+ export function makeAsideStyles(k) {
78
78
  return /*#__PURE__*/css("transition:width ", layout.transition, ";display:flex;flex-direction:column;background:", layout.bgColor, ";color:", layout.color, ";", _mapInstanceProperty(themes).call(themes, function (theme) {
79
79
  if (theme === 'dark') return;
80
80
  var styles = layout[theme];
81
- return /*#__PURE__*/css("&.k-", theme, "{background:", styles.bgColor, ";color:", styles.color, ";border-right:", styles.border, ";}");
82
- }), " &.k-fixed{position:fixed;overflow:auto;left:0;top:0;bottom:0;z-index:", theme.midZIndex, ";}.k-menu{width:auto!important;}");
81
+ return /*#__PURE__*/css("&.", k, "-", theme, "{background:", styles.bgColor, ";color:", styles.color, ";border-right:", styles.border, ";}");
82
+ }), " &.", k, "-fixed{position:fixed;overflow:auto;left:0;top:0;bottom:0;z-index:", theme.midZIndex, ";}.", k, "-menu{width:auto!important;}");
83
83
  }
package/components/layout/template.vdt.js CHANGED
@@ -10,9 +10,10 @@ export default function ($props, $blocks, $__proto__) {
10
10
  children = _this$get.children,
11
11
  style = _this$get.style;
12
12
 
13
+ var k = this.config.k;
13
14
  return _$cv('div', _extends({
14
15
  'className': _$cn(this.getClassNames()),
15
- 'style': this.getStyles ? this.getStyles() : style
16
+ 'style': this.getStyles ? this.getStyles(k) : style
16
17
  }, getRestProps(this)), children);
17
18
  }
18
19
  ;
package/components/menu/item.d.ts CHANGED
@@ -22,6 +22,7 @@ export declare class MenuItem extends Component<MenuItemProps, MenuItemEvents> {
22
22
  private expanded;
23
23
  private dropdown;
24
24
  private router;
25
+ private config;
25
26
  init(): void;
26
27
  onClick(hasSubMenu: Menu, e: MouseEvent): void;
27
28
  }
package/components/menu/item.js CHANGED
@@ -10,6 +10,7 @@ import { useDropdown } from './useDropdown';
10
10
  import { useRouter, navigate } from '../../hooks/useRouter';
11
11
  import { useRecordItem } from '../../hooks/useRecordComponent';
12
12
  import { MENU_RECORD_KEY, useHighlightItem } from './useHighlight';
13
+ import { useConfigContext } from '../config';
13
14
  var typeDefs = {
14
15
  key: {
15
16
  type: [String, Number],
@@ -43,6 +44,7 @@ export var MenuItem = /*#__PURE__*/function (_Component) {
43
44
  _this.expanded = useExpanded(_this.rootMenu, _this.parentMenu);
44
45
  _this.dropdown = useDropdown(_this.rootMenu, _this.parentMenu);
45
46
  _this.router = useRouter();
47
+ _this.config = useConfigContext();
46
48
  return _this;
47
49
  }
48
50
 
package/components/menu/item.vdt.js CHANGED
@@ -8,12 +8,6 @@ import { Menu } from './menu';
8
8
  import { getRestProps, expandAnimationCallbacks } from '../utils';
9
9
  import { isNullOrUndefined } from 'intact-shared';
10
10
  import { makeItemStyles, makeTitleStyles } from './styles';
11
- var _$tmp0 = {
12
- 'className': 'k-menu-dot ion-record'
13
- };
14
- var _$tmp1 = {
15
- 'className': 'k-menu-arrow k-icon-down'
16
- };
17
11
  export default function ($props, $blocks, $__proto__) {
18
12
  var _classNameObj,
19
13
  _this = this;
@@ -51,17 +45,18 @@ export default function ($props, $blocks, $__proto__) {
51
45
  position = _this$dropdown.position,
52
46
  isCollapse = _this$dropdown.isCollapse;
53
47
 
54
- var classNameObj = (_classNameObj = {
55
- 'k-menu-item': true
56
- }, _classNameObj[className] = className, _classNameObj['k-expanded'] = isExpanded, _classNameObj['k-disabled'] = disabled, _classNameObj['k-active'] = isSelected(key), _classNameObj['k-highlighted'] = isHighlighted(key), _classNameObj[makeItemStyles()] = true, _classNameObj);
48
+ var k = this.config.k;
49
+ var classNameObj = (_classNameObj = {}, _classNameObj[k + "-menu-item"] = true, _classNameObj[className] = className, _classNameObj[k + "-expanded"] = isExpanded, _classNameObj[k + "-disabled"] = disabled, _classNameObj[k + "-active"] = isSelected(key), _classNameObj[k + "-highlighted"] = isHighlighted(key), _classNameObj[makeItemStyles(k)] = true, _classNameObj);
57
50
  var showDot = isTopItem && !iconVNode && isNullOrUndefined(dot) ? rootDot : dot;
58
51
 
59
52
  var title = function title(children) {
60
53
  var _$cn2;
61
54
 
62
- return _$ce(2, 'div', [showDot ? _$cc(Icon, _$tmp0) : undefined, _$ce(2, 'div', children, 0, 'k-menu-name'), subMenuVNode ? _$cc(Icon, _$tmp1) : undefined], 0, _$cn((_$cn2 = {
63
- 'k-menu-title': true
64
- }, _$cn2[makeTitleStyles()] = true, _$cn2)), {
55
+ return _$ce(2, 'div', [showDot ? _$cc(Icon, {
56
+ 'className': _$cn(k + "-menu-dot ion-record")
57
+ }) : undefined, _$ce(2, 'div', children, 0, _$cn(k + "-menu-name")), subMenuVNode ? _$cc(Icon, {
58
+ 'className': _$cn(k + "-menu-arrow " + k + "-icon-down")
59
+ }) : undefined], 0, _$cn((_$cn2 = {}, _$cn2[k + "-menu-title"] = true, _$cn2[makeTitleStyles(k)] = true, _$cn2)), {
65
60
  'ev-click': _this.onClick.bind(_this, subMenuVNode)
66
61
  });
67
62
  };
package/components/menu/menu.d.ts CHANGED
@@ -25,5 +25,6 @@ export declare class Menu<K extends Key = Key> extends Component<MenuProps<K>, M
25
25
  parentMenu: Menu<Key> | null;
26
26
  subExpandedKeys?: Set<K>;
27
27
  highlight?: ReturnType<typeof useHighlight>;
28
+ private config;
28
29
  init(): void;
29
30
  }
package/components/menu/menu.js CHANGED
@@ -3,6 +3,7 @@ import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/con
3
3
  import { Component, provide, inject } from 'intact-react';
4
4
  import template from './menu.vdt';
5
5
  import { useHighlight } from './useHighlight';
6
+ import { useConfigContext } from '../config';
6
7
  var typeDefs = {
7
8
  expandedKeys: Array,
8
9
  selectedKey: [String, Number],
@@ -42,6 +43,7 @@ export var Menu = /*#__PURE__*/function (_Component) {
42
43
  _this.parentMenu = inject(MENU, null);
43
44
  _this.subExpandedKeys = void 0;
44
45
  _this.highlight = void 0;
46
+ _this.config = useConfigContext();
45
47
  return _this;
46
48
  }
47
49
 
package/components/menu/menu.vdt.js CHANGED
@@ -26,9 +26,8 @@ export default function ($props, $blocks, $__proto__) {
26
26
 
27
27
  var isRootMenu = !this.rootMenu;
28
28
  var isDropdownMenu = !isRootMenu && isDropdown(this.rootMenu);
29
- var classNameObj = (_classNameObj = {
30
- 'k-menu': true
31
- }, _classNameObj[className] = className, _classNameObj["k-" + theme] = (isRootMenu || isDropdownMenu) && theme, _classNameObj["k-" + size] = isRootMenu && size !== 'default', _classNameObj['k-collapsed'] = isRootMenu && collapse, _classNameObj["k-" + type] = isRootMenu && type, _classNameObj[makeMenuStyles()] = true, _classNameObj);
29
+ var k = this.config.k;
30
+ var classNameObj = (_classNameObj = {}, _classNameObj[k + "-menu"] = true, _classNameObj[className] = className, _classNameObj[k + "-" + theme] = (isRootMenu || isDropdownMenu) && theme, _classNameObj[k + "-" + size] = isRootMenu && size !== 'default', _classNameObj[k + "-collapsed"] = isRootMenu && collapse, _classNameObj[k + "-" + type] = isRootMenu && type, _classNameObj[makeMenuStyles(k)] = true, _classNameObj);
32
31
  var header = (_$blocks['header'] = function ($super) {
33
32
  return null;
34
33
  }, __$blocks['header'] = function ($super, data) {
@@ -42,9 +41,7 @@ export default function ($props, $blocks, $__proto__) {
42
41
  }, __$blocks['header'](_$no));
43
42
  var content = [$blocks.header ? _$ce(2, 'div', !collapse ? header : findChildren(header, function (vNode) {
44
43
  return isComponentVNode(vNode, Icon);
45
- }), 0, _$cn((_$cn2 = {
46
- 'k-menu-header': true
47
- }, _$cn2[makeTitleStyles()] = true, _$cn2))) : undefined, children];
44
+ }), 0, _$cn((_$cn2 = {}, _$cn2[k + "-menu-header"] = true, _$cn2[makeTitleStyles(k)] = true, _$cn2))) : undefined, children];
48
45
  return !isDropdownMenu ? _$cv('div', _extends({}, getRestProps(this), {
49
46
  'className': _$cn(classNameObj)
50
47
  }), [content, null]) : _$cc(DropdownMenu, _extends({}, getRestProps(this), {
package/components/menu/styles.d.ts CHANGED
@@ -62,6 +62,6 @@ declare const defaults: {
62
62
  };
63
63
  declare let menu: typeof defaults;
64
64
  export { menu };
65
- export declare function makeMenuStyles(): string;
66
- export declare function makeTitleStyles(): string;
67
- export declare function makeItemStyles(): string;
65
+ export declare function makeMenuStyles(k: string): string;
66
+ export declare function makeTitleStyles(k: string): string;
67
+ export declare function makeItemStyles(k: string): string;
package/components/menu/styles.js CHANGED
@@ -117,24 +117,24 @@ setDefault(function () {
117
117
  }).menu;
118
118
  });
119
119
  export { menu };
120
- export function makeMenuStyles() {
120
+ export function makeMenuStyles(k) {
121
121
  var _context;
122
122
 
123
- // we must increase the priority by adding &.k-menu
123
+ // we must increase the priority by adding &.${k}-menu
124
124
  // to override the css of dropdownMenu
125
- return /*#__PURE__*/css("&.k-menu{width:", menu.width, ";transition:width ", menu.transition, ";background:", menu.bgColor, ";font-size:", menu.fontSize, ";}&:not(.k-dropdown-menu) &:not(.k-dropdown-menu){width:auto;background:", menu.subBgColor, ";.k-menu-title{padding-left:calc(", getLeft(menu.item.padding), " + ", menu.icon.width, " + ", menu.icon.gap, ");}}&:not(.k-dropdown-menu) &:not(.k-dropdown-menu) &:not(.k-dropdown-menu){.k-menu-title{padding-left:calc(", getLeft(menu.item.padding), " + ", menu.icon.width, " * 2 + ", menu.icon.gap, ");}}.k-icon{width:", menu.icon.width, ";margin-right:", menu.icon.gap, ";text-align:center;flex-shrink:0;}.k-menu-header{height:", menu.header.height, ";font-size:", menu.header.fontSize, ";font-weight:bold;border-bottom:", menu.header.borderBottom, ";}", _mapInstanceProperty(_context = ['light', 'white']).call(_context, function (theme) {
125
+ return /*#__PURE__*/css("&.", k, "-menu{width:", menu.width, ";transition:width ", menu.transition, ";background:", menu.bgColor, ";font-size:", menu.fontSize, ";}&:not(.", k, "-dropdown-menu) &:not(.", k, "-dropdown-menu){width:auto;background:", menu.subBgColor, ";.", k, "-menu-title{padding-left:calc(", getLeft(menu.item.padding), " + ", menu.icon.width, " + ", menu.icon.gap, ");}}&:not(.", k, "-dropdown-menu) &:not(.", k, "-dropdown-menu) &:not(.", k, "-dropdown-menu){.", k, "-menu-title{padding-left:calc(", getLeft(menu.item.padding), " + ", menu.icon.width, " * 2 + ", menu.icon.gap, ");}}.", k, "-icon{width:", menu.icon.width, ";margin-right:", menu.icon.gap, ";text-align:center;flex-shrink:0;}.", k, "-menu-header{height:", menu.header.height, ";font-size:", menu.header.fontSize, ";font-weight:bold;border-bottom:", menu.header.borderBottom, ";}", _mapInstanceProperty(_context = ['light', 'white']).call(_context, function (theme) {
126
126
  var styles = menu[theme];
127
- return /*#__PURE__*/css("&.k-", theme, "{background:", styles.bgColor, ";.k-menu-header{color:", styles.item.color, ";border-bottom:", styles.border, ";}.k-menu-item{.k-menu-title{color:", styles.item.color, ";&:hover{color:", styles.item.hoverColor, ";}}&.k-highlighted{>.k-menu-title{color:", styles.item.hoverColor, ";}}&.k-disabled{>.k-menu-title{color:", styles.item.disabledColor, "!important;}}}.k-menu:not(.k-dropdown-menu){background:", styles.subBgColor, ";}&.k-horizontal{.k-menu-header{border-right:", styles.border, ";}}}");
128
- }), " &.k-white{.k-menu-item.k-active{>.k-menu-title{color:", menu.white.active.color, "!important;background:", menu.white.active.bgColor, ";}}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
127
+ return /*#__PURE__*/css("&.", k, "-", theme, "{background:", styles.bgColor, ";.", k, "-menu-header{color:", styles.item.color, ";border-bottom:", styles.border, ";}.", k, "-menu-item{.", k, "-menu-title{color:", styles.item.color, ";&:hover{color:", styles.item.hoverColor, ";}}&.", k, "-highlighted{>.", k, "-menu-title{color:", styles.item.hoverColor, ";}}&.", k, "-disabled{>.", k, "-menu-title{color:", styles.item.disabledColor, "!important;}}}.", k, "-menu:not(.", k, "-dropdown-menu){background:", styles.subBgColor, ";}&.", k, "-horizontal{.", k, "-menu-header{border-right:", styles.border, ";}}}");
128
+ }), " &.", k, "-white{.", k, "-menu-item.", k, "-active{>.", k, "-menu-title{color:", menu.white.active.color, "!important;background:", menu.white.active.bgColor, ";}}}", _mapInstanceProperty(sizes).call(sizes, function (size) {
129
129
  var styles = menu[size];
130
- return /*#__PURE__*/css("&.k-", size, "{width:", styles.width, ";font-size:", styles.fontSize, ";.k-menu{font-size:", styles.fontSize, ";}}");
131
- }), "&.k-collapsed{width:calc(", menu.icon.width, " + ", getLeft(menu.item.padding), " * 2);.k-icon{margin-right:0;}.k-menu-arrow{display:none;}}&.k-dropdown-menu{width:auto;min-width:", menu.dropdown.minWidth, ";.k-menu-arrow{transform:rotate(-90deg);}}&.k-horizontal{width:auto;display:flex;align-items:center;.k-menu-header{border-bottom:none;border-right:", menu.header.borderBottom, ";}}");
130
+ return /*#__PURE__*/css("&.", k, "-", size, "{width:", styles.width, ";font-size:", styles.fontSize, ";.", k, "-menu{font-size:", styles.fontSize, ";}}");
131
+ }), "&.", k, "-collapsed{width:calc(", menu.icon.width, " + ", getLeft(menu.item.padding), " * 2);.", k, "-icon{margin-right:0;}.", k, "-menu-arrow{display:none;}}&.", k, "-dropdown-menu{width:auto;min-width:", menu.dropdown.minWidth, ";.", k, "-menu-arrow{transform:rotate(-90deg);}}&.", k, "-horizontal{width:auto;display:flex;align-items:center;.", k, "-menu-header{border-bottom:none;border-right:", menu.header.borderBottom, ";}}");
132
132
  }
133
- export function makeTitleStyles() {
133
+ export function makeTitleStyles(k) {
134
134
  var item = menu.item;
135
- return /*#__PURE__*/css("display:flex;align-items:center;padding:", menu.item.padding, ";color:", menu.item.color, ";white-space:nowrap;overflow:hidden;flex-wrap:nowrap;");
135
+ return /*#__PURE__*/css("display:flex;align-items:center;padding:", item.padding, ";color:", item.color, ";white-space:nowrap;overflow:hidden;flex-wrap:nowrap;");
136
136
  }
137
- export function makeItemStyles() {
137
+ export function makeItemStyles(k) {
138
138
  var item = menu.item;
139
- return /*#__PURE__*/css(".k-menu-title{cursor:pointer;height:", menu.item.height, ";transition:all ", menu.transition, ";&:hover{color:", menu.item.hoverColor, ";}}.k-menu-name{flex:1;display:flex;align-items:center;}.k-menu-arrow{transition:transform ", menu.transition, ";margin-left:", menu.icon.gap, ";}&.k-expanded{>.k-menu-title{color:", menu.item.hoverColor, ";.k-menu-arrow{transform:rotateX(180deg);}}}&.k-highlighted{>.k-menu-title{color:", menu.item.hoverColor, ";}}&.k-active{>.k-menu-title{color:", menu.item.hoverColor, "!important;background:", menu.item.activeBgColor, ";}}&.k-disabled{>.k-menu-title{color:", menu.item.disabledColor, "!important;cursor:not-allowed;}}.k-menu-dot{font-size:", menu.item.dotFontSize, ";transform:scale(.4);}");
139
+ return /*#__PURE__*/css(".", k, "-menu-title{cursor:pointer;height:", menu.item.height, ";transition:all ", menu.transition, ";&:hover{color:", menu.item.hoverColor, ";}}.", k, "-menu-name{flex:1;display:flex;align-items:center;min-width:0;span{overflow:hidden;text-overflow:ellipsis;min-width:0;}}.", k, "-menu-arrow{transition:transform ", menu.transition, ";margin-left:", menu.icon.gap, ";}&.", k, "-expanded{>.", k, "-menu-title{color:", menu.item.hoverColor, ";.", k, "-menu-arrow{transform:rotateX(180deg);}}}&.", k, "-highlighted{>.", k, "-menu-title{color:", menu.item.hoverColor, ";}}&.", k, "-active{>.", k, "-menu-title{color:", menu.item.hoverColor, "!important;background:", menu.item.activeBgColor, ";}}&.", k, "-disabled{>.", k, "-menu-title{color:", menu.item.disabledColor, "!important;cursor:not-allowed;}}.", k, "-menu-dot{font-size:", menu.item.dotFontSize, ";transform:scale(.4);}");
140
140
  }
package/components/menu/useDropdown.js CHANGED
@@ -1,4 +1,4 @@
1
- import { useInstance, onBeforeMount, onBeforeUpdate, inject } from 'intact-react';
1
+ import { useInstance, onBeforeMount, onBeforeUpdate, inject, createVNode } from 'intact-react';
2
2
  import { Menu } from './';
3
3
  import { Icon } from '../icon';
4
4
  import { isComponentVNode, eachChildren, isTextVNode, isStringOrNumberNotEmpty } from '../utils';
@@ -38,6 +38,11 @@ export function useDropdown(rootMenu, parentMenu) {
38
38
  iconVNode = vNode;
39
39
  }
40
40
  } else {
41
+ if (isStringOrNumberNotEmpty(vNode) || isTextVNode(vNode)) {
42
+ // wrap with span for showing text ellipsis
43
+ vNode = createVNode('span', null, vNode);
44
+ }
45
+
41
46
  titleVNodes.push(vNode);
42
47
  }
43
48
  });
package/components/message/message.d.ts CHANGED
@@ -16,5 +16,6 @@ export declare class Message extends Component<MessageProps> {
16
16
  static success(content: Children | Partial<MessageProps>, duration?: number): void;
17
17
  static warning(content: Children | Partial<MessageProps>, duration?: number): void;
18
18
  private delayClose;
19
+ private config;
19
20
  close(): void;
20
21
  }
package/components/message/message.js CHANGED
@@ -8,6 +8,7 @@ import { Messages } from './messages';
8
8
  import { useDelayClose } from '../../hooks/useDelayClose';
9
9
  import { isObject } from 'intact-shared';
10
10
  import { bind } from '../utils';
11
+ import { useConfigContext } from '../config';
11
12
  var typeDefs = {
12
13
  content: [String, VNode],
13
14
  duration: Number,
@@ -40,6 +41,7 @@ export var Message = /*#__PURE__*/function (_Component) {
40
41
 
41
42
  _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
42
43
  _this.delayClose = useDelayClose(_this.close, _this.get('duration'));
44
+ _this.config = useConfigContext();
43
45
  return _this;
44
46
  }
45
47
 
package/components/message/message.vdt.js CHANGED
@@ -4,12 +4,8 @@ import { Button } from '../button';
4
4
  import { Icon } from '../icon';
5
5
  import { getRestProps } from '../utils';
6
6
  import { makeMessageStyles } from './styles';
7
- var _$tmp0 = {
8
- 'className': 'k-icon-close',
9
- 'hoverable': true
10
- };
11
7
  export default function ($props, $blocks, $__proto__) {
12
- var _classNameObj, _$cn2;
8
+ var _classNameObj, _$cn2, _$cn3;
13
9
 
14
10
  $blocks || ($blocks = {});
15
11
  $props || ($props = {});
@@ -22,9 +18,8 @@ export default function ($props, $blocks, $__proto__) {
22
18
  closable = _this$get.closable,
23
19
  hideIcon = _this$get.hideIcon;
24
20
 
25
- var classNameObj = (_classNameObj = {
26
- "k-message": true
27
- }, _classNameObj["k-" + type] = type, _classNameObj[makeMessageStyles()] = true, _classNameObj);
21
+ var k = this.config.k;
22
+ var classNameObj = (_classNameObj = {}, _classNameObj[k + "-message"] = true, _classNameObj[k + "-" + type] = type, _classNameObj[makeMessageStyles(k)] = true, _classNameObj);
28
23
  var iconMap = {
29
24
  info: 'information-fill',
30
25
  warning: 'warning-fill',
@@ -36,18 +31,18 @@ export default function ($props, $blocks, $__proto__) {
36
31
  'ev-mouseenter': this.delayClose.onMouseEnter,
37
32
  'ev-mouseleave': this.delayClose.onMouseLeave
38
33
  }), _$ce(2, 'div', [_$ce(2, 'div', [!hideIcon ? _$cc(Icon, {
39
- 'className': _$cn((_$cn2 = {}, _$cn2["k-icon-" + (iconMap[type] || iconMap.info)] = true, _$cn2["k-message-icon"] = true, _$cn2))
40
- }) : undefined, typeof content === 'string' || typeof content === 'number' ? _$ce(2, 'div', null, 1, 'k-message-content', {
34
+ 'className': _$cn((_$cn2 = {}, _$cn2[k + "-icon-" + (iconMap[type] || iconMap.info)] = true, _$cn2[k + "-message-icon"] = true, _$cn2))
35
+ }) : undefined, typeof content === 'string' || typeof content === 'number' ? _$ce(2, 'div', null, 1, _$cn(k + "-message-content"), {
41
36
  'innerHTML': content
42
- }) : _$ce(2, 'div', children, 0, 'k-message-content')], 0, _$cn({
43
- "k-message-wrapper": true,
44
- "k-with-icon": !hideIcon
45
- })), closable ? _$cc(Button, {
37
+ }) : _$ce(2, 'div', children, 0, _$cn(k + "-message-content"))], 0, _$cn((_$cn3 = {}, _$cn3[k + "-message-wrapper"] = true, _$cn3[k + "-with-icon"] = !hideIcon, _$cn3))), closable ? _$cc(Button, {
46
38
  'type': 'none',
47
39
  'icon': true,
48
- 'className': 'k-message-close',
40
+ 'className': _$cn(k + "-message-close"),
49
41
  'ev-click': this.close,
50
- 'children': _$cc(Icon, _$tmp0)
51
- }) : undefined], 0, 'k-message-container'));
42
+ 'children': _$cc(Icon, {
43
+ 'className': _$cn(k + "-icon-close"),
44
+ 'hoverable': true
45
+ })
46
+ }) : undefined], 0, _$cn(k + "-message-container")));
52
47
  }
53
48
  ;
package/components/message/messages.d.ts CHANGED
@@ -3,6 +3,7 @@ import type { Message } from './message';
3
3
  export declare class Messages extends Component {
4
4
  static template: string | import("intact").Template<any>;
5
5
  private messages;
6
+ private config;
6
7
  notice(message: VNodeComponentClass<Message>): void;
7
8
  delete(key: number | string): void;
8
9
  }
package/components/message/messages.js CHANGED
@@ -4,6 +4,7 @@ import _findIndexInstanceProperty from "@babel/runtime-corejs3/core-js/instance/
4
4
  import _spliceInstanceProperty from "@babel/runtime-corejs3/core-js/instance/splice";
5
5
  import { Component } from 'intact-react';
6
6
  import template from './messages.vdt';
7
+ import { useConfigContext } from '../config';
7
8
  export var Messages = /*#__PURE__*/function (_Component) {
8
9
  _inheritsLoose(Messages, _Component);
9
10
 
@@ -18,6 +19,7 @@ export var Messages = /*#__PURE__*/function (_Component) {
18
19
 
19
20
  _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
20
21
  _this.messages = [];
22
+ _this.config = useConfigContext();
21
23
  return _this;
22
24
  }
23
25
 
package/components/message/messages.vdt.js CHANGED
@@ -7,12 +7,11 @@ export default function ($props, $blocks, $__proto__) {
7
7
  $blocks || ($blocks = {});
8
8
  $props || ($props = {});
9
9
  var $this = this;
10
+ var k = this.config.k;
10
11
  return _$ce(2, 'div', _$cc(TransitionGroup, {
11
12
  'children': _$ma(this.messages, function ($value, $key) {
12
13
  return $value;
13
14
  }, $this)
14
- }), 2, _$cn((_$cn2 = {
15
- "k-messages": true
16
- }, _$cn2[makeMessagesStyles()] = true, _$cn2)));
15
+ }), 2, _$cn((_$cn2 = {}, _$cn2[k + "-messages"] = true, _$cn2[makeMessagesStyles(k)] = true, _$cn2)));
17
16
  }
18
17
  ;
package/components/message/styles.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import '../../styles/global';
2
- export declare function makeMessagesStyles(): string;
3
- export declare function makeMessageStyles(): string;
2
+ export declare function makeMessagesStyles(k: string): string;
3
+ export declare function makeMessageStyles(k: string): string;
package/components/message/styles.js CHANGED
@@ -51,14 +51,14 @@ setDefault(function () {
51
51
  message: defaults
52
52
  }).message;
53
53
  });
54
- export function makeMessagesStyles() {
54
+ export function makeMessagesStyles(k) {
55
55
  return /*#__PURE__*/css("position:fixed;top:", message.top, ";left:", message.left, ";width:100%;pointer-events:none;z-index:", theme.maxZIndex + 1, ";");
56
56
  }
57
- export function makeMessageStyles() {
57
+ export function makeMessageStyles(k) {
58
58
  var _context;
59
59
 
60
- return /*#__PURE__*/css("text-align:center;width:100%;font-size:", message.fontSize, ";color:", message.color, ";.k-message-container{display:inline-block;box-shadow:", message.boxShadow, ";border-radius:", message.borderRadius, ";margin-bottom:", message.gap, ";pointer-events:all;min-width:", message.minWidth, ";max-width:", message.maxWidth, ";position:relative;text-align:", message.textAlign, ";min-height:", message.minHeight, ";}.k-message-wrapper{position:relative;display:inline-block;&.k-with-icon{padding-left:calc(", message.icon.left, " + 14px);}}.k-message-content{display:inline-block;padding:", message.padding, ";vertical-align:middle;word-break:break-word;word-wrap:break-word;}.k-message-close{vertical-align:middle;position:absolute;right:0;top:0;&:hover{background:none;}}.k-message-icon{position:absolute;left:", message.icon.left, ";top:", message.icon.top, ";font-size:", message.icon.fontSize, ";}", _mapInstanceProperty(_context = ['info', 'error', 'success', 'warning']).call(_context, function (type) {
60
+ return /*#__PURE__*/css("text-align:center;width:100%;font-size:", message.fontSize, ";color:", message.color, ";.", k, "-message-container{display:inline-block;box-shadow:", message.boxShadow, ";border-radius:", message.borderRadius, ";margin-bottom:", message.gap, ";pointer-events:all;min-width:", message.minWidth, ";max-width:", message.maxWidth, ";position:relative;text-align:", message.textAlign, ";min-height:", message.minHeight, ";}.", k, "-message-wrapper{position:relative;display:inline-block;&.", k, "-with-icon{padding-left:calc(", message.icon.left, " + 14px);}}.", k, "-message-content{display:inline-block;padding:", message.padding, ";vertical-align:middle;word-break:bre.", k, "-word;word-wrap:bre.", k, "-word;}.", k, "-message-close{vertical-align:middle;position:absolute;right:0;top:0;&:hover{background:none;}}.", k, "-message-icon{position:absolute;left:", message.icon.left, ";top:", message.icon.top, ";font-size:", message.icon.fontSize, ";}", _mapInstanceProperty(_context = ['info', 'error', 'success', 'warning']).call(_context, function (type) {
61
61
  var color = theme.color[type === 'error' ? 'danger' : type];
62
- return /*#__PURE__*/css("&.k-", type, "{.k-message-container{background:", palette(color, -4), ";}.k-message-icon{color:", color, ";}}");
62
+ return /*#__PURE__*/css("&.", k, "-", type, "{.", k, "-message-container{background:", palette(color, -4), ";}.", k, "-message-icon{color:", color, ";}}");
63
63
  }), "&.transition-enter-from,&.transition-leave-to{opacity:0;transform:", message.transform, ";}&.transition-enter-active,&.transition-leave-active{transition:transform ", message.transition, ",opacity ", message.transition, ";}&.transition-move{transition:transform ", message.transition, ";}");
64
64
  }
package/components/pagination/index.d.ts CHANGED
@@ -29,6 +29,7 @@ export declare class Pagination extends Component<PaginationProps, PaginationEve
29
29
  static defaults: () => Partial<PaginationProps>;
30
30
  static events: Events<PaginationEvents>;
31
31
  private ignore;
32
+ private config;
32
33
  init(): void;
33
34
  changePage(page: number): void;
34
35
  private prev;
package/components/pagination/index.js CHANGED
@@ -5,6 +5,7 @@ import { Component } from 'intact-react';
5
5
  import template from './index.vdt';
6
6
  import { sizes } from '../../styles/utils';
7
7
  import { bind } from '../utils';
8
+ import { useConfigContext } from '../config';
8
9
  var typeDefs = {
9
10
  size: sizes,
10
11
  counts: [Number, String],
@@ -51,6 +52,7 @@ export var Pagination = /*#__PURE__*/function (_Component) {
51
52
 
52
53
  _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
53
54
  _this.ignore = false;
55
+ _this.config = useConfigContext();
54
56
  return _this;
55
57
  }
56
58