@king-design/intact 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 (632) hide show
  1. package/components/affix/index.ts +2 -0
  2. package/components/affix/index.vdt +5 -4
  3. package/components/affix/styles.ts +1 -1
  4. package/components/badge/index.ts +3 -0
  5. package/components/badge/index.vdt +7 -5
  6. package/components/badge/styles.ts +6 -6
  7. package/components/breadcrumb/index.ts +4 -0
  8. package/components/breadcrumb/index.vdt +4 -3
  9. package/components/breadcrumb/item.ts +2 -0
  10. package/components/breadcrumb/item.vdt +5 -3
  11. package/components/breadcrumb/styles.ts +8 -8
  12. package/components/button/group.ts +3 -0
  13. package/components/button/group.vdt +6 -5
  14. package/components/button/index.ts +2 -0
  15. package/components/button/index.vdt +15 -13
  16. package/components/button/styles.ts +50 -50
  17. package/components/card/column.ts +3 -0
  18. package/components/card/column.vdt +4 -3
  19. package/components/card/index.ts +4 -1
  20. package/components/card/index.vdt +12 -11
  21. package/components/card/styles.ts +19 -19
  22. package/components/carousel/index.ts +3 -0
  23. package/components/carousel/index.vdt +13 -12
  24. package/components/carousel/item.ts +3 -0
  25. package/components/carousel/item.vdt +5 -4
  26. package/components/carousel/styles.ts +23 -23
  27. package/components/cascader/index.vdt +13 -13
  28. package/components/cascader/styles.ts +8 -8
  29. package/components/checkbox/index.ts +2 -0
  30. package/components/checkbox/index.vdt +8 -7
  31. package/components/checkbox/styles.ts +17 -17
  32. package/components/code/index.ts +2 -0
  33. package/components/code/index.vdt +3 -2
  34. package/components/code/styles.ts +1 -1
  35. package/components/collapse/index.ts +3 -0
  36. package/components/collapse/index.vdt +5 -4
  37. package/components/collapse/item.ts +2 -0
  38. package/components/collapse/item.vdt +9 -9
  39. package/components/collapse/styles.ts +13 -24
  40. package/components/colorpicker/drag.ts +2 -0
  41. package/components/colorpicker/drag.vdt +3 -1
  42. package/components/colorpicker/index.ts +3 -0
  43. package/components/colorpicker/index.vdt +8 -7
  44. package/components/colorpicker/panel.ts +2 -0
  45. package/components/colorpicker/panel.vdt +22 -21
  46. package/components/colorpicker/styles.ts +39 -39
  47. package/components/config/index.spec.ts +49 -0
  48. package/components/config/index.ts +28 -0
  49. package/components/context.ts +13 -3
  50. package/components/copy/index.ts +3 -1
  51. package/components/copy/index.vdt +5 -4
  52. package/components/copy/styles.ts +1 -1
  53. package/components/datepicker/calendar.ts +2 -0
  54. package/components/datepicker/calendar.vdt +31 -30
  55. package/components/datepicker/index.vdt +11 -10
  56. package/components/datepicker/styles.ts +31 -31
  57. package/components/datepicker/time.ts +2 -0
  58. package/components/datepicker/time.vdt +3 -2
  59. package/components/diagram/diagram.ts +2 -0
  60. package/components/diagram/diagram.vdt +5 -4
  61. package/components/diagram/styles.ts +1 -1
  62. package/components/dialog/alert.vdt +12 -11
  63. package/components/dialog/base.ts +2 -0
  64. package/components/dialog/base.vdt +17 -16
  65. package/components/dialog/index.ts +2 -1
  66. package/components/dialog/staticMethods.ts +0 -1
  67. package/components/dialog/styles.ts +31 -31
  68. package/components/drawer/index.vdt +5 -4
  69. package/components/drawer/styles.ts +8 -8
  70. package/components/dropdown/demos/nested.md +1 -1
  71. package/components/dropdown/dropdown.ts +4 -1
  72. package/components/dropdown/item.ts +2 -0
  73. package/components/dropdown/item.vdt +5 -4
  74. package/components/dropdown/menu.ts +2 -0
  75. package/components/dropdown/menu.vdt +3 -2
  76. package/components/dropdown/styles.ts +11 -11
  77. package/components/dropdown/usePosition.ts +2 -1
  78. package/components/editable/index.ts +2 -0
  79. package/components/editable/index.vdt +7 -6
  80. package/components/editable/styles.ts +4 -4
  81. package/components/form/form.ts +2 -0
  82. package/components/form/form.vdt +5 -4
  83. package/components/form/item.ts +2 -0
  84. package/components/form/item.vdt +14 -13
  85. package/components/form/styles.ts +31 -30
  86. package/components/grid/col.ts +2 -0
  87. package/components/grid/col.vdt +10 -9
  88. package/components/grid/row.ts +2 -0
  89. package/components/grid/row.vdt +5 -4
  90. package/components/grid/styles.ts +23 -24
  91. package/components/grid/useBreakpoints.ts +2 -2
  92. package/components/icon/demos/icons.md +6 -3
  93. package/components/icon/index.ts +2 -0
  94. package/components/icon/index.vdt +10 -9
  95. package/components/icon/styles.ts +12 -11
  96. package/components/input/index.ts +3 -0
  97. package/components/input/index.vdt +32 -31
  98. package/components/input/search.ts +2 -0
  99. package/components/input/search.vdt +7 -6
  100. package/components/input/styles.ts +66 -66
  101. package/components/layout/aside.ts +2 -0
  102. package/components/layout/aside.vdt +8 -7
  103. package/components/layout/body.ts +11 -3
  104. package/components/layout/demos/aside.md +1 -1
  105. package/components/layout/demos/basic.md +29 -9
  106. package/components/layout/footer.ts +5 -1
  107. package/components/layout/header.ts +14 -5
  108. package/components/layout/helpers.ts +1 -0
  109. package/components/layout/index.md +2 -0
  110. package/components/layout/index.spec.ts +32 -0
  111. package/components/layout/layout.ts +10 -5
  112. package/components/layout/styles.ts +30 -14
  113. package/components/layout/template.vdt +2 -1
  114. package/components/menu/item.ts +2 -0
  115. package/components/menu/item.vdt +11 -10
  116. package/components/menu/menu.ts +2 -0
  117. package/components/menu/menu.vdt +9 -8
  118. package/components/menu/styles.ts +55 -49
  119. package/components/menu/useDropdown.ts +5 -1
  120. package/components/message/message.ts +2 -0
  121. package/components/message/message.vdt +12 -11
  122. package/components/message/messages.ts +2 -0
  123. package/components/message/messages.vdt +3 -1
  124. package/components/message/styles.ts +13 -13
  125. package/components/pagination/index.ts +2 -0
  126. package/components/pagination/index.vdt +14 -12
  127. package/components/pagination/styles.ts +19 -19
  128. package/components/popover/content.vdt +6 -5
  129. package/components/popover/styles.ts +6 -6
  130. package/components/portal.ts +3 -1
  131. package/components/progress/index.ts +2 -0
  132. package/components/progress/index.vdt +22 -21
  133. package/components/progress/styles.ts +35 -35
  134. package/components/radio/index.ts +2 -0
  135. package/components/radio/index.vdt +7 -6
  136. package/components/radio/styles.ts +11 -11
  137. package/components/rate/index.ts +2 -0
  138. package/components/rate/index.vdt +9 -8
  139. package/components/rate/styles.ts +9 -9
  140. package/components/scrollSelect/index.ts +2 -0
  141. package/components/scrollSelect/index.vdt +11 -10
  142. package/components/scrollSelect/styles.ts +11 -11
  143. package/components/select/base.ts +2 -0
  144. package/components/select/base.vdt +20 -19
  145. package/components/select/group.ts +2 -0
  146. package/components/select/group.vdt +4 -3
  147. package/components/select/menu.ts +2 -0
  148. package/components/select/menu.vdt +11 -10
  149. package/components/select/option.ts +2 -1
  150. package/components/select/option.vdt +4 -3
  151. package/components/select/styles.ts +52 -52
  152. package/components/skeleton/item.ts +3 -0
  153. package/components/skeleton/item.vdt +6 -5
  154. package/components/skeleton/skeleton.ts +3 -0
  155. package/components/skeleton/skeleton.vdt +8 -7
  156. package/components/skeleton/{style.ts → styles.ts} +19 -19
  157. package/components/slider/index.ts +2 -0
  158. package/components/slider/index.vdt +18 -17
  159. package/components/slider/styles.ts +23 -23
  160. package/components/spin/index.ts +3 -0
  161. package/components/spin/index.vdt +9 -8
  162. package/components/spin/styles.ts +9 -9
  163. package/components/spinner/index.ts +2 -0
  164. package/components/spinner/index.vdt +13 -12
  165. package/components/spinner/styles.ts +26 -26
  166. package/components/split/index.ts +3 -1
  167. package/components/split/index.vdt +13 -13
  168. package/components/split/{style.ts → styles.ts} +23 -23
  169. package/components/steps/index.ts +4 -0
  170. package/components/steps/index.vdt +7 -5
  171. package/components/steps/step.ts +3 -0
  172. package/components/steps/step.vdt +13 -12
  173. package/components/steps/styles.ts +100 -100
  174. package/components/switch/index.ts +2 -0
  175. package/components/switch/index.vdt +12 -11
  176. package/components/switch/styles.ts +38 -38
  177. package/components/table/cell.ts +3 -0
  178. package/components/table/cell.vdt +3 -2
  179. package/components/table/column.ts +2 -0
  180. package/components/table/column.vdt +15 -14
  181. package/components/table/demos/pagination.md +6 -0
  182. package/components/table/index.md +1 -0
  183. package/components/table/index.spec.ts +1 -1
  184. package/components/table/row.ts +12 -1
  185. package/components/table/row.vdt +9 -7
  186. package/components/table/styles.ts +58 -56
  187. package/components/table/table.ts +4 -2
  188. package/components/table/table.vdt +17 -16
  189. package/components/table/usePagination.ts +1 -1
  190. package/components/tabs/index.ts +3 -0
  191. package/components/tabs/index.vdt +15 -13
  192. package/components/tabs/styles.ts +59 -59
  193. package/components/tabs/tab.ts +3 -1
  194. package/components/tabs/tab.vdt +5 -4
  195. package/components/tabs/useActiveBar.ts +2 -1
  196. package/components/tabs/useScroll.ts +2 -1
  197. package/components/tag/base.ts +3 -0
  198. package/components/tag/index.vdt +10 -9
  199. package/components/tag/styles.ts +13 -13
  200. package/components/tag/tags.ts +2 -0
  201. package/components/tag/tags.vdt +7 -6
  202. package/components/timeline/item.ts +4 -0
  203. package/components/timeline/item.vdt +10 -9
  204. package/components/timeline/styles.ts +13 -13
  205. package/components/timeline/timeline.ts +3 -0
  206. package/components/timeline/timeline.vdt +3 -2
  207. package/components/timepicker/panelPicker.vdt +13 -11
  208. package/components/timepicker/selectPicker.ts +2 -0
  209. package/components/timepicker/selectPicker.vdt +2 -1
  210. package/components/timepicker/styles.ts +10 -10
  211. package/components/tip/index.vdt +7 -6
  212. package/components/tip/styles.ts +7 -7
  213. package/components/tooltip/content.vdt +11 -10
  214. package/components/tooltip/styles.ts +21 -21
  215. package/components/transfer/index.ts +2 -0
  216. package/components/transfer/index.vdt +12 -11
  217. package/components/transfer/styles.ts +15 -15
  218. package/components/tree/index.ts +2 -0
  219. package/components/tree/index.vdt +21 -19
  220. package/components/tree/styles.ts +29 -29
  221. package/components/treeSelect/index.vdt +4 -2
  222. package/components/treeSelect/styles.ts +1 -1
  223. package/components/upload/index.ts +2 -0
  224. package/components/upload/index.vdt +34 -32
  225. package/components/upload/styles.ts +37 -37
  226. package/components/utils.ts +29 -8
  227. package/components/virtual.ts +4 -2
  228. package/components/wave/index.ts +4 -2
  229. package/components/wave/styles.ts +3 -3
  230. package/es/components/affix/index.d.ts +1 -0
  231. package/es/components/affix/index.js +2 -0
  232. package/es/components/affix/index.vdt.js +5 -5
  233. package/es/components/affix/styles.d.ts +1 -1
  234. package/es/components/affix/styles.js +1 -1
  235. package/es/components/badge/index.d.ts +1 -0
  236. package/es/components/badge/index.js +13 -1
  237. package/es/components/badge/index.vdt.js +5 -4
  238. package/es/components/badge/styles.d.ts +1 -1
  239. package/es/components/badge/styles.js +2 -2
  240. package/es/components/breadcrumb/index.d.ts +1 -0
  241. package/es/components/breadcrumb/index.js +13 -1
  242. package/es/components/breadcrumb/index.vdt.js +4 -5
  243. package/es/components/breadcrumb/item.d.ts +1 -0
  244. package/es/components/breadcrumb/item.js +2 -0
  245. package/es/components/breadcrumb/item.vdt.js +4 -5
  246. package/es/components/breadcrumb/styles.d.ts +1 -1
  247. package/es/components/breadcrumb/styles.js +2 -2
  248. package/es/components/button/group.d.ts +1 -0
  249. package/es/components/button/group.js +13 -1
  250. package/es/components/button/group.vdt.js +2 -6
  251. package/es/components/button/index.d.ts +1 -0
  252. package/es/components/button/index.js +2 -0
  253. package/es/components/button/index.vdt.js +7 -7
  254. package/es/components/button/styles.d.ts +2 -4
  255. package/es/components/button/styles.js +19 -20
  256. package/es/components/card/column.d.ts +1 -0
  257. package/es/components/card/column.js +13 -1
  258. package/es/components/card/column.vdt.js +2 -5
  259. package/es/components/card/index.d.ts +1 -0
  260. package/es/components/card/index.js +13 -1
  261. package/es/components/card/index.vdt.js +5 -11
  262. package/es/components/card/styles.d.ts +1 -1
  263. package/es/components/card/styles.js +2 -2
  264. package/es/components/carousel/index.d.ts +1 -0
  265. package/es/components/carousel/index.js +2 -0
  266. package/es/components/carousel/index.vdt.js +15 -19
  267. package/es/components/carousel/item.d.ts +1 -0
  268. package/es/components/carousel/item.js +13 -1
  269. package/es/components/carousel/item.vdt.js +2 -3
  270. package/es/components/carousel/styles.d.ts +2 -2
  271. package/es/components/carousel/styles.js +4 -4
  272. package/es/components/cascader/index.vdt.js +20 -29
  273. package/es/components/cascader/styles.d.ts +2 -2
  274. package/es/components/cascader/styles.js +3 -3
  275. package/es/components/checkbox/index.d.ts +1 -0
  276. package/es/components/checkbox/index.js +2 -0
  277. package/es/components/checkbox/index.vdt.js +4 -8
  278. package/es/components/checkbox/styles.d.ts +1 -1
  279. package/es/components/checkbox/styles.js +2 -2
  280. package/es/components/code/index.d.ts +1 -0
  281. package/es/components/code/index.js +2 -0
  282. package/es/components/code/index.vdt.js +2 -3
  283. package/es/components/code/styles.d.ts +1 -1
  284. package/es/components/code/styles.js +1 -1
  285. package/es/components/collapse/index.d.ts +1 -0
  286. package/es/components/collapse/index.js +13 -1
  287. package/es/components/collapse/index.vdt.js +2 -3
  288. package/es/components/collapse/item.d.ts +1 -0
  289. package/es/components/collapse/item.js +2 -0
  290. package/es/components/collapse/item.vdt.js +6 -8
  291. package/es/components/collapse/styles.d.ts +2 -3
  292. package/es/components/collapse/styles.js +5 -9
  293. package/es/components/colorpicker/drag.d.ts +1 -0
  294. package/es/components/colorpicker/drag.js +2 -0
  295. package/es/components/colorpicker/drag.vdt.js +3 -2
  296. package/es/components/colorpicker/index.d.ts +1 -0
  297. package/es/components/colorpicker/index.js +13 -1
  298. package/es/components/colorpicker/index.vdt.js +5 -6
  299. package/es/components/colorpicker/panel.d.ts +1 -0
  300. package/es/components/colorpicker/panel.js +2 -0
  301. package/es/components/colorpicker/panel.vdt.js +16 -19
  302. package/es/components/colorpicker/styles.d.ts +3 -3
  303. package/es/components/colorpicker/styles.js +8 -8
  304. package/es/components/config/index.d.ts +10 -0
  305. package/es/components/config/index.js +23 -0
  306. package/es/components/config/index.spec.d.ts +1 -0
  307. package/es/components/config/index.spec.js +71 -0
  308. package/es/components/context.d.ts +2 -1
  309. package/es/components/context.js +8 -2
  310. package/es/components/copy/index.d.ts +1 -0
  311. package/es/components/copy/index.js +2 -0
  312. package/es/components/copy/index.vdt.js +9 -9
  313. package/es/components/copy/styles.d.ts +1 -1
  314. package/es/components/copy/styles.js +1 -1
  315. package/es/components/datepicker/calendar.d.ts +1 -0
  316. package/es/components/datepicker/calendar.js +2 -0
  317. package/es/components/datepicker/calendar.vdt.js +38 -51
  318. package/es/components/datepicker/index.vdt.js +13 -16
  319. package/es/components/datepicker/styles.d.ts +3 -3
  320. package/es/components/datepicker/styles.js +6 -6
  321. package/es/components/datepicker/time.d.ts +1 -0
  322. package/es/components/datepicker/time.js +2 -0
  323. package/es/components/datepicker/time.vdt.js +2 -3
  324. package/es/components/diagram/diagram.d.ts +1 -0
  325. package/es/components/diagram/diagram.js +2 -0
  326. package/es/components/diagram/diagram.vdt.js +3 -4
  327. package/es/components/diagram/styles.d.ts +1 -1
  328. package/es/components/diagram/styles.js +1 -1
  329. package/es/components/dialog/alert.vdt.js +6 -10
  330. package/es/components/dialog/base.d.ts +4 -0
  331. package/es/components/dialog/base.js +2 -0
  332. package/es/components/dialog/base.vdt.js +15 -21
  333. package/es/components/dialog/index.d.ts +1 -1
  334. package/es/components/dialog/styles.d.ts +3 -3
  335. package/es/components/dialog/styles.js +12 -12
  336. package/es/components/drawer/index.vdt.js +3 -4
  337. package/es/components/drawer/styles.d.ts +1 -1
  338. package/es/components/drawer/styles.js +3 -3
  339. package/es/components/dropdown/dropdown.d.ts +1 -0
  340. package/es/components/dropdown/dropdown.js +4 -3
  341. package/es/components/dropdown/item.d.ts +1 -0
  342. package/es/components/dropdown/item.js +2 -0
  343. package/es/components/dropdown/item.vdt.js +2 -4
  344. package/es/components/dropdown/menu.d.ts +1 -0
  345. package/es/components/dropdown/menu.js +2 -0
  346. package/es/components/dropdown/menu.vdt.js +2 -3
  347. package/es/components/dropdown/styles.d.ts +2 -2
  348. package/es/components/dropdown/styles.js +4 -4
  349. package/es/components/dropdown/usePosition.js +2 -2
  350. package/es/components/editable/index.d.ts +1 -0
  351. package/es/components/editable/index.js +2 -0
  352. package/es/components/editable/index.vdt.js +3 -7
  353. package/es/components/editable/styles.d.ts +1 -1
  354. package/es/components/editable/styles.js +2 -2
  355. package/es/components/form/form.d.ts +1 -0
  356. package/es/components/form/form.js +2 -0
  357. package/es/components/form/form.vdt.js +2 -3
  358. package/es/components/form/item.d.ts +1 -0
  359. package/es/components/form/item.js +2 -0
  360. package/es/components/form/item.vdt.js +13 -19
  361. package/es/components/form/styles.d.ts +2 -2
  362. package/es/components/form/styles.js +5 -5
  363. package/es/components/form/useError.d.ts +1 -0
  364. package/es/components/grid/col.d.ts +1 -0
  365. package/es/components/grid/col.js +2 -0
  366. package/es/components/grid/col.vdt.js +3 -6
  367. package/es/components/grid/row.d.ts +1 -0
  368. package/es/components/grid/row.js +2 -0
  369. package/es/components/grid/row.vdt.js +2 -3
  370. package/es/components/grid/styles.d.ts +2 -2
  371. package/es/components/grid/styles.js +8 -18
  372. package/es/components/grid/useBreakpoints.d.ts +1 -1
  373. package/es/components/grid/useBreakpoints.js +2 -2
  374. package/es/components/grid/useGutter.d.ts +1 -0
  375. package/es/components/icon/index.d.ts +1 -0
  376. package/es/components/icon/index.js +2 -0
  377. package/es/components/icon/index.vdt.js +7 -11
  378. package/es/components/icon/styles.d.ts +1 -2
  379. package/es/components/icon/styles.js +7 -5
  380. package/es/components/input/index.d.ts +1 -0
  381. package/es/components/input/index.js +2 -0
  382. package/es/components/input/index.vdt.js +16 -26
  383. package/es/components/input/search.d.ts +1 -0
  384. package/es/components/input/search.js +2 -0
  385. package/es/components/input/search.vdt.js +5 -7
  386. package/es/components/input/styles.d.ts +2 -2
  387. package/es/components/input/styles.js +11 -11
  388. package/es/components/layout/aside.d.ts +1 -0
  389. package/es/components/layout/aside.js +2 -0
  390. package/es/components/layout/aside.vdt.js +5 -8
  391. package/es/components/layout/body.d.ts +2 -0
  392. package/es/components/layout/body.js +11 -5
  393. package/es/components/layout/footer.d.ts +1 -0
  394. package/es/components/layout/footer.js +15 -4
  395. package/es/components/layout/header.d.ts +3 -0
  396. package/es/components/layout/header.js +10 -6
  397. package/es/components/layout/helpers.d.ts +1 -0
  398. package/es/components/layout/helpers.js +1 -0
  399. package/es/components/layout/index.spec.d.ts +1 -0
  400. package/es/components/layout/index.spec.js +53 -0
  401. package/es/components/layout/layout.d.ts +2 -0
  402. package/es/components/layout/layout.js +7 -5
  403. package/es/components/layout/styles.d.ts +3 -3
  404. package/es/components/layout/styles.js +11 -11
  405. package/es/components/layout/template.vdt.js +2 -1
  406. package/es/components/menu/item.d.ts +1 -0
  407. package/es/components/menu/item.js +2 -0
  408. package/es/components/menu/item.vdt.js +7 -12
  409. package/es/components/menu/menu.d.ts +1 -0
  410. package/es/components/menu/menu.js +2 -0
  411. package/es/components/menu/menu.vdt.js +3 -6
  412. package/es/components/menu/styles.d.ts +3 -3
  413. package/es/components/menu/styles.js +11 -11
  414. package/es/components/menu/useDropdown.js +6 -1
  415. package/es/components/message/message.d.ts +1 -0
  416. package/es/components/message/message.js +2 -0
  417. package/es/components/message/message.vdt.js +12 -17
  418. package/es/components/message/messages.d.ts +1 -0
  419. package/es/components/message/messages.js +2 -0
  420. package/es/components/message/messages.vdt.js +2 -3
  421. package/es/components/message/styles.d.ts +2 -2
  422. package/es/components/message/styles.js +4 -4
  423. package/es/components/pagination/index.d.ts +1 -0
  424. package/es/components/pagination/index.js +2 -0
  425. package/es/components/pagination/index.vdt.js +14 -17
  426. package/es/components/pagination/styles.d.ts +1 -1
  427. package/es/components/pagination/styles.js +4 -4
  428. package/es/components/popover/content.vdt.js +5 -4
  429. package/es/components/popover/styles.d.ts +1 -1
  430. package/es/components/popover/styles.js +2 -2
  431. package/es/components/portal.d.ts +1 -0
  432. package/es/components/portal.js +3 -1
  433. package/es/components/progress/index.d.ts +1 -0
  434. package/es/components/progress/index.js +2 -0
  435. package/es/components/progress/index.vdt.js +14 -17
  436. package/es/components/progress/styles.d.ts +1 -1
  437. package/es/components/progress/styles.js +6 -6
  438. package/es/components/radio/index.d.ts +1 -0
  439. package/es/components/radio/index.js +2 -0
  440. package/es/components/radio/index.vdt.js +4 -7
  441. package/es/components/radio/styles.d.ts +1 -1
  442. package/es/components/radio/styles.js +2 -2
  443. package/es/components/rate/index.d.ts +1 -0
  444. package/es/components/rate/index.js +2 -0
  445. package/es/components/rate/index.vdt.js +4 -8
  446. package/es/components/rate/styles.d.ts +1 -1
  447. package/es/components/rate/styles.js +2 -2
  448. package/es/components/scrollSelect/index.d.ts +1 -0
  449. package/es/components/scrollSelect/index.js +2 -0
  450. package/es/components/scrollSelect/index.vdt.js +7 -12
  451. package/es/components/scrollSelect/styles.d.ts +1 -1
  452. package/es/components/scrollSelect/styles.js +2 -2
  453. package/es/components/select/base.d.ts +4 -0
  454. package/es/components/select/base.js +2 -0
  455. package/es/components/select/base.vdt.js +17 -21
  456. package/es/components/select/group.d.ts +1 -0
  457. package/es/components/select/group.js +2 -0
  458. package/es/components/select/group.vdt.js +3 -4
  459. package/es/components/select/menu.d.ts +1 -0
  460. package/es/components/select/menu.js +2 -0
  461. package/es/components/select/menu.vdt.js +9 -13
  462. package/es/components/select/option.d.ts +1 -0
  463. package/es/components/select/option.js +2 -0
  464. package/es/components/select/option.vdt.js +6 -8
  465. package/es/components/select/styles.d.ts +3 -3
  466. package/es/components/select/styles.js +8 -8
  467. package/es/components/select/useSearchable.d.ts +1 -0
  468. package/es/components/skeleton/item.d.ts +1 -0
  469. package/es/components/skeleton/item.js +13 -1
  470. package/es/components/skeleton/item.vdt.js +4 -7
  471. package/es/components/skeleton/skeleton.d.ts +1 -0
  472. package/es/components/skeleton/skeleton.js +13 -1
  473. package/es/components/skeleton/skeleton.vdt.js +4 -6
  474. package/es/components/skeleton/styles.d.ts +6 -0
  475. package/es/components/skeleton/styles.js +35 -0
  476. package/es/components/slider/index.d.ts +1 -0
  477. package/es/components/slider/index.js +2 -0
  478. package/es/components/slider/index.vdt.js +18 -22
  479. package/es/components/slider/styles.d.ts +1 -1
  480. package/es/components/slider/styles.js +2 -2
  481. package/es/components/spin/index.d.ts +1 -0
  482. package/es/components/spin/index.js +13 -1
  483. package/es/components/spin/index.vdt.js +6 -7
  484. package/es/components/spin/styles.d.ts +1 -1
  485. package/es/components/spin/styles.js +4 -4
  486. package/es/components/spinner/index.d.ts +1 -0
  487. package/es/components/spinner/index.js +2 -0
  488. package/es/components/spinner/index.vdt.js +15 -21
  489. package/es/components/spinner/styles.d.ts +1 -1
  490. package/es/components/spinner/styles.js +7 -7
  491. package/es/components/split/index.d.ts +2 -1
  492. package/es/components/split/index.js +2 -0
  493. package/es/components/split/index.vdt.js +7 -9
  494. package/es/components/split/styles.d.ts +4 -0
  495. package/es/components/split/styles.js +55 -0
  496. package/es/components/steps/context.d.ts +1 -0
  497. package/es/components/steps/index.d.ts +1 -0
  498. package/es/components/steps/index.js +13 -1
  499. package/es/components/steps/index.vdt.js +2 -3
  500. package/es/components/steps/step.d.ts +1 -0
  501. package/es/components/steps/step.js +13 -1
  502. package/es/components/steps/step.vdt.js +10 -16
  503. package/es/components/steps/styles.d.ts +3 -3
  504. package/es/components/steps/styles.js +18 -18
  505. package/es/components/switch/index.d.ts +1 -0
  506. package/es/components/switch/index.js +2 -0
  507. package/es/components/switch/index.vdt.js +6 -7
  508. package/es/components/switch/styles.d.ts +1 -1
  509. package/es/components/switch/styles.js +4 -4
  510. package/es/components/table/cell.d.ts +1 -0
  511. package/es/components/table/cell.js +13 -1
  512. package/es/components/table/cell.vdt.js +6 -6
  513. package/es/components/table/column.d.ts +1 -0
  514. package/es/components/table/column.js +2 -0
  515. package/es/components/table/column.vdt.js +24 -32
  516. package/es/components/table/index.spec.js +1 -1
  517. package/es/components/table/row.d.ts +1 -0
  518. package/es/components/table/row.js +21 -2
  519. package/es/components/table/row.vdt.js +3 -10
  520. package/es/components/table/styles.d.ts +2 -2
  521. package/es/components/table/styles.js +6 -6
  522. package/es/components/table/table.d.ts +2 -1
  523. package/es/components/table/table.js +3 -1
  524. package/es/components/table/table.vdt.js +16 -20
  525. package/es/components/table/useColumns.d.ts +1 -0
  526. package/es/components/table/useFixedColumns.d.ts +2 -1
  527. package/es/components/table/useGroup.d.ts +1 -0
  528. package/es/components/table/usePagination.js +1 -1
  529. package/es/components/table/useResizable.d.ts +1 -0
  530. package/es/components/table/useSortable.d.ts +1 -0
  531. package/es/components/tabs/index.d.ts +4 -0
  532. package/es/components/tabs/index.js +2 -0
  533. package/es/components/tabs/index.vdt.js +9 -10
  534. package/es/components/tabs/styles.d.ts +1 -1
  535. package/es/components/tabs/styles.js +15 -15
  536. package/es/components/tabs/tab.d.ts +1 -0
  537. package/es/components/tabs/tab.js +2 -0
  538. package/es/components/tabs/tab.vdt.js +3 -5
  539. package/es/components/tabs/useActiveBar.js +2 -1
  540. package/es/components/tabs/useScroll.js +2 -1
  541. package/es/components/tag/base.d.ts +1 -0
  542. package/es/components/tag/base.js +13 -1
  543. package/es/components/tag/index.vdt.js +4 -5
  544. package/es/components/tag/styles.d.ts +2 -2
  545. package/es/components/tag/styles.js +7 -7
  546. package/es/components/tag/tags.d.ts +1 -0
  547. package/es/components/tag/tags.js +2 -0
  548. package/es/components/tag/tags.vdt.js +5 -11
  549. package/es/components/timeline/item.d.ts +1 -0
  550. package/es/components/timeline/item.js +13 -1
  551. package/es/components/timeline/item.vdt.js +4 -5
  552. package/es/components/timeline/styles.d.ts +2 -2
  553. package/es/components/timeline/styles.js +6 -6
  554. package/es/components/timeline/timeline.d.ts +1 -0
  555. package/es/components/timeline/timeline.js +13 -1
  556. package/es/components/timeline/timeline.vdt.js +2 -3
  557. package/es/components/timepicker/index.d.ts +2 -1
  558. package/es/components/timepicker/panelPicker.vdt.js +13 -17
  559. package/es/components/timepicker/selectPicker.d.ts +1 -0
  560. package/es/components/timepicker/selectPicker.js +2 -0
  561. package/es/components/timepicker/selectPicker.vdt.js +4 -4
  562. package/es/components/timepicker/styles.d.ts +1 -1
  563. package/es/components/timepicker/styles.js +2 -2
  564. package/es/components/tip/index.vdt.js +5 -6
  565. package/es/components/tip/styles.d.ts +1 -1
  566. package/es/components/tip/styles.js +2 -2
  567. package/es/components/tooltip/content.vdt.js +4 -9
  568. package/es/components/tooltip/styles.d.ts +1 -1
  569. package/es/components/tooltip/styles.js +6 -6
  570. package/es/components/transfer/index.d.ts +1 -0
  571. package/es/components/transfer/index.js +2 -0
  572. package/es/components/transfer/index.vdt.js +20 -25
  573. package/es/components/transfer/styles.d.ts +1 -1
  574. package/es/components/transfer/styles.js +2 -2
  575. package/es/components/tree/index.d.ts +1 -0
  576. package/es/components/tree/index.js +2 -0
  577. package/es/components/tree/index.vdt.js +19 -30
  578. package/es/components/tree/styles.d.ts +1 -1
  579. package/es/components/tree/styles.js +2 -2
  580. package/es/components/treeSelect/index.vdt.js +2 -3
  581. package/es/components/treeSelect/styles.d.ts +1 -1
  582. package/es/components/treeSelect/styles.js +1 -1
  583. package/es/components/upload/index.d.ts +1 -0
  584. package/es/components/upload/index.js +2 -0
  585. package/es/components/upload/index.vdt.js +39 -50
  586. package/es/components/upload/styles.d.ts +2 -2
  587. package/es/components/upload/styles.js +3 -3
  588. package/es/components/utils.d.ts +3 -1
  589. package/es/components/utils.js +36 -9
  590. package/es/components/virtual.js +5 -2
  591. package/es/components/wave/index.d.ts +1 -0
  592. package/es/components/wave/index.js +4 -2
  593. package/es/components/wave/styles.d.ts +1 -1
  594. package/es/components/wave/styles.js +2 -2
  595. package/es/index.d.ts +3 -2
  596. package/es/index.js +3 -2
  597. package/es/site/data/components/icon/demos/icons/index.d.ts +1 -0
  598. package/es/site/data/components/icon/demos/icons/index.js +17 -5
  599. package/es/site/data/components/icon/demos/icons/react.d.ts +1 -0
  600. package/es/site/data/components/icon/demos/icons/react.js +4 -2
  601. package/es/site/data/components/layout/demos/aside/react.js +2 -1
  602. package/es/site/data/components/layout/demos/basic/react.js +13 -4
  603. package/es/site/data/components/table/demos/pagination/index.d.ts +4 -0
  604. package/es/site/data/components/table/demos/pagination/index.js +11 -2
  605. package/es/site/data/components/table/demos/pagination/react.d.ts +4 -0
  606. package/es/site/data/components/table/demos/pagination/react.js +11 -3
  607. package/es/site/src/client.js +1 -0
  608. package/es/site/src/pages/document/styles.d.ts +1 -1
  609. package/es/site/src/pages/document/styles.js +2 -2
  610. package/es/site/src/pages/layout.d.ts +4 -0
  611. package/es/site/src/pages/layout.js +13 -2
  612. package/es/site/src/pages/styles.d.ts +1 -1
  613. package/es/site/src/pages/styles.js +2 -2
  614. package/es/styles/fonts/iconfont.d.ts +1 -1
  615. package/es/styles/fonts/iconfont.js +4 -1
  616. package/es/styles/global.js +4 -4
  617. package/es/styles/theme.d.ts +1 -1
  618. package/es/styles/theme.js +4 -53
  619. package/es/styles/utils.d.ts +1 -0
  620. package/es/styles/utils.js +3 -0
  621. package/index.ts +3 -2
  622. package/package.json +3 -3
  623. package/styles/fonts/iconfont.ts +304 -302
  624. package/styles/global.ts +4 -3
  625. package/styles/theme.ts +3 -57
  626. package/styles/utils.ts +5 -1
  627. package/es/components/skeleton/style.d.ts +0 -6
  628. package/es/components/skeleton/style.js +0 -35
  629. package/es/components/split/style.d.ts +0 -4
  630. package/es/components/split/style.js +0 -55
  631. package/es/site/data/components/menu/demos/collapse/react.d.ts +0 -11
  632. package/es/site/data/components/menu/demos/size/react.d.ts +0 -7
package/components/layout/layout.ts CHANGED
@@ -2,14 +2,18 @@ import {Component, TypeDefs, inject, provide} from 'intact';
2
2
  import template from './template.vdt';
3
3
  import {makeLayoutStyles} from './styles';
4
4
  import {addStyle} from '../utils';
5
- import {ROOT_LAYOUT, LAYOUT, getStyle} from './helpers';
5
+ import {ROOT_LAYOUT, LAYOUT, getStyle, BODY} from './helpers';
6
6
  import {useParse} from './useParse';
7
+ import type { Body } from './body';
8
+ import { useConfigContext } from '../config';
7
9
 
8
10
  export class Layout extends Component {
9
11
  static template = template;
10
12
 
11
13
  public parse = useParse();
12
14
  public layout = inject<Layout | null>(LAYOUT, null);
15
+ private body = inject<Body | null>(BODY, null);
16
+ private config = useConfigContext();
13
17
 
14
18
  init() {
15
19
  provide(LAYOUT, this);
@@ -21,10 +25,11 @@ export class Layout extends Component {
21
25
  private getClassNames() {
22
26
  const {className, children} = this.get();
23
27
  const {hasAside} = this.parse();
28
+ const { k } = this.config;
24
29
  return {
25
- 'k-layout': true,
26
- [`k-has-aside`]: hasAside,
27
- [makeLayoutStyles()]: true,
30
+ [`${k}-layout`]: true,
31
+ [`${k}-has-aside`]: hasAside,
32
+ [makeLayoutStyles(k)]: true,
28
33
  [className as string]: className,
29
34
  };
30
35
  }
@@ -32,7 +37,7 @@ export class Layout extends Component {
32
37
  private getStyles() {
33
38
  const style = this.get<string>('style');
34
39
  const layout = this.layout;
35
- if (!layout) return style;
40
+ if (!layout || this.body) return style;
36
41
 
37
42
  const {hasFixedHeader, headerHeight, hasFixedAside, asideWidth} = layout.parse();
38
43
  if (!hasFixedHeader && !hasFixedAside) return style;
package/components/layout/styles.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import {css} from '@emotion/css';
2
2
  import {theme, setDefault} from '../../styles/theme';
3
- import {deepDefaults, getLeft} from '../../styles/utils';
3
+ import {deepDefaults, getLeft, setAlpha} from '../../styles/utils';
4
4
  import '../../styles/global';
5
5
  import {menu} from '../menu/styles';
6
6
 
@@ -12,12 +12,12 @@ const defaults = {
12
12
  get color() { return menu.item.color },
13
13
  get bgColor() { return menu.bgColor },
14
14
  light: {
15
- get color() { return menu.light.bgColor },
15
+ get color() { return menu.light.item.color },
16
16
  get bgColor() { return menu.light.bgColor },
17
17
  get border() { return menu.light.border },
18
18
  },
19
19
  white: {
20
- get color() { return menu.white.bgColor },
20
+ get color() { return menu.white.item.color },
21
21
  get bgColor() { return menu.white.bgColor },
22
22
  get border() { return menu.white.border },
23
23
  },
@@ -36,25 +36,25 @@ export function getCollapseWidth() {
36
36
  return layout.collapsedWidth;
37
37
  }
38
38
 
39
- export function makeLayoutStyles() {
39
+ export function makeLayoutStyles(k: string) {
40
40
  return css`
41
41
  display: flex;
42
42
  flex-direction: column;
43
43
  flex: 1;
44
44
  transition: padding-left ${layout.transition};
45
- &.k-has-aside {
45
+ &.${k}-has-aside {
46
46
  flex-direction: row;
47
47
  }
48
- .k-layout-footer {
48
+ .${k}-layout-footer {
49
49
  padding: ${layout.footerPadding};
50
50
  }
51
- .k-layout-body {
51
+ .${k}-layout-body {
52
52
  flex: 1;
53
53
  }
54
54
  `
55
55
  }
56
56
 
57
- export function makeHeaderStyles() {
57
+ export function makeHeaderStyles(k: string) {
58
58
  return css`
59
59
  display: flex;
60
60
  align-items: center;
@@ -62,28 +62,44 @@ export function makeHeaderStyles() {
62
62
  background: ${layout.bgColor};
63
63
  left: 0;
64
64
  transition: left ${layout.transition};
65
- &.k-fixed {
65
+ &.${k}-fixed {
66
66
  position: fixed;
67
67
  left: 0;
68
68
  right: 0;
69
69
  top: 0;
70
70
  z-index: ${theme.midZIndex + 1};
71
71
  }
72
+ > .${k}-menu {
73
+ background: transparent !important;
74
+ }
75
+
76
+ &.${k}-blur {
77
+ backdrop-filter: blur(20px);
78
+ background: ${setAlpha(layout.bgColor, 0.1)};
79
+ }
80
+ &.${k}-box-shadow {
81
+ border-bottom: none !important;
82
+ box-shadow: ${theme.boxShadow};
83
+ }
84
+
72
85
  ${themes.map(theme => {
73
86
  if (theme === 'dark') return;
74
87
  const styles = layout[theme];
75
88
  return css`
76
- &.k-${theme} {
89
+ &.${k}-${theme} {
77
90
  background: ${styles.bgColor};
78
91
  color: ${styles.color};
79
92
  border-bottom: ${styles.border};
93
+ &.${k}-blur {
94
+ background: ${setAlpha(styles.bgColor, 0.1)};
95
+ }
80
96
  }
81
97
  `
82
98
  })}
83
99
  `;
84
100
  }
85
101
 
86
- export function makeAsideStyles() {
102
+ export function makeAsideStyles(k: string) {
87
103
  return css`
88
104
  transition: width ${layout.transition};
89
105
  display: flex;
@@ -94,14 +110,14 @@ export function makeAsideStyles() {
94
110
  if (theme === 'dark') return;
95
111
  const styles = layout[theme];
96
112
  return css`
97
- &.k-${theme} {
113
+ &.${k}-${theme} {
98
114
  background: ${styles.bgColor};
99
115
  color: ${styles.color};
100
116
  border-right: ${styles.border};
101
117
  }
102
118
  `
103
119
  })}
104
- &.k-fixed {
120
+ &.${k}-fixed {
105
121
  position: fixed;
106
122
  overflow: auto;
107
123
  left: 0;
@@ -109,7 +125,7 @@ export function makeAsideStyles() {
109
125
  bottom: 0;
110
126
  z-index: ${theme.midZIndex};
111
127
  }
112
- .k-menu {
128
+ .${k}-menu {
113
129
  width: auto !important;
114
130
  }
115
131
  `
package/components/layout/template.vdt CHANGED
@@ -1,8 +1,9 @@
1
1
  import {getRestProps} from '../utils';
2
2
 
3
3
  const {children, style} = this.get();
4
+ const { k } = this.config;
4
5
 
5
6
  <div class={this.getClassNames()}
6
- style={this.getStyles ? this.getStyles() : style}
7
+ style={this.getStyles ? this.getStyles(k) : style}
7
8
  {...getRestProps(this)}
8
9
  >{children}</div>
package/components/menu/item.ts CHANGED
@@ -10,6 +10,7 @@ import {useRouter, navigate} from '../../hooks/useRouter';
10
10
  import {useRecordItem} from '../../hooks/useRecordComponent';
11
11
  import {MENU_RECORD_KEY, useHighlightItem} from './useHighlight';
12
12
  import {Events} from '../types';
13
+ import { useConfigContext } from '../config';
13
14
 
14
15
  export interface MenuItemProps {
15
16
  key: Key
@@ -52,6 +53,7 @@ export class MenuItem extends Component<MenuItemProps, MenuItemEvents> {
52
53
  private expanded = useExpanded(this.rootMenu, this.parentMenu);
53
54
  private dropdown = useDropdown(this.rootMenu, this.parentMenu);
54
55
  private router = useRouter();
56
+ private config = useConfigContext();
55
57
 
56
58
  init() {
57
59
  provide(MENU_ITEM, this);
package/components/menu/item.vdt CHANGED
@@ -18,24 +18,25 @@ const {
18
18
  tooltipContents, iconVNode, titleVNodes,
19
19
  position, isCollapse,
20
20
  } = this.dropdown();
21
+ const { k } = this.config;
21
22
  const classNameObj = {
22
- 'k-menu-item': true,
23
+ [`${k}-menu-item`]: true,
23
24
  [className]: className,
24
- 'k-expanded': isExpanded,
25
- 'k-disabled': disabled,
26
- 'k-active': isSelected(key),
27
- 'k-highlighted': isHighlighted(key),
28
- [makeItemStyles()]: true,
25
+ [`${k}-expanded`]: isExpanded,
26
+ [`${k}-disabled`]: disabled,
27
+ [`${k}-active`]: isSelected(key),
28
+ [`${k}-highlighted`]: isHighlighted(key),
29
+ [makeItemStyles(k)]: true,
29
30
  };
30
31
 
31
32
  const showDot = isTopItem && !iconVNode && isNullOrUndefined(dot) ? rootDot : dot;
32
33
  const title = (children) => (
33
- <div class={{'k-menu-title': true, [makeTitleStyles()]: true}}
34
+ <div class={{[`${k}-menu-title`]: true, [makeTitleStyles(k)]: true}}
34
35
  ev-click={this.onClick.bind(this, subMenuVNode)}
35
36
  >
36
- <Icon class="k-menu-dot ion-record" v-if={showDot} />
37
- <div class="k-menu-name">{children}</div>
38
- <Icon class="k-menu-arrow k-icon-down" v-if={subMenuVNode} />
37
+ <Icon class={`${k}-menu-dot ion-record`} v-if={showDot} />
38
+ <div class={`${k}-menu-name`}>{children}</div>
39
+ <Icon class={`${k}-menu-arrow ${k}-icon-down`} v-if={subMenuVNode} />
39
40
  </div>
40
41
  );
41
42
 
package/components/menu/menu.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import {Component, TypeDefs, provide, inject, Key} from 'intact';
2
2
  import template from './menu.vdt';
3
3
  import {useHighlight} from './useHighlight';
4
+ import { useConfigContext } from '../config';
4
5
 
5
6
  export interface MenuProps<K extends Key = Key> {
6
7
  expandedKeys?: K[]
@@ -49,6 +50,7 @@ export class Menu<K extends Key = Key> extends Component<MenuProps<K>, MenuEvent
49
50
  public parentMenu = inject<Menu | null>(MENU, null);
50
51
  public subExpandedKeys?: Set<K>;
51
52
  public highlight?: ReturnType<typeof useHighlight>;
53
+ private config = useConfigContext();
52
54
 
53
55
  init() {
54
56
  provide(MENU, this);
package/components/menu/menu.vdt CHANGED
@@ -8,14 +8,15 @@ const {children, className} = this.get();
8
8
  const {collapse, theme, type, size} = (this.rootMenu || this).get();
9
9
  const isRootMenu = !this.rootMenu;
10
10
  const isDropdownMenu = !isRootMenu && isDropdown(this.rootMenu);
11
+ const { k } = this.config;
11
12
  const classNameObj = {
12
- 'k-menu': true,
13
+ [`${k}-menu`]: true,
13
14
  [className]: className,
14
- [`k-${theme}`]: (isRootMenu || isDropdownMenu) && theme,
15
- [`k-${size}`]: isRootMenu && size !== 'default',
16
- 'k-collapsed': isRootMenu && collapse,
17
- [`k-${type}`]: isRootMenu && type,
18
- [makeMenuStyles()]: true,
15
+ [`${k}-${theme}`]: (isRootMenu || isDropdownMenu) && theme,
16
+ [`${k}-${size}`]: isRootMenu && size !== 'default',
17
+ [`${k}-collapsed`]: isRootMenu && collapse,
18
+ [`${k}-${type}`]: isRootMenu && type,
19
+ [makeMenuStyles(k)]: true,
19
20
  };
20
21
 
21
22
  const header = <b:header />
@@ -23,8 +24,8 @@ const content = (
23
24
  <template>
24
25
  <div v-if={$blocks.header}
25
26
  class={{
26
- 'k-menu-header': true,
27
- [makeTitleStyles()]: true
27
+ [`${k}-menu-header`]: true,
28
+ [makeTitleStyles(k)]: true
28
29
  }}
29
30
  >
30
31
  <template v-if={!collapse}>{header}</template>
package/components/menu/styles.ts CHANGED
@@ -85,11 +85,11 @@ setDefault(() => {
85
85
 
86
86
  export {menu};
87
87
 
88
- export function makeMenuStyles() {
89
- // we must increase the priority by adding &.k-menu
88
+ export function makeMenuStyles(k: string) {
89
+ // we must increase the priority by adding &.${k}-menu
90
90
  // to override the css of dropdownMenu
91
91
  return css`
92
- &.k-menu {
92
+ &.${k}-menu {
93
93
  width: ${menu.width};
94
94
  transition: width ${menu.transition};
95
95
  background: ${menu.bgColor};
@@ -97,20 +97,20 @@ export function makeMenuStyles() {
97
97
  }
98
98
 
99
99
  // nested menu
100
- &:not(.k-dropdown-menu) &:not(.k-dropdown-menu) {
100
+ &:not(.${k}-dropdown-menu) &:not(.${k}-dropdown-menu) {
101
101
  width: auto;
102
102
  background: ${menu.subBgColor};
103
- .k-menu-title {
103
+ .${k}-menu-title {
104
104
  padding-left: calc(${getLeft(menu.item.padding)} + ${menu.icon.width} + ${menu.icon.gap});
105
105
  }
106
106
  }
107
- &:not(.k-dropdown-menu) &:not(.k-dropdown-menu) &:not(.k-dropdown-menu) {
108
- .k-menu-title {
107
+ &:not(.${k}-dropdown-menu) &:not(.${k}-dropdown-menu) &:not(.${k}-dropdown-menu) {
108
+ .${k}-menu-title {
109
109
  padding-left: calc(${getLeft(menu.item.padding)} + ${menu.icon.width} * 2 + ${menu.icon.gap});
110
110
  }
111
111
  }
112
112
 
113
- .k-icon {
113
+ .${k}-icon {
114
114
  width: ${menu.icon.width};
115
115
  margin-right: ${menu.icon.gap};
116
116
  text-align: center;
@@ -119,7 +119,7 @@ export function makeMenuStyles() {
119
119
 
120
120
 
121
121
  // header
122
- .k-menu-header {
122
+ .${k}-menu-header {
123
123
  height: ${menu.header.height};
124
124
  font-size: ${menu.header.fontSize};
125
125
  font-weight: bold;
@@ -130,36 +130,36 @@ export function makeMenuStyles() {
130
130
  ${(['light', 'white'] as const).map(theme => {
131
131
  const styles = menu[theme];
132
132
  return css`
133
- &.k-${theme} {
133
+ &.${k}-${theme} {
134
134
  background: ${styles.bgColor};
135
- .k-menu-header {
135
+ .${k}-menu-header {
136
136
  color: ${styles.item.color};
137
137
  border-bottom: ${styles.border};
138
138
  }
139
- .k-menu-item {
140
- .k-menu-title {
139
+ .${k}-menu-item {
140
+ .${k}-menu-title {
141
141
  color: ${styles.item.color};
142
142
  &:hover {
143
143
  color: ${styles.item.hoverColor};
144
144
  }
145
145
  }
146
- &.k-highlighted {
147
- > .k-menu-title {
146
+ &.${k}-highlighted {
147
+ > .${k}-menu-title {
148
148
  color: ${styles.item.hoverColor};
149
149
  }
150
150
  }
151
- &.k-disabled {
152
- > .k-menu-title {
151
+ &.${k}-disabled {
152
+ > .${k}-menu-title {
153
153
  color: ${styles.item.disabledColor} !important;
154
154
  }
155
155
  }
156
156
  }
157
- .k-menu:not(.k-dropdown-menu) {
157
+ .${k}-menu:not(.${k}-dropdown-menu) {
158
158
  background: ${styles.subBgColor};
159
159
  }
160
160
 
161
- &.k-horizontal {
162
- .k-menu-header {
161
+ &.${k}-horizontal {
162
+ .${k}-menu-header {
163
163
  border-right: ${styles.border};
164
164
  }
165
165
  }
@@ -167,10 +167,10 @@ export function makeMenuStyles() {
167
167
  `;
168
168
  })}
169
169
 
170
- &.k-white {
170
+ &.${k}-white {
171
171
  // active
172
- .k-menu-item.k-active {
173
- > .k-menu-title {
172
+ .${k}-menu-item.${k}-active {
173
+ > .${k}-menu-title {
174
174
  color: ${menu.white.active.color } !important;
175
175
  background: ${menu.white.active.bgColor};
176
176
  }
@@ -182,10 +182,10 @@ export function makeMenuStyles() {
182
182
  const styles = menu[size];
183
183
 
184
184
  return css`
185
- &.k-${size} {
185
+ &.${k}-${size} {
186
186
  width: ${styles.width};
187
187
  font-size: ${styles.fontSize};
188
- .k-menu {
188
+ .${k}-menu {
189
189
  font-size: ${styles.fontSize};
190
190
  }
191
191
  }
@@ -193,31 +193,31 @@ export function makeMenuStyles() {
193
193
  })}
194
194
 
195
195
  // collapse
196
- &.k-collapsed {
196
+ &.${k}-collapsed {
197
197
  width: calc(${menu.icon.width} + ${getLeft(menu.item.padding)} * 2);
198
- .k-icon {
198
+ .${k}-icon {
199
199
  margin-right: 0;
200
200
  }
201
- .k-menu-arrow {
201
+ .${k}-menu-arrow {
202
202
  display: none;
203
203
  }
204
204
  }
205
205
 
206
206
  // dropdown
207
- &.k-dropdown-menu {
207
+ &.${k}-dropdown-menu {
208
208
  width: auto;
209
209
  min-width: ${menu.dropdown.minWidth};
210
- .k-menu-arrow {
210
+ .${k}-menu-arrow {
211
211
  transform: rotate(-90deg)
212
212
  }
213
213
  }
214
214
 
215
215
  // horizontal
216
- &.k-horizontal {
216
+ &.${k}-horizontal {
217
217
  width: auto;
218
218
  display: flex;
219
219
  align-items: center;
220
- .k-menu-header {
220
+ .${k}-menu-header {
221
221
  border-bottom: none;
222
222
  border-right: ${menu.header.borderBottom};
223
223
  }
@@ -225,23 +225,23 @@ export function makeMenuStyles() {
225
225
  `
226
226
  }
227
227
 
228
- export function makeTitleStyles() {
228
+ export function makeTitleStyles(k: string) {
229
229
  const item = menu.item;
230
230
  return css`
231
231
  display: flex;
232
232
  align-items: center;
233
- padding: ${menu.item.padding};
234
- color: ${menu.item.color};
233
+ padding: ${item.padding};
234
+ color: ${item.color};
235
235
  white-space: nowrap;
236
236
  overflow: hidden;
237
237
  flex-wrap: nowrap;
238
238
  `;
239
239
  }
240
240
 
241
- export function makeItemStyles() {
241
+ export function makeItemStyles(k: string) {
242
242
  const item = menu.item;
243
243
  return css`
244
- .k-menu-title {
244
+ .${k}-menu-title {
245
245
  cursor: pointer;
246
246
  height: ${menu.item.height};
247
247
  transition: all ${menu.transition};
@@ -249,51 +249,57 @@ export function makeItemStyles() {
249
249
  color: ${menu.item.hoverColor};
250
250
  }
251
251
  }
252
- .k-menu-name {
252
+ .${k}-menu-name {
253
253
  flex: 1;
254
254
  display: flex;
255
255
  align-items: center;
256
+ min-width: 0;
257
+ span {
258
+ overflow: hidden;
259
+ text-overflow: ellipsis;
260
+ min-width: 0;
261
+ }
256
262
  }
257
- .k-menu-arrow {
263
+ .${k}-menu-arrow {
258
264
  transition: transform ${menu.transition};
259
265
  margin-left: ${menu.icon.gap};
260
266
  }
261
267
 
262
268
  // expanded
263
- &.k-expanded {
264
- > .k-menu-title {
269
+ &.${k}-expanded {
270
+ > .${k}-menu-title {
265
271
  color: ${menu.item.hoverColor};
266
- .k-menu-arrow {
272
+ .${k}-menu-arrow {
267
273
  transform: rotateX(180deg);
268
274
  }
269
275
  }
270
276
  }
271
277
 
272
278
  // highlighted
273
- &.k-highlighted {
274
- > .k-menu-title {
279
+ &.${k}-highlighted {
280
+ > .${k}-menu-title {
275
281
  color: ${menu.item.hoverColor};
276
282
  }
277
283
  }
278
284
 
279
285
  // active
280
- &.k-active {
281
- > .k-menu-title {
286
+ &.${k}-active {
287
+ > .${k}-menu-title {
282
288
  color: ${menu.item.hoverColor} !important;
283
289
  background: ${menu.item.activeBgColor};
284
290
  }
285
291
  }
286
292
 
287
293
  // disabled
288
- &.k-disabled {
289
- > .k-menu-title {
294
+ &.${k}-disabled {
295
+ > .${k}-menu-title {
290
296
  color: ${menu.item.disabledColor} !important;
291
297
  cursor: not-allowed;
292
298
  }
293
299
  }
294
300
 
295
301
  // dot
296
- .k-menu-dot {
302
+ .${k}-menu-dot {
297
303
  font-size: ${menu.item.dotFontSize};
298
304
  transform: scale(.4);
299
305
  }
package/components/menu/useDropdown.ts CHANGED
@@ -1,4 +1,4 @@
1
- import {useInstance, VNodeComponentClass, onBeforeMount, onBeforeUpdate, inject} from 'intact';
1
+ import {useInstance, VNodeComponentClass, onBeforeMount, onBeforeUpdate, inject, createVNode} from 'intact';
2
2
  import {Menu, MenuItem, MenuProps} from './';
3
3
  import {Icon} from '../icon';
4
4
  import {
@@ -52,6 +52,10 @@ export function useDropdown(rootMenu: Menu, parentMenu: Menu) {
52
52
  iconVNode = vNode;
53
53
  }
54
54
  } else {
55
+ if (isStringOrNumberNotEmpty(vNode) || isTextVNode(vNode)) {
56
+ // wrap with span for showing text ellipsis
57
+ vNode = createVNode('span', null, vNode);
58
+ }
55
59
  titleVNodes.push(vNode);
56
60
  }
57
61
  });
package/components/message/message.ts CHANGED
@@ -12,6 +12,7 @@ import {Messages} from './messages';
12
12
  import {useDelayClose} from '../../hooks/useDelayClose';
13
13
  import {isObject} from 'intact-shared';
14
14
  import {bind} from '../utils';
15
+ import { useConfigContext } from '../config';
15
16
 
16
17
  export interface MessageProps {
17
18
  content?: Children
@@ -79,6 +80,7 @@ export class Message extends Component<MessageProps> {
79
80
  this.close,
80
81
  this.get('duration')!
81
82
  );
83
+ private config = useConfigContext();
82
84
 
83
85
  @bind
84
86
  close() {
package/components/message/message.vdt CHANGED
@@ -4,11 +4,12 @@ import {getRestProps} from '../utils';
4
4
  import {makeMessageStyles} from './styles';
5
5
 
6
6
  const {type, content, children, closable, hideIcon} = this.get();
7
+ const { k } = this.config;
7
8
 
8
9
  const classNameObj = {
9
- "k-message": true,
10
- [`k-${type}`]: type,
11
- [makeMessageStyles()]: true,
10
+ [`${k}-message`]: true,
11
+ [`${k}-${type}`]: type,
12
+ [makeMessageStyles(k)]: true,
12
13
  };
13
14
 
14
15
  const iconMap = {
@@ -23,27 +24,27 @@ const iconMap = {
23
24
  ev-mouseenter={this.delayClose.onMouseEnter}
24
25
  ev-mouseleave={this.delayClose.onMouseLeave}
25
26
  >
26
- <div class="k-message-container">
27
- <div class={{"k-message-wrapper": true, "k-with-icon": !hideIcon}}>
27
+ <div class={`${k}-message-container`}>
28
+ <div class={{[`${k}-message-wrapper`]: true, [`${k}-with-icon`]: !hideIcon}}>
28
29
  <Icon v-if={!hideIcon}
29
30
  class={{
30
- [`k-icon-${iconMap[type] || iconMap.info}`]: true,
31
- "k-message-icon": true,
31
+ [`${k}-icon-${iconMap[type] || iconMap.info}`]: true,
32
+ [`${k}-message-icon`]: true,
32
33
  }}
33
34
  />
34
35
  <div v-if={typeof content === 'string' || typeof content === 'number'}
35
- class="k-message-content" innerHTML={content}
36
+ class={`${k}-message-content`} innerHTML={content}
36
37
  ></div>
37
- <div v-else class="k-message-content">{children}</div>
38
+ <div v-else class={`${k}-message-content`}>{children}</div>
38
39
  </div>
39
40
  <Button
40
41
  v-if={closable}
41
42
  type="none"
42
43
  icon
43
- class="k-message-close"
44
+ class={`${k}-message-close`}
44
45
  ev-click={this.close}
45
46
  >
46
- <Icon class="k-icon-close" hoverable />
47
+ <Icon class={`${k}-icon-close`} hoverable />
47
48
  </Button>
48
49
  </div>
49
50
  </div>
package/components/message/messages.ts CHANGED
@@ -1,11 +1,13 @@
1
1
  import {Component, VNodeComponentClass} from 'intact';
2
2
  import template from './messages.vdt';
3
3
  import type {Message} from './message';
4
+ import { useConfigContext } from '../config';
4
5
 
5
6
  export class Messages extends Component {
6
7
  static template = template;
7
8
 
8
9
  private messages: VNodeComponentClass<Message>[] = [];
10
+ private config = useConfigContext();
9
11
 
10
12
  notice(message: VNodeComponentClass<Message>) {
11
13
  this.messages.push(message);
package/components/message/messages.vdt CHANGED
@@ -1,7 +1,9 @@
1
1
  import {TransitionGroup, Transition} from 'intact';
2
2
  import {makeMessagesStyles} from './styles';
3
3
 
4
- <div class={{"k-messages": true, [makeMessagesStyles()]: true}}>
4
+ const { k } = this.config;
5
+
6
+ <div class={{[`${k}-messages`]: true, [makeMessagesStyles(k)]: true}}>
5
7
  <TransitionGroup>
6
8
  <template v-for={this.messages} key={$value.key}>
7
9
  {$value}